theme-vir 28.25.2 → 29.0.0-beta.0

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "theme-vir",
-    "version": "28.25.2",
+    "version": "29.0.0-beta.0",
     "description": "Create an entire web theme.",
     "keywords": [
         "design",
@@ -36,43 +36,36 @@
         "build": "npm run docs",
         "compile": "virmator compile",
         "docs": "virmator docs",
-        "start": "npm run compile && virmator frontend",
         "test": "virmator test web",
         "test:coverage": "npm run test coverage",
         "test:docs": "virmator docs check",
         "test:update": "virmator test web update"
     },
     "dependencies": {
-        "@augment-vir/assert": "^32.2.3",
-        "@augment-vir/common": "^32.2.3",
+        "@augment-vir/assert": "^32.3.0-beta.0",
+        "@augment-vir/common": "^32.3.0-beta.0",
         "@electrovir/color": "^1.7.11",
         "apca-w3": "^0.1.9",
         "lit-css-vars": "^3.6.3",
         "type-fest": "^5.8.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^32.2.3",
+        "@augment-vir/test": "^32.3.0-beta.0",
         "@types/apca-w3": "^0.1.3",
         "@web/dev-server-esbuild": "^2.0.0",
         "@web/test-runner": "^1.0.0",
         "@web/test-runner-commands": "^1.0.1",
         "@web/test-runner-playwright": "^1.0.0",
         "@web/test-runner-visual-regression": "^1.0.1",
-        "element-book": "^26.17.4",
-        "element-vir": "^26.17.3",
+        "element-vir": "^27.0.0-beta.3",
         "esbuild": "^0.28.2",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.6",
         "typedoc": "^0.28.20",
-        "typescript": "5.9.3",
-        "vira": "^31.31.6",
-        "vite": "^8.2.2",
-        "vite-tsconfig-paths": "^6.1.1"
+        "typescript": "5.9.3"
     },
     "peerDependencies": {
-        "element-book": ">=17",
-        "element-vir": "^26",
-        "vira": ">=28"
+        "element-vir": "^27.0.0-beta.3"
     },
     "engines": {
         "node": ">=22"

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

@@ -1,19 +0,0 @@
-import { type PartialWithUndefined } from '@augment-vir/common';
-import { type BookPage } from 'element-book';
-import { type BuildLowLevelColorThemeOptions, type ColorPaletteVars } from './build-color-theme.js';
-/**
- * Create multiple element-book pages to showcase a bunch of color CSS variables.
- *
- * @category Color Theme
- * @see `createColorThemeBookPages` for creating full color theme pages.
- */
-export declare function createColorPaletteBookPages({ colors, parent, title, includeContrast, includeTheme, useVerticalTheme, options, }: {
-    title: string;
-    colors: Readonly<ColorPaletteVars>;
-} & PartialWithUndefined<{
-    parent: Readonly<BookPage>;
-    includeContrast: boolean;
-    includeTheme: boolean;
-    useVerticalTheme: boolean;
-    options: Readonly<BuildLowLevelColorThemeOptions>;
-}>): BookPage[];

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

@@ -1,275 +0,0 @@
-import { check } from '@augment-vir/assert';
-import { VirColorPair } from '@electrovir/color';
-import { defineBookPage } from 'element-book';
-import { css, html, listen, unsafeCSS } from 'element-vir';
-import { noNativeSpacing, viraTheme } from 'vira';
-import { buildColorTheme, groupColors, } from './build-color-theme.js';
-import { createColorThemeBookPages } from './color-theme-book-pages.js';
-import { themeDefaultKey } from './color-theme.js';
-const blackWhiteCells = [
-    {
-        title: 'Black',
-        fontWeight: 400,
-        foreground: viraTheme.colors[themeDefaultKey].foreground,
-    },
-    {
-        title: 'Black',
-        fontWeight: 700,
-        foreground: viraTheme.colors[themeDefaultKey].foreground,
-    },
-    {
-        title: 'White',
-        fontWeight: 400,
-        foreground: viraTheme.colors[themeDefaultKey].background,
-    },
-    {
-        title: 'White',
-        fontWeight: 700,
-        foreground: viraTheme.colors[themeDefaultKey].background,
-    },
-    {
-        title: 'Black',
-        fontWeight: 400,
-        background: viraTheme.colors[themeDefaultKey].foreground,
-    },
-    {
-        title: 'Black',
-        fontWeight: 700,
-        background: viraTheme.colors[themeDefaultKey].foreground,
-    },
-    {
-        title: 'White',
-        fontWeight: 400,
-        background: viraTheme.colors[themeDefaultKey].background,
-    },
-    {
-        title: 'White',
-        fontWeight: 700,
-        background: viraTheme.colors[themeDefaultKey].background,
-    },
-];
-/**
- * Create multiple element-book pages to showcase a bunch of color CSS variables.
- *
- * @category Color Theme
- * @see `createColorThemeBookPages` for creating full color theme pages.
- */
-export function createColorPaletteBookPages({ colors, parent, title, includeContrast, includeTheme, useVerticalTheme, options, }) {
-    const colorGroups = groupColors(colors);
-    const topColorsPage = defineBookPage({
-        parent,
-        title,
-    });
-    const colorPalettePage = defineBookPage({
-        parent: topColorsPage,
-        title: 'Palette',
-        defineExamples({ defineExample }) {
-            defineExample({
-                title: 'All Colors',
-                styles: css `
-                    :host {
-                        display: flex;
-                        flex-direction: row;
-                    }
-
-                    p {
-                        ${noNativeSpacing}
-                    }
-
-                    .color-column {
-                        display: flex;
-                        flex-direction: column;
-                    }
-
-                    .column-title {
-                        text-align: center;
-                        font-size: 12px;
-                        padding-bottom: 4px;
-                        border-bottom: 1px solid
-                            ${viraTheme.colors['vira-grey-foreground-decoration'].foreground.value};
-                        margin-bottom: 4px;
-                        color: ${viraTheme.colors['vira-grey-foreground-non-body'].foreground
-                    .value};
-                    }
-
-                    .swatch-wrapper {
-                        display: flex;
-                        gap: 4px;
-                        align-items: center;
-
-                        & .swatch {
-                            width: 50px;
-                            height: 50px;
-                            cursor: pointer;
-                        }
-
-                        & .color-details {
-                            display: none;
-                            font-family: monospace;
-                            font-size: 12px;
-                            color: ${viraTheme.colors['vira-grey-foreground-non-body'].foreground
-                    .value};
-                        }
-
-                        &.expanded .color-details {
-                            display: block;
-                        }
-
-                        & .color-value {
-                            margin-left: 1ch;
-                        }
-                    }
-                `,
-                render() {
-                    return Object.entries(colorGroups).map(([groupName, colors,]) => {
-                        return html `
-                                <div class="color-column">
-                                    <p class="column-title">${groupName}</p>
-                                    ${colors.map((color) => {
-                            return html `
-                                            <div class="swatch-wrapper">
-                                                <div
-                                                    class="swatch"
-                                                    style=${css `
-                                                        background-color: ${unsafeCSS(color.definition.default)};
-                                                    `}
-                                                    ${listen('click', (event) => {
-                                const wrapper = event.currentTarget.parentElement;
-                                wrapper?.classList.toggle('expanded');
-                            })}
-                                                ></div>
-                                                <p class="color-details">
-                                                    <span>${color.cssVarName}</span>
-                                                    <br />
-                                                    <span class="color-value">
-                                                        ${color.definition.default}
-                                                    </span>
-                                                </p>
-                                            </div>
-                                        `;
-                        })}
-                                </div>
-                            `;
-                    });
-                },
-            });
-        },
-    });
-    const contrastsPage = defineBookPage({
-        parent: topColorsPage,
-        title: 'Palette Contrast',
-    });
-    function createContrastPage(contrastPageTitle, contrastCellsInput) {
-        return defineBookPage({
-            parent: contrastsPage,
-            title: `${title} ${contrastPageTitle}`,
-            defineExamples({ defineExample }) {
-                Object.entries(colorGroups).forEach(([groupName, colors,]) => {
-                    const contrastCells = check.isArray(contrastCellsInput)
-                        ? contrastCellsInput
-                        : contrastCellsInput(colors);
-                    defineExample({
-                        title: groupName,
-                        styles: css `
-                                :host {
-                                    display: flex;
-                                    flex-direction: column;
-                                    gap: 24px;
-                                }
-
-                                p {
-                                    ${noNativeSpacing}
-                                }
-
-                                .darkness-level {
-                                    text-align: center;
-                                    font-size: 12px;
-                                    color: ${viraTheme.colors['vira-grey-foreground-header']
-                            .foreground.value};
-                                }
-
-                                td {
-                                    padding: 4px;
-                                    min-width: 170px;
-                                }
-                            `,
-                        render() {
-                            const colorRowTemplates = colors.map((color) => {
-                                const cellTemplates = contrastCells.map((cell) => {
-                                    return html `
-                                            <td>
-                                                <p class="darkness-level">${color.suffix}</p>
-                                                <${VirColorPair.assign({
-                                        color: {
-                                            background: cell.background || color.definition,
-                                            foreground: cell.foreground || color.definition,
-                                        },
-                                        showVarValues: true,
-                                        showVarNames: false,
-                                        showContrast: true,
-                                        fontWeight: cell.fontWeight,
-                                    })}></${VirColorPair}>
-                                            </td>
-                                        `;
-                                });
-                                return html `
-                                        <tr>${cellTemplates}</tr>
-                                    `;
-                            });
-                            const headerCells = contrastCells.map((cell) => {
-                                const layerText = cell.background ? 'in back' : 'in front';
-                                const title = [
-                                    cell.title,
-                                    `(${layerText})`,
-                                    `(${cell.fontWeight})`,
-                                ].join(' ');
-                                return html `
-                                        <th>${title}</th>
-                                    `;
-                            });
-                            return html `
-                                    <table cellspacing="0" cellpadding="0">
-                                        <thead><tr>${headerCells}</tr></thead>
-                                        <tbody>${colorRowTemplates}</tbody>
-                                    </table>
-                                `;
-                        },
-                    });
-                });
-            },
-        });
-    }
-    const blackWhiteContrastPage = createContrastPage('Contrast Black White', blackWhiteCells);
-    function createSelfContrastPage(fontWeight) {
-        return createContrastPage(`Contrast Self ${fontWeight}`, (colors) => {
-            return colors.map((color) => {
-                return {
-                    fontWeight,
-                    title: color.suffix || '',
-                    foreground: color.definition,
-                };
-            });
-        });
-    }
-    function createThemePages() {
-        const generatedTheme = buildColorTheme(colors, options);
-        return createColorThemeBookPages({
-            parent: topColorsPage,
-            title: 'Theme (auto)',
-            theme: generatedTheme.defaultLight,
-            hideInverseColors: true,
-            useVerticalLayout: useVerticalTheme,
-            prefixGroupByCount: 2,
-            overrides: [generatedTheme.darkOverride],
-        });
-    }
-    return [
-        topColorsPage,
-        colorPalettePage,
-        includeContrast ? contrastsPage : undefined,
-        includeContrast ? blackWhiteContrastPage : undefined,
-        includeContrast ? createSelfContrastPage(400) : undefined,
-        includeContrast ? createSelfContrastPage(700) : undefined,
-        ...(includeTheme ? createThemePages() : []),
-    ].filter(check.isTruthy);
-}

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

@@ -1,31 +0,0 @@
-import { type PartialWithUndefined } from '@augment-vir/common';
-import { BookPageControlType, type BookPage } from 'element-book';
-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).
- *
- * @category Color Theme
- */
-export declare function createColorThemeBookPages({ parent, title, theme, hideInverseColors, overrides, useVerticalLayout, prefixGroupByCount, hideCopyCode, }: {
-    title: string;
-    theme: Readonly<ColorTheme>;
-} & PartialWithUndefined<{
-    hideCopyCode: boolean;
-    parent: Readonly<BookPage>;
-    hideInverseColors: boolean;
-    overrides: ReadonlyArray<Readonly<ColorThemeOverride>>;
-    useVerticalLayout: boolean;
-    /**
-     * The number of CSS variable name prefixes to group colors by.
-     *
-     * @default 0
-     */
-    prefixGroupByCount: number;
-}>): (BookPage<{}, Readonly<BookPage> | undefined, {
-    'Show Var Names': import("element-book").BookPageControlInit<BookPageControlType.Checkbox>;
-    'Show Contrast Tips': import("element-book").BookPageControlInit<BookPageControlType.Checkbox>;
-}> | BookPage<{}, BookPage<{}, Readonly<BookPage> | undefined, {
-    'Show Var Names': import("element-book").BookPageControlInit<BookPageControlType.Checkbox>;
-    'Show Contrast Tips': import("element-book").BookPageControlInit<BookPageControlType.Checkbox>;
-}>, {}>)[];

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

