@tangle-network/brand 1.1.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 1.4.0
+
+### Minor Changes
+
+- e67a809: Raise the dark surface ladder to AA and add the page-level primitives.
+
+  In the dark spine, `--md3-surface-container-high` and `--md3-surface-container-highest` sat close enough to the ink ramp that `--text-dim` fell under 4.5:1 on them. The ladder is re-spaced and the ink ramp moves with it, so every ink tier clears AA on all five planes.
+
+  Dark status chips keep their hue, drop 14% chroma, and lift the fill to 1.50:1 from the card. A new `--run-mix-*` ramp carries proportional bars, spaced in relative luminance so adjacent segments clear the 3:1 floor for non-text contrast.
+
+  One light token moves: `--surface-warning-text` goes `#b45309` to `#ab4f09`. It is a contrast fix, not a hue change. The old value measured 4.16:1 on the light page canvas, under the 4.5:1 body floor, whenever the colour was used as text away from its own pill background; the new value measures 4.51:1 there and 5.25:1 on the pill. Every other light value is unchanged.
+
+  `@tangle-network/ui` gains four primitives: `PageHeader`, `StatusPill`, `MetricStrip`, and `Toolbar`/`FilterField`. All additive; no existing export changes.
+
+## 1.3.0
+
+### Minor Changes
+
+- f3c5262: Add the missing `tangle-dark` named theme. The named set shipped `tangle-light` with no dark sibling, so `data-theme="tangle-dark"` matched no rule and silently fell through to whatever the element inherited — the light spine's values, inside a light-named wrapper. `tangle-dark` now selects the canonical dark spine by name: same indigo family as `tangle-light`, held to the dark contrast discipline, and self-sufficient inside a light-named wrapper (foregrounds and destructive included, so nothing leaks the light values).
+
+## 1.2.0
+
+### Minor Changes
+
+- 2088fb9: Retune the token spine to a neutral-grey surface ladder with indigo as trim rather than as field, in both themes. Surfaces separate by their own fill so a card, a nested panel and an overlay each read as a distinct plane, and the canvas sits off pure black so long reading sessions land away from the glare end of the range.
+
+  Faint text in `Input`, `Textarea`, `StatCard` and `TerminalLine` now takes a dedicated `--text-dim` token instead of a faded stronger one. A translucent foreground renders as its colour composited over the plane behind it, so those hints, subtitles and timestamps measured differently on a card than on the canvas and fell under the 4.5:1 floor on both.
+
+  **Worth a look after upgrading:** in dark mode `--sidebar-background` is now one step BELOW the canvas rather than above it, so the nav reads as chrome the content sits in front of instead of as another raised card. Apps that composited their own surfaces on top of the sidebar assuming it was the lighter plane should give that area a visual pass. Light mode is unchanged — the sidebar is still paper on a grey canvas.
+
 ## 1.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.1.0",
+  "version": "1.4.0",
   "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
   "type": "module",
   "license": "MIT",
@@ -47,9 +47,9 @@
     }
   },
   "devDependencies": {
-    "@storybook/react": "^8.6.18",
+    "@storybook/react": "^10.5.5",
     "@types/react": "^19.0.0",
-    "react": "^19.0.0",
+    "react": "^19.2.8",
     "tsup": "^8.3.5",
     "typescript": "^5.6.0"
   },

package/src/styles/css-test-utils.ts

