@ghchu/color-palette

Generate color palette file with @ant-design/colors algorithm

English | 中文

Install

npm i -D @ghchu/color-palette

or

yarn add @ghchu/color-palette -D

Usage

• This plugin is design for sass(scss)(scss-first)
• You need chage the option when you use other preprocessor(less、stylus、css3 vars)

Basic

• Just provide a base-color file path with --input like below and you will get a palette file in the current directory(process.cwd()).It is usually named _color-palette.scss

"scripts":{
  "color": "color-palette --input _color-base.scss"
}

• base color file,like _color-base.scss

$red: #f5222d;
$volcano: #fa541c;

• the outpu palette file,_color-palette.scss

$red-1: #fff1f0 !default;
$red-2: #ffccc7 !default;
$red-3: #ffa39e !default;
$red-4: #ff7875 !default;
$red-5: #ff4d4f !default;
$red-6: #f5222d !default;
$red-7: #cf1322 !default;
$red-8: #a8071a !default;
$red-9: #820014 !default;
$red-10: #5c0011 !default;

$volcano-1: #fff2e8 !default;
$volcano-2: #ffd8bf !default;
$volcano-3: #ffbb96 !default;
$volcano-4: #ff9c6e !default;
$volcano-5: #ff7a45 !default;
$volcano-6: #fa541c !default;
$volcano-7: #d4380d !default;
$volcano-8: #ad2102 !default;
$volcano-9: #871400 !default;
$volcano-10: #610b00 !default;

$gray-1: #ffffff !default;
$gray-2: #fafafa !default;
$gray-3: #f5f5f5 !default;
$gray-4: #f0f0f0 !default;
$gray-5: #d9d9d9 !default;
$gray-6: #bfbfbf !default;
$gray-7: #8c8c8c !default;
$gray-8: #595959 !default;
$gray-9: #434343 !default;
$gray-10: #262626 !default;
$gray-11: #1f1f1f !default;
$gray-12: #141414 !default;
$gray-13: #000000 !default;

