theme-vir 28.20.0 → 28.21.0

package/README.md

@@ -1,5 +1,11 @@
 # theme-vir
 
-Easy-to-create, all-in-one theme generator with [`element-vir`](https://npmjs.com/package/element-vir). WIP.
+Easy-to-create, all-in-one theme generator with [`element-vir`](https://npmjs.com/package/element-vir).
 
 Reference docs: https://electrovir.github.io/theme-vir
+
+## install
+
+```sh
+npm i theme-vir
+```

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

@@ -1,29 +1,32 @@
 import { type ColorThemeOverride } from './color-theme-init.js';
 import { type ColorTheme } from './color-theme.js';
 /**
- * Create the `<style>` id used to apply color themes globally by {@link applyGlobalColorTheme}.
+ * Create the `<style>` id used to apply color themes globally by
+ * {@link applyColorThemeViaStyleElement}.
  *
  * @category Internal
  */
 export declare function createGlobalThemeStyleId(colorTheme: Readonly<ColorTheme>): string;
-/**
- * Create the global `<style>` element used by {@link applyGlobalColorTheme} to apply a color theme.
- *
- * @category Internal
- */
-export declare function createGlobalThemeStyleElement(colorTheme: Readonly<ColorTheme>, context?: Element): HTMLStyleElement;
 /**
  * Sets all of a color theme's CSS vars in a global style element. If no override is given, the
  * theme color default values are assigned.
  *
+ * Uses `applyCssVarsViaStyleElement` from `lit-css-vars`.
+ *
  * @category Color Theme
  */
-export declare function applyGlobalColorTheme(fullTheme: ColorTheme, themeOverride?: ColorThemeOverride | undefined): void;
+export declare function applyColorThemeViaStyleElement(colorTheme: ColorTheme, themeOverride?: ColorThemeOverride | undefined, 
+/**
+ * The context to apply the color theme to.
+ *
+ * @default document.head
+ */
+context?: Element | undefined): HTMLStyleElement;
 /**
  * A very inefficient way of setting all of a color theme's CSS vars on a given element. If no
  * override is given, the theme color default values are assigned.
  *
- * @deprecated Use {@link applyGlobalColorTheme} instead whenever possible.
+ * @deprecated Use {@link applyColorThemeViaStyleElement} instead whenever possible.
  * @category Internal
  */
 export declare function applyColorTheme(

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

@@ -1,43 +1,33 @@
-import { camelCaseToKebabCase, getObjectTypedValues } from '@augment-vir/common';
-import { setCssVarValue } from 'lit-css-vars';
+import { camelCaseToKebabCase, getObjectTypedValues, typedObjectFromEntries, } from '@augment-vir/common';
+import { applyCssVarsViaStyleElement, setCssVarValue } from 'lit-css-vars';
 /**
- * Create the `<style>` id used to apply color themes globally by {@link applyGlobalColorTheme}.
+ * Create the `<style>` id used to apply color themes globally by
+ * {@link applyColorThemeViaStyleElement}.
  *
  * @category Internal
  */
 export function createGlobalThemeStyleId(colorTheme) {
     return [
         camelCaseToKebabCase(colorTheme.prefix),
-        'global-theme-vir-style',
+        'theme-vir-style',
     ].join('-');
 }
-/**
- * Create the global `<style>` element used by {@link applyGlobalColorTheme} to apply a color theme.
- *
- * @category Internal
- */
-export function createGlobalThemeStyleElement(colorTheme, context = document.head) {
-    const styleId = createGlobalThemeStyleId(colorTheme);
-    const existingElement = context.querySelector(`style#${styleId}`);
-    if (existingElement instanceof HTMLStyleElement) {
-        return existingElement;
-    }
-    else {
-        const newStyleElement = globalThis.document.createElement('style');
-        newStyleElement.id = styleId;
-        context.append(newStyleElement);
-        return newStyleElement;
-    }
-}
 /**
  * Sets all of a color theme's CSS vars in a global style element. If no override is given, the
  * theme color default values are assigned.
  *
+ * Uses `applyCssVarsViaStyleElement` from `lit-css-vars`.
+ *
  * @category Color Theme
  */
-export function applyGlobalColorTheme(fullTheme, themeOverride) {
-    const styleElement = createGlobalThemeStyleElement(fullTheme);
-    const cssVarDeclarations = getObjectTypedValues(fullTheme.colors).flatMap((themeColor) => {
+export function applyColorThemeViaStyleElement(colorTheme, themeOverride, 
+/**
+ * The context to apply the color theme to.
+ *
+ * @default document.head
+ */
+context) {
+    const cssVarValues = typedObjectFromEntries(getObjectTypedValues(colorTheme.colors).flatMap((themeColor) => {
         return [
             buildCssVarDeclaration({
                 layerKey: 'background',
@@ -50,14 +40,14 @@ export function applyGlobalColorTheme(fullTheme, themeOverride) {
                 themeOverride,
             }),
         ];
-    });
-    styleElement.textContent = `:root {\n    ${cssVarDeclarations.join('\n    ')}\n}`;
+    }));
+    return applyCssVarsViaStyleElement(cssVarValues, createGlobalThemeStyleId(colorTheme), context);
 }
 /**
  * A very inefficient way of setting all of a color theme's CSS vars on a given element. If no
  * override is given, the theme color default values are assigned.
  *
- * @deprecated Use {@link applyGlobalColorTheme} instead whenever possible.
+ * @deprecated Use {@link applyColorThemeViaStyleElement} instead whenever possible.
  * @category Internal
  */
 export function applyColorTheme(
@@ -79,9 +69,13 @@ element, fullTheme, themeOverride) {
     });
 }
 function buildCssVarDeclaration({ layerKey, themeOverride, themeColor, }) {
-    const override = themeOverride?.overrides[String(themeColor[layerKey].name)];
+    const cssVarName = String(themeColor[layerKey].name);
+    const override = themeOverride?.overrides[cssVarName];
     const value = override || themeColor[layerKey].default;
-    return `${themeColor[layerKey].name}: ${value};`;
+    return [
+        cssVarName,
+        value,
+    ];
 }
 function applyIndividualThemeColorValue({ element, layerKey, themeOverride, themeColor, }) {
     const override = themeOverride?.overrides[String(themeColor[layerKey].name)];

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

@@ -1,5 +1,5 @@
 import { check } from '@augment-vir/assert';
-import { getObjectTypedEntries, } from '@augment-vir/common';
+import { getObjectTypedEntries, kebabCaseToCamelCase, } from '@augment-vir/common';
 import { CSSResult } from 'element-vir';
 /**
  * Convert a color theme into code to define that color theme.
@@ -57,7 +57,8 @@ function generateOverrideCode(override, paletteVarName) {
     if (colorOverrideEntries.length > 0) {
         parts.push(`${tab(2)}colorOverrides: {\n${colorOverrideEntries.join('\n')}\n${tab(2)}},`);
     }
-    return `export const ${override.name}Override = defineColorThemeOverride(\n${tab(1)}theme,\n${tab(1)}'${override.name}',\n${tab(1)}{\n${parts.join('\n')}\n${tab(1)}},\n);`;
+    const camelCaseName = kebabCaseToCamelCase(override.name);
+    return `export const ${camelCaseName}Override = defineColorThemeOverride(\n${tab(1)}theme,\n${tab(1)}'${override.name}',\n${tab(1)}{\n${parts.join('\n')}\n${tab(1)}},\n);`;
 }
 function tab(level) {
     return '    '.repeat(level);

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

@@ -1,11 +1,11 @@
 import { getObjectTypedEntries, getObjectTypedKeys, mapObjectValues } from '@augment-vir/common';
 import { createColorCssVarDefault, defineColorTheme, themeDefaultKey, } from './color-theme.js';
-function applyCssVarOverride({ originalTheme, layerKey, themeColor, override, overrideValues, }) {
+function applyCssVarOverride({ overriddenDefault, overriddenColors, layerKey, themeColor, override, overrideValues, }) {
     const layerOverride = override?.[layerKey];
     if (!layerOverride) {
         return;
     }
-    overrideValues[String(themeColor[layerKey].name)] = String(createColorCssVarDefault(layerKey, layerOverride, originalTheme.init.default, originalTheme.init.colors));
+    overrideValues[String(themeColor[layerKey].name)] = String(createColorCssVarDefault(layerKey, layerOverride, overriddenDefault, overriddenColors));
 }
 /**
  * Define a color theme override. Use this to define multiple theme variations, like light mode vs
@@ -14,11 +14,24 @@ function applyCssVarOverride({ originalTheme, layerKey, themeColor, override, ov
  * @category Color Theme
  */
 export function defineColorThemeOverride(originalTheme, overrideName, { defaultOverride, colorOverrides, }) {
+    const overriddenDefault = {
+        ...originalTheme.init.default,
+        ...defaultOverride,
+    };
+    const asThemeColorInit = mapObjectValues(originalTheme.init.colors, (colorName, colorInit) => {
+        const override = colorOverrides?.[colorName];
+        const newInit = {
+            ...colorInit,
+            ...override,
+        };
+        return newInit;
+    });
     const defaultValues = {};
     if (defaultOverride) {
         getObjectTypedKeys(defaultOverride).forEach((layerKey) => {
             applyCssVarOverride({
-                originalTheme,
+                overriddenDefault,
+                overriddenColors: asThemeColorInit,
                 layerKey,
                 override: defaultOverride,
                 themeColor: originalTheme.colors[themeDefaultKey],
@@ -34,14 +47,16 @@ export function defineColorThemeOverride(originalTheme, overrideName, { defaultO
                 throw new Error(`Override color name '${colorName}' does not exist in the theme being overridden.`);
             }
             applyCssVarOverride({
-                originalTheme,
+                overriddenDefault,
+                overriddenColors: asThemeColorInit,
                 layerKey: 'foreground',
                 override,
                 themeColor,
                 overrideValues: colorValues,
             });
             applyCssVarOverride({
-                originalTheme,
+                overriddenDefault,
+                overriddenColors: asThemeColorInit,
                 layerKey: 'background',
                 override,
                 themeColor,
@@ -49,18 +64,7 @@ export function defineColorThemeOverride(originalTheme, overrideName, { defaultO
             });
         });
     }
-    const asThemeColorInit = mapObjectValues(originalTheme.init.colors, (colorName, colorInit) => {
-        const override = colorOverrides?.[colorName];
-        const newInit = {
-            ...colorInit,
-            ...override,
-        };
-        return newInit;
-    });
-    const asTheme = defineColorTheme({
-        ...originalTheme.init.default,
-        ...defaultOverride,
-    }, asThemeColorInit);
+    const asTheme = defineColorTheme(overriddenDefault, asThemeColorInit);
     return {
         name: overrideName,
         overrides: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "theme-vir",
-    "version": "28.20.0",
+    "version": "28.21.0",
     "description": "Create an entire web theme.",
     "keywords": [
         "design",
@@ -36,24 +36,24 @@
         "build": "npm run docs",
         "compile": "virmator compile",
         "docs": "virmator docs",
-        "start": "virmator frontend",
+        "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": "^31.59.2",
-        "@augment-vir/common": "^31.59.2",
+        "@augment-vir/assert": "^31.59.3",
+        "@augment-vir/common": "^31.59.3",
         "@electrovir/color": "^1.7.8",
         "apca-w3": "^0.1.9",
-        "lit-css-vars": "^3.4.0",
-        "type-fest": "^5.4.1"
+        "lit-css-vars": "^3.5.0",
+        "type-fest": "^5.4.4"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.59.2",
+        "@augment-vir/test": "^31.59.3",
         "@types/apca-w3": "^0.1.3",
-        "@web/dev-server-esbuild": "^1.0.4",
+        "@web/dev-server-esbuild": "^1.0.5",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.1",
@@ -65,9 +65,9 @@
         "markdown-code-example-inserter": "^3.0.3",
         "typedoc": "^0.28.16",
         "typescript": "5.9.3",
-        "vira": "^29.3.0",
+        "vira": "^29.3.1",
         "vite": "^7.3.1",
-        "vite-tsconfig-paths": "^6.0.5"
+        "vite-tsconfig-paths": "^6.1.0"
     },
     "peerDependencies": {
         "element-book": ">=17",