@tangle-network/brand 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 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
+
+- ec74a23: One transcript size across products: `--transcript-font-size` is 16px, the size Agent App's `ChatMessages` and Hospitality's transcript already used, instead of the 15px message body that UI's `AgentTimeline` used, so every agent app reads its transcript at one size. Markdown inside a `tangle-transcript-text` container inherits its size and leading rather than `.tangle-prose`'s own 1.7.
+
 ## 1.21.0
 
 ### Minor 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/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.0",
+  "version": "1.22.0",
   "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/globals.css

@@ -186,6 +186,12 @@
   font-size: var(--transcript-font-size);
   line-height: var(--transcript-line-height);
 }
+/* Markdown inside a transcript container reads at the container's size and
+ * leading, not .tangle-prose's own 1.7. */
+.tangle-transcript-text .tangle-prose {
+  font-size: inherit;
+  line-height: inherit;
+}
 .tangle-prose > * + * { margin-top: 0.85em; }
 .tangle-prose h1, .tangle-prose h2, .tangle-prose h3, .tangle-prose h4 {
   font-weight: 600;

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: e280d0675dc36f1bd1c79e163d7b50c18a5dd2cb3a58f3138cddc85b02514b6b
+ * 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%;
@@ -299,7 +299,7 @@
     --content-max-width: 80rem;
     --shell-header-height: 3.5rem;
     --shell-inset-gutter: 0.5rem;
-    --transcript-font-size: var(--font-size-base);
+    --transcript-font-size: 1rem;
     --transcript-line-height: var(--line-height-base);
     --font-size-xs: 0.6875rem;
     --font-size-sm: 0.75rem;
@@ -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 */
@@ -464,7 +466,7 @@
   --shell-inset-gutter: 0.5rem;   /* 8px */
   /* Transcript: the person's and the agent's messages share one family, size
      and leading; they differ only by alignment and surface. */
-  --transcript-font-size: var(--font-size-base);
+  --transcript-font-size: 1rem;   /* 16px: the chat reading size */
   --transcript-line-height: var(--line-height-base);
 
   /* Typography scale — override per-app for custom type hierarchy.
@@ -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) */