origam 2.14.0 → 2.14.1

package/CHANGELOG.md

@@ -13,6 +13,38 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.14.1] - 2026-08-13
+
+Two fixes, both found while converting variants to props presets on the v3
+line. Neither is caused by that work — they predate it and affect this 2.x
+line, so they are shipped here rather than held back for a major.
+
+### Fixed
+
+- **A theme default could be silently ignored.** `usePassedProps` counted a key
+  present in `vnode.props` with the value `undefined` as "passed". Vue does not
+  drop a dynamically-bound key just because its current value is `undefined`, so
+  the most ordinary consumer pattern — `:bg-color="state.bgColor"` — reported
+  the prop as declared while it was empty, and the theme default was skipped.
+
+  The symptom was a component that appeared not to follow its theme, with
+  nothing logged and no error. Requiring a non-`undefined` value brings this in
+  line with Vue's own `withDefaults()`, where an `undefined` prop falls back to
+  its default.
+
+- **`color-mix()` was not recognised as a CSS colour.** `isCssColor` matched
+  `color(...)` (Color Level 4) but not `color-mix(...)`, which is a full
+  `<color>` function and one the design system uses itself. Values passed that
+  way fell through silently. Purely additive — no caller could have depended on
+  a `color-mix(...)` string being dropped. `useElevation` already listed
+  `color-mix` in its equivalent detector; this brings `isCssColor` in line.
+
+### Notes for consumers
+
+No API change, no visual change by default. If a component of yours looked like
+it was ignoring a theme default while you bound a possibly-`undefined` value to
+one of its props, that is the first fix above.
+
 ## [2.14.0] - 2026-08-07
 
 Reported from a real integration, not from a code review. Each item was
@@ -178,8 +210,13 @@ Nuxt advisories published during this release cycle are cleared too:
 (server-side RCE via Runtime, unauthenticated OOM crash, CPU exhaustion
 while parsing). `nuxt` moves to `^4.5.1` and `typeorm` to `^0.3.31`,
 staying on the `0.3.x` line — the fix landed there, and `1.x` is a
-breaking change. `pnpm audit --prod` now reports **no known
-vulnerabilities**.
+breaking change. Every advisory listed above is cleared as of this release.
+
+Advisories are a moving target, so this is stated as of a date rather than as
+a standing guarantee: on 2026-08-11, `pnpm audit --prod` surfaced three new
+`high` advisories unrelated to the ones above (`image-size` ICNS and JXL/HEIF
+parsers, `nanoid` custom generators). They arrived after this release and are
+tracked separately — run `pnpm audit --prod` yourself for the current state.
 
 Scope note for consumers: the published `origam` package depends only on
 `@mdi/font` and `qrcode-generator`, with `shiki` / `vue` / `vue-i18n` /

package/README.md

