@godxjp/ui 25.4.0 → 26.0.0

package/dist/app/theme-axes.js

@@ -60,14 +60,16 @@ function applyPrimaryColor(root, color, foreground) {
     const hue = delta === 0 ? 0 : 60 * (max === r ? ((g - b) / delta + 6) % 6 : max === g ? (b - r) / delta + 2 : (r - g) / delta + 4);
     return `${hue} ${saturation * 100}% ${lightness * 100}%`;
   };
-  const away = luminance(text) > 0.5 ? 0 : 1;
-  const shade = (amount) => hsl(rgb.map((channel) => channel * (1 - amount) + away * amount));
+  const polarity = luminance(text) > 0.5 ? "darken" : "lighten";
   const palette = {
     "--primary": hsl(rgb),
     "--primary-foreground": hsl(text),
-    "--primary-hover": shade(0.12),
-    "--primary-active": shade(0.24),
-    "--primary-border": hsl(rgb),
+    "--primary-hover": "initial",
+    "--primary-active": "initial",
+    "--primary-border": "initial",
+    "--control-outline": "initial",
+    "--primary-hover-channels": `var(--primary-hover-${polarity}-channels)`,
+    "--primary-active-channels": `var(--primary-active-${polarity}-channels)`,
     "--ring": hsl(rgb)
   };
   const previous = Object.keys(palette).map((key) => [

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "25.4.0",
+  "version": "26.0.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/styles/base.css

@@ -100,8 +100,12 @@
   --color-link: hsl(var(--text-link));
   --color-brand: hsl(var(--text-brand));
 
-  --color-primary-hover: hsl(var(--primary-hover));
-  --color-primary-active: hsl(var(--primary-active));
+  --color-primary-hover: hsl(
+    var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels))
+  );
+  --color-primary-active: hsl(
+    var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))
+  );
   --color-secondary-hover: hsl(var(--secondary-hover));
   --color-secondary-active: hsl(var(--secondary-active));
   --color-destructive-hover: hsl(var(--destructive-hover));

package/dist/styles/control.css

@@ -111,7 +111,7 @@
   }
 
   .ui-button--default:hover {
-    background: hsl(var(--primary-hover));
+    background: hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)));
   }
 
   .ui-button--destructive {

package/dist/styles/focus-ring.css

@@ -114,8 +114,29 @@
   :root[data-focus-outline="on"] .ui-otp-slot[data-active="true"],
   :root[data-focus-outline="on"]
     .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
-    --tw-ring-shadow: var(--focus-field-shadow);
-    box-shadow: var(--focus-field-shadow);
+
+    --tw-ring-shadow: var(
+      --focus-field-shadow,
+      0 0 0 var(--focus-ring-glow-width)
+        hsl(
+          var(
+              --focus-ring-glow-color,
+              var(--control-outline, from hsl(var(--primary)) var(--control-outline-channels))
+            ) /
+            var(--focus-ring-glow-alpha)
+        )
+    );
+    box-shadow: var(
+      --focus-field-shadow,
+      0 0 0 var(--focus-ring-glow-width)
+        hsl(
+          var(
+              --focus-ring-glow-color,
+              var(--control-outline, from hsl(var(--primary)) var(--control-outline-channels))
+            ) /
+            var(--focus-ring-glow-alpha)
+        )
+    );
   }
 
   :root[data-focus-outline="on"]

package/dist/styles/shell-layout.css

@@ -1651,7 +1651,7 @@
         transparent
       )
     );
-    color: var(--sidebar-item-active-foreground, hsl(var(--primary)));
+    color: var(--sidebar-item-active-foreground, hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))));
     font-weight: var(--font-weight-medium);
   }
 
@@ -1768,7 +1768,7 @@
 
   .sb-nav-item--sub[data-active="true"] {
     background: transparent;
-    color: var(--sidebar-item-active-foreground, hsl(var(--primary)));
+    color: var(--sidebar-item-active-foreground, hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))));
     font-weight: var(--font-weight-medium);
   }
 

package/dist/styles/text-layout.css

@@ -231,7 +231,7 @@
     border: 0;
     background: none;
     padding: 0;
-    color: var(--text-action-color);
+    color: var(--text-action-color, hsl(var(--primary)));
     font: inherit;
     cursor: pointer;
     vertical-align: baseline;
