tailwindcss-css-variables-color-palette-plugin/src/utils/generators.ts

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

import {generatePalette as antdGeneratePalette} from '../antd/palette';
import {generatePalette as defaultGeneratePalette} from '../default/palette';

const generateColor = (name: string, color: string, algo: string) : Palette => {
    let palette;

    if (algo === 'antd') {
        palette = antdGeneratePalette(color);
    } else {
        palette = defaultGeneratePalette(color);
    }

    return palette;
}

export const extendedThemeColors = (colorsArray: { [key: string]: string }, algo: string):{ [key: string]: Palette } => {
    const colorList = Object.keys(colorsArray).map(key => ({name: key, value: colorsArray[key]}));

    const colorPaletteList: { [key: string]: Palette } = {};

    colorList.forEach(color => {
        const palette = generateColor(color.name, color.value, algo);
        colorPaletteList[color.name] = palette;
    })

    return colorPaletteList
}

export const extractColorVars = (colorObj: { [key: string]: string }, colorGroup = '') => {
    return Object.keys(colorObj).reduce((vars, colorKey) => {
        const value = colorObj[colorKey];

        const tokenString = colorKey === 'DEFAULT' ? {[`--color${colorGroup}`]: value} : {[`--color${colorGroup}-${colorKey}`]: value};

        const newVars: { [key: string]: string } = typeof value === 'string' ? tokenString : extractColorVars(value, `-${colorKey}`);

        return {...vars, ...newVars};
    }, {});
}