@@ -18,30 +18,62 @@ function rulesOnly(css: string): string {
 
 /** Extract a rule's body by selector, tolerant of formatting and of nesting. */
 export function blockIn(source: string, selector: string): string {
+  const blocks = blocksIn(source, selector);
+  if (blocks.length === 0) throw new Error(`missing theme block: ${selector}`);
+  return blocks[0];
+}
+
+/**
+ * Every rule body whose selector list ENDS in `selector`, in source order — the
+ * match requires the selector immediately before the `{`, so a selector earlier
+ * in a comma-separated group (`selector, .other {`) is not returned.
+ *
+ * One selector can head MORE than one rule — `[data-theme="tangle-light"]` names
+ * both the shared light-status override group and the theme's own block — so a
+ * first-match read can silently slice the wrong region. Return them all and let
+ * the caller pick (e.g. the one that declares `--hsl-background`).
+ */
+export function blocksIn(source: string, selector: string): string[] {
   // Comments first: a block's own doc-comment routinely spells its selector out,
   // and anchoring on that prose would slice the wrong region — silently, since
   // the result still looks like CSS.
   const css = rulesOnly(source);
   // Tolerate any whitespace between selector and brace — a formatter that closes
   // the gap must not turn a passing suite into a "missing block" error.
-  const open = new RegExp(`${escapeRegex(selector)}\\s*\\{`).exec(css);
-  if (!open) throw new Error(`missing theme block: ${selector}`);
-  const start = open.index;
-
-  // Walk braces to find THIS block's close. Matching the first `}` would end the
-  // block at the first nested rule's close instead (an `@media`, a nested
-  // selector) — and the slice would still look like CSS, so assertions would run
-  // against a truncated region rather than failing. Depth-counting is exact, and
-  // an unterminated block throws instead of returning something plausible.
-  let depth = 0;
-  for (let i = css.indexOf("{", start); i < css.length; i++) {
-    if (css[i] === "{") depth += 1;
-    else if (css[i] === "}") {
-      depth -= 1;
-      if (depth === 0) return css.slice(start, i);
+  const pattern = new RegExp(`${escapeRegex(selector)}\\s*\\{`, "g");
+
+  const blocks: string[] = [];
+  for (const open of css.matchAll(pattern)) {
+    const start = open.index;
+
+    // Walk braces to find THIS block's close. Matching the first `}` would end the
+    // block at the first nested rule's close instead (an `@media`, a nested
+    // selector) — and the slice would still look like CSS, so assertions would run
+    // against a truncated region rather than failing. Depth-counting is exact, and
+    // an unterminated block throws instead of returning something plausible.
+    let depth = 0;
+    let closed = false;
+    for (let i = css.indexOf("{", start); i < css.length; i++) {
+      if (css[i] === "{") depth += 1;
+      else if (css[i] === "}") {
+        depth -= 1;
+        if (depth === 0) {
+          blocks.push(css.slice(start, i));
+          closed = true;
+          break;
+        }
+      }
     }
+    if (!closed) throw new Error(`unterminated theme block: ${selector}`);
   }
-  throw new Error(`unterminated theme block: ${selector}`);
+  return blocks;
+}
+
+/** Read a token's raw declaration value, whitespace-normalized. */
+export function declIn(css: string, token: string): string {
+  const m = css.match(new RegExp(`--${token}:\\s*([^;]+)`));
+  if (!m) throw new Error(`missing token --${token}`);
+  return m[1].trim().replace(/\s+/g, " ");
 }
 
 /** Read an `H S% L%` channel triple. */
@@ -60,6 +92,32 @@ export function hslIn(
 
 type Rgb = [number, number, number];
 
+/**
+ * Read a hex surface token as RGB 0-255.
+ *
+ * Accepts `#rgb`, `#rrggbb` and `#rrggbbaa` (alpha is dropped — compositing is a
+ * separate question, answered by `compositeOver`). A token that exists but is not
+ * hex reports exactly that, rather than claiming it is missing.
+ */
+export function hexIn(css: string, token: string): Rgb {
+  const declaration = css.match(new RegExp(`--${token}:\\s*([^;]+)`));
+  if (!declaration) throw new Error(`missing surface --${token}`);
+
+  const value = declaration[1].trim();
+  const hex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b/.exec(value);
+  if (!hex) {
+    throw new Error(`--${token} is not a hex color (found "${value}")`);
+  }
+
+  const digits = hex[1];
+  // #rgb is shorthand for #rrggbb; #rrggbbaa carries an alpha byte we drop.
+  const pairs =
+    digits.length === 3
+      ? [...digits].map((d) => d + d)
+      : [digits.slice(0, 2), digits.slice(2, 4), digits.slice(4, 6)];
+  return pairs.map((p) => Number.parseInt(p, 16)) as Rgb;
+}
+
 /** `H S% L%` → RGB 0-255. */
 export function hslToRgb({
   h,
@@ -120,33 +178,9 @@ export function contrastRatio(a: Rgb, b: Rgb): number {
  * Relative luminance, not HSL lightness: the ladder varies hue and saturation as
  * it rises, and HSL L is not perceptually uniform — two steps can share an L and
  * still read as different brightnesses, so an "is each plane brighter than the one
- * below" assertion made on HSL L would be measuring the wrong thing.
- *
- * Accepts `#rgb`, `#rrggbb` and `#rrggbbaa` (alpha is ignored — luminance is a
- * property of the color, not of how much of it you can see through). A token that
- * exists but is not hex reports exactly that, rather than claiming it is missing.
+ * below" assertion made on HSL L would be measuring the wrong thing. Hex parsing
+ * (and its error reporting) is `hexIn`'s.
  */
 export function hexRelativeLuminanceIn(css: string, token: string): number {
-  const declaration = css.match(new RegExp(`--${token}:\\s*([^;]+)`));
-  if (!declaration) throw new Error(`missing surface --${token}`);
-
-  const value = declaration[1].trim();
-  const hex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b/.exec(value);
-  if (!hex) {
-    throw new Error(
-      `--${token} is not a hex color (found "${value}") — luminance is undefined for it`,
-    );
-  }
-
-  const digits = hex[1];
-  // #rgb is shorthand for #rrggbb; #rrggbbaa carries an alpha byte we drop.
-  const pairs =
-    digits.length === 3
-      ? [...digits].map((d) => d + d)
-      : [digits.slice(0, 2), digits.slice(2, 4), digits.slice(4, 6)];
-
-  const [r, g, b] = pairs.map((p) => Number.parseInt(p, 16) / 255);
-  const lin = (c: number) =>
-    c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
-  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+  return relativeLuminance(hexIn(css, token));
 }

package/src/styles/named-themes.css

@@ -2,7 +2,8 @@
  * components re-skin automatically because they reference the semantic tokens
  * (bg-card / border-border / surface-container, mapped in theme.css). Apply with
  * data-theme="<name>" on a wrapper (or <html>). The default :root / .dark spine
- * is the neutral "tangle" theme; "<name>-light" scopes are the light variants. */
+ * is the neutral "tangle" theme — also selectable by name as "tangle-dark";
+ * "<name>-light" scopes are the light variants. */
 
 /* Bridge — the actual re-skin mechanism. Tailwind utilities read the --color-*
  * layer (theme.css @theme: `bg-card` → var(--color-card) = hsl(var(--card))).
@@ -51,7 +52,7 @@
 [data-theme="arena-light"],
 [data-theme="tangle-light"] {
   --surface-success-bg: #ecfdf5; --surface-success-border: #a7f3d0; --surface-success-text: #047857;
-  --surface-warning-bg: #fffbeb; --surface-warning-border: #fde68a; --surface-warning-text: #b45309;
+  --surface-warning-bg: #fffbeb; --surface-warning-border: #fde68a; --surface-warning-text: #ab4f09;
   --surface-danger-bg: #fff1f2; --surface-danger-border: #fecdd3; --surface-danger-text: #b91c1c;
   --surface-info-bg: #f0f9ff; --surface-info-border: #bae6fd; --surface-info-text: #0369a1;
   /* Light-tuned interactive tokens — without these the named light scopes
@@ -166,8 +167,42 @@
   --text-primary: #06231a; --text-secondary: #285048; --text-muted: #5f8472; --text-dim: #82a699;
 }
 
-/* ───────────────────────── Tangle (neutral) — light variant alias ─────────── */
-/* dark = default :root spine; this is its light mode for the showcase. */
+/* ───────────────────────── Tangle (neutral) — the canonical pair ──────────── */
+/* tangle-dark names the default :root/.dark spine explicitly — the values mirror
+ * tokens.css exactly (pinned in named-themes.test.ts). The named scope matters the
+ * moment the attribute would NOT resolve to :root: a dark island inside a
+ * light-named wrapper inherits the light --hsl-* without it, and a theme picker
+ * switching between named themes needs a `tangle-dark` that actually selects. Same
+ * indigo hue family as tangle-light (~239-246), held to the dark discipline —
+ * graphite-indigo neutrals, elevation by lightening, the fill indigo that carries
+ * white (7.4:1) with the bright indigo reserved for accent text. The foreground
+ * and destructive redeclares equal :root standalone, but the block must be
+ * self-sufficient: in the island nesting an omitted token inherits the WRAPPER's
+ * light value (near-black secondary text on the dark secondary measured ~1.5:1).
+ * Status tokens are deliberately not redeclared: the :root dark status palette is
+ * already dark-tuned, same as aubergine/arena. */
+[data-theme="tangle-dark"] {
+  --hsl-background: 240 24% 11%;  --hsl-foreground: 225 22% 91%;
+  --hsl-card: 238 20% 22%;        --hsl-card-foreground: 225 22% 91%;
+  --hsl-popover: 239 22% 25%;     --hsl-popover-foreground: 225 22% 91%;
+  --hsl-primary: 246 54% 51%;     --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 239 22% 25%;   --hsl-secondary-foreground: 225 22% 91%;
+  --hsl-muted: 239 22% 25%;       --hsl-muted-foreground: 234 16% 74%;
+  --hsl-accent: 239 22% 25%;      --hsl-accent-foreground: 225 22% 91%;
+  --hsl-destructive: 348 74% 48%; --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-border: 236 20% 35%;      --hsl-input: 240 24% 15%;
+  --hsl-ring: 233 100% 87%;
+  --depth-1: #151523; --depth-2: #2d2e43; --depth-3: #32324e; --depth-4: #393957;
+  --bg-root: #151523; --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input));
+  --md3-surface-container-lowest: #0f0f1a; --md3-surface-container-low: #222235;
+  --md3-surface-container: #2d2e43; --md3-surface-container-high: #32324e;
+  --md3-surface-container-highest: #393957; --md3-outline-variant: #474a6b;
+  --border-subtle: rgba(165, 180, 252, 0.10); --border-default: rgba(165, 180, 252, 0.16);
+  --border-hover: rgba(165, 180, 252, 0.28); --accent-text: #A5B4FC;
+  --brand-primary: #7C6CF6; --brand-glow: #A5AAFC;
+  --text-primary: #e3e6ed; --text-secondary: #c2c7d4; --text-muted: #b2b4c7; --text-dim: #9ea5b9;
+}
+/* Its light mode. */
 [data-theme="tangle-light"] {
   --hsl-background: 240 33% 98%;  --hsl-foreground: 245 32% 14%;
   --hsl-card: 0 0% 100%;          --hsl-card-foreground: 245 32% 14%;

package/src/styles/named-themes.test.ts

@@ -1,7 +1,16 @@
 import { readFileSync } from "node:fs";
 import path from "node:path";
 import { describe, expect, it } from "vitest";
-import { blockIn, hslIn } from "./css-test-utils";
+import {
+  blockIn,
+  blocksIn,
+  contrastRatio,
+  declIn,
+  hexIn,
+  hexRelativeLuminanceIn,
+  hslIn,
+  hslToRgb,
+} from "./css-test-utils";
 
 /**
  * The named-theme contract.
@@ -16,6 +25,15 @@ const themes = readFileSync(
   path.resolve(import.meta.dirname, "named-themes.css"),
   "utf8",
 );
+const tokens = readFileSync(
+  path.resolve(import.meta.dirname, "tokens.css"),
+  "utf8",
+);
+
+// The canonical dark spine, anchored on the LAST selector of its multi-selector
+// header (`:root, [data-sandbox-ui], [data-theme="dark"], .dark {`) — the same
+// trick tokens.test.ts uses.
+const CANON = blockIn(tokens, ".dark");
 
 function block(selector: string): string {
   return blockIn(themes, selector);
@@ -69,3 +87,218 @@ describe('named theme: .dark[data-theme="intelligence"]', () => {
     expect(rules).not.toContain('[data-theme="intelligence-light"]');
   });
 });
+
+describe('named theme: [data-theme="tangle-dark"]', () => {
+  const css = block('[data-theme="tangle-dark"]');
+  // `[data-theme="tangle-light"]` heads two rules — the shared light-status
+  // override group AND the theme's own block; the theme block is the one that
+  // declares the spine.
+  const light = blocksIn(themes, '[data-theme="tangle-light"]').find((b) =>
+    b.includes("--hsl-background"),
+  );
+  if (!light) throw new Error('missing theme block: [data-theme="tangle-light"]');
+
+  it("IS the canonical dark spine, named — no drift from tokens.css", () => {
+    // tangle-dark exists so the attribute can NAME the default spine (a dark
+    // island in a light-named wrapper, a picker's explicit selection). If its
+    // values diverge from :root, "tangle dark" becomes two palettes.
+    const hslTokens = [
+      "hsl-background",
+      "hsl-foreground",
+      "hsl-card",
+      "hsl-card-foreground",
+      "hsl-popover",
+      "hsl-popover-foreground",
+      "hsl-primary",
+      "hsl-primary-foreground",
+      "hsl-secondary",
+      "hsl-secondary-foreground",
+      "hsl-muted",
+      "hsl-muted-foreground",
+      "hsl-accent",
+      "hsl-accent-foreground",
+      "hsl-destructive",
+      "hsl-destructive-foreground",
+      "hsl-border",
+      "hsl-input",
+      "hsl-ring",
+    ];
+    for (const token of hslTokens) {
+      expect(hslIn(css, token), `--${token} must equal the :root dark spine`).toEqual(
+        hslIn(CANON, token),
+      );
+    }
+    const hexTokens = [
+      "depth-1",
+      "depth-2",
+      "depth-3",
+      "depth-4",
+      "md3-surface-container-lowest",
+      "md3-surface-container-low",
+      "md3-surface-container",
+      "md3-surface-container-high",
+      "md3-surface-container-highest",
+      "md3-outline-variant",
+      "accent-text",
+      "brand-primary",
+      "brand-glow",
+      "text-primary",
+      "text-secondary",
+      "text-muted",
+      "text-dim",
+    ];
+    for (const token of hexTokens) {
+      expect(hexIn(css, token), `--${token} must equal the :root dark spine`).toEqual(
+        hexIn(CANON, token),
+      );
+    }
+    // Aliased and rgba declarations don't fit hslIn/hexIn — compare them raw.
+    for (const token of [
+      "bg-root",
+      "bg-card",
+      "bg-input",
+      "border-subtle",
+      "border-default",
+      "border-hover",
+    ]) {
+      expect(declIn(css, token), `--${token} must equal the :root dark spine`).toBe(
+        declIn(CANON, token),
+      );
+    }
+  });
+
+  it("shares tangle-light's indigo hue family — same brand, dark register", () => {
+    for (const token of ["hsl-primary", "hsl-ring", "hsl-background"]) {
+      const dark = hslIn(css, token);
+      const lite = hslIn(light, token);
+      expect(
+        Math.abs(dark.h - lite.h),
+        `--${token} hue must sit within 10 of tangle-light's`,
+      ).toBeLessThanOrEqual(10);
+    }
+  });
+
+  it("tints its neutrals with the hue — nothing achromatic", () => {
+    for (const token of [
+      "hsl-background",
+      "hsl-card",
+      "hsl-popover",
+      "hsl-secondary",
+      "hsl-muted",
+      "hsl-accent",
+      "hsl-border",
+      "hsl-input",
+    ]) {
+      const { h, s } = hslIn(css, token);
+      expect(h, `--${token} hue in the indigo band`).toBeGreaterThanOrEqual(220);
+      expect(h, `--${token} hue in the indigo band`).toBeLessThanOrEqual(250);
+      expect(s, `--${token} is hue-tinted, not dead grey`).toBeGreaterThan(5);
+    }
+  });
+
+  it("elevates by lightening, never darkening", () => {
+    const planes = ["depth-1", "depth-2", "depth-3", "depth-4"].map((t) =>
+      hexRelativeLuminanceIn(css, t),
+    );
+    for (let i = 1; i < planes.length; i++) {
+      expect(planes[i], `depth step ${i} must be brighter than the one below`).toBeGreaterThan(
+        planes[i - 1],
+      );
+    }
+    const ladder = ["hsl-background", "hsl-card", "hsl-popover"].map(
+      (t) => hslIn(css, t).l,
+    );
+    for (let i = 1; i < ladder.length; i++) {
+      expect(ladder[i], `step ${i} lightness must rise`).toBeGreaterThan(
+        ladder[i - 1],
+      );
+    }
+  });
+
+  it("holds the dark contrast discipline — AA floors, AAA ink", () => {
+    const canvas = hslToRgb(hslIn(css, "hsl-background"));
+    const card = hslToRgb(hslIn(css, "hsl-card"));
+    const fg = hslToRgb(hslIn(css, "hsl-foreground"));
+    expect(contrastRatio(fg, canvas), "ink on canvas").toBeGreaterThanOrEqual(7);
+    expect(contrastRatio(fg, card), "ink on card").toBeGreaterThanOrEqual(7);
+
+    const muted = hslToRgb(hslIn(css, "hsl-muted-foreground"));
+    expect(contrastRatio(muted, card), "muted ink on card").toBeGreaterThanOrEqual(
+      4.5,
+    );
+
+    const primary = hslToRgb(hslIn(css, "hsl-primary"));
+    const onPrimary = hslToRgb(hslIn(css, "hsl-primary-foreground"));
+    expect(
+      contrastRatio(onPrimary, primary),
+      "the fill indigo carries white",
+    ).toBeGreaterThanOrEqual(4.5);
+
+    // The ring is NON-TEXT: it must clear 3:1 against both planes it sits on.
+    const ring = hslToRgb(hslIn(css, "hsl-ring"));
+    expect(contrastRatio(ring, canvas), "ring on canvas").toBeGreaterThanOrEqual(3);
+    expect(contrastRatio(ring, card), "ring on card").toBeGreaterThanOrEqual(3);
+
+    expect(
+      contrastRatio(hexIn(css, "accent-text"), card),
+      "bright indigo accent text on card",
+    ).toBeGreaterThanOrEqual(4.5);
+
+    // The faintest tier is still TEXT: it clears the body floor on both planes.
+    const dim = hexIn(css, "text-dim");
+    expect(contrastRatio(dim, card), "text-dim on card").toBeGreaterThanOrEqual(4.5);
+    expect(contrastRatio(dim, canvas), "text-dim on canvas").toBeGreaterThanOrEqual(
+      4.5,
+    );
+  });
+
+  it("is self-sufficient inside a light-named wrapper — the island it exists for", () => {
+    // The feature's stated scenario: tangle-dark nested in a tangle-light
+    // wrapper. The browser composes the two scopes, so a token the island omits
+    // inherits the WRAPPER's light value, not :root's — the light group's
+    // near-black secondary-foreground on the dark secondary measured ~1.5:1
+    // before the block redeclared its foregrounds. Model that cascade: every
+    // tangle-light rule (the shared light group AND the theme block), with the
+    // island's declarations overriding.
+    const wrapper = blocksIn(themes, '[data-theme="tangle-light"]').join("\n");
+    const effective = (token: string) => {
+      const read = (source: string) => {
+        try {
+          return hslIn(source, token);
+        } catch {
+          return null;
+        }
+      };
+      const value = read(css) ?? read(wrapper);
+      if (!value) {
+        throw new Error(`--${token} resolves to nothing inside the island`);
+      }
+      return value;
+    };
+    for (const [fgToken, bgToken] of [
+      ["hsl-secondary-foreground", "hsl-secondary"],
+      ["hsl-accent-foreground", "hsl-accent"],
+      ["hsl-destructive-foreground", "hsl-destructive"],
+    ] as const) {
+      expect(
+        contrastRatio(hslToRgb(effective(fgToken)), hslToRgb(effective(bgToken))),
+        `effective ${fgToken} on ${bgToken}, island inside tangle-light`,
+      ).toBeGreaterThanOrEqual(4.5);
+    }
+  });
+
+  it("keeps the dark-tuned :root status palette instead of redeclaring it", () => {
+    // Same contract as aubergine/arena: dark named themes inherit status from the
+    // dark spine, so there is exactly one dark status palette to tune. What must
+    // be proven is that the inherited pairs pass AA on their dark surfaces.
+    expect(css).not.toMatch(/--surface-(success|warning|danger|info)-/);
+    for (const name of ["success", "warning", "danger", "info"]) {
+      const text = hexIn(CANON, `surface-${name}-text`);
+      const bg = hexIn(CANON, `surface-${name}-bg`);
+      expect(
+        contrastRatio(text, bg),
+        `inherited ${name} status text on its dark surface`,
+      ).toBeGreaterThanOrEqual(4.5);
+    }
+  });
+});