theme-vir 25.6.0 → 25.7.1

package/README.md

@@ -1,3 +1,5 @@
 # theme-vir
 
 Easy-to-create, all-in-one theme generator with `element-vir`. WIP.
+
+Reference docs: https://electrovir.github.io/element-vir/theme-vir/docs

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

@@ -0,0 +1,23 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { BookPageControlType, type BookPage } from 'element-book';
+import { type ColorThemeOverride } from './color-theme-override.js';
+import { type ColorTheme } from './color-theme.js';
+/**
+ * Create multiple element-book pages to showcase a theme its overrides (if any).
+ *
+ * @category Color Theme
+ */
+export declare function createColorThemeBookPages({ parent, title, theme, hideInverseColors, overrides, }: {
+    title: string;
+    theme: Readonly<ColorTheme>;
+} & PartialWithUndefined<{
+    parent: Readonly<BookPage>;
+    hideInverseColors: boolean;
+    overrides: ReadonlyArray<Readonly<ColorThemeOverride>>;
+}>): (BookPage<{}, Readonly<BookPage> | undefined, {
+    readonly 'Show Var Names': import("element-book").BookPageControlInit<BookPageControlType.Checkbox>;
+    readonly 'Show Contrast Tips': import("element-book").BookPageControlInit<BookPageControlType.Checkbox>;
+}> | BookPage<{}, BookPage<{}, Readonly<BookPage> | undefined, {
+    readonly 'Show Var Names': import("element-book").BookPageControlInit<BookPageControlType.Checkbox>;
+    readonly 'Show Contrast Tips': import("element-book").BookPageControlInit<BookPageControlType.Checkbox>;
+}>, {}>)[];

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

@@ -0,0 +1,107 @@
+import { BookPageControlType, defineBookPage, definePageControl, } from 'element-book';
+import { css, html, listen, nothing } from 'element-vir';
+import { ThemeVirColorExample } from './elements/theme-vir-color-example.element.js';
+/**
+ * Create multiple element-book pages to showcase a theme its overrides (if any).
+ *
+ * @category Color Theme
+ */
+export function createColorThemeBookPages({ parent, title, theme, hideInverseColors, overrides, }) {
+    const themeParentPage = defineBookPage({
+        parent,
+        title,
+        controls: {
+            'Show Var Names': definePageControl({
+                controlType: BookPageControlType.Checkbox,
+                initValue: false,
+            }),
+            'Show Contrast Tips': definePageControl({
+                controlType: BookPageControlType.Checkbox,
+                initValue: true,
+            }),
+        },
+    });
+    function createThemePage(defineExample, theme) {
+        Object.values(theme.colors).forEach((themeColor) => {
+            defineExample({
+                title: themeColor.name,
+                styles: css `
+                    :host {
+                        display: flex;
+                        flex-direction: column;
+                        gap: 4px;
+                    }
+                `,
+                state() {
+                    return {
+                        forceShowEverything: false,
+                    };
+                },
+                render({ controls, state, updateState }) {
+                    const normalTemplate = html `
+                        <${ThemeVirColorExample.assign({
+                        color: themeColor,
+                        showVarValues: true,
+                        showVarNames: controls['Show Var Names'] || state.forceShowEverything,
+                        showContrast: controls['Show Contrast Tips'] || state.forceShowEverything,
+                    })}
+                            ${listen(ThemeVirColorExample.events.toggleShowVars, () => {
+                        updateState({
+                            forceShowEverything: !state.forceShowEverything,
+                        });
+                    })}
+                        ></${ThemeVirColorExample}>
+                    `;
+                    const inverseColor = hideInverseColors
+                        ? undefined
+                        : theme.inverse[themeColor.name];
+                    const inverseTemplate = inverseColor
+                        ? html `
+                              <${ThemeVirColorExample.assign({
+                            color: inverseColor,
+                            showVarValues: false,
+                            showVarNames: controls['Show Var Names'] || state.forceShowEverything,
+                            showContrast: controls['Show Contrast Tips'] || state.forceShowEverything,
+                        })}
+                                  ${listen(ThemeVirColorExample.events.toggleShowVars, () => {
+                            updateState({
+                                forceShowEverything: !state.forceShowEverything,
+                            });
+                        })}
+                              ></${ThemeVirColorExample}>
+                          `
+                        : nothing;
+                    return html `
+                        ${normalTemplate}${inverseTemplate}
+                    `;
+                },
+            });
+        });
+    }
+    const descriptionParagraphs = [
+        'Click a color preview to show CSS var names and values.',
+    ];
+    const defaultThemePage = defineBookPage({
+        parent: themeParentPage,
+        title: 'Default Theme',
+        descriptionParagraphs,
+        defineExamples({ defineExample }) {
+            createThemePage(defineExample, theme);
+        },
+    });
+    const overridePages = (overrides || []).map((override) => {
+        return defineBookPage({
+            parent: themeParentPage,
+            title: override.name,
+            descriptionParagraphs,
+            defineExamples({ defineExample }) {
+                createThemePage(defineExample, override.asTheme);
+            },
+        });
+    });
+    return [
+        themeParentPage,
+        defaultThemePage,
+        ...overridePages,
+    ];
+}

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

@@ -1,31 +1,36 @@
 import { type CssVarName } from 'lit-css-vars';
 import { type RequireAtLeastOne } from 'type-fest';
