@adminiumjs/tokens 0.1.0-rc.1 → 0.1.2

package/LICENSES/FONTS.md

@@ -14,4 +14,4 @@ and applies to the copies in `src/fonts/`. The fonts are unmodified upstream bui
 permits bundling and redistribution with attribution and prohibits selling the fonts standalone.
 
 CJK locales (`zh_CN`/`zh_TW`) intentionally use system font stacks (see `src/fonts.css`) and vendor
-no CJK fonts — see workplan/02-design-system.md §2.4 and workplan/11-electron.md Open decisions.
+no CJK fonts — see 02-design-system.md §2.4 and 11-electron.md Open decisions.

package/dist/index.d.ts

@@ -2,26 +2,53 @@
  * @adminium/tokens — JS-side constants for the four theming axes plus the pre-hydration
  * script. CSS custom properties live in the sibling .css files; these exports exist so
  * ThemeProvider, Storybook toolbars, charts and the desktop shell never hard-code axis
- * values. See workplan/02-design-system.md §2.5.
+ * values. See 02-design-system.md §2.5.
  */
 /** Theme axis. `system` resolves via `matchMedia("(prefers-color-scheme: dark)")`. */
 export declare const THEMES: readonly ["light", "dark", "system"];
 export type ThemePref = (typeof THEMES)[number];
 /** A resolved theme as stamped on `<html data-theme>`. */
 export type ResolvedTheme = Exclude<ThemePref, "system">;
-/** Accent axis: the 8 switchable palettes (`data-accent`), name → hex. */
+/**
+ * Accent axis: the 8 switchable palettes (`data-accent`), name → LIGHT-theme hex
+ * (`--accent-light` in accents.css).
+ *
+ * This is ONE HALF of the accent. Each palette also has an `--accent-dark` hex that the dark
+ * theme selects into `--accent`, and it is a different colour, drastically so for `black`
+ * (#111111 light, #c9c9d4 dark). Anything that PAINTS an accent must therefore either read the
+ * CSS variable — which already resolves per theme — or pick from {@link ACCENTS_DARK} when the
+ * resolved theme is dark. Rendering `ACCENTS[a]` unconditionally shows the wrong colour on dark;
+ * that is what the accent-picker swatch used to do.
+ */
 export declare const ACCENTS: {
     readonly indigo: "#4f46e5";
-    readonly blue: "#2563eb";
-    readonly teal: "#0d9488";
-    readonly violet: "#7c3aed";
-    readonly rose: "#e11d48";
-    readonly red: "#e5484d";
-    readonly orange: "#ea580c";
+    readonly blue: "#1c59e0";
+    readonly teal: "#007167";
+    readonly violet: "#7936e9";
+    readonly rose: "#c40039";
+    readonly red: "#c0202f";
+    readonly orange: "#b03e00";
     readonly black: "#111111";
 };
+/**
+ * The dark half (`--accent-dark`). Derived from the light ramp by recipe — see the header of
+ * accents.css, which owns the values; these mirror them for JS that cannot read CSS (chart
+ * canvases, the desktop shell, docs tables).
+ */
+export declare const ACCENTS_DARK: {
+    readonly indigo: "#99a5ff";
+    readonly blue: "#7fabff";
+    readonly teal: "#49bbae";
+    readonly violet: "#b39dff";
+    readonly rose: "#ff848c";
+    readonly red: "#ff8582";
+    readonly orange: "#ff885b";
+    readonly black: "#c9c9d4";
+};
 /** `indigo` is the default. */
 export type Accent = keyof typeof ACCENTS;
+/** The accent hex actually painted for a resolved theme. */
+export declare function accentHex(accent: Accent, theme: ResolvedTheme): string;
 /** Density axis (`data-density`). */
 export declare const DENSITIES: readonly ["comfortable", "compact"];
 export type Density = (typeof DENSITIES)[number];

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,sFAAsF;AACtF,eAAO,MAAM,MAAM,sCAAuC,CAAC;AAC3D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAChD,0DAA0D;AAC1D,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAEzD,0EAA0E;AAC1E,eAAO,MAAM,OAAO;;;;;;;;;CASV,CAAC;AACX,+BAA+B;AAC/B,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,OAAO,CAAC;AAE1C,qCAAqC;AACrC,eAAO,MAAM,SAAS,qCAAsC,CAAC;AAC7D,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD,4EAA4E;AAC5E,eAAO,MAAM,IAAI,yBAA0B,CAAC;AAC5C,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;AAExC,mFAAmF;AACnF,eAAO,MAAM,WAAW,mGASd,CAAC;AAEX,uEAAuE;AACvE,eAAO,MAAM,eAAe,4CAA6C,CAAC;AAE1E;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,8DAA8D;AAC9D,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,sFAAsF;AACtF,eAAO,MAAM,MAAM,sCAAuC,CAAC;AAC3D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAChD,0DAA0D;AAC1D,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAEzD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO;;;;;;;;;CASV,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,+BAA+B;AAC/B,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,OAAO,CAAC;AAE1C,4DAA4D;AAC5D,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,GAAG,MAAM,CAEtE;AAED,qCAAqC;AACrC,eAAO,MAAM,SAAS,qCAAsC,CAAC;AAC7D,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD,4EAA4E;AAC5E,eAAO,MAAM,IAAI,yBAA0B,CAAC;AAC5C,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;AAExC,mFAAmF;AACnF,eAAO,MAAM,WAAW,mGASd,CAAC;AAEX,uEAAuE;AACvE,eAAO,MAAM,eAAe,4CAA6C,CAAC;AAE1E;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,8DAA8D;AAC9D,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -2,21 +2,50 @@
  * @adminium/tokens — JS-side constants for the four theming axes plus the pre-hydration
  * script. CSS custom properties live in the sibling .css files; these exports exist so
  * ThemeProvider, Storybook toolbars, charts and the desktop shell never hard-code axis
