@md3tail/theme/dist/theming/colors.js

An open source plugin based on tailwindcss built with Material Desing 3

import { COLORS, CORE_COLORS, PALETTES, } from './base';
export const alphaValue = '<alpha-value>';
const getColor = (color) => (`var(--md-sys-color-${color})`);
const getColors = (config) => {
    const baseColors = generateBaseColors();
    const palettes = generatePalettes();
    const states = generateStateLayers(config.stateLayers);
    return Object.assign(Object.assign(Object.assign({}, baseColors), palettes), states);
    function generateBaseColors() {
        return COLORS.reduce((acc, c) => {
            acc[c] = getColor(c);
            return acc;
        }, {});
    }
    function generatePalettes() {
        return CORE_COLORS.reduce((acc, coreColor) => {
            PALETTES.forEach(palette => {
                const key = `${coreColor}${palette}`;
                acc[key] = `var(--md-ref-palette-${coreColor}${palette})`;
            });
            return acc;
        }, {});
    }
    function generateStateLayers(stateLayers = {}) {
        const colors = Object.keys(baseColors);
        const states = {};
        colors.forEach((c) => {
            const onColorName = `on-${c}`;
            const onColor = md3Color(onColorName);
            const color = md3Color(c);
            if (color && onColor) {
                states[`${c}-hover`] = md3Mix(c, onColorName, stateLayers.hover || '8%');
                states[`${c}-press`] = md3Mix(c, onColorName, stateLayers.press || '10%');
                states[`${c}-focus`] = md3Mix(c, onColorName, stateLayers.focus || '10%');
                states[`${c}-drag`] = md3Mix(c, onColorName, stateLayers.drag || '16%');
            }
        });
        return states;
    }
    function md3Mix(mdColor1, mdColor2, percent) {
        const color1 = md3Color(mdColor1);
        const color2 = md3Color(mdColor2);
        return `color-mix(in srgb, ${color1}, ${color2} ${getPercent(percent)})`;
        function getPercent(percent) {
            if (typeof percent === 'number') {
                return `${percent * 100}%`;
            }
            else {
                return percent;
            }
        }
    }
    function md3Color(mdColor, opacity = '1') {
        const isMD3Color = (mdColor) => {
            return mdColor in baseColors;
        };
        if (isMD3Color(mdColor)) {
            return baseColors[mdColor].replace(alphaValue, opacity);
        }
        return '';
    }
};
export const md3Colors = (config) => getColors(config);
//# sourceMappingURL=colors.js.map