@tangle-network/brand 1.31.0 → 1.31.1

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

@@ -330,31 +330,16 @@ describe("Canonical surface ladder (the spine: :root, .dark, .light, dark, light
     }
   });
 
-  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);
+  it("gives every named theme its own raised planes and wells", () => {
+    for (const body of rules(themes).matchAll(/[^{}]*\{([^{}]*--hsl-background:[^{}]*)\}/g)) {
+      const own = body[1]!;
+      expect(declIn(own, "hsl-raised")).toBe("var(--hsl-secondary)");
+      expect(resolveIn(own, "hsl-raised"), "raised must differ from the card").not.toBe(resolveIn(own, "hsl-card"));
+      for (const role of ["well-page", "well-card", "well-raised", "well-raised-2"]) {
+        expect(own, role).toContain(`--${role}:`);
+      }
     }
-    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!))));
-  });
-});
+  });});
 
 describe("Inset workspace backdrop (canonical themes)", () => {
   // sandbox-ui WorkspaceSurface / WorkspaceLayout surface="inset" paint the

package/src/styles/system.css

@@ -33,36 +33,36 @@
   --accent-soft: var(--iris-3);
   --accent-soft-hover: var(--iris-4);
   --accent-line: var(--iris-7);
-  --hsl-background: 270 5.6% 7.1%;
-  --hsl-foreground: 240 6.2% 93.7%;
-  --hsl-card: 270 3.8% 10.2%;
-  --hsl-card-foreground: 240 6.2% 93.7%;
-  --hsl-popover: 260 4.2% 13.9%;
-  --hsl-popover-foreground: 240 6.2% 93.7%;
-  --hsl-primary: 240 60% 59.8%;
+  --hsl-background: 270 5.5556% 7.0588%;
+  --hsl-foreground: 240 6.25% 93.7255%;
+  --hsl-card: 270 3.8462% 10.1961%;
+  --hsl-card-foreground: 240 6.25% 93.7255%;
+  --hsl-popover: 260 4.2254% 13.9216%;
+  --hsl-popover-foreground: 240 6.25% 93.7255%;
+  --hsl-primary: 240 60% 59.8039%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 260 4.2% 13.9%;
-  --hsl-secondary-foreground: 240 6.2% 93.7%;
-  --hsl-muted: 260 4.2% 13.9%;
-  --hsl-muted-foreground: 258 6.9% 71.8%;
-  --hsl-accent: 270 4.7% 16.9%;
-  --hsl-accent-foreground: 240 6.2% 93.7%;
-  --hsl-destructive: 348 68.4% 18.6%;
-  --hsl-destructive-foreground: 350 100% 91%;
-  --hsl-border: 270 5% 23.5%;
-  --hsl-input: 251 4.8% 44.9%;
-  --hsl-ring: 242 63.7% 64.3%;
-  --hsl-success: 151 54.7% 41.6%;
-  --hsl-warning: 42 100% 62%;
-  --hsl-info: 206 100% 50%;
-  --sidebar-background: 270 3.8% 10.2%;
-  --sidebar-foreground: 240 6.2% 93.7%;
-  --sidebar-primary: 240 60% 59.8%;
+  --hsl-secondary: 260 4.2254% 13.9216%;
+  --hsl-secondary-foreground: 240 6.25% 93.7255%;
+  --hsl-muted: 260 4.2254% 13.9216%;
+  --hsl-muted-foreground: 258 6.9444% 71.7647%;
+  --hsl-accent: 270 4.6512% 16.8627%;
+  --hsl-accent-foreground: 240 6.25% 93.7255%;
+  --hsl-destructive: 348 68.4211% 18.6275%;
+  --hsl-destructive-foreground: 349.5652 100% 90.9804%;
+  --hsl-border: 270 5% 23.5294%;
+  --hsl-input: 250.9091 4.8035% 44.902%;
+  --hsl-ring: 242.069 63.7363% 64.3137%;
+  --hsl-success: 151.0345 54.717% 41.5686%;
+  --hsl-warning: 42.0619 100% 61.9608%;
+  --hsl-info: 206.1176 100% 50%;
+  --sidebar-background: 270 3.8462% 10.1961%;
+  --sidebar-foreground: 240 6.25% 93.7255%;
+  --sidebar-primary: 240 60% 59.8039%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 270 4.7% 16.9%;
-  --sidebar-accent-foreground: 240 6.2% 93.7%;
-  --sidebar-border: 270 5% 23.5%;
-  --sidebar-ring: 242 63.7% 64.3%;
+  --sidebar-accent: 270 4.6512% 16.8627%;
+  --sidebar-accent-foreground: 240 6.25% 93.7255%;
+  --sidebar-border: 270 5% 23.5294%;
+  --sidebar-ring: 242.069 63.7363% 64.3137%;
   --md3-surface: var(--mauve-1);
   --md3-surface-dim: var(--mauve-1);
   --md3-surface-bright: var(--mauve-5);
@@ -230,35 +230,35 @@
   --accent-soft-hover: var(--iris-4);
   --accent-line: var(--iris-7);
   --hsl-background: 0 0% 100%;
-  --hsl-foreground: 257 10.1% 13.5%;
+  --hsl-foreground: 257.1429 10.1449% 13.5294%;
   --hsl-card: 0 0% 100%;
-  --hsl-card-foreground: 257 10.1% 13.5%;
+  --hsl-card-foreground: 257.1429 10.1449% 13.5294%;
   --hsl-popover: 0 0% 100%;
-  --hsl-popover-foreground: 257 10.1% 13.5%;
-  --hsl-primary: 240 60% 59.8%;
+  --hsl-popover-foreground: 257.1429 10.1449% 13.5294%;
+  --hsl-primary: 240 60% 59.8039%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 285 14.3% 94.5%;
-  --hsl-secondary-foreground: 257 10.1% 13.5%;
-  --hsl-muted: 285 14.3% 94.5%;
-  --hsl-muted-foreground: 252 4.8% 40.8%;
-  --hsl-accent: 276 11.6% 91.6%;
-  --hsl-accent-foreground: 257 10.1% 13.5%;
-  --hsl-destructive: 358 64.8% 49%;
+  --hsl-secondary: 285 14.2857% 94.5098%;
+  --hsl-secondary-foreground: 257.1429 10.1449% 13.5294%;
+  --hsl-muted: 285 14.2857% 94.5098%;
+  --hsl-muted-foreground: 252 4.8077% 40.7843%;
+  --hsl-accent: 276 11.6279% 91.5686%;
+  --hsl-accent-foreground: 257.1429 10.1449% 13.5294%;
+  --hsl-destructive: 358.1481 64.8% 49.0196%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 262 11.4% 86.3%;
-  --hsl-input: 249 6% 57.5%;
-  --hsl-ring: 240 60% 59.8%;
-  --hsl-success: 151 54.7% 41.6%;
-  --hsl-warning: 42 100% 62%;
-  --hsl-info: 206 100% 50%;
-  --sidebar-background: 270 20% 98%;
-  --sidebar-foreground: 257 10.1% 13.5%;
-  --sidebar-primary: 240 60% 59.8%;
+  --hsl-border: 262.5 11.4286% 86.2745%;
+  --hsl-input: 249.2308 5.9908% 57.451%;
+  --hsl-ring: 240 60% 59.8039%;
+  --hsl-success: 151.0345 54.717% 41.5686%;
+  --hsl-warning: 42.0619 100% 61.9608%;
+  --hsl-info: 206.1176 100% 50%;
+  --sidebar-background: 270 20% 98.0392%;
+  --sidebar-foreground: 257.1429 10.1449% 13.5294%;
+  --sidebar-primary: 240 60% 59.8039%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 276 11.6% 91.6%;
-  --sidebar-accent-foreground: 257 10.1% 13.5%;
-  --sidebar-border: 262 11.4% 86.3%;
-  --sidebar-ring: 240 60% 59.8%;
+  --sidebar-accent: 276 11.6279% 91.5686%;
+  --sidebar-accent-foreground: 257.1429 10.1449% 13.5294%;
+  --sidebar-border: 262.5 11.4286% 86.2745%;
+  --sidebar-ring: 240 60% 59.8039%;
   --md3-surface: #ffffff;
   --md3-surface-dim: var(--mauve-2);
   --md3-surface-bright: #ffffff;

package/src/styles/theme-scopes.ts

@@ -1,6 +1,6 @@
 import { readFileSync } from "node:fs";
 import path from "node:path";
-import { blockIn, blocksIn, hslToRgb } from "./css-test-utils";
+import { blockIn, blocksIn, hexIn } from "./css-test-utils";
 
 /**
  * Every theme scope a consumer can select, each with its CSS sources listed
@@ -39,7 +39,7 @@ const named = (selector: string) => spine(themes, selector);
  * Each scope lists its sources from the most specific to the baseline it
  * inherits from, as the cascade resolves them.
  */
-export const scopes: Array<{ name: string; sources: string[] }> = [
+const baseScopes: Array<{ name: string; sources: string[] }> = [
   { name: "canonical dark", sources: [DARK] },
   { name: "canonical light", sources: [LIGHT, DARK] },
   {
@@ -80,13 +80,17 @@ export const scopes: Array<{ name: string; sources: string[] }> = [
     sources: [named('[data-theme="website"]:where(:not(.dark))'), LIGHT, DARK],
   },
   { name: "website dark", sources: [named('.dark[data-theme="website"]'), DARK] },
-  // Every data-accent scope on each canonical mode: its role rule, then the spine.
+];
+
+// Accent is promised on any named boundary, so use every real supported mode,
+// including the light-default projection, rather than only canonical planes.
+export const scopes = [
+  ...baseScopes,
   ...[...themes.matchAll(/^\[data-accent="([a-z]+)"\],$/gm)].flatMap(([, hue]) => {
     const rule = blockIn(themes, `[data-accent="${hue}"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme])`);
-    return [
-      { name: `accent ${hue} on dark`, sources: [rule, DARK] },
-      { name: `accent ${hue} on light`, sources: [rule, LIGHT, DARK] },
-    ];
+    return baseScopes.filter(({ name }) => !name.startsWith("system ")).map(({ name, sources }) => ({
+      name: `accent ${hue} on ${name}`, sources: [rule, ...sources],
+    }));
   }),
 ];
 
@@ -98,18 +102,5 @@ export type Rgb = [number, number, number];
  * declares each name.
  */
 export function resolve(sources: string[], token: string): Rgb {
-  const raw = sources
-    .map((css) => css.match(new RegExp(`(?<![\\w-])--${token}:\\s*([^;]+);`))?.[1]?.trim())
-    .find((value) => value !== undefined);
-  if (raw === undefined) throw new Error(`--${token} resolves to nothing`);
-
-  const ref = /^(?:hsl\()?var\(--([a-z0-9-]+)\)\)?$/.exec(raw);
-  if (ref) return resolve(sources, ref[1]);
-  const hex = /^#([0-9a-fA-F]{6})\b/.exec(raw);
-  if (hex) {
-    return [0, 2, 4].map((i) => Number.parseInt(hex[1].slice(i, i + 2), 16)) as Rgb;
-  }
-  const hsl = /^([\d.]+)\s+([\d.]+)%\s+([\d.]+)%/.exec(raw);
-  if (hsl) return hslToRgb({ h: Number(hsl[1]), s: Number(hsl[2]), l: Number(hsl[3]) });
-  throw new Error(`--${token} has an unreadable value: ${raw}`);
+  return hexIn(sources, token);
 }