@sondalab/ui-kit 0.3.0 → 0.4.0

package/agent/HANDOFF.md

@@ -37,6 +37,9 @@ For elements already named eyebrow/tag, the recipe (mono + uppercase + tracking
 ### Font-family  *(check 5 — dropped, not deferred)*
 Evaluated and **dropped**: the only literal faces across the calibrated surfaces are introspect's IBM Plex Mono (a blessed mono substitute) and spexr's editor font (blessed). A font check would yield nothing. Just keep using `var(--sl-font-display|sans|mono)`; the only allowed substitution is a *narrower mono* where fixed pixel grids demand it (`design-language.md` L1), recorded as a blessed `font` deviation.
 
+### Accent step derivation  *(check 7 — advisory this release, mechanical next)*
+`design-language.md` §Decision 2 now requires each accent step (`--sl-accent-hover/active/subtle`) to be a `color-mix()` off `--sl-accent-default`, not a baked literal — a literal is allowed only as an explicit per-(theme, step) token override with a reason (e.g. dark-active `#E0942A`). This is **syntactically checkable** (unlike the value-level checks above): a step declaration whose value is a bare hex/`rgb()` and is *not* a registered token override is a derivation defect. It ships **advisory** this release — judge it by eye, flag it in the migrate/author report, but the script does not yet fail on it. The mechanical check lands next release once the token-override escape-hatch list is settled. **How to judge:** open the product's theme layer; every accent step should read `color-mix(in srgb, var(--sl-accent-default) …)` or be a `sondalab.tokens.json accent.*` override carrying a `why`.
+
 ## Structural / judgement rules the script never sees
 
 These are always yours (the `sl-ds-auditor` subagent covers them by reading `design-language.md`), scoped to the substrate's Required column in `substrate-matrix.json`:

package/agent/blessed/default.json

@@ -13,6 +13,7 @@
     {
       "kind": "color",
       "values": [
+        "#F7B863",
         "#8b96ff",
         "#a3acff",
         "rgba(139,150,255,0.12)",
@@ -20,7 +21,7 @@
         "#5ad1ff",
         "rgba(46,230,192,0.12)"
       ],
-      "why": "The showcase demonstrates the per-product accent registry (design-language.md §Decision 2): spexr's indigo and introspect's cyan (plus derived hover/subtle) appear as demo swatch content, not as a second accent adopted by the showcase. Blessed by exact value, not selector — the swatches live in a JS object with no distinctive selector."
+      "why": "The showcase demonstrates the per-product accent registry (design-language.md §Decision 2): spexr's indigo and introspect's cyan (plus derived hover/subtle) appear as demo swatch content, not as a second accent adopted by the showcase. Blessed by exact value, not selector — the swatches live in a JS object with no distinctive selector. #F7B863 is the amber demo hover, hardcoded in the same switcher object; once the dark accent hover became color-mix-derived it left the token allowlist, so it is blessed here alongside the other demo hovers (the switcher itself re-deriving is deferred to the migration)."
     }
   ]
 }

package/agent/design-language.md

@@ -44,7 +44,7 @@ Shared grammar, per-product accent. The brand default is amber (with a teal *dep
 
 Machine values of this table: `packages/ui-kit/agent/accent-registry.json` (consumed by the compliance audit). The table above stays authoritative for the reasoning; `scripts/accent-registry.test.mjs` asserts product-set parity between the two.
 
-Rule: a product picks **one** accent hue and derives hover/active/subtle from it; it never introduces a second chromatic accent. Semantic status colours (ok/warn/err) are separate from the accent and shared — but the `--sl-status-*` tokens are tuned for **on-canvas** use. On an inverted surface (a block whose background is the strongest neutral, e.g. an ink-on-paper output panel) they lose contrast; there, derive an on-ink status pair locally rather than using the canvas tokens (daos `.artifact .ok`/`.no` are a correct instance of this — kept as light-on-ink greens/reds, not swapped to the darker canvas tokens).
+Rule: a product picks **one** accent hue and derives hover/active/subtle from it; it never introduces a second chromatic accent. **Derivation is concrete:** the generator emits each accent step as a `color-mix()` off `--sl-accent-default` (e.g. `--sl-accent-hover: color-mix(in srgb, var(--sl-accent-default) 89%, black)`), so a product override sets **only the hue** and the family re-derives. A baked step *literal* is allowed only as an explicit per-(theme, step) override in `sondalab.tokens.json` `accent.*` carrying a reason — the escape hatch for the few steps a straight mix can't reproduce (e.g. dark-active's slight hue rotation). This is enforced advisorily today (a judgement note); the audit gains a mechanical derivation check in a following release (see `packages/ui-kit/agent/HANDOFF.md`). Semantic status colours (ok/warn/err) are separate from the accent and shared — but the `--sl-status-*` tokens are tuned for **on-canvas** use. On an inverted surface (a block whose background is the strongest neutral, e.g. an ink-on-paper output panel) they lose contrast; there, derive an on-ink status pair locally rather than using the canvas tokens (daos `.artifact .ok`/`.no` are a correct instance of this — kept as light-on-ink greens/reds, not swapped to the darker canvas tokens).
 
 ## The family-resemblance layer
 

