origam 2.26.0 → 2.26.2

package/CHANGELOG.md

@@ -18,6 +18,19 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.26.2] - 2026-10-15
+
+### Fixed — un theme sans `name` avec `mode` l'emporte sur la palette integree du meme mode (#1102)
+
+`themeSelector({ mode: 'dark' })` emettait `[data-mode="dark"]` (0,1,0) face a `[data-mode="dark"]:not([data-theme="light"])` (0,2,0) de `dark.css` : le theme sombre sans nom perdait sur `theme=dark/mode=dark`, `mode=dark` seul et `theme=site/mode=dark` (mesure Chromium : `--origam-color__action--primary---bg` restait a `#7c3aed`). Il peignait aussi sombre sous `data-theme="light" data-mode="dark"` par egalite d'ordre source (regle #807 violee). Le selecteur est desormais `html[data-mode="…"]` (dark : `(0,2,1)`, `:not([data-theme="light"])` conserve ; light : `(0,1,1)`), independant de l'ordre d'injection, et reste sous les blocs `:root:root[data-theme]` des marques nommees. Le doc `theme.interface.ts` (« scoped to `:root` ») est corrige. Spec : `unnamed-theme-specificity.spec.ts`.
+
+## [2.26.1] - 2026-10-14
+
+### Fixed — `warnLegacyColor` : dev uniquement, et plus d'avertissement pour `var()` / `color-mix()` (#1099)
+
+- L'avertissement « received a raw color » est desormais garde par `import.meta.env?.DEV` (meme garde que `warnUnsupportedProp`) : il ne sort plus en production et la chaine disparait d'un bundle de production (`.output` marketing : 0 occurrence).
+- `bgColor="var(--brand)"` / `color="color-mix(...)"` ne sont plus traites comme une couleur brute : ce sont le chemin de migration recommande. Le rendu est inchange (canal custom / style inline). `#fff`, `rgb()` etc. avertissent toujours en dev, une fois par valeur.
+
 ## [2.26.0] - 2026-10-14
 
 ### Changed — `OrigamCard`, `OrigamExpansionPanel(Content)`, `OrigamDataTableRows` : le skeleton suit l'anatomie du conteneur (#1073 lot 2b, #1081, #1076)

package/dist/src/interfaces/Commons/theme.interface.d.ts

