theme-vir 28.21.0 → 28.21.2

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

@@ -1,6 +1,7 @@
 import { type PartialWithUndefined, type RequiredAndNotNull } from '@augment-vir/common';
 import { ContrastLevelName } from '@electrovir/color';
 import { type CssVarDefinitions, type SingleCssVarDefinition } from 'lit-css-vars';
+import { type ColorInitValue } from './color-theme-init.js';
 import { type NoRefColorInit } from './color-theme.js';
 /** @category Internal */
 export type ColorPaletteVars = CssVarDefinitions<Record<`${string}-${string}-${number}`, any>>;
@@ -82,29 +83,29 @@ export type BuildLowLevelColorThemeOptions = PartialWithUndefined<{
  */
 export declare function buildColorTheme(colorPalette: Readonly<ColorPaletteVars>, { omittedColorValues, crossContrastLevels, prefix, }?: Readonly<BuildLowLevelColorThemeOptions>): {
     defaultLight: import("./color-theme.js").ColorTheme<Record<`${Lowercase<string>}-${Lowercase<string>}`, ((Required<Pick<{
-        foreground: import("./color-theme-init.js").ColorInitValue;
-        background: import("./color-theme-init.js").ColorInitValue;
+        foreground: ColorInitValue;
+        background: ColorInitValue;
     }, "foreground">> & Partial<Pick<{
-        foreground: import("./color-theme-init.js").ColorInitValue;
-        background: import("./color-theme-init.js").ColorInitValue;
+        foreground: ColorInitValue;
+        background: ColorInitValue;
     }, "background">>) | (Required<Pick<{
-        foreground: import("./color-theme-init.js").ColorInitValue;
-        background: import("./color-theme-init.js").ColorInitValue;
+        foreground: ColorInitValue;
+        background: ColorInitValue;
     }, "background">> & Partial<Pick<{
-        foreground: import("./color-theme-init.js").ColorInitValue;
-        background: import("./color-theme-init.js").ColorInitValue;
+        foreground: ColorInitValue;
+        background: ColorInitValue;
     }, "foreground">>)) & {}>>;
     darkOverride: import("./color-theme-init.js").ColorThemeOverride<Record<`${Lowercase<string>}-${Lowercase<string>}`, ((Required<Pick<{
-        foreground: import("./color-theme-init.js").ColorInitValue;
-        background: import("./color-theme-init.js").ColorInitValue;
+        foreground: ColorInitValue;
+        background: ColorInitValue;
     }, "foreground">> & Partial<Pick<{
-        foreground: import("./color-theme-init.js").ColorInitValue;
-        background: import("./color-theme-init.js").ColorInitValue;
+        foreground: ColorInitValue;
+        background: ColorInitValue;
     }, "background">>) | (Required<Pick<{
-        foreground: import("./color-theme-init.js").ColorInitValue;
-        background: import("./color-theme-init.js").ColorInitValue;
+        foreground: ColorInitValue;
+        background: ColorInitValue;
     }, "background">> & Partial<Pick<{
-        foreground: import("./color-theme-init.js").ColorInitValue;
-        background: import("./color-theme-init.js").ColorInitValue;
+        foreground: ColorInitValue;
+        background: ColorInitValue;
     }, "foreground">>)) & {}>>;
 };

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

@@ -184,6 +184,44 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
                                                     background: colorStrings,
                                                 }
                                                 : undefined;
+            /** Tracks which default reference each string value in the comparison maps to. */
+            const referencesToDefault = cross.crossWith === 'color-in-foreground-light-mode'
+                ? {
+                    background: {
+                        refDefaultBackground: true,
+                    },
+                }
+                : cross.crossWith === 'color-in-foreground-dark-mode'
+                    ? {
+                        background: {
+                            refDefaultBackground: true,
+                        },
+                    }
+                    : cross.crossWith === 'color-behind-bg-light-mode'
+                        ? {
+                            foreground: {
+                                refDefaultBackground: true,
+                            },
+                        }
+                        : cross.crossWith === 'color-behind-bg-dark-mode'
+                            ? {
+                                foreground: {
+                                    refDefaultBackground: true,
+                                },
+                            }
+                            : cross.crossWith === 'color-behind-fg-light-mode'
+                                ? {
+                                    foreground: {
+                                        refDefaultForeground: true,
+                                    },
+                                }
+                                : cross.crossWith === 'color-behind-fg-dark-mode'
+                                    ? {
+                                        foreground: {
+                                            refDefaultForeground: true,
+                                        },
+                                    }
+                                    : undefined;
             if (!comparison) {
                 throw new Error(`Forgot to handle crossWith: '${cross.crossWith}'`);
             }
