Package Exports

@ghchu/color-palette

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ghchu/color-palette) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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

Show your support

Give a ⭐️ if this project helped you!

📝 License

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_GuangHui
📆

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