theme-vir 25.7.0 → 25.7.2
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type CssVarName } from 'lit-css-vars';
|
|
2
2
|
import { type RequireAtLeastOne } from 'type-fest';
|
|
3
|
-
import { type ColorInit, type ColorTheme, type ColorThemeInit } from './color-theme.js';
|
|
3
|
+
import { type ColorInit, type ColorTheme, type ColorThemeInit, type NoRefColorInit } from './color-theme.js';
|
|
4
4
|
/**
|
|
5
5
|
* Input for {@link defineColorThemeOverride} color overrides.
|
|
6
6
|
*
|
|
@@ -26,11 +26,11 @@ export type ColorThemeOverride<Init extends ColorThemeInit = ColorThemeInit> = {
|
|
|
26
26
|
*
|
|
27
27
|
* @category Color Theme
|
|
28
28
|
*/
|
|
29
|
-
export declare function defineColorThemeOverride<const Init extends ColorThemeInit>(originalTheme: ColorTheme<Init>, overrideName: string, { defaultOverride, colorOverrides, }: RequireAtLeastOne<{
|
|
29
|
+
export declare function defineColorThemeOverride<const Init extends ColorThemeInit>(originalTheme: ColorTheme<Init>, overrideName: string, { defaultOverride, colorOverrides, }: Readonly<RequireAtLeastOne<{
|
|
30
30
|
/** Override the default foreground and/or background colors. */
|
|
31
|
-
defaultOverride:
|
|
32
|
-
colorOverrides: ColorThemeOverrideInit<ColorTheme<Init
|
|
33
|
-
}
|
|
31
|
+
defaultOverride: Readonly<NoRefColorInit>;
|
|
32
|
+
colorOverrides: Readonly<ColorThemeOverrideInit<ColorTheme<Init>>>;
|
|
33
|
+
}>>): ColorThemeOverride<Init>;
|
|
34
34
|
/**
|
|
35
35
|
* Set all color theme CSS vars on the given element. If no override is given, the theme color
|
|
36
36
|
* default values are assigned.
|
|
@@ -6,7 +6,7 @@ function applyCssVarOverride({ originalTheme, layerKey, themeColor, override, ov
|
|
|
6
6
|
if (!layerOverride) {
|
|
7
7
|
return;
|
|
8
8
|
}
|
|
9
|
-
overrideValues[String(themeColor[layerKey].name)] = String(createColorCssVarDefault(layerKey, layerOverride, originalTheme));
|
|
9
|
+
overrideValues[String(themeColor[layerKey].name)] = String(createColorCssVarDefault(layerKey, layerOverride, originalTheme.init.default, originalTheme.init.colors));
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
12
|
* Define a color theme override. Use this to define multiple theme variations, like light mode vs
|
|
@@ -51,10 +51,10 @@ export function defineColorThemeOverride(originalTheme, overrideName, { defaultO
|
|
|
51
51
|
});
|
|
52
52
|
}
|
|
53
53
|
const asTheme = defineColorTheme({
|
|
54
|
-
...originalTheme.
|
|
54
|
+
...originalTheme.init.default,
|
|
55
55
|
...defaultOverride,
|
|
56
56
|
}, {
|
|
57
|
-
...originalTheme.init,
|
|
57
|
+
...originalTheme.init.colors,
|
|
58
58
|
...colorOverrides,
|
|
59
59
|
});
|
|
60
60
|
return {
|
|
@@ -26,6 +26,15 @@ export type ColorInit = RequireAtLeastOne<{
|
|
|
26
26
|
foreground: ColorInitValue;
|
|
27
27
|
background: ColorInitValue;
|
|
28
28
|
}>;
|
|
29
|
+
/**
|
|
30
|
+
* Same as {@link ColorInit} but without references.
|
|
31
|
+
*
|
|
32
|
+
* @category Internal
|
|
33
|
+
*/
|
|
34
|
+
export type NoRefColorInit = RequireAtLeastOne<{
|
|
35
|
+
foreground: Exclude<ColorInitValue, ColorInitReference>;
|
|
36
|
+
background: Exclude<ColorInitValue, ColorInitReference>;
|
|
37
|
+
}>;
|
|
29
38
|
/**
|
|
30
39
|
* A defined individual color from a color theme.
|
|
31
40
|
*
|
|
@@ -56,7 +65,10 @@ export type ColorTheme<Init extends ColorThemeInit = ColorThemeInit> = {
|
|
|
56
65
|
colors: AllColorThemeColors<Init>;
|
|
57
66
|
inverse: AllColorThemeColors<Init>;
|
|
58
67
|
/** The original init object for this theme. */
|
|
59
|
-
init:
|
|
68
|
+
init: {
|
|
69
|
+
colors: Init;
|
|
70
|
+
default: RequiredAndNotNull<NoRefColorInit>;
|
|
71
|
+
};
|
|
60
72
|
};
|
|
61
73
|
/**
|
|
62
74
|
* All colors within a {@link ColorTheme}.
|
|
@@ -66,14 +78,14 @@ export type ColorTheme<Init extends ColorThemeInit = ColorThemeInit> = {
|
|
|
66
78
|
export type AllColorThemeColors<Init extends ColorThemeInit = ColorThemeInit> = {
|
|
67
79
|
[ColorName in keyof Init as ColorName extends CssVarName ? ColorName : never]: ColorName extends CssVarName ? Init[ColorName] extends ColorInit ? ColorThemeColor<Init[ColorName], ColorName> : never : never;
|
|
68
80
|
} & {
|
|
69
|
-
[themeDefaultKey]: ColorThemeColor<RequiredAndNotNull<
|
|
81
|
+
[themeDefaultKey]: ColorThemeColor<RequiredAndNotNull<NoRefColorInit>, typeof themeDefaultKey>;
|
|
70
82
|
};
|
|
71
83
|
/**
|
|
72
84
|
* Handles a color init value.
|
|
73
85
|
*
|
|
74
86
|
* @category Internal
|
|
75
87
|
*/
|
|
76
|
-
export declare function createColorCssVarDefault(fromName: string, init: ColorInitValue,
|
|
88
|
+
export declare function createColorCssVarDefault(fromName: string, init: ColorInitValue, defaultInit: RequiredAndNotNull<NoRefColorInit>, colorsInit: ColorThemeInit): Exclude<ColorInitValue, ColorInitReference>;
|
|
77
89
|
/**
|
|
78
90
|
* Default foreground/background color theme used in {@link ColorTheme}. Do not define a theme color
|
|
79
91
|
* with this name!
|
|
@@ -86,4 +98,4 @@ export declare const themeDefaultKey = "theme-default";
|
|
|
86
98
|
*
|
|
87
99
|
* @category Color Theme
|
|
88
100
|
*/
|
|
89
|
-
export declare function defineColorTheme<const Init extends ColorThemeInit>(defaultInit: RequiredAndNotNull<
|
|
101
|
+
export declare function defineColorTheme<const Init extends ColorThemeInit>(defaultInit: RequiredAndNotNull<NoRefColorInit>, allColorsInit: Init): ColorTheme<Init>;
|
|
@@ -1,23 +1,29 @@
|
|
|
1
1
|
import { assert, check } from '@augment-vir/assert';
|
|
2
|
-
import { getObjectTypedEntries } from '@augment-vir/common';
|
|
2
|
+
import { getObjectTypedEntries, log } from '@augment-vir/common';
|
|
3
3
|
import { defineCssVars, } from 'lit-css-vars';
|
|
4
4
|
/**
|
|
5
5
|
* Handles a color init value.
|
|
6
6
|
*
|
|
7
7
|
* @category Internal
|
|
8
8
|
*/
|
|
9
|
-
export function createColorCssVarDefault(fromName, init,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
export function createColorCssVarDefault(fromName, init, defaultInit, colorsInit) {
|
|
10
|
+
const referenceKey = check.hasKey(init, 'refBackground')
|
|
11
|
+
? 'refBackground'
|
|
12
|
+
: check.hasKey(init, 'refForeground')
|
|
13
|
+
? 'refForeground'
|
|
14
|
+
: undefined;
|
|
15
|
+
const reference = referenceKey && check.hasKey(init, referenceKey) ? init[referenceKey] : undefined;
|
|
16
|
+
if (reference) {
|
|
17
|
+
const layerKey = referenceKey === 'refBackground' ? 'background' : 'foreground';
|
|
18
|
+
const referenced = colorsInit[reference];
|
|
19
|
+
if (!referenced) {
|
|
20
|
+
throw new Error(`Color theme ${referenceKey} reference '${reference}' does not exist. (Referenced from '${fromName}'.)`);
|
|
13
21
|
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
return `var(--${init.refForeground}-fg)`;
|
|
22
|
+
const colorValue = referenced[layerKey] ||
|
|
23
|
+
(layerKey === 'foreground'
|
|
24
|
+
? createColorCssVarDefault('default-fg', defaultInit.foreground, defaultInit, colorsInit)
|
|
25
|
+
: createColorCssVarDefault('default-bg', defaultInit.background, defaultInit, colorsInit));
|
|
26
|
+
return `var(--${reference}-${layerKey === 'foreground' ? 'fg' : 'bg'}, ${createColorCssVarDefault(reference, colorValue, defaultInit, colorsInit)})`;
|
|
21
27
|
}
|
|
22
28
|
else {
|
|
23
29
|
return init;
|
|
@@ -36,89 +42,98 @@ export const themeDefaultKey = 'theme-default';
|
|
|
36
42
|
* @category Color Theme
|
|
37
43
|
*/
|
|
38
44
|
export function defineColorTheme(defaultInit, allColorsInit) {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
45
|
+
try {
|
|
46
|
+
if (themeDefaultKey in allColorsInit) {
|
|
47
|
+
throw new Error(`Cannot define theme color by name '${themeDefaultKey}', it is used internally.`);
|
|
48
|
+
}
|
|
49
|
+
const defaultColors = defineCssVars({
|
|
50
|
+
'default-fg': createColorCssVarDefault('default-fg', defaultInit.foreground, defaultInit, allColorsInit),
|
|
51
|
+
'default-bg': createColorCssVarDefault('default-bg', defaultInit.background, defaultInit, allColorsInit),
|
|
52
|
+
'default-inverse-fg': createColorCssVarDefault('default-inverse-fg', defaultInit.background, defaultInit, allColorsInit),
|
|
53
|
+
'default-inverse-bg': createColorCssVarDefault('default-inverse-bg', defaultInit.foreground, defaultInit, allColorsInit),
|
|
54
|
+
});
|
|
55
|
+
const cssVarsSetup = getObjectTypedEntries(allColorsInit).reduce((accum, [colorName, colorInit,]) => {
|
|
56
|
+
const names = createCssVarNames(colorName);
|
|
57
|
+
accum[names.foreground] = colorInit.foreground
|
|
58
|
+
? createColorCssVarDefault([
|
|
59
|
+
colorName,
|
|
60
|
+
'foreground',
|
|
61
|
+
].join(' '), colorInit.foreground, defaultInit, allColorsInit)
|
|
62
|
+
: `var(${defaultColors['default-fg'].name}, ${defaultColors['default-fg'].default})`;
|
|
63
|
+
accum[names.background] = colorInit.background
|
|
64
|
+
? createColorCssVarDefault([
|
|
65
|
+
colorName,
|
|
66
|
+
'background',
|
|
67
|
+
].join(' '), colorInit.background, defaultInit, allColorsInit)
|
|
68
|
+
: `var(${defaultColors['default-bg'].name}, ${defaultColors['default-bg'].default})`;
|
|
69
|
+
accum[names.foregroundInverse] =
|
|
70
|
+
`var(--${names.background}, ${accum[names.background]})`;
|
|
71
|
+
accum[names.backgroundInverse] =
|
|
72
|
+
`var(--${names.foreground}, ${accum[names.foreground]})`;
|
|
73
|
+
return accum;
|
|
74
|
+
}, {});
|
|
75
|
+
/**
|
|
76
|
+
* This has multiple `as` casts because `defineCssVars` complains that `cssVarsSetup` is too
|
|
77
|
+
* generic. That is indeed true, but in this use case we do not care because the resulting
|
|
78
|
+
* `cssVars` object is not directly exposed.
|
|
79
|
+
*/
|
|
80
|
+
const cssVars = defineCssVars(cssVarsSetup);
|
|
81
|
+
const colors = {};
|
|
82
|
+
const inverseColors = {};
|
|
83
|
+
getObjectTypedEntries(allColorsInit).forEach(([colorName, colorInit,]) => {
|
|
84
|
+
assert.isString(colorName);
|
|
85
|
+
const names = createCssVarNames(colorName);
|
|
86
|
+
const foreground = cssVars[names.foreground];
|
|
87
|
+
const background = cssVars[names.background];
|
|
88
|
+
const foregroundInverse = cssVars[names.foregroundInverse];
|
|
89
|
+
const backgroundInverse = cssVars[names.backgroundInverse];
|
|
90
|
+
assert.isDefined(foreground);
|
|
91
|
+
assert.isDefined(background);
|
|
92
|
+
assert.isDefined(foregroundInverse);
|
|
93
|
+
assert.isDefined(backgroundInverse);
|
|
94
|
+
colors[colorName] = {
|
|
95
|
+
foreground,
|
|
96
|
+
background,
|
|
97
|
+
init: colorInit,
|
|
98
|
+
name: colorName,
|
|
99
|
+
};
|
|
100
|
+
inverseColors[colorName] = {
|
|
101
|
+
foreground: foregroundInverse,
|
|
102
|
+
background: backgroundInverse,
|
|
103
|
+
init: colorInit,
|
|
104
|
+
name: colorName,
|
|
105
|
+
};
|
|
106
|
+
});
|
|
107
|
+
const themeDefaultColors = {
|
|
108
|
+
foreground: defaultColors['default-fg'],
|
|
109
|
+
background: defaultColors['default-bg'],
|
|
110
|
+
init: defaultInit,
|
|
111
|
+
name: themeDefaultKey,
|
|
92
112
|
};
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
name: colorName,
|
|
113
|
+
const themeDefaultInverseColors = {
|
|
114
|
+
...themeDefaultColors,
|
|
115
|
+
foreground: defaultColors['default-inverse-fg'],
|
|
116
|
+
background: defaultColors['default-inverse-bg'],
|
|
98
117
|
};
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
...inverseColors,
|
|
119
|
-
},
|
|
120
|
-
init: allColorsInit,
|
|
121
|
-
};
|
|
118
|
+
return {
|
|
119
|
+
colors: {
|
|
120
|
+
[themeDefaultKey]: themeDefaultColors,
|
|
121
|
+
...colors,
|
|
122
|
+
},
|
|
123
|
+
inverse: {
|
|
124
|
+
[themeDefaultKey]: themeDefaultInverseColors,
|
|
125
|
+
...inverseColors,
|
|
126
|
+
},
|
|
127
|
+
init: {
|
|
128
|
+
colors: allColorsInit,
|
|
129
|
+
default: defaultInit,
|
|
130
|
+
},
|
|
131
|
+
};
|
|
132
|
+
}
|
|
133
|
+
catch (error) {
|
|
134
|
+
globalThis.setTimeout(() => log.error(error));
|
|
135
|
+
throw error;
|
|
136
|
+
}
|
|
122
137
|
}
|
|
123
138
|
function createCssVarNames(colorName) {
|
|
124
139
|
return {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "theme-vir",
|
|
3
|
-
"version": "25.7.
|
|
3
|
+
"version": "25.7.2",
|
|
4
4
|
"description": "Create an entire web theme.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design",
|
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
"@web/test-runner-commands": "^0.9.0",
|
|
56
56
|
"@web/test-runner-playwright": "^0.11.0",
|
|
57
57
|
"@web/test-runner-visual-regression": "^0.10.0",
|
|
58
|
-
"element-book": "^25.7.
|
|
59
|
-
"element-vir": "^25.7.
|
|
58
|
+
"element-book": "^25.7.2",
|
|
59
|
+
"element-vir": "^25.7.2",
|
|
60
60
|
"esbuild": "^0.25.4",
|
|
61
61
|
"istanbul-smart-text-reporter": "^1.1.5",
|
|
62
62
|
"markdown-code-example-inserter": "^3.0.3",
|