@tangle-network/brand 1.21.1 → 1.22.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 1.22.1
+
+### Patch Changes
+
+- 07e7a78: tangle-drift ignores CSS comments when counting header_height_literal and transcript_type_override, and no longer counts a step-progress bar (`.steps-bar`) as a header row. UI's RunGroup sets its Markdown with the shared TRANSCRIPT_TEXT instead of a fixed 15px / leading-7, so a run reads at the transcript scale.
+
+## 1.22.0
+
+### Minor Changes
+
+- c94bde7: Fix shared defects from the Hospitality design audit.
+  
+  Brand: dark `--destructive` is now a light red carrying dark ink (`0 90% 77%` on `0 60% 10%`), so `text-destructive` clears AA (at least 4.5:1) on the canvas, card, popover and muted planes of every dark theme; it measured 2.5:1 on Hospitality's dark card. Destructive fills keep their foreground at 8:1. The `--font-sans` and `--font-display` stacks name `"Inter Variable"` ahead of `"Inter"`, and the README now recommends `@fontsource-variable/inter` so apps render every weight the scale uses. Brand still loads no fonts itself.
+  
+  UI: the `tabs` SegmentedControl scrolls the selected tab into view inside the strip (never the page) and fades the edge that has more tabs past it; tab items take a 44px hit height on coarse pointers; labels keep one weight in both variants, so changing the selection no longer shifts the row. SelectTrigger values end in an ellipsis with a gap before the chevron instead of clipping mid-glyph. Plain-text code fences (`text`, `txt`, `plain`, `plaintext`) show no language label.
+
 ## 1.21.1
 
 ### Patch Changes

package/README.md

