theme-vir 28.13.0 → 28.15.0

package/dist/color/contrast.js

@@ -1,7 +1,39 @@
-import { assertWrap } from '@augment-vir/assert';
-import { arrayToObject, round } from '@augment-vir/common';
+import { assertWrap, check } from '@augment-vir/assert';
+import { arrayToObject, mapObjectValues, round, } from '@augment-vir/common';
 // @ts-expect-error: `fontLookupAPCA` is not in the types
 import { calcAPCA, fontLookupAPCA } from 'apca-w3';
+/**
+ * All considered font weights in {@link FontWeight} mapped by their weight name.
+ *
+ * @category Internal
+ */
+export const fontWeightByName = {
+    Thin: 100,
+    ExtraLight: 200,
+    Light: 300,
+    Normal: 400,
+    Medium: 500,
+    SemiBold: 600,
+    Bold: 700,
+    ExtraBold: 800,
+    Heavy: 900,
+};
+/**
+ * All font weight names from {@link fontWeightByName}.
+ *
+ * @category Internal
+ */
+export const FontWeightName = mapObjectValues(fontWeightByName, (key) => key);
+/**
+ * All considered font weights in {@link FontWeight} mapped to their weight name from
+ * {@link fontWeightByName}.
+ *
+ * @category Internal
+ */
+export const fontWeightToName = Object.fromEntries(Object.entries(fontWeightByName).map(([key, value,]) => [
+    value,
+    key,
+]));
 /**
  * Calculate contrast for the given color combination.
  *
@@ -15,6 +47,65 @@ export function calculateContrast({ background, foreground, }) {
         contrastLevel: determineContrastLevel(contrast),
     };
 }
+/** @category Internal */
+export function findClosestColor(baseColor, possibleColors) {
+    return possibleColors.reduce((best, color) => {
+        const contrast = Math.abs(calculateContrast({
+            foreground: color,
+            background: baseColor,
+        }).contrast);
+        if (contrast > best.contrast) {
+            return best;
+        }
+        else {
+            return {
+                contrast,
+                color,
+            };
+        }
+    }, {
+        contrast: Infinity,
+        color: '',
+    }).color;
+}
+/**
+ * Find a color from an array that matches the desired contrast level.
+ *
+ * @category Internal
+ * @returns `undefined` if no color match is found.
+ */
+export function findColorAtContrastLevel(colors, desiredContrastLevel) {
+    const otherColors = check.isArray(colors.foreground)
+        ? colors.foreground
+        : check.isArray(colors.background)
+            ? colors.background
+            : new Error('No color array provided.');
+    if (otherColors instanceof Error) {
+        throw otherColors;
+    }
+    const desiredIndex = orderedContrastLevelNames.indexOf(desiredContrastLevel);
+    const bestMatch = otherColors.reduce((best, otherColor) => {
+        const contrast = calculateContrast({
+            foreground: check.isString(colors.foreground) ? colors.foreground : otherColor,
+            background: check.isString(colors.background) ? colors.background : otherColor,
+        });
+        const contrastIndex = orderedContrastLevelNames.indexOf(contrast.contrastLevel.name);
+        const distance = contrastIndex - desiredIndex;
+        if (distance > 0 || best.distance > distance) {
+            return best;
+        }
+        else {
+            return {
+                color: otherColor,
+                distance,
+            };
+        }
+    }, {
+        distance: 0,
+        color: undefined,
+    });
+    return bestMatch.color;
+}
 /**
  * Calculated needed font sizes for each font weight for the given color contrast.
  *
@@ -45,11 +136,11 @@ export function determineContrastLevel(contrast) {
  */
 export var ContrastLevelName;
 (function (ContrastLevelName) {
-    ContrastLevelName["SmallBodyText"] = "small-body-text";
-    ContrastLevelName["BodyText"] = "body-text";
-    ContrastLevelName["NonBodyText"] = "non-body-text";
-    ContrastLevelName["LargeText"] = "large-text";
-    ContrastLevelName["SpotText"] = "spot-text";
+    ContrastLevelName["SmallBodyText"] = "small-body";
+    ContrastLevelName["BodyText"] = "body";
+    ContrastLevelName["NonBodyText"] = "non-body";
+    ContrastLevelName["Header"] = "header";
+    ContrastLevelName["Placeholder"] = "placeholder";
     ContrastLevelName["Decoration"] = "decoration";
     ContrastLevelName["Invisible"] = "invisible";
 })(ContrastLevelName || (ContrastLevelName = {}));
