theme-vir 28.16.1 → 28.17.0

package/dist/{color → color-theme}/build-color-theme.d.ts

@@ -43,7 +43,7 @@ export declare const defaultLightThemePair: RequiredAndNotNull<NoRefColorInit>;
 /** @category Internal */
 export declare const defaultContrastLevels: Readonly<ArrayOrSelectParam<ContrastLevelName>>;
 /**
- * Options for {@link buildLowLevelColorTheme}.
+ * Options for {@link buildColorTheme}.
  *
  * @category Internal
  */
@@ -74,8 +74,8 @@ export type BuildLowLevelColorThemeOptions = PartialWithUndefined<{
  *
  * @category Color Theme
  */
-export declare function buildLowLevelColorTheme(colorPalette: Readonly<ColorPaletteVars>, { defaultTheme, omittedColorValues, crossContrastLevels, }?: Readonly<BuildLowLevelColorThemeOptions>): import("./color-theme.js").ColorTheme<{
-    [k: string]: ((Required<Pick<{
+export declare function buildColorTheme(colorPalette: Readonly<ColorPaletteVars>, { omittedColorValues, crossContrastLevels, }?: Readonly<BuildLowLevelColorThemeOptions>): {
+    defaultLight: import("./color-theme.js").ColorTheme<Record<`${Lowercase<string>}-${Lowercase<string>}`, ((Required<Pick<{
         foreground: import("./color-theme.js").ColorInitValue;
         background: import("./color-theme.js").ColorInitValue;
     }, "foreground">> & Partial<Pick<{
@@ -87,5 +87,18 @@ export declare function buildLowLevelColorTheme(colorPalette: Readonly<ColorPale
     }, "background">> & Partial<Pick<{
         foreground: import("./color-theme.js").ColorInitValue;
         background: import("./color-theme.js").ColorInitValue;
-    }, "foreground">>)) & {};
-}>;
+    }, "foreground">>)) & {}>>;
+    darkOverride: import("./color-theme-override.js").ColorThemeOverride<Record<`${Lowercase<string>}-${Lowercase<string>}`, ((Required<Pick<{
+        foreground: import("./color-theme.js").ColorInitValue;
+        background: import("./color-theme.js").ColorInitValue;
+    }, "foreground">> & Partial<Pick<{
+        foreground: import("./color-theme.js").ColorInitValue;
+        background: import("./color-theme.js").ColorInitValue;
+    }, "background">>) | (Required<Pick<{
+        foreground: import("./color-theme.js").ColorInitValue;
+        background: import("./color-theme.js").ColorInitValue;
+    }, "background">> & Partial<Pick<{
+        foreground: import("./color-theme.js").ColorInitValue;
+        background: import("./color-theme.js").ColorInitValue;
+    }, "foreground">>)) & {}>>;
+};

package/dist/{color → color-theme}/build-color-theme.js

@@ -1,6 +1,7 @@
 import { assert, assertWrap, check } from '@augment-vir/assert';
 import { crossProduct, filterMap, getOrSet, log, mapObjectValues, removeDuplicates, stringify, } from '@augment-vir/common';
 import { ContrastLevelName, contrastLevelLabel, findClosestColor, findColorAtContrastLevel, } from '@electrovir/color';
+import { defineColorThemeOverride } from './color-theme-override.js';
 import { defineColorTheme, noRefColorInitToString, } from './color-theme.js';
 /**
  * Black and white color values.
@@ -99,22 +100,28 @@ export const defaultContrastLevels = {
  *
  * @category Color Theme
  */
-export function buildLowLevelColorTheme(colorPalette, { defaultTheme = defaultLightThemePair, omittedColorValues = defaultOmittedColorGroupColorValues, crossContrastLevels = defaultContrastLevels, } = {}) {
+export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmittedColorGroupColorValues, crossContrastLevels = defaultContrastLevels, } = {}) {
     const contrastLevels = extractParam(crossContrastLevels, {
         mapFrom: contrastLevelLabel,
     });
     const colorGroups = groupColors(colorPalette, omittedColorValues);
-    const themeColors = Object.fromEntries(Object.entries(colorGroups).flatMap(([colorGroupName, colors,]) => {
+    const defaultTheme = {
+        background: 'white',
+        foreground: 'black',
+    };
+    const lightThemeColors = {};
+    const darkThemeOverrides = {};
+    Object.entries(colorGroups).forEach(([colorGroupName, colors,]) => {
         assert.isLengthAtLeast(colors, 1);
         const colorStrings = colors.map((color) => color.definition.default);
         const allCrosses = crossProduct({
             crossWith: [
-                'ahead-background',
-                'behind-background',
-                'ahead-foreground',
-                'behind-foreground',
-                'self-light-front',
-                'self-light-back',
+                'color-in-foreground-light-mode',
+                'color-in-background-light-mode',
+                'color-in-foreground-dark-mode',
+                'color-in-background-dark-mode',
+                'color-on-self-dark-mode',
+                'color-on-self-light-mode',
             ],
             contrast: contrastLevels,
             // fontWeight: fontWeights,
@@ -123,61 +130,129 @@ export function buildLowLevelColorTheme(colorPalette, { defaultTheme = defaultLi
         const defaultForegroundString = noRefColorInitToString(defaultTheme.foreground);
         const defaultBackgroundString = noRefColorInitToString(defaultTheme.background);
         const lightestSelf = findClosestColor('white', colorStrings);
-        return filterMap(allCrosses, (cross) => {
-            const crossName = [
-                firstColor.prefix,
-                firstColor.colorName,
-                cross.crossWith,
-                cross.contrast,
-                // cross.fontWeight,
-            ].join('-');
-            const comparison = cross.crossWith === 'ahead-background'
+        const darkestSelf = findClosestColor('black', colorStrings);
+        allCrosses.forEach((cross) => {
+            const comparison = cross.crossWith === 'color-in-foreground-light-mode'
                 ? {
                     foreground: colorStrings,
                     background: defaultBackgroundString,
                 }
-                : cross.crossWith === 'behind-background'
+                : cross.crossWith === 'color-in-background-light-mode'
                     ? {
                         foreground: defaultBackgroundString,
                         background: colorStrings,
                     }
-                    : cross.crossWith === 'ahead-foreground'
+                    : cross.crossWith === 'color-in-foreground-dark-mode'
                         ? {
                             foreground: colorStrings,
                             background: defaultForegroundString,
                         }
-                        : cross.crossWith === 'behind-foreground'
+                        : cross.crossWith === 'color-in-background-dark-mode'
                             ? {
                                 foreground: defaultForegroundString,
                                 background: colorStrings,
                             }
-                            : cross.crossWith === 'self-light-back'
+                            : cross.crossWith === 'color-on-self-dark-mode'
                                 ? {
                                     foreground: colorStrings,
-                                    background: lightestSelf,
+                                    background: darkestSelf,
                                 }
-                                : {
-                                    foreground: lightestSelf,
-                                    background: colorStrings,
-                                };
+                                : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                                    cross.crossWith === 'color-on-self-light-mode'
+                                        ? {
+                                            foreground: colorStrings,
+                                            background: lightestSelf,
+                                        }
+                                        : undefined;
+            if (!comparison) {
+                throw new Error(`Forgot to handle crossWith: '${cross.crossWith}'`);
+            }
             const matchedColorString = findColorAtContrastLevel(comparison, cross.contrast);
             const matchedColor = colors.find((color) => color.definition.default === matchedColorString);
             if (!matchedColor) {
                 log.error(`No valid '${colorGroupName}' color cross found for: ${stringify(cross)} with ${stringify(colorStrings)}`);
                 return undefined;
             }
-            return [
-                crossName,
-                mapObjectValues(comparison, (key, value) => {
-                    if (check.isString(value)) {
-                        return value;
-                    }
-                    else {
-                        return matchedColor.definition.value;
-                    }
-                }),
-            ];
-        }, check.isTruthy);
-    }));
-    return defineColorTheme(defaultTheme, themeColors);
+            const colorValue = mapObjectValues(comparison, (key, value) => {
+                if (check.isString(value)) {
+                    return value;
+                }
+                else {
+                    return matchedColor.definition.value;
+                }
+            });
+            if (cross.crossWith === 'color-in-foreground-light-mode') {
+                const name = [
+                    firstColor.prefix,
+                    firstColor.colorName,
+                    'foreground',
+                    cross.contrast,
+                ].join('-');
+                lightThemeColors[name] = colorValue;
+            }
+            else if (cross.crossWith === 'color-in-background-light-mode') {
+                const name = [
+                    firstColor.prefix,
+                    firstColor.colorName,
+                    'background',
+                    cross.contrast,
+                ].join('-');
+                lightThemeColors[name] = colorValue;
+            }
+            else if (cross.crossWith === 'color-on-self-light-mode') {
+                const name = [
+                    firstColor.prefix,
+                    firstColor.colorName,
+                    'on',
+                    'self',
+                    cross.contrast,
+                ].join('-');
+                lightThemeColors[name] = colorValue;
+            }
+            else if (cross.crossWith === 'color-in-foreground-dark-mode') {
+                const name = [
+                    firstColor.prefix,
+                    firstColor.colorName,
+                    'foreground',
+                    cross.contrast,
+                ].join('-');
+                darkThemeOverrides[name] = colorValue;
+            }
+            else if (cross.crossWith === 'color-in-background-dark-mode') {
+                const name = [
+                    firstColor.prefix,
+                    firstColor.colorName,
+                    'background',
+                    cross.contrast,
+                ].join('-');
+                darkThemeOverrides[name] = colorValue;
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            }
+            else if (cross.crossWith === 'color-on-self-dark-mode') {
+                const name = [
+                    firstColor.prefix,
+                    firstColor.colorName,
+                    'on',
+                    'self',
+                    cross.contrast,
+                ].join('-');
+                darkThemeOverrides[name] = colorValue;
+            }
+            else {
+                assert.tsType(cross.crossWith).equals();
+                throw new Error(`crossWith not handled: ${String(cross.crossWith)}`);
+            }
+        });
+    });
+    const defaultLightTheme = defineColorTheme(defaultTheme, lightThemeColors);
+    return {
+        defaultLight: defaultLightTheme,
+        darkOverride: defineColorThemeOverride(defaultLightTheme, 'dark', {
+            defaultOverride: {
+                background: 'black',
+                foreground: 'white',
+            },
+            colorOverrides: darkThemeOverrides,
+        }),
+    };
 }

package/dist/{color → color-theme}/color-palette-book-pages.js

@@ -3,7 +3,7 @@ import { VirColorPair } from '@electrovir/color';
 import { defineBookPage } from 'element-book';
 import { css, html, unsafeCSS } from 'element-vir';
 import { noNativeSpacing, viraColorPalette } from 'vira';
-import { buildLowLevelColorTheme, groupColors, } from './build-color-theme.js';
+import { buildColorTheme, groupColors, } from './build-color-theme.js';
 import { createColorThemeBookPages } from './color-theme-book-pages.js';
 const blackWhiteCells = [
     {
@@ -211,6 +211,7 @@ export function createColorPaletteBookPages({ colors, parent, title, includeCont
             };
         }));
     }
+    const generatedTheme = buildColorTheme(colors, options);
     return [
         topColorsPage,
         colorPalettePage,
@@ -222,10 +223,11 @@ export function createColorPaletteBookPages({ colors, parent, title, includeCont
             ? createColorThemeBookPages({
                 parent: topColorsPage,
                 title: 'Theme (auto)',
-                theme: buildLowLevelColorTheme(colors, options),
+                theme: generatedTheme.defaultLight,
                 hideInverseColors: true,
                 useVerticalLayout: useVerticalTheme,
                 prefixGroupByCount: 2,
+                overrides: [generatedTheme.darkOverride],
             })
             : []),
     ].filter(check.isTruthy);

package/dist/{color → color-theme}/color-theme-book-pages.js

@@ -3,13 +3,14 @@ import { groupArrayBy } from '@augment-vir/common';
 import { VirColorPair } from '@electrovir/color';
 import { BookPageControlType, defineBookPage, definePageControl, } from 'element-book';
 import { css, html, listen, nothing } from 'element-vir';
-import { generateThemeCode } from './color-theme.js';
+import { generateThemeCode } from './color-theme-code.js';
+const noneOverridesSelectionValue = 'None';
 /**
  * Create multiple element-book pages to showcase a theme its overrides (if any).
  *
  * @category Color Theme
  */
-export function createColorThemeBookPages({ parent, title, theme, hideInverseColors, overrides, useVerticalLayout, prefixGroupByCount = 0, }) {
+export function createColorThemeBookPages({ parent, title, theme, hideInverseColors, overrides, useVerticalLayout, prefixGroupByCount = 2, }) {
     const themeControls = {
         'Show Var Names': definePageControl({
             controlType: BookPageControlType.Checkbox,
@@ -20,6 +21,21 @@ export function createColorThemeBookPages({ parent, title, theme, hideInverseCol
             initValue: true,
         }),
     };
+    const defaultThemeControls = {
+        'Theme Override': definePageControl({
+            controlType: BookPageControlType.Dropdown,
+            initValue: noneOverridesSelectionValue,
+            options: [
+                noneOverridesSelectionValue,
+                ...(overrides || []).map((override) => {
+                    if (override.name === noneOverridesSelectionValue) {
+                        throw new Error(`Cannot have theme override named '${noneOverridesSelectionValue}'`);
+                    }
+                    return override.name;
+                }),
+            ],
+        }),
+    };
     const themeParentPage = defineBookPage({
         parent,
         title,
@@ -60,8 +76,8 @@ export function createColorThemeBookPages({ parent, title, theme, hideInverseCol
             <div class="with-inverse">${normalTemplate}${inverseTemplate}</div>
         `;
     }
-    function createThemePageExamples(defineExample, theme) {
-        const groups = groupArrayBy(Object.keys(theme.colors), (value) => {
+    function createThemePageExamples(defineExample, defaultTheme, overrides) {
+        const groups = groupArrayBy(Object.keys(defaultTheme.colors), (value) => {
             if (prefixGroupByCount) {
                 return value.split('-').slice(0, prefixGroupByCount).join('-');
             }
@@ -89,9 +105,13 @@ export function createColorThemeBookPages({ parent, title, theme, hideInverseCol
                         }
                     `,
                 render({ controls }) {
+                    const selectedOverride = ('Theme Override' in controls &&
+                        controls['Theme Override'] &&
+                        overrides?.find((override) => override.name === controls['Theme Override'])) ||
+                        undefined;
                     return group.map((entry) => buildThemeColorTemplate({
                         controls,
-                        theme,
+                        theme: selectedOverride?.asTheme || defaultTheme,
                         themeColorName: entry,
                     }));
                 },
@@ -103,7 +123,7 @@ export function createColorThemeBookPages({ parent, title, theme, hideInverseCol
     ];
     const defaultThemePage = defineBookPage({
         parent: themeParentPage,
-        title: 'Default Theme',
+        title: 'Default',
         descriptionParagraphs,
         useVerticalExamples: useVerticalLayout,
         controls: {
@@ -112,7 +132,10 @@ export function createColorThemeBookPages({ parent, title, theme, hideInverseCol
                 content: html `
                     <button
                         ${listen('click', async () => {
-                    const code = generateThemeCode(theme, 'viraColorPalette');
+                    const code = generateThemeCode(theme, {
+                        paletteVarName: 'viraColorPalette',
+                        overrides,
+                    });
                     await navigator.clipboard.writeText(code);
                 })}
                     >
@@ -120,9 +143,10 @@ export function createColorThemeBookPages({ parent, title, theme, hideInverseCol
                     </button>
                 `,
             }),
+            ...defaultThemeControls,
         },
         defineExamples({ defineExample }) {
-            createThemePageExamples(defineExample, theme);
+            createThemePageExamples(defineExample, theme, overrides);
         },
     });
     const overridePages = (overrides || []).map((override) => {
@@ -132,7 +156,7 @@ export function createColorThemeBookPages({ parent, title, theme, hideInverseCol
             useVerticalExamples: useVerticalLayout,
             descriptionParagraphs,
             defineExamples({ defineExample }) {
-                createThemePageExamples(defineExample, override.asTheme);
+                createThemePageExamples(defineExample, override.asTheme, undefined);
             },
         });
     });

package/dist/color-theme/color-theme-code.d.ts

@@ -0,0 +1,12 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type ColorThemeOverride } from './color-theme-override.js';
+import { type ColorTheme } from './color-theme.js';
+/**
+ * Convert a color theme into code to define that color theme.
+ *
+ * @category Color Theme
+ */
+export declare function generateThemeCode(theme: ColorTheme, options?: Readonly<PartialWithUndefined<{
+    paletteVarName: string;
+    overrides: ReadonlyArray<Readonly<ColorThemeOverride>>;
+}>>): string;

package/dist/color-theme/color-theme-code.js

@@ -0,0 +1,150 @@
+import { getObjectTypedEntries, } from '@augment-vir/common';
+/**
+ * Convert a color theme into code to define that color theme.
+ *
+ * @category Color Theme
+ */
+export function generateThemeCode(theme, options) {
+    const paletteVarName = options?.paletteVarName;
+    const defaultInitCode = colorInitToCode(theme.init.default, 1, undefined, paletteVarName);
+    const colorsInitCode = colorThemeInitToCode(theme.init.colors, 1, theme.init.default, paletteVarName);
+    const themeCode = `const theme = defineColorTheme(\n${defaultInitCode},\n${colorsInitCode},\n);`;
+    const overridesCodes = (options?.overrides || []).map((override) => {
+        return generateOverrideCode(override, paletteVarName);
+    });
+    return [
+        themeCode,
+        ...overridesCodes,
+    ].join('\n\n');
+}
+function generateOverrideCode(override, paletteVarName) {
+    const parts = [];
+    // Check if default colors differ
+    const defaultOverrideEntries = [];
+    if (!colorInitValuesEqual(override.asTheme.init.default.foreground, override.originalTheme.init.default.foreground)) {
+        defaultOverrideEntries.push(`${tab(3)}foreground: ${colorInitValueToCode(override.asTheme.init.default.foreground, 3, paletteVarName)},`);
+    }
+    if (!colorInitValuesEqual(override.asTheme.init.default.background, override.originalTheme.init.default.background)) {
+        defaultOverrideEntries.push(`${tab(3)}background: ${colorInitValueToCode(override.asTheme.init.default.background, 3, paletteVarName)},`);
+    }
+    if (defaultOverrideEntries.length > 0) {
+        parts.push(`${tab(2)}defaultOverride: {\n${defaultOverrideEntries.join('\n')}\n${tab(2)}},`);
+    }
+    // Check for color overrides
+    const colorOverrideEntries = [];
+    getObjectTypedEntries(override.asTheme.init.colors).forEach(([colorName, colorInit,]) => {
+        const originalColorInit = override.originalTheme.init.colors[colorName];
+        if (!originalColorInit) {
+            return;
+        }
+        const colorEntries = [];
+        if ('foreground' in colorInit &&
+            (!('foreground' in originalColorInit) ||
+                !colorInitValuesEqual(colorInit.foreground, originalColorInit.foreground))) {
+            colorEntries.push(`${tab(4)}foreground: ${colorInitValueToCode(colorInit.foreground, 4, paletteVarName)},`);
+        }
+        if ('background' in colorInit &&
+            (!('background' in originalColorInit) ||
+                !colorInitValuesEqual(colorInit.background, originalColorInit.background))) {
+            colorEntries.push(`${tab(4)}background: ${colorInitValueToCode(colorInit.background, 4, paletteVarName)},`);
+        }
+        if (colorEntries.length > 0) {
+            colorOverrideEntries.push(`${tab(3)}'${colorName}': {\n${colorEntries.join('\n')}\n${tab(3)}},`);
+        }
+    });
+    if (colorOverrideEntries.length > 0) {
+        parts.push(`${tab(2)}colorOverrides: {\n${colorOverrideEntries.join('\n')}\n${tab(2)}},`);
+    }
+    return `const ${override.name}Override = defineColorThemeOverride(\n${tab(1)}theme,\n${tab(1)}'${override.name}',\n${tab(1)}{\n${parts.join('\n')}\n${tab(1)}},\n);`;
+}
+function tab(level) {
+    return '    '.repeat(level);
+}
+function colorInitValuesEqual(a, b) {
+    if (typeof a !== typeof b) {
+        return false;
+    }
+    if (typeof a === 'string' || typeof a === 'number') {
+        return a === b;
+    }
+    if ('_$cssResult$' in a && '_$cssResult$' in b) {
+        return a.cssText === b.cssText;
+    }
+    // For references and SingleCssVarDefinition, compare as JSON
+    return JSON.stringify(a) === JSON.stringify(b);
+}
+function extractCssVarName(cssValue) {
+    const match = cssValue.match(/^var\(--([^,)]+)/);
+    return match ? match[1] : undefined;
+}
+function colorInitValueToCode(value, indentLevel, paletteVarName) {
+    if (typeof value === 'string') {
+        return `'${value}'`;
+    }
+    else if (typeof value === 'number') {
+        return String(value);
+    }
+    else if ('_$cssResult$' in value) {
+        const cssText = String(value);
+        if (paletteVarName) {
+            const varName = extractCssVarName(cssText);
+            if (varName) {
+                return `${paletteVarName}['${varName}']`;
+            }
+        }
+        return `css\`${cssText}\``;
+    }
+    else if ('refBackground' in value ||
+        'refForeground' in value ||
+        'refDefaultBackground' in value ||
+        'refDefaultForeground' in value) {
+        const entries = [];
+        if ('refForeground' in value) {
+            entries.push(`${tab(indentLevel + 1)}refForeground: '${value.refForeground}',`);
+        }
+        if ('refBackground' in value) {
+            entries.push(`${tab(indentLevel + 1)}refBackground: '${value.refBackground}',`);
+        }
+        if ('refDefaultForeground' in value) {
+            entries.push(`${tab(indentLevel + 1)}refDefaultForeground: true,`);
+        }
+        if ('refDefaultBackground' in value) {
+            entries.push(`${tab(indentLevel + 1)}refDefaultBackground: true,`);
+        }
+        return `{\n${entries.join('\n')}\n${tab(indentLevel)}}`;
+    }
+    else {
+        // SingleCssVarDefinition
+        return `'${value.default}'`;
+    }
+}
+function colorInitToCode(colorInit, indentLevel, defaultInit, paletteVarName) {
+    const entries = [];
+    if ('foreground' in colorInit &&
+        (!defaultInit || !colorInitValuesEqual(colorInit.foreground, defaultInit.foreground))) {
+        // Check if foreground matches default background (use refDefaultBackground)
+        if (defaultInit && colorInitValuesEqual(colorInit.foreground, defaultInit.background)) {
+            entries.push(`${tab(indentLevel + 1)}foreground: {\n${tab(indentLevel + 2)}refDefaultBackground: true,\n${tab(indentLevel + 1)}},`);
+        }
+        else {
+            entries.push(`${tab(indentLevel + 1)}foreground: ${colorInitValueToCode(colorInit.foreground, indentLevel + 1, paletteVarName)},`);
+        }
+    }
+    if ('background' in colorInit &&
+        (!defaultInit || !colorInitValuesEqual(colorInit.background, defaultInit.background))) {
+        // Check if background matches default foreground (use refDefaultForeground)
+        if (defaultInit && colorInitValuesEqual(colorInit.background, defaultInit.foreground)) {
+            entries.push(`${tab(indentLevel + 1)}background: {\n${tab(indentLevel + 2)}refDefaultForeground: true,\n${tab(indentLevel + 1)}},`);
+        }
+        else {
+            entries.push(`${tab(indentLevel + 1)}background: ${colorInitValueToCode(colorInit.background, indentLevel + 1, paletteVarName)},`);
+        }
+    }
+    return `${tab(indentLevel)}{\n${entries.join('\n')}\n${tab(indentLevel)}}`;
+}
+function colorThemeInitToCode(colorsInit, indentLevel, defaultInit, paletteVarName) {
+    const entries = getObjectTypedEntries(colorsInit).map(([colorName, colorInit,]) => {
+        return `${tab(indentLevel + 1)}'${colorName}': ${colorInitToCode(colorInit, indentLevel + 1, defaultInit, paletteVarName).trimStart()},`;
+    });
+    return `${tab(indentLevel)}{\n${entries.join('\n')}\n${tab(indentLevel)}}`;
+}

package/dist/{color → color-theme}/color-theme.d.ts

@@ -103,9 +103,3 @@ export declare const themeDefaultKey = "theme-default";
  * @category Color Theme
  */
 export declare function defineColorTheme<const Init extends ColorThemeInit>(defaultInit: RequiredAndNotNull<NoRefColorInit>, allColorsInit: Init): ColorTheme<Init>;
-/**
- * Convert a color theme into code to define that color theme.
- *
- * @category Color Theme
- */
-export declare function generateThemeCode(theme: ColorTheme, paletteVarName?: string | undefined): string;

package/dist/{color → color-theme}/color-theme.js

@@ -175,104 +175,3 @@ function createCssVarNames(colorName) {
         ].join('-'),
     };
 }
-/**
- * Convert a color theme into code to define that color theme.
- *
- * @category Color Theme
- */
-export function generateThemeCode(theme, paletteVarName) {
-    const defaultInitCode = colorInitToCode(theme.init.default, 1, undefined, paletteVarName);
-    const colorsInitCode = colorThemeInitToCode(theme.init.colors, 1, theme.init.default, paletteVarName);
-    return `defineColorTheme(\n${defaultInitCode},\n${colorsInitCode},\n)`;
-}
-function tab(level) {
-    return '    '.repeat(level);
-}
-function colorInitValuesEqual(a, b) {
-    if (typeof a !== typeof b) {
-        return false;
-    }
-    if (typeof a === 'string' || typeof a === 'number') {
-        return a === b;
-    }
-    if ('_$cssResult$' in a && '_$cssResult$' in b) {
-        return a.cssText === b.cssText;
-    }
-    // For references and SingleCssVarDefinition, compare as JSON
-    return JSON.stringify(a) === JSON.stringify(b);
-}
-function extractCssVarName(cssValue) {
-    const match = cssValue.match(/^var\(--([^,)]+)/);
-    return match ? match[1] : undefined;
-}
-function colorInitValueToCode(value, indentLevel, paletteVarName) {
-    if (typeof value === 'string') {
-        return `'${value}'`;
-    }
-    else if (typeof value === 'number') {
-        return String(value);
-    }
-    else if ('_$cssResult$' in value) {
-        const cssText = String(value);
-        if (paletteVarName) {
-            const varName = extractCssVarName(cssText);
-            if (varName) {
-                return `${paletteVarName}['${varName}']`;
-            }
-        }
-        return `css\`${cssText}\``;
-    }
-    else if ('refBackground' in value ||
-        'refForeground' in value ||
-        'refDefaultBackground' in value ||
-        'refDefaultForeground' in value) {
-        const entries = [];
-        if ('refForeground' in value) {
-            entries.push(`${tab(indentLevel + 1)}refForeground: '${value.refForeground}',`);
-        }
-        if ('refBackground' in value) {
-            entries.push(`${tab(indentLevel + 1)}refBackground: '${value.refBackground}',`);
-        }
-        if ('refDefaultForeground' in value) {
-            entries.push(`${tab(indentLevel + 1)}refDefaultForeground: true,`);
-        }
-        if ('refDefaultBackground' in value) {
-            entries.push(`${tab(indentLevel + 1)}refDefaultBackground: true,`);
-        }
-        return `{\n${entries.join('\n')}\n${tab(indentLevel)}}`;
-    }
-    else {
-        // SingleCssVarDefinition
-        return `'${value.default}'`;
-    }
-}
-function colorInitToCode(colorInit, indentLevel, defaultInit, paletteVarName) {
-    const entries = [];
-    if ('foreground' in colorInit &&
-        (!defaultInit || !colorInitValuesEqual(colorInit.foreground, defaultInit.foreground))) {
-        // Check if foreground matches default background (use refDefaultBackground)
-        if (defaultInit && colorInitValuesEqual(colorInit.foreground, defaultInit.background)) {
-            entries.push(`${tab(indentLevel + 1)}foreground: {\n${tab(indentLevel + 2)}refDefaultBackground: true,\n${tab(indentLevel + 1)}},`);
-        }
-        else {
-            entries.push(`${tab(indentLevel + 1)}foreground: ${colorInitValueToCode(colorInit.foreground, indentLevel + 1, paletteVarName)},`);
-        }
-    }
-    if ('background' in colorInit &&
-        (!defaultInit || !colorInitValuesEqual(colorInit.background, defaultInit.background))) {
-        // Check if background matches default foreground (use refDefaultForeground)
-        if (defaultInit && colorInitValuesEqual(colorInit.background, defaultInit.foreground)) {
-            entries.push(`${tab(indentLevel + 1)}background: {\n${tab(indentLevel + 2)}refDefaultForeground: true,\n${tab(indentLevel + 1)}},`);
-        }
-        else {
-            entries.push(`${tab(indentLevel + 1)}background: ${colorInitValueToCode(colorInit.background, indentLevel + 1, paletteVarName)},`);
-        }
-    }
-    return `${tab(indentLevel)}{\n${entries.join('\n')}\n${tab(indentLevel)}}`;
-}
-function colorThemeInitToCode(colorsInit, indentLevel, defaultInit, paletteVarName) {
-    const entries = getObjectTypedEntries(colorsInit).map(([colorName, colorInit,]) => {
-        return `${tab(indentLevel + 1)}'${colorName}': ${colorInitToCode(colorInit, indentLevel + 1, defaultInit, paletteVarName).trimStart()},`;
-    });
-    return `${tab(indentLevel)}{\n${entries.join('\n')}\n${tab(indentLevel)}}`;
-}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-export * from './color/build-color-theme.js';
-export * from './color/color-css.js';
-export * from './color/color-palette-book-pages.js';
-export * from './color/color-theme-book-pages.js';
-export * from './color/color-theme-override.js';
-export * from './color/color-theme.js';
+export * from './color-theme/build-color-theme.js';
+export * from './color-theme/color-css.js';
+export * from './color-theme/color-palette-book-pages.js';
+export * from './color-theme/color-theme-book-pages.js';
+export * from './color-theme/color-theme-code.js';
+export * from './color-theme/color-theme-override.js';
+export * from './color-theme/color-theme.js';

package/dist/index.js

@@ -1,6 +1,7 @@
-export * from './color/build-color-theme.js';
-export * from './color/color-css.js';
-export * from './color/color-palette-book-pages.js';
-export * from './color/color-theme-book-pages.js';
-export * from './color/color-theme-override.js';
-export * from './color/color-theme.js';
+export * from './color-theme/build-color-theme.js';
+export * from './color-theme/color-css.js';
+export * from './color-theme/color-palette-book-pages.js';
+export * from './color-theme/color-theme-book-pages.js';
+export * from './color-theme/color-theme-code.js';
+export * from './color-theme/color-theme-override.js';
+export * from './color-theme/color-theme.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "theme-vir",
-    "version": "28.16.1",
+    "version": "28.17.0",
     "description": "Create an entire web theme.",
     "keywords": [
         "design",
@@ -39,7 +39,8 @@
         "start": "virmator frontend",
         "test": "virmator test web",
         "test:coverage": "npm run test coverage",
-        "test:docs": "virmator docs check"
+        "test:docs": "virmator docs check",
+        "test:update": "virmator test web update"
     },
     "dependencies": {
         "@augment-vir/assert": "^31.57.5",