@@ -1,183 +0,0 @@
-import { 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 { generateThemeCode } from './color-theme-code.js';
-const noneOverridesSelectionValue = 'None';
-/**
- * Create multiple element-book pages to showcase a theme its overrides (if any).
- *
- * @category Color Theme
- */
-export function createColorThemeBookPages({ parent, title, theme, hideInverseColors, overrides, useVerticalLayout, prefixGroupByCount = 2, hideCopyCode, }) {
-    const themeControls = {
-        'Show Var Names': definePageControl({
-            controlType: BookPageControlType.Checkbox,
-            initValue: false,
-        }),
-        'Show Contrast Tips': definePageControl({
-            controlType: BookPageControlType.Checkbox,
-            initValue: true,
-        }),
-    };
-    const defaultThemeControls = {
-        'Theme Override': definePageControl({
-            controlType: BookPageControlType.Dropdown,
-            initValue: noneOverridesSelectionValue,
-            options: [
-                noneOverridesSelectionValue,
-                ...(overrides || []).map((override) => {
-                    if (override.name === noneOverridesSelectionValue) {
-                        throw new Error(`Cannot have theme override named '${noneOverridesSelectionValue}'`);
-                    }
-                    return override.name;
-                }),
-            ],
-        }),
-    };
-    const themeParentPage = defineBookPage({
-        parent,
-        title,
-        controls: themeControls,
-    });
-    function buildThemeColorTemplate({ controls, theme, themeColorName, }) {
-        const themeColor = check.isKeyOf(themeColorName, theme.colors)
-            ? theme.colors[themeColorName]
-            : undefined;
-        const inverseThemeColor = check.isKeyOf(themeColorName, theme.inverse)
-            ? theme.inverse[themeColorName]
-            : undefined;
-        if (!themeColor || !inverseThemeColor) {
-            throw new Error(`No theme color found by name '${themeColorName}'`);
-        }
-        const normalTemplate = html `
-            <${VirColorPair.assign({
-            color: themeColor,
-            showVarValues: true,
-            showVarNames: controls['Show Var Names'],
-            showContrast: controls['Show Contrast Tips'],
-            fontWeight: 400,
-        })}></${VirColorPair}>
-        `;
-        const inverseColor = hideInverseColors ? undefined : inverseThemeColor;
-        const inverseTemplate = inverseColor
-            ? html `
-                  <${VirColorPair.assign({
-                color: inverseColor,
-                showVarValues: false,
-                showVarNames: controls['Show Var Names'],
-                showContrast: controls['Show Contrast Tips'],
-                fontWeight: 400,
-            })}></${VirColorPair}>
-              `
-            : nothing;
-        return html `
-            <div class="with-inverse">${normalTemplate}${inverseTemplate}</div>
-        `;
-    }
-    function createThemePageExamples(defineExample, defaultTheme, overrides) {
-        const groups = groupArrayBy(Object.keys(defaultTheme.colors), (value) => {
-            if (prefixGroupByCount) {
-                return value.split('-').slice(0, prefixGroupByCount).join('-');
-            }
-            else {
-                return value;
-            }
-        });
-        Object.entries(groups).forEach(([groupName, group,]) => {
-            if (!group) {
-                return;
-            }
-            defineExample({
-                title: groupName,
-                styles: css `
-                        :host {
-                            display: flex;
-                            flex-direction: column;
-                            gap: 4px;
-                        }
-
-                        .theme-wrapper {
-                            display: contents;
-                        }
-
-                        .with-inverse {
-                            display: flex;
-                            flex-direction: column;
-                            gap: 4px;
-                        }
-                    `,
-                render({ controls }) {
-                    const selectedOverride = ('Theme Override' in controls &&
-                        controls['Theme Override'] &&
-                        overrides?.find((override) => override.name === controls['Theme Override'])) ||
-                        undefined;
-                    const currentTheme = selectedOverride?.asTheme || defaultTheme;
-                    return html `
-                            <div class="theme-wrapper">
-                                ${group.map((entry) => {
-                        return buildThemeColorTemplate({
-                            controls,
-                            theme: currentTheme,
-                            themeColorName: entry,
-                        });
-                    })}
-                            </div>
-                        `;
-                },
-            });
-        });
-    }
-    const descriptionParagraphs = [
-        'Click a color preview to show CSS var names and values.',
-    ];
-    const defaultThemePage = defineBookPage({
-        parent: themeParentPage,
-        title: 'Default',
-        descriptionParagraphs,
-        useVerticalExamples: useVerticalLayout,
-        controls: {
-            ...(hideCopyCode
-                ? {}
-                : {
-                    copy: definePageControl({
-                        controlType: BookPageControlType.Custom,
-                        content: html `
-                              <button
-                                  ${listen('click', async () => {
-                            const code = generateThemeCode(theme, {
-                                paletteVarName: 'viraColorPalette',
-                                overrides,
-                            });
-                            await navigator.clipboard.writeText(code);
-                        })}
-                              >
-                                  Copy Code
-                              </button>
-                          `,
-                    }),
-                }),
-            ...defaultThemeControls,
-        },
-        defineExamples({ defineExample }) {
-            createThemePageExamples(defineExample, theme, overrides);
-        },
-    });
-    const overridePages = (overrides || []).map((override) => {
-        return defineBookPage({
-            parent: themeParentPage,
-            title: override.name,
-            useVerticalExamples: useVerticalLayout,
-            descriptionParagraphs,
-            defineExamples({ defineExample }) {
-                createThemePageExamples(defineExample, override.asTheme, undefined);
-            },
-        });
-    });
-    return [
-        themeParentPage,
-        defaultThemePage,
-        ...overridePages,
-    ];
-}

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

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

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

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

@@ -1,125 +0,0 @@
-import { getEnumValues, getObjectTypedValues, typedObjectFromEntries } from '@augment-vir/common';
-import { css, defineElement, html, unsafeCSS } from 'element-vir';
-import { createFontStyleCss } from './font-css.js';
-import { HeadingLevel } from './theme-options.js';
-export function defineThemeElements(options) {
-    const themeElements = {
-        bold: defineElement()({
-            tagName: `${options.elementTagPrefix}-b`,
-            styles: css `
-                :host {
-                    display: inline;
-                    ${createFontStyleCss(options.font.bold)}
-                }
-
-                b {
-                    all: inherit;
-                }
-            `,
-            render() {
-                return html `
-                    <b><slot></slot></b>
-                `;
-            },
-        }),
-        monospace: defineElement()({
-            tagName: `${options.elementTagPrefix}-monospace`,
-            styles: css `
-                :host {
-                    display: inline;
-                    ${createFontStyleCss(options.font.monospace)}
-                }
-            `,
-            render() {
-                return html `
-                    <slot></slot>
-                `;
-            },
-        }),
-        code: defineElement()({
-            tagName: `${options.elementTagPrefix}-code`,
-            styles: css `
-                :host {
-                    display: inline;
-                    ${createFontStyleCss(options.font.monospace)}
-                }
-            `,
-            render() {
-                return html `
-                    <code><slot></slot></code>
-                `;
-            },
-        }),
-        paragraph: defineElement()({
-            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(
-        /**
-         * `mapEnumToObject` cannot be used here: host class keys must be prefixed with the
-         * element's tag name, not the bare enum values.
-         */
-        // eslint-disable-next-line @virmator/prefer-map-enum-to-object
-        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

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

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

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

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

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

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

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

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

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

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

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

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