@@ -242,7 +242,10 @@
   }
   .ui-typography-action:hover,
   .ui-typography-action:focus-visible {
-    color: var(--text-action-color-hover);
+    color: var(
+      --text-action-color-hover,
+      hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)))
+    );
   }
 
   .ui-typography-action[data-copied] {

package/dist/tokens/axes.css

@@ -63,8 +63,8 @@
 
 :root[data-focus-outline="on"] {
   --focus-outline: 1;
-  --focus-field-shadow: 0 0 0 var(--focus-ring-glow-width)
-    hsl(var(--focus-ring-glow-color) / var(--focus-ring-glow-alpha));
+
+  --focus-field-shadow: initial;
 }
 
 :root[data-focus-outline="off"] {

package/dist/tokens/components/text.css

@@ -12,8 +12,9 @@
 
   --text-action-gap: var(--space-1);
 
-  --text-action-color: hsl(var(--primary));
-  --text-action-color-hover: hsl(var(--primary-hover));
+  --text-action-color: initial;
+
+  --text-action-color-hover: initial;
 
   --text-action-size: 1em;
 

package/dist/tokens/derived.css

@@ -2,17 +2,27 @@
 
 :root {
 
-  --primary-hover: 268.7 100% 41.6%;
+  --primary-hover: initial;
+  --primary-active: initial;
+  --primary-border: initial;
+  --control-outline: initial;
 
-  --primary-active: 268.7 100% 34.5%;
+  --primary-hover-darken-channels: h s calc(l - 8.4);
+  --primary-active-darken-channels: h s calc(l - 15.5);
+  --primary-hover-lighten-channels: h s calc(l + 5.8);
+  --primary-active-lighten-channels: h s calc(l + 11.6 - 17.4 * clamp(0, (l - 83.4) * 1000, 1));
 
-  --primary-border: 268.7 68% 66%;
-  --destructive-hover: 359 50.6% 53.1%;
-  --destructive-active: 355 70.6% 33.3%;
+  --primary-hover-channels: var(--primary-hover-darken-channels);
+  --primary-active-channels: var(--primary-active-darken-channels);
+
+  --primary-border-channels: h calc(s * 0.68) calc(l + 16);
 
-  --control-outline: 268.7 100% 44.7%;
+  --control-outline-channels: h s calc(l - 5.3);
   --control-outline-alpha: 0.11;
 
+  --destructive-hover: 359 50.6% 53.1%;
+  --destructive-active: 355 70.6% 33.3%;
+
   --control-outline-error: 4.3 87.6% 34.7%;
   --control-outline-error-alpha: 0.09;
 
@@ -21,20 +31,36 @@
 
 .dark,
 :root[data-theme="dark"] {
+  --primary-hover-channels: var(--primary-hover-lighten-channels);
+  --primary-active-channels: var(--primary-active-lighten-channels);
 
-  --primary-hover: 268.7 100% 92.7%;
+  --primary-border-channels: h calc(s * 0.467) calc(l * 0.27043);
 
-  --primary-active: 268.7 100% 81.1%;
+  --control-outline-channels: h calc(s * 0.99) calc(l - 25.1);
+  --control-outline-alpha: 0.29;
 
-  --primary-border: 268.7 46.7% 23.5%;
   --destructive-hover: 358.8 42.3% 53.1%;
   --destructive-active: 357.3 50.6% 34.1%;
 
-  --control-outline: 268.7 99% 61.8%;
-  --control-outline-alpha: 0.29;
-
   --control-outline-error: 351.5 98.3% 53.5%;
   --control-outline-error-alpha: 0.06;
 
   --ring: var(--primary);
 }
+
+@supports not (color: hsl(from red h s l)) {
+  :root {
+    --primary-hover: 268.7 100% 41.6%;
+    --primary-active: 268.7 100% 34.5%;
+    --primary-border: 268.7 68% 66%;
+    --control-outline: 268.7 100% 44.7%;
+  }
+
+  .dark,
+  :root[data-theme="dark"] {
+    --primary-hover: 268.7 100% 92.7%;
+    --primary-active: 268.7 100% 81.1%;
+    --primary-border: 268.7 46.7% 23.5%;
+    --control-outline: 268.7 99% 61.8%;
+  }
+}

package/dist/tokens/foundation.css

@@ -125,11 +125,11 @@
   --focus-ring-opacity: 1;
 
   --focus-ring-glow-width: var(--control-outline-width);
-  --focus-ring-glow-color: var(--control-outline);
+
+  --focus-ring-glow-color: initial;
   --focus-ring-glow-alpha: var(--control-outline-alpha);
 
-  --focus-field-shadow: 0 0 0 var(--focus-ring-glow-width)
-    hsl(var(--focus-ring-glow-color) / var(--focus-ring-glow-alpha));
+  --focus-field-shadow: initial;
 
   --focus-ring-offset: var(--focus-outline-offset);
 

package/docs/CUSTOMER-THEMING.md

@@ -230,7 +230,43 @@ Scope the overrides under a tenant attribute instead of `:root`. The colour util
 }
 ```
 
-Set `data-tenant` on the app root. Two CSS-inheritance caveats for the **scoped** case (a single `:root` brand theme is unaffected — there, overriding just `--radius` / `--shadow-color` cascades):
+Set `data-tenant` on the app root.
+
+#### What follows `--primary`, and what you still set (gh#678)
+
+The interaction states are **derived from the `--primary` in scope, at the element that paints them** — on `<html>` or on any nested `[data-tenant]` / `[data-program]` element, in both themes. You do not declare them:
+
+| Token | Follows `--primary`? | Default (evaluated at the painting element) |
+| --- | --- | --- |
+| `--primary-hover` | **yes** — Button hover, `bg-primary-hover`, Typography action hover | `hsl(from hsl(var(--primary)) var(--primary-hover-channels))` — light `h s calc(l - 8.4)`, dark `h s calc(l + 5.8)` |
+| `--primary-active` | **yes** — `bg-primary-active`, the open sidebar row's label | light `h s calc(l - 15.5)`; dark one step further up, reflected to one step down past 83.4% L |
+| `--control-outline` | **yes** — the focused field's halo (`--control-outline-alpha` stays per theme) | light `h s calc(l - 5.3)`, dark `h calc(s * 0.99) calc(l - 25.1)` |
+| `--primary-border` | **yes** (painted by no package surface; kept for the measurement in DESIGN-AUTHORITY) | light `h calc(s * 0.68) calc(l + 16)`, dark `h calc(s * 0.467) calc(l * 0.27043)` |
+| `--sidebar-item-active-foreground` | **yes** — defaults to the live `--primary-active` | — |
+| `--primary-foreground` | **no — set it** | the label on a filled primary; you choose it for your seed |
+| `--ring` | **only on the element that declares `--primary`** — set it in a nested scope | `var(--primary)` on `:root` / `.dark`. `--ring` is a public role read as `hsl(var(--ring))` in consumer CSS, so it cannot become a live default; a scope below `<html>` inherits the root's |
+| `--destructive-*`, `--control-outline-error` | no — not brand | literals |
+
+On the package seed these produce exactly the identity kit values the tier used to hard-code (`#6500d4` / `#5400b0` light, `#ecdaff` / `#cd9fff` dark). Engines without CSS relative colour (Chrome/Edge 111–118) get those literals and do **not** follow a consumer seed.
+
+**Rules that come with it:**
+
+- **Override a state only by setting its knob** (`--primary-hover: 221 90% 72%`). A set knob wins over the derived default, in its own scope and below.
+- **Read a state through its fallback, not bare.** The four knobs are `initial` so that the default can resolve at the painting element (docs/TOKENS.md, the freeze rule). `hsl(var(--primary-hover))` on its own therefore paints nothing — use the utility (`bg-primary-hover`) or `hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)))`.
+- **Label polarity.** The theme's pair steps AWAY from that theme's default label: `darken` under a light label, `lighten` under a dark one, which keeps a label that clears 4.5:1 at rest at 4.5:1 in hover and pressed for every seed (measured, `derived-seed-sweep.test.ts`). If your seed needs the OTHER polarity of label (a pale yellow with dark text in the light theme), point the pair at it too — `applyPrimaryColor()` does this automatically from the label it picks:
+
+```css
+[data-tenant="sunny"] {
+  --primary: 48 100% 60%;
+  --primary-foreground: 48 9% 9%;
+  --primary-hover-channels: var(--primary-hover-lighten-channels);
+  --primary-active-channels: var(--primary-active-lighten-channels);
+}
+```
+
+- **The open sidebar row** is legible (≥ 4.5:1 on the 12% tint) for any seed that is itself legible as text on the page. A seed that is not (a pale seed on the light page, a very dark one on the dark page) needs `--sidebar-item-active-foreground` set.
+
+Two more CSS-inheritance caveats for the **scoped** case (a single `:root` brand theme is unaffected — there, overriding just `--radius` / `--shadow-color` cascades):
 
 - **Radius & shadow-tint don't cascade from a scoped anchor.** `--radius-{xs…2xl}`, `--card-radius`, `--control-radius` and the `--shadow-{xs…2xl}` ramp are computed at their declaring element, so a scoped `--radius` / `--shadow-color` override won't reach them. For a scoped re-theme, re-declare the derived tokens you need (e.g. `--card-radius: var(--radius)`, or set `--card-shadow` to a literal value).
 ````

package/docs/DESIGN-AUTHORITY.md

@@ -437,11 +437,15 @@ anywhere in `src/`, or leaves a trace in `dist/`. Deleting that gate re-opens th
 spacer. This library takes a different, two-form convention instead — widely used in enterprise
 component libraries, and surveyed across several before it was adopted here:
 
-- **Field** — the boundary RECOLOURS to the primary at its unchanged hairline width, plus
-  `box-shadow: 0 0 0 var(--control-outline-width) var(--control-outline)`. A Select emits the same
+- **Field** — the boundary RECOLOURS to the primary at its unchanged hairline width, plus a
+  `--control-outline-width` halo in the `--control-outline` colour. A Select emits the same
   declarations as an Input, which is why the two focus identically.
-- **Non-field** — an outline outside the box model:
-  `outline: var(--focus-outline-weight) solid var(--primary-border); outline-offset: 1px`.
+- **Non-field** — an outline outside the box model, `--focus-outline-weight` thick in the
+  `--primary-border` colour, `outline-offset: 1px`.
+
+Since 26.0.0 (gh#678) `--control-outline` and `--primary-border` are `initial` knobs whose default
+derives from `--primary` at the painting element, so a bare `var(--control-outline)` paints
+**nothing**. Read them through their fallback — see `docs/CUSTOMER-THEMING.md` §Multi-tenant.
 
 **Why this shape wins.** The library previously shipped an opaque brand ring drawn immediately
 outside an untouched grey border — two outlines of different colours claiming the same edge — and a

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "25.4.0",
-  "godxUiMcp": "25.4.0",
+  "version": "26.0.0",
+  "godxUiMcp": "26.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",