theme-vir 28.18.2 → 28.18.4

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

@@ -48,6 +48,12 @@ export declare const defaultContrastLevels: Readonly<ArrayOrSelectParam<Contrast
  * @category Internal
  */
 export type BuildLowLevelColorThemeOptions = PartialWithUndefined<{
+    /**
+     * Theme var prefix.
+     *
+     * @default 'vir'
+     */
+    prefix: string;
     /**
      * The default theme colors for {@link defineColorTheme}. Defaults to
      * {@link defaultLightThemePair}.
@@ -74,31 +80,31 @@ export type BuildLowLevelColorThemeOptions = PartialWithUndefined<{
  *
  * @category Color Theme
  */
-export declare function buildColorTheme(colorPalette: Readonly<ColorPaletteVars>, { omittedColorValues, crossContrastLevels, }?: Readonly<BuildLowLevelColorThemeOptions>): {
+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.js").ColorInitValue;
-        background: import("./color-theme.js").ColorInitValue;
+        foreground: import("./color-theme-init.js").ColorInitValue;
+        background: import("./color-theme-init.js").ColorInitValue;
     }, "foreground">> & Partial<Pick<{
-        foreground: import("./color-theme.js").ColorInitValue;
-        background: import("./color-theme.js").ColorInitValue;
+        foreground: import("./color-theme-init.js").ColorInitValue;
+        background: import("./color-theme-init.js").ColorInitValue;
     }, "background">>) | (Required<Pick<{
-        foreground: import("./color-theme.js").ColorInitValue;
-        background: import("./color-theme.js").ColorInitValue;
+        foreground: import("./color-theme-init.js").ColorInitValue;
+        background: import("./color-theme-init.js").ColorInitValue;
     }, "background">> & Partial<Pick<{
-        foreground: import("./color-theme.js").ColorInitValue;
-        background: import("./color-theme.js").ColorInitValue;
+        foreground: import("./color-theme-init.js").ColorInitValue;
+        background: import("./color-theme-init.js").ColorInitValue;
     }, "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;
+    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">> & Partial<Pick<{
-        foreground: import("./color-theme.js").ColorInitValue;
-        background: import("./color-theme.js").ColorInitValue;
+        foreground: import("./color-theme-init.js").ColorInitValue;
+        background: import("./color-theme-init.js").ColorInitValue;
     }, "background">>) | (Required<Pick<{
-        foreground: import("./color-theme.js").ColorInitValue;
-        background: import("./color-theme.js").ColorInitValue;
+        foreground: import("./color-theme-init.js").ColorInitValue;
+        background: import("./color-theme-init.js").ColorInitValue;
     }, "background">> & Partial<Pick<{
-        foreground: import("./color-theme.js").ColorInitValue;
-        background: import("./color-theme.js").ColorInitValue;
+        foreground: import("./color-theme-init.js").ColorInitValue;
+        background: import("./color-theme-init.js").ColorInitValue;
     }, "foreground">>)) & {}>>;
 };

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