- * values. See workplan/02-design-system.md §2.5.
+ * values. See 02-design-system.md §2.5.
  */
 /** Theme axis. `system` resolves via `matchMedia("(prefers-color-scheme: dark)")`. */
 export const THEMES = ["light", "dark", "system"];
-/** Accent axis: the 8 switchable palettes (`data-accent`), name → hex. */
+/**
+ * Accent axis: the 8 switchable palettes (`data-accent`), name → LIGHT-theme hex
+ * (`--accent-light` in accents.css).
+ *
+ * This is ONE HALF of the accent. Each palette also has an `--accent-dark` hex that the dark
+ * theme selects into `--accent`, and it is a different colour, drastically so for `black`
+ * (#111111 light, #c9c9d4 dark). Anything that PAINTS an accent must therefore either read the
+ * CSS variable — which already resolves per theme — or pick from {@link ACCENTS_DARK} when the
+ * resolved theme is dark. Rendering `ACCENTS[a]` unconditionally shows the wrong colour on dark;
+ * that is what the accent-picker swatch used to do.
+ */
 export const ACCENTS = {
     indigo: "#4f46e5",
-    blue: "#2563eb",
-    teal: "#0d9488",
-    violet: "#7c3aed",
-    rose: "#e11d48",
-    red: "#e5484d",
-    orange: "#ea580c",
+    blue: "#1c59e0",
+    teal: "#007167",
+    violet: "#7936e9",
+    rose: "#c40039",
+    red: "#c0202f",
+    orange: "#b03e00",
     black: "#111111",
 };
+/**
+ * The dark half (`--accent-dark`). Derived from the light ramp by recipe — see the header of
+ * accents.css, which owns the values; these mirror them for JS that cannot read CSS (chart
+ * canvases, the desktop shell, docs tables).
+ */
+export const ACCENTS_DARK = {
+    indigo: "#99a5ff",
+    blue: "#7fabff",
+    teal: "#49bbae",
+    violet: "#b39dff",
+    rose: "#ff848c",
+    red: "#ff8582",
+    orange: "#ff885b",
+    black: "#c9c9d4",
+};
+/** The accent hex actually painted for a resolved theme. */
+export function accentHex(accent, theme) {
+    return theme === "dark" ? ACCENTS_DARK[accent] : ACCENTS[accent];
+}
 /** Density axis (`data-density`). */
 export const DENSITIES = ["comfortable", "compact"];
 /** Text direction axis (`dir` on `<html>`). `rtl` iff locale is `ar_EG`. */

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,sFAAsF;AACtF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAU,CAAC;AAK3D,0EAA0E;AAC1E,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,SAAS;IACd,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACR,CAAC;AAIX,qCAAqC;AACrC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,aAAa,EAAE,SAAS,CAAU,CAAC;AAG7D,4EAA4E;AAC5E,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,KAAK,CAAU,CAAC;AAG5C,mFAAmF;AACnF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACD,CAAC;AAEX,uEAAuE;AACvE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAU,CAAC;AAE1E;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,aAAa;IACrB,OAAO,EAAE,cAAc;IACvB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,gBAAgB;IACvB,MAAM,EAAE,iBAAiB;IACzB,OAAO,EAAE,kBAAkB;IAC3B,MAAM,EAAE,iBAAiB;IACzB,GAAG,EAAE,cAAc;CACX,CAAC;AAEX,8DAA8D;AAC9D,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,OAAO;CACP,CAAC;AAEX,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,sFAAsF;AACtF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAU,CAAC;AAK3D;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,SAAS;IACd,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,SAAS;IACd,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACR,CAAC;AAKX,4DAA4D;AAC5D,MAAM,UAAU,SAAS,CAAC,MAAc,EAAE,KAAoB;IAC5D,OAAO,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AACnE,CAAC;AAED,qCAAqC;AACrC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,aAAa,EAAE,SAAS,CAAU,CAAC;AAG7D,4EAA4E;AAC5E,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,KAAK,CAAU,CAAC;AAG5C,mFAAmF;AACnF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACD,CAAC;AAEX,uEAAuE;AACvE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAU,CAAC;AAE1E;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,aAAa;IACrB,OAAO,EAAE,cAAc;IACvB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,gBAAgB;IACvB,MAAM,EAAE,iBAAiB;IACzB,OAAO,EAAE,kBAAkB;IAC3B,MAAM,EAAE,iBAAiB;IACzB,GAAG,EAAE,cAAc;CACX,CAAC;AAEX,8DAA8D;AAC9D,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,OAAO;CACP,CAAC;AAEX,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/pre-hydration.d.ts

