theme-vir 28.21.2 → 28.23.0

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, findClosestColor, 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,10 +164,38 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
             key: color.definition.default,
             value: color,
         }));
-        const lightestSelfString = findClosestColor('white', colorStrings);
-        const darkestSelfString = findClosestColor('black', colorStrings);
-        const lightestSelf = colorByDefault[lightestSelfString];
-        const darkestSelf = colorByDefault[darkestSelfString];
+        /** 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: 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: 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,
@@ -154,13 +214,13 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
                     }
                     : cross.crossWith === 'color-on-self-dark-mode'
                         ? {
-                            foreground: colorStrings,
-                            background: darkestSelfString,
+                            foreground: darkSelfFgString,
+                            background: colorStrings,
                         }
                         : cross.crossWith === 'color-on-self-light-mode'
                             ? {
-                                foreground: colorStrings,
-                                background: lightestSelfString,
+                                foreground: lightSelfFgString,
+                                background: colorStrings,
                             }
                             : cross.crossWith === 'color-behind-bg-light-mode'
                                 ? {
@@ -241,12 +301,16 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
                 cross.crossWith === 'color-behind-fg-dark-mode';
             const colorValue = mapObjectValues(comparison, (key, value) => {
                 if (check.isString(value)) {
-                    // For self-contrast modes, use the CSS var reference for the background
-                    if (isSelfContrast && key === 'background') {
-                        const selfColor = cross.crossWith === 'color-on-self-light-mode'
-                            ? lightestSelf
-                            : darkestSelf;
-                        return selfColor?.definition.value || value;
+                    /**
+                     * For self-contrast modes, the foreground is the fixed string side —
+                     * use its CSS var reference
+                     */
+                    if (isSelfContrast && key === 'foreground') {
+                        const selfFg = cross.crossWith === 'color-on-self-light-mode'
+                            ? lightSelfFgString
+                            : darkSelfFgString;
+                        const selfFgColor = selfFg ? colorByDefault[selfFg] : undefined;
+                        return selfFgColor?.definition.value || value;
                     }
                     const referenceToDefault = referencesToDefault &&
                         check.isKeyOf(key, referencesToDefault) &&

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.21.2",
+    "version": "28.23.0",
     "description": "Create an entire web theme.",
     "keywords": [
         "design",
@@ -43,31 +43,31 @@
         "test:update": "virmator test web update"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.59.3",
-        "@augment-vir/common": "^31.59.3",
+        "@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.59.3",
+        "@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.0",
-        "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.16",
+        "typedoc": "^0.28.17",
         "typescript": "5.9.3",
-        "vira": "^29.3.1",
+        "vira": "^30.6.0",
         "vite": "^7.3.1",
-        "vite-tsconfig-paths": "^6.1.0"
+        "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {
         "element-book": ">=17",