design-colors

SCSS/Sass implementation for Ant Design Colors

Install

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

Usage

For SCSS/Sass

1// if use vite: @use '@sdsjs/design-colors' as designColors
2// if use vue-cli or webpack: @use '~@sdsjs/design-colors' as designColors
3@use '@sdsjs/design-colors' as designColors;
4
5@debug designColors.$blue; // [#e6f1ff, #b5d4ff, #8cb8ff, #639aff, #3b79ff, #1355ff, #0439d9, #0027b3, #001a8c, #000f66]
6@debug designColors.$red; // [#ffe9e6, #ffbab3, #ff928a, #ff6661, #f23535, #e50e15, #bf020f, #99000f, #73000f, #4d000d]
7@debug designColors.$green; // [#e1faea, #98edbb, #6ce0a0, #44d489, #20c776, #00b966, #009456, #006e44, #00472e, #002117]
8@debug designColors.$orange; // [#fff3e6, #ffd1a3, #ffb87a, #ff9d52, #ff7e29, #fb5d01, #d44700, #ad3400, #872400, #611700]
9@debug designColors.$yellow; // [#fffbe6, #ffefb0, #ffe387, #ffd45e, #fabf34, #eda20d, #c77e00, #a16000, #7a4500, #542d00]
10@debug designColors.$purple; // [#fbf0ff, #f5e0ff, #e6b8ff, #cc89f5, #ae5de8, #9135dc, #6e22b5, #4f148f, #340969, #1f0542]
11@debug designColors.$pink; // [#fff0f6, #ffe0ed, #ffb8d8, #f78bbf, #eb5ea7, #de3692, #b8237a, #911461, #6b0a49, #450631]
12@debug designColors.$cyan; // [#e6fffb, #aaf2e9, #7ce6db, #52d9d0, #2dccc7, #0bbebe, #029499, #006b73, #00454d, #002126]
13
14@debug designColors.$blue-primary; // #1355ff
15@debug designColors.$blue-1; // #e6f1ff
16@debug designColors.$blue-dark; // [#11172c, #101d45, #14285b, #14317e, #133ead, #134bdc, #376fe8, #5f93f3, #88b3f8, #b2d0fa]
17@debug designColors.$blue-dark-primary; // #134bdc
18@debug designColors.$blue-dark-1; // #11172c
19...

Preset primary colors

1(
2  'blue': #1355FF,
3  'red': #E50E15,
4  'green': #00B966,
5  'orange': #FB5D01,
6  'yellow': #EDA20D,
7  'purple': #9135DC,
8  'pink': #DE3692,
9  'cyan': #0BBEBE
10)

Override preset primary colors

1// override blue primary color 
2@use "@sdsjs/design-colors" as designColors with (
3  $preset-primary-colors: (
4    'blue': #0d91f3,
5  )
6);
7
8@debug designColors.$blue; // [#e6f8ff, #b0e7ff, #87d7ff, #5ec4ff, #36aeff, #0d91f3, #006dcc, #0053a6, #003c80, #002759]

Custom generate palettes

1// var.scss
2@use '@sdsjs/design-colors' as designColors;
3
4$blue: designColors.generate(#0d91f3);
5$blue-dark: designColors.generate(#0d91f3, (theme: dark, backgroundColor: #141414));
6@debug $blue; // [#e6f8ff, #b0e7ff, #87d7ff, #5ec4ff, #36aeff, #0d91f3, #006dcc, #0053a6, #003c80, #002759]
7
8// dark theme colors
9// backgroundColor is optional, default value is #141414
10@debug $blue-dark; // [#111d2a, #0f2a42, #123a57, #114c78, #0f65a5, #0e7ed2, #339fe8, #5abbf3, #84d1f8, #ade3fa]

For JavaScript

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

Custom presets file

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

example:

1// var.scss
2@use "@sdsjs/design-colors/dist/generate" as *;
3
4$blue: generate(#0d91f3);
5$gray: generate(#666666);
6$green: generate(#52C41A);

1// export.scss
2@use "./var" as *;
3
4// export default { blue: ... } for ts/js
5:export {
6  blue: $blue
7}
8
9// export const palettes1 = { gray: ... } for ts/js
10:export[palettes1] {
11  gray: $gray
12}
13
14/**
15 * export const green = [...];
16 * green.primary = green[5];
17 * export const palettes2 = { green: green }
18 * for ts/js
19 */
20:export[palettes2] {
21  green: $green;
22  greenConst: unquote("green");
23}

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

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

1// colors.ts
2// Generated by script. Do NOT modify!
3import type { Palette } from '@sdsjs/design-colors/dist/types';
4export default {
5  blue: [
6    "#e6f8ff",
7    "#b0e7ff",
8    "#87d7ff",
9    "#5ec4ff",
10    "#36aeff",
11    "#0d91f3",
12    "#006dcc",
13    "#0053a6",
14    "#003c80",
15    "#002759"
16  ]
17}
18export const palettes1 = {
19  gray: [
20    "#a6a6a6",
21    "#999999",
22    "#8c8c8c",
23    "#808080",
24    "#737373",
25    "#666666",
26    "#404040",
27    "#1a1a1a",
28    "#000000",
29    "#000000"
30  ]
31}
32export const green: Palette = [
33  "#f6ffed",
34  "#d9f7be",
35  "#b7eb8f",
36  "#95de64",
37  "#73d13d",
38  "#52c41a",
39  "#389e0d",
40  "#237804",
41  "#135200",
42  "#092b00"
43]
44green.primary = green[5];
45export const palettes2 = {
46  green: green
47}