design-colors

SCSS/Sass implementation for Ant Design Colors

Install

npm install @sdsjs/design-colors --save-dev

Usage

For SCSS/Sass

// 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
...

Preset primary colors

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

Override preset primary colors

// 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]

Custom generate palettes

// 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]

For JavaScript

import {
  blue,
  presetPrimaryColors,
  presetPalettes,
  presetDarkPalettes
} from "@sdsjs/design-colors/dist/presets";
console.log(JSON.stringify(blue)); // ["#e6f1ff","#b5d4ff","#8cb8ff","#639aff","#3b79ff","#1355ff","#0439d9","#0027b3","#001a8c","#000f66"]
console.log(blue.primary); // #1355ff
console.log(blue[0]); // #e6f1ff

Custom presets file

You can customize the generated presets file during the compile time.

example:

// 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");
}

// generate.ts
import { join } from "path";
import { parseExportScssToJsFile } from "../src/utils";
parseExportScssToJsFile(join(__dirname, "./export.scss"), join(__dirname, "./colors.ts"));

After executing the generate.ts script, you can get：

// colors.ts
// Generated by script. Do NOT modify!
import type { Palette } from '@sdsjs/design-colors/dist/types';
export default {
  blue: [
    "#e6f8ff",
    "#b0e7ff",
    "#87d7ff",
    "#5ec4ff",
    "#36aeff",
    "#0d91f3",
    "#006dcc",
    "#0053a6",
    "#003c80",
    "#002759"
  ]
}
export const palettes1 = {
  gray: [
    "#a6a6a6",
    "#999999",
    "#8c8c8c",
    "#808080",
    "#737373",
    "#666666",
    "#404040",
    "#1a1a1a",
    "#000000",
    "#000000"
  ]
}
export const green: Palette = [
  "#f6ffed",
  "#d9f7be",
  "#b7eb8f",
  "#95de64",
  "#73d13d",
  "#52c41a",
  "#389e0d",
  "#237804",
  "#135200",
  "#092b00"
]
green.primary = green[5];
export const palettes2 = {
  green: green
}