@@ -1,5 +1,5 @@
 /**
- * Pre-hydration script — flash prevention. See workplan/02-design-system.md §4.3.
+ * Pre-hydration script — flash prevention. See 02-design-system.md §4.3.
  *
  * Inlined (as a string) as the FIRST <script> in <head> of apps/dashboard/index.html,
  * the Electron renderer HTML and Storybook's preview-head.html, before any stylesheet

package/dist/pre-hydration.js

@@ -1,5 +1,5 @@
 /**
- * Pre-hydration script — flash prevention. See workplan/02-design-system.md §4.3.
+ * Pre-hydration script — flash prevention. See 02-design-system.md §4.3.
  *
  * Inlined (as a string) as the FIRST <script> in <head> of apps/dashboard/index.html,
  * the Electron renderer HTML and Storybook's preview-head.html, before any stylesheet

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminiumjs/tokens",
-  "version": "0.1.0-rc.1",
+  "version": "0.1.2",
   "license": "AGPL-3.0-only",
   "repository": {
     "type": "git",

package/src/accents.css

@@ -1,24 +1,125 @@
-/* @adminium/tokens — accent palettes + derived accent tokens. See workplan/02-design-system.md §1.2/§2.3.
+/* @adminium/tokens — accent palettes + derived accent tokens. See 02-design-system.md §1.2/§2.3.
    Everything accent-derived is computed from the single --accent hex; switching data-accent
-   changes exactly one value. Derivation recipes are defined here once, never re-derived in components. */
+   swaps the light/dark pair below, from which the theme resolves that one hex. Derivation
+   recipes are defined here once, never re-derived in components.
+
+   PER-THEME PAIRS. Each accent now declares two canonical hexes — --accent-light and
+   --accent-dark — and the theme selects one into --accent, below. That selection happens here,
+   once: components still read --accent (and --accent-soft/-hover/-border/-selection/-glow) only,
+   and never branch on theme. Before this, the single light-tuned hex was reused unchanged on dark
+   surfaces, where --accent is the focus ring (focus-visible:outline-accent, 113 controls): black
+   measured 1.03:1 and indigo 2.92:1 against --surface #141419 — WCAG 2.4.7 and 1.4.11 failures.
+
+   THE DARK RAMP IS DERIVED FROM THE LIGHT ONE, and that is deliberate — do not re-describe it as
+   hand-tuned. Measured, each chromatic dark hex is exactly: its light sibling's OKLCH hue held
+   fixed (|dh| <= 0.53deg), OKLCH L raised to ~0.75 (the seven land at 0.724-0.754), and chroma
+   pushed to the sRGB gamut edge at that L and hue — six of the seven sit ON the boundary
+   (C / Cmax = 1.000); teal alone is held to 0.82 of it (C 0.104 of a possible 0.128) so a
+   low-chroma light teal does not turn neon in dark.
+   Why a recipe rather than taste: the constraints leave almost nothing to choose. Hue IS the
+   accent's identity and must not move; L is pinned from below by the dark gates listed further
+   down — at gamut-max chroma the minimum L clearing all of them currently measures 0.664 (teal)
+   to 0.702 (rose), and the ramp sits just above that, deliberately not ON it, because that floor
+   moves whenever a tint strength or a surface does (dropping dark --accent-soft from 20% to 12%
+   below lowered it by ~0.045); and with L and hue fixed the only free parameter left is how much
+   chroma sRGB will still hand you. Hand-picking would land in the same place with no way to
+   reproduce or re-derive it. What is gated is the measured contrast, not the provenance:
+   scripts/contrast-check.mjs re-measures every hex on every run.
+   `black` is the one genuinely hand-authored dark value (its hue is not its light sibling's —
+   light black is achromatic; C 0.015 is 18% of the max at its L 0.839). See THE BLACK ACCENT
+   ON DARK below.
+
+   Light hexes moved only where AA forced it: indigo (#4f46e5) and black (#111111) are untouched;
+   blue, teal, violet, rose, red and orange each took the minimum OKLCH-lightness step down that
+   clears the gates (dL from -0.011 for violet to -0.127 for orange), hue held to |dh| <= 0.47deg.
+
+   What every hex here clears (scripts/contrast-check.mjs measures all of it):
+     light  white --accent-fg on --accent >= 4.5:1  (primary-button label; teal/red/orange were
+            3.74/3.91/3.56 and are the reason those three moved)
+            --accent as text on --surface/-2 >= 4.5:1
+            --accent on --accent-soft >= 4.5:1      (active sidebar row, Tag, soft Button) —
+            binding on --surface-3, where the 10% tint darkens the chip most; that pass is what
+            pulls blue/violet down as well, not just the three that failed the button label
+     dark   --accent-fg #0f0f14 on --accent >= 4.5:1
+            --accent on --bg/--surface/-2/-3 >= 4.5:1 — well past the 3:1 non-text floor the
+            focus ring needs, because --accent is also text on those surfaces
+            --accent on --accent-soft >= 4.5:1
+
+   Darkening the light accent, rather than giving teal/red/orange their own --accent-fg, is the
+   deliberate choice: a per-accent --accent-fg would fix only the button label and leave
+   text-accent-on-surface (3.56-3.91:1) and text-accent-on-accent-soft (3.15-3.44:1) failing,
+   and it would put a theme-and-accent conditional back into the token layer. One --accent-fg per
+   theme keeps the contract "components read --accent and --accent-fg, full stop".
+
+   THE BLACK ACCENT ON DARK — the documented override called for in 15-quality.md.
+   `black` is the neutral/monochrome accent: it means "no hue, the strongest neutral this theme
+   can carry", not literally the colour black. In light that resolves to #111111 (18.88:1 on
+   --surface). In dark it cannot: #111111 is 1.03:1 on --surface #141419 — invisible as a focus
+   ring, as a fill and as text. It resolves instead to #c9c9d4, a light cool neutral drawn from
+   the dark neutral family: 11.18:1 on --surface, 9.38:1 on --surface-3, 11.64:1 against
+   --accent-fg — and only 1.49:1 against --fg #f4f4f6, close enough to the text colour that a
+   monochrome accent still reads as monochrome, far enough that an accent fill does not read as
+   plain body text. */
 :root,
