@md3tail/theme/dist/tokens/index.js

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

export const Theme = {
    Primary: '--md-sys-color-primary',
    OnPrimary: '--md-sys-color-on-primary',
    PrimaryContainer: '--md-sys-color-primary-container',
    OnPrimaryContainer: '--md-sys-color-on-primary-container',
    Secondary: '--md-sys-color-secondary',
    OnSecondary: '--md-sys-color-on-secondary',
    SecondaryContainer: '--md-sys-color-secondary-container',
    OnSecondaryContainer: '--md-sys-color-on-secondary-container',
    Tertiary: '--md-sys-color-tertiary',
    OnTertiary: '--md-sys-color-on-tertiary',
    TertiaryContainer: '--md-sys-color-tertiary-container',
    OnTertiaryContainer: '--md-sys-color-on-tertiary-container',
    Error: '--md-sys-color-error',
    OnError: '--md-sys-color-on-error',
    ErrorContainer: '--md-sys-color-error-container',
    OnErrorContainer: '--md-sys-color-on-error-container',
    Background: '--md-sys-color-background',
    OnBackground: '--md-sys-color-on-background',
    Surface: '--md-sys-color-surface',
    OnSurface: '--md-sys-color-on-surface',
    SurfaceVariant: '--md-sys-color-surface-variant',
    OnSurfaceVariant: '--md-sys-color-on-surface-variant',
    Outline: '--md-sys-color-outline',
    InverseOnSurface: '--md-sys-color-inverse-on-surface',
    InverseSurface: '--md-sys-color-inverse-surface',
    InversePrimary: '--md-sys-color-inverse-primary',
    Shadow: '--md-sys-color-shadow',
    SurfaceTint: '--md-sys-color-surface-tint',
    OutlineVariant: '--md-sys-color-outline-variant',
    Scrim: '--md-sys-color-scrim',
};
export var ThemeMode;
(function (ThemeMode) {
    ThemeMode["Dark"] = "dark";
    ThemeMode["Light"] = "light";
})(ThemeMode || (ThemeMode = {}));
/**
 * Generate tokens for dark & light modes
 */
export const GenerateTheme = (mode) => {
    return Object.keys(Theme).reduce((acc, variable) => {
        acc[variable] = Theme[variable] + `-${mode}`;
        return acc;
    }, {});
};
/**
 * Update tokens from hex => rgb
 */
const regexp = {
    var: /(--)[^\,\:\)]+/g,
    hex: /#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/g,
};
/**
 * Parse tokens from CSS file to Map<MD3Token, MD3Color>
 * @param tokens CSS file with tokens from https://m3.material.io/theme-builder#/custom
 */
export const GenerateCSS = (tokens) => {
    const styles = {};
    const lines = tokens.split('\n');
    for (const line of lines) {
        try {
            const [variable] = line.match(regexp.var);
            const [hex] = line.match(regexp.hex);
            if (variable && hex) {
                const rgb = hexToRGB(hex);
                if (rgb) {
                    styles[variable] = rgb;
                    console.info('genereted variable:', variable, 'with', rgb);
                }
                else {
                    throw new Error(`cannot parse hex: ${hex}`);
                }
            }
            else {
                throw new Error(`cannot parse line: ${line}`);
            }
        }
        catch (error) {
            console.error('error:', error);
        }
    }
    return styles;
};
function hexToRGB(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    if (result) {
        const rgb = {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        };
        return `${rgb.r} ${rgb.g} ${rgb.b}`;
    }
    return null;
}
//# sourceMappingURL=index.js.map