@@ -21,8 +21,11 @@ export interface IOrigamThemeSingletonState {
 /**
  * Runtime theme object ingested by `createOrigam({ themes })`. At install time
  * the DS resolves it to a block of `--origam-*` CSS variables injected into
- * `<head>`, scoped to `:root` (or `[data-theme="<name>"]` when `name` is set,
- * optionally narrowed by `[data-mode]` when `mode` is set).
+ * `<head>`, scoped by `name` / `mode` (see `themeSelector`):
+ * no `name` and no `mode` → `:root`; no `name` but a `mode` → `html[data-mode]`
+ * (plus a bare `[data-mode]` twin for sub-trees), specific enough to beat the
+ * built-in palette of that mode and still lose to every named brand (#1102);
+ * a `name` → `[data-theme="<name>"]`, optionally narrowed by `[data-mode]`.
  *
  * ## A theme has exactly THREE authoring surfaces
  *

package/dist/src/utils/Commons/apply-theme.util.cjs

@@ -74,7 +74,11 @@ function themeSelector(theme) {
   const hasName = typeof theme.name === "string" && theme.name.length > 0;
   const hasMode = theme.mode === "light" || theme.mode === "dark";
   if (!hasName && !hasMode) return ":root";
-  if (!hasName) return `[data-mode="${theme.mode}"]`;
+  if (!hasName) {
+    const root = theme.mode === "dark" ? 'html[data-mode="dark"]:not([data-theme="light"])' : 'html[data-mode="light"]';
+    const subtree = theme.mode === "dark" ? '[data-mode="dark"]:not([data-theme]):not([data-theme="light"])' : '[data-mode="light"]:not([data-theme])';
+    return `${root}, ${subtree}`;
+  }
   const modeAttr = hasMode ? `[data-mode="${theme.mode}"]` : "";
   const attrs = `[data-theme="${theme.name}"]${modeAttr}`;
   return `:root:root${attrs}, ${attrs}`;

package/dist/src/utils/Commons/apply-theme.util.d.ts

@@ -27,7 +27,8 @@ export declare function resolveThemeVars(theme: IOrigamTheme): TThemeVars;
  * Compute the CSS selector a theme block targets, from its `name` / `mode`:
  *   - neither            → `:root`
  *   - name only          → `[data-theme="<name>"]`
- *   - mode only          → `[data-mode="<mode>"]`
+ *   - mode only          → `html[data-mode="<mode>"], [data-mode="<mode>"]:not([data-theme])`
+ *                          (dark adds `:not([data-theme="light"])`, see #1102)
  *   - name + mode        → `[data-theme="<name>"][data-mode="<mode>"]`
  *
  * A `mode` of `'auto'` is treated as "no mode scoping".

package/dist/src/utils/Commons/apply-theme.util.js

@@ -55,7 +55,11 @@ export function themeSelector(theme) {
   const hasName = typeof theme.name === "string" && theme.name.length > 0;
   const hasMode = theme.mode === "light" || theme.mode === "dark";
   if (!hasName && !hasMode) return ":root";
-  if (!hasName) return `[data-mode="${theme.mode}"]`;
+  if (!hasName) {
+    const root = theme.mode === "dark" ? 'html[data-mode="dark"]:not([data-theme="light"])' : 'html[data-mode="light"]';
+    const subtree = theme.mode === "dark" ? '[data-mode="dark"]:not([data-theme]):not([data-theme="light"])' : '[data-mode="light"]:not([data-theme])';
+    return `${root}, ${subtree}`;
+  }
   const modeAttr = hasMode ? `[data-mode="${theme.mode}"]` : "";
   const attrs = `[data-theme="${theme.name}"]${modeAttr}`;
   return `:root:root${attrs}, ${attrs}`;

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

@@ -408,7 +408,9 @@ function tokenForegroundForIntent(intent) {
 }
 const _warnedColorKeys = /* @__PURE__ */new Set();
 function warnLegacyColor(kind, value) {
+  if (!process.env?.DEV) return;
   if (typeof console === "undefined") return;
+  if (/^\s*(?:var|color-mix)\(/i.test(value)) return;
   const key = `${kind}::${value}`;
   if (_warnedColorKeys.has(key)) return;
   _warnedColorKeys.add(key);

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

@@ -470,6 +470,13 @@ export declare function tokenForegroundForIntent(intent: TIntent): string;
  * Warn (once per prop / value) that the consumer passed a raw CSS color
  * to a prop where the design system expects a `TIntent`. Raw color
  * support is deprecated and will be removed in v3.0.0.
+ *
+ * @description
+ * Dev-only (`import.meta.env.DEV`, same gate as `warnUnsupportedProp`), so
+ * the message is tree-shaken from production bundles. `var(--x)` and
+ * `color-mix(...)` are NOT raw colors: they are the migration path the DS
+ * recommends (token reference / derived from tokens) and are rendered
+ * through the custom-value channel without any warning.
  ********************************************************/
 export declare function warnLegacyColor(kind: 'color' | 'bgColor', value: string): void;
 /*********************************************************

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

@@ -314,7 +314,9 @@ export function tokenForegroundForIntent(intent) {
 }
 const _warnedColorKeys = /* @__PURE__ */ new Set();
 export function warnLegacyColor(kind, value) {
+  if (!import.meta.env?.DEV) return;
   if (typeof console === "undefined") return;
+  if (/^\s*(?:var|color-mix)\(/i.test(value)) return;
   const key = `${kind}::${value}`;
   if (_warnedColorKeys.has(key)) return;
   _warnedColorKeys.add(key);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.26.0",
+  "version": "2.26.2",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [