@adminiumjs/tokens 0.2.1 → 0.2.2

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;;;;;;;;;;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA;;;;;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

@@ -1,3 +1,4 @@
+// SPDX-License-Identifier: AGPL-3.0-only
 /**
  * @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

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;;;;;;;;;;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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC;;;;;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.map

@@ -1 +1 @@
-{"version":3,"file":"pre-hydration.d.ts","sourceRoot":"","sources":["../src/pre-hydration.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,QAauC,CAAC"}
+{"version":3,"file":"pre-hydration.d.ts","sourceRoot":"","sources":["../src/pre-hydration.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,QAauC,CAAC"}

package/dist/pre-hydration.js

@@ -1,3 +1,4 @@
+// SPDX-License-Identifier: AGPL-3.0-only
 /**
  * Pre-hydration script — flash prevention. See 02-design-system.md §4.3.
  *

package/dist/pre-hydration.js.map

@@ -1 +1 @@
-{"version":3,"file":"pre-hydration.js","sourceRoot":"","sources":["../src/pre-hydration.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAC7B,gEAAgE;IAChE,8CAA8C;IAC9C,sFAAsF;IACtF,iCAAiC;IACjC,uEAAuE;IACvE,8EAA8E;IAC9E,kCAAkC;IAClC,2CAA2C;IAC3C,qCAAqC;IACrC,mEAAmE;IACnE,6EAA6E;IAC7E,8BAA8B;IAC9B,oEAAoE,CAAC"}
+{"version":3,"file":"pre-hydration.js","sourceRoot":"","sources":["../src/pre-hydration.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAC7B,gEAAgE;IAChE,8CAA8C;IAC9C,sFAAsF;IACtF,iCAAiC;IACjC,uEAAuE;IACvE,8EAA8E;IAC9E,kCAAkC;IAClC,2CAA2C;IAC3C,qCAAqC;IACrC,mEAAmE;IACnE,6EAA6E;IAC7E,8BAA8B;IAC9B,oEAAoE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminiumjs/tokens",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "AGPL-3.0-only",
   "repository": {
     "type": "git",

package/src/accents.css

@@ -83,7 +83,9 @@
        --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.
+       including secondary and tertiary copy, which measured 4.36:1 and 3.33:1. Lowering it to 12%
+       fixed that ON A PLAIN SURFACE and nowhere else — see THE SELECTION PAIR below, which is why
+       the token is no longer translucent at all.
      --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
@@ -100,8 +102,27 @@
 :root {
   --accent: var(--accent-light);
   --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
+  /* The accent half of THE OPAQUE CHIP TINTS (tokens.css states the reasoning once, for all five
+     tones). Same 10% as the wash above, but mixed with --surface instead of `transparent`, so an
+     accent chip's contrast is a property of the token rather than of whatever it was re-parented
+     onto. --accent-soft itself is UNCHANGED and still translucent: active nav rows, selected table
+     rows and panel washes have to layer, and layering is exactly what a chip must not do. */
+  --accent-soft-solid: color-mix(in srgb, var(--accent) 10%, var(--surface));
   --accent-hover: color-mix(in srgb, var(--accent) 82%, #000);
-  --accent-selection: color-mix(in srgb, var(--accent) 12%, transparent);
+  /* THE SELECTION PAIR — the same pre-composition as the chip tints, for the same reason, plus a
+     pinned foreground. tokens.css `::selection` sets BOTH halves; read the note there first.
+     A translucent selection tint is the worst case of "contrast depends on what it lands on",
+     because the user chooses the backdrop by dragging: 12% over --surface is the number this
+     comment used to quote, but the same wash over an ALREADY tinted row (a selected table row or
+     an active nav item, both --accent-soft) measured 3.474:1 for --fg-subtle and 3.892:1 for
+     --accent, and over a primary button's fill it put --fg at 1.080:1 (monochrome accent; 2.78:1 on
+     indigo). Freezing the backdrop into
+     the token, exactly as the chips do, makes the pair a property of the palette: --fg on it now
+     measures >=13.038:1 in every theme x accent x scope, on every surface AND on --accent itself.
+     The `selection` group in scripts/contrast-check.mjs measures all of it, including the
+     button-fill backdrop no other group covers. 12% is unchanged, and over a plain --surface the
+     colour is byte-identical to the translucent version — only the layered cases move. */
+  --accent-selection: color-mix(in srgb, var(--accent) 12%, var(--surface));
   --accent-border: color-mix(in srgb, var(--accent) 12%, transparent);
   --accent-glow: 0 2px 8px color-mix(in srgb, var(--accent) 36%, transparent);
 }
