theme-vir 25.6.0

package/LICENSE-CC0

@@ -0,0 +1,121 @@
+CC0 1.0 Universal
+
+Creative Commons Legal Code
+
+    CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
+    LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN
+    ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
+    INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
+    REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS
+    PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM
+    THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED
+    HEREUNDER.
+
+Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer
+exclusive Copyright and Related Rights (defined below) upon the creator
+and subsequent owner(s) (each and all, an "owner") of an original work of
+authorship and/or a database (each, a "Work").
+
+Certain owners wish to permanently relinquish those rights to a Work for
+the purpose of contributing to a commons of creative, cultural and
+scientific works ("Commons") that the public can reliably and without fear
+of later claims of infringement build upon, modify, incorporate in other
+works, reuse and redistribute as freely as possible in any form whatsoever
+and for any purposes, including without limitation commercial purposes.
+These owners may contribute to the Commons to promote the ideal of a free
+culture and the further production of creative, cultural and scientific
+works, or to gain reputation or greater distribution for their Work in
+part through the use and efforts of others.
+
+For these and/or other purposes and motivations, and without any
+expectation of additional consideration or compensation, the person
+associating CC0 with a Work (the "Affirmer"), to the extent that he or she
+is an owner of Copyright and Related Rights in the Work, voluntarily
+elects to apply CC0 to the Work and publicly distribute the Work under its
+terms, with knowledge of his or her Copyright and Related Rights in the
+Work and the meaning and intended legal effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be
+protected by copyright and related or neighboring rights ("Copyright and
+Related Rights"). Copyright and Related Rights include, but are not
+limited to, the following:
+
+  i. the right to reproduce, adapt, distribute, perform, display,
+     communicate, and translate a Work;
+ ii. moral rights retained by the original author(s) and/or performer(s);
+iii. publicity and privacy rights pertaining to a person's image or
+     likeness depicted in a Work;
+ iv. rights protecting against unfair competition in regards to a Work,
+     subject to the limitations in paragraph 4(a), below;
+  v. rights protecting the extraction, dissemination, use and reuse of data
+     in a Work;
+ vi. database rights (such as those arising under Directive 96/9/EC of the
+     European Parliament and of the Council of 11 March 1996 on the legal
+     protection of databases, and under any national implementation
+     thereof, including any amended or successor version of such
+     directive); and
+vii. other similar, equivalent or corresponding rights throughout the
+     world based on applicable law or treaty, and any national
+     implementations thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention
+of, applicable law, Affirmer hereby overtly, fully, permanently,
+irrevocably and unconditionally waives, abandons, and surrenders all of
+Affirmer's Copyright and Related Rights and associated claims and causes
+of action, whether now known or unknown (including existing as well as
+future claims and causes of action), in the Work (i) in all territories
+worldwide, (ii) for the maximum duration provided by applicable law or
+treaty (including future time extensions), (iii) in any current or future
+medium and for any number of copies, and (iv) for any purpose whatsoever,
+including without limitation commercial, advertising or promotional
+purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each
+member of the public at large and to the detriment of Affirmer's heirs and
+successors, fully intending that such Waiver shall not be subject to
+revocation, rescission, cancellation, termination, or any other legal or
+equitable action to disrupt the quiet enjoyment of the Work by the public
+as contemplated by Affirmer's express Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason
+be judged legally invalid or ineffective under applicable law, then the
+Waiver shall be preserved to the maximum extent permitted taking into
+account Affirmer's express Statement of Purpose. In addition, to the
+extent the Waiver is so judged Affirmer hereby grants to each affected
+person a royalty-free, non transferable, non sublicensable, non exclusive,
+irrevocable and unconditional license to exercise Affirmer's Copyright and
+Related Rights in the Work (i) in all territories worldwide, (ii) for the
+maximum duration provided by applicable law or treaty (including future
+time extensions), (iii) in any current or future medium and for any number
+of copies, and (iv) for any purpose whatsoever, including without
+limitation commercial, advertising or promotional purposes (the
+"License"). The License shall be deemed effective as of the date CC0 was
+applied by Affirmer to the Work. Should any part of the License for any
+reason be judged legally invalid or ineffective under applicable law, such
+partial invalidity or ineffectiveness shall not invalidate the remainder
+of the License, and in such case Affirmer hereby affirms that he or she
+will not (i) exercise any of his or her remaining Copyright and Related
+Rights in the Work or (ii) assert any associated claims and causes of
+action with respect to the Work, in either case contrary to Affirmer's
+express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+
+ a. No trademark or patent rights held by Affirmer are waived, abandoned,
+    surrendered, licensed or otherwise affected by this document.
+ b. Affirmer offers the Work as-is and makes no representations or
+    warranties of any kind concerning the Work, express, implied,
+    statutory or otherwise, including without limitation warranties of
+    title, merchantability, fitness for a particular purpose, non
+    infringement, or the absence of latent or other defects, accuracy, or
+    the present or absence of errors, whether or not discoverable, all to
+    the greatest extent permissible under applicable law.
+ c. Affirmer disclaims responsibility for clearing rights of other persons
+    that may apply to the Work or any use thereof, including without
+    limitation any person's Copyright and Related Rights in the Work.
+    Further, Affirmer disclaims responsibility for obtaining any necessary
+    consents, permissions or other rights required for any use of the
+    Work.
+ d. Affirmer understands and acknowledges that Creative Commons is not a
+    party to this document and has no duty or obligation with respect to
+    this CC0 or use of the Work.

package/LICENSE-MIT

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 electrovir
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# theme-vir
+
+Easy-to-create, all-in-one theme generator with `element-vir`. WIP.

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

@@ -0,0 +1,9 @@
+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/color-css.js

@@ -0,0 +1,13 @@
+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};
+    `;
+}

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

@@ -0,0 +1,37 @@
+import { type CssVarName } from 'lit-css-vars';
+import { type RequireAtLeastOne } from 'type-fest';
+import { type ColorInit, type ColorTheme } 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;
+}>, 'default'>;
+/**
+ * Output of {@link defineColorThemeOverride}.
+ *
+ * @category Internal
+ */
+export type ColorThemeOverrides = Record<CssVarName, string>;
+/**
+ * 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<{
+    /** Override the default foreground and/or background colors. */
+    defaultOverride: ColorInit;
+    colorOverrides: ColorThemeOverrideInit<Theme>;
+}>): ColorThemeOverrides;
+/**
+ * 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?: ColorThemeOverrides | undefined): void;

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

@@ -0,0 +1,90 @@
+import { getObjectTypedEntries, getObjectTypedKeys, getObjectTypedValues } from '@augment-vir/common';
+import { setCssVarValue } from 'lit-css-vars';
+import { createColorCssVarDefault, } 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));
+}
+/**
+ * Define a color theme override. Use this to define multiple theme variations, like light mode vs
+ * dark mode.
+ *
+ * @category Color Theme
+ */
+export function defineColorThemeOverride(originalTheme, { defaultOverride, colorOverrides, }) {
+    const defaultValues = {};
+    if (defaultOverride) {
+        getObjectTypedKeys(defaultOverride).forEach((layerKey) => {
+            applyCssVarOverride({
+                originalTheme,
+                layerKey,
+                override: defaultOverride,
+                themeColor: originalTheme.default,
+                overrideValues: defaultValues,
+            });
+        });
+    }
+    const colorValues = {};
+    if (colorOverrides) {
+        getObjectTypedEntries(colorOverrides).forEach(([colorName, override,]) => {
+            const themeColor = originalTheme[colorName];
+            if (!themeColor) {
+                throw new Error(`Override color name '${String(colorName)}' does not exist in the theme being overridden.`);
+            }
+            applyCssVarOverride({
+                originalTheme,
+                layerKey: 'foreground',
+                override,
+                themeColor,
+                overrideValues: colorValues,
+            });
+            applyCssVarOverride({
+                originalTheme,
+                layerKey: 'background',
+                override,
+                themeColor,
+                overrideValues: colorValues,
+            });
+        });
+    }
+    return {
+        ...defaultValues,
+        ...colorValues,
+    };
+}
+/**
+ * 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).forEach((themeColor) => {
+        applyIndividualThemeColorValue({
+            element,
+            layerKey: 'background',
+            themeColor,
+            themeOverride,
+        });
+        applyIndividualThemeColorValue({
+            element,
+            layerKey: 'foreground',
+            themeColor,
+            themeOverride,
+        });
+    });
+}
+function applyIndividualThemeColorValue({ element, layerKey, themeOverride, themeColor, }) {
+    const override = themeOverride?.[String(themeColor[layerKey].name)];
+    const value = override || themeColor[layerKey].default;
+    setCssVarValue({
+        forCssVar: themeColor[layerKey],
+        onElement: element,
+        toValue: value,
+    });
+}

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

@@ -0,0 +1,74 @@
+import { type RequiredAndNotNull } from '@augment-vir/common';
+import { type 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;
+}>;
+/**
+ * All possible types for {@link ColorInit}.
+ *
+ * @category Internal
+ */
+export type ColorInitValue = string | number | CSSResult | ColorInitReference;
+/**
+ * An individual theme color init.
+ *
+ * @category Internal
+ */
+export type ColorInit = RequireAtLeastOne<{
+    foreground: ColorInitValue;
+    background: ColorInitValue;
+}>;
+/**
+ * A defined individual color from a color theme.
+ *
+ * @category Internal
+ */
+export type ColorThemeColor<Init extends ColorInit = ColorInit, Name extends CssVarName = CssVarName> = {
+    foreground: SingleCssVarDefinition;
+    background: SingleCssVarDefinition;
+    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}.
+ *
+ * @category Internal
+ */
+export type ColorTheme<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'>;
+};
+/**
+ * Handles a color init value.
+ *
+ * @category Internal
+ */
+export declare function createColorCssVarDefault(fromName: string, init: ColorInitValue, fullInit: Record<string, unknown>): 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";
+/**
+ * Define a color theme.
+ *
+ * @category Color Theme
+ */
+export declare function defineColorTheme<const Init extends ColorThemeInit>(defaultInit: RequiredAndNotNull<ColorInit>, allColorsInit: Init): ColorTheme<Init>;

package/dist/color/color-theme.js

@@ -0,0 +1,93 @@
+import { assert, check } from '@augment-vir/assert';
+import { getObjectTypedEntries, mapObjectValues, } 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}'.)`);
+        }
+        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)`;
+    }
+    else {
+        return init;
+    }
+}
+/**
+ * Default foreground/background color theme used in {@link ColorTheme}. Do not define a theme color
+ * with this name!
+ *
+ * @category Internal
+ */
+export const themeDefaultKey = 'default';
+/**
+ * Define a color theme.
+ *
+ * @category Color Theme
+ */
+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-bg': createColorCssVarDefault('default-bg', defaultInit.background, allColorsInit),
+        'default-fg': createColorCssVarDefault('default-fg', defaultInit.foreground, allColorsInit),
+    });
+    const cssVarsSetup = getObjectTypedEntries(allColorsInit).reduce((accum, [colorName, colorInit,]) => {
+        accum[(colorName + '-fg')] = colorInit.foreground
+            ? createColorCssVarDefault([
+                colorName,
+                'foreground',
+            ].join(' '), colorInit.foreground, allColorsInit)
+            : `var(${defaultColors['default-fg'].name}, ${defaultColors['default-fg'].default})`;
+        accum[(colorName + '-bg')] = colorInit.background
+            ? createColorCssVarDefault([
+                colorName,
+                'background',
+            ].join(' '), colorInit.background, allColorsInit)
+            : `var(${defaultColors['default-bg'].name}, ${defaultColors['default-bg'].default})`;
+        return accum;
+    }, {});
+    /**
+     * This has multiple `as` casts because `defineCssVars` complains that `cssVarsSetup` is too
+     * generic. That is indeed true, but in this use case we do not care because the resulting
+     * `cssVars` object is not directly exposed.
+     */
+    const cssVars = defineCssVars(cssVarsSetup);
+    const colors = mapObjectValues(allColorsInit, (colorName, colorInit) => {
+        assert.isString(colorName);
+        const names = {
+            foreground: (colorName + '-fg'),
+            background: (colorName + '-bg'),
+        };
+        const background = cssVars[names.background];
+        const foreground = cssVars[names.foreground];
+        assert.isDefined(background);
+        assert.isDefined(foreground);
+        return {
+            background,
+            foreground,
+            init: colorInit,
+            name: colorName,
+        };
+    });
+    const defaults = {
+        foreground: defaultColors['default-fg'],
+        background: defaultColors['default-bg'],
+        init: defaultInit,
+    };
+    return {
+        ...colors,
+        default: defaults,
+    };
+}

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

@@ -0,0 +1,3 @@
+import { type ThemeOptions } from './theme-options.js';
+import { type Theme } from './theme.js';
+export declare function createTheme<TagPrefix extends string>(options: ThemeOptions<TagPrefix>): Theme<TagPrefix>;

package/dist/create-theme/create-theme.js

@@ -0,0 +1,9 @@
+import { mergeDeep } from '@augment-vir/common';
+import { defineThemeElements } from './define-theme-elements.js';
+import { createDefaultThemeOptions, } from './theme-options.js';
+export function createTheme(options) {
+    const fullOptions = mergeDeep(createDefaultThemeOptions(), options);
+    return {
+        elements: defineThemeElements(fullOptions),
+    };
+}

package/dist/create-theme/define-theme-elements.d.ts

@@ -0,0 +1,3 @@
+import { type AllThemeOptions } from './theme-options.js';
+import { type Theme } from './theme.js';
+export declare function defineThemeElements<TagPrefix extends string>(options: Pick<AllThemeOptions<TagPrefix>, 'elementTagPrefix' | 'font'>): Theme<TagPrefix>['elements'];

package/dist/create-theme/define-theme-elements.js

@@ -0,0 +1,119 @@
+import { getEnumValues, getObjectTypedValues, typedObjectFromEntries } from '@augment-vir/common';
+import { css, defineElement, defineElementNoInputs, html, unsafeCSS, } from 'element-vir';
+import { createFontStyleCss } from './font-css.js';
+import { HeadingLevel } from './theme-options.js';
+export function defineThemeElements(options) {
+    const themeElements = {
+        bold: defineElementNoInputs({
+            tagName: `${options.elementTagPrefix}-b`,
+            styles: css `
+                :host {
+                    display: inline;
+                    ${createFontStyleCss(options.font.bold)}
+                }
+
+                b {
+                    all: inherit;
+                }
+            `,
+            render() {
+                return html `
+                    <b><slot></slot></b>
+                `;
+            },
+        }),
+        monospace: defineElementNoInputs({
+            tagName: `${options.elementTagPrefix}-monospace`,
+            styles: css `
+                :host {
+                    display: inline;
+                    ${createFontStyleCss(options.font.monospace)}
+                }
+            `,
+            render() {
+                return html `
+                    <slot></slot>
+                `;
+            },
+        }),
+        code: defineElementNoInputs({
+            tagName: `${options.elementTagPrefix}-code`,
+            styles: css `
+                :host {
+                    display: inline;
+                    ${createFontStyleCss(options.font.monospace)}
+                }
+            `,
+            render() {
+                return html `
+                    <code><slot></slot></code>
+                `;
+            },
+        }),
+        paragraph: defineElementNoInputs({
+            tagName: `${options.elementTagPrefix}-p`,
+            styles: css `
+                :host {
+                    display: block;
+                    ${createFontStyleCss(options.font.bold)}
+                }
+
+                p {
+                    all: inherit;
+                }
+            `,
+            render() {
+                return html `
+                    <p><slot></slot></p>
+                `;
+            },
+        }),
+        heading: defineHeadingElement(options),
+    };
+    return themeElements;
+}
+function defineHeadingElement(options) {
+    const headingTag = `${options.elementTagPrefix}-heading`;
+    const headingSelectors = unsafeCSS(getEnumValues(HeadingLevel).join(', '));
+    return defineElement()({
+        tagName: headingTag,
+        hostClasses: typedObjectFromEntries(getEnumValues(HeadingLevel).map((headingLevel) => {
+            return [
+                `${headingTag}-${headingLevel}`,
+                ({ inputs }) => inputs.headingLevel === headingLevel,
+            ];
+        })),
+        styles: ({ hostClasses }) => {
+            const hostClassValues = getObjectTypedValues(hostClasses);
+            return css `
+                :host {
+                    display: block;
+                }
+
+                ${unsafeCSS(hostClassValues
+                .map((hostClass) => {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                const headingLevel = String(hostClass.name)
+                    .split('-')
+                    .slice(-1)[0];
+                return css `
+                                ${hostClass.selector} {
+                                    ${createFontStyleCss(options.font.headings[headingLevel])}
+                                }
+                            `;
+            })
+                .join('\n'))}
+
+                ${headingSelectors} {
+                    all: inherit;
+                }
+            `;
+        },
+        render({ inputs }) {
+            const headingTag = inputs.headingLevel;
+            return html `
+                <${headingTag}><slot></slot></${headingTag}>
+            `;
+        },
+    });
+}

package/dist/create-theme/font-css.d.ts

@@ -0,0 +1,4 @@
+import { type CSSResult } from 'element-vir';
+import { type FontSize, type FontStyle } from './theme-options.js';
+export declare function createFontSizeCssValue(fontSize: Readonly<FontSize>): CSSResult;
+export declare function createFontStyleCss(fontStyle: Readonly<FontStyle>): CSSResult;

package/dist/create-theme/font-css.js

@@ -0,0 +1,20 @@
+import { css, unsafeCSS } from 'element-vir';
+export function createFontSizeCssValue(fontSize) {
+    if ('pixels' in fontSize) {
+        return unsafeCSS(`${fontSize.pixels}px`);
+    }
+    else if ('ratio' in fontSize) {
+        return unsafeCSS(`${fontSize.ratio}em`);
+    }
+    else {
+        throw new Error(`Invalid fontSize given: '${JSON.stringify(fontSize)}'`);
+    }
+}
+export function createFontStyleCss(fontStyle) {
+    return css `
+        font-family: ${unsafeCSS(fontStyle.family)};
+        font-size: ${createFontSizeCssValue(fontStyle.size)};
+        line-height: ${createFontSizeCssValue(fontStyle.lineHeight)};
+        font-weight: ${fontStyle.weight};
+    `;
+}

package/dist/create-theme/internal-theme.d.ts

@@ -0,0 +1,3 @@
+import { type ThemeOptions } from './theme-options.js';
+export type InternalTheme = {};
+export declare function createInternalTheme<TagPrefix extends string>(options: ThemeOptions<TagPrefix>): InternalTheme;

package/dist/create-theme/internal-theme.js

@@ -0,0 +1,5 @@
+export function createInternalTheme(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+options) {
+    return {};
+}

package/dist/create-theme/theme-options.d.ts

@@ -0,0 +1,36 @@
+export declare enum HeadingLevel {
+    H1 = "h1",
+    H2 = "h2",
+    H3 = "h3",
+    H4 = "h4",
+    H5 = "h5",
+    H6 = "h6"
+}
+export type FontSize = {
+    pixels: number;
+} | {
+    ratio: number;
+};
+export type FontStyle = {
+    weight: number;
+    family: string;
+    lineHeight: FontSize;
+    size: FontSize;
+};
+export type RequiredThemeOptions<TagPrefix extends string> = {
+    elementTagPrefix: TagPrefix;
+};
+export type OptionalThemeOptions = {
+    font?: {
+        default: FontStyle;
+        bold: FontStyle;
+        monospace: FontStyle;
+        headings: Record<HeadingLevel, FontStyle>;
+    };
+    colors?: {
+        error: string;
+    };
+};
+export type ThemeOptions<TagPrefix extends string> = Required<RequiredThemeOptions<TagPrefix>> & Partial<OptionalThemeOptions>;
+export type AllThemeOptions<TagPrefix extends string> = Required<RequiredThemeOptions<TagPrefix>> & Required<OptionalThemeOptions>;
+export declare function createDefaultThemeOptions(): AllThemeOptions<any>;

package/dist/create-theme/theme-options.js

@@ -0,0 +1,62 @@
+export var HeadingLevel;
+(function (HeadingLevel) {
+    HeadingLevel["H1"] = "h1";
+    HeadingLevel["H2"] = "h2";
+    HeadingLevel["H3"] = "h3";
+    HeadingLevel["H4"] = "h4";
+    HeadingLevel["H5"] = "h5";
+    HeadingLevel["H6"] = "h6";
+})(HeadingLevel || (HeadingLevel = {}));
+export function createDefaultThemeOptions() {
+    const defaultFont = {
+        family: 'sans-serif',
+        lineHeight: { ratio: 1.1 },
+        size: { pixels: 14 },
+        weight: 400,
+    };
+    const bold = {
+        ...defaultFont,
+        weight: 700,
+    };
+    const allThemeOptions = {
+        elementTagPrefix: 'vir',
+        colors: {
+            error: 'red',
+        },
+        font: {
+            default: defaultFont,
+            bold,
+            monospace: {
+                ...defaultFont,
+                family: 'monospace',
+                size: { ratio: 1.2 },
+            },
+            headings: {
+                h1: {
+                    ...bold,
+                    size: { ratio: 2 },
+                },
+                h2: {
+                    ...bold,
+                    size: { ratio: 1.5 },
+                },
+                h3: {
+                    ...bold,
+                    size: { ratio: 1.17 },
+                },
+                h4: {
+                    ...bold,
+                },
+                h5: {
+                    ...bold,
+                    size: { ratio: 0.83 },
+                },
+                h6: {
+                    ...bold,
+                    size: { ratio: 0.67 },
+                },
+            },
+        },
+    };
+    return allThemeOptions;
+}

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

@@ -0,0 +1,13 @@
+import { type DeclarativeElementDefinition } from 'element-vir';
+import { type HeadingLevel } from './theme-options.js';
+export type Theme<TagPrefix extends string> = {
+    elements: {
+        bold: DeclarativeElementDefinition<`${TagPrefix}-b`>;
+        monospace: DeclarativeElementDefinition<`${TagPrefix}-monospace`>;
+        paragraph: DeclarativeElementDefinition<`${TagPrefix}-p`>;
+        code: DeclarativeElementDefinition<`${TagPrefix}-code`>;
+        heading: DeclarativeElementDefinition<`${TagPrefix}-heading`, {
+            headingLevel: HeadingLevel;
+        }>;
+    };
+};

package/dist/create-theme/theme.js

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

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './color/color-css.js';
+export * from './color/color-theme-override.js';
+export * from './color/color-theme.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './color/color-css.js';
+export * from './color/color-theme-override.js';
+export * from './color/color-theme.js';

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

@@ -0,0 +1,3 @@
+import { type BookPage } from 'element-book';
+import { type Theme } from '../create-theme/theme.js';
+export declare function createThemeBookPages<TagName extends string>(theme: Readonly<Theme<TagName>>): ReadonlyArray<Readonly<BookPage>>;

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

@@ -0,0 +1,56 @@
+import { check } from '@augment-vir/assert';
+import { getEnumValues, getObjectTypedKeys } from '@augment-vir/common';
+import { defineBookPage } from 'element-book';
+import { html } from 'element-vir';
+import { HeadingLevel } from '../create-theme/theme-options.js';
+export function createThemeBookPages(theme) {
+    const elementsBookPage = defineBookPage({
+        title: 'elements',
+        parent: undefined,
+    });
+    const fontEntries = getObjectTypedKeys(theme.elements)
+        .map((elementKey) => {
+        if (elementKey === 'heading') {
+            return undefined;
+        }
+        const themeElement = theme.elements[elementKey];
+        return defineBookPage({
+            title: themeElement.tagName,
+            parent: elementsBookPage,
+            defineExamples({ defineExample }) {
+                defineExample({
+                    title: 'basic',
+                    render() {
+                        return html `
+                                <${themeElement}>This is ${elementKey}</${themeElement}>
+                            `;
+                    },
+                });
+            },
+        });
+    })
+        .filter(check.isTruthy);
+    return [
+        defineBookPage({
+            title: theme.elements.heading.tagName,
+            parent: elementsBookPage,
+            defineExamples({ defineExample }) {
+                getEnumValues(HeadingLevel).forEach((headingLevel) => {
+                    defineExample({
+                        title: headingLevel,
+                        render() {
+                            return html `
+                                <${theme.elements.heading.assign({
+                                headingLevel,
+                            })}>
+                                    This is heading ${headingLevel}
+                                </${theme.elements.heading}>
+                            `;
+                        },
+                    });
+                });
+            },
+        }),
+        ...fontEntries,
+    ].sort((a, b) => a.title.localeCompare(b.title));
+}

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,34 @@
+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}>
+        `;
+    },
+});