@@ -5,7 +5,7 @@ and TypeScript types.
 
 > 📖 **Full documentation & interactive theme builder:**
 > [https://origam.dev](https://origam.dev) *(coming soon)* ·
-> [GitHub repository](https://github.com/arnaudprioul/origam)
+> [GitHub repository](https://github.com/Elyseranet/origam)
 
 ## Installation
 
@@ -75,9 +75,9 @@ Token stylesheets are exposed as dedicated entries: `origam/styles`
 ## Links
 
 - [Documentation & theme builder](https://origam.dev) *(coming soon)*
-- [Changelog](https://github.com/arnaudprioul/origam/blob/main/CHANGELOG.md)
-- [Issues](https://github.com/arnaudprioul/origam/issues)
+- [Changelog](https://github.com/Elyseranet/origam/blob/main/CHANGELOG.md)
+- [Issues](https://github.com/Elyseranet/origam/issues)
 
 ## License
 
-[MIT](https://github.com/arnaudprioul/origam/blob/main/LICENSE) © Prioul Arnaud
+[MIT](https://github.com/Elyseranet/origam/blob/main/LICENSE) © Prioul Arnaud

package/dist/src/components/ColorPicker/OrigamColorPickerEdit.vue

@@ -128,7 +128,13 @@ defineExpose({
 			}
 
 			#{$this}__label {
-				font-size: .75rem
+				// `rem` resolves against the document root, not this component's
+				// ancestor — a plain literal here would be immune to the typography
+				// bridge `OrigamColorPickerField` republishes on the teleported
+				// surface (see `useTeleportTypography`). Generic-first read, same
+				// convention as `useTypography`'s rollout: the bridged var wins when
+				// present, the historical size is the fallback.
+				font-size: var(--origam-color-picker-edit__label---font-size, .75rem);
 			}
 		}
 	}

package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue

@@ -128,7 +128,7 @@
 
 <script lang="ts" setup>
 import { OrigamColorPicker, OrigamMenu, OrigamSheet, OrigamTextField, OrigamTranslateScale } from "../../components";
-import { useDefaults, useLocale, useProps, useVModel, useStyle } from "../../composables";
+import { useDefaults, useLocale, useProps, useTeleportTypography, useVModel, useStyle } from "../../composables";
 import { COLOR_NULL, ORIGAM_FORM_KEY } from "../../consts";
 import { BLOCK, DENSITY, DIRECTION, TEXT_FIELD_TYPE } from "../../enums";
 import { forwardRefs, HSVtoCSS, matchesSelector } from "../../utils";
@@ -295,13 +295,24 @@ const form = inject(ORIGAM_FORM_KEY, null);
 const menuDisabled = computed(() => {
   return props.readonly || form?.isReadonly.value;
 });
+const { typographyStyles: menuTypographyStyles } = useTeleportTypography(origamTextFieldRef, menu, (fontSize) => ({
+  "--origam-picker-title---font-size": fontSize,
+  "--origam-color-picker-edit__label---font-size": fontSize
+}));
 const menuProps = computed(() => {
+  const consumerContentProps = props.menuProps?.contentProps ?? {};
   return {
     ...props.menuProps,
     activatorProps: {
       ...props.menuProps?.activatorProps || {},
       "aria-haspopup": "colorpickerbox"
       // Set aria-haspopup to 'listbox'
+    },
+    contentProps: {
+      ...consumerContentProps,
+      // The consumer's own style is listed last so it still wins —
+      // the bridge is a default, not a lock.
+      style: [menuTypographyStyles.value, consumerContentProps.style]
     }
   };
 });

package/dist/src/components/DatePicker/OrigamDatePickerMonth.vue

@@ -269,7 +269,12 @@ defineExpose({
 			display: grid;
 			grid-template-rows: repeat(7, 1fr);
 			column-gap: 4px;
-			font-size: .85rem;
+			// `rem` resolves against the document root, not this component's
+			// ancestor — a plain literal here would be immune to the typography
+			// bridge `OrigamDatePickerField` republishes on the teleported
+			// surface (see `useTeleportTypography`). Generic-first read, same
+			// convention as `useTypography`'s rollout.
+			font-size: var(--origam-date-picker-month__weeks---font-size, .85rem);
 
 			+ #{$this}__days {
 				grid-row-gap: 0;
@@ -277,7 +282,7 @@ defineExpose({
 		}
 
 		&__weekday {
-			font-size: .85rem;
+			font-size: var(--origam-date-picker-month__weekday---font-size, .85rem);
 		}
 
 		&__days {
@@ -300,6 +305,13 @@ defineExpose({
 			:deep(.origam-btn) {
 				--origam-btn---height: 24px;
 				--origam-btn---size: .85rem;
+				// `OrigamBtn`'s own `--size-*` modifier sets `--origam-btn---font-size`
+				// directly on this same element (its size prop is unset here, so it's
+				// the default rung) — an inherited custom property from an ancestor
+				// loses to that local declaration. A plain `font-size` read here, at
+				// equal locality, is what actually wins; same rem-trap as `&__weeks` /
+				// `&__weekday` above, bridged token first, historical size as fallback.
+				font-size: var(--origam-date-picker-month__day---font-size, .85rem);
 				z-index: 1;
 			}
 

package/dist/src/components/DatePickerField/OrigamDatePickerField.vue

@@ -180,7 +180,7 @@ import {
   OrigamTextField,
   OrigamTranslateScale
 } from "../../components";
-import { useDate, useDefaults, useLocale, useProps, useTextColor, useVModel, useStyle } from "../../composables";
+import { useDate, useDefaults, useLocale, useProps, useTeleportTypography, useTextColor, useVModel, useStyle } from "../../composables";
 import { ORIGAM_FORM_KEY } from "../../consts";
 import { BLOCK, DENSITY, DIRECTION, KEYBOARD_VALUES, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
 import { forwardRefs, isEmpty, matchesSelector, wrapInArray } from "../../utils";
@@ -370,13 +370,26 @@ const form = inject(ORIGAM_FORM_KEY, null);
 const menuDisabled = computed(() => {
   return props.readonly || form?.isReadonly.value;
 });
+const { typographyStyles: menuTypographyStyles } = useTeleportTypography(origamTextFieldRef, menu, (fontSize) => ({
+  "--origam-picker-title---font-size": fontSize,
+  "--origam-date-picker-month__weekday---font-size": fontSize,
+  "--origam-date-picker-month__weeks---font-size": fontSize,
+  "--origam-date-picker-month__day---font-size": fontSize
+}));
 const menuProps = computed(() => {
+  const consumerContentProps = props.menuProps?.contentProps ?? {};
   return {
     ...props.menuProps,
     activatorProps: {
       ...props.menuProps?.activatorProps || {},
       "aria-haspopup": "datepickerbox"
       // Set aria-haspopup to 'listbox'
+    },
+    contentProps: {
+      ...consumerContentProps,
+      // The consumer's own style is listed last so it still wins —
+      // the bridge is a default, not a lock.
+      style: [menuTypographyStyles.value, consumerContentProps.style]
     }
   };
 });

package/dist/src/components/Field/OrigamField.vue

@@ -783,15 +783,17 @@ defineExpose({
 		&--prepended {
 			--origam-field---padding-start: 6px;
 
-			// A prepend-inner (icon / swatch) already fills the left corner, so
-			// opt out of the corner-clearing floor: keep the inline padding and
-			// the start outline leg at the raw padding-start (widening them would
-			// draw the outline over the prepend content).
+			// Le CONTENU se rapproche du bord (l'icone/swatch remplit le coin),
+			// donc on retire le plancher de degagement sur le padding.
 			padding-inline: var(--origam-field---padding-start) var(--origam-field---padding-end);
 
-			#{$this}__outline--start {
-				flex-basis: var(--origam-field---padding-start);
-			}
+			// MAIS on ne touche PAS a la largeur de la patte d'outline : ce
+			// segment PORTE le rayon du coin gauche, et CSS reduit proportionnellement
+			// un `border-radius` qui depasse la boite qui le declare (une patte de
+			// 6px ne peut pas rendre un rayon de 12px+ : le coin sort plat). Le
+			// couplage n'avait pas lieu d'etre : `__outlines` est `position: absolute`
+			// + `pointer-events: none`, une couche decorative qui ne deplace aucun
+			// contenu — l'elargir ne dessine rien par-dessus le prepend.
 		}
 
 		&--appended {

package/dist/src/components/Select/OrigamSelect.vue

@@ -298,6 +298,7 @@ import {
   useProps,
   useScrolling,
   useStyle,
+  useTeleportTypography,
   useTextColor,
   useVModel
 } from "../../composables";
@@ -541,9 +542,23 @@ const displayItems = computed(() => {
 const menuDisabled = computed(() => {
   return props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value;
 });
+const { typographyStyles: menuTypographyStyles } = useTeleportTypography(origamTextFieldRef, menu, (fontSize) => ({
+  "--origam-list-item__title---font-size": fontSize,
+  // Kept proportional to the title rather than pinned, so the pair
+  // keeps its relationship at any scale.
+  "--origam-list-item__subtitle---font-size": `calc(${fontSize} * 0.875)`
+}));
 const menuProps = computed(() => {
+  const consumerProps = props.menuProps ?? {};
+  const consumerContentProps = consumerProps.contentProps ?? {};
   return {
-    ...props.menuProps
+    ...consumerProps,
+    contentProps: {
+      ...consumerContentProps,
+      // The consumer's own style is listed last so it still wins —
+      // the bridge is a default, not a lock.
+      style: [menuTypographyStyles.value, consumerContentProps.style]
+    }
   };
 });
 const comboboxAriaAttrs = computed(() => {

package/dist/src/composables/Commons/defaults.composable.cjs

@@ -18,7 +18,7 @@ function usePassedProps(_props, instanceLabel = "usePassedProps") {
   return key => {
     const vnodeProps = vm.vnode.props || {};
     for (const k in vnodeProps) {
-      if (k === key || camelize(k) === key) return true;
+      if (k === key || camelize(k) === key) return vnodeProps[k] !== void 0;
     }
     return false;
   };

package/dist/src/composables/Commons/defaults.composable.js

@@ -9,7 +9,7 @@ export function usePassedProps(_props, instanceLabel = "usePassedProps") {
   return (key) => {
     const vnodeProps = vm.vnode.props || {};
     for (const k in vnodeProps) {
-      if (k === key || camelize(k) === key) return true;
+      if (k === key || camelize(k) === key) return vnodeProps[k] !== void 0;
     }
     return false;
   };

package/dist/src/composables/Commons/style.composable.cjs

@@ -63,7 +63,10 @@ function toDeclarations(value) {
 }
 function useStyle(styles, uniq = void 0, name = (0, _utils.getCurrentInstanceName)()) {
   const fallbackId = `${name}-${(0, _utils.getUid)()}`;
-  const id = (0, _vue.computed)(() => (0, _vue.toValue)(uniq) || fallbackId);
+  const id = (0, _vue.computed)(() => {
+    const requested = (0, _vue.toValue)(uniq);
+    return typeof requested === "string" && requested.length > 0 ? requested : fallbackId;
+  });
   const customCss = (0, _vue.computed)(() => {
     const stylesArray = toDeclarations(styles.value);
     return `#${(0, _utils.escapeCssIdent)(id.value)} {${stylesArray.join(";")}}`;

package/dist/src/composables/Commons/style.composable.js

@@ -65,7 +65,10 @@ function toDeclarations(value) {
 }
 export function useStyle(styles, uniq = void 0, name = getCurrentInstanceName()) {
   const fallbackId = `${name}-${getUid()}`;
-  const id = computed(() => toValue(uniq) || fallbackId);
+  const id = computed(() => {
+    const requested = toValue(uniq);
+    return typeof requested === "string" && requested.length > 0 ? requested : fallbackId;
+  });
   const customCss = computed(() => {
     const stylesArray = toDeclarations(styles.value);
     return `#${escapeCssIdent(id.value)} {${stylesArray.join(";")}}`;

package/dist/src/composables/Commons/teleport-typography.composable.cjs

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTeleportTypography = useTeleportTypography;
+var _vue = require("vue");
+function useTeleportTypography(fieldRef, isOpen, extraVars, measureSelector = ".origam-field", neutralFontSize = "16px") {
+  const typographyStyles = (0, _vue.ref)({});
+  const fieldElement = () => {
+    const root = fieldRef.value?.$el;
+    if (!root || typeof root.querySelector !== "function") return void 0;
+    return root.querySelector(measureSelector) ?? root;
+  };
+  const sync = () => {
+    const el = fieldElement();
+    if (!el || typeof window === "undefined") return;
+    const styles = window.getComputedStyle(el);
+    const fontSize = styles.fontSize;
+    if (!fontSize) return;
+    if (fontSize === neutralFontSize) {
+      typographyStyles.value = {};
+      return;
+    }
+    typographyStyles.value = {
+      "font-family": styles.fontFamily,
+      "font-size": fontSize,
+      "letter-spacing": styles.letterSpacing,
+      ...extraVars(fontSize)
+    };
+  };
+  (0, _vue.watch)(isOpen, open => {
+    if (open) (0, _vue.nextTick)(sync);
+  });
+  return {
+    typographyStyles
+  };
+}

package/dist/src/composables/Commons/teleport-typography.composable.d.ts

@@ -0,0 +1,86 @@
+import type { Ref } from 'vue';
+/**
+ * useTeleportTypography — bridges the field's REAL typography across a
+ * teleported surface (menu, picker, …).
+ *
+ * @description
+ * Floating surfaces (`OrigamMenu` and everything built on it — Select's
+ * option list, ColorPickerField's channel editor, DatePickerField's
+ * calendar) are teleported out of the field's DOM subtree, to escape
+ * `overflow` and stacking contexts. A CSS rule the consuming application
+ * writes against the field — `.my-field * { font-size: 13px }`, a compact
+ * form theme, a scaled container — therefore never reaches the popup: the
+ * selector simply does not match nodes outside the field's subtree.
+ *
+ * Re-inheriting `font-size` on the teleported root is NOT enough on its
+ * own, either. Descendant text that sizes itself with a `rem`-based token
+ * (`var(--origam-list-item__title---font-size, 1rem)`,
+ * `var(--origam-picker-title---font-size, .75rem)`, …) resolves `rem`
+ * against the DOCUMENT ROOT, not the inherited value — it would keep the
+ * root size whatever the teleported ancestor inherits.
+ *
+ * So this composable measures the typography that ACTUALLY WON on the
+ * field when the surface opens (`getComputedStyle`, not the props — the
+ * props can't see a consumer's own stylesheet) and hands back a plain
+ * style object the caller republishes on the teleported content root as
+ * both generic CSS (`font-family` / `font-size` / `letter-spacing`, for
+ * whatever inherits normally) AND the specific component tokens the
+ * surface's own `rem`-sized text reads (via `extraVars`), so the two
+ * layers of the bug are closed together. Originates from `OrigamSelect`
+ * (commit `8354407c`) — extracted here so `OrigamColorPickerField` /
+ * `OrigamDatePickerField` don't reimplement the same measurement.
+ *
+ * Measured on `.origam-field` (NOT the raw `<input>`), which is the one
+ * element every `<origam-text-field>`-based field renders with a plain,
+ * unconditional `font-size: 16px` (no prop/token influences it — see
+ * `OrigamField`'s own SCSS). The raw `<input>` is NOT a safe measurement
+ * point: on `OrigamColorPickerField` / `OrigamDatePickerField` it is
+ * deliberately taken out of flow and carries none of `OrigamInput`'s
+ * classes, so it renders at the BROWSER's own default control font
+ * (13.3333px in Chrome) rather than the design system's — a value with
+ * nothing to do with the field's real typography.
+ *
+ * That same "16px, unconditionally" fact is also what keeps this bridge a
+ * true no-op absent a consumer override: `neutralFontSize` (default
+ * `'16px'`) is the value `.origam-field` would show with zero consuming-app
+ * CSS involved. When the measured size still equals it, nothing diverges —
+ * `typographyStyles` stays empty and every surface keeps its OWN historical
+ * default (`.75rem` list-item text, `.85rem` calendar cells, …), instead of
+ * being forced to 16px on every open. Only an ACTUAL divergence (a
+ * consumer's stylesheet, a different field wrapper with its own baseline)
+ * republishes the tokens.
+ *
+ * @param fieldRef  ref to the field sub-component (e.g. the wrapped
+ *                  `<origam-text-field>`). Its `$el` is the DOM root the
+ *                  typography is measured FROM.
+ * @param isOpen    ref toggled when the teleported surface opens; the
+ *                  measurement re-runs on every open (the consumer's CSS
+ *                  can change between opens — a live theme switch, a
+ *                  responsive breakpoint, …).
+ * @param extraVars given the resolved `font-size`, returns the extra
+ *                  `{ '--origam-…---font-size': value }` entries for the
+ *                  specific tokens the surface's own `rem`-sized text
+ *                  reads. Read the surface's SCSS before adding one —
+ *                  republishing a var nothing consumes is a no-op.
+ * @param measureSelector  selector for the element the typography is read
+ *                  from, resolved within `fieldRef`'s root (defaults to
+ *                  `'.origam-field'`). Falls back to the root itself when
+ *                  no match is found.
+ * @param neutralFontSize  the `measureSelector` element's OWN unstyled
+ *                  `font-size` (defaults to `'16px'`, `.origam-field`'s
+ *                  literal default). When the measured value still equals
+ *                  this, the bridge is a no-op for this open — see above.
+ *
+ * @example
+ * const { typographyStyles } = useTeleportTypography(origamTextFieldRef, menu, (fontSize) => ({
+ *     '--origam-list-item__title---font-size': fontSize,
+ *     '--origam-list-item__subtitle---font-size': `calc(${ fontSize } * 0.875)`
+ * }))
+ * // …
+ * contentProps: { style: [typographyStyles.value, consumerContentProps.style] }
+ */
+export declare function useTeleportTypography(fieldRef: Ref<{
+    $el?: HTMLElement;
+} | undefined>, isOpen: Ref<boolean>, extraVars: (fontSize: string) => Record<string, string>, measureSelector?: string, neutralFontSize?: string): {
+    typographyStyles: Ref<Record<string, string>, Record<string, string>>;
+};

package/dist/src/composables/Commons/teleport-typography.composable.js

@@ -0,0 +1,30 @@
+import { nextTick, ref, watch } from "vue";
+export function useTeleportTypography(fieldRef, isOpen, extraVars, measureSelector = ".origam-field", neutralFontSize = "16px") {
+  const typographyStyles = ref({});
+  const fieldElement = () => {
+    const root = fieldRef.value?.$el;
+    if (!root || typeof root.querySelector !== "function") return void 0;
+    return root.querySelector(measureSelector) ?? root;
+  };
+  const sync = () => {
+    const el = fieldElement();
+    if (!el || typeof window === "undefined") return;
+    const styles = window.getComputedStyle(el);
+    const fontSize = styles.fontSize;
+    if (!fontSize) return;
+    if (fontSize === neutralFontSize) {
+      typographyStyles.value = {};
+      return;
+    }
+    typographyStyles.value = {
+      "font-family": styles.fontFamily,
+      "font-size": fontSize,
+      "letter-spacing": styles.letterSpacing,
+      ...extraVars(fontSize)
+    };
+  };
+  watch(isOpen, (open) => {
+    if (open) nextTick(sync);
+  });
+  return { typographyStyles };
+}

package/dist/src/composables/index.cjs

@@ -588,6 +588,18 @@ Object.keys(_teleport).forEach(function (key) {
     }
   });
 });
+var _teleportTypography = require("./Commons/teleport-typography.composable.cjs");
+Object.keys(_teleportTypography).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _teleportTypography[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _teleportTypography[key];
+    }
+  });
+});
 var _hydration = require("./Commons/hydration.composable.cjs");
 Object.keys(_hydration).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/src/composables/index.d.ts

@@ -46,6 +46,7 @@ export * from './Commons/margin.composable';
 export * from './Commons/lazy.composable';
 export * from './Commons/items.composable';
 export * from './Commons/teleport.composable';
+export * from './Commons/teleport-typography.composable';
 export * from './Commons/hydration.composable';
 export * from './Commons/stack.composable';
 export * from './Commons/activator.composable';

package/dist/src/composables/index.js

@@ -46,6 +46,7 @@ export * from "./Commons/margin.composable.js";
 export * from "./Commons/lazy.composable.js";
 export * from "./Commons/items.composable.js";
 export * from "./Commons/teleport.composable.js";
+export * from "./Commons/teleport-typography.composable.js";
 export * from "./Commons/hydration.composable.js";
 export * from "./Commons/stack.composable.js";
 export * from "./Commons/activator.composable.js";

package/dist/src/utils/Commons/color.util.cjs

@@ -45,10 +45,10 @@ var _consts = require("../../consts/index.cjs");
 var _commons = require("./commons.util.cjs");
 var _console = require("./console.util.cjs");
 function isCssColor(color) {
-  return !!color && (/^(#|var\(--|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\()/i.test(color) || _consts.CSS_NAMED_COLORS.has(color.toLowerCase()));
+  return !!color && (/^(#|var\(--|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color-mix|color)\()/i.test(color) || _consts.CSS_NAMED_COLORS.has(color.toLowerCase()));
 }
 function isParsableColor(color) {
-  return isCssColor(color) && !/^((rgb|hsl)a?\()?var\(--/.test(color);
+  return isCssColor(color) && !/^((rgb|hsl)a?\()?var\(--/.test(color) && !/^color-mix\(/i.test(color);
 }
 function parseColor(color) {
   if (typeof color === "number") {

package/dist/src/utils/Commons/color.util.d.ts

@@ -3,15 +3,38 @@ import type { TBgFgRole, TColor, TColorType, THex, THSLA, THSVA, TIntent, TLAB,
  * Recognise any string the CSS engine treats as a colour:
  *   - hex (`#abc`, `#aabbcc`, `#aabbccdd`)
  *   - functional notation (`rgb()`, `rgba()`, `hsl()`, `hsla()`,
- *     `hwb()`, `lab()`, `lch()`, `oklab()`, `oklch()`, `color()`)
+ *     `hwb()`, `lab()`, `lch()`, `oklab()`, `oklch()`, `color()`,
+ *     `color-mix()`)
  *   - CSS variable (`var(--…)`)
  *   - one of the 148 named colours OR a CSS-wide keyword
  *     (`transparent`, `currentColor`, `inherit`, …)
+ *
+ * `color-mix` was added ADR-005 (Kbd pilot): it is a real CSS `<color>`
+ * function (e.g. `color-mix(in srgb, currentColor 8%, transparent)`, the
+ * literal value the pre-migration `OrigamKbd` `tonal` variant SCSS used for
+ * its background). Before this fix the alternation only recognised bare
+ * `color(...)` (CSS Color() Level 4), so `color-mix(...)` silently fell
+ * through — NOT a regression risk: no caller could have been relying on a
+ * `color-mix(...)` string being silently dropped as "expected" behaviour.
+ * `useElevation`'s equivalent custom-value detector
+ * (`CUSTOM_BOX_SHADOW_REGEX`) already listed `color-mix` — this brings
+ * `isCssColor` in line with it.
  */
 export declare function isCssColor(color?: string | null | false): boolean;
 /**
  * Is parsable color.
  *
+ * @description
+ * A CSS colour is "parsable" when `parseColor()` (below) can actually
+ * compute its RGBA components in JS — used to gate the auto-contrast
+ * (`getForeground`) path. `var(--…)` references are excluded because their
+ * final value is only known to the browser. `color-mix(...)` is excluded
+ * for the same reason PLUS one more: its operands are frequently
+ * `currentColor` or another `var(--…)`, which have no static value at all
+ * — `parseColor` has no case for the `color-mix` function and would throw.
+ * `isCssColor` recognising `color-mix` (so it still renders verbatim via
+ * the "custom value" style channel) does NOT make it parsable.
+ *
  * @param color …
  * @returns …
  */

package/dist/src/utils/Commons/color.util.js

@@ -33,10 +33,10 @@ import {
 import { chunk, clamp, has, int, padEnd } from "./commons.util.js";
 import { consoleWarn } from "./console.util.js";
 export function isCssColor(color) {
-  return !!color && (/^(#|var\(--|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\()/i.test(color) || CSS_NAMED_COLORS.has(color.toLowerCase()));
+  return !!color && (/^(#|var\(--|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color-mix|color)\()/i.test(color) || CSS_NAMED_COLORS.has(color.toLowerCase()));
 }
 export function isParsableColor(color) {
-  return isCssColor(color) && !/^((rgb|hsl)a?\()?var\(--/.test(color);
+  return isCssColor(color) && !/^((rgb|hsl)a?\()?var\(--/.test(color) && !/^color-mix\(/i.test(color);
 }
 export function parseColor(color) {
   if (typeof color === "number") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.14.0",
+  "version": "2.14.1",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [
@@ -106,6 +106,11 @@
     "styles:build": "sass src/assets/scss/main.scss src/assets/css/main.css --no-source-map --style=compressed",
     "tokens:watch": "node scripts/build-tokens.mjs --watch",
     "tokens:lint": "node scripts/build-tokens.mjs --dry-run --strict",
+    "guards": "node scripts/guards/run-all.mjs",
+    "guards:declarations": "node scripts/guards/no-declarations-in-vue.mjs",
+    "guards:variant-css": "node scripts/guards/no-variant-css.mjs",
+    "guards:instance-types": "node scripts/guards/instance-types.mjs",
+    "guards:naming": "node scripts/guards/file-naming.mjs",
     "prepublishOnly": "pnpm run build",
     "prepack": "node -e \"require('fs').copyFileSync('../../CHANGELOG.md','CHANGELOG.md')\""
   },
@@ -136,7 +141,7 @@
     "@tokens-studio/sd-transforms": "^2.0.3",
     "@types/node": "^26.1.0",
     "@vitejs/plugin-vue": "^6.0.7",
-    "sass": "^1.89.2",
+    "sass": "^1.102.0",
     "style-dictionary": "^5.5.0",
     "ts-transformer-keys": "^0.4.4",
     "typescript": "^6.0.3",