theme-vir 28.22.0 → 28.23.1

package/dist/color-theme/build-color-theme.js

@@ -1,6 +1,6 @@
 import { assert, assertWrap, check } from '@augment-vir/assert';
 import { arrayToObject, crossProduct, filterMap, getEnumValues, getOrSet, log, mapObjectValues, removeDuplicates, stringify, } from '@augment-vir/common';
-import { ContrastLevelName, contrastLevelLabel, findColorAtContrastLevel } from '@electrovir/color';
+import { ContrastLevelName, calculateContrast, contrastLevelLabel, contrastLevelNameMap, findColorAtContrastLevel, } from '@electrovir/color';
 import { defineColorThemeOverride } from './color-theme-override.js';
 import { defineColorTheme, noRefColorInitToString, } from './color-theme.js';
 /**
@@ -90,6 +90,38 @@ export const defaultLightThemePair = {
 };
 /** @category Internal */
 export const defaultContrastLevels = getEnumValues(ContrastLevelName);
+function findColorWithPreference(colors, desiredContrastLevel, preference, 
+/** Pre-computed contrast-against-white values per color string. Higher = darker. */
+lightnessProxies) {
+    const minContrast = contrastLevelNameMap[desiredContrastLevel].min;
+    const candidateColors = check.isArray(colors.foreground)
+        ? colors.foreground
+        : check.isArray(colors.background)
+            ? colors.background
+            : [];
+    const qualifying = candidateColors.filter((candidate) => {
+        const foreground = check.isArray(colors.foreground) ? candidate : colors.foreground;
+        const background = check.isArray(colors.foreground) ? colors.background : candidate;
+        return (Math.abs(calculateContrast({
+            foreground,
+            background: background,
+        }).contrast) >= minContrast);
+    });
+    if (qualifying.length === 0) {
+        return undefined;
+    }
+    return qualifying.reduce((best, color) => {
+        const bestProxy = lightnessProxies[best] ?? 0;
+        const colorProxy = lightnessProxies[color] ?? 0;
+        return preference === 'lightest'
+            ? colorProxy < bestProxy
+                ? color
+                : best
+            : colorProxy > bestProxy
+                ? color
+                : best;
+    });
+}
 /**
  * Creates a color theme from a color palette.
  *
@@ -132,14 +164,38 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
             key: color.definition.default,
             value: color,
         }));
-        const lightSelfFgString = assertWrap.isTruthy(findColorAtContrastLevel({
+        /** Pre-computed contrast-against-white per color. Higher value = darker shade. */
+        const lightnessProxies = arrayToObject(colorStrings, (colorString) => {
+            return {
+                key: colorString,
+                value: Math.abs(calculateContrast({
+                    foreground: colorString,
+                    background: '#ffffff',
+                }).contrast),
+            };
+        });
+        /** Lightest palette color (least contrast against white). */
+        const lightestColorString = colorStrings.reduce((lightest, color) => (lightnessProxies[color] ?? 0) < (lightnessProxies[lightest] ?? 0)
+            ? color
+            : lightest);
+        /** Darkest palette color (most contrast against white). */
+        const darkestColorString = colorStrings.reduce((darkest, color) => (lightnessProxies[color] ?? 0) > (lightnessProxies[darkest] ?? 0) ? color : darkest);
+        /**
+         * On-self light mode: lightest fg achieving small-body contrast on the lightest palette
+         * bg. Fixed across all on-self contrast levels.
+         */
+        const lightSelfFgString = assertWrap.isTruthy(findColorWithPreference({
             foreground: colorStrings,
-            background: defaultBackgroundString,
-        }, ContrastLevelName.SmallBodyText), `Failed to find light mode small body text color for ${firstColor.colorName}`);
-        const darkSelfFgString = assertWrap.isTruthy(findColorAtContrastLevel({
+            background: lightestColorString,
+        }, ContrastLevelName.SmallBodyText, 'lightest', lightnessProxies), `Failed to find light mode on-self foreground color for ${firstColor.colorName}`);
+        /**
+         * On-self dark mode: darkest fg achieving small-body contrast on the darkest palette
+         * bg. Fixed across all on-self contrast levels.
+         */
+        const darkSelfFgString = assertWrap.isTruthy(findColorWithPreference({
             foreground: colorStrings,
-            background: defaultForegroundString,
-        }, ContrastLevelName.SmallBodyText), `Failed to find dark mode small body text color for ${firstColor.colorName}`);
+            background: darkestColorString,
+        }, ContrastLevelName.SmallBodyText, 'darkest', lightnessProxies), `Failed to find dark mode on-self foreground color for ${firstColor.colorName}`);
         // Pre-compute base name parts that don't change per cross
         const baseNameParts = [
             prefix,

package/dist/color-theme/color-palette-book-pages.js

@@ -2,7 +2,7 @@ import { check } from '@augment-vir/assert';
 import { VirColorPair } from '@electrovir/color';
 import { defineBookPage } from 'element-book';
 import { css, html, unsafeCSS } from 'element-vir';
-import { noNativeSpacing, viraColorPalette, viraTheme } from 'vira';
+import { noNativeSpacing, viraTheme } from 'vira';
 import { buildColorTheme, groupColors, } from './build-color-theme.js';
 import { createColorThemeBookPages } from './color-theme-book-pages.js';
 import { themeDefaultKey } from './color-theme.js';
@@ -86,7 +86,8 @@ export function createColorPaletteBookPages({ colors, parent, title, includeCont
                                 & .color-details {
                                     font-family: monospace;
                                     font-size: 12px;
-                                    color: ${viraColorPalette['vira-grey-50'].value};
+                                    color: ${viraTheme.colors['vira-grey-foreground-header']
+                        .foreground.value};
                                 }
 
                                 & .color-value {
@@ -148,7 +149,8 @@ export function createColorPaletteBookPages({ colors, parent, title, includeCont
                                 .darkness-level {
                                     text-align: center;
                                     font-size: 12px;
-                                    color: ${viraColorPalette['vira-grey-50'].value};
+                                    color: ${viraTheme.colors['vira-grey-foreground-header']
+                            .foreground.value};
                                 }
 
                                 td {

package/dist/create-theme/theme-options.js

@@ -10,8 +10,12 @@ export var HeadingLevel;
 export function createDefaultThemeOptions() {
     const defaultFont = {
         family: 'sans-serif',
-        lineHeight: { ratio: 1.1 },
-        size: { pixels: 14 },
+        lineHeight: {
+            ratio: 1.1,
+        },
+        size: {
+            pixels: 14,
+        },
         weight: 400,
     };
     const bold = {
@@ -29,31 +33,43 @@ export function createDefaultThemeOptions() {
             monospace: {
                 ...defaultFont,
                 family: 'monospace',
-                size: { ratio: 1.2 },
+                size: {
+                    ratio: 1.2,
+                },
             },
             headings: {
                 h1: {
                     ...bold,
-                    size: { ratio: 2 },
+                    size: {
+                        ratio: 2,
+                    },
                 },
                 h2: {
                     ...bold,
-                    size: { ratio: 1.5 },
+                    size: {
+                        ratio: 1.5,
+                    },
                 },
                 h3: {
                     ...bold,
-                    size: { ratio: 1.17 },
+                    size: {
+                        ratio: 1.17,
+                    },
                 },
                 h4: {
                     ...bold,
                 },
                 h5: {
                     ...bold,
-                    size: { ratio: 0.83 },
+                    size: {
+                        ratio: 0.83,
+                    },
                 },
                 h6: {
                     ...bold,
-                    size: { ratio: 0.67 },
+                    size: {
+                        ratio: 0.67,
+                    },
                 },
             },
         },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "theme-vir",
-    "version": "28.22.0",
+    "version": "28.23.1",
     "description": "Create an entire web theme.",
     "keywords": [
         "design",
@@ -43,29 +43,29 @@
         "test:update": "virmator test web update"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.64.1",
-        "@augment-vir/common": "^31.64.1",
+        "@augment-vir/assert": "^31.67.1",
+        "@augment-vir/common": "^31.67.1",
         "@electrovir/color": "^1.7.8",
         "apca-w3": "^0.1.9",
         "lit-css-vars": "^3.5.0",
         "type-fest": "^5.4.4"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.64.1",
+        "@augment-vir/test": "^31.67.1",
         "@types/apca-w3": "^0.1.3",
         "@web/dev-server-esbuild": "^1.0.5",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.1",
         "@web/test-runner-visual-regression": "^0.10.0",
-        "element-book": "^26.16.1",
-        "element-vir": "^26.14.3",
+        "element-book": "^26.17.0",
+        "element-vir": "^26.14.5",
         "esbuild": "^0.27.3",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
         "typedoc": "^0.28.17",
         "typescript": "5.9.3",
-        "vira": "^29.5.6",
+        "vira": "^30.6.0",
         "vite": "^7.3.1",
         "vite-tsconfig-paths": "^6.1.1"
     },