@tangle-network/brand 1.27.0 → 1.28.0

package/src/styles/named-themes.css

@@ -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

@@ -305,6 +305,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,6 +50,18 @@
  * 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);