theme-vir/dist/color-theme/color-theme-override.js

Create an entire web theme.

import { getObjectTypedEntries, getObjectTypedKeys, mapObjectValues } from '@augment-vir/common';
import { createColorCssVarDefault, defineColorTheme, themeDefaultKey, } from './color-theme.js';
function applyCssVarOverride({ originalTheme, layerKey, themeColor, override, overrideValues, }) {
    const layerOverride = override?.[layerKey];
    if (!layerOverride) {
        return;
    }
    overrideValues[String(themeColor[layerKey].name)] = String(createColorCssVarDefault(layerKey, layerOverride, originalTheme.init.default, originalTheme.init.colors));
}
/**
 * Define a color theme override. Use this to define multiple theme variations, like light mode vs
 * dark mode.
 *
 * @category Color Theme
 */
export function defineColorThemeOverride(originalTheme, overrideName, { defaultOverride, colorOverrides, }) {
    const defaultValues = {};
    if (defaultOverride) {
        getObjectTypedKeys(defaultOverride).forEach((layerKey) => {
            applyCssVarOverride({
                originalTheme,
                layerKey,
                override: defaultOverride,
                themeColor: originalTheme.colors[themeDefaultKey],
                overrideValues: defaultValues,
            });
        });
    }
    const colorValues = {};
    if (colorOverrides) {
        getObjectTypedEntries(colorOverrides).forEach(([colorName, override,]) => {
            const themeColor = originalTheme.colors[colorName];
            if (!themeColor) {
                throw new Error(`Override color name '${colorName}' does not exist in the theme being overridden.`);
            }
            applyCssVarOverride({
                originalTheme,
                layerKey: 'foreground',
                override,
                themeColor,
                overrideValues: colorValues,
            });
            applyCssVarOverride({
                originalTheme,
                layerKey: 'background',
                override,
                themeColor,
                overrideValues: colorValues,
            });
        });
    }
    const asThemeColorInit = mapObjectValues(originalTheme.init.colors, (colorName, colorInit) => {
        const override = colorOverrides?.[colorName];
        const newInit = {
            ...colorInit,
            ...override,
        };
        return newInit;
    });
    const asTheme = defineColorTheme({
        ...originalTheme.init.default,
        ...defaultOverride,
    }, asThemeColorInit);
    return {
        name: overrideName,
        overrides: {
            ...defaultValues,
            ...colorValues,
        },
        originalTheme,
        asTheme,
    };
}