theme-vir 28.21.1 → 28.22.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 (3) hide show
  1. package/dist/color-theme/build-color-theme.js +23 -15
  2. package/dist/color-theme/color-theme-code.js +4 -2
  3. package/package.json +8 -8
package/dist/color-theme/build-color-theme.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { assert, assertWrap, check } from '@augment-vir/assert';
2
2
  import { arrayToObject, crossProduct, filterMap, getEnumValues, getOrSet, log, mapObjectValues, removeDuplicates, stringify, } from '@augment-vir/common';
3
- import { ContrastLevelName, contrastLevelLabel, findClosestColor, findColorAtContrastLevel, } from '@electrovir/color';
3
+ import { ContrastLevelName, contrastLevelLabel, findColorAtContrastLevel } from '@electrovir/color';
4
4
  import { defineColorThemeOverride } from './color-theme-override.js';
5
5
  import { defineColorTheme, noRefColorInitToString, } from './color-theme.js';
6
6
  /**
@@ -132,10 +132,14 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
132
132
  key: color.definition.default,
133
133
  value: color,
134
134
  }));
135
- const lightestSelfString = findClosestColor('white', colorStrings);
136
- const darkestSelfString = findClosestColor('black', colorStrings);
137
- const lightestSelf = colorByDefault[lightestSelfString];
138
- const darkestSelf = colorByDefault[darkestSelfString];
135
+ const lightSelfFgString = assertWrap.isTruthy(findColorAtContrastLevel({
136
+ foreground: colorStrings,
137
+ background: defaultBackgroundString,
138
+ }, ContrastLevelName.SmallBodyText), `Failed to find light mode small body text color for ${firstColor.colorName}`);
139
+ const darkSelfFgString = assertWrap.isTruthy(findColorAtContrastLevel({
140
+ foreground: colorStrings,
141
+ background: defaultForegroundString,
142
+ }, ContrastLevelName.SmallBodyText), `Failed to find dark mode small body text color for ${firstColor.colorName}`);
139
143
  // Pre-compute base name parts that don't change per cross
140
144
  const baseNameParts = [
141
145
  prefix,
@@ -154,13 +158,13 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
154
158
  }
155
159
  : cross.crossWith === 'color-on-self-dark-mode'
156
160
  ? {
157
- foreground: colorStrings,
158
- background: darkestSelfString,
161
+ foreground: darkSelfFgString,
162
+ background: colorStrings,
159
163
  }
160
164
  : cross.crossWith === 'color-on-self-light-mode'
161
165
  ? {
162
- foreground: colorStrings,
163
- background: lightestSelfString,
166
+ foreground: lightSelfFgString,
167
+ background: colorStrings,
164
168
  }
165
169
  : cross.crossWith === 'color-behind-bg-light-mode'
166
170
  ? {
@@ -241,12 +245,16 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
241
245
  cross.crossWith === 'color-behind-fg-dark-mode';
242
246
  const colorValue = mapObjectValues(comparison, (key, value) => {
243
247
  if (check.isString(value)) {
244
- // For self-contrast modes, use the CSS var reference for the background
245
- if (isSelfContrast && key === 'background') {
246
- const selfColor = cross.crossWith === 'color-on-self-light-mode'
247
- ? lightestSelf
248
- : darkestSelf;
249
- return selfColor?.definition.value || value;
248
+ /**
249
+ * For self-contrast modes, the foreground is the fixed string side —
250
+ * use its CSS var reference
251
+ */
252
+ if (isSelfContrast && key === 'foreground') {
253
+ const selfFg = cross.crossWith === 'color-on-self-light-mode'
254
+ ? lightSelfFgString
255
+ : darkSelfFgString;
256
+ const selfFgColor = selfFg ? colorByDefault[selfFg] : undefined;
257
+ return selfFgColor?.definition.value || value;
250
258
  }
251
259
  const referenceToDefault = referencesToDefault &&
252
260
  check.isKeyOf(key, referencesToDefault) &&
package/dist/color-theme/color-theme-code.js CHANGED
@@ -119,7 +119,8 @@ function colorInitValueToCode(value, indentLevel, paletteVarName) {
119
119
  function colorInitToCode(colorInit, indentLevel, defaultInit, paletteVarName) {
120
120
  const entries = [];
121
121
  if ('foreground' in colorInit &&
122
- (!defaultInit || !colorInitValuesEqual(colorInit.foreground, defaultInit.foreground))) {
122
+ (!defaultInit || !colorInitValuesEqual(colorInit.foreground, defaultInit.foreground)) &&
123
+ !check.hasKey(colorInit.foreground, 'refDefaultForeground')) {
123
124
  // Check if foreground matches default background (use refDefaultBackground)
124
125
  if (defaultInit && colorInitValuesEqual(colorInit.foreground, defaultInit.background)) {
125
126
  entries.push(`${tab(indentLevel + 1)}foreground: {\n${tab(indentLevel + 2)}refDefaultBackground: true,\n${tab(indentLevel + 1)}},`);
@@ -129,7 +130,8 @@ function colorInitToCode(colorInit, indentLevel, defaultInit, paletteVarName) {
129
130
  }
130
131
  }
131
132
  if ('background' in colorInit &&
132
- (!defaultInit || !colorInitValuesEqual(colorInit.background, defaultInit.background))) {
133
+ (!defaultInit || !colorInitValuesEqual(colorInit.background, defaultInit.background)) &&
134
+ !check.hasKey(colorInit.background, 'refDefaultBackground')) {
133
135
  // Check if background matches default foreground (use refDefaultForeground)
134
136
  if (defaultInit && colorInitValuesEqual(colorInit.background, defaultInit.foreground)) {
135
137
  entries.push(`${tab(indentLevel + 1)}background: {\n${tab(indentLevel + 2)}refDefaultForeground: true,\n${tab(indentLevel + 1)}},`);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "theme-vir",
3
- "version": "28.21.1",
3
+ "version": "28.22.0",
4
4
  "description": "Create an entire web theme.",
5
5
  "keywords": [
6
6
  "design",
@@ -43,31 +43,31 @@
43
43
  "test:update": "virmator test web update"
44
44
  },
45
45
  "dependencies": {
46
- "@augment-vir/assert": "^31.59.3",
47
- "@augment-vir/common": "^31.59.3",
46
+ "@augment-vir/assert": "^31.64.1",
47
+ "@augment-vir/common": "^31.64.1",
48
48
  "@electrovir/color": "^1.7.8",
49
49
  "apca-w3": "^0.1.9",
50
50
  "lit-css-vars": "^3.5.0",
51
51
  "type-fest": "^5.4.4"
52
52
  },
53
53
  "devDependencies": {
54
- "@augment-vir/test": "^31.59.3",
54
+ "@augment-vir/test": "^31.64.1",
55
55
  "@types/apca-w3": "^0.1.3",
56
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
- "element-book": "^26.16.0",
61
+ "element-book": "^26.16.1",
62
62
  "element-vir": "^26.14.3",
63
63
  "esbuild": "^0.27.3",
64
64
  "istanbul-smart-text-reporter": "^1.1.5",
65
65
  "markdown-code-example-inserter": "^3.0.3",
66
- "typedoc": "^0.28.16",
66
+ "typedoc": "^0.28.17",
67
67
  "typescript": "5.9.3",
68
- "vira": "^29.3.1",
68
+ "vira": "^29.5.6",
69
69
  "vite": "^7.3.1",
70
- "vite-tsconfig-paths": "^6.1.0"
70
+ "vite-tsconfig-paths": "^6.1.1"
71
71
  },
72
72
  "peerDependencies": {
73
73
  "element-book": ">=17",