origam 2.26.1 → 2.26.2

package/CHANGELOG.md

@@ -18,6 +18,12 @@ 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)

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.26.1",
+  "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": [