theme-vir 25.7.1 → 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.
- package/dist/color/color-theme.js +91 -85
- package/package.json +3 -3
|
@@ -1,5 +1,5 @@
|
|
|
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.
|
|
@@ -42,92 +42,98 @@ export const themeDefaultKey = 'theme-default';
|
|
|
42
42
|
* @category Color Theme
|
|
43
43
|
*/
|
|
44
44
|
export function defineColorTheme(defaultInit, allColorsInit) {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
const
|
|
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
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
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,
|
|
98
112
|
};
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
name: colorName,
|
|
113
|
+
const themeDefaultInverseColors = {
|
|
114
|
+
...themeDefaultColors,
|
|
115
|
+
foreground: defaultColors['default-inverse-fg'],
|
|
116
|
+
background: defaultColors['default-inverse-bg'],
|
|
104
117
|
};
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
...inverseColors,
|
|
125
|
-
},
|
|
126
|
-
init: {
|
|
127
|
-
colors: allColorsInit,
|
|
128
|
-
default: defaultInit,
|
|
129
|
-
},
|
|
130
|
-
};
|
|
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
|
+
}
|
|
131
137
|
}
|
|
132
138
|
function createCssVarNames(colorName) {
|
|
133
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",
|