theme-vir 28.21.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.
|
@@ -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,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({
|
|
3
|
+
function applyCssVarOverride({ originalTheme, 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,
|
|
8
|
+
overrideValues[String(themeColor[layerKey].name)] = String(createColorCssVarDefault(layerKey, layerOverride, originalTheme.init.default, originalTheme.init.colors));
|
|
9
9
|
}
|
|
10
10
|
/**
|
|
11
11
|
* Define a color theme override. Use this to define multiple theme variations, like light mode vs
|
|
@@ -14,24 +14,11 @@ function applyCssVarOverride({ overriddenDefault, overriddenColors, layerKey, th
|
|
|
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
|
-
});
|
|
29
17
|
const defaultValues = {};
|
|
30
18
|
if (defaultOverride) {
|
|
31
19
|
getObjectTypedKeys(defaultOverride).forEach((layerKey) => {
|
|
32
20
|
applyCssVarOverride({
|
|
33
|
-
|
|
34
|
-
overriddenColors: asThemeColorInit,
|
|
21
|
+
originalTheme,
|
|
35
22
|
layerKey,
|
|
36
23
|
override: defaultOverride,
|
|
37
24
|
themeColor: originalTheme.colors[themeDefaultKey],
|
|
@@ -47,16 +34,14 @@ export function defineColorThemeOverride(originalTheme, overrideName, { defaultO
|
|
|
47
34
|
throw new Error(`Override color name '${colorName}' does not exist in the theme being overridden.`);
|
|
48
35
|
}
|
|
49
36
|
applyCssVarOverride({
|
|
50
|
-
|
|
51
|
-
overriddenColors: asThemeColorInit,
|
|
37
|
+
originalTheme,
|
|
52
38
|
layerKey: 'foreground',
|
|
53
39
|
override,
|
|
54
40
|
themeColor,
|
|
55
41
|
overrideValues: colorValues,
|
|
56
42
|
});
|
|
57
43
|
applyCssVarOverride({
|
|
58
|
-
|
|
59
|
-
overriddenColors: asThemeColorInit,
|
|
44
|
+
originalTheme,
|
|
60
45
|
layerKey: 'background',
|
|
61
46
|
override,
|
|
62
47
|
themeColor,
|
|
@@ -64,7 +49,18 @@ export function defineColorThemeOverride(originalTheme, overrideName, { defaultO
|
|
|
64
49
|
});
|
|
65
50
|
});
|
|
66
51
|
}
|
|
67
|
-
const
|
|
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);
|
|
68
64
|
return {
|
|
69
65
|
name: overrideName,
|
|
70
66
|
overrides: {
|