@apliteni/apliteni-ui 0.8.0 → 0.9.0

package/README.md

@@ -105,7 +105,12 @@ import { DataTable, Modal } from '@apliteni/apliteni-ui/react';
 ```
 
 The source lives in [`react/`](./react) — a private workspace with its own build
-(tsup) and Storybook on port 6007. Details in [`react/README.md`](./react/README.md).
+(tsup) and Storybook on port 6007. When 6007 is taken Storybook moves to the next
+free port, so the root Storybook does not trust the number: it probes the range
+6007 can drift into and composes the first port that proves it is this workspace's
+Storybook. A stranger on the port is never composed — the "React components"
+section is absent instead, and the terminal says why. Details in
+[`react/README.md`](./react/README.md).
 
 ## Theming
 
@@ -147,7 +152,7 @@ react/                   # React components — private workspace, built to reac
 
 ```bash
 npm install
-npm run storybook          # http://localhost:6006
+npm run storybook          # http://localhost:6006, or the next free port
 npm run build-storybook    # -> storybook-static/
 node site/build.mjs        # -> site/public/ (landing + kit.css + /storybook)
 ```
@@ -156,7 +161,7 @@ The React components build and test through the workspace (`npm install` at the
 root covers them — there is no second install):
 
 ```bash
-npm run storybook -w react   # http://localhost:6007
+npm run storybook -w react   # http://localhost:6007, or the next free port
 npm test -w react            # vitest
 npm run build                # tsup -> react/dist/ (also runs on prepare)
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -41,6 +41,17 @@ npm run storybook -w react   # http://localhost:6007
 npm run build                # tsup -> react/dist/
 ```
 
+6007 is a request, not a promise: if something else already holds it, Storybook
+walks upward to the next free port. The root Storybook composes these components
+by following that drift — it probes 6007 through 6016 (the window Storybook's own
+port-finder searches) and takes the first one whose `index.json` lists every story
+file this workspace has on disk. A stranger on the port fails that check and is
+never shown under "React components"; the section is simply absent, and the root
+Storybook's terminal says which ports it tried and what it found.
+
+The probe runs once, while the root Storybook boots. Start this one afterwards and
+you have to restart the root Storybook before it appears.
+
 The bare `@apliteni/apliteni-ui` specifier in this source resolves to the kit itself
 once installed. In the repo there is no copy to resolve to, so `kit-alias.ts` points
 vitest and Storybook straight at `../src/` — which is why the class-name parity tests

package/src/components/index.js

@@ -235,6 +235,14 @@ export function toast({
     + `<div class="ui-toast__body">${title ? `<div class="ui-toast__title">${esc(title)}</div>` : ''}${bodyHtml}</div>`
     + `${actBtn}${closeBtn}${timerBar}</div>`;
 }
+// The inline confirmation. A check, a title and one line of sub, dropped into
+// the page the user is already on — under a form that just submitted, or inside
+// a card. Two strings, no options; styles are .ui-success in styles/callout.css.
+//
+// The kit also publishes success() from components/success.js, which is the same
+// idea at page size: layouts, a backdrop, follow-up buttons and an auto-redirect
+// countdown. Pick by how much of the screen the confirmation owns. The two share
+// no CSS, so changing one never moves the other.
 export function successPanel({ title = 'Done', sub = '' } = {}) {
   return `<div class="ui-success"><div class="ui-success__check">${icon('check')}</div><div class="ui-success__title">${esc(title)}</div>${sub ? `<div class="ui-success__sub">${esc(sub)}</div>` : ''}</div>`;
 }

package/src/components/success.js

@@ -61,6 +61,16 @@ function countdownEl({ seconds = 5, label = 'Redirecting' } = {}) {
 </div>`;
 }
 
