theme-vir 25.7.0 → 25.7.1

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

@@ -1,6 +1,6 @@
 import { type CssVarName } from 'lit-css-vars';
 import { type RequireAtLeastOne } from 'type-fest';
-import { type ColorInit, type ColorTheme, type ColorThemeInit } from './color-theme.js';
+import { type ColorInit, type ColorTheme, type ColorThemeInit, type NoRefColorInit } from './color-theme.js';
 /**
  * Input for {@link defineColorThemeOverride} color overrides.
  *
@@ -26,11 +26,11 @@ export type ColorThemeOverride<Init extends ColorThemeInit = ColorThemeInit> = {
  *
  * @category Color Theme
  */
-export declare function defineColorThemeOverride<const Init extends ColorThemeInit>(originalTheme: ColorTheme<Init>, overrideName: string, { defaultOverride, colorOverrides, }: RequireAtLeastOne<{
+export declare function defineColorThemeOverride<const Init extends ColorThemeInit>(originalTheme: ColorTheme<Init>, overrideName: string, { defaultOverride, colorOverrides, }: Readonly<RequireAtLeastOne<{
     /** Override the default foreground and/or background colors. */
-    defaultOverride: ColorInit;
-    colorOverrides: ColorThemeOverrideInit<ColorTheme<Init>>;
-}>): ColorThemeOverride<Init>;
+    defaultOverride: Readonly<NoRefColorInit>;
+    colorOverrides: Readonly<ColorThemeOverrideInit<ColorTheme<Init>>>;
+}>>): ColorThemeOverride<Init>;
 /**
  * Set all color theme CSS vars on the given element. If no override is given, the theme color
  * default values are assigned.

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

@@ -6,7 +6,7 @@ function applyCssVarOverride({ originalTheme, layerKey, themeColor, override, ov
     if (!layerOverride) {
         return;
     }
-    overrideValues[String(themeColor[layerKey].name)] = String(createColorCssVarDefault(layerKey, layerOverride, originalTheme));
+    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
@@ -51,10 +51,10 @@ export function defineColorThemeOverride(originalTheme, overrideName, { defaultO
         });
     }
     const asTheme = defineColorTheme({
-        ...originalTheme.colors[themeDefaultKey].init,
+        ...originalTheme.init.default,
         ...defaultOverride,
     }, {
-        ...originalTheme.init,
+        ...originalTheme.init.colors,
         ...colorOverrides,
     });
     return {

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

@@ -26,6 +26,15 @@ export type ColorInit = RequireAtLeastOne<{
     foreground: ColorInitValue;
     background: ColorInitValue;
 }>;
+/**
+ * Same as {@link ColorInit} but without references.
+ *
+ * @category Internal
+ */
+export type NoRefColorInit = RequireAtLeastOne<{
+    foreground: Exclude<ColorInitValue, ColorInitReference>;
+    background: Exclude<ColorInitValue, ColorInitReference>;
+}>;
 /**
  * A defined individual color from a color theme.
  *
@@ -56,7 +65,10 @@ export type ColorTheme<Init extends ColorThemeInit = ColorThemeInit> = {
     colors: AllColorThemeColors<Init>;
     inverse: AllColorThemeColors<Init>;
     /** The original init object for this theme. */
-    init: Init;
+    init: {
+        colors: Init;
+        default: RequiredAndNotNull<NoRefColorInit>;
+    };
 };
 /**
  * All colors within a {@link ColorTheme}.
@@ -66,14 +78,14 @@ export type ColorTheme<Init extends ColorThemeInit = ColorThemeInit> = {
 export type AllColorThemeColors<Init extends ColorThemeInit = ColorThemeInit> = {
     [ColorName in keyof Init as ColorName extends CssVarName ? ColorName : never]: ColorName extends CssVarName ? Init[ColorName] extends ColorInit ? ColorThemeColor<Init[ColorName], ColorName> : never : never;
 } & {
-    [themeDefaultKey]: ColorThemeColor<RequiredAndNotNull<ColorInit>, typeof themeDefaultKey>;
+    [themeDefaultKey]: ColorThemeColor<RequiredAndNotNull<NoRefColorInit>, typeof themeDefaultKey>;
 };
 /**
  * Handles a color init value.
  *
  * @category Internal
  */
-export declare function createColorCssVarDefault(fromName: string, init: ColorInitValue, fullInit: Record<string, unknown>): Exclude<ColorInitValue, ColorInitReference>;
+export declare function createColorCssVarDefault(fromName: string, init: ColorInitValue, defaultInit: RequiredAndNotNull<NoRefColorInit>, colorsInit: ColorThemeInit): Exclude<ColorInitValue, ColorInitReference>;
 /**
  * Default foreground/background color theme used in {@link ColorTheme}. Do not define a theme color
  * with this name!
@@ -86,4 +98,4 @@ export declare const themeDefaultKey = "theme-default";
  *
  * @category Color Theme
  */
-export declare function defineColorTheme<const Init extends ColorThemeInit>(defaultInit: RequiredAndNotNull<ColorInit>, allColorsInit: Init): ColorTheme<Init>;
+export declare function defineColorTheme<const Init extends ColorThemeInit>(defaultInit: RequiredAndNotNull<NoRefColorInit>, allColorsInit: Init): ColorTheme<Init>;

