@tangle-network/brand 1.27.1 → 1.29.0

package/src/styles/named-themes.css

@@ -18,7 +18,7 @@
   --text-hero: var(--font-size-hero);
   --text-page: var(--font-size-3xl);
   --text-section: var(--font-size-xl);
-  --text-eyebrow: var(--font-size-sm);
+  --text-eyebrow: var(--font-size-xs);
   --text-control-sm: var(--control-text-sm);
   --text-control-md: var(--control-text-md);
   --text-control-lg: var(--control-text-lg);
@@ -28,6 +28,15 @@
   --spacing-control-md: var(--control-height);
   --spacing-control-lg: var(--control-height-lg);
   --spacing-shell-header: var(--shell-header-height);
+  --color-brand: var(--brand-primary);
+  --color-brand-dim: var(--btn-primary-bg);
+  --color-brand-cool: var(--brand-cool);
+  --color-brand-glow: var(--brand-glow);
+  --color-brand-emerald: var(--brand-emerald);
+  --color-status-running: var(--status-running);
+  --color-status-creating: var(--status-creating);
+  --color-status-stopped: var(--status-stopped);
+  --color-status-error: var(--status-error);
   --color-scrim: var(--scrim);
   --color-scrim-strong: var(--scrim-strong);
   --color-on-media: var(--on-media);
