@tangle-network/brand 1.30.0 → 1.31.1

package/src/styles/tokens.test.ts

@@ -589,25 +589,46 @@ describe("categorical tones are a complete, legible family", () => {
   });
 });
 
-describe("each colour is declared once: a role, then aliases", () => {
-  // The spine is authored as roles (planes, ink tiers, four indigos, one ink
-  // per status hue) that every other name of the same colour aliases. A new
-  // hex literal is a second declaration of a colour that already has a name,
-  // so the count can only fall. The generated tone region is excluded: its
-  // values are the generator's, solved from the planes declared here.
-  const literalsOutsideTones = (spine: string) => {
-    const set = new Set<string>();
-    for (const [, name, value] of spine.matchAll(/--([a-z0-9-]+)\s*:\s*([^;]+);/g)) {
-      if (/^(tone-|surface-(violet|orange|teal)-)/.test(name)) continue;
-      for (const hex of value.match(/#[0-9a-fA-F]{6}\b/g) ?? []) set.add(hex.toLowerCase());
+describe("syntax keywords use a text-safe category role", () => {
+  it.each([["dark", DARK], ["light", LIGHT]] as const)("%s keywords clear AA on every code plane", (_, spine) => {
+    const ink = hexIn(spine, "syntax-keyword");
+    for (const plane of ["hsl-background", "hsl-card", "hsl-popover"]) {
+      expect(contrastRatio(ink, hexIn(spine, plane)), `keyword on ${plane}`).toBeGreaterThanOrEqual(4.5);
     }
-    return set;
-  };
+  });
+});
+
+describe("text-bearing accent gradients keep AA at every stop", () => {
+  const named = readFileSync(path.resolve(import.meta.dirname, "named-themes.css"), "utf8");
+  const namedRules = [...named.replace(/\/\*[\s\S]*?\*\//g, "").matchAll(/([^{}]*)\{([^{}]*--hsl-background:[^{}]*)\}/g)];
+  const cases = [["dark", [DARK]], ["light", [LIGHT, DARK]], ...namedRules.map(([, selector, body]) => [selector.trim(), [body, /-light|not\(\.dark\)/.test(selector) ? LIGHT : DARK, DARK]])] as const;
+  for (const [name, chain] of cases) {
+    it(String(name), () => {
+      const sources = [...chain];
+      const gradient = resolveIn(sources, "accent-gradient-strong");
+      const stops = [...gradient.matchAll(/var\(--([a-z0-9-]+)\)/g)].map((match) => match[1]);
+      expect(stops.length).toBeGreaterThanOrEqual(2);
+      const label = hexIn(sources, "btn-primary-text");
+      for (const stop of stops) expect(contrastRatio(hexIn(sources, stop), label), stop).toBeGreaterThanOrEqual(4.5);
+    });
+  }
+});
+
+describe("the generated palette owns every colour", () => {
   it.each([
-    ["dark", DARK, 28],
-    ["light", LIGHT, 25],
-  ] as const)("%s spine declares no new hex literal", (_, spine, ceiling) => {
-    expect(literalsOutsideTones(spine).size).toBeLessThanOrEqual(ceiling);
+    ["dark", DARK],
+    ["light", LIGHT],
+  ] as const)("%s spine declares at most 30 distinct hex literals, including tones", (_, spine) => {
+    const literals = new Set((spine.match(/#[0-9a-fA-F]{6}\b/g) ?? []).map((hex) => hex.toLowerCase()));
+    expect(literals.size).toBeLessThanOrEqual(30);
+  });
+
+  it("has no authored hex outside generated blocks", () => {
+    const named = readFileSync(path.resolve(import.meta.dirname, "named-themes.css"), "utf8");
+    for (const css of [tokens, named]) {
+      expect(css).toContain("/* palette:begin");
+      expect(css.replace(/\/\* palette:begin[\s\S]*?\/\* palette:end \*\//g, "")).not.toMatch(/#[0-9a-fA-F]{3,8}\b/);
+    }
   });
 });
 
@@ -646,3 +667,39 @@ describe("shadow, radius and loop period are one role each", () => {
     expect(breathe, "a loop never moves or scales").not.toMatch(/transform|translate|scale|rotate/);
   });
 });
+
+describe("data-accent scopes retint the accent and nothing else", () => {
+  // Palette plan item 6: a product sets data-accent="<category>" on <html> or a
+  // theme boundary. Each hue's roles are generated (gen-ladders.mjs) into the
+  // tone regions, which the ratchet above already counts as generated tones.
+  const themes = readFileSync(path.resolve(import.meta.dirname, "named-themes.css"), "utf8");
+  const region = themes.match(/\/\* accent-scopes:begin[\s\S]*?accent-scopes:end \*\//)?.[0] ?? "";
+  const hues = [...region.matchAll(/^\[data-accent="([a-z]+)"\],$/gm)].map((m) => m[1]);
+
+  it("scopes every categorical hue", () => {
+    expect(hues).toEqual(["violet", "orange", "teal", "blue", "pink", "brown", "cyan", "lime"]);
+  });
+
+  for (const [theme, spine] of [
+    ["dark", DARK],
+    ["light", LIGHT],
+  ] as const) {
+    it.each(hues)(`${theme} %s: the accent ink clears 4.5:1 on the page and the card`, (hue) => {
+      for (const plane of ["md3-surface", "md3-surface-container"]) {
+        expect(contrastRatio(hexIn(spine, `tone-${hue}-ink`), hexIn(spine, plane)), plane).toBeGreaterThanOrEqual(4.5);
+      }
+    });
+  }
+
+  it("maps the five roles to the hue and re-declares no plane, body ink or status", () => {
+    for (const hue of hues) {
+      const rule = blockIn(region, `[data-accent="${hue}"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme])`);
+      expect([...rule.matchAll(/--([a-z-]+): var\(--tone-([a-z]+)-([a-z]+)\);/g)].map((m) => `${m[1]}=${m[2]}-${m[3]}`)).toEqual([
+        `hsl-primary=${hue}-fill`, `hsl-ring=${hue}-ring`, `brand-primary=${hue}-mark`, `brand-cool=${hue}-line`, `accent-text=${hue}-ink`,
+      ]);
+    }
+    const declared = [...region.matchAll(/--([a-z0-9-]+):/g)].map((m) => m[1]);
+    const untouchable = /^(hsl-(background|card|popover|secondary|muted|accent|border|input|foreground|muted-foreground|success|warning|destructive|info)|text-|md3-(surface($|-(container|dim|bright|variant))|on-surface|outline)|depth-|bg-(root|card|elevated|dark|section|input)|surface-|status-(running|stopped|warm|cold|error|deleted))/;
+    expect(declared.filter((t) => untouchable.test(t))).toEqual([]);
+  });
+});