theme-vir 28.20.0 → 28.21.1
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.
- package/README.md +7 -1
- package/dist/color-theme/apply-color-theme.d.ts +12 -9
- package/dist/color-theme/apply-color-theme.js +24 -30
- package/dist/color-theme/build-color-theme.d.ts +17 -16
- package/dist/color-theme/build-color-theme.js +45 -1
- package/dist/color-theme/color-theme-code.js +3 -2
- package/package.json +10 -10
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).
|
|
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
|
+
```
|
|
@@ -1,29 +1,32 @@
|
|
|
1
1
|
import { type ColorThemeOverride } from './color-theme-init.js';
|
|
2
2
|
import { type ColorTheme } from './color-theme.js';
|
|
3
3
|
/**
|
|
4
|
-
* Create the `<style>` id used to apply color themes globally by
|
|
4
|
+
* Create the `<style>` id used to apply color themes globally by
|
|
5
|
+
* {@link applyColorThemeViaStyleElement}.
|
|
5
6
|
*
|
|
6
7
|
* @category Internal
|
|
7
8
|
*/
|
|
8
9
|
export declare function createGlobalThemeStyleId(colorTheme: Readonly<ColorTheme>): string;
|
|
9
|
-
/**
|
|
10
|
-
* Create the global `<style>` element used by {@link applyGlobalColorTheme} to apply a color theme.
|
|
11
|
-
*
|
|
12
|
-
* @category Internal
|
|
13
|
-
*/
|
|
14
|
-
export declare function createGlobalThemeStyleElement(colorTheme: Readonly<ColorTheme>, context?: Element): HTMLStyleElement;
|
|
15
10
|
/**
|
|
16
11
|
* Sets all of a color theme's CSS vars in a global style element. If no override is given, the
|
|
17
12
|
* theme color default values are assigned.
|
|
18
13
|
*
|
|
14
|
+
* Uses `applyCssVarsViaStyleElement` from `lit-css-vars`.
|
|
15
|
+
*
|
|
19
16
|
* @category Color Theme
|
|
20
17
|
*/
|
|
21
|
-
export declare function
|
|
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;
|
|
22
25
|
/**
|
|
23
26
|
* A very inefficient way of setting all of a color theme's CSS vars on a given element. If no
|
|
24
27
|
* override is given, the theme color default values are assigned.
|
|
25
28
|
*
|
|
26
|
-
* @deprecated Use {@link
|
|
29
|
+
* @deprecated Use {@link applyColorThemeViaStyleElement} instead whenever possible.
|
|
27
30
|
* @category Internal
|
|
28
31
|
*/
|
|
29
32
|
export declare function applyColorTheme(
|
|
@@ -1,43 +1,33 @@
|
|
|
1
|
-
import { camelCaseToKebabCase, getObjectTypedValues } from '@augment-vir/common';
|
|
2
|
-
import { setCssVarValue } from 'lit-css-vars';
|
|
1
|
+
import { camelCaseToKebabCase, getObjectTypedValues, typedObjectFromEntries, } from '@augment-vir/common';
|
|
2
|
+
import { applyCssVarsViaStyleElement, setCssVarValue } from 'lit-css-vars';
|
|
3
3
|
/**
|
|
4
|
-
* Create the `<style>` id used to apply color themes globally by
|
|
4
|
+
* Create the `<style>` id used to apply color themes globally by
|
|
5
|
+
* {@link applyColorThemeViaStyleElement}.
|
|
5
6
|
*
|
|
6
7
|
* @category Internal
|
|
7
8
|
*/
|
|
8
9
|
export function createGlobalThemeStyleId(colorTheme) {
|
|
9
10
|
return [
|
|
10
11
|
camelCaseToKebabCase(colorTheme.prefix),
|
|
11
|
-
'
|
|
12
|
+
'theme-vir-style',
|
|
12
13
|
].join('-');
|
|
13
14
|
}
|
|
14
|
-
/**
|
|
15
|
-
* Create the global `<style>` element used by {@link applyGlobalColorTheme} to apply a color theme.
|
|
16
|
-
*
|
|
17
|
-
* @category Internal
|
|
18
|
-
*/
|
|
19
|
-
export function createGlobalThemeStyleElement(colorTheme, context = document.head) {
|
|
20
|
-
const styleId = createGlobalThemeStyleId(colorTheme);
|
|
21
|
-
const existingElement = context.querySelector(`style#${styleId}`);
|
|
22
|
-
if (existingElement instanceof HTMLStyleElement) {
|
|
23
|
-
return existingElement;
|
|
24
|
-
}
|
|
25
|
-
else {
|
|
26
|
-
const newStyleElement = globalThis.document.createElement('style');
|
|
27
|
-
newStyleElement.id = styleId;
|
|
28
|
-
context.append(newStyleElement);
|
|
29
|
-
return newStyleElement;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
15
|
/**
|
|
33
16
|
* Sets all of a color theme's CSS vars in a global style element. If no override is given, the
|
|
34
17
|
* theme color default values are assigned.
|
|
35
18
|
*
|
|
19
|
+
* Uses `applyCssVarsViaStyleElement` from `lit-css-vars`.
|
|
20
|
+
*
|
|
36
21
|
* @category Color Theme
|
|
37
22
|
*/
|
|
38
|
-
export function
|
|
39
|
-
|
|
40
|
-
|
|
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) => {
|
|
41
31
|
return [
|
|
42
32
|
buildCssVarDeclaration({
|
|
43
33
|
layerKey: 'background',
|
|
@@ -50,14 +40,14 @@ export function applyGlobalColorTheme(fullTheme, themeOverride) {
|
|
|
50
40
|
themeOverride,
|
|
51
41
|
}),
|
|
52
42
|
];
|
|
53
|
-
});
|
|
54
|
-
|
|
43
|
+
}));
|
|
44
|
+
return applyCssVarsViaStyleElement(cssVarValues, createGlobalThemeStyleId(colorTheme), context);
|
|
55
45
|
}
|
|
56
46
|
/**
|
|
57
47
|
* A very inefficient way of setting all of a color theme's CSS vars on a given element. If no
|
|
58
48
|
* override is given, the theme color default values are assigned.
|
|
59
49
|
*
|
|
60
|
-
* @deprecated Use {@link
|
|
50
|
+
* @deprecated Use {@link applyColorThemeViaStyleElement} instead whenever possible.
|
|
61
51
|
* @category Internal
|
|
62
52
|
*/
|
|
63
53
|
export function applyColorTheme(
|
|
@@ -79,9 +69,13 @@ element, fullTheme, themeOverride) {
|
|
|
79
69
|
});
|
|
80
70
|
}
|
|
81
71
|
function buildCssVarDeclaration({ layerKey, themeOverride, themeColor, }) {
|
|
82
|
-
const
|
|
72
|
+
const cssVarName = String(themeColor[layerKey].name);
|
|
73
|
+
const override = themeOverride?.overrides[cssVarName];
|
|
83
74
|
const value = override || themeColor[layerKey].default;
|
|
84
|
-
return
|
|
75
|
+
return [
|
|
76
|
+
cssVarName,
|
|
77
|
+
value,
|
|
78
|
+
];
|
|
85
79
|
}
|
|
86
80
|
function applyIndividualThemeColorValue({ element, layerKey, themeOverride, themeColor, }) {
|
|
87
81
|
const override = themeOverride?.overrides[String(themeColor[layerKey].name)];
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type PartialWithUndefined, type RequiredAndNotNull } from '@augment-vir/common';
|
|
2
2
|
import { ContrastLevelName } from '@electrovir/color';
|
|
3
3
|
import { type CssVarDefinitions, type SingleCssVarDefinition } from 'lit-css-vars';
|
|
4
|
+
import { type ColorInitValue } from './color-theme-init.js';
|
|
4
5
|
import { type NoRefColorInit } from './color-theme.js';
|
|
5
6
|
/** @category Internal */
|
|
6
7
|
export type ColorPaletteVars = CssVarDefinitions<Record<`${string}-${string}-${number}`, any>>;
|
|
@@ -82,29 +83,29 @@ export type BuildLowLevelColorThemeOptions = PartialWithUndefined<{
|
|
|
82
83
|
*/
|
|
83
84
|
export declare function buildColorTheme(colorPalette: Readonly<ColorPaletteVars>, { omittedColorValues, crossContrastLevels, prefix, }?: Readonly<BuildLowLevelColorThemeOptions>): {
|
|
84
85
|
defaultLight: import("./color-theme.js").ColorTheme<Record<`${Lowercase<string>}-${Lowercase<string>}`, ((Required<Pick<{
|
|
85
|
-
foreground:
|
|
86
|
-
background:
|
|
86
|
+
foreground: ColorInitValue;
|
|
87
|
+
background: ColorInitValue;
|
|
87
88
|
}, "foreground">> & Partial<Pick<{
|
|
88
|
-
foreground:
|
|
89
|
-
background:
|
|
89
|
+
foreground: ColorInitValue;
|
|
90
|
+
background: ColorInitValue;
|
|
90
91
|
}, "background">>) | (Required<Pick<{
|
|
91
|
-
foreground:
|
|
92
|
-
background:
|
|
92
|
+
foreground: ColorInitValue;
|
|
93
|
+
background: ColorInitValue;
|
|
93
94
|
}, "background">> & Partial<Pick<{
|
|
94
|
-
foreground:
|
|
95
|
-
background:
|
|
95
|
+
foreground: ColorInitValue;
|
|
96
|
+
background: ColorInitValue;
|
|
96
97
|
}, "foreground">>)) & {}>>;
|
|
97
98
|
darkOverride: import("./color-theme-init.js").ColorThemeOverride<Record<`${Lowercase<string>}-${Lowercase<string>}`, ((Required<Pick<{
|
|
98
|
-
foreground:
|
|
99
|
-
background:
|
|
99
|
+
foreground: ColorInitValue;
|
|
100
|
+
background: ColorInitValue;
|
|
100
101
|
}, "foreground">> & Partial<Pick<{
|
|
101
|
-
foreground:
|
|
102
|
-
background:
|
|
102
|
+
foreground: ColorInitValue;
|
|
103
|
+
background: ColorInitValue;
|
|
103
104
|
}, "background">>) | (Required<Pick<{
|
|
104
|
-
foreground:
|
|
105
|
-
background:
|
|
105
|
+
foreground: ColorInitValue;
|
|
106
|
+
background: ColorInitValue;
|
|
106
107
|
}, "background">> & Partial<Pick<{
|
|
107
|
-
foreground:
|
|
108
|
-
background:
|
|
108
|
+
foreground: ColorInitValue;
|
|
109
|
+
background: ColorInitValue;
|
|
109
110
|
}, "foreground">>)) & {}>>;
|
|
110
111
|
};
|
|
@@ -184,6 +184,44 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
|
|
|
184
184
|
background: colorStrings,
|
|
185
185
|
}
|
|
186
186
|
: undefined;
|
|
187
|
+
/** Tracks which default reference each string value in the comparison maps to. */
|
|
188
|
+
const referencesToDefault = cross.crossWith === 'color-in-foreground-light-mode'
|
|
189
|
+
? {
|
|
190
|
+
background: {
|
|
191
|
+
refDefaultBackground: true,
|
|
192
|
+
},
|
|
193
|
+
}
|
|
194
|
+
: cross.crossWith === 'color-in-foreground-dark-mode'
|
|
195
|
+
? {
|
|
196
|
+
background: {
|
|
197
|
+
refDefaultBackground: true,
|
|
198
|
+
},
|
|
199
|
+
}
|
|
200
|
+
: cross.crossWith === 'color-behind-bg-light-mode'
|
|
201
|
+
? {
|
|
202
|
+
foreground: {
|
|
203
|
+
refDefaultBackground: true,
|
|
204
|
+
},
|
|
205
|
+
}
|
|
206
|
+
: cross.crossWith === 'color-behind-bg-dark-mode'
|
|
207
|
+
? {
|
|
208
|
+
foreground: {
|
|
209
|
+
refDefaultBackground: true,
|
|
210
|
+
},
|
|
211
|
+
}
|
|
212
|
+
: cross.crossWith === 'color-behind-fg-light-mode'
|
|
213
|
+
? {
|
|
214
|
+
foreground: {
|
|
215
|
+
refDefaultForeground: true,
|
|
216
|
+
},
|
|
217
|
+
}
|
|
218
|
+
: cross.crossWith === 'color-behind-fg-dark-mode'
|
|
219
|
+
? {
|
|
220
|
+
foreground: {
|
|
221
|
+
refDefaultForeground: true,
|
|
222
|
+
},
|
|
223
|
+
}
|
|
224
|
+
: undefined;
|
|
187
225
|
if (!comparison) {
|
|
188
226
|
throw new Error(`Forgot to handle crossWith: '${cross.crossWith}'`);
|
|
189
227
|
}
|
|
@@ -208,7 +246,13 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
|
|
|
208
246
|
const selfColor = cross.crossWith === 'color-on-self-light-mode'
|
|
209
247
|
? lightestSelf
|
|
210
248
|
: darkestSelf;
|
|
211
|
-
return selfColor?.definition.value
|
|
249
|
+
return selfColor?.definition.value || value;
|
|
250
|
+
}
|
|
251
|
+
const referenceToDefault = referencesToDefault &&
|
|
252
|
+
check.isKeyOf(key, referencesToDefault) &&
|
|
253
|
+
referencesToDefault[key];
|
|
254
|
+
if (referenceToDefault) {
|
|
255
|
+
return referenceToDefault;
|
|
212
256
|
}
|
|
213
257
|
return value;
|
|
214
258
|
}
|
|
@@ -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
|
-
|
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "theme-vir",
|
|
3
|
-
"version": "28.
|
|
3
|
+
"version": "28.21.1",
|
|
4
4
|
"description": "Create an entire web theme.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design",
|
|
@@ -36,24 +36,24 @@
|
|
|
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.
|
|
47
|
-
"@augment-vir/common": "^31.59.
|
|
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.
|
|
51
|
-
"type-fest": "^5.4.
|
|
50
|
+
"lit-css-vars": "^3.5.0",
|
|
51
|
+
"type-fest": "^5.4.4"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"@augment-vir/test": "^31.59.
|
|
54
|
+
"@augment-vir/test": "^31.59.3",
|
|
55
55
|
"@types/apca-w3": "^0.1.3",
|
|
56
|
-
"@web/dev-server-esbuild": "^1.0.
|
|
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",
|
|
@@ -65,9 +65,9 @@
|
|
|
65
65
|
"markdown-code-example-inserter": "^3.0.3",
|
|
66
66
|
"typedoc": "^0.28.16",
|
|
67
67
|
"typescript": "5.9.3",
|
|
68
|
-
"vira": "^29.3.
|
|
68
|
+
"vira": "^29.3.1",
|
|
69
69
|
"vite": "^7.3.1",
|
|
70
|
-
"vite-tsconfig-paths": "^6.0
|
|
70
|
+
"vite-tsconfig-paths": "^6.1.0"
|
|
71
71
|
},
|
|
72
72
|
"peerDependencies": {
|
|
73
73
|
"element-book": ">=17",
|