@@ -105,7 +105,7 @@ Renderers that cannot read CSS variables (PDF, canvas, WebGL, email, the `theme-
 
 The base surface ladder is the one GTM proved out: dark is indigo-lifted `#0a0a14` / `#191826` / `#221f33` / `#2c2942`; light is a cool `#eceef3` canvas, white paper cards and overlays, and `#f1f2f7` nested wells. The cast stays below 0.1 chroma and ink stays achromatic, so indigo still reads as the interaction accent, not the base field. Existing named products may supply deliberate surface overrides.
 
-Chrome radii are 6/8/10/12px in both base modes; the composer has its own 26px role. Inter leads body and display stacks, with Geist fallbacks; Geist Mono leads code with JetBrains Mono and system fallbacks. Runtime font/radius registrations retain their public override names; tests keep Tailwind registration defaults aligned with the canonical declarations.
+Chrome radii are 6/8/10/12px in both base modes; the composer has its own 26px role. Inter (variable, then static) leads body and display stacks, with Geist fallbacks; Geist Mono leads code with JetBrains Mono and system fallbacks. Runtime font/radius registrations retain their public override names; tests keep Tailwind registration defaults aligned with the canonical declarations.
 
 Existing `--transition-*` values are preserved. The shared `--duration-*`, `--ease-*` and `--motion-*` vocabulary comes from the existing Agent App contract. It does not apply animations automatically. Reduced motion zeroes those durations and re-resolves composites at theme boundaries.
 
@@ -113,22 +113,19 @@ Focus uses `--focus-border`, `--focus-halo`, their danger variants, and `--borde
 
 ## Fonts
 
-Fonts are referenced, **not bundled or remotely fetched**. Consumers own loading, privacy and network fallbacks. For example:
+Fonts are referenced, **not bundled or remotely fetched**. Consumers own loading, privacy and network fallbacks, and an app that loads nothing renders in the OS fallback (DejaVu, Segoe, SF), whose widths and weights the type scale was not tuned for. Load Inter in the app entry. The variable build is one file that renders every weight the scale uses, including in-between weights such as 650 that static files round to the nearest cut:
 
 ```sh
-pnpm add @fontsource/inter @fontsource/geist-mono
+pnpm add @fontsource-variable/inter @fontsource/geist-mono
 ```
 
 ```tsx
-import "@fontsource/inter/400.css";
-import "@fontsource/inter/500.css";
-import "@fontsource/inter/600.css";
-import "@fontsource/inter/700.css";
+import "@fontsource-variable/inter";
 import "@fontsource/geist-mono/400.css";
 import "@fontsource/geist-mono/500.css";
 ```
 
-Omitted families fall back through the `--font-*` stacks. Keep external font imports out of library CSS: they can break reordered CSS imports and should not impose a third-party request on every consumer.
+The `--font-sans` and `--font-display` stacks name `"Inter Variable"` (the family that package registers) ahead of `"Inter"`, so static `@fontsource/inter` imports keep working. Omitted families fall back through the `--font-*` stacks. Keep external font imports out of library CSS: they can break reordered CSS imports and should not impose a font download on every consumer.
 
 ## Policy and development
 

package/bin/tangle-drift.mjs

@@ -83,7 +83,7 @@ export const PATTERNS = {
 // the selector's last compound (pseudo-classes and attributes aside), so `.top-header .avatar`
 // and `.top-header-avatar` size something inside a header, not the header row.
 // A `-bar` row counts too (`.files-bar`), but not a progress, scroll, side or meter bar.
-const HEADER_WORD = String.raw`(?:header|head|topbar|toolbar|titlebar|appbar|navbar|(?<![\w-]*(?:progress|scroll|side|meter|loading|track|fill|status)-?)bar)`;
+const HEADER_WORD = String.raw`(?:header|head|topbar|toolbar|titlebar|appbar|navbar|(?<![\w-]*(?:progress|scroll|side|meter|loading|track|fill|status|steps?)-?)bar)`;
 const HEADER_COMPOUND = String.raw`(?:[\w#.:-]*[.#-]${HEADER_WORD}|(?<![\w.#-])header)(?![\w-])(?::{1,2}[\w-]+(?:\([^)]*\))?|\[[^\]]*\])*`;
 const LITERAL_HEIGHT_UTILITY = String.raw`(?<![\w-])(?:h|min-h|max-h)-(?:[0-9]|\[(?!var\())`;
 
@@ -199,7 +199,9 @@ export function ruleMatches(source, roots, metric, exts) {
     .map((f) => (f.startsWith(prefix) ? f.slice(prefix.length) : f).trim()).filter(Boolean);
   const rows = [];
   for (const path of files) {
-    const text = readFile(source, path);
+    // Comments name things without styling them (a CSS note that mentions "transcript" or
+    // "header"); blank them, keeping offsets and newlines, so only real rules count.
+    const text = readFile(source, path).replace(/\/\*[\s\S]*?\*\//g, (comment) => comment.replace(/[^\n]/g, " "));
     const found = new Map();
     for (const pattern of patterns) {
       for (const m of text.matchAll(new RegExp(pattern, "g"))) found.set(m.index, m[0]);

package/dist/index.d.ts

@@ -97,7 +97,7 @@ export declare const palettes: {
     readonly accentHover: "#5a50d6";
     readonly onAccent: "#ffffff";
     readonly accentText: "#a5b4fc";
-    readonly danger: "#d52044";
+    readonly danger: "#f99090";
     readonly successBg: "#2f5146";
     readonly successBorder: "#3c7760";
     readonly successText: "#5ed7a4";
@@ -163,7 +163,7 @@ export declare const palettes: {
     readonly accentHover: "#5a50d6";
     readonly onAccent: "#ffffff";
     readonly accentText: "#a5b4fc";
-    readonly danger: "#d52044";
+    readonly danger: "#f99090";
     readonly successBg: "#2f5146";
     readonly successBorder: "#3c7760";
     readonly successText: "#5ed7a4";

package/dist/index.js

@@ -156,7 +156,7 @@ const palettes = {
 		accentHover: "#5a50d6",
 		onAccent: "#ffffff",
 		accentText: "#a5b4fc",
-		danger: "#d52044",
+		danger: "#f99090",
 		successBg: "#2f5146",
 		successBorder: "#3c7760",
 		successText: "#5ed7a4",
@@ -222,7 +222,7 @@ const palettes = {
 		accentHover: "#5a50d6",
 		onAccent: "#ffffff",
 		accentText: "#a5b4fc",
-		danger: "#d52044",
+		danger: "#f99090",
 		successBg: "#2f5146",
 		successBorder: "#3c7760",
 		successText: "#5ed7a4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.21.1",
+  "version": "1.22.1",
   "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
   "type": "module",
   "license": "MIT",

package/src/palette.generated.ts

@@ -87,7 +87,7 @@ export const palettes = {
     accentHover: "#5a50d6",
     onAccent: "#ffffff",
     accentText: "#a5b4fc",
-    danger: "#d52044",
+    danger: "#f99090",
     successBg: "#2f5146",
     successBorder: "#3c7760",
     successText: "#5ed7a4",
@@ -153,7 +153,7 @@ export const palettes = {
     accentHover: "#5a50d6",
     onAccent: "#ffffff",
     accentText: "#a5b4fc",
-    danger: "#d52044",
+    danger: "#f99090",
     successBg: "#2f5146",
     successBorder: "#3c7760",
     successText: "#5ed7a4",

package/src/styles/legacy-light.css

@@ -1,6 +1,6 @@
 /* GENERATED by scripts/gen-compat.mjs. Do not edit.
  * Source: tokens.css + named-themes.css
- * SHA-256: 939e3e76ae042294bf30fd3c9083242457c387a107693bb8c329e8e5ab22b92d
+ * SHA-256: cf009734f12a6dcb94d31f9ee6c21583942f1b2b2be38454344d6c3403cd26b5
  * Light-default compatibility; all explicit modes remain canonical.
  */
 :where(:root),
@@ -74,8 +74,8 @@
     --hsl-muted-foreground: 240 5% 68%;
     --hsl-accent: 249 24% 16%;
     --hsl-accent-foreground: 0 0% 90.1961%;
-    --hsl-destructive: 348 74% 48%;
-    --hsl-destructive-foreground: 0 0% 100%;
+    --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%;
@@ -365,8 +365,8 @@
     --transition-fast: 0.1s ease;
     --transition-default: 0.16s ease;
     --transition-medium: 0.24s ease;
-    --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
-    --font-display: "Inter", "Geist", sans-serif;
+    --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
     --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
 [data-sandbox-theme="vault"]:where(:not(.dark)),
@@ -610,8 +610,8 @@
     --accent-surface-soft: rgba(76, 63, 198, 0.05);
     --accent-surface-strong: rgba(76, 63, 198, 0.13);
     --accent-text: #3c32e9;
-    --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
-    --font-display: "Inter", "Geist", sans-serif;
+    --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
     --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
     --radius-sm: 6px;
     --radius-md: 8px;
@@ -1152,8 +1152,8 @@
     --hsl-muted-foreground: 240 5% 68%;
     --hsl-accent: 249 24% 16%;
     --hsl-accent-foreground: 0 0% 90.1961%;
-    --hsl-destructive: 348 74% 48%;
-    --hsl-destructive-foreground: 0 0% 100%;
+    --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%;

package/src/styles/named-themes.css

@@ -243,7 +243,7 @@
   --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: 348 74% 48%;        --hsl-destructive-foreground: 0 0% 100%;
+  --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;

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

@@ -4,6 +4,7 @@ import { describe, expect, it } from "vitest";
 import {
   blockIn,
   blocksIn,
+  compositeOver,
   contrastRatio,
   declIn,
   hexIn,
@@ -653,3 +654,49 @@ describe('named theme: [data-theme="website"]', () => {
     }
   });
 });
+
+describe("dark themes: destructive reads as text", () => {
+  // `text-destructive` is the error ink on cards, popovers and wells, and
+  // `bg-destructive text-destructive-foreground` is the destructive fill. In
+  // dark mode one token must serve both, so it is a light red carrying dark
+  // ink, as the dark primary does: 2.5:1 error text on a sage card shipped
+  // before every dark scope was checked here.
+  const scopes: Array<[string, string]> = [
+    [".dark", CANON],
+    ...[
+      '[data-theme="tangle-dark"]',
+      '[data-theme="aubergine"]',
+      '[data-theme="arena"]',
+      '[data-theme="super"]',
+      '.dark[data-theme="intelligence"]',
+      '.dark[data-theme="hospitality"]',
+      '[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}`);
+      return [selector, css];
+    }),
+  ];
+  it.each(scopes)("%s holds AA for destructive text and its fill", (_selector, css) => {
+    const effective = (token: string) => {
+      try {
+        return hslToRgb(hslIn(css, token));
+      } catch {
+        return hslToRgb(hslIn(CANON, token));
+      }
+    };
+    const destructive = effective("hsl-destructive");
+    for (const plane of ["hsl-background", "hsl-card", "hsl-popover", "hsl-muted"]) {
+      const bg = effective(plane);
+      expect(contrastRatio(destructive, bg), `destructive text on ${plane}`).toBeGreaterThanOrEqual(4.5);
+      // Error rows commonly sit on a 10% destructive tint (bg-destructive/10).
+      const tint = compositeOver(destructive, bg, 0.1);
+      expect(contrastRatio(destructive, tint), `destructive text on its tint over ${plane}`).toBeGreaterThanOrEqual(4.5);
+    }
+    expect(
+      contrastRatio(effective("hsl-destructive-foreground"), destructive),
+      "destructive-foreground on the destructive fill",
+    ).toBeGreaterThanOrEqual(4.5);
+  });
+});

package/src/styles/theme.css

@@ -5,8 +5,8 @@
  * override --font-* / --radius-* on a subtree.
  */
 @theme {
-  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
-  --font-display: "Inter", "Geist", sans-serif;
+  --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 
   --text-display--line-height: 1.05;

package/src/styles/tokens.css

@@ -129,8 +129,10 @@
      contrast floor against the L2 card. */
   --hsl-accent: 249 24% 16%; /* neutral hover (indigo lives in accent-surface-strong) */
   --hsl-accent-foreground: 0 0% 90.1961%;
-  --hsl-destructive: 348 74% 48%;
-  --hsl-destructive-foreground: 0 0% 100%;
+  /* Light red carrying dark ink, as the dark primary does: it must read as
+   * error TEXT on every dark plane (AA) and still carry its foreground as a fill. */
+  --hsl-destructive: 0 90% 77%;
+  --hsl-destructive-foreground: 0 60% 10%;
   /* Quiet on purpose: 1.5:1 against the resting card. Shadow does no work on a
    * dark canvas, so the hairline is what states where a plane ends. */
   --hsl-border: 243 20% 20%; /* #2a293d = --md3-outline-variant */
@@ -548,8 +550,8 @@
   --transition-medium: 0.24s ease;
 
   /* Fonts — unified on Inter (dark + light) */
-  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
-  --font-display: "Inter", "Geist", sans-serif;
+  --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
 
@@ -877,8 +879,8 @@
   --accent-text: #3c32e9;
 
   /* Typography — unified on Inter */
-  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
-  --font-display: "Inter", "Geist", sans-serif;
+  --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 
   /* Radius — unified chrome scale (matches dark; 8px md) */