@@ -62,10 +153,10 @@ export const contrastLevelLabel = {
     [ContrastLevelName.SmallBodyText]: 'Small Text',
     [ContrastLevelName.BodyText]: 'Body Text',
     [ContrastLevelName.NonBodyText]: 'Non-body Text',
-    [ContrastLevelName.LargeText]: 'Headers',
-    [ContrastLevelName.SpotText]: 'Placeholders',
-    [ContrastLevelName.Decoration]: 'Decorations',
-    [ContrastLevelName.Invisible]: 'Invisible ',
+    [ContrastLevelName.Header]: 'Header',
+    [ContrastLevelName.Placeholder]: 'Placeholder',
+    [ContrastLevelName.Decoration]: 'Decoration',
+    [ContrastLevelName.Invisible]: 'Invisible',
 };
 /**
  * All {@link ContrastLevelName} values in order from highest contrast to lowest.
@@ -76,8 +167,8 @@ export const orderedContrastLevelNames = [
     ContrastLevelName.SmallBodyText,
     ContrastLevelName.BodyText,
     ContrastLevelName.NonBodyText,
-    ContrastLevelName.LargeText,
-    ContrastLevelName.SpotText,
+    ContrastLevelName.Header,
+    ContrastLevelName.Placeholder,
     ContrastLevelName.Decoration,
     ContrastLevelName.Invisible,
 ];
@@ -110,14 +201,14 @@ export const contrastLevels = [
     },
     {
         min: 45,
-        name: ContrastLevelName.LargeText,
+        name: ContrastLevelName.Header,
         description: 'Okay for large or headline text.',
         apcaName: 'large & sub-fluent text',
         apcaDescription: 'The minimum for larger, heavier text (36px normal weight or 24px bold) such as headlines, and large text that should be fluently readable but is not body text. This is also the minimum for pictograms with fine details, or smaller outline icons, , no less than 4px in its smallest dimension.',
     },
     {
         min: 30,
-        name: ContrastLevelName.SpotText,
+        name: ContrastLevelName.Placeholder,
         description: 'Okay for disabled or placeholder text, copyright lines, icons, or non-text elements.',
         apcaName: 'spot & non text only',
         apcaDescription: 'The absolute minimum for any text not listed above, which means non-content text considered as "spot readable". This includes placeholder text and disabled element text, and some non-content like a copyright bug. This is also the minimum for large/solid semantic & understandable non-text elements such as "mostly solid" icons or pictograms, no less than 10px in its smallest dimension.',

package/dist/color/elements/theme-vir-color-example.element.d.ts

@@ -1,4 +1,5 @@
 import { type ColorThemeColor } from '../color-theme.js';
+import { type FontWeight } from '../contrast.js';
 /**
  * Showcase a theme-vir color theme color.
  *
@@ -9,8 +10,8 @@ export declare const ThemeVirColorExample: import("element-vir").DeclarativeElem
     showVarValues: boolean;
     showVarNames: boolean;
     showContrast: boolean;
+    fontWeight: FontWeight;
 }, {
     previewElement: undefined | HTMLElement;
-}, {
-    toggleShowVars: import("element-vir").DefineEvent<void>;
-}, "theme-vir-color-example-no-contrast-tips", "theme-vir-color-example-", readonly [], readonly []>;
+    forceShowEverything: boolean;
+}, {}, "theme-vir-color-example-no-contrast-tips", "theme-vir-color-example-", readonly [], readonly []>;

package/dist/color/elements/theme-vir-color-example.element.js

@@ -1,5 +1,5 @@
 import { assertWrap, check } from '@augment-vir/assert';
-import { css, defineElement, defineElementEvent, html, listen, nothing, onDomCreated, unsafeCSS, } from 'element-vir';
+import { css, defineElement, html, listen, nothing, onDomCreated, unsafeCSS } from 'element-vir';
 import { noNativeFormStyles, noNativeSpacing } from 'vira';
 import { calculateContrast } from '../contrast.js';
 import { ThemeVirContrastIndicator } from './theme-vir-contrast-indicator.element.js';
@@ -13,13 +13,11 @@ export const ThemeVirColorExample = defineElement()({
     state() {
         return {
             previewElement: undefined,
+            forceShowEverything: false,
         };
     },
-    events: {
-        toggleShowVars: defineElementEvent(),
-    },
     hostClasses: {
-        'theme-vir-color-example-no-contrast-tips': ({ inputs }) => !inputs.showContrast,
+        'theme-vir-color-example-no-contrast-tips': ({ inputs, state }) => !inputs.showContrast && !state.forceShowEverything,
     },
     styles: ({ hostClasses }) => css `
         :host {
@@ -109,21 +107,21 @@ export const ThemeVirColorExample = defineElement()({
             margin-top: 1px;
         }
     `,
-    render({ state, updateState, inputs, dispatch, events }) {
+    render({ state, updateState, inputs }) {
         const colorRows = [
             'foreground',
             'background',
         ].map((layerKey) => {
             const keyString = [
                 inputs.color[layerKey].name,
-                inputs.showVarValues ? ':' : '',
+                inputs.showVarValues || state.forceShowEverything ? ':' : '',
             ]
                 .filter(check.isTruthy)
                 .join('');
-            const valueTemplate = inputs.showVarValues
+            const valueTemplate = inputs.showVarValues || state.forceShowEverything
                 ? html `
-                      <span>${inputs.color[layerKey].default}</span>
-                  `
+                          <span>${inputs.color[layerKey].default}</span>
+                      `
                 : nothing;
             return html `
                 <p>
@@ -132,10 +130,10 @@ export const ThemeVirColorExample = defineElement()({
                 </p>
             `;
         });
-        const cssVarNamesTemplate = inputs.showVarNames
+        const cssVarNamesTemplate = inputs.showVarNames || state.forceShowEverything
             ? html `
-                  <div class="css-var-names">${colorRows}</div>
-              `
+                      <div class="css-var-names">${colorRows}</div>
+                  `
             : nothing;
         const contrast = state.previewElement
             ? calculateContrast({
@@ -147,17 +145,20 @@ export const ThemeVirColorExample = defineElement()({
                     .getPropertyValue('background-color'),
             })
             : undefined;
-        const contrastTemplate = contrast && inputs.showContrast
+        const contrastTemplate = contrast && (inputs.showContrast || state.forceShowEverything)
             ? html `
                       <${ThemeVirContrastIndicator.assign({
                 contrast,
+                fontWeight: inputs.fontWeight,
             })}></${ThemeVirContrastIndicator}>
                   `
             : nothing;
         return html `
             <button
                 ${listen('click', () => {
-            dispatch(new events.toggleShowVars());
+            updateState({
+                forceShowEverything: !state.forceShowEverything,
+            });
         })}
                 ${onDomCreated((element) => {
             updateState({
@@ -179,6 +180,7 @@ export const ThemeVirColorExample = defineElement()({
                                 visibility: ${unsafeCSS((contrast?.fontSizes[400] || Infinity) > 150
             ? 'hidden'
             : 'visible')};
+                                font-weight: ${inputs.fontWeight};
                                 font-size: ${contrast ? contrast.fontSizes[400] : 14}px;
                             `}
                         >

package/dist/color/elements/theme-vir-contrast-indicator.element.d.ts

@@ -1,4 +1,4 @@
-import { type CalculatedContrast } from '../contrast.js';
+import { type CalculatedContrast, type FontWeight } from '../contrast.js';
 /**
  * Show contrast details for a theme-vir color.
  *
@@ -6,4 +6,5 @@ import { type CalculatedContrast } from '../contrast.js';
  */
 export declare const ThemeVirContrastIndicator: import("element-vir").DeclarativeElementDefinition<"theme-vir-contrast-indicator", {
     contrast: Readonly<CalculatedContrast>;
+    fontWeight: FontWeight;
 }, {}, {}, "theme-vir-contrast-indicator-", "theme-vir-contrast-indicator-", readonly [], readonly []>;