package/components.css

@@ -24,9 +24,12 @@
 :root {
   /* accent */
   --slc-accent:        var(--sl-accent-default, #B56A0C);
-  --slc-accent-hover:  var(--sl-accent-hover,   #A05F0A);
-  --slc-accent-active: var(--sl-accent-active,  #8A5109);
-  --slc-accent-subtle: var(--sl-accent-subtle,  rgba(197,122,22,0.12));
+  /* Steps derive from --slc-accent so a bare --sl-accent-default override
+     (or a Tier-B product that maps only --slc-accent) re-derives the whole
+     family — no amber leak. The theme layer still wins when it sets the step. */
+  --slc-accent-hover:  var(--sl-accent-hover,   color-mix(in srgb, var(--slc-accent) 89%, black));
+  --slc-accent-active: var(--sl-accent-active,  color-mix(in srgb, var(--slc-accent) 76%, black));
+  --slc-accent-subtle: var(--sl-accent-subtle,  color-mix(in srgb, var(--slc-accent) 12%, transparent));
   --slc-on-accent:     var(--sl-text-on-accent, #FFFFFF);
   /* surfaces + text */
   --slc-surface:       var(--sl-bg-surface,        #F6F1E6);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sondalab/ui-kit",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Sondalab design tokens as CSS custom properties + the agentic core: component catalog, compliance audit (sl-audit), and author/migrate/adopt workflows.",
   "license": "MIT",
   "author": "marcellobarile",

package/themes/dark.css

@@ -16,9 +16,9 @@
   --sl-status-danger: #f87171;
   --sl-status-info: #38bdf8;
   --sl-accent-default: #F5A83C;
-  --sl-accent-hover: #F7B863;
+  --sl-accent-hover: color-mix(in srgb, var(--sl-accent-default) 80%, white);
   --sl-accent-active: #E0942A;
-  --sl-accent-subtle: rgba(245,168,60,0.16);
+  --sl-accent-subtle: color-mix(in srgb, var(--sl-accent-default) 16%, transparent);
   --sl-accent-depth: #35A0B4;
   --sl-focus-ring: #F5A83C;
 }

package/themes/high-contrast.css

@@ -16,8 +16,8 @@
   --sl-status-danger: #ff5555;
   --sl-status-info: #00ffff;
   --sl-accent-default: #ffff00;
-  --sl-accent-hover: #ffffa0;
-  --sl-accent-active: #cccc00;
+  --sl-accent-hover: color-mix(in srgb, var(--sl-accent-default) 37%, white);
+  --sl-accent-active: color-mix(in srgb, var(--sl-accent-default) 80%, black);
   --sl-accent-subtle: #1a1a00;
   --sl-accent-depth: #00ffff;
   --sl-focus-ring: #ffff00;

package/themes/light.css

@@ -16,8 +16,8 @@
   --sl-status-danger: #dc2626;
   --sl-status-info: #0284c7;
   --sl-accent-default: #B56A0C;
-  --sl-accent-hover: #A05F0A;
-  --sl-accent-active: #8A5109;
+  --sl-accent-hover: color-mix(in srgb, var(--sl-accent-default) 89%, black);
+  --sl-accent-active: color-mix(in srgb, var(--sl-accent-default) 76%, black);
   --sl-accent-subtle: rgba(197,122,22,0.12);
   --sl-accent-depth: #14606C;
   --sl-focus-ring: #B56A0C;