@@ -121,5 +142,7 @@
 [data-theme="dark"] {
   --accent: var(--accent-dark);
   --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
+  /* 12% here too, matching the dark wash — a chip on --surface is byte-identical to before. */
+  --accent-soft-solid: color-mix(in srgb, var(--accent) 12%, var(--surface));
   --accent-hover: color-mix(in srgb, var(--accent) 88%, #fff);
 }

package/src/density.css

@@ -5,12 +5,29 @@
   --row-py: 13px;
   --cell-fs: 13px;
   --card-pad: 20px;
-  --main-pad: 26px 28px 40px;
+  /* Widget cards run tighter than a generic Card: every `.nb-card` in the
+     Analytics comp is a flat 18px box, where --card-pad's 20px is the comp's
+     HERO tier. Kept separate so the two can't drift into one number — and so
+     the opt-in `bleed` config flag has exactly one knob to zero out. */
+  --widget-pad: 18px;
+  /* The one page gutter. Split into axes because the page-padding choice an
+     admin makes in Studio is an x/y pair, and a shorthand cannot be overridden
+     one axis at a time. The shorthand stays derived so `p-[var(--main-pad)]`
+     call sites keep working. Bottom is no longer a third, larger value: a
+     40px floor under a 24px ceiling read as a mistake on every short page. */
+  --main-pad-x: 28px;
+  --main-pad-y: 24px;
+  --main-pad: var(--main-pad-y) var(--main-pad-x);
 }
 
 [data-density="compact"] {
   --row-py: 7px;
   --cell-fs: 12px;
   --card-pad: 16px;
-  --main-pad: 16px 20px 30px;
+  /* The comp has no compact mode; 14px keeps the comfortable→compact ratio the
+     hand-rolled `px-4 → compact:px-3` pair used before the token existed. */
+  --widget-pad: 14px;
+  --main-pad-x: 20px;
+  --main-pad-y: 16px;
+  --main-pad: var(--main-pad-y) var(--main-pad-x);
 }

package/src/exceptions.css

@@ -35,8 +35,12 @@
   --accent: var(--accent-dark);
   --accent-fg: #0f0f14;
   --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
+  --accent-soft-solid: color-mix(in srgb, var(--accent) 12%, var(--surface));
   --accent-hover: color-mix(in srgb, var(--accent) 88%, #fff);
-  --accent-selection: color-mix(in srgb, var(--accent) 12%, transparent);
+  /* Pre-composited against THIS scope's --surface, not the root's (accents.css, THE SELECTION
+     PAIR). A selection tint left to the root would arrive mixed with the page's surface and
+     paint a light pill inside a dark code block. */
+  --accent-selection: color-mix(in srgb, var(--accent) 12%, var(--surface));
   --accent-border: color-mix(in srgb, var(--accent) 12%, transparent);
   --pos: #3ecf8e;
   --pos-soft: rgba(62,207,142,.14);
@@ -46,6 +50,13 @@
   --danger-soft: rgba(255,107,107,.14);
   --info: #6ea8ff;
   --info-soft: rgba(110,168,255,.14);
+  /* The `-soft-solid` chip tints are PRE-COMPOSITED over --surface, so they must be re-declared
+     here for the same reason --accent-soft is: a value left to the root would arrive already
+     mixed with the ROOT's --surface — a near-white pill inside a #0f0f14 code block. */
+  --pos-soft-solid: color-mix(in srgb, var(--pos) 14%, var(--surface));
+  --warn-soft-solid: color-mix(in srgb, var(--warn) 14%, var(--surface));
+  --danger-soft-solid: color-mix(in srgb, var(--danger) 14%, var(--surface));
+  --info-soft-solid: color-mix(in srgb, var(--info) 14%, var(--surface));
   --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);
@@ -79,8 +90,10 @@
   --accent: var(--accent-light);
   --accent-fg: #ffffff;
   --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
+  --accent-soft-solid: color-mix(in srgb, var(--accent) 10%, var(--surface));
   --accent-hover: color-mix(in srgb, var(--accent) 82%, #000);
-  --accent-selection: color-mix(in srgb, var(--accent) 12%, transparent);
+  /* Pre-composited against THIS scope's --surface — see the .adm-always-dark note above. */
+  --accent-selection: color-mix(in srgb, var(--accent) 12%, var(--surface));
   --accent-border: color-mix(in srgb, var(--accent) 12%, transparent);
   --pos: #0b7d59;
   --pos-soft: #e6f5ee;
@@ -90,6 +103,13 @@
   --danger-soft: #fdecec;
   --info: #1c59e0;
   --info-soft: #e7edfd;
+  /* Opaque already (light's semantic softs are hexes), so these alias rather than re-derive —
+     but they still have to be DECLARED here, or the scope would inherit the root's, which under
+     a dark root are 14% mixes over #141419. */
+  --pos-soft-solid: var(--pos-soft);
+  --warn-soft-solid: var(--warn-soft);
+  --danger-soft-solid: var(--danger-soft);
+  --info-soft-solid: var(--info-soft);
   --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);
   --shadow-lg: 0 12px 34px rgba(20,20,35,.13);

