tailwindcss-css-variables-color-palette-plugin/src/antd/palette.ts

Color Palette plugin using CSS variables for TailwindCSS; forked from tailwindcss-css-variables-palette-plugin

import tinycolor from 'tinycolor2';

import {behindColorCount, getHue, getSaturation, getValue, topColorCount} from './core';

export const generatePalette = (baseColor: string): Palette => {
    const colors = [];
    const baseColorObject = tinycolor(baseColor);
    const hsv = baseColorObject.toHsv();

    // 主色前
    for (let i = topColorCount; i > 0; i -= 1) {
        const color = tinycolor({
            h: getHue(hsv, i, true),
            s: getSaturation(hsv, i, true),
            v: getValue(hsv, i, true),
        }).toHexString();

        colors.push(color);
    }

    // 主色
    colors.push(baseColor);

    // 主色后
    for (let i = 1; i <= behindColorCount; i += 1) {
        const color = tinycolor({
            h: getHue(hsv, i),
            s: getSaturation(hsv, i),
            v: getValue(hsv, i),
        }).toHexString();

        colors.push(color);
    }

    return {
        DEFAULT: baseColorObject.toHexString(),
        50: colors[0],
        100: colors[1],
        200: colors[2],
        300: colors[3],
        400: colors[4],
        500: baseColorObject.toHexString(),
        600: colors[6],
        700: colors[7],
        800: colors[8],
        900: colors[9],
    };
};