-import { type ColorInit, type ColorTheme } from './color-theme.js';
+import { type ColorInit, type ColorTheme, type ColorThemeInit, type NoRefColorInit } from './color-theme.js';
 /**
  * Input for {@link defineColorThemeOverride} color overrides.
  *
  * @category Internal
  */
 export type ColorThemeOverrideInit<Theme extends ColorTheme = ColorTheme> = Omit<Partial<{
-    [ColorName in keyof Theme]: ColorInit;
+    [ColorName in keyof Theme['colors']]: ColorInit;
 }>, 'default'>;
 /**
  * Output of {@link defineColorThemeOverride}.
  *
  * @category Internal
  */
-export type ColorThemeOverrides = Record<CssVarName, string>;
+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.
  *
  * @category Color Theme
  */
-export declare function defineColorThemeOverride<const Theme extends ColorTheme>(originalTheme: Theme, { 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<Theme>;
-}>): ColorThemeOverrides;
+    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.
@@ -34,4 +39,4 @@ export declare function defineColorThemeOverride<const Theme extends ColorTheme>
  */
 export declare function applyColorTheme<const Theme extends ColorTheme>(
 /** This should usually be the top-level `html` element. */
-element: HTMLElement, fullTheme: Theme, themeOverride?: ColorThemeOverrides | undefined): void;
+element: HTMLElement, fullTheme: Theme, themeOverride?: ColorThemeOverride | undefined): void;

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

@@ -1,12 +1,12 @@
 import { getObjectTypedEntries, getObjectTypedKeys, getObjectTypedValues } from '@augment-vir/common';
 import { setCssVarValue } from 'lit-css-vars';