package/src/index.ts

@@ -1,3 +1,4 @@
+// SPDX-License-Identifier: AGPL-3.0-only
 /**
  * @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

package/src/motion.css

@@ -84,6 +84,21 @@
   border-color: var(--border-strong);
 }
 
+/* card hover bloom: shadow only, NO lift. Distinct from .nb-lift on purpose —
+   a dashboard is ~40 cards, and translating each one on mouseover reads as
+   noise. Matches the comp's `.nb-card:hover` (Analytics.dc.html lines 32-33).
+   The dark value has no comp counterpart (the comp's dark block never restates
+   it); it is the light recipe re-tuned for a #141419 surface. */
+.nb-cardh {
+  transition: box-shadow .16s ease, border-color .16s ease;
+}
+.nb-cardh:hover {
+  box-shadow: 0 6px 18px -10px rgba(20, 20, 35, .24);
+}
+[data-theme="dark"] .nb-cardh:hover {
+  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6);
+}
+
 /* button press: hover brighten, active shrink */
 .nb-press {
   transition: transform .12s ease, filter .12s ease;

package/src/pre-hydration.ts

@@ -1,3 +1,4 @@
+// SPDX-License-Identifier: AGPL-3.0-only
 /**
  * Pre-hydration script — flash prevention. See 02-design-system.md §4.3.
  *

package/src/tailwind.css

@@ -22,12 +22,20 @@
   --color-accent: var(--accent);
   --color-accent-fg: var(--accent-fg);
   --color-accent-soft: var(--accent-soft);
+  --color-accent-soft-solid: var(--accent-soft-solid);
   --color-accent-hover: var(--accent-hover);
   --color-accent-border: var(--accent-border);
   --color-pos: var(--pos);         --color-pos-soft: var(--pos-soft);
   --color-warn: var(--warn);       --color-warn-soft: var(--warn-soft);
   --color-danger: var(--danger);   --color-danger-soft: var(--danger-soft);
   --color-info: var(--info);       --color-info-soft: var(--info-soft);
+  /* `bg-*-soft-solid` — the pre-composited chip tints (tokens.css, THE OPAQUE CHIP TINTS).
+     Mapped alongside the washes, not instead of them: `bg-*-soft` still paints the translucent
+     row/panel wash, and a chip that must clear 4.5:1 wherever it lands takes the solid one. */
+  --color-pos-soft-solid: var(--pos-soft-solid);
+  --color-warn-soft-solid: var(--warn-soft-solid);
+  --color-danger-soft-solid: var(--danger-soft-solid);
+  --color-info-soft-solid: var(--info-soft-solid);
   --color-viz-1: var(--viz-1); --color-viz-2: var(--viz-2); --color-viz-3: var(--viz-3);
   --color-viz-4: var(--viz-4); --color-viz-5: var(--viz-5); --color-viz-6: var(--viz-6);
   --color-viz-7: var(--viz-7); --color-viz-8: var(--viz-8);
@@ -51,6 +59,11 @@
   --text-title: 20px;     --text-title--font-weight: 800;   --text-title--letter-spacing: -0.02em;
   --text-modal: 16.5px;   --text-modal--font-weight: 800;
   --text-section: 14.5px; --text-section--font-weight: 700; --text-section--letter-spacing: -0.01em;
+  /* Widget-card and topbar headings. Neither can reuse --text-section: the comp's
+     card title carries NO tracking (14px/700 flat) and its topbar h1 is a full
+     tier larger and heavier (18px/800/-0.02em). */
+  --text-card-title: 14px;   --text-card-title--font-weight: 700;
+  --text-topbar-title: 18px; --text-topbar-title--font-weight: 800; --text-topbar-title--letter-spacing: -0.02em;
   --text-body: 13px;      --text-body--line-height: 1.5;
   --text-body-sm: 12.5px; --text-body-sm--line-height: 1.5;
   --text-caption: 11.5px;
@@ -59,5 +72,13 @@
   /* layout */
   --spacing-sidebar: 256px;
   --container-form: 640px; --container-narrow: 720px; --container-page: 1080px;
-  --container-marketing: 1160px; --container-wide: 1200px; --container-max: 1360px;
+  --container-marketing: 1160px; --container-wide: 1200px; --container-max: 1360px; --container-widest: 1800px;
+  /* The reading column for pages whose content is a short stack of controls
+     rather than a grid — import, settings, account. Wide enough for a two-up
+     field row, narrow enough that a lone label does not run the full monitor.
+     `--container-narrow` (720px) is a text measure and squeezes those rows. */
+  --container-content: 900px;
+  /* Dashboard column. Deliberately NOT --container-page (1080px), which form and
+     settings pages depend on staying narrow. */
+  --container-dash: 1320px;
 }