-[data-accent="indigo"] { --accent: #4f46e5; }
-[data-accent="blue"]   { --accent: #2563eb; }
-[data-accent="teal"]   { --accent: #0d9488; }
-[data-accent="violet"] { --accent: #7c3aed; }
-[data-accent="rose"]   { --accent: #e11d48; }
-[data-accent="red"]    { --accent: #e5484d; }
-[data-accent="orange"] { --accent: #ea580c; }
-[data-accent="black"]  { --accent: #111111; }
+[data-accent="indigo"] { --accent-light: #4f46e5; --accent-dark: #99a5ff; }
+[data-accent="blue"]   { --accent-light: #1c59e0; --accent-dark: #7fabff; }
+[data-accent="teal"]   { --accent-light: #007167; --accent-dark: #49bbae; }
+[data-accent="violet"] { --accent-light: #7936e9; --accent-dark: #b39dff; }
+[data-accent="rose"]   { --accent-light: #c40039; --accent-dark: #ff848c; }
+[data-accent="red"]    { --accent-light: #c0202f; --accent-dark: #ff8582; }
+[data-accent="orange"] { --accent-light: #b03e00; --accent-dark: #ff885b; }
+[data-accent="black"]  { --accent-light: #111111; --accent-dark: #c9c9d4; }
 
+/* THE 12% TINT CEILING. Every translucent accent tint below is capped at 12%, and that number is
+   measured, not chosen: a tint composites over the surface under it, so text painted on the tint
+   loses contrast, and the weakest gated foreground (--fg-subtle) on the deepest grey
+   (--surface-3) is what binds. With the monochrome accent — the extreme in both themes — the
+   worst pair measures 4.557:1 at 12% and 4.444:1 at 13% in dark (4.698 / 4.595 light). So 12% is
+   the last strength at which ANY neutral copy on ANY accent tint on ANY surface still clears
+   WCAG 1.4.3. scripts/contrast-check.mjs gates all of it (group text-on-soft / text-on-tint).
+
+   That is why the previous values are gone:
+     --accent-soft dark was 20% — measured --fg-muted 4.09:1 and --fg-subtle 3.11:1 on
+       --surface-3, both live in the axe sweep (active nav rows, sticky headers, chips).
+     --accent-selection was 22% — an earlier note here claimed it "keeps --fg at >=9.9:1", which
+       is true and beside the point: ::selection paints over WHATEVER text the user drags across,
+       including secondary and tertiary copy, which measured 4.36:1 and 3.33:1.
+     --accent-border was 25% — and the note here asserted it "has no consumer … so no WCAG
+       obligation attaches". The first half is still literally true of the TOKEN (no `bg-`/
+       `border-accent-border` utility and no var(--accent-border) read outside tailwind.css), but
+       the conclusion was wrong twice over: an unconsumed token still has to be safe for its FIRST
+       consumer, and the same 25%-accent-over-surface recipe IS painted under text today through
+       Tailwind's alpha syntax — RankedEntityList's proportional bar is `bg-accent/25` sitting
+       behind `text-fg-subtle` rank numbers (3.26:1 dark / 3.48:1 light; `text-fg` on it is fine
+       at 7.58 / 8.93). Lowering the token to 12% makes `bg-accent-border` safe; the component's
+       own alpha utility is a separate, component-level fix.
+   The 1.4.11 reading is unchanged and still correct: these tints are decorative, component state
+   is drawn with `border-accent` / `outline-accent` (the full accent, >=4.5:1), so no non-text
+   contrast floor attaches to the tints themselves. --accent-glow stays a drop-shadow with no
+   foreground. */
 :root {
+  --accent: var(--accent-light);
   --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
   --accent-hover: color-mix(in srgb, var(--accent) 82%, #000);
-  --accent-selection: color-mix(in srgb, var(--accent) 22%, transparent);
-  --accent-border: color-mix(in srgb, var(--accent) 25%, transparent);
+  --accent-selection: color-mix(in srgb, var(--accent) 12%, transparent);
+  --accent-border: color-mix(in srgb, var(--accent) 12%, transparent);
   --accent-glow: 0 2px 8px color-mix(in srgb, var(--accent) 36%, transparent);
 }
 
+/* Same specificity as :root above, so source order decides — this block must stay last.
+   --accent-hover inverts with the theme: mixing toward #000 is "darker, therefore pressed" only
+   while --accent is dark. On dark it would push an already-dark hover further into the surface
+   (indigo's old dark hover measured 2.22:1 on --surface), so dark mixes toward #fff instead.
+   Every dark hover value stays >=8.96:1 against --accent-fg and >=7.22:1 on --surface-3, and
+   both halves of that are now gated: `accent-hover` measures the button label on the hover fill
+   at 4.5:1, `state-fill` measures the hover fill against the resting surface at the 1.4.11 3:1
+   floor — which is the check that fails closed if anyone mixes the dark accent toward #000 again.
+
+   --accent-soft is 12% here rather than the light ramp's 10% (see THE 12% TINT CEILING above):
+   a tint of a LIGHT hue over a near-black surface reads weaker than the mirror case, so dark
+   takes the whole allowance. It was 20% until the tint ceiling was measured. */
 [data-theme="dark"] {
-  --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
+  --accent: var(--accent-dark);
+  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
+  --accent-hover: color-mix(in srgb, var(--accent) 88%, #fff);
 }

package/src/density.css

@@ -1,4 +1,4 @@
-/* @adminium/tokens — density axis (data-density). See workplan/02-design-system.md §1.8.
+/* @adminium/tokens — density axis (data-density). See 02-design-system.md §1.8.
    Two canonical densities; the comps' third "power" density is deliberately dropped. */
 :root,
 [data-density="comfortable"] {

package/src/exceptions.css

@@ -1,7 +1,23 @@
-/* @adminium/tokens — canonical theming exceptions. See workplan/02-design-system.md §6.
+/* @adminium/tokens — canonical theming exceptions. See 02-design-system.md §6.
    Two deliberate breaks from the active theme, implemented as scope classes that re-declare
    the full token set on a subtree (token cascade does the rest — children need no changes).
-   These scopes copy canonical hand-tuned values; they do not derive them. */
+   These scopes copy canonical hand-tuned values; they do not derive them.
+
+   They now also pin the ACCENT side of the theme, because accents.css resolves --accent per
+   theme (--accent-light / --accent-dark). A dark code block inside a light page would otherwise
+   inherit the light accent onto a #0f0f14 surface — where the black accent measures 1.03:1 — and
+   vice versa. Re-declaring --accent/--accent-fg/--accent-hover here keeps the exception scopes
+   self-consistent without teaching any component about the theme.
+
+   EVERY accent-derived token has to be re-declared for that to hold, not just --accent itself.
+   A custom property's var() is substituted on the element that DECLARES it, so an --accent-soft
+   left to accents.css would arrive here already resolved against the ROOT's accent — the light
+   accent inside a dark code block. --accent-selection and --accent-border were missing for
+   exactly that reason and are pinned below.
+
+   scripts/contrast-check.mjs replays both scopes as real subtrees (each root theme x each accent
+   x each scope) and gates every pair, so the copied values below cannot drift from tokens.css
+   without turning CI red. */
 
 /* Code/terminal surfaces are ALWAYS dark, both themes:
    CodeBlock, Terminal, JsonViewer, LogBox, connection-string previews */
@@ -14,9 +30,14 @@
   --border: rgba(255,255,255,.07);
   --border-strong: rgba(255,255,255,.13);
   --fg: #f4f4f6;
-  --fg-muted: #9a9aa6;
-  --fg-subtle: #6a6a76;
-  --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
+  --fg-muted: #b7b7c3;
+  --fg-subtle: #a1a1ad;
+  --accent: var(--accent-dark);
+  --accent-fg: #0f0f14;
+  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
+  --accent-hover: color-mix(in srgb, var(--accent) 88%, #fff);
+  --accent-selection: color-mix(in srgb, var(--accent) 12%, transparent);
+  --accent-border: color-mix(in srgb, var(--accent) 12%, transparent);
   --pos: #3ecf8e;
   --pos-soft: rgba(62,207,142,.14);
   --warn: #e0a458;
@@ -28,12 +49,18 @@
   --shadow: 0 1px 2px rgba(0,0,0,.4);
   --shadow-md: 0 6px 20px rgba(0,0,0,.5);
   --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
-  /* JSON syntax tokens (fixed, never themed) */
+  /* JSON syntax tokens (fixed, never themed). These are TEXT on the surfaces above, so the gate
+     measures them like any other foreground. --code-gray (punctuation, nulls, comments) was
+     #7d7d8a: 4.71:1 on --surface but 4.27:1 on --surface-2 and 3.79:1 on --surface-3, which
+     JsonViewer's alternating rows and LogBox's inset panels both use. Raised by the minimum
+     OKLCH lightness step that clears AA on the deepest of them (hue held, drift 0.01deg):
+     4.52 / 5.09 / 5.62 : 1. It stays well below --fg-subtle #a1a1ad, so punctuation still reads
+     dimmer than tertiary prose. The other four already cleared 7.5:1+. */
   --code-blue: #7cc5ff;
   --code-green: #8fe388;
   --code-orange: #e6b673;
   --code-purple: #c8a6ff;
-  --code-gray: #7d7d8a;
+  --code-gray: #8a8a98;
 }
 
 /* Email previews and QR tiles are ALWAYS light, both themes
@@ -47,16 +74,21 @@
   --border: #ececef;
   --border-strong: #e2e2e8;
   --fg: #191920;
-  --fg-muted: #6b6b76;
-  --fg-subtle: #9a9aa5;
+  --fg-muted: #4a4a54;
+  --fg-subtle: #5a5a65;
+  --accent: var(--accent-light);
+  --accent-fg: #ffffff;
   --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
-  --pos: #12805c;
+  --accent-hover: color-mix(in srgb, var(--accent) 82%, #000);
+  --accent-selection: color-mix(in srgb, var(--accent) 12%, transparent);
+  --accent-border: color-mix(in srgb, var(--accent) 12%, transparent);
+  --pos: #0b7d59;
   --pos-soft: #e6f5ee;
-  --warn: #b25e09;
+  --warn: #a95800;
   --warn-soft: #fbf0e2;
-  --danger: #d1293d;
+  --danger: #cf273c;
   --danger-soft: #fdecec;
-  --info: #2563eb;
+  --info: #1c59e0;
   --info-soft: #e7edfd;
   --shadow: 0 1px 2px rgba(20,20,35,.04), 0 1px 3px rgba(20,20,35,.05);
   --shadow-md: 0 4px 14px rgba(20,20,35,.09);

package/src/fonts.css

@@ -1,4 +1,4 @@
-/* @adminium/tokens — @font-face + per-locale family stacks. See workplan/02-design-system.md §2.4.
+/* @adminium/tokens — @font-face + per-locale family stacks. See 02-design-system.md §2.4.
    Font binaries are unmodified upstream builds vendored from @fontsource packages into ./fonts/
    by scripts/copy-fonts.mjs (never subset locally — "Plex" is an OFL Reserved Font Name).
    CJK is not self-hosted; zh_CN/zh_TW use system fallback stacks (v1 policy). */

package/src/index.ts

@@ -2,7 +2,7 @@
  * @adminium/tokens — JS-side constants for the four theming axes plus the pre-hydration
  * script. CSS custom properties live in the sibling .css files; these exports exist so
  * ThemeProvider, Storybook toolbars, charts and the desktop shell never hard-code axis
- * values. See workplan/02-design-system.md §2.5.
+ * values. See 02-design-system.md §2.5.
  */
 
 /** Theme axis. `system` resolves via `matchMedia("(prefers-color-scheme: dark)")`. */
@@ -11,20 +11,52 @@ export type ThemePref = (typeof THEMES)[number];
 /** A resolved theme as stamped on `<html data-theme>`. */
 export type ResolvedTheme = Exclude<ThemePref, "system">;
 
-/** Accent axis: the 8 switchable palettes (`data-accent`), name → hex. */
+/**
+ * Accent axis: the 8 switchable palettes (`data-accent`), name → LIGHT-theme hex
+ * (`--accent-light` in accents.css).
+ *
+ * This is ONE HALF of the accent. Each palette also has an `--accent-dark` hex that the dark
+ * theme selects into `--accent`, and it is a different colour, drastically so for `black`
+ * (#111111 light, #c9c9d4 dark). Anything that PAINTS an accent must therefore either read the
+ * CSS variable — which already resolves per theme — or pick from {@link ACCENTS_DARK} when the
+ * resolved theme is dark. Rendering `ACCENTS[a]` unconditionally shows the wrong colour on dark;
+ * that is what the accent-picker swatch used to do.
+ */
 export const ACCENTS = {
   indigo: "#4f46e5",
-  blue: "#2563eb",
-  teal: "#0d9488",
-  violet: "#7c3aed",
-  rose: "#e11d48",
-  red: "#e5484d",
-  orange: "#ea580c",
+  blue: "#1c59e0",
+  teal: "#007167",
+  violet: "#7936e9",
+  rose: "#c40039",
+  red: "#c0202f",
+  orange: "#b03e00",
   black: "#111111",
 } as const;
+
+/**
+ * The dark half (`--accent-dark`). Derived from the light ramp by recipe — see the header of
+ * accents.css, which owns the values; these mirror them for JS that cannot read CSS (chart
+ * canvases, the desktop shell, docs tables).
+ */
+export const ACCENTS_DARK = {
+  indigo: "#99a5ff",
+  blue: "#7fabff",
+  teal: "#49bbae",
+  violet: "#b39dff",
+  rose: "#ff848c",
+  red: "#ff8582",
+  orange: "#ff885b",
+  black: "#c9c9d4",
+} as const;
+
 /** `indigo` is the default. */
 export type Accent = keyof typeof ACCENTS;
 
+/** The accent hex actually painted for a resolved theme. */
+export function accentHex(accent: Accent, theme: ResolvedTheme): string {
+  return theme === "dark" ? ACCENTS_DARK[accent] : ACCENTS[accent];
+}
+
 /** Density axis (`data-density`). */
 export const DENSITIES = ["comfortable", "compact"] as const;
 export type Density = (typeof DENSITIES)[number];

package/src/motion.css

@@ -1,4 +1,4 @@
-/* @adminium/tokens — motion vocabulary. See workplan/02-design-system.md §5.
+/* @adminium/tokens — motion vocabulary. See 02-design-system.md §5.
    Keyframe names keep the comps' nb- prefix for 1:1 traceability when porting.
    Conventions: micro-transitions .1–.16s ease; entrances use cubic-bezier(.2,.7,.3,1). */
 

package/src/pre-hydration.ts

@@ -1,5 +1,5 @@
 /**
- * Pre-hydration script — flash prevention. See workplan/02-design-system.md §4.3.
+ * Pre-hydration script — flash prevention. See 02-design-system.md §4.3.
  *
  * Inlined (as a string) as the FIRST <script> in <head> of apps/dashboard/index.html,
  * the Electron renderer HTML and Storybook's preview-head.html, before any stylesheet

package/src/tailwind.css

@@ -1,4 +1,4 @@
-/* @adminium/tokens — Tailwind v4 theme mapping. See workplan/02-design-system.md §3.1.
+/* @adminium/tokens — Tailwind v4 theme mapping. See 02-design-system.md §3.1.
    Import order in each app's entry CSS:
      @import "tailwindcss";
      @import "@adminium/tokens/index.css";

package/src/tokens.css

@@ -1,5 +1,26 @@
-/* @adminium/tokens — core semantic tokens. Values are canonical; see workplan/02-design-system.md §1.1.
-   The dark palette is hand-tuned, never derived from light values. */
+/* @adminium/tokens — core semantic tokens. Values are canonical; see 02-design-system.md §1.1.
+   The dark NEUTRAL palette in this file is authored independently of the light one, not derived
+   from it: the light/dark OKLCH lightness pairs sum to 1.120-1.223 (--bg 1.120, --surface 1.194,
+   --surface-3 1.223, --fg 1.184, --fg-muted 1.196, --fg-subtle 1.184), so no inversion, offset or other single
+   rule relates the two columns. That sentence covers THIS file only — the dark ACCENT ramp in
+   accents.css IS mechanically derived from the light accents, on purpose, and that file states
+   the recipe and why. Do not carry this claim across to it.
+
+   CONTRAST. Every foreground here clears WCAG 2.1 AA (4.5:1) against the WORST backdrop it is
+   actually painted on — which is not --surface, and not even --surface-3, but a translucent tint
+   composited over --surface-3: --surface-3 is a real background for tertiary text
+   (CalendarLegendFilter's `text-fg-subtle` chip has `hover:bg-surface-3`; CountBadge/DeltaPill/
+   AvatarStack paint `bg-surface-3 text-fg-muted`), and accent/semantic tints sit on top of it.
+   scripts/contrast-check.mjs measures every such pair across both themes, all 8 accents and the
+   exception scopes; do not change a value here without re-running it.
+
+   The two grey steps below moved together on purpose. --fg-subtle had to darken from #9a9aa5
+   (2.471:1 on --surface-3 — the single largest source of contrast failures in the app) far enough
+   to clear 4.5:1 on the tinted backdrops too. Holding --fg-muted still would have collapsed the
+   secondary/tertiary ladder into one grey, so --fg-muted followed it down. The result is a real
+   but narrower ladder — see THE TEXT-LADDER TRADE-OFF at the tokens below for every measured
+   number. AA on a 4-surface ramp with tints on top leaves much less room than the original
+   palette assumed. */
 :root {
   color-scheme: light;
   --bg: #f6f6f8;
@@ -9,16 +30,35 @@
   --border: #ececef;
   --border-strong: #e2e2e8;
   --fg: #191920;
-  --fg-muted: #6b6b76;
-  --fg-subtle: #9a9aa5;
+  /* THE TEXT-LADDER TRADE-OFF — read before "restoring" any separation here.
+     The three text tiers are closer together than they were, and that is the price of AA on this
+     palette, not an oversight. Measured now: muted <-> subtle 1.286:1 in light (was 1.890:1, back
+     when the pair was #6b6b76 / #9a9aa5) and 1.287:1 in dark (was 1.917:1, #9a9aa6 / #6a6a76);
+     fg <-> muted 1.997:1 light, 1.808:1 dark.
+     The rungs bunched because the BOTTOM of the ladder had to come up while the TOP could not
+     come down. --fg-subtle is not sized by plain --surface-3 — it clears that comfortably
+     (6.038:1 light / 6.025:1 dark) — but by the worst backdrop tertiary text is actually painted
+     on: a 12% accent tint OVER --surface-3. With the `black` accent that composites to #d6d6d9 in
+     light and #383840 in dark, where the tokens below measure subtle 4.698:1 / 4.557:1, muted
+     6.042:1 / 5.865:1 and --fg 12.065:1 / 10.602:1. --fg is brand-fixed near-black/near-white, so
+     everything else has to fit underneath it.
+     Pushing --fg-subtle back toward its surface for "more contrast between the greys" therefore
+     REMOVES contrast where it is measured and re-breaks WCAG 1.4.3, almost immediately: light has
+     two 8-bit steps of headroom (#5c5c67 = 4.555:1 passes, #5d5d68 = 4.486:1 fails) and dark has
+     one (#a0a0ac = 4.502:1 passes, #9f9fab = 4.448:1 fails). If the tiers must read further
+     apart, widen from the other end — the fg <-> muted gap above is the only slack left — and
+     re-run scripts/contrast-check.mjs, which measures the tinted backdrops as well as the plain
+     ones. */
+  --fg-muted: #4a4a54;
+  --fg-subtle: #5a5a65;
   --accent-fg: #ffffff;
-  --pos: #12805c;
+  --pos: #0b7d59;
   --pos-soft: #e6f5ee;
-  --warn: #b25e09;
+  --warn: #a95800;
   --warn-soft: #fbf0e2;
-  --danger: #d1293d;
+  --danger: #cf273c;
   --danger-soft: #fdecec;
-  --info: #2563eb;
+  --info: #1c59e0;
   --info-soft: #e7edfd;
   --shadow: 0 1px 2px rgba(20,20,35,.04), 0 1px 3px rgba(20,20,35,.05);
   --shadow-md: 0 4px 14px rgba(20,20,35,.09);
@@ -26,6 +66,15 @@
   --scrim: rgba(10,10,15,.5);
 }
 
+/* Each light semantic tone above is the minimum OKLCH-lightness darkening (hue held to <0.3deg)
+   that puts it at >=4.5:1 on its own -soft partner, which is where it is smallest — StatusPill
+   and Alert set 11.5-13px text in --pos/--warn/--danger/--info on --pos-soft/…-soft. Measured
+   after the move: 4.56 / 4.57 / 4.59 / 5.04:1 (the light -soft partners are opaque, so the
+   backing surface does not change the number).
+   The dark tones are untouched — theirs are translucent, so they DO vary with the surface:
+   5.46-7.16:1 over --surface, 4.51-5.86:1 over --surface-3, the tightest (--danger on
+   --surface-3, 4.51:1) still clearing AA. */
+
 [data-theme="dark"] {
   color-scheme: dark;
   --bg: #0a0a0d;
@@ -35,8 +84,15 @@
   --border: rgba(255,255,255,.07);
   --border-strong: rgba(255,255,255,.13);
   --fg: #f4f4f6;
-  --fg-muted: #9a9aa6;
-  --fg-subtle: #6a6a76;
+  /* Same trade-off as light, mirrored: 7.754:1 / 6.025:1 on plain --surface-3 but 5.865:1 /
+     4.557:1 on the 12% black-accent tint over it (#383840), which is what sizes them — 1.287:1
+     apart, and --fg-subtle has ONE 8-bit step of headroom left. See THE TEXT-LADDER TRADE-OFF in
+     the light block above before touching either. */
+  --fg-muted: #b7b7c3;
+  --fg-subtle: #a1a1ad;
+  /* Dark --accent is a light hue (see accents.css), so the primary-button label inverts:
+     white on #99a5ff is 2.3:1, #0f0f14 on it is 8.4:1. One value, no per-accent branch. */
+  --accent-fg: #0f0f14;
   --pos: #3ecf8e;
   --pos-soft: rgba(62,207,142,.14);
   --warn: #e0a458;

package/src/viz.css

@@ -1,4 +1,4 @@
-/* @adminium/tokens — data-viz palette. See workplan/02-design-system.md §1.3.
+/* @adminium/tokens — data-viz palette. See 02-design-system.md §1.3.
    Fixed 8-color categorical palette (order canonical; series i gets --viz-((i mod 8)+1)),
    sequential accent ramp for heatmaps/choropleth intensity, and chart area/ribbon fill.
    @adminium/charts consumes only these vars — no hex literals in chart code. */