bus-reminder/tailwind.config.js

const colors = require('tailwindcss/colors');
const Color = require('color');

const range = (lower, upper, step) => {
    return Array.from(
        new Array(Math.floor(upper / step - lower / step) + 1),
        (_, i) => lower / step + i
    ).map((x) => x * step);
};

function generateColor(base, max, min, step) {
    const baseMax = Math.max(...Object.keys(base).map((v) => parseInt(v)));
    const generated = range(min, max, step)
        .filter((v) => base[v] === undefined)
        .map((weight) => {
            const isHighWeight = weight + step > baseMax;
            if (isHighWeight) {
                const baseDarkest = Color(base[baseMax]);
                const weightDifference = weight - baseMax;
                const darkened = baseDarkest.darken(0.005 * weightDifference);
                // console.log({
                //     dark: baseDarkest.hex(),
                //     darkLight: baseDarkest.luminosity(),
                //     weightDifference,
                //     darkened: darkened.hex()
                // });
                return [weight, darkened.hex()];
            }

            const lighter = Color(base[weight - step]);
            const darker = Color(base[weight + step]);
            return [weight, lighter.mix(darker).hex()];
        });

    return Object.fromEntries(generated.filter((v) => v != null));
}

const skipColors = new Set([
    'inherit',
    'transparent',
    'current',
    'black',
    'white',
    'lightBlue',
    'warmGray',
    'trueGray',
    'coolGray',
    'blueGray'
]);

const generatedColors = Object.fromEntries(
    Object.entries(colors)
        .filter(([key, _]) => !skipColors.has(key))
        .map(([colorKey, value]) => {
            return [colorKey, generateColor(value, 1300, 150, 50)];
        })
);

console.log({ ...generatedColors });

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            colors: {
                ...generatedColors
            }
        }
    },
    plugins: [require('@tailwindcss/forms')]
};