package/package.json

@@ -0,0 +1,76 @@
+{
+    "name": "theme-vir",
+    "version": "25.6.0",
+    "description": "Create an entire web theme.",
+    "keywords": [
+        "design",
+        "system",
+        "vir",
+        "color",
+        "theme",
+        "elements",
+        "custom",
+        "components",
+        "web",
+        "element-vir"
+    ],
+    "homepage": "https://electrovir.github.io/element-vir/theme-vir",
+    "bugs": {
+        "url": "https://github.com/electrovir/element-vir/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/electrovir/element-vir.git"
+    },
+    "license": "(MIT or CC0 1.0)",
+    "author": {
+        "name": "electrovir",
+        "url": "https://github.com/electrovir"
+    },
+    "type": "module",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "build": "npm run docs",
+        "compile": "virmator compile",
+        "docs": "virmator docs",
+        "start": "virmator frontend",
+        "test": "virmator test web",
+        "test:coverage": "npm run test coverage",
+        "test:docs": "virmator docs check"
+    },
+    "dependencies": {
+        "@augment-vir/assert": "^31.20.0",
+        "@augment-vir/common": "^31.20.0",
+        "lit-css-vars": "^3.0.11",
+        "type-fest": "^4.41.0"
+    },
+    "devDependencies": {
+        "@augment-vir/test": "^31.20.0",
+        "@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",
+        "esbuild": "^0.25.4",
+        "istanbul-smart-text-reporter": "^1.1.5",
+        "markdown-code-example-inserter": "^3.0.3",
+        "typedoc": "^0.28.4",
+        "typescript": "5.8.3",
+        "vite": "^6.3.5",
+        "vite-tsconfig-paths": "^5.1.4"
+    },
+    "peerDependencies": {
+        "element-book": ">=17",
+        "element-vir": ">=17"
+    },
+    "engines": {
+        "node": ">=22"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}