@@ -230,31 +239,14 @@
 }
 
 /* ───────────────────────── Tangle — canonical dark spine ───────────────────
- * tangle-dark names the default :root/.dark spine explicitly. The named block
- * repeats its surfaces and ink so a dark island remains self-sufficient
- * inside a light-named wrapper. Indigo stays in the accent; status tokens inherit
- * the dark-tuned root palette.
+ * tangle-dark names the default :root/.dark spine explicitly, for a dark island
+ * inside a light-named wrapper or a picker's explicit choice. It is the
+ * canonical spine by construction, never a copy of it.
  */
 [data-theme="tangle-dark"] {
-  --hsl-background: 240 33% 6%;       --hsl-foreground: 0 0% 90.1961%;
-  --hsl-card: 244 23% 12%;             --hsl-card-foreground: 0 0% 90.1961%;
-  --hsl-popover: 247 23% 21%;          --hsl-popover-foreground: 0 0% 90.1961%;
-  --hsl-primary: 246 54% 51%;            --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 249 24% 16%;        --hsl-secondary-foreground: 0 0% 90.1961%;
-  --hsl-muted: 249 24% 16%;            --hsl-muted-foreground: 240 5% 68%;
-  --hsl-accent: 249 24% 16%;           --hsl-accent-foreground: 0 0% 90.1961%;
-  --hsl-destructive: 0 90% 77%;        --hsl-destructive-foreground: 0 60% 10%;
-  --hsl-border: 243 20% 20%;           --hsl-input: 244 29% 9%;
-  --hsl-ring: 233 100% 87%;
-  --depth-1: #0a0a14; --depth-2: #191826; --depth-3: #221f33; --depth-4: #2c2942;
-  --bg-root: #0a0a14; --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input));
-  --md3-surface-container-lowest: #040408; --md3-surface-container-low: #12111f;
-  --md3-surface-container: #191826; --md3-surface-container-high: #221f33;
-  --md3-surface-container-highest: #2c2942; --md3-outline-variant: #2a293d;
-  --border-subtle: rgba(255, 255, 255, 0.10); --border-default: rgba(255, 255, 255, 0.16);
-  --border-hover: rgba(255, 255, 255, 0.28); --accent-text: #A5B4FC;
-  --brand-primary: #7C6CF6; --brand-glow: #A5AAFC;
-  --text-primary: #e6e6e6; --text-secondary: #c7c7c7; --text-muted: #b5b5b5; --text-dim: #a5a5a5;
+  /* Nothing to declare: tokens.css seeds the complete dark spine on this
+   * selector, so a tangle-dark island carries every value itself and inherits
+   * nothing from a light wrapper. */
 }
 /* Its light mode. */
 [data-theme="tangle-light"] {
@@ -378,7 +370,7 @@
   --hsl-accent: 133 38.4% 88%;    --hsl-accent-foreground: 143 25% 12%;
   --hsl-border: 107 8.7% 79.8%;   --hsl-input: 0 0% 100%;
   --hsl-ring: 148 28% 43%;
-  --hsl-destructive: 0 72% 41%;
+  --hsl-destructive: 0 73.7% 41.8%; /* the canonical light red, restated so the dark block below mirrors it */
   --hsl-raised: 110 18.7% 93.7%;  --hsl-raised-2: 0 0% 100%;
   --sidebar-background: 108 21.7% 95.5%; --sidebar-foreground: 143 25% 12%;
   --sidebar-primary: 153 38% 25%;        --sidebar-primary-foreground: 0 0% 100%;

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

@@ -11,6 +11,7 @@ import {
   hexRelativeLuminanceIn,
   hslIn,
   hslToRgb,
+  resolveIn,
 } from "./css-test-utils";
 
 /**
@@ -100,71 +101,15 @@ describe('named theme: [data-theme="tangle-dark"]', () => {
   );
   if (!light) throw new Error('missing theme block: [data-theme="tangle-light"]');
 
-  it("IS the canonical dark spine, named — no drift from tokens.css", () => {
+  it("declares nothing: the attribute names the spine tokens.css seeds on it", () => {
     // 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),
+    // island in a light-named wrapper, a picker's explicit selection). It is
+    // the canonical spine by construction: tokens.css declares every dark token
+    // on this selector, so a copy here could only drift from it.
+    expect(css.replace(/^[^{]*\{/, "").trim()).toBe("");
+    for (const token of ["hsl-background", "hsl-destructive", "accent-text", "text-dim"]) {
+      expect(resolveIn(css, token), `--${token} resolves to the :root dark spine`).toBe(
+        resolveIn(CANON, token),
       );
     }
   });
@@ -238,27 +183,14 @@ describe('named theme: [data-theme="tangle-dark"]', () => {
 
   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;
-    };
+    // wrapper. A token the island omitted would inherit the WRAPPER's light
+    // value (its near-black secondary-foreground on the dark secondary measured
+    // ~1.5:1 once), which is why tokens.css seeds the whole spine on the
+    // island's own selector.
+    // The island declares every dark token on itself (the baseline tokens.css
+    // seeds on its selector), so nothing falls through to the wrapper: the
+    // chain is the island's own block over the canonical dark spine.
+    const effective = (token: string) => hslIn(css, token);
     for (const [fgToken, bgToken] of [
       ["hsl-secondary-foreground", "hsl-secondary"],
       ["hsl-accent-foreground", "hsl-accent"],
@@ -304,14 +236,12 @@ describe("named themes: secondary text tiers are readable text", () => {
   ];
   for (const scope of scopes) {
     it(`[data-theme="${scope}"] holds AA for --text-muted and --text-dim`, () => {
-      const css = blocksIn(themes, `[data-theme="${scope}"]`).find((b) =>
-        /--text-dim:/.test(b),
-      );
-      expect(css, `${scope} declares its text ladder`).toBeDefined();
-      const resolve = (token: string): ReturnType<typeof hexIn> => {
-        const ref = css!.match(new RegExp(`--${token}:\\s*var\\(--([a-z0-9-]+)\\)`));
-        return ref ? resolve(ref[1]) : hexIn(css!, token);
-      };
+      // The theme block over the spine it inherits; tangle-dark declares nothing
+      // and resolves to the canonical dark spine.
+      const blocks = blocksIn(themes, `[data-theme="${scope}"]`);
+      const css = blocks.find((b) => /--hsl-background:/.test(b)) ?? blocks[0];
+      const chain = scope.endsWith("-light") ? [css, CANON_LIGHT] : [css];
+      const resolve = (token: string) => hexIn(chain, token);
       const planes = {
         canvas: resolve("bg-root"),
         card: resolve("bg-card"),
@@ -450,13 +380,16 @@ describe('named theme: [data-theme="hospitality"]', () => {
     // sage planes (surface-ladder.test.ts holds their hue and contrast), and the
     // dark destructive red is lightened to read on the lighter popover; it stays
     // red. The other status hues, info and every category stay canonical.
-    for (const css of [light, dark]) {
+    for (const [css, spine] of [
+      [light, CANON_LIGHT],
+      [dark, CANON],
+    ] as const) {
       expect(css).not.toMatch(
         /--(hsl-)?(success|warning|info|error)\b|--destructive|--hsl-destructive-foreground|--surface-info-|--status-|--tone-|--run-mix-|--syntax-/,
       );
-      expect(hslIn(css, "hsl-destructive").h, "destructive stays red").toBe(0);
+      expect(hslIn([css, spine], "hsl-destructive").h, "destructive stays red").toBe(0);
     }
-    expect(declIn(light, "hsl-destructive")).toBe(declIn(CANON_LIGHT, "hsl-destructive"));
+    expect(hslIn(light, "hsl-destructive")).toEqual(hslIn(CANON_LIGHT, "hsl-destructive"));
   });
 
   it("keeps the canonical ladder roles: paper cards on a tinted canvas in light, rising planes in dark", () => {
@@ -680,8 +613,12 @@ describe("dark themes: destructive reads as text", () => {
       '[data-theme="agents"]',
       '.dark[data-theme="website"]',
     ].map((selector): [string, string] => {
-      const css = blocksIn(themes, selector).find((b) => b.includes("--hsl-background"));
-      if (!css) throw new Error(`missing dark theme block: ${selector}`);
+      // A selector can head two rules (tangle-light's shared status group and
+      // its theme block); the theme block is the one with a canvas. tangle-dark
+      // declares nothing and resolves to the spine it is seeded with.
+      const blocks = blocksIn(themes, selector);
+      const css = blocks.find((b) => b.includes("--hsl-background")) ?? (blocks.length === 1 ? blocks[0] : undefined);
+      if (css === undefined) throw new Error(`missing dark theme block: ${selector}`);
       return [selector, css];
     }),
   ];

package/src/styles/surface-ladder.test.ts

@@ -1,7 +1,7 @@
 import { readFileSync } from "node:fs";
 import path from "node:path";
 import { describe, expect, it } from "vitest";
-import { blockIn, blocksIn, contrastRatio, declIn, hexIn, hslIn, hslToRgb, oklchLightness } from "./css-test-utils";
+import { blockIn, blocksIn, contrastRatio, declIn, hexIn, hslIn, hslToRgb, oklchLightness, resolveIn } from "./css-test-utils";
 
 /**
  * The surface ladder and the interaction palette.
@@ -171,14 +171,13 @@ describe("shared surface context and interaction tokens (tokens.css)", () => {
     }
   });
 
-  it("defaults the raised planes and shadows to the plain spine (wells: the canonical suite below)", () => {
-    expect(declIn(body, "hsl-raised")).toBe("var(--hsl-card)");
-    expect(declIn(body, "hsl-raised-2")).toBe("var(--hsl-card)");
+  it("takes the raised planes from the spine's own L3 and L4 (values: the canonical suite below)", () => {
+    expect(declIn(body, "hsl-raised")).toBe("var(--hsl-secondary)");
+    expect(declIn(body, "hsl-raised-2")).toBe("var(--hsl-popover)");
     expect(declIn(body, "well")).toBe("var(--well-page)");
     expect(declIn(body, "shadow-raised")).toBe("var(--shadow-card)");
     // A shadow token joins a comma list; "none" would void the list.
     expect(declIn(body, "shadow-well")).toBe("0 0 0 0 transparent");
-    expect(declIn(body, "edge-highlight")).toBe("0 0 0 0 transparent");
   });
 
   it("derives the four interaction states from the focus ring at the specified alphas", () => {
@@ -223,19 +222,20 @@ describe("shared surface context and interaction tokens (tokens.css)", () => {
   });
 });
 
-describe("Canonical surface ladder (every theme without its own ladder)", () => {
-  // The spine's shared --bg-input sat +3.1 L above the dark page and -2.6 L under
-  // the white card, so a field read as the plane it was on. The defaults derive
-  // wells and the field border from each theme's own page, card, hairline and ink.
-  const withWells = (selector: string) => {
+describe("Canonical surface ladder (the spine: :root, .dark, .light, dark, light, tangle-dark)", () => {
+  // Drew, 2026-10-26, on a Discovery run page built from the spine: "no color
+  // depth ladder". Raised levels painted the card and every well was one value,
+  // so a card in a card, and a field in it, read as the plane they sat on.
+  const css = rules(tokens);
+  const ladderRule = (selector: string) => {
     const block = blocksIn(tokens, selector).find((b) => /--well-page:/.test(b));
-    if (!block) throw new Error(`no well defaults under ${selector}`);
+    if (!block) throw new Error(`no ladder rule under ${selector}`);
     return block;
   };
-  const defaults = withWells("[data-theme]");
-  const lightDefaults = withWells('[data-theme$="-light"]');
-  const DARK = blockIn(tokens, ".dark");
-  const LIGHT = blockIn(tokens, ".light");
+  const shared = ladderRule("[data-theme]");
+  const lightRule = ladderRule('[data-theme$="-light"]');
+  const DARK = [shared, blockIn(tokens, ".dark")];
+  const LIGHT = [lightRule, shared, blockIn(tokens, ".light")];
 
   type Rgb = [number, number, number];
   const toLab = (rgb: Rgb) => {
@@ -255,37 +255,104 @@ describe("Canonical surface ladder (every theme without its own ladder)", () =>
   };
   /** `color-mix(in oklab, a, b <t>)`. */
   const mix = (a: Rgb, b: Rgb, t: number) => fromLab(toLab(a).map((v, i) => v * (1 - t) + toLab(b)[i] * t));
-  const spine = (css: string, token: string) => hslToRgb(hslIn(css, token)) as Rgb;
+  /** A token as the browser paints it, including the `page + 30% black` well. */
+  const rgb = (sources: string[], token: string): Rgb => {
+    const recess = /^color-mix\(in oklab, hsl\(var\(--([a-z0-9-]+)\)\) (\d+)%, black\)$/.exec(resolveIn(sources, token));
+    if (recess) return mix(rgb(sources, recess[1]!), [0, 0, 0], 1 - Number(recess[2]) / 100);
+    return hexIn(sources, token);
+  };
+  const Lof = (sources: string[], token: string) => oklchLightness(rgb(sources, token));
+
+  const ladder: Array<[role: string, token: string, light: number, dark: number]> = [
+    ["page", "hsl-background", 94.9, 15.0],
+    ["card", "hsl-card", 100, 21.7],
+    ["raised", "hsl-raised", 95.2, 26.6],
+    ["raised-2", "hsl-raised-2", 100, 31.6],
+    ["popover", "hsl-popover", 100, 31.6],
+    ["well on page", "well-page", 100, 10.2],
+    ["well in card", "well-card", 94.9, 10.2],
+    ["well in raised", "well-raised", 100, 21.7],
+    ["well in raised-2", "well-raised-2", 94.9, 21.7],
+    ["hairline", "hsl-border", 83.5, 34.1],
+  ];
+  for (const [role, token, lightL, darkL] of ladder) {
+    it(`${role} (--${token}) lands at L ${lightL} light / ${darkL} dark`, () => {
+      expect(Lof(LIGHT, token)).toBeCloseTo(lightL, 0);
+      expect(Lof(DARK, token)).toBeCloseTo(darkL, 0);
+    });
+  }
 
-  it("declares the derivations this suite measures", () => {
-    expect(declIn(defaults, "well-page")).toBe("color-mix(in oklab, hsl(var(--hsl-background)) 70%, black)");
-    expect(declIn(defaults, "field-border")).toBe("color-mix(in oklab, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 45%)");
-    expect(declIn(lightDefaults, "well-page")).toBe("hsl(var(--hsl-card))");
-    for (const token of ["well-card", "well-raised", "well-raised-2"]) {
-      expect(declIn(defaults, token)).toBe("var(--well-page)");
-      expect(declIn(lightDefaults, token)).toBe("hsl(var(--hsl-background))");
+  const steps: Array<[child: string, parent: string]> = [
+    ["hsl-card", "hsl-background"],
+    ["hsl-raised", "hsl-card"],
+    ["hsl-raised-2", "hsl-raised"],
+    ["well-page", "hsl-background"],
+    ["well-card", "hsl-card"],
+    ["well-raised", "hsl-raised"],
+    ["well-raised-2", "hsl-raised-2"],
+  ];
+  it.each([
+    ["light", LIGHT],
+    ["dark", DARK],
+  ])("steps every plane and well at least 4.4 L off its parent in %s", (_mode, sources) => {
+    for (const [child, parent] of steps) {
+      expect(Math.abs(Lof(sources, child) - Lof(sources, parent)), `${child} on ${parent}`).toBeGreaterThanOrEqual(4.4);
     }
   });
 
-  it("recesses the dark well at least 4 L below the page and the card", () => {
-    const well = mix(spine(DARK, "hsl-background"), [0, 0, 0], 0.3);
-    expect(oklchLightness(spine(DARK, "hsl-background")) - oklchLightness(well)).toBeGreaterThanOrEqual(4);
-    expect(oklchLightness(spine(DARK, "hsl-card")) - oklchLightness(well)).toBeGreaterThanOrEqual(10);
+  it("sinks every dark well below the plane it sits on, and lifts dark planes with a top highlight", () => {
+    for (const [well, parent] of steps.filter(([child]) => child.startsWith("well"))) {
+      expect(Lof(DARK, well), `${well} under ${parent}`).toBeLessThan(Lof(DARK, parent));
+    }
+    expect(declIn(shared, "edge-highlight")).toBe("inset 0 1px 0 rgba(255, 255, 255, 0.06)");
+    expect(declIn(lightRule, "edge-highlight")).toBe("0 0 0 0 transparent");
   });
 
-  it("steps the light well 4 L or more off the page and the card", () => {
-    const page = oklchLightness(spine(LIGHT, "hsl-background"));
-    const card = oklchLightness(spine(LIGHT, "hsl-card"));
-    expect(card - page).toBeGreaterThanOrEqual(4);
+  it("draws every line with one hairline: 1.5:1 on the dark card and still seen on the raised plane", () => {
+    for (const sources of [LIGHT, DARK]) {
+      for (const alias of ["border-subtle", "border-default", "md3-outline-variant"]) {
+        expect(hexIn(sources, alias), `--${alias}`).toEqual(hexIn(sources, "hsl-border"));
+      }
+    }
+    expect(contrastRatio(rgb(DARK, "hsl-border"), rgb(DARK, "hsl-card"))).toBeGreaterThanOrEqual(1.45);
+    expect(contrastRatio(rgb(DARK, "hsl-border"), rgb(DARK, "hsl-raised"))).toBeGreaterThanOrEqual(1.25);
+    expect(contrastRatio(rgb(LIGHT, "hsl-border"), rgb(LIGHT, "hsl-background"))).toBeGreaterThanOrEqual(1.4);
   });
 
   it.each([
-    ["dark", () => DARK],
-    ["light", () => LIGHT],
-  ])("draws a field border that clears 3:1 on the card and the page in %s (WCAG 1.4.11)", (_mode, css) => {
-    const border = mix(spine(css(), "hsl-border"), spine(css(), "hsl-foreground"), 0.45);
-    expect(contrastRatio(border, spine(css(), "hsl-card")), "on the card").toBeGreaterThanOrEqual(3);
-    expect(contrastRatio(border, spine(css(), "hsl-background")), "on the page").toBeGreaterThanOrEqual(3);
+    ["dark", DARK],
+    ["light", LIGHT],
+  ])("draws a field border that clears 3:1 on the page, card and raised plane in %s (WCAG 1.4.11)", (_mode, sources) => {
+    expect(declIn(shared, "field-border")).toBe("color-mix(in oklab, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 45%)");
+    const border = mix(rgb(sources, "hsl-border"), rgb(sources, "hsl-foreground"), 0.45);
+    for (const plane of ["hsl-background", "hsl-card", "hsl-raised"]) {
+      expect(contrastRatio(border, rgb(sources, plane)), `on --${plane}`).toBeGreaterThanOrEqual(3);
+    }
+  });
+
+  it("keeps every named theme with its own planes on the flat ladder until it is tuned", () => {
+    // The canonical ladder is the spine's indigo planes; a named theme that
+    // inherited it would nest an indigo card inside its own card.
+    const flat = css.match(/([^{}]*)\{\s*--hsl-raised:\s*var\(--hsl-card\);[^}]*\}/);
+    expect(flat, "the named-theme flat rule").not.toBeNull();
+    const flatBody = flat![0];
+    for (const [token, value] of [
+      ["hsl-raised", "var(--hsl-card)"],
+      ["hsl-raised-2", "var(--hsl-card)"],
+      ["well-raised", "var(--well-card)"],
+      ["well-raised-2", "var(--well-card)"],
+      ["edge-highlight", "0 0 0 0 transparent"],
+    ]) {
+      expect(declIn(flatBody, token!), `--${token}`).toBe(value);
+    }
+    const names = (selectors: string) => [...selectors.matchAll(/data-theme="([^"]+)"/g)].map((m) => m[1]);
+    const ownPlanes = new Set(
+      [...rules(themes).matchAll(/([^{}]*)\{([^{}]*)\}/g)]
+        .filter((m) => m[2]!.includes("--hsl-background:"))
+        .flatMap((m) => names(m[1]!)),
+    );
+    const tuned = new Set(["hospitality"]);
+    expect(new Set(names(flat![1]!))).toEqual(new Set([...ownPlanes].filter((name) => !tuned.has(name!))));
   });
 });
 
@@ -305,6 +372,6 @@ describe("Inset workspace backdrop (canonical themes)", () => {
     expect(Math.abs(panel - backdrop)).toBeGreaterThanOrEqual(3);
   });
   it("keeps the dark floor tokens equal, as their comment says", () => {
-    expect(declIn(DARK, "md3-surface-dim")).toBe(declIn(DARK, "md3-surface-container-lowest"));
+    expect(hexIn(DARK, "md3-surface-dim")).toEqual(hexIn(DARK, "md3-surface-container-lowest"));
   });
 });

package/src/styles/theme-scopes.ts

@@ -18,8 +18,10 @@ const ladders = read("ladders.css");
 
 /** The spine block of a selector: the rule that declares the surface ladder. */
 function spine(source: string, selector: string): string {
-  const block = blocksIn(source, selector).find((b) => b.includes("--hsl-background:"));
-  if (!block) throw new Error(`missing spine block: ${selector}`);
+  const blocks = blocksIn(source, selector);
+  // A theme that declares nothing (tangle-dark) is the baseline its chain continues to.
+  const block = blocks.find((b) => b.includes("--hsl-background:")) ?? (blocks.length === 1 ? blocks[0] : undefined);
+  if (block === undefined) throw new Error(`missing spine block: ${selector}`);
   return block;
 }
 

package/src/styles/theme.css

@@ -36,16 +36,6 @@
   --radius-xl: 12px;
   --radius-full: 999px;
 
-  --color-brand: #6366F1;
-  --color-brand-dim: #4F46E5;
-  --color-brand-cool: #818CF8;
-  --color-brand-glow: #A5AAFC;
-  --color-brand-emerald: #10B981;
-  --color-status-running: #10B981;
-  --color-status-creating: #9B93F0;
-  --color-status-stopped: #FFB800;
-  --color-status-error: #FF4D6D;
-
   --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
   --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
   --shadow-glow: none;
@@ -60,11 +50,23 @@
  * Public HSL aliases remain HSL channel triples, never full CSS colors.
  */
 @theme inline {
+  /* Brand and status colours follow the runtime tokens, so bg-brand and
+   * text-status-running change with the mode and the named theme. */
+  --color-brand: var(--brand-primary);
+  --color-brand-dim: var(--btn-primary-bg);
+  --color-brand-cool: var(--brand-cool);
+  --color-brand-glow: var(--brand-glow);
+  --color-brand-emerald: var(--brand-emerald);
+  --color-status-running: var(--status-running);
+  --color-status-creating: var(--status-creating);
+  --color-status-stopped: var(--status-stopped);
+  --color-status-error: var(--status-error);
+
   --text-display: var(--font-size-display);
   --text-hero: var(--font-size-hero);
   --text-page: var(--font-size-3xl);
   --text-section: var(--font-size-xl);
-  --text-eyebrow: var(--font-size-sm);
+  --text-eyebrow: var(--font-size-xs);
 
   /* Control and form type: text-control-sm/md/lg, text-label, text-help. */
   --text-control-sm: var(--control-text-sm);