package/dist/color/color-theme.js

@@ -6,18 +6,24 @@ import { defineCssVars, } from 'lit-css-vars';
  *
  * @category Internal
  */
-export function createColorCssVarDefault(fromName, init, fullInit) {
-    if (check.hasKey(init, 'refBackground')) {
-        if (!(init.refBackground in fullInit)) {
-            throw new Error(`Color theme background reference '${init.refBackground}' does not exist. (Referenced from '${fromName}'.)`);
+export function createColorCssVarDefault(fromName, init, defaultInit, colorsInit) {
+    const referenceKey = check.hasKey(init, 'refBackground')
+        ? 'refBackground'
+        : check.hasKey(init, 'refForeground')
+            ? 'refForeground'
+            : undefined;
+    const reference = referenceKey && check.hasKey(init, referenceKey) ? init[referenceKey] : undefined;
+    if (reference) {
+        const layerKey = referenceKey === 'refBackground' ? 'background' : 'foreground';
+        const referenced = colorsInit[reference];
+        if (!referenced) {
+            throw new Error(`Color theme ${referenceKey} reference '${reference}' does not exist. (Referenced from '${fromName}'.)`);
         }
-        return `var(--${init.refBackground}-bg)`;
-    }
-    else if (check.hasKey(init, 'refForeground')) {
-        if (!(init.refForeground in fullInit)) {
-            throw new Error(`Color theme foreground reference '${init.refForeground}' does not exist. (Referenced from '${fromName}'.)`);
-        }
-        return `var(--${init.refForeground}-fg)`;
+        const colorValue = referenced[layerKey] ||
+            (layerKey === 'foreground'
+                ? createColorCssVarDefault('default-fg', defaultInit.foreground, defaultInit, colorsInit)
+                : createColorCssVarDefault('default-bg', defaultInit.background, defaultInit, colorsInit));
+        return `var(--${reference}-${layerKey === 'foreground' ? 'fg' : 'bg'}, ${createColorCssVarDefault(reference, colorValue, defaultInit, colorsInit)})`;
     }
     else {
         return init;
@@ -40,10 +46,10 @@ export function defineColorTheme(defaultInit, allColorsInit) {
         throw new Error(`Cannot define theme color by name '${themeDefaultKey}', it is used internally.`);
     }
     const defaultColors = defineCssVars({
-        'default-fg': createColorCssVarDefault('default-fg', defaultInit.foreground, allColorsInit),
-        'default-bg': createColorCssVarDefault('default-bg', defaultInit.background, allColorsInit),
-        'default-inverse-fg': createColorCssVarDefault('default-inverse-fg', defaultInit.background, allColorsInit),
-        'default-inverse-bg': createColorCssVarDefault('default-inverse-bg', defaultInit.foreground, allColorsInit),
+        'default-fg': createColorCssVarDefault('default-fg', defaultInit.foreground, defaultInit, allColorsInit),
+        'default-bg': createColorCssVarDefault('default-bg', defaultInit.background, defaultInit, allColorsInit),
+        'default-inverse-fg': createColorCssVarDefault('default-inverse-fg', defaultInit.background, defaultInit, allColorsInit),
+        'default-inverse-bg': createColorCssVarDefault('default-inverse-bg', defaultInit.foreground, defaultInit, allColorsInit),
     });
     const cssVarsSetup = getObjectTypedEntries(allColorsInit).reduce((accum, [colorName, colorInit,]) => {
         const names = createCssVarNames(colorName);
@@ -51,13 +57,13 @@ export function defineColorTheme(defaultInit, allColorsInit) {
             ? createColorCssVarDefault([
                 colorName,
                 'foreground',
-            ].join(' '), colorInit.foreground, allColorsInit)
+            ].join(' '), colorInit.foreground, defaultInit, allColorsInit)
             : `var(${defaultColors['default-fg'].name}, ${defaultColors['default-fg'].default})`;
         accum[names.background] = colorInit.background
             ? createColorCssVarDefault([
                 colorName,
                 'background',
-            ].join(' '), colorInit.background, allColorsInit)
+            ].join(' '), colorInit.background, defaultInit, allColorsInit)
             : `var(${defaultColors['default-bg'].name}, ${defaultColors['default-bg'].default})`;
         accum[names.foregroundInverse] =
             `var(--${names.background}, ${accum[names.background]})`;
@@ -117,7 +123,10 @@ export function defineColorTheme(defaultInit, allColorsInit) {
             [themeDefaultKey]: themeDefaultInverseColors,
             ...inverseColors,
         },
-        init: allColorsInit,
+        init: {
+            colors: allColorsInit,
+            default: defaultInit,
+        },
     };
 }
 function createCssVarNames(colorName) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "theme-vir",
-    "version": "25.7.0",
+    "version": "25.7.1",
     "description": "Create an entire web theme.",
     "keywords": [
         "design",
@@ -55,8 +55,8 @@
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.0",
         "@web/test-runner-visual-regression": "^0.10.0",
-        "element-book": "^25.7.0",
-        "element-vir": "^25.7.0",
+        "element-book": "^25.7.1",
+        "element-vir": "^25.7.1",
         "esbuild": "^0.25.4",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",