• The gray scale is hard-coded, from white(#fff) to black(#000), a total of 13 levels

Input、Output

"scripts":{
  "color": "color-palette --input ./src/sass/utils/_color-base.scss --output ./src/sass/utils/_color-palette.scss"
}

Remove gary

"scripts":{
  "color": "color-palette --input _color-base.scss --gray false"
}

Generate sass map for all variables

"scripts":{
  "color": "color-palette --input _color-base.scss --sassMap"
}

• the output palette

$red-1: #fff1f0 !default;
$red-2: #ffccc7 !default;
$red-3: #ffa39e !default;
$red-4: #ff7875 !default;
$red-5: #ff4d4f !default;
$red-6: #f5222d !default;
$red-7: #cf1322 !default;
$red-8: #a8071a !default;
$red-9: #820014 !default;
$red-10: #5c0011 !default;

$volcano-1: #fff2e8 !default;
$volcano-2: #ffd8bf !default;
$volcano-3: #ffbb96 !default;
$volcano-4: #ff9c6e !default;
$volcano-5: #ff7a45 !default;
$volcano-6: #fa541c !default;
$volcano-7: #d4380d !default;
$volcano-8: #ad2102 !default;
$volcano-9: #871400 !default;
$volcano-10: #610b00 !default;

$gray-1: #ffffff !default;
$gray-2: #fafafa !default;
$gray-3: #f5f5f5 !default;
$gray-4: #f0f0f0 !default;
$gray-5: #d9d9d9 !default;
$gray-6: #bfbfbf !default;
$gray-7: #8c8c8c !default;
$gray-8: #595959 !default;
$gray-9: #434343 !default;
$gray-10: #262626 !default;
$gray-11: #1f1f1f !default;
$gray-12: #141414 !default;
$gray-13: #000000 !default;

// sass map
$color-palette: (
  '$red-1': $red-1,
  '$red-2': $red-2,
  '$red-3': $red-3,
  '$red-4': $red-4,
  '$red-5': $red-5,
  '$red-6': $red-6,
  '$red-7': $red-7,
  '$red-8': $red-8,
  '$red-9': $red-9,
  '$red-10': $red-10,
  '$volcano-1': $volcano-1,
  '$volcano-2': $volcano-2,
  '$volcano-3': $volcano-3,
  '$volcano-4': $volcano-4,
  '$volcano-5': $volcano-5,
  '$volcano-6': $volcano-6,
  '$volcano-7': $volcano-7,
  '$volcano-8': $volcano-8,
  '$volcano-9': $volcano-9,
  '$volcano-10': $volcano-10,
  '$gray-1': $gray-1,
  '$gray-2': $gray-2,
  '$gray-3': $gray-3,
  '$gray-4': $gray-4,
  '$gray-5': $gray-5,
  '$gray-6': $gray-6,
  '$gray-7': $gray-7,
  '$gray-8': $gray-8,
  '$gray-9': $gray-9,
  '$gray-10': $gray-10,
  '$gray-11': $gray-11,
  '$gray-12': $gray-12,
  '$gray-13': $gray-13,
) !default;

Dark mode

"scripts":{
  "color": "color-palette --input _color-base.scss --dark"
}

• the output palette

$red-1: #2a1215 !default;
$red-2: #431418 !default;
$red-3: #58181c !default;
$red-4: #791a1f !default;
$red-5: #a61d24 !default;
$red-6: #d32029 !default;
$red-7: #e84749 !default;
$red-8: #f37370 !default;
$red-9: #f89f9a !default;
$red-10: #fac8c3 !default;

$volcano-1: #2b1611 !default;
$volcano-2: #441d12 !default;
$volcano-3: #592716 !default;
$volcano-4: #7c3118 !default;
$volcano-5: #aa3e19 !default;
$volcano-6: #d84a1b !default;
$volcano-7: #e87040 !default;
$volcano-8: #f3956a !default;
$volcano-9: #f8b692 !default;
$volcano-10: #fad4bc !default;

$gray-1: #ffffff !default;
$gray-2: #fafafa !default;
$gray-3: #f5f5f5 !default;
$gray-4: #f0f0f0 !default;
$gray-5: #d9d9d9 !default;
$gray-6: #bfbfbf !default;
$gray-7: #8c8c8c !default;
$gray-8: #595959 !default;
$gray-9: #434343 !default;
$gray-10: #262626 !default;
$gray-11: #1f1f1f !default;
$gray-12: #141414 !default;
$gray-13: #000000 !default;

• Use #141414 to mix by default
  • You can set backgroundColor to change it
  • View https://www.npmjs.com/package/@ant-design/colors for detail

less

• change input、output、prefix、postfix
  • sassMap is unavailable

"scripts":{
  "color": "color-palette --input _color-base.less --output _color-palette.less --prefix @ --postfix '' "
}

• base-color file _color-base.less

@red: #f5222d;
@volcano: #fa541c;

• the outpu palette file,_color-palette.less

@red-1: #fff1f0;
@red-2: #ffccc7;
@red-3: #ffa39e;
@red-4: #ff7875;
@red-5: #ff4d4f;
@red-6: #f5222d;
@red-7: #cf1322;
@red-8: #a8071a;
@red-9: #820014;
@red-10: #5c0011;

@volcano-1: #fff2e8;
@volcano-2: #ffd8bf;
@volcano-3: #ffbb96;
@volcano-4: #ff9c6e;
@volcano-5: #ff7a45;
@volcano-6: #fa541c;
@volcano-7: #d4380d;
@volcano-8: #ad2102;
@volcano-9: #871400;
@volcano-10: #610b00;

@gray-1: #ffffff;
@gray-2: #fafafa;
@gray-3: #f5f5f5;
@gray-4: #f0f0f0;
@gray-5: #d9d9d9;
@gray-6: #bfbfbf;
@gray-7: #8c8c8c;
@gray-8: #595959;
@gray-9: #434343;
@gray-10: #262626;
@gray-11: #1f1f1f;
@gray-12: #141414;
@gray-13: #000000;

Config

// eg
// $red:#f00;$blue:00f;
// ; expressionSep
// : colorSep

module.exports = require('yargs')
  .boolean('dark') // dark mode
  .default('dark', false) // dark mode defaults to false
  .default('backgroundColor', '#141414') // The color that needs to be mixed in by default
  .boolean('gray') //  need gray
  .default('gray', true) // need gray defaults to true
  .default('prefix', '$') // the prefix uses the sass prefix $ by default$
  .default('postfix', '!default') // postfix defaults to '!default'
  .default('expressionSep', ';') // expression separator, the default is semicolon
  .default('colorSep', ':') // color value division symbol, default colon
  .default('output', './_color-palette.scss') // default output path
  .boolean('sassMap') // whether to generate sass map variables for all variables
  .default('sassMap', false) // no sass map variable is generated by default
  .default('sassMapName', 'color-palette') // The default variable name of sass map is color-palette

NPM

• vue-cli-plugin-auto-alias
• @bryanadamss/drawing-board
• @bryanadamss/num2chn
• ant-color-converter

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2020 [email protected]. This project is MIT licensed.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!