package/dist/color/elements/theme-vir-contrast-indicator.element.js

@@ -29,7 +29,7 @@ export const ThemeVirContrastIndicator = defineElement()({
         .${unsafeCSS(ContrastLevelName.Decoration)} {
             color: #ff6600;
         }
-        .${unsafeCSS(ContrastLevelName.SpotText)} {
+        .${unsafeCSS(ContrastLevelName.Placeholder)} {
             color: #a5a520;
         }
 
@@ -76,7 +76,9 @@ export const ThemeVirContrastIndicator = defineElement()({
             '\nFont weights to font sizes:',
             JSON.stringify(inputs.contrast.fontSizes, null, 4),
         ].join('\n');
-        const fontSize = inputs.contrast.fontSizes[400] > 150 ? '-' : `${inputs.contrast.fontSizes[400]}px`;
+        const fontSize = inputs.contrast.fontSizes[inputs.fontWeight] > 150
+            ? '-'
+            : `${inputs.contrast.fontSizes[inputs.fontWeight]}px`;
         return html `
             <div title=${title} class="wrapper ${inputs.contrast.contrastLevel.name}">
                 <div class="gauge">${gaugeLevels}</div>

package/dist/index.d.ts

@@ -1,4 +1,6 @@
+export * from './color/build-color-theme.js';
 export * from './color/color-css.js';
+export * from './color/color-palette-book-pages.js';
 export * from './color/color-theme-book-pages.js';
 export * from './color/color-theme-override.js';
 export * from './color/color-theme.js';

package/dist/index.js

@@ -1,4 +1,6 @@
+export * from './color/build-color-theme.js';
 export * from './color/color-css.js';
+export * from './color/color-palette-book-pages.js';
 export * from './color/color-theme-book-pages.js';
 export * from './color/color-theme-override.js';
 export * from './color/color-theme.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "theme-vir",
-    "version": "28.13.0",
+    "version": "28.15.0",
     "description": "Create an entire web theme.",
     "keywords": [
         "design",
@@ -14,13 +14,13 @@
         "web",
         "element-vir"
     ],
-    "homepage": "https://electrovir.github.io/vira/theme-vir",
+    "homepage": "https://electrovir.github.io/theme-vir",
     "bugs": {
-        "url": "https://github.com/electrovir/vira/issues"
+        "url": "https://github.com/electrovir/theme-vir/issues"
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/electrovir/vira.git"
+        "url": "git+https://github.com/electrovir/theme-vir.git"
     },
     "license": "(MIT or CC0 1.0)",
     "author": {
@@ -42,33 +42,35 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.54.4",
-        "@augment-vir/common": "^31.54.4",
+        "@augment-vir/assert": "^31.57.3",
+        "@augment-vir/common": "^31.57.3",
         "apca-w3": "^0.1.9",
         "lit-css-vars": "^3.0.11",
         "type-fest": "^5.3.1"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.54.4",
+        "@augment-vir/test": "^31.57.3",
         "@types/apca-w3": "^0.1.3",
         "@web/dev-server-esbuild": "^1.0.4",
         "@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.12.2",
-        "element-vir": "^26.12.2",
+        "element-book": "^26.14.0",
+        "element-vir": "^26.14.0",
         "esbuild": "^0.27.2",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
         "typedoc": "^0.28.15",
         "typescript": "5.9.3",
+        "vira": "^28.14.0",
         "vite": "^7.3.0",
         "vite-tsconfig-paths": "^6.0.3"
     },
     "peerDependencies": {
         "element-book": ">=17",
-        "element-vir": ">=17"
+        "element-vir": ">=17",
+        "vira": ">28"
     },
     "engines": {
         "node": ">=22"