+// The page-sized confirmation — what a flow lands on once it is over. It fills
+// the space it is given, and carries the things a screen needs that a block does
+// not: somewhere to go next, and optionally a countdown that takes the user
+// there.
+//
+// For a confirmation that stays inside the page the user is already on, the kit
+// publishes successPanel() from components/index.js — a check, a title and one
+// line of sub, and nothing to configure. Pick by how much of the screen the
+// confirmation owns. The two share no CSS (.ui-sx here, .ui-success there), so
+// changing one never moves the other.
 export function success({
   layout = 'hero',          // 'hero' | 'split' | 'compact'
   backdrop = 'aurora',      // 'aurora' | 'glow' | 'flat'

package/src/components/topbar.js

@@ -7,10 +7,28 @@ import { wireDropdown } from './dropdown.js';
 
 const THEME_KEY = 'apliteni-strategy-theme';
 
-export function themeToggle() {
-  // Single icon-only switch (sun in dark, moon in light). Icon pre-filled so it
-  // renders before applyTheme() runs; aria-label carries the accessible name.
-  return `<button class="toggle" data-theme-toggle aria-label="Toggle theme" title="Toggle light / dark"><span class="ic" data-theme-icon>${sun}</span></button>`;
+// A stateful control in this kit reports the state it is IN, never the state a
+// click would produce — the same reading as segmented()'s aria-pressed, the
+// Deck/Text switch's aria-current, and the accent chips. So: moon while dark,
+// sun while light. Storybook's own toolbar toggle (.storybook/theme-toggle.jsx)
+// reads the same way, and topbar stories render directly beneath it.
+export const themeIcon = (t) => (t === 'light' ? sun : moon);
+
+// The name carries both the state and what the click does, which is why there
+// is no aria-pressed and no role="switch": dark and light are peers, not on and
+// off, and an ARIA state on top of this name would announce the theme twice.
+// The button is icon-only, so `title` is the only sighted reading of the same
+// fact and carries the identical string — nothing for WCAG 2.5.3 to disagree
+// with. Both are rewritten by applyTheme on every flip; a name that is right
+// once and never again tells a screen-reader user nothing.
+export const themeName = (t) =>
+  (t === 'light' ? 'Theme: Light. Switch to dark.' : 'Theme: Dark. Switch to light.');
+
+export function themeToggle(theme = 'dark') {
+  // Single icon-only switch. Icon and name are pre-filled for `theme` so the
+  // first paint is already truthful; applyTheme() keeps them so afterwards.
+  const name = esc(themeName(theme));
+  return `<button class="toggle" data-theme-toggle aria-label="${name}" title="${name}"><span class="ic" data-theme-icon>${themeIcon(theme)}</span></button>`;
 }
 
 export function deckTextSwitch(active = 'deck') {
@@ -69,11 +87,14 @@ export function topbar({
 // ---- Behaviours (call once after markup mounts) --------------------------
 export function applyTheme(t, root = document.documentElement) {
   root.setAttribute('data-theme', t);
+  const name = themeName(t);
   root.querySelectorAll('[data-theme-toggle]').forEach((btn) => {
     const ic = btn.querySelector('[data-theme-icon]');
-    const lbl = btn.querySelector('[data-theme-label]');
-    if (ic) ic.innerHTML = t === 'dark' ? sun : moon;
-    if (lbl) lbl.textContent = t === 'dark' ? 'Light' : 'Dark';
+    if (ic) ic.innerHTML = themeIcon(t);
+    // The announced name is the point of the control, so it moves with the
+    // theme like the glyph does.
+    btn.setAttribute('aria-label', name);
+    btn.setAttribute('title', name);
   });
   try { localStorage.setItem(THEME_KEY, t); } catch (e) { /* no-op */ }
 }

package/src/index.js

@@ -7,8 +7,10 @@ export * from './components/nav.js';
 export * from './components/drawer.js';
 export * from './components/topbar.js';
 export * from './components/shell.js';
+export * from './components/footer.js';
 export * from './components/feedback.js';
 export * from './components/toasts.js';
+export * from './components/success.js';
 export * from './assets/icons.js';
 export * from './assets/brand.js';
 export * from './motion.js';

package/src/inline.js

@@ -39,6 +39,7 @@ export const styles = {
   nav: read('styles/nav.css'),
   drawer: read('styles/drawer.css'),
   table: read('styles/table.css'),
+  empty: read('styles/empty.css'),
   callout: read('styles/callout.css'),
   code: read('styles/code.css'),
   topbar: topbarCss,
@@ -63,6 +64,7 @@ export const cssText = [
   styles.nav,
   styles.drawer,
   styles.table,
+  styles.empty,
   styles.callout,
   styles.code,
   styles.topbar,

package/src/styles/badge.css

@@ -24,7 +24,7 @@
    wash out and the ink has to deepen to clear AA, and that is a token decision. */
 .ui-badge--live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
 .ui-badge--soon { color: var(--purple-mid); background: var(--glow-purple); }
-.ui-badge--info { color: var(--cyan); background: var(--glow-cyan); }
+.ui-badge--info { color: var(--chip-info-ink); background: var(--chip-info-fill); }
 .ui-badge--warn { color: var(--chip-warn-ink); background: var(--chip-warn-fill); }
 .ui-badge--danger { color: var(--chip-danger-ink); background: var(--chip-danger-fill); }
 .ui-badge--archive { color: var(--muted); background: var(--surface); }
@@ -54,7 +54,10 @@
   padding: 4px 11px;
   font-weight: var(--weight-semibold);
 }
-.ui-pill--live { color: var(--green); background: var(--glow-green); }
+/* The live pill is the same status paint as the live badge, so it takes the
+   same pair. On its own it was --green on --glow-green, which is 3.97:1 over
+   white — under AA, while the badge beside it cleared at 4.64:1. See issue #131. */
+.ui-pill--live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
 .ui-pill--soon { color: var(--purple-mid); background: var(--glow-purple); }
 
 /* Status dot */

package/src/styles/base.css

@@ -101,9 +101,17 @@ a {
 }
 
 /* Sensible default size for inline icons that a parent rule doesn't size.
-   Component rules (.ui-btn svg, .ui-card__icon svg…) come later and win the
-   tie, so they always override this — it only catches bare icon() calls. */
-svg:not([width]):not([height]) {
+   A floor, not a ceiling: :where() holds the whole filter at zero specificity,
+   so this weighs (0,0,1) — one element, nothing more — and any component rule
+   that sizes an icon outranks it. Written bare, :not([width]):not([height])
+   would count both attribute selectors and weigh (0,2,1), which beats every
+   `.ui-btn svg`-shaped rule in the kit no matter what order the files load in.
+   It did, for every one of them bar three, and for `.ui-fbck` besides — that
+   one is a class on the svg itself, so it is easy to miss when you go looking.
+   The count is deliberately not written here: it moved once already, and the
+   rules outside this package (site/, the Iconography story) are not in it.
+   src/styles/icon-size.test.js keeps the ones in src/styles honest. */
+svg:where(:not([width]):not([height])) {
   width: 1.1em;
   height: 1.1em;
   flex: none;

package/src/styles/callout.css

@@ -29,7 +29,7 @@
 /* ----------------------------------------------------------------------------
  * Toast — a floating, dismissible notification.
  * A status (colour) × style (surface) matrix, entirely token-driven:
- *   status  success · danger · warn · info · neutral  → sets --toast-accent/-glow/-on
+ *   status  success · danger · warn · info · neutral  → sets --toast-accent/-glow/-on/-solid
  *   style   soft (tinted) · solid (filled) · outline (bordered)
  * -------------------------------------------------------------------------- */
 .ui-toast {
@@ -47,13 +47,16 @@
   animation: ui-toast-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
-/* status → the paint tokens every style below consumes (--toast-on = the ink
-   that reads on the accent when it becomes a fill) */
-.ui-toast--success { --toast-accent: var(--green); --toast-glow: var(--glow-green); --toast-on: var(--signal-contrast); }
-.ui-toast--danger  { --toast-accent: var(--pink);  --toast-glow: var(--glow-pink);  --toast-on: var(--danger-contrast); }
-.ui-toast--warn    { --toast-accent: var(--amber); --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: var(--signal-contrast); }
-.ui-toast--info    { --toast-accent: var(--cyan);  --toast-glow: var(--glow-cyan);  --toast-on: var(--signal-contrast); }
-.ui-toast--neutral { --toast-accent: var(--muted); --toast-glow: var(--surface-2); --toast-on: var(--strong); }
+/* status → the paint tokens every style below consumes.
+   --toast-accent is the status as a line or a small mark, --toast-glow its wash,
+   --toast-on the glyph ink on the accent circle. --toast-solid is separate on
+   purpose: a full fill is a different job from a 22px circle, and it is chosen
+   as a PAIR with --signal-solid-ink rather than against a global. See #149. */
+.ui-toast--success { --toast-accent: var(--green); --toast-glow: var(--glow-green); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-success); }
+.ui-toast--danger  { --toast-accent: var(--pink);  --toast-glow: var(--glow-pink);  --toast-on: var(--danger-contrast); --toast-solid: var(--signal-solid-danger); }
+.ui-toast--warn    { --toast-accent: var(--amber); --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-warn); }
+.ui-toast--info    { --toast-accent: var(--cyan);  --toast-glow: var(--glow-cyan);  --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-info); }
+.ui-toast--neutral { --toast-accent: var(--muted); --toast-glow: var(--surface-2); --toast-on: var(--strong); --toast-solid: var(--signal-solid-neutral); }
 
 /* left status marker (soft + outline; solid is already a full fill) */
 .ui-toast--soft::before,
@@ -83,17 +86,32 @@
 /* style: soft — tinted surface */
 .ui-toast--soft { background: var(--toast-glow); box-shadow: var(--shadow-sm); }
 
-/* style: solid — filled accent, ink flips to --toast-on */
-.ui-toast--solid { background: var(--toast-accent); color: var(--toast-on); box-shadow: var(--shadow-lg); }
-.ui-toast--solid .ui-toast__title,
-.ui-toast--solid .ui-toast__text { color: var(--toast-on); }
-.ui-toast--solid .ui-toast__text { opacity: 0.82; }
-.ui-toast--solid .ui-toast__icon { background: color-mix(in srgb, var(--toast-on) 22%, transparent); color: var(--toast-on); }
-.ui-toast--solid .ui-toast__action { color: var(--toast-on); }
-.ui-toast--solid .ui-toast__action:hover { background: color-mix(in srgb, var(--toast-on) 18%, transparent); }
-.ui-toast--solid .ui-toast__close { color: color-mix(in srgb, var(--toast-on) 68%, transparent); }
-.ui-toast--solid .ui-toast__close:hover { color: var(--toast-on); }
-.ui-toast--solid .ui-toast__timer { background: color-mix(in srgb, var(--toast-on) 55%, transparent); }
+/* style: solid — the status at fill strength, inked with the pole opposite it.
+   The fill and the ink are one pair, taken together from --signal-solid-*: dark
+   fills are the bright signals and take near-black, light fills are the deepened
+   ones and take white. What this replaced picked the fill from the status and
+   the ink from one of two globals, on independent axes, so nothing made them
+   clear each other — and four of the ten status x theme combinations did not.
+   Gated for all ten in stories/signal-contrast.test.js. See #149. */
+.ui-toast--solid {
+  --toast-ink: var(--signal-solid-ink);
+  background: var(--toast-solid);
+  color: var(--toast-ink);
+  box-shadow: var(--shadow-lg);
+}
+.ui-toast--solid .ui-toast__title { color: var(--toast-ink); }
+/* The body copy is the quieter of the two, but it stays quiet by dilution the
+   pair can carry: 90% of the ink measures 4.71 on the worst fill in the matrix
+   (--chip-success-ink in light). The opacity: 0.82 this replaced measured 4.19
+   there, and 2.25 on the dark danger fill — the pair was correct and the
+   dilution then spent it. */
+.ui-toast--solid .ui-toast__text { color: color-mix(in srgb, var(--toast-ink) 90%, transparent); }
+.ui-toast--solid .ui-toast__icon { background: color-mix(in srgb, var(--toast-ink) 22%, transparent); color: var(--toast-ink); }
+.ui-toast--solid .ui-toast__action { color: var(--toast-ink); }
+.ui-toast--solid .ui-toast__action:hover { background: color-mix(in srgb, var(--toast-ink) 18%, transparent); }
+.ui-toast--solid .ui-toast__close { color: color-mix(in srgb, var(--toast-ink) 68%, transparent); }
+.ui-toast--solid .ui-toast__close:hover { color: var(--toast-ink); }
+.ui-toast--solid .ui-toast__timer { background: color-mix(in srgb, var(--toast-ink) 55%, transparent); }
 
 /* style: outline — elevated card with a status-tinted border */
 .ui-toast--outline { background: var(--bg-elevated); box-shadow: var(--shadow-md); border: 1px solid color-mix(in srgb, var(--toast-accent) 40%, transparent); }

package/src/styles/dropdown.css

@@ -102,7 +102,7 @@
   color: var(--muted);
   background: var(--surface);
 }
-.ui-dropdown__badge.is-live { color: var(--green); background: var(--glow-green); }
+.ui-dropdown__badge.is-live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
 .ui-dropdown__badge.is-accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
 
 /* Disabled + danger rows */

package/src/styles/empty.css

@@ -67,10 +67,15 @@
   margin-top: 12px;
 }
 
-/* Legacy line-icon slot — kept so existing .ui-empty__icon markup still works. */
+/* Legacy line-icon slot — kept so existing .ui-empty__icon markup still works.
+   44px until #148. The icon inside is `width: 100%`, and that rule lost to the
+   base.css reset for as long as this slot has existed, so the slot's number was
+   never the size anyone saw: it rendered at 15.94px. Once the reset stopped
+   winning, 44px was a size nobody had chosen with their eyes open. 32px is the
+   size that was chosen, against the alternatives, on a rendered comparison. */
 .ui-empty__icon {
-  width: 44px;
-  height: 44px;
+  width: 32px;
+  height: 32px;
   margin: 0 auto 14px;
   color: var(--muted);
   opacity: 0.6;

package/src/styles/nav.css

@@ -6,7 +6,7 @@
  * ========================================================================== */
 
 .ui-nav { font-family: var(--font-sans); }
-.ui-nav ul, .ui-nav ol { list-style: none; margin: 0; padding: 0; }
+.ui-nav :where(ul, ol) { list-style: none; margin: 0; padding: 0; } /* floor, not ceiling */
 
 /* -- Sidebar rail -------------------------------------------------------- */
 .ui-nav--side {
@@ -49,7 +49,7 @@
 }
 .ui-nav__item:hover { background: var(--surface-2); color: var(--strong); }
 .ui-nav__item.is-active {
-  background: var(--surface);
+  background: var(--surface-3);
   color: var(--strong);
   font-weight: 500;
 }
@@ -75,7 +75,9 @@
 .ui-nav__item.is-current .ui-nav__ic svg { opacity: 1; stroke: var(--accent); }
 .ui-nav__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-.ui-nav__item.is-danger { color: var(--pink); }
+/* Destructive row (sign out, revoke). Quiet at rest, --pink once the pointer
+   reaches it — same two-step as .ui-btn--danger and .ui-dropdown__item.is-danger. */
+.ui-nav__item.is-danger { color: var(--muted); }
 .ui-nav__item.is-danger:hover { background: var(--glow-pink); color: var(--pink); }
 .ui-nav__item.is-disabled { color: var(--muted); opacity: 0.55; cursor: default; pointer-events: none; }
 
@@ -96,7 +98,7 @@
   color: var(--dim);
 }
 .ui-nav__badge.is-accent { background: var(--glow-purple); color: var(--accent); }
-.ui-nav__badge.is-live { background: var(--glow-green); color: var(--green); }
+.ui-nav__badge.is-live { background: var(--chip-success-fill); color: var(--chip-success-ink); }
 .ui-nav__badge.is-danger { background: var(--glow-pink); color: var(--pink); }
 .ui-nav__item.is-active .ui-nav__badge.is-neutral { background: var(--surface-3); color: var(--strong); }
 
@@ -115,14 +117,18 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
-  margin: 2px 0 2px 15px;
-  padding-left: 11px;
+  margin: var(--space-1) 0 var(--space-1) var(--space-4);
+  padding-left: var(--space-3);
   border-left: 1px solid var(--border);
 }
 .ui-nav__sub[hidden] { display: none; }
 .ui-nav__item--sub { font-size: 14px; padding: 7px 12px; }
-.ui-nav--side .ui-nav__item--sub.is-active { box-shadow: none; }
-.ui-nav--side .ui-nav__item--sub.is-active::before { left: -12px; height: 15px; }
+/* No hairline on a nested current row — but only at rest. box-shadow carries
+   both the hairline and the focus ring, so a rule about the resting look must
+   say so, or it silently cancels the ring (WCAG 2.4.7). */
+.ui-nav--side .ui-nav__item--sub.is-active:not(:focus-visible) { box-shadow: none; }
+/* Hangs back onto the guide hairline the indent above draws. */
+.ui-nav--side .ui-nav__item--sub.is-active::before { left: calc(-1 * var(--space-3)); height: 15px; }
 
 /* Footer slot (divider + trailing links, e.g. sign-out) */
 .ui-nav__foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

package/src/styles/table.css

@@ -68,6 +68,19 @@
 .ui-table--zebra th { border-bottom-width: 2px; }
 .ui-table--zebra td { border-bottom: 0; }
 .ui-table--zebra tbody tr:nth-child(even) td { background: var(--surface-2); }
+/* The stripe is full-bleed on purpose — the hover note above inset the hover fill for
+ * #71 and deliberately left the ledger stripe alone. But full-bleed only reads right if
+ * the end cells are inset from the tint's own edge, and the base rhythm does not inset
+ * them: `.ui-table td` sets `padding-left: 0`. Only `--dense` supplied the inset, so a
+ * `--zebra` table composed WITHOUT `--dense` put the first cell's content at exactly
+ * x=0 of the stripe. `DataTable` is that composition — it writes `ui-table
+ * ui-table--hover ui-table--zebra` and no `--dense` — so its select-all and per-row
+ * checkboxes sat flush against the tint with a measured 0px gap.
+ * Header and body are inset together, or the columns stop lining up. */
+.ui-table--zebra th:first-child,
+.ui-table--zebra td:first-child { padding-left: 12px; }
+.ui-table--zebra th:last-child,
+.ui-table--zebra td:last-child { padding-right: 12px; }
 .ui-table--zebra.ui-table--hover tbody tr:hover td,
 .ui-table--zebra tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
 

package/src/styles/topbar.css

@@ -149,7 +149,7 @@
   flex: none;
   margin-top: 1px;
 }
-.vbadge.live { color: var(--green); background: var(--glow-green); }
+.vbadge.live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
 .vbadge.arch { color: var(--muted); background: var(--surface); }
 @media (max-width: 600px) { .vsw__btn .lbl { display: none; } }
 

package/src/tokens/tokens.css

@@ -109,7 +109,12 @@
   --purple-mid: #b479ff;
   --cyan: #20dcf5;
   --green: #98ff8f;
-  --pink: #e35b8f;
+  /* Lighter than it looks like it should be, and deliberately so: --pink is read
+     mostly ON its own 16% glow, and that wash lifts the ground faster than the
+     hue lifts the ink. #e35b8f measured 3.82:1 on --glow-pink over a card —
+     under AA — so danger moved AWAY from the canvas, not toward it. Light moves
+     the opposite way for the same reason. See issue #131. */
+  --pink: #e97ca5;
   --amber: #ffcf6a;
 
   --bg: #16151f;
@@ -136,16 +141,25 @@
   --ink: #e9e7f0;
 
   /* Ink that reads on a SIGNAL colour once that colour becomes a fill — the
-     glyph in a success circle, the text in a solid toast. The signal hues sit
-     high enough in dark and mid-tone in light that near-black wins on all of
-     them; the pink danger fill deliberately takes light ink instead. */
+     glyph in a success circle, the glyph on a toast's status circle.
+     In dark every signal is a bright hue, so one near-black ink clears all
+     five: 15.87 on --green, 7.35 on --pink, 13.40 on --amber, 11.75 on --cyan
+     and 6.29 on --muted. Danger keeps a token of its own only because LIGHT
+     still needs it: there the signals are deepened to read as ink on white,
+     which parks them mid-luminance, and --pink is the one that comes out ahead
+     against white (5.78) rather than against near-black (3.39).
+     Dark danger was white until now, which was correct while --pink was
+     #e35b8f. Issue #131 lightened it to #e97ca5 to clear AA as INK on its own
+     glow, and that carried the fill up past the point where white could read on
+     it — 2.66 on the toast's status circle, under the 3:1 of WCAG 1.4.11. The
+     ten status x theme icon pairs are gated in stories/signal-contrast.test.js. */
   --signal-contrast: #0c0c0c;
-  --danger-contrast: #ffffff;
+  --danger-contrast: var(--signal-contrast);
 
   --glow-green: rgba(152, 255, 143, 0.16);
   --glow-purple: rgba(155, 93, 255, 0.18);
   --glow-cyan: rgba(32, 220, 245, 0.14);
-  --glow-pink: rgba(227, 91, 143, 0.16);
+  --glow-pink: rgba(233, 124, 165, 0.16);
 
   /* Status-chip paint — the ink + fill of a badge / pill. Dark tints with the
      signal's own glow; light needs a solid, deepened pair (the glows wash out
@@ -156,6 +170,23 @@
   --chip-warn-fill: color-mix(in srgb, var(--amber) 15%, transparent);
   --chip-danger-ink: var(--pink);
   --chip-danger-fill: var(--glow-pink);
+  --chip-info-ink: var(--cyan);
+  --chip-info-fill: var(--glow-cyan);
+
+  /* Solid signal surfaces — a status that has stopped being ink and become the
+     FILL (a solid toast). The fill and its ink are ONE pair, never two
+     independent picks: the fill is the status at this theme's extreme, and the
+     ink is the pole opposite it, so a single ink clears all five. Dark fills are
+     the bright signals, so the ink is near-black — it measures 15.87 on --green,
+     7.35 on --pink, 13.40 on --amber, 11.75 on --cyan and 6.29 on --muted.
+     Neutral needs no chip pair to take part: --muted is already its
+     fill-strength form. See issues #131 and #149. */
+  --signal-solid-ink: var(--signal-contrast);
+  --signal-solid-success: var(--green);
+  --signal-solid-danger: var(--pink);
+  --signal-solid-warn: var(--amber);
+  --signal-solid-info: var(--cyan);
+  --signal-solid-neutral: var(--muted);
 
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
   --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
@@ -191,7 +222,11 @@
   --purple-mid: #7a3be0;
   --cyan: #0c8fa8;
   --green: #1c8a2c;
-  --pink: #d63c72;
+  /* Deeper than the dark pink for the same reason dark's is lighter: the wash
+     under it is white, so the ink has to come down to meet it. #d63c72 measured
+     3.87:1 on --glow-pink over white and 4.42:1 on plain white — the required
+     marker and the form error missed AA on nothing at all. See issue #131. */
+  --pink: #b63361;
   --amber: #b5730a;
 
   /* A WHITE app: the page and cards are both white; cards are delineated by a
@@ -219,20 +254,51 @@
   --signal-contrast: #0c0c0c;
   --danger-contrast: #ffffff;
 
-  --glow-green: rgba(30, 150, 50, 0.1);
+  /* Re-tinted from --green. It was rgba(30, 150, 50, .1) — a colour that exists
+     nowhere else in the kit, carried unedited since the initial commit while the
+     other three light glows are exact tints of their own token. The wash over
+     white moves #e9f5eb -> #e8f3ea, at most two levels on a channel, which is
+     0.86 of a deltaE — under the 1.0 that is normally called imperceptible. No
+     verdict moves with it: body copy on the success wash goes 9.29 -> 9.15
+     against the 4.5 AA bar, and the --green icon on it 3.97 -> 3.91 against the
+     3.0 bar WCAG 1.4.11 sets for a graphic. The success chips are untouched —
+     light's --chip-success-fill is the solid #dff3e4, not this. Gated for all
+     four glows in stories/signal-contrast.test.js. See issue #131. */
+  --glow-green: rgba(28, 138, 44, 0.1);
   --glow-purple: rgba(106, 45, 204, 0.09);
   --glow-cyan: rgba(12, 143, 168, 0.1);
-  --glow-pink: rgba(214, 60, 114, 0.1);
+  --glow-pink: rgba(182, 51, 97, 0.1);
 
   /* Solid chip pairs for the white app. Each ink is deepened past its signal
      hue so 10px uppercase text clears WCAG AA on its own pale fill —
-     e.g. --pink (#d63c72) on #fbe0ea is 3.6:1, #b7295f is 4.9:1. */
+     e.g. --pink (#b63361) on #fbe0ea is 4.66:1, #b7295f is 4.85:1. */
   --chip-success-ink: #1f7a38;
   --chip-success-fill: #dff3e4;
   --chip-warn-ink: #8a5e00;
   --chip-warn-fill: #fbedd2;
   --chip-danger-ink: #b7295f;
   --chip-danger-fill: #fbe0ea;
+  /* Info was the one signal family without a pair, so the info badge was still
+     painting --cyan (#0c8fa8) on --glow-cyan over white, which is 3.39:1 —
+     under AA. #0a7286 on #ddeff3 is 4.71:1, inside the 4.64–4.93 band the other
+     three pairs already sit in. See issue #131. */
+  --chip-info-ink: #0a7286;
+  --chip-info-fill: #ddeff3;
+
+  /* Light runs the same rule the other way. The signals are mid-tone here — a
+     solid --green fill measures 4.40 against near-black and 4.45 against white,
+     so NO ink rescues it and the fill is what has to move. It moves to the
+     deepened form the chip pair already carries, and the pole above it, white,
+     clears every one: #ffffff measures 5.39 on --chip-success-ink, 6.01 on
+     --chip-danger-ink, 5.70 on --chip-warn-ink, 5.58 on --chip-info-ink and 6.11
+     on --muted. A future status supplies one --signal-solid-* value dark enough
+     for white and inherits the ink. See issues #131 and #149. */
+  --signal-solid-ink: #ffffff;
+  --signal-solid-success: var(--chip-success-ink);
+  --signal-solid-danger: var(--chip-danger-ink);
+  --signal-solid-warn: var(--chip-warn-ink);
+  --signal-solid-info: var(--chip-info-ink);
+  --signal-solid-neutral: var(--muted);
 
   --shadow-sm: 0 1px 3px rgba(30, 30, 50, 0.08);
   --shadow-md: 0 8px 24px rgba(30, 30, 50, 0.1);