https://github.com/zhuowenli/postcss-palette-tool

🎨 PostCSS plugin to mixin monochromatic colors scheme.
https://github.com/zhuowenli/postcss-palette-tool

color color-scheme palette-colors postcss-plugin

Last synced: 3 months ago
JSON representation

🎨 PostCSS plugin to mixin monochromatic colors scheme.

• Host: GitHub
• URL: https://github.com/zhuowenli/postcss-palette-tool
• Owner: zhuowenli
• Created: 2019-11-01T13:24:58.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2019-11-05T03:20:21.000Z (about 5 years ago)
• Last Synced: 2023-11-26T03:42:42.932Z (about 1 year ago)
• Topics: color, color-scheme, palette-colors, postcss-plugin
• Language: JavaScript
• Homepage:
• Size: 97.7 KB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
postcss-palette-tool



    

        

    



> 🎨 [PostCSS](https://github.com/postcss/postcss) plugin to mixin monochromatic colors scheme

Color palettes calculator of [Ant Design](https://ant.design/docs/spec/colors).

## Install

```

npm install --dev postcss-palette-tool

```

## Usage

Add to `postcss.config.js`:

```js

module.exports = {

    plugins: [

        require('postcss-palette-tool'),

    ],

};

```

This plugin can mix a color based on a variable and then output a new color.

before:

```css

body {

    color: palette(#d92424, 1);

    background: palette(#24acd9, 8) radial-gradient(palette(#24acd9, 9), #ffffff);

}

```

after:

```css

body {

    color: #fff2f0;

    background: #0a638c radial-gradient(#024366, #ffffff);

}

```

## Options

| var     | desc      | required |

| ------- | --------- | -------- |

| color   | css color | ✔️ |

| level   | 1 - 10 (6 is default color) | ✔️ |