-import { createColorCssVarDefault, } from './color-theme.js';
+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));
+    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,7 +14,7 @@ function applyCssVarOverride({ originalTheme, layerKey, themeColor, override, ov
  *
  * @category Color Theme
  */
-export function defineColorThemeOverride(originalTheme, { defaultOverride, colorOverrides, }) {
+export function defineColorThemeOverride(originalTheme, overrideName, { defaultOverride, colorOverrides, }) {
     const defaultValues = {};
     if (defaultOverride) {
         getObjectTypedKeys(defaultOverride).forEach((layerKey) => {
@@ -22,7 +22,7 @@ export function defineColorThemeOverride(originalTheme, { defaultOverride, color
                 originalTheme,
                 layerKey,
                 override: defaultOverride,
-                themeColor: originalTheme.default,
+                themeColor: originalTheme.colors[themeDefaultKey],
                 overrideValues: defaultValues,
             });
         });
@@ -30,7 +30,7 @@ export function defineColorThemeOverride(originalTheme, { defaultOverride, color
     const colorValues = {};
     if (colorOverrides) {
         getObjectTypedEntries(colorOverrides).forEach(([colorName, override,]) => {
-            const themeColor = originalTheme[colorName];
+            const themeColor = originalTheme.colors[colorName];
             if (!themeColor) {
                 throw new Error(`Override color name '${String(colorName)}' does not exist in the theme being overridden.`);
             }
@@ -50,9 +50,21 @@ export function defineColorThemeOverride(originalTheme, { defaultOverride, color
             });
         });
     }
+    const asTheme = defineColorTheme({
+        ...originalTheme.init.default,
+        ...defaultOverride,
+    }, {
+        ...originalTheme.init.colors,
+        ...colorOverrides,
+    });
     return {
-        ...defaultValues,
-        ...colorValues,
+        name: overrideName,
+        overrides: {
+            ...defaultValues,
+            ...colorValues,
+        },
+        originalTheme,
+        asTheme,
     };
 }
 /**
@@ -64,7 +76,7 @@ export function defineColorThemeOverride(originalTheme, { defaultOverride, color
 export function applyColorTheme(
 /** This should usually be the top-level `html` element. */
 element, fullTheme, themeOverride) {
-    getObjectTypedValues(fullTheme).forEach((themeColor) => {
+    getObjectTypedValues(fullTheme.colors).forEach((themeColor) => {
         applyIndividualThemeColorValue({
             element,
             layerKey: 'background',
@@ -80,7 +92,7 @@ element, fullTheme, themeOverride) {
     });
 }
 function applyIndividualThemeColorValue({ element, layerKey, themeOverride, themeColor, }) {
-    const override = themeOverride?.[String(themeColor[layerKey].name)];
+    const override = themeOverride?.overrides[String(themeColor[layerKey].name)];
     const value = override || themeColor[layerKey].default;
     setCssVarValue({
         forCssVar: themeColor[layerKey],

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.
  *
@@ -34,6 +43,10 @@ export type ColorInit = RequireAtLeastOne<{
 export type ColorThemeColor<Init extends ColorInit = ColorInit, Name extends CssVarName = CssVarName> = {
     foreground: SingleCssVarDefinition;
     background: SingleCssVarDefinition;
+    /**
+     * The name of this theme color within the theme itself. (This is not any of the CSS variable
+     * names.)
+     */
     name: Name;
     init: Init;
 };
@@ -49,26 +62,40 @@ export type ColorThemeInit = Record<CssVarName, ColorInit>;
  * @category Internal
  */
 export type ColorTheme<Init extends ColorThemeInit = ColorThemeInit> = {
+    colors: AllColorThemeColors<Init>;
+    inverse: AllColorThemeColors<Init>;
+    /** The original init object for this theme. */
+    init: {
+        colors: Init;
+        default: RequiredAndNotNull<NoRefColorInit>;
+    };
+};
+/**
+ * All colors within a {@link ColorTheme}.
+ *
+ * @category Internal
+ */
+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]: Omit<ColorThemeColor, 'name'>;
+    [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!
  *
  * @category Internal
  */
-export declare const themeDefaultKey = "default";
+export declare const themeDefaultKey = "theme-default";
 /**
  * Define a color theme.
  *
  * @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

@@ -1,23 +1,29 @@
 import { assert, check } from '@augment-vir/assert';
-import { getObjectTypedEntries, mapObjectValues, } from '@augment-vir/common';
+import { getObjectTypedEntries } from '@augment-vir/common';
 import { defineCssVars, } from 'lit-css-vars';
 /**
  * Handles a color init value.
  *
  * @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;
@@ -29,7 +35,7 @@ export function createColorCssVarDefault(fromName, init, fullInit) {
  *
  * @category Internal
  */
-export const themeDefaultKey = 'default';
+export const themeDefaultKey = 'theme-default';
 /**
  * Define a color theme.
  *
@@ -40,22 +46,29 @@ export function defineColorTheme(defaultInit, allColorsInit) {
         throw new Error(`Cannot define theme color by name '${themeDefaultKey}', it is used internally.`);
     }
     const defaultColors = defineCssVars({
-        'default-bg': createColorCssVarDefault('default-bg', defaultInit.background, allColorsInit),
-        'default-fg': createColorCssVarDefault('default-fg', 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,]) => {
-        accum[(colorName + '-fg')] = colorInit.foreground
+        const names = createCssVarNames(colorName);
+        accum[names.foreground] = colorInit.foreground
             ? createColorCssVarDefault([
                 colorName,
                 'foreground',
-            ].join(' '), colorInit.foreground, allColorsInit)
+            ].join(' '), colorInit.foreground, defaultInit, allColorsInit)
             : `var(${defaultColors['default-fg'].name}, ${defaultColors['default-fg'].default})`;
-        accum[(colorName + '-bg')] = colorInit.background
+        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]})`;
+        accum[names.backgroundInverse] =
+            `var(--${names.foreground}, ${accum[names.foreground]})`;
         return accum;
     }, {});
     /**
@@ -64,30 +77,77 @@ export function defineColorTheme(defaultInit, allColorsInit) {
      * `cssVars` object is not directly exposed.
      */
     const cssVars = defineCssVars(cssVarsSetup);
-    const colors = mapObjectValues(allColorsInit, (colorName, colorInit) => {
+    const colors = {};
+    const inverseColors = {};
+    getObjectTypedEntries(allColorsInit).forEach(([colorName, colorInit,]) => {
         assert.isString(colorName);
-        const names = {
-            foreground: (colorName + '-fg'),
-            background: (colorName + '-bg'),
-        };
-        const background = cssVars[names.background];
+        const names = createCssVarNames(colorName);
         const foreground = cssVars[names.foreground];
-        assert.isDefined(background);
+        const background = cssVars[names.background];
+        const foregroundInverse = cssVars[names.foregroundInverse];
+        const backgroundInverse = cssVars[names.backgroundInverse];
         assert.isDefined(foreground);
-        return {
-            background,
+        assert.isDefined(background);
+        assert.isDefined(foregroundInverse);
+        assert.isDefined(backgroundInverse);
+        colors[colorName] = {
             foreground,
+            background,
+            init: colorInit,
+            name: colorName,
+        };
+        inverseColors[colorName] = {
+            foreground: foregroundInverse,
+            background: backgroundInverse,
             init: colorInit,
             name: colorName,
         };
     });
-    const defaults = {
+    const themeDefaultColors = {
         foreground: defaultColors['default-fg'],
         background: defaultColors['default-bg'],
         init: defaultInit,
+        name: themeDefaultKey,
     };
+    const themeDefaultInverseColors = {
+        ...themeDefaultColors,
+        foreground: defaultColors['default-inverse-fg'],
+        background: defaultColors['default-inverse-bg'],
+    };
+    return {
+        colors: {
+            [themeDefaultKey]: themeDefaultColors,
+            ...colors,
+        },
+        inverse: {
+            [themeDefaultKey]: themeDefaultInverseColors,
+            ...inverseColors,
+        },
+        init: {
+            colors: allColorsInit,
+            default: defaultInit,
+        },
+    };
+}
+function createCssVarNames(colorName) {
     return {
-        ...colors,
-        default: defaults,
+        foreground: [
+            colorName,
+            'fg',
+        ].join('-'),
+        background: [
+            colorName,
+            'bg',
+        ].join('-'),
+        foregroundInverse: [
+            colorName,
+            'inverse',
+            'fg',
+        ].join('-'),
+        backgroundInverse: [
+            colorName,
+            'inverse',
+            'bg',
+        ].join('-'),
     };
 }

package/dist/color/contrast.d.ts

@@ -0,0 +1,180 @@
+import { type ArrayElement } from '@augment-vir/common';
+/**
+ * All font weights that font sizes are calculated for. Used in {@link FontSizes} and
+ * {@link calculateFontSizes}.
+ *
+ * @category Internal
+ */
+export type FontSizeWeights = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+/**
+ * A mapping of font weights to font sizes. Used in {@link calculateFontSizes}.
+ *
+ * @category Internal
+ */
+export type FontSizes = Record<FontSizeWeights, number>;
+/**
+ * Contrast calculations produced by {@link calculateContrast}.
+ *
+ * @category Internal
+ */
+export type CalculatedContrast = {
+    /** The raw APCA LC contrast value. */
+    contrast: number;
+    /** The minimum font size for each font weight for the current `contrast` value. */
+    fontSizes: FontSizes;
+    /** The contrast level for the current `contrast` value. */
+    contrastLevel: ContrastLevel;
+};
+/**
+ * A color pair of foreground and background colors. The value of each (a string) may be any valid
+ * CSS color string.
+ *
+ * @category Internal
+ */
+export type ColorPair = {
+    foreground: string;
+    background: string;
+};
+/**
+ * Calculate contrast for the given color combination.
+ *
+ * @category Internal
+ */
+export declare function calculateContrast({ background, foreground, }: Readonly<ColorPair>): CalculatedContrast;
+/**
+ * Calculated needed font sizes for each font weight for the given color contrast.
+ *
+ * @category Internal
+ */
+export declare function calculateFontSizes(contrast: number): FontSizes;
+/**
+ * Finds the color contrast level for the given contrast.
+ *
+ * @category Internal
+ */
+export declare function determineContrastLevel(contrast: number): ContrastLevel;
+/**
+ * Names for each {@link ContrastLevel}.
+ *
+ * @category Internal
+ */
+export declare enum ContrastLevelName {
+    SmallBodyText = "small-body-text",
+    BodyText = "body-text",
+    NonBodyText = "non-body-text",
+    LargeText = "large-text",
+    SpotText = "spot-text",
+    Decoration = "decoration",
+    Invisible = "invisible"
+}
+/**
+ * User-facing labels for {@link ContrastLevelName}.
+ *
+ * @category Internal
+ */
+export declare const contrastLevelLabel: Record<ContrastLevelName, string>;
+/**
+ * All {@link ContrastLevelName} values in order from highest contrast to lowest.
+ *
+ * @category Internal
+ */
+export declare const orderedContrastLevelNames: readonly [ContrastLevelName.SmallBodyText, ContrastLevelName.BodyText, ContrastLevelName.NonBodyText, ContrastLevelName.LargeText, ContrastLevelName.SpotText, ContrastLevelName.Decoration, ContrastLevelName.Invisible];
+/**
+ * Color contrast level details.
+ *
+ * @category Internal
+ */
+export type ContrastLevel = {
+    /** The minimum contrast level threshold for this contrast level. */
+    min: number;
+    /** The name corresponding to the smallest text or non-text item that this can be used for. */
+    name: ContrastLevelName;
+    /** Short description for this contrast level. */
+    description: string;
+    /** Name from the APCA guidelines (confusing). */
+    apcaName: string;
+    /** Description from the APCA guidelines (verbose). */
+    apcaDescription: string;
+};
+/**
+ * All color contrast levels corresponding to APCA bronze guidelines.
+ *
+ * @category Internal
+ */
+export declare const contrastLevels: readonly [{
+    readonly min: 90;
+    readonly name: ContrastLevelName.SmallBodyText;
+    readonly description: "Perfect for all sizes of text, even small body text.";
+    readonly apcaName: "small body text only";
+    readonly apcaDescription: "Preferred level for fluent text and columns of body text with a font no smaller than 18px/weight 300 or 14px/weight 400 (normal), or non-body text with a font no smaller than 12px. Also a recommended minimum for extremely thin fonts with a minimum of 24px at weight 200. Lc 90 is a suggested maximum for very large and bold fonts (greater than 36px bold), and large areas of color.";
+}, {
+    readonly min: 75;
+    readonly name: ContrastLevelName.BodyText;
+    readonly description: "Good for regular body text and anything larger.";
+    readonly apcaName: "body text okay";
+    readonly apcaDescription: "The minimum level for columns of body text with a font no smaller than 24px/300 weight, 18px/400, 16px/500 and 14px/700. This level may be used with non-body text with a font no smaller than 15px/400. Also, Lc 75 should be considered a minimum for larger for any larger text where readability is important.";
+}, {
+    readonly min: 60;
+    readonly name: ContrastLevelName.NonBodyText;
+    readonly description: "Good for legible non-body text and anything larger.";
+    readonly apcaName: "fluent text only";
+    readonly apcaDescription: "The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read. The minimums: no smaller than 48px/200, 36px/300, 24px normal weight (400), 21px/500, 18px/600, 16px/700 (bold). These values based on the reference font Helvetica. To use these sizes as body text, add Lc 15 to the minimum contrast.";
+}, {
+    readonly min: 45;
+    readonly name: ContrastLevelName.LargeText;
+    readonly description: "Okay for large or headline text.";
+    readonly apcaName: "large & sub-fluent text";
+    readonly apcaDescription: "The minimum for larger, heavier text (36px normal weight or 24px bold) such as headlines, and large text that should be fluently readable but is not body text. This is also the minimum for pictograms with fine details, or smaller outline icons, , no less than 4px in its smallest dimension.";
+}, {
+    readonly min: 30;
+    readonly name: ContrastLevelName.SpotText;
+    readonly description: "Okay for disabled or placeholder text, copyright lines, icons, or non-text elements.";
+    readonly apcaName: "spot & non text only";
+    readonly apcaDescription: "The absolute minimum for any text not listed above, which means non-content text considered as \"spot readable\". This includes placeholder text and disabled element text, and some non-content like a copyright bug. This is also the minimum for large/solid semantic & understandable non-text elements such as \"mostly solid\" icons or pictograms, no less than 10px in its smallest dimension.";
+}, {
+    readonly min: 15;
+    readonly name: ContrastLevelName.Decoration;
+    readonly description: "Only okay for decorations like graphics, borders, dividers, etc. Do not use for any text.";
+    readonly apcaName: "no text usage";
+    readonly apcaDescription: "The absolute minimum for any non-text that needs to be discernible and differentiable, but does not apply to semantic non-text such as icons, and is no less than 15px in its smallest dimension. This may include dividers, and in some cases large buttons or thick focus visible outlines, but does not include fine details which have a higher minimum. Designers should treat anything below this level as invisible, as it will not be visible for many users. This minimum level should be avoided for any items important to the use, understanding, or interaction of the site.";
+}, {
+    readonly min: 0;
+    readonly name: ContrastLevelName.Invisible;
+    readonly description: "Effectively invisible for users.";
+    readonly apcaName: "invisible";
+    readonly apcaDescription: "This should be treated as invisible.";
+}];
+/**
+ * Type for {@link contrastLevelMinMap}.
+ *
+ * @category Internal
+ */
+export type ContrastLevelMinMap = {
+    [Min in ArrayElement<typeof contrastLevels>['min']]: Extract<ArrayElement<typeof contrastLevels>, {
+        min: Min;
+    }>;
+};
+/**
+ * A mapping of all color contrast levels mins to their contrast levels. Generated from
+ * {@link contrastLevels}.
+ *
+ * @category Internal
+ */
+export declare const contrastLevelMinMap: ContrastLevelMinMap;
+/**
+ * Type for {@link contrastLevelMinMap}.
+ *
+ * @category Internal
+ */
+export type ContrastLevelNameMap = {
+    [Name in ArrayElement<typeof contrastLevels>['name']]: Extract<ArrayElement<typeof contrastLevels>, {
+        name: Name;
+    }>;
+};
+/**
+ * A mapping of all color contrast levels mins to their contrast levels. Generated from
+ * {@link contrastLevels}.
+ *
+ * @category Internal
+ */
+export declare const contrastLevelNameMap: ContrastLevelNameMap;

package/dist/color/contrast.js

@@ -0,0 +1,163 @@
+import { assertWrap } from '@augment-vir/assert';
+import { arrayToObject, round } from '@augment-vir/common';
+// @ts-expect-error: `fontLookupAPCA` is not in the types
+import { calcAPCA, fontLookupAPCA } from 'apca-w3';
+/**
+ * Calculate contrast for the given color combination.
+ *
+ * @category Internal
+ */
+export function calculateContrast({ background, foreground, }) {
+    const contrast = round(Number(calcAPCA(foreground, background)), { digits: 1 });
+    return {
+        contrast,
+        fontSizes: calculateFontSizes(contrast),
+        contrastLevel: determineContrastLevel(contrast),
+    };
+}
+/**
+ * Calculated needed font sizes for each font weight for the given color contrast.
+ *
+ * @category Internal
+ */
+export function calculateFontSizes(contrast) {
+    const fontLookup = fontLookupAPCA(contrast).slice(1);
+    const sizes = arrayToObject(fontLookup, (value, index) => {
+        return {
+            key: (index + 1) * 100,
+            value,
+        };
+    });
+    return sizes;
+}
+/**
+ * Finds the color contrast level for the given contrast.
+ *
+ * @category Internal
+ */
+export function determineContrastLevel(contrast) {
+    return assertWrap.isDefined(contrastLevels.find((threshold) => threshold.min <= Math.abs(contrast)));
+}
+/**
+ * Names for each {@link ContrastLevel}.
+ *
+ * @category Internal
+ */
+export var ContrastLevelName;
+(function (ContrastLevelName) {
+    ContrastLevelName["SmallBodyText"] = "small-body-text";
+    ContrastLevelName["BodyText"] = "body-text";
+    ContrastLevelName["NonBodyText"] = "non-body-text";
+    ContrastLevelName["LargeText"] = "large-text";
+    ContrastLevelName["SpotText"] = "spot-text";
+    ContrastLevelName["Decoration"] = "decoration";
+    ContrastLevelName["Invisible"] = "invisible";
+})(ContrastLevelName || (ContrastLevelName = {}));
+/**
+ * User-facing labels for {@link ContrastLevelName}.
+ *
+ * @category Internal
+ */
+export const contrastLevelLabel = {
+    [ContrastLevelName.SmallBodyText]: 'Small Text',
+    [ContrastLevelName.BodyText]: 'Body Text',
+    [ContrastLevelName.NonBodyText]: 'Non-body Text',
+    [ContrastLevelName.LargeText]: 'Headers',
+    [ContrastLevelName.SpotText]: 'Placeholders',
+    [ContrastLevelName.Decoration]: 'Decorations',
+    [ContrastLevelName.Invisible]: 'Invisible ',
+};
+/**
+ * All {@link ContrastLevelName} values in order from highest contrast to lowest.
+ *
+ * @category Internal
+ */
+export const orderedContrastLevelNames = [
+    ContrastLevelName.SmallBodyText,
+    ContrastLevelName.BodyText,
+    ContrastLevelName.NonBodyText,
+    ContrastLevelName.LargeText,
+    ContrastLevelName.SpotText,
+    ContrastLevelName.Decoration,
+    ContrastLevelName.Invisible,
+];
+/**
+ * All color contrast levels corresponding to APCA bronze guidelines.
+ *
+ * @category Internal
+ */
+export const contrastLevels = [
+    {
+        min: 90,
+        name: ContrastLevelName.SmallBodyText,
+        description: 'Perfect for all sizes of text, even small body text.',
+        apcaName: 'small body text only',
+        apcaDescription: 'Preferred level for fluent text and columns of body text with a font no smaller than 18px/weight 300 or 14px/weight 400 (normal), or non-body text with a font no smaller than 12px. Also a recommended minimum for extremely thin fonts with a minimum of 24px at weight 200. Lc 90 is a suggested maximum for very large and bold fonts (greater than 36px bold), and large areas of color.',
+    },
+    {
+        min: 75,
+        name: ContrastLevelName.BodyText,
+        description: 'Good for regular body text and anything larger.',
+        apcaName: 'body text okay',
+        apcaDescription: 'The minimum level for columns of body text with a font no smaller than 24px/300 weight, 18px/400, 16px/500 and 14px/700. This level may be used with non-body text with a font no smaller than 15px/400. Also, Lc 75 should be considered a minimum for larger for any larger text where readability is important.',
+    },
+    {
+        min: 60,
+        name: ContrastLevelName.NonBodyText,
+        description: 'Good for legible non-body text and anything larger.',
+        apcaName: 'fluent text only',
+        apcaDescription: 'The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read. The minimums: no smaller than 48px/200, 36px/300, 24px normal weight (400), 21px/500, 18px/600, 16px/700 (bold). These values based on the reference font Helvetica. To use these sizes as body text, add Lc 15 to the minimum contrast.',
+    },
+    {
+        min: 45,
+        name: ContrastLevelName.LargeText,
+        description: 'Okay for large or headline text.',
+        apcaName: 'large & sub-fluent text',
+        apcaDescription: 'The minimum for larger, heavier text (36px normal weight or 24px bold) such as headlines, and large text that should be fluently readable but is not body text. This is also the minimum for pictograms with fine details, or smaller outline icons, , no less than 4px in its smallest dimension.',
+    },
+    {
+        min: 30,
+        name: ContrastLevelName.SpotText,
+        description: 'Okay for disabled or placeholder text, copyright lines, icons, or non-text elements.',
+        apcaName: 'spot & non text only',
+        apcaDescription: 'The absolute minimum for any text not listed above, which means non-content text considered as "spot readable". This includes placeholder text and disabled element text, and some non-content like a copyright bug. This is also the minimum for large/solid semantic & understandable non-text elements such as "mostly solid" icons or pictograms, no less than 10px in its smallest dimension.',
+    },
+    {
+        min: 15,
+        name: ContrastLevelName.Decoration,
+        description: 'Only okay for decorations like graphics, borders, dividers, etc. Do not use for any text.',
+        apcaName: 'no text usage',
+        apcaDescription: 'The absolute minimum for any non-text that needs to be discernible and differentiable, but does not apply to semantic non-text such as icons, and is no less than 15px in its smallest dimension. This may include dividers, and in some cases large buttons or thick focus visible outlines, but does not include fine details which have a higher minimum. Designers should treat anything below this level as invisible, as it will not be visible for many users. This minimum level should be avoided for any items important to the use, understanding, or interaction of the site.',
+    },
+    {
+        min: 0,
+        name: ContrastLevelName.Invisible,
+        description: 'Effectively invisible for users.',
+        apcaName: 'invisible',
+        apcaDescription: 'This should be treated as invisible.',
+    },
+];
+/**
+ * A mapping of all color contrast levels mins to their contrast levels. Generated from
+ * {@link contrastLevels}.
+ *
+ * @category Internal
+ */
+export const contrastLevelMinMap = arrayToObject(contrastLevels, (contrastLevel) => {
+    return {
+        key: contrastLevel.min,
+        value: contrastLevel,
+    };
+});
+/**
+ * A mapping of all color contrast levels mins to their contrast levels. Generated from
+ * {@link contrastLevels}.
+ *
+ * @category Internal
+ */
+export const contrastLevelNameMap = arrayToObject(contrastLevels, (contrastLevel) => {
+    return {
+        key: contrastLevel.name,
+        value: contrastLevel,
+    };
+});

package/dist/color/elements/theme-vir-color-example.element.d.ts

@@ -0,0 +1,16 @@
+import { type ColorThemeColor } from '../color-theme.js';
+/**
+ * Showcase a theme-vir color theme color.
+ *
+ * @category Internal
+ */
+export declare const ThemeVirColorExample: import("element-vir").DeclarativeElementDefinition<"theme-vir-color-example", {
+    color: Readonly<Pick<ColorThemeColor, "foreground" | "background">>;
+    showVarValues: boolean;
+    showVarNames: boolean;
+    showContrast: boolean;
+}, {
+    previewElement: undefined | HTMLElement;
+}, {
+    toggleShowVars: import("element-vir").DefineEvent<void>;
+}, "theme-vir-color-example-no-contrast-tips", "theme-vir-color-example-", readonly []>;

package/dist/color/elements/theme-vir-color-example.element.js

@@ -0,0 +1,193 @@
+import { assertWrap, check } from '@augment-vir/assert';
+import { css, defineElement, defineElementEvent, html, listen, nothing, onDomCreated, unsafeCSS, } from 'element-vir';
+import { noNativeFormStyles, noNativeSpacing } from 'vira';
+import { calculateContrast } from '../contrast.js';
+import { ThemeVirContrastIndicator } from './theme-vir-contrast-indicator.element.js';
+/**
+ * Showcase a theme-vir color theme color.
+ *
+ * @category Internal
+ */
+export const ThemeVirColorExample = defineElement()({
+    tagName: 'theme-vir-color-example',
+    state() {
+        return {
+            previewElement: undefined,
+        };
+    },
+    events: {
+        toggleShowVars: defineElementEvent(),
+    },
+    hostClasses: {
+        'theme-vir-color-example-no-contrast-tips': ({ inputs }) => !inputs.showContrast,
+    },
+    styles: ({ hostClasses }) => css `
+        :host {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            max-width: 100%;
+        }
+
+        .color-preview {
+            ${noNativeFormStyles};
+            cursor: pointer;
+            font-size: 32px;
+            padding-left: 12px;
+            padding-right: 0;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            display: flex;
+            gap: 8px;
+            align-items: baseline;
+
+            & b {
+                margin: 12px 0;
+                font-weight: bold;
+                text-decoration: underline;
+            }
+
+            & .square {
+                margin: 12px 0;
+                width: 24px;
+                height: 24px;
+                background-color: currentColor;
+            }
+        }
+        ${hostClasses['theme-vir-color-example-no-contrast-tips'].selector} {
+            & .needed-size-wrapper {
+                display: none;
+            }
+
+            & .color-preview {
+                padding: 4px 24px;
+            }
+        }
+
+        .needed-size-wrapper {
+            align-self: stretch;
+            width: 56px;
+            position: relative;
+            overflow: hidden;
+            border-left: 1px solid #ccc;
+        }
+
+        .needed-size {
+            top: 0;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            left: 6px;
+            position: absolute;
+
+            & span {
+                margin: 0 auto;
+            }
+        }
+
+        .css-var-names {
+            font-family: monospace;
+            display: flex;
+            max-width: 100%;
+            flex-direction: column;
+            opacity: 0.6;
+            margin-top: 4px;
+        }
+
+        p {
+            ${noNativeSpacing};
+            display: flex;
+            gap: 0;
+            flex-wrap: wrap;
+
+            & span:last-child {
+                margin-left: 1ex;
+            }
+        }
+
+        ${ThemeVirContrastIndicator} {
+            margin-top: 1px;
+        }
+    `,
+    render({ state, updateState, inputs, dispatch, events }) {
+        const colorRows = [
+            'foreground',
+            'background',
+        ].map((layerKey) => {
+            const keyString = [
+                inputs.color[layerKey].name,
+                inputs.showVarValues ? ':' : '',
+            ]
+                .filter(check.isTruthy)
+                .join('');
+            const valueTemplate = inputs.showVarValues
+                ? html `
+                      <span>${inputs.color[layerKey].default}</span>
+                  `
+                : nothing;
+            return html `
+                <p>
+                    <span>${keyString}</span>
+                    ${valueTemplate}
+                </p>
+            `;
+        });
+        const cssVarNamesTemplate = inputs.showVarNames
+            ? html `
+                  <div class="css-var-names">${colorRows}</div>
+              `
+            : nothing;
+        const contrast = state.previewElement
+            ? calculateContrast({
+                foreground: globalThis
+                    .getComputedStyle(state.previewElement)
+                    .getPropertyValue('color'),
+                background: globalThis
+                    .getComputedStyle(state.previewElement)
+                    .getPropertyValue('background-color'),
+            })
+            : undefined;
+        const contrastTemplate = contrast && inputs.showContrast
+            ? html `
+                      <${ThemeVirContrastIndicator.assign({
+                contrast,
+            })}></${ThemeVirContrastIndicator}>
+                  `
+            : nothing;
+        return html `
+            <button
+                ${listen('click', () => {
+            dispatch(new events.toggleShowVars());
+        })}
+                ${onDomCreated((element) => {
+            updateState({
+                previewElement: assertWrap.instanceOf(element, HTMLElement),
+            });
+        })}
+                class="color-preview"
+                style=${css `
+                    color: ${unsafeCSS(inputs.color.foreground.default)};
+                    background: ${unsafeCSS(inputs.color.background.default)};
+                `}
+            >
+                <div class="square"></div>
+                <b>Aa</b>
+                <div class="needed-size-wrapper">
+                    <span class="needed-size">
+                        <span
+                            style=${css `
+                                visibility: ${unsafeCSS((contrast?.fontSizes[400] || Infinity) > 150
+            ? 'hidden'
+            : 'visible')};
+                                font-size: ${contrast ? contrast.fontSizes[400] : 14}px;
+                            `}
+                        >
+                            Min
+                        </span>
+                    </span>
+                </div>
+            </button>
+            ${contrastTemplate} ${cssVarNamesTemplate}
+        `;
+    },
+});

package/dist/color/elements/theme-vir-contrast-indicator.element.d.ts

@@ -0,0 +1,9 @@
+import { type CalculatedContrast } from '../contrast.js';
+/**
+ * Show contrast details for a theme-vir color.
+ *
+ * @category Internal
+ */
+export declare const ThemeVirContrastIndicator: import("element-vir").DeclarativeElementDefinition<"theme-vir-contrast-indicator", {
+    contrast: Readonly<CalculatedContrast>;
+}, {}, {}, "theme-vir-contrast-indicator-", "theme-vir-contrast-indicator-", readonly []>;

package/dist/color/elements/theme-vir-contrast-indicator.element.js

@@ -0,0 +1,93 @@
+import { classMap, css, defineElement, html, unsafeCSS } from 'element-vir';
+import { contrastLevelLabel, ContrastLevelName, contrastLevels, } from '../contrast.js';
+/**
+ * Show contrast details for a theme-vir color.
+ *
+ * @category Internal
+ */
+export const ThemeVirContrastIndicator = defineElement()({
+    tagName: 'theme-vir-contrast-indicator',
+    styles: css `
+        :host {
+            display: inline-flex;
+            max-width: 100%;
+            font-size: 12px;
+        }
+
+        .wrapper {
+            text-align: center;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            max-width: 100%;
+            color: #aaa;
+        }
+
+        .${unsafeCSS(ContrastLevelName.Invisible)} {
+            color: red;
+        }
+        .${unsafeCSS(ContrastLevelName.Decoration)} {
+            color: #ff6600;
+        }
+        .${unsafeCSS(ContrastLevelName.SpotText)} {
+            color: #a5a520;
+        }
+
+        .gauge {
+            align-self: center;
+            background-color: currentColor;
+            display: flex;
+            padding: 1px;
+            gap: 1px;
+            margin-bottom: 2px;
+            /* Sure sure if I actually want to keep this. */
+            display: none;
+        }
+
+        .gauge-level {
+            width: 10px;
+            height: 2px;
+
+            &.active {
+                background-color: white;
+            }
+        }
+
+        .gauge-text + .gauge-text {
+            border-left: 1px solid #ccc;
+            padding-left: 1ex;
+        }
+    `,
+    render({ inputs }) {
+        const gaugeLevels = contrastLevels
+            .toReversed()
+            .slice(1)
+            .map((level) => {
+            return html `
+                    <div
+                        class="gauge-level ${classMap({
+                active: level.min <= Math.abs(inputs.contrast.contrast),
+            })}"
+                    ></div>
+                `;
+        });
+        const title = [
+            inputs.contrast.contrastLevel.description,
+            '\nFont weights to font sizes:',
+            JSON.stringify(inputs.contrast.fontSizes, null, 4),
+        ].join('\n');
+        const fontSize = inputs.contrast.fontSizes[400] > 150 ? '-' : `${inputs.contrast.fontSizes[400]}px`;
+        return html `
+            <div title=${title} class="wrapper ${inputs.contrast.contrastLevel.name}">
+                <div class="gauge">${gaugeLevels}</div>
+                <span>
+                    <span class="gauge-text">${Math.round(inputs.contrast.contrast)} Lc</span>
+                    <span class="gauge-text">
+                        ${contrastLevelLabel[inputs.contrast.contrastLevel.name]}
+                    </span>
+                    <span class="gauge-text">${fontSize}</span>
+                </span>
+            </div>
+        `;
+    },
+});

package/dist/index.d.ts

@@ -1,3 +1,7 @@
 export * from './color/color-css.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/contrast.js';
+export * from './color/elements/theme-vir-color-example.element.js';
+export * from './color/elements/theme-vir-contrast-indicator.element.js';

package/dist/index.js

@@ -1,3 +1,7 @@
 export * from './color/color-css.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/contrast.js';
+export * from './color/elements/theme-vir-color-example.element.js';
+export * from './color/elements/theme-vir-contrast-indicator.element.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "theme-vir",
-    "version": "25.6.0",
+    "version": "25.7.1",
     "description": "Create an entire web theme.",
     "keywords": [
         "design",
@@ -43,18 +43,20 @@
     "dependencies": {
         "@augment-vir/assert": "^31.20.0",
         "@augment-vir/common": "^31.20.0",
+        "apca-w3": "^0.1.9",
         "lit-css-vars": "^3.0.11",
         "type-fest": "^4.41.0"
     },
     "devDependencies": {
         "@augment-vir/test": "^31.20.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.0",
         "@web/test-runner-visual-regression": "^0.10.0",
-        "element-book": "^25.6.0",
-        "element-vir": "^25.6.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",

package/dist/theme-book/vir-theme-book-app.element.d.ts

@@ -1,3 +0,0 @@
-export declare const VirThemeBookApp: import("element-vir").DeclarativeElementDefinition<"vir-theme-book-app", {}, {
-    theme: import("../create-theme/theme.js").Theme<"vir">;
-}, {}, "vir-theme-book-app-", "vir-theme-book-app-", readonly []>;

package/dist/theme-book/vir-theme-book-app.element.js

@@ -1,34 +0,0 @@
-import { ElementBookApp } from 'element-book';
-import { css, defineElementNoInputs, html } from 'element-vir';
-import { createTheme } from '../create-theme/create-theme.js';
-import { createThemeBookPages } from './theme-book-pages.js';
-export const VirThemeBookApp = defineElementNoInputs({
-    tagName: 'vir-theme-book-app',
-    styles: css `
-        :host {
-            display: flex;
-            flex-direction: column;
-            gap: 32px;
-            min-height: 100%;
-            width: 100%;
-        }
-
-        ${ElementBookApp} {
-            flex-grow: 1;
-        }
-    `,
-    state() {
-        return {
-            theme: createTheme({
-                elementTagPrefix: 'vir',
-            }),
-        };
-    },
-    render({ state }) {
-        return html `
-            <${ElementBookApp.assign({
-            pages: createThemeBookPages(state.theme),
-        })}></${ElementBookApp}>
-        `;
-    },
-});