theme-vir 28.19.0 → 28.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +7 -1
  2. package/dist/color-theme/apply-color-theme.d.ts +34 -0
  3. package/dist/color-theme/apply-color-theme.js +88 -0
  4. package/dist/color-theme/color-theme-code.js +3 -2
  5. package/dist/color-theme/color-theme-override.js +21 -17
  6. package/dist/color-theme/color-theme.d.ts +2 -10
  7. package/dist/color-theme/color-theme.js +3 -35
  8. package/dist/index.d.ts +1 -0
  9. package/dist/index.js +1 -0
  10. package/package.json +11 -11
package/README.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # theme-vir
2
2
 
3
- Easy-to-create, all-in-one theme generator with [`element-vir`](https://npmjs.com/package/element-vir). WIP.
3
+ Easy-to-create, all-in-one theme generator with [`element-vir`](https://npmjs.com/package/element-vir).
4
4
 
5
5
  Reference docs: https://electrovir.github.io/theme-vir
6
+
7
+ ## install
8
+
9
+ ```sh
10
+ npm i theme-vir
11
+ ```
package/dist/color-theme/apply-color-theme.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ import { type ColorThemeOverride } from './color-theme-init.js';
2
+ import { type ColorTheme } from './color-theme.js';
3
+ /**
4
+ * Create the `<style>` id used to apply color themes globally by
5
+ * {@link applyColorThemeViaStyleElement}.
6
+ *
7
+ * @category Internal
8
+ */
9
+ export declare function createGlobalThemeStyleId(colorTheme: Readonly<ColorTheme>): string;
10
+ /**
11
+ * Sets all of a color theme's CSS vars in a global style element. If no override is given, the
12
+ * theme color default values are assigned.
13
+ *
14
+ * Uses `applyCssVarsViaStyleElement` from `lit-css-vars`.
15
+ *
16
+ * @category Color Theme
17
+ */
18
+ export declare function applyColorThemeViaStyleElement(colorTheme: ColorTheme, themeOverride?: ColorThemeOverride | undefined,
19
+ /**
20
+ * The context to apply the color theme to.
21
+ *
22
+ * @default document.head
23
+ */
24
+ context?: Element | undefined): HTMLStyleElement;
25
+ /**
26
+ * A very inefficient way of setting all of a color theme's CSS vars on a given element. If no
27
+ * override is given, the theme color default values are assigned.
28
+ *
29
+ * @deprecated Use {@link applyColorThemeViaStyleElement} instead whenever possible.
30
+ * @category Internal
31
+ */
32
+ export declare function applyColorTheme(
33
+ /** This should usually be the top-level `html` element. */
34
+ element: HTMLElement, fullTheme: ColorTheme, themeOverride?: ColorThemeOverride | undefined): void;
package/dist/color-theme/apply-color-theme.js ADDED
@@ -0,0 +1,88 @@
1
+ import { camelCaseToKebabCase, getObjectTypedValues, typedObjectFromEntries, } from '@augment-vir/common';
2
+ import { applyCssVarsViaStyleElement, setCssVarValue } from 'lit-css-vars';
3
+ /**
4
+ * Create the `<style>` id used to apply color themes globally by
5
+ * {@link applyColorThemeViaStyleElement}.
6
+ *
7
+ * @category Internal
8
+ */
9
+ export function createGlobalThemeStyleId(colorTheme) {
10
+ return [
11
+ camelCaseToKebabCase(colorTheme.prefix),
12
+ 'theme-vir-style',
13
+ ].join('-');
14
+ }
15
+ /**
16
+ * Sets all of a color theme's CSS vars in a global style element. If no override is given, the
17
+ * theme color default values are assigned.
18
+ *
19
+ * Uses `applyCssVarsViaStyleElement` from `lit-css-vars`.
20
+ *
21
+ * @category Color Theme
22
+ */
23
+ export function applyColorThemeViaStyleElement(colorTheme, themeOverride,
24
+ /**
25
+ * The context to apply the color theme to.
26
+ *
27
+ * @default document.head
28
+ */
29
+ context) {
30
+ const cssVarValues = typedObjectFromEntries(getObjectTypedValues(colorTheme.colors).flatMap((themeColor) => {
31
+ return [
32
+ buildCssVarDeclaration({
33
+ layerKey: 'background',
34
+ themeColor,
35
+ themeOverride,
36
+ }),
37
+ buildCssVarDeclaration({
38
+ layerKey: 'foreground',
39
+ themeColor,
40
+ themeOverride,
41
+ }),
42
+ ];
43
+ }));
44
+ return applyCssVarsViaStyleElement(cssVarValues, createGlobalThemeStyleId(colorTheme), context);
45
+ }
46
+ /**
47
+ * A very inefficient way of setting all of a color theme's CSS vars on a given element. If no
48
+ * override is given, the theme color default values are assigned.
49
+ *
50
+ * @deprecated Use {@link applyColorThemeViaStyleElement} instead whenever possible.
51
+ * @category Internal
52
+ */
53
+ export function applyColorTheme(
54
+ /** This should usually be the top-level `html` element. */
55
+ element, fullTheme, themeOverride) {
56
+ getObjectTypedValues(fullTheme.colors).forEach((themeColor) => {
57
+ applyIndividualThemeColorValue({
58
+ element,
59
+ layerKey: 'background',
60
+ themeColor,
61
+ themeOverride,
62
+ });
63
+ applyIndividualThemeColorValue({
64
+ element,
65
+ layerKey: 'foreground',
66
+ themeColor,
67
+ themeOverride,
68
+ });
69
+ });
70
+ }
71
+ function buildCssVarDeclaration({ layerKey, themeOverride, themeColor, }) {
72
+ const cssVarName = String(themeColor[layerKey].name);
73
+ const override = themeOverride?.overrides[cssVarName];
74
+ const value = override || themeColor[layerKey].default;
75
+ return [
76
+ cssVarName,
77
+ value,
78
+ ];
79
+ }
80
+ function applyIndividualThemeColorValue({ element, layerKey, themeOverride, themeColor, }) {
81
+ const override = themeOverride?.overrides[String(themeColor[layerKey].name)];
82
+ const value = override || themeColor[layerKey].default;
83
+ setCssVarValue({
84
+ forCssVar: themeColor[layerKey],
85
+ onElement: element,
86
+ toValue: value,
87
+ });
88
+ }
package/dist/color-theme/color-theme-code.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { check } from '@augment-vir/assert';
2
- import { getObjectTypedEntries, } from '@augment-vir/common';
2
+ import { getObjectTypedEntries, kebabCaseToCamelCase, } from '@augment-vir/common';
3
3
  import { CSSResult } from 'element-vir';
4
4
  /**
5
5
  * Convert a color theme into code to define that color theme.
@@ -57,7 +57,8 @@ function generateOverrideCode(override, paletteVarName) {
57
57
  if (colorOverrideEntries.length > 0) {
58
58
  parts.push(`${tab(2)}colorOverrides: {\n${colorOverrideEntries.join('\n')}\n${tab(2)}},`);
59
59
  }
60
- 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);`;
60
+ const camelCaseName = kebabCaseToCamelCase(override.name);
61
+ 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);`;
61
62
  }
62
63
  function tab(level) {
63
64
  return ' '.repeat(level);
package/dist/color-theme/color-theme-override.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { getObjectTypedEntries, getObjectTypedKeys, mapObjectValues } from '@augment-vir/common';
2
2
  import { createColorCssVarDefault, defineColorTheme, themeDefaultKey, } from './color-theme.js';
3
- function applyCssVarOverride({ originalTheme, layerKey, themeColor, override, overrideValues, }) {
3
+ function applyCssVarOverride({ overriddenDefault, overriddenColors, layerKey, themeColor, override, overrideValues, }) {
4
4
  const layerOverride = override?.[layerKey];
5
5
  if (!layerOverride) {
6
6
  return;
7
7
  }
8
- overrideValues[String(themeColor[layerKey].name)] = String(createColorCssVarDefault(layerKey, layerOverride, originalTheme.init.default, originalTheme.init.colors));
8
+ overrideValues[String(themeColor[layerKey].name)] = String(createColorCssVarDefault(layerKey, layerOverride, overriddenDefault, overriddenColors));
9
9
  }
10
10
  /**
11
11
  * 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
14
14
  * @category Color Theme
15
15
  */
16
16
  export function defineColorThemeOverride(originalTheme, overrideName, { defaultOverride, colorOverrides, }) {
17
+ const overriddenDefault = {
18
+ ...originalTheme.init.default,
19
+ ...defaultOverride,
20
+ };
21
+ const asThemeColorInit = mapObjectValues(originalTheme.init.colors, (colorName, colorInit) => {
22
+ const override = colorOverrides?.[colorName];
23
+ const newInit = {
24
+ ...colorInit,
25
+ ...override,
26
+ };
27
+ return newInit;
28
+ });
17
29
  const defaultValues = {};
18
30
  if (defaultOverride) {
19
31
  getObjectTypedKeys(defaultOverride).forEach((layerKey) => {
20
32
  applyCssVarOverride({
21
- originalTheme,
33
+ overriddenDefault,
34
+ overriddenColors: asThemeColorInit,
22
35
  layerKey,
23
36
  override: defaultOverride,
24
37
  themeColor: originalTheme.colors[themeDefaultKey],
@@ -34,14 +47,16 @@ export function defineColorThemeOverride(originalTheme, overrideName, { defaultO
34
47
  throw new Error(`Override color name '${colorName}' does not exist in the theme being overridden.`);
35
48
  }
36
49
  applyCssVarOverride({
37
- originalTheme,
50
+ overriddenDefault,
51
+ overriddenColors: asThemeColorInit,
38
52
  layerKey: 'foreground',
39
53
  override,
40
54
  themeColor,
41
55
  overrideValues: colorValues,
42
56
  });
43
57
  applyCssVarOverride({
44
- originalTheme,
58
+ overriddenDefault,
59
+ overriddenColors: asThemeColorInit,
45
60
  layerKey: 'background',
46
61
  override,
47
62
  themeColor,
@@ -49,18 +64,7 @@ export function defineColorThemeOverride(originalTheme, overrideName, { defaultO
49
64
  });
50
65
  });
51
66
  }
52
- const asThemeColorInit = mapObjectValues(originalTheme.init.colors, (colorName, colorInit) => {
53
- const override = colorOverrides?.[colorName];
54
- const newInit = {
55
- ...colorInit,
56
- ...override,
57
- };
58
- return newInit;
59
- });
60
- const asTheme = defineColorTheme({
61
- ...originalTheme.init.default,
62
- ...defaultOverride,
63
- }, asThemeColorInit);
67
+ const asTheme = defineColorTheme(overriddenDefault, asThemeColorInit);
64
68
  return {
65
69
  name: overrideName,
66
70
  overrides: {
package/dist/color-theme/color-theme.d.ts CHANGED
@@ -2,7 +2,7 @@ import { type RequiredAndNotNull, type Values } from '@augment-vir/common';
2
2
  import { CSSResult } from 'element-vir';
3
3
  import { type CssVarName, type SingleCssVarDefinition } from 'lit-css-vars';
4
4
  import { type RequireAtLeastOne } from 'type-fest';
5
- import { type ColorInit, type ColorInitReference, type ColorInitValue, type ColorThemeInit, type ColorThemeOverride } from './color-theme-init.js';
5
+ import { type ColorInit, type ColorInitReference, type ColorInitValue, type ColorThemeInit } from './color-theme-init.js';
6
6
  /**
7
7
  * Same as {@link ColorInit} but without references.
8
8
  *
@@ -40,6 +40,7 @@ export type ColorTheme<Init extends ColorThemeInit = ColorThemeInit> = {
40
40
  colors: Init;
41
41
  default: Readonly<DefaultColorThemeInit>;
42
42
  };
43
+ prefix: string;
43
44
  };
44
45
  /**
45
46
  * All colors within a {@link ColorTheme}.
@@ -74,15 +75,6 @@ export type DefaultColorThemeInit = RequiredAndNotNull<NoRefColorInit> & {
74
75
  * @category Internal
75
76
  */
76
77
  export declare const themeDefaultKey = "theme-default";
77
- /**
78
- * Set all color theme CSS vars on the given element. If no override is given, the theme color
79
- * default values are assigned.
80
- *
81
- * @category Color Theme
82
- */
83
- export declare function applyColorTheme<const Theme extends ColorTheme>(
84
- /** This should usually be the top-level `html` element. */
85
- element: HTMLElement, fullTheme: Theme, themeOverride?: ColorThemeOverride | undefined): void;
86
78
  /**
87
79
  * Define a color theme.
88
80
  *
package/dist/color-theme/color-theme.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { assert, check } from '@augment-vir/assert';
2
- import { getObjectTypedEntries, getObjectTypedValues, log, } from '@augment-vir/common';
2
+ import { getObjectTypedEntries, log, } from '@augment-vir/common';
3
3
  import { CSSResult } from 'element-vir';
4
- import { defineCssVars, setCssVarValue, } from 'lit-css-vars';
4
+ import { defineCssVars, } from 'lit-css-vars';
5
5
  /** @category Internal */
6
6
  export function noRefColorInitToString(init) {
7
7
  if (check.isPrimitive(init) || init instanceof CSSResult) {
@@ -57,39 +57,6 @@ export function createColorCssVarDefault(fromName, init, defaultInit, colorsInit
57
57
  * @category Internal
58
58
  */
59
59
  export const themeDefaultKey = 'theme-default';
60
- /**
61
- * Set all color theme CSS vars on the given element. If no override is given, the theme color
62
- * default values are assigned.
63
- *
64
- * @category Color Theme
65
- */
66
- export function applyColorTheme(
67
- /** This should usually be the top-level `html` element. */
68
- element, fullTheme, themeOverride) {
69
- getObjectTypedValues(fullTheme.colors).forEach((themeColor) => {
70
- applyIndividualThemeColorValue({
71
- element,
72
- layerKey: 'background',
73
- themeColor,
74
- themeOverride,
75
- });
76
- applyIndividualThemeColorValue({
77
- element,
78
- layerKey: 'foreground',
79
- themeColor,
80
- themeOverride,
81
- });
82
- });
83
- }
84
- function applyIndividualThemeColorValue({ element, layerKey, themeOverride, themeColor, }) {
85
- const override = themeOverride?.overrides[String(themeColor[layerKey].name)];
86
- const value = override || themeColor[layerKey].default;
87
- setCssVarValue({
88
- forCssVar: themeColor[layerKey],
89
- onElement: element,
90
- toValue: value,
91
- });
92
- }
93
60
  /**
94
61
  * Define a color theme.
95
62
  *
@@ -193,6 +160,7 @@ export function defineColorTheme(defaultInit, allColorsInit) {
193
160
  colors: allColorsInit,
194
161
  default: defaultInit,
195
162
  },
163
+ prefix: defaultInit.prefix,
196
164
  };
197
165
  }
198
166
  catch (error) {
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export * from './color-theme/apply-color-theme.js';
1
2
  export * from './color-theme/build-color-theme.js';
2
3
  export * from './color-theme/color-palette-book-pages.js';
3
4
  export * from './color-theme/color-theme-book-pages.js';
package/dist/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ export * from './color-theme/apply-color-theme.js';
1
2
  export * from './color-theme/build-color-theme.js';
2
3
  export * from './color-theme/color-palette-book-pages.js';
3
4
  export * from './color-theme/color-theme-book-pages.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "theme-vir",
3
- "version": "28.19.0",
3
+ "version": "28.21.0",
4
4
  "description": "Create an entire web theme.",
5
5
  "keywords": [
6
6
  "design",
@@ -36,38 +36,38 @@
36
36
  "build": "npm run docs",
37
37
  "compile": "virmator compile",
38
38
  "docs": "virmator docs",
39
- "start": "virmator frontend",
39
+ "start": "npm run compile && virmator frontend",
40
40
  "test": "virmator test web",
41
41
  "test:coverage": "npm run test coverage",
42
42
  "test:docs": "virmator docs check",
43
43
  "test:update": "virmator test web update"
44
44
  },
45
45
  "dependencies": {
46
- "@augment-vir/assert": "^31.59.0",
47
- "@augment-vir/common": "^31.59.0",
46
+ "@augment-vir/assert": "^31.59.3",
47
+ "@augment-vir/common": "^31.59.3",
48
48
  "@electrovir/color": "^1.7.8",
49
49
  "apca-w3": "^0.1.9",
50
- "lit-css-vars": "^3.4.0",
51
- "type-fest": "^5.4.1"
50
+ "lit-css-vars": "^3.5.0",
51
+ "type-fest": "^5.4.4"
52
52
  },
53
53
  "devDependencies": {
54
- "@augment-vir/test": "^31.59.0",
54
+ "@augment-vir/test": "^31.59.3",
55
55
  "@types/apca-w3": "^0.1.3",
56
- "@web/dev-server-esbuild": "^1.0.4",
56
+ "@web/dev-server-esbuild": "^1.0.5",
57
57
  "@web/test-runner": "^0.20.2",
58
58
  "@web/test-runner-commands": "^0.9.0",
59
59
  "@web/test-runner-playwright": "^0.11.1",
60
60
  "@web/test-runner-visual-regression": "^0.10.0",
61
61
  "element-book": "^26.16.0",
62
62
  "element-vir": "^26.14.3",
63
- "esbuild": "^0.27.2",
63
+ "esbuild": "^0.27.3",
64
64
  "istanbul-smart-text-reporter": "^1.1.5",
65
65
  "markdown-code-example-inserter": "^3.0.3",
66
66
  "typedoc": "^0.28.16",
67
67
  "typescript": "5.9.3",
68
- "vira": "^29.2.1",
68
+ "vira": "^29.3.1",
69
69
  "vite": "^7.3.1",
70
- "vite-tsconfig-paths": "^6.0.5"
70
+ "vite-tsconfig-paths": "^6.1.0"
71
71
  },
72
72
  "peerDependencies": {
73
73
  "element-book": ">=17",