package/src/tokens.css

@@ -60,6 +60,27 @@
   --danger-soft: #fdecec;
   --info: #1c59e0;
   --info-soft: #e7edfd;
+  /* THE OPAQUE CHIP TINTS. `-soft` is a WASH — row highlights, panel fills, callout backgrounds —
+     and stays translucent so it can layer. `-soft-solid` is that same tint PRE-COMPOSITED over
+     --surface, for the small tinted CHIPS whose own label has to clear 4.5:1 no matter where the
+     chip lands.
+     A translucent chip has no contrast of its own: it inherits whatever it was re-parented onto.
+     The same "Canceled" tag therefore measured one number on a plain table row and another on a
+     selected (already-tinted) one, and a nav count badge fell to 4.36:1 at the exact moment its
+     row went active — a tint over a tint. The pair matrix in scripts/contrast-check.mjs cannot
+     enumerate that case: it knows the four surfaces a tint can composite over, but not that a
+     component will be nested inside ANOTHER component's tint. Freezing the backdrop into the
+     token moves the chip's contrast out of the DOM and into a value, where the gate can prove it.
+     THE COST, accepted deliberately: a chip on a --surface-2 or --surface-3 card now paints a
+     --surface-based pill, so it reads a shade lighter than the card under it. That is the trade
+     for a number that cannot vary with nesting.
+     Light's semantic softs are ALREADY opaque hexes, so these alias them rather than deriving the
+     same colour a second way — two spellings of one colour is a drift bug waiting to happen. Only
+     dark has to composite; see the dark block. */
+  --pos-soft-solid: var(--pos-soft);
+  --warn-soft-solid: var(--warn-soft);
+  --danger-soft-solid: var(--danger-soft);
+  --info-soft-solid: var(--info-soft);
   --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);
   --shadow-lg: 0 12px 34px rgba(20,20,35,.13);
@@ -101,11 +122,34 @@
   --danger-soft: rgba(255,107,107,.14);
   --info: #6ea8ff;
   --info-soft: rgba(110,168,255,.14);
+  /* The opaque chip tints (see the light block for why they exist). Dark's semantic softs are
+     translucent, so these composite the SAME 14% over --surface that the wash reaches there —
+     a chip already sitting on --surface is byte-identical before and after; only chips on the
+     deeper greys change, which is the appearance cost named above. */
+  --pos-soft-solid: color-mix(in srgb, var(--pos) 14%, var(--surface));
+  --warn-soft-solid: color-mix(in srgb, var(--warn) 14%, var(--surface));
+  --danger-soft-solid: color-mix(in srgb, var(--danger) 14%, var(--surface));
+  --info-soft-solid: color-mix(in srgb, var(--info) 14%, var(--surface));
   --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);
 }
 
+/* ::selection SETS BOTH HALVES OF THE PAIR, and that is the whole point.
+   Left to the browser, only the background was ours and the foreground was "whatever text the
+   user happened to drag across" — so the selection pair was undefined by construction and no gate
+   could state it. Measured on the palette before this: --fg-subtle on the selection wash over a
+   selected table row 3.474:1, --accent on it over an active sidebar row 3.892:1, and --fg over a
+   primary button's accent fill 1.080:1 (monochrome accent; 2.78:1 on indigo — near-invisible either way). axe never sees any of that: it does not
+   evaluate ::selection, so none of it appeared in the sweep — a real low-vision failure with no
+   automated witness, which is exactly the kind this palette keeps having to find by measuring.
+   With --accent-selection pre-composited (accents.css, THE SELECTION PAIR) and the colour pinned
+   to the theme's own --fg, the pair is fixed at >=13.038:1 everywhere, including inside the
+   .adm-always-dark / .adm-always-light scopes, which re-declare both tokens together.
+   THE COST, accepted: selected text loses its own colour for as long as it is selected — an
+   accent link or a --pos status reads as body text under the highlight. That is what every
+   browser's default selection does, and it is the price of a pair that cannot be composed away. */
 ::selection {
   background: var(--accent-selection);
+  color: var(--fg);
 }