@@ -101,7 +101,7 @@ export const defaultContrastLevels = {
  *
  * @category Color Theme
  */
-export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmittedColorGroupColorValues, crossContrastLevels = defaultContrastLevels, } = {}) {
+export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmittedColorGroupColorValues, crossContrastLevels = defaultContrastLevels, prefix = 'vir', } = {}) {
     const contrastLevels = extractParam(crossContrastLevels, {
         mapFrom: contrastLevelLabel,
     });
@@ -109,6 +109,7 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
     const defaultTheme = {
         background: 'white',
         foreground: 'black',
+        prefix,
     };
     const lightThemeColors = {};
     const darkThemeOverrides = {};
@@ -184,7 +185,7 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
             });
             if (cross.crossWith === 'color-in-foreground-light-mode') {
                 const name = [
-                    firstColor.prefix,
+                    prefix,
                     firstColor.colorName,
                     'foreground',
                     cross.contrast,
@@ -193,7 +194,7 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
             }
             else if (cross.crossWith === 'color-in-background-light-mode') {
                 const name = [
-                    firstColor.prefix,
+                    prefix,
                     firstColor.colorName,
                     'background',
                     cross.contrast,
@@ -202,7 +203,7 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
             }
             else if (cross.crossWith === 'color-on-self-light-mode') {
                 const name = [
-                    firstColor.prefix,
+                    prefix,
                     firstColor.colorName,
                     'on',
                     'self',
@@ -212,7 +213,7 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
             }
             else if (cross.crossWith === 'color-in-foreground-dark-mode') {
                 const name = [
-                    firstColor.prefix,
+                    prefix,
                     firstColor.colorName,
                     'foreground',
                     cross.contrast,
@@ -221,7 +222,7 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
             }
             else if (cross.crossWith === 'color-in-background-dark-mode') {
                 const name = [
-                    firstColor.prefix,
+                    prefix,
                     firstColor.colorName,
                     'background',
                     cross.contrast,
@@ -231,7 +232,7 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
             }
             else if (cross.crossWith === 'color-on-self-dark-mode') {
                 const name = [
-                    firstColor.prefix,
+                    prefix,
                     firstColor.colorName,
                     'on',
                     'self',

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

@@ -1,6 +1,6 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { BookPageControlType, type BookPage } from 'element-book';
-import { type ColorThemeOverride } from './color-theme-override.js';
+import { type ColorThemeOverride } from './color-theme-init.js';
 import { type ColorTheme } from './color-theme.js';
 /**
  * Create multiple element-book pages to showcase a theme its overrides (if any).

package/dist/color-theme/color-theme-book-pages.js

@@ -1,9 +1,10 @@
-import { check } from '@augment-vir/assert';
+import { assertWrap, check } from '@augment-vir/assert';
 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 { css, html, listen, nothing, onDomRendered } from 'element-vir';
 import { generateThemeCode } from './color-theme-code.js';
+import { applyColorTheme } from './color-theme.js';
 const noneOverridesSelectionValue = 'None';
 /**
  * Create multiple element-book pages to showcase a theme its overrides (if any).
@@ -73,7 +74,14 @@ export function createColorThemeBookPages({ parent, title, theme, hideInverseCol
               `
             : nothing;
         return html `
-            <div class="with-inverse">${normalTemplate}${inverseTemplate}</div>
+            <div
+                class="with-inverse"
+                ${onDomRendered((element) => {
+            applyColorTheme(assertWrap.instanceOf(element, HTMLElement), theme);
+        })}
+            >
+                ${normalTemplate}${inverseTemplate}
+            </div>
         `;
     }
     function createThemePageExamples(defineExample, defaultTheme, overrides) {

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

@@ -1,5 +1,5 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
-import { type ColorThemeOverride } from './color-theme-override.js';
+import { type ColorThemeOverride } from './color-theme-init.js';
 import { type ColorTheme } from './color-theme.js';
 /**
  * Convert a color theme into code to define that color theme.

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

@@ -1,4 +1,6 @@
+import { check } from '@augment-vir/assert';
 import { getObjectTypedEntries, } from '@augment-vir/common';
+import { CSSResult } from 'element-vir';
 /**
  * Convert a color theme into code to define that color theme.
  *
@@ -64,14 +66,9 @@ 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);
+    const aString = check.isString(a) || a instanceof CSSResult ? String(a) : JSON.stringify(a);
+    const bString = check.isString(b) || b instanceof CSSResult ? String(b) : JSON.stringify(b);
+    return aString === bString;
 }
 function extractCssVarName(cssValue) {
     const match = cssValue.match(/^var\(--([^,)]+)/);
@@ -84,7 +81,7 @@ function colorInitValueToCode(value, indentLevel, paletteVarName) {
     else if (typeof value === 'number') {
         return String(value);
     }
-    else if ('_$cssResult$' in value) {
+    else if (value instanceof CSSResult) {
         const cssText = String(value);
         if (paletteVarName) {
             const varName = extractCssVarName(cssText);

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

@@ -0,0 +1,47 @@
+import { type CSSResult } from 'element-vir';
+import { type CssVarName, type SingleCssVarDefinition } from 'lit-css-vars';
+import { type RequireAtLeastOne } from 'type-fest';
+import { type ColorTheme } from './color-theme.js';
+/**
+ * Reference another color from this same definition inside {@link ColorInitValue}
+ *
+ * @category Internal
+ */
+export type ColorInitReference = RequireAtLeastOne<{
+    refForeground: CssVarName;
+    refBackground: CssVarName;
+    refDefaultBackground: true;
+    refDefaultForeground: true;
+}>;
+/**
+ * All possible types for {@link ColorInit}.
+ *
+ * @category Internal
+ */
+export type ColorInitValue = string | number | CSSResult | ColorInitReference | SingleCssVarDefinition;
+/**
+ * An individual theme color init.
+ *
+ * @category Internal
+ */
+export type ColorInit = RequireAtLeastOne<{
+    foreground: ColorInitValue;
+    background: ColorInitValue;
+}>;
+/**
+ * Base input type for the type parameter in `defineColorTheme`.
+ *
+ * @category Internal
+ */
+export type ColorThemeInit = Record<CssVarName, ColorInit>;
+/**
+ * Output of `defineColorThemeOverride`.
+ *
+ * @category Internal
+ */
+export type ColorThemeOverride<Init extends ColorThemeInit = ColorThemeInit> = {
+    name: string;
+    overrides: Record<CssVarName, string>;
+    originalTheme: ColorTheme<Init>;
+    asTheme: ColorTheme<Init>;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,6 @@
-import { type CssVarName } from 'lit-css-vars';
 import { type RequireAtLeastOne } from 'type-fest';
-import { themeDefaultKey, type ColorInit, type ColorTheme, type ColorThemeInit, type NoRefColorInit } from './color-theme.js';
+import { type ColorInit, type ColorThemeInit, type ColorThemeOverride } from './color-theme-init.js';
+import { themeDefaultKey, type ColorTheme, type NoRefColorInit } from './color-theme.js';
 /**
  * Input for {@link defineColorThemeOverride} color overrides.
  *
@@ -9,17 +9,6 @@ import { themeDefaultKey, type ColorInit, type ColorTheme, type ColorThemeInit,
 export type ColorThemeOverrideInit<Theme extends ColorTheme = ColorTheme> = Omit<Partial<{
     [ColorName in keyof Theme['colors']]: ColorInit;
 }>, typeof themeDefaultKey>;
-/**
- * Output of {@link defineColorThemeOverride}.
- *
- * @category Internal
- */
-export type ColorThemeOverride<Init extends ColorThemeInit = ColorThemeInit> = {
-    name: string;
-    overrides: Record<CssVarName, string>;
-    originalTheme: ColorTheme<Init>;
-    asTheme: ColorTheme<Init>;
-};
 /**
  * Define a color theme override. Use this to define multiple theme variations, like light mode vs
  * dark mode.
@@ -31,12 +20,3 @@ export declare function defineColorThemeOverride<const Init extends ColorThemeIn
     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.
- *
- * @category Color Theme
- */
-export declare function applyColorTheme<const Theme extends ColorTheme>(
-/** This should usually be the top-level `html` element. */
-element: HTMLElement, fullTheme: Theme, themeOverride?: ColorThemeOverride | undefined): void;

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

@@ -1,5 +1,4 @@
-import { getObjectTypedEntries, getObjectTypedKeys, getObjectTypedValues, mapObjectValues, } from '@augment-vir/common';
-import { setCssVarValue } from 'lit-css-vars';
+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];
@@ -72,36 +71,3 @@ export function defineColorThemeOverride(originalTheme, overrideName, { defaultO
         asTheme,
     };
 }
-/**
- * Set all color theme CSS vars on the given element. If no override is given, the theme color
- * default values are assigned.
- *
- * @category Color Theme
- */
-export function applyColorTheme(
-/** This should usually be the top-level `html` element. */
-element, fullTheme, themeOverride) {
-    getObjectTypedValues(fullTheme.colors).forEach((themeColor) => {
-        applyIndividualThemeColorValue({
-            element,
-            layerKey: 'background',
-            themeColor,
-            themeOverride,
-        });
-        applyIndividualThemeColorValue({
-            element,
-            layerKey: 'foreground',
-            themeColor,
-            themeOverride,
-        });
-    });
-}
-function applyIndividualThemeColorValue({ element, layerKey, themeOverride, themeColor, }) {
-    const override = themeOverride?.overrides[String(themeColor[layerKey].name)];
-    const value = override || themeColor[layerKey].default;
-    setCssVarValue({
-        forCssVar: themeColor[layerKey],
-        onElement: element,
-        toValue: value,
-    });
-}

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

@@ -1,33 +1,8 @@
 import { type RequiredAndNotNull, type Values } from '@augment-vir/common';
-import { type CSSResult } from 'element-vir';
+import { CSSResult } from 'element-vir';
 import { type CssVarName, type SingleCssVarDefinition } from 'lit-css-vars';
 import { type RequireAtLeastOne } from 'type-fest';
-/**
- * Reference another color from this same definition inside {@link ColorInitValue}
- *
- * @category Internal
- */
-export type ColorInitReference = RequireAtLeastOne<{
-    refForeground: CssVarName;
-    refBackground: CssVarName;
-    refDefaultBackground: true;
-    refDefaultForeground: true;
-}>;
-/**
- * All possible types for {@link ColorInit}.
- *
- * @category Internal
- */
-export type ColorInitValue = string | number | CSSResult | ColorInitReference | SingleCssVarDefinition;
-/**
- * An individual theme color init.
- *
- * @category Internal
- */
-export type ColorInit = RequireAtLeastOne<{
-    foreground: ColorInitValue;
-    background: ColorInitValue;
-}>;
+import { type ColorInit, type ColorInitReference, type ColorInitValue, type ColorThemeInit, type ColorThemeOverride } from './color-theme-init.js';
 /**
  * Same as {@link ColorInit} but without references.
  *
@@ -52,12 +27,6 @@ export type ColorThemeColor<Init extends ColorInit = ColorInit, Name extends Css
     name: Name;
     init: Init;
 };
-/**
- * Base input type for the type parameter in {@link defineColorTheme}.
- *
- * @category Internal
- */
-export type ColorThemeInit = Record<CssVarName, ColorInit>;
 /**
  * A finalized color theme, output from {@link defineColorTheme}.
  *
@@ -69,7 +38,7 @@ export type ColorTheme<Init extends ColorThemeInit = ColorThemeInit> = {
     /** The original init object for this theme. */
     init: {
         colors: Init;
-        default: RequiredAndNotNull<NoRefColorInit>;
+        default: Readonly<DefaultColorThemeInit>;
     };
 };
 /**
@@ -80,7 +49,7 @@ 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<NoRefColorInit>, typeof themeDefaultKey>;
+    [themeDefaultKey]: ColorThemeColor<DefaultColorThemeInit, typeof themeDefaultKey>;
 };
 /** @category Internal */
 export declare function noRefColorInitToString(init: Values<NoRefColorInit>): string;
@@ -89,7 +58,15 @@ export declare function noRefColorInitToString(init: Values<NoRefColorInit>): st
  *
  * @category Internal
  */
-export declare function createColorCssVarDefault(fromName: string, init: ColorInitValue, defaultInit: RequiredAndNotNull<NoRefColorInit>, colorsInit: ColorThemeInit): string | number | CSSResult;
+export declare function createColorCssVarDefault(fromName: string, init: ColorInitValue, defaultInit: Readonly<DefaultColorThemeInit>, colorsInit: ColorThemeInit): string | number | CSSResult;
+/**
+ * Default theme init for {@link defineColorTheme}.
+ *
+ * @category Internal
+ */
+export type DefaultColorThemeInit = RequiredAndNotNull<NoRefColorInit> & {
+    prefix: string;
+};
 /**
  * Default foreground/background color theme used in {@link ColorTheme}. Do not define a theme color
  * with this name!
@@ -97,9 +74,18 @@ export declare function createColorCssVarDefault(fromName: string, init: ColorIn
  * @category Internal
  */
 export declare const themeDefaultKey = "theme-default";
+/**
+ * Set all color theme CSS vars on the given element. If no override is given, the theme color
+ * default values are assigned.
+ *
+ * @category Color Theme
+ */
+export declare function applyColorTheme<const Theme extends ColorTheme>(
+/** This should usually be the top-level `html` element. */
+element: HTMLElement, fullTheme: Theme, themeOverride?: ColorThemeOverride | undefined): void;
 /**
  * Define a color theme.
  *
  * @category Color Theme
  */
-export declare function defineColorTheme<const Init extends ColorThemeInit>(defaultInit: RequiredAndNotNull<NoRefColorInit>, allColorsInit: Init): ColorTheme<Init>;
+export declare function defineColorTheme<const Init extends ColorThemeInit>(defaultInit: Readonly<DefaultColorThemeInit>, allColorsInit: Init): ColorTheme<Init>;

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

@@ -1,9 +1,10 @@
 import { assert, check } from '@augment-vir/assert';
-import { getObjectTypedEntries, log, } from '@augment-vir/common';
-import { defineCssVars, } from 'lit-css-vars';
+import { getObjectTypedEntries, getObjectTypedValues, log, mapObjectValues, } from '@augment-vir/common';
+import { CSSResult } from 'element-vir';
+import { CssVarSyntaxName, defineCssVars, setCssVarValue, } from 'lit-css-vars';
 /** @category Internal */
 export function noRefColorInitToString(init) {
-    if (check.isPrimitive(init) || '_$cssResult$' in init) {
+    if (check.isPrimitive(init) || init instanceof CSSResult) {
         return String(init);
     }
     else {
@@ -16,14 +17,16 @@ export function noRefColorInitToString(init) {
  * @category Internal
  */
 export function createColorCssVarDefault(fromName, init, defaultInit, colorsInit) {
-    if (check.isPrimitive(init) || '_$cssResult$' in init) {
+    const defaultForegroundKey = `${defaultInit.prefix}-default-fg`;
+    const defaultBackgroundKey = `${defaultInit.prefix}-default-bg`;
+    if (check.isPrimitive(init) || init instanceof CSSResult) {
         return init;
     }
     else if ('refDefaultBackground' in init) {
-        return `var(--default-bg, ${noRefColorInitToString(defaultInit.background)})`;
+        return `var(--${defaultBackgroundKey}, ${noRefColorInitToString(defaultInit.background)})`;
     }
     else if ('refDefaultForeground' in init) {
-        return `var(--default-fg, ${noRefColorInitToString(defaultInit.foreground)})`;
+        return `var(--${defaultForegroundKey}, ${noRefColorInitToString(defaultInit.foreground)})`;
     }
     else if ('refBackground' in init || 'refForeground' in init) {
         const referenceKey = check.hasKey(init, 'refBackground')
@@ -39,8 +42,8 @@ export function createColorCssVarDefault(fromName, init, defaultInit, colorsInit
         }
         const colorValue = referenced[layerKey] ||
             (layerKey === 'foreground'
-                ? createColorCssVarDefault('default-fg', defaultInit.foreground, defaultInit, colorsInit)
-                : createColorCssVarDefault('default-bg', defaultInit.background, defaultInit, colorsInit));
+                ? createColorCssVarDefault(defaultForegroundKey, defaultInit.foreground, defaultInit, colorsInit)
+                : createColorCssVarDefault(defaultBackgroundKey, defaultInit.background, defaultInit, colorsInit));
         return `var(--${reference}-${layerKey === 'foreground' ? 'fg' : 'bg'}, ${createColorCssVarDefault(reference, colorValue, defaultInit, colorsInit)})`;
     }
     else {
@@ -54,6 +57,39 @@ export function createColorCssVarDefault(fromName, init, defaultInit, colorsInit
  * @category Internal
  */
 export const themeDefaultKey = 'theme-default';
+/**
+ * Set all color theme CSS vars on the given element. If no override is given, the theme color
+ * default values are assigned.
+ *
+ * @category Color Theme
+ */
+export function applyColorTheme(
+/** This should usually be the top-level `html` element. */
+element, fullTheme, themeOverride) {
+    getObjectTypedValues(fullTheme.colors).forEach((themeColor) => {
+        applyIndividualThemeColorValue({
+            element,
+            layerKey: 'background',
+            themeColor,
+            themeOverride,
+        });
+        applyIndividualThemeColorValue({
+            element,
+            layerKey: 'foreground',
+            themeColor,
+            themeOverride,
+        });
+    });
+}
+function applyIndividualThemeColorValue({ element, layerKey, themeOverride, themeColor, }) {
+    const override = themeOverride?.overrides[String(themeColor[layerKey].name)];
+    const value = override || themeColor[layerKey].default;
+    setCssVarValue({
+        forCssVar: themeColor[layerKey],
+        onElement: element,
+        toValue: value,
+    });
+}
 /**
  * Define a color theme.
  *
@@ -64,30 +100,59 @@ export function defineColorTheme(defaultInit, allColorsInit) {
         if (themeDefaultKey in 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, 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 defaultForegroundKey = `${defaultInit.prefix}-default-fg`;
+        const defaultBackgroundKey = `${defaultInit.prefix}-default-bg`;
+        const inverseDefaultForegroundKey = `${defaultInit.prefix}-default-inverse-fg`;
+        const inverseDefaultBackgroundKey = `${defaultInit.prefix}-default-inverse-bg`;
+        const defaultColorsInit = mapObjectValues({
+            [defaultForegroundKey]: createColorCssVarDefault(defaultForegroundKey, defaultInit.foreground, defaultInit, allColorsInit),
+            [defaultBackgroundKey]: createColorCssVarDefault(defaultBackgroundKey, defaultInit.background, defaultInit, allColorsInit),
+            [inverseDefaultForegroundKey]: createColorCssVarDefault(inverseDefaultForegroundKey, defaultInit.background, defaultInit, allColorsInit),
+            [inverseDefaultBackgroundKey]: createColorCssVarDefault(inverseDefaultBackgroundKey, defaultInit.foreground, defaultInit, allColorsInit),
+        }, (key, value) => {
+            return {
+                default: value,
+                initialValue: 'transparent',
+                syntax: CssVarSyntaxName.Color,
+            };
         });
+        const defaultColors = defineCssVars(defaultColorsInit);
         const cssVarsSetup = getObjectTypedEntries(allColorsInit).reduce((accum, [colorName, colorInit,]) => {
             const names = createCssVarNames(colorName);
-            accum[names.foreground] = colorInit.foreground
+            const foreground = colorInit.foreground
                 ? createColorCssVarDefault([
                     colorName,
                     'foreground',
                 ].join(' '), colorInit.foreground, defaultInit, allColorsInit)
-                : `var(${defaultColors['default-fg'].name}, ${defaultColors['default-fg'].default})`;
-            accum[names.background] = colorInit.background
+                : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    `var(${defaultColors[defaultForegroundKey].name}, ${defaultColors[defaultForegroundKey].default})`;
+            const background = colorInit.background
                 ? createColorCssVarDefault([
                     colorName,
                     'background',
                 ].join(' '), colorInit.background, defaultInit, allColorsInit)
-                : `var(${defaultColors['default-bg'].name}, ${defaultColors['default-bg'].default})`;
-            accum[names.foregroundInverse] =
-                `var(--${names.background}, ${accum[names.background]})`;
-            accum[names.backgroundInverse] =
-                `var(--${names.foreground}, ${accum[names.foreground]})`;
+                : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    `var(${defaultColors[defaultBackgroundKey].name}, ${defaultColors[defaultBackgroundKey].default})`;
+            accum[names.foreground] = {
+                default: foreground,
+                initialValue: 'transparent',
+                syntax: CssVarSyntaxName.Color,
+            };
+            accum[names.background] = {
+                default: background,
+                initialValue: 'transparent',
+                syntax: CssVarSyntaxName.Color,
+            };
+            accum[names.foregroundInverse] = {
+                default: `var(--${names.background})`,
+                initialValue: 'transparent',
+                syntax: CssVarSyntaxName.Color,
+            };
+            accum[names.backgroundInverse] = {
+                default: `var(--${names.foreground})`,
+                initialValue: 'transparent',
+                syntax: CssVarSyntaxName.Color,
+            };
             return accum;
         }, {});
         /**
@@ -123,15 +188,19 @@ export function defineColorTheme(defaultInit, allColorsInit) {
             };
         });
         const themeDefaultColors = {
-            foreground: defaultColors['default-fg'],
-            background: defaultColors['default-bg'],
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            foreground: defaultColors[defaultForegroundKey],
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            background: defaultColors[defaultBackgroundKey],
             init: defaultInit,
             name: themeDefaultKey,
         };
         const themeDefaultInverseColors = {
             ...themeDefaultColors,
-            foreground: defaultColors['default-inverse-fg'],
-            background: defaultColors['default-inverse-bg'],
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            foreground: defaultColors[inverseDefaultForegroundKey],
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            background: defaultColors[inverseDefaultBackgroundKey],
         };
         return {
             colors: {

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 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-init.js';
 export * from './color-theme/color-theme-override.js';
 export * from './color-theme/color-theme.js';

package/dist/index.js

@@ -1,7 +1,7 @@
 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-init.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.18.2",
+    "version": "28.18.4",
     "description": "Create an entire web theme.",
     "keywords": [
         "design",
@@ -43,29 +43,29 @@
         "test:update": "virmator test web update"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.58.0",
-        "@augment-vir/common": "^31.58.0",
-        "@electrovir/color": "^1.7.0",
+        "@augment-vir/assert": "^31.59.0",
+        "@augment-vir/common": "^31.59.0",
+        "@electrovir/color": "^1.7.5",
         "apca-w3": "^0.1.9",
-        "lit-css-vars": "^3.0.11",
+        "lit-css-vars": "^3.2.2",
         "type-fest": "^5.4.1"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.58.0",
+        "@augment-vir/test": "^31.59.0",
         "@types/apca-w3": "^0.1.3",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.1",
         "@web/test-runner-visual-regression": "^0.10.0",
-        "element-book": "^26.15.0",
-        "element-vir": "^26.14.1",
+        "element-book": "^26.15.3",
+        "element-vir": "^26.14.2",
         "esbuild": "^0.27.2",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
         "typedoc": "^0.28.16",
         "typescript": "5.9.3",
-        "vira": "^28.19.5",
+        "vira": "^28.19.7",
         "vite": "^7.3.1",
         "vite-tsconfig-paths": "^6.0.4"
     },

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

@@ -1,9 +0,0 @@
-import { type CSSResult } from 'element-vir';
-import { type ColorThemeColor } from './color-theme.js';
-/**
- * Creates foreground and background CSS code. The foreground color is applied to the CSS `color`
- * property and the background color is applied to the CSS `background-color` property.
- *
- * @category Color Theme
- */
-export declare function colorCss(color: Readonly<ColorThemeColor>): CSSResult;

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

@@ -1,13 +0,0 @@
-import { css } from 'element-vir';
-/**
- * Creates foreground and background CSS code. The foreground color is applied to the CSS `color`
- * property and the background color is applied to the CSS `background-color` property.
- *
- * @category Color Theme
- */
-export function colorCss(color) {
-    return css `
-        color: ${color.foreground.value};
-        background-color: ${color.background.value};
-    `;
-}