@@ -208,7 +246,13 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
                         const selfColor = cross.crossWith === 'color-on-self-light-mode'
                             ? lightestSelf
                             : darkestSelf;
-                        return selfColor?.definition.value ?? value;
+                        return selfColor?.definition.value || value;
+                    }
+                    const referenceToDefault = referencesToDefault &&
+                        check.isKeyOf(key, referencesToDefault) &&
+                        referencesToDefault[key];
+                    if (referenceToDefault) {
+                        return referenceToDefault;
                     }
                     return value;
                 }

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

@@ -119,7 +119,8 @@ function colorInitValueToCode(value, indentLevel, paletteVarName) {
 function colorInitToCode(colorInit, indentLevel, defaultInit, paletteVarName) {
     const entries = [];
     if ('foreground' in colorInit &&
-        (!defaultInit || !colorInitValuesEqual(colorInit.foreground, defaultInit.foreground))) {
+        (!defaultInit || !colorInitValuesEqual(colorInit.foreground, defaultInit.foreground)) &&
+        !check.hasKey(colorInit.foreground, 'refDefaultForeground')) {
         // 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)}},`);
@@ -129,7 +130,8 @@ function colorInitToCode(colorInit, indentLevel, defaultInit, paletteVarName) {
         }
     }
     if ('background' in colorInit &&
-        (!defaultInit || !colorInitValuesEqual(colorInit.background, defaultInit.background))) {
+        (!defaultInit || !colorInitValuesEqual(colorInit.background, defaultInit.background)) &&
+        !check.hasKey(colorInit.background, 'refDefaultBackground')) {
         // 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)}},`);

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

@@ -1,11 +1,11 @@
 import { getObjectTypedEntries, getObjectTypedKeys, mapObjectValues } from '@augment-vir/common';
 import { createColorCssVarDefault, defineColorTheme, themeDefaultKey, } from './color-theme.js';
-function applyCssVarOverride({ overriddenDefault, overriddenColors, layerKey, themeColor, override, overrideValues, }) {
+function applyCssVarOverride({ originalTheme, layerKey, themeColor, override, overrideValues, }) {
     const layerOverride = override?.[layerKey];
     if (!layerOverride) {
         return;
     }
-    overrideValues[String(themeColor[layerKey].name)] = String(createColorCssVarDefault(layerKey, layerOverride, overriddenDefault, overriddenColors));
+    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
@@ -14,24 +14,11 @@ function applyCssVarOverride({ overriddenDefault, overriddenColors, layerKey, th
  * @category Color Theme
  */
 export function defineColorThemeOverride(originalTheme, overrideName, { defaultOverride, colorOverrides, }) {
-    const overriddenDefault = {
-        ...originalTheme.init.default,
-        ...defaultOverride,
-    };
-    const asThemeColorInit = mapObjectValues(originalTheme.init.colors, (colorName, colorInit) => {
-        const override = colorOverrides?.[colorName];
-        const newInit = {
-            ...colorInit,
-            ...override,
-        };
-        return newInit;
-    });
     const defaultValues = {};
     if (defaultOverride) {
         getObjectTypedKeys(defaultOverride).forEach((layerKey) => {
             applyCssVarOverride({
-                overriddenDefault,
-                overriddenColors: asThemeColorInit,
+                originalTheme,
                 layerKey,
                 override: defaultOverride,
                 themeColor: originalTheme.colors[themeDefaultKey],
@@ -47,16 +34,14 @@ export function defineColorThemeOverride(originalTheme, overrideName, { defaultO
                 throw new Error(`Override color name '${colorName}' does not exist in the theme being overridden.`);
             }
             applyCssVarOverride({
-                overriddenDefault,
-                overriddenColors: asThemeColorInit,
+                originalTheme,
                 layerKey: 'foreground',
                 override,
                 themeColor,
                 overrideValues: colorValues,
             });
             applyCssVarOverride({
-                overriddenDefault,
-                overriddenColors: asThemeColorInit,
+                originalTheme,
                 layerKey: 'background',
                 override,
                 themeColor,
@@ -64,7 +49,18 @@ export function defineColorThemeOverride(originalTheme, overrideName, { defaultO
             });
         });
     }
-    const asTheme = defineColorTheme(overriddenDefault, asThemeColorInit);
+    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: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "theme-vir",
-    "version": "28.21.0",
+    "version": "28.21.2",
     "description": "Create an entire web theme.",
     "keywords": [
         "design",