// if use vite: @use '@sdsjs/design-colors' as designColors
// if use vue-cli or webpack: @use '~@sdsjs/design-colors' as designColors
@use '@sdsjs/design-colors' as designColors;

@debug designColors.$blue; // [#e6f1ff, #b5d4ff, #8cb8ff, #639aff, #3b79ff, #1355ff, #0439d9, #0027b3, #001a8c, #000f66]
@debug designColors.$red; // [#ffe9e6, #ffbab3, #ff928a, #ff6661, #f23535, #e50e15, #bf020f, #99000f, #73000f, #4d000d]
@debug designColors.$green; // [#e1faea, #98edbb, #6ce0a0, #44d489, #20c776, #00b966, #009456, #006e44, #00472e, #002117]
@debug designColors.$orange; // [#fff3e6, #ffd1a3, #ffb87a, #ff9d52, #ff7e29, #fb5d01, #d44700, #ad3400, #872400, #611700]
@debug designColors.$yellow; // [#fffbe6, #ffefb0, #ffe387, #ffd45e, #fabf34, #eda20d, #c77e00, #a16000, #7a4500, #542d00]
@debug designColors.$purple; // [#fbf0ff, #f5e0ff, #e6b8ff, #cc89f5, #ae5de8, #9135dc, #6e22b5, #4f148f, #340969, #1f0542]
@debug designColors.$pink; // [#fff0f6, #ffe0ed, #ffb8d8, #f78bbf, #eb5ea7, #de3692, #b8237a, #911461, #6b0a49, #450631]
@debug designColors.$cyan; // [#e6fffb, #aaf2e9, #7ce6db, #52d9d0, #2dccc7, #0bbebe, #029499, #006b73, #00454d, #002126]

@debug designColors.$blue-primary; // #1355ff
@debug designColors.$blue-1; // #e6f1ff
@debug designColors.$blue-dark; // [#11172c, #101d45, #14285b, #14317e, #133ead, #134bdc, #376fe8, #5f93f3, #88b3f8, #b2d0fa]
@debug designColors.$blue-dark-primary; // #134bdc
@debug designColors.$blue-dark-1; // #11172c
...

(
  'blue': #1355FF,
  'red': #E50E15,
  'green': #00B966,
  'orange': #FB5D01,
  'yellow': #EDA20D,
  'purple': #9135DC,
  'pink': #DE3692,
  'cyan': #0BBEBE
)

// override blue primary color 
@use "@sdsjs/design-colors" as designColors with (
  $preset-primary-colors: (
    'blue': #0d91f3,
  )
);

@debug designColors.$blue; // [#e6f8ff, #b0e7ff, #87d7ff, #5ec4ff, #36aeff, #0d91f3, #006dcc, #0053a6, #003c80, #002759]

// var.scss
@use '@sdsjs/design-colors' as designColors;

$blue: designColors.generate(#0d91f3);
$blue-dark: designColors.generate(#0d91f3, (theme: dark, backgroundColor: #141414));
@debug $blue; // [#e6f8ff, #b0e7ff, #87d7ff, #5ec4ff, #36aeff, #0d91f3, #006dcc, #0053a6, #003c80, #002759]

// dark theme colors
// backgroundColor is optional, default value is #141414
@debug $blue-dark; // [#111d2a, #0f2a42, #123a57, #114c78, #0f65a5, #0e7ed2, #339fe8, #5abbf3, #84d1f8, #ade3fa]

// var.scss
@use "@sdsjs/design-colors/dist/generate" as *;

$blue: generate(#0d91f3);
$gray: generate(#666666);
$green: generate(#52C41A);

// export.scss
@use "./var" as *;

// export default { blue: ... } for ts/js
:export {
  blue: $blue
}

// export const palettes1 = { gray: ... } for ts/js
:export[palettes1] {
  gray: $gray
}

/**
 * export const green = [...];
 * green.primary = green[5];
 * export const palettes2 = { green: green }
 * for ts/js
 */
:export[palettes2] {
  green: $green;
  greenConst: unquote("green");
}