# Palette plugin using CSS variables for TailwindCSS

> 基于 https://github.com/Thisisjuke/tailwindcss-css-variables-palette-plugin 和 https://github.com/hd996/color-generate 两个库整合了一下，支持生成 antd3 的色彩

Adds a color palette (from `50` to `900`) for each color of your tailwind configuration while using CSS variable for each.

This package has been designed to create **library components** where the theme (colors) are easily modifiable in the application, **using CSS variables**.

## Installation

Using yarn :
```bash
yarn add -D tailwindcss-css-variables-color-palette-plugin
```

Using pnpm :
```bash
pnpm add -D tailwindcss-css-variables-color-palette-plugin
```

Using npm : 
```bash
npm install --save-dev tailwindcss-css-variables-color-palette-plugin
```

Then set up your `tailwind.config.js` this way :

```
const {paletteCssVariablesPlugin} = require('tailwindcss-css-variables-color-palette-plugin');

const THEME_COLORS = {
  primary: '#0d6efd',
  secondary: '#6b7280'
};

module.exports = {
  /...
  theme: {
    colors: THEME_COLORS,
    extend: {},
  },
  plugins: [
    paletteCssVariablesPlugin({
      colors: THEME_COLORS,
      // 默认为 `default`，使用 `antd` 则依据 https://github.com/hd996/color-generate 的算法进行生成
      // algo: 'default'
    }),
    /...
  ],
};
```

The plugin then create the following configuration for you :

```
{
  primary: {
    '50': 'var(--color-primary-100, #e7f1ff)',
    '100': 'var(--color-primary-100, #cfe2ff)',
    '200': 'var(--color-primary-200, #9ec5fe)',
    '300': 'var(--color-primary-300, #6ea8fe)',
    '400': 'var(--color-primary-400, #3d8bfd)',
    '500': 'var(--color-primary-500, #0d6efd)',
    '600': 'var(--color-primary-600, #0a58ca)',
    '700': 'var(--color-primary-700, #084298)',
    '800': 'var(--color-primary-800, #052c65)',
    '900': 'var(--color-primary-900, #132229)',
    DEFAULT: 'var(--color-primary, #0d6efd)'
  },
  secondary: {
    '50': 'var(--color-secondary-100, #f0f1f2)',
    '100': 'var(--color-secondary-100, #e1e3e6)',
    '200': 'var(--color-secondary-200, #c4c7cc)',
    '300': 'var(--color-secondary-300, #a6aab3)',
    '400': 'var(--color-secondary-400, #898e99)',
    '500': 'var(--color-secondary-500, #6b7280)',
    '600': 'var(--color-secondary-600, #565b66)',
    '700': 'var(--color-secondary-700, #40444d)',
    '800': 'var(--color-secondary-800, #2b2e33)',
    '900': 'var(--color-secondary-900, #15171a)',
    DEFAULT: 'var(--color-secondary, #6b7280)'
  },
}
```

The plugin is also adding the always needed following classes by default (same naming as default TailwindCSS properties) : 

```
{
  inherit: 'inherit',
  current: 'currentColor',
  transparent: 'transparent',
  black: '#000',
  white: '#fff',
}
```

## Simple Usage

Now in your application, you can use classes like `bg-primary-500` or `bg-primary-800` as usual.

`DEFAULT` is the variable used to generate `bg-primary` without suffix.

```html
<span class="bg-primary text-secondary-400">
    Hello !
</span>
```

> NOTE : `primary` and `primary-500` have the same color attributed. It's a better idea to use it without suffix in your code (ex: `bg-primary`) if the goal is to replace the color globally using its CSS variable.

## CSS Variables usage

### Addition in the DOM 

This plugin uses [the `addBase` utility from `tailwindcss/plugin` package](https://tailwindcss.com/docs/adding-custom-styles#writing-plugins).

So in your DOM, under the `:root` attribute, you can now find all the css variables generated by the plugin :

![css-variables.png](images/css-variables.png)

See more at : https://developer.mozilla.org/en-US/docs/Web/CSS/:root

### Change scoped color in your component

Now, if you need to modify one of the color of a property, you can do it globally or component scoped, using the default Css Variables API.

```
:root {
  --color-primary: #D36060;
}

.my-custom-card {
  --color-primary-300: #C2714F;
  --color-secondary: #E0607E;
}
```

Documentation : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

# Compatibility

This plugin is based on [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), which are [not compatible with IE11](https://caniuse.com/#feat=css-variables). You can have partial support for the browsers that do not support them by using a PostCSS plugin that add a fallback for CSS variables, such as [`postcss-css-variables`](https://github.com/MadLittleMods/postcss-css-variables) or [`postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties).

## License

This project is licensed under the [MIT License](/LICENSE).