@tangle-network/brand 1.17.1 → 1.18.0

package/bin/tangle-drift.mjs

@@ -3,8 +3,10 @@
  * tangle-drift: a ratchet on design-system drift across Tangle product surfaces.
  *
  * It counts raw Tailwind palette classes, hex literals, arbitrary color values,
- * CSS custom-property definitions and locally defined primitives in a surface's
- * source, reading a git tree with `git grep` (no checkout of the tree needed).
+ * CSS custom-property definitions, locally defined primitives, and the sizing and
+ * type deviations that bypass the shared control scale (literal font sizes and
+ * heights, native controls, restyled shared controls) in a surface's source,
+ * reading a git tree with `git grep` (no checkout of the tree needed).
  * The counts committed in drift-baseline.json beside this file may only fall.
  *
  *   tangle-drift check --surface gtm --repo-dir .          # consumer gate, reads HEAD
@@ -32,6 +34,7 @@ export const SURFACES = {
   gtm: { repo: "tangle-network/gtm-agent", roots: [""] },
   tax: { repo: "tangle-network/tax-agent", roots: ["apps/web"] },
   legal: { repo: "tangle-network/legal-agent", roots: [""] },
+  insurance: { repo: "tangle-network/insurance-agent", roots: [""] },
   creative: { repo: "tangle-network/creative-agent", roots: [""] },
   physim: { repo: "tangle-network/physim", roots: ["apps/web"] },
   hospitality: { repo: "tangle-network/hospitality-agent", roots: [""] },
@@ -55,6 +58,17 @@ export const PATTERNS = {
   arbitrary_color: String.raw`-\[(?:#|rgb|hsl|oklch)`,
   css_var_defs: String.raw`^\s*--[a-zA-Z0-9-]+\s*:`,
   local_primitive_count: String.raw`export\s+(?:default\s+)?(?:function|const)\s+(?:${PRIMS})\b`,
+  // Sizes and type that bypass Brand's control and type scale. Token references such as
+  // `text-[var(--text-control)]` and `h-[var(--control-height-md)]` are not counted.
+  // A literal Tailwind size (`text-[13px]`), an inline `fontSize: 13`, or a CSS `font-size: 13px`.
+  font_size_literal: String.raw`\btext-\[(?:[0-9.]+(?:px|rem|em)\b|calc\(|clamp\()|\bfontSize:\s*["'\x60]?[0-9.]+|font-size:\s*[0-9.]+(?:px|rem|em)\b`,
+  // A literal height or square size (`h-[34px]`, `min-h-[2.4rem]`, `size-[30px]`).
+  size_literal: String.raw`(?<![\w-])(?:h|min-h|size)-\[[0-9.]+(?:px|rem)\]`,
+  // A native control element in product code; Button, Input, Textarea and Select own them.
+  native_control: String.raw`<(?:button|input|select|textarea)\b`,
+  // A shared control resized or retyped in place. Line-based: a className on its own line
+  // after the tag is not seen, so this undercounts and only ratchets what it can see.
+  control_override: String.raw`<(?:Button|Input|Textarea|SelectTrigger)\b[^>]*?\bclassName=[^>]*?(?<![\w-])(?:h-|min-h-|size-|px-|py-|text-(?:xs|sm|base|lg|\[)|rounded-|font-(?:normal|medium|semibold|bold)\b)`,
 };
 const LOCAL_PRIM_NAME = new RegExp(String.raw`(?:function|const)\s+(${PRIMS})\b`);
 const SHARED = ["@tangle-network/brand", "@tangle-network/ui", "@tangle-network/sandbox-ui", "@tangle-network/agent-app"];
@@ -70,6 +84,10 @@ function extensions(surface, metric) {
     case "arbitrary_color": return ["*.tsx", "*.jsx", "*.astro", "*.ts"];
     case "css_var_defs": return ["*.css"];
     case "local_primitive_count": return ["*.tsx", "*.jsx"];
+    case "font_size_literal": return ["*.tsx", "*.jsx", "*.astro", "*.ts", "*.css", ...extra];
+    case "size_literal": return ["*.tsx", "*.jsx", "*.astro", "*.ts", ...extra];
+    case "native_control": return ["*.tsx", "*.jsx", "*.astro"];
+    case "control_override": return ["*.tsx", "*.jsx"];
     case "imports": return ["*.tsx", "*.ts", "*.astro", "*.jsx"];
     default: return SRC_EXT;
   }
@@ -207,17 +225,23 @@ export function measure(surface, source) {
   return { row, matches };
 }
 
-/** Compare a measured row with its baseline row. Missing baseline metrics count as 0. */
+/**
+ * Compare a measured row with its baseline row. A metric the baseline row has not recorded
+ * (one added after the row was written) is `unrecorded`, not a rise: it gates from the first
+ * baseline that records it, so a consumer's own baseline file keeps passing until refreshed.
+ */
 export function compare(baseline, current) {
   const rises = [];
   const falls = [];
+  const unrecorded = [];
   for (const metric of GATED) {
-    const base = baseline?.[metric] ?? 0;
     const now = current[metric];
+    if (baseline && typeof baseline[metric] !== "number") { unrecorded.push({ metric, now }); continue; }
+    const base = baseline?.[metric] ?? 0;
     if (now > base) rises.push({ metric, base, now });
     else if (now < base) falls.push({ metric, base, now });
   }
-  return { rises, falls };
+  return { rises, falls, unrecorded };
 }
 
 /** Files whose count for `metric` rose above their baseline count, worst first. */
@@ -231,14 +255,23 @@ export function risenFiles(baseline, current, metric) {
 
 /**
  * Apply `rows` to `baseline`. Without allowRise, a row with any gated rise is refused and the
- * baseline keeps its old row. Returns { next, refused }.
+ * baseline keeps its old counts, but still records metrics that row had not recorded yet.
+ * Returns { next, refused }.
  */
 export function updateBaseline(baseline, rows, { allowRise = false } = {}) {
   const next = { ...baseline };
   const refused = [];
   for (const [surface, row] of Object.entries(rows)) {
-    const { rises } = compare(baseline[surface], row);
-    if (rises.length && !allowRise && baseline[surface]) { refused.push({ surface, rises }); continue; }
+    const { rises, unrecorded } = compare(baseline[surface], row);
+    if (rises.length && !allowRise && baseline[surface]) {
+      refused.push({ surface, rises });
+      if (unrecorded.length) {
+        const kept = { ...baseline[surface], by_file: { ...baseline[surface].by_file } };
+        for (const { metric } of unrecorded) { kept[metric] = row[metric]; kept.by_file[metric] = row.by_file?.[metric] ?? {}; }
+        next[surface] = kept;
+      }
+      continue;
+    }
     next[surface] = row;
   }
   return { next: sortedBySurface(next), refused };
@@ -407,7 +440,11 @@ export function main(argv = process.argv.slice(2), log = (s) => process.stdout.w
       if (!opts.update) failed = true;
       continue;
     }
-    const { rises, falls } = compare(base, row);
+    const { rises, falls, unrecorded } = compare(base, row);
+    if (unrecorded.length) {
+      log(`  not yet in this baseline (not gated): ${unrecorded.map((u) => `${u.metric}=${u.now}`).join(", ")}`);
+      log("  record them with --update-baseline (the shipped baseline is refreshed in tangle-network/brand)");
+    }
     for (const { metric, base: b, now } of rises) {
       log(`  FAIL ${metric}: ${now} > baseline ${b} (+${now - b}; baseline read ${base.head})`);
       const files = risenFiles(base, row, metric);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.17.1",
+  "version": "1.18.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/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: 6376234ba229d9bd8fc0be766a9998b61146de56ee8dc9d5bb5a0ba2206951f0
+ * SHA-256: 524da3dda08c6fb6130bde802f96d6b961561a900caa939c1eea43ec4495b48d
  * Light-default compatibility; all explicit modes remain canonical.
  */
 :where(:root),
@@ -288,6 +288,13 @@
     --radius-cover: 20px;
     --radius-sheet: 24px;
     --control-height: 2.25rem;
+    --control-height-sm: 2rem;
+    --control-height-lg: 2.75rem;
+    --control-text-sm: 0.75rem;
+    --control-text-md: 0.875rem;
+    --control-text-lg: 1rem;
+    --font-size-label: 0.875rem;
+    --font-size-help: 0.75rem;
     --panel-padding: 1rem;
     --content-max-width: 80rem;
     --font-size-xs: 0.6875rem;
@@ -772,6 +779,14 @@
     --text-page: var(--font-size-3xl);
     --text-section: var(--font-size-xl);
     --text-eyebrow: var(--font-size-sm);
+    --text-control-sm: var(--control-text-sm);
+    --text-control-md: var(--control-text-md);
+    --text-control-lg: var(--control-text-lg);
+    --text-label: var(--font-size-label);
+    --text-help: var(--font-size-help);
+    --spacing-control-sm: var(--control-height-sm);
+    --spacing-control-md: var(--control-height);
+    --spacing-control-lg: var(--control-height-lg);
     --color-scrim: var(--scrim);
     --color-scrim-strong: var(--scrim-strong);
     --color-on-media: var(--on-media);

package/src/styles/named-themes.css

@@ -19,6 +19,14 @@
   --text-page: var(--font-size-3xl);
   --text-section: var(--font-size-xl);
   --text-eyebrow: var(--font-size-sm);
+  --text-control-sm: var(--control-text-sm);
+  --text-control-md: var(--control-text-md);
+  --text-control-lg: var(--control-text-lg);
+  --text-label: var(--font-size-label);
+  --text-help: var(--font-size-help);
+  --spacing-control-sm: var(--control-height-sm);
+  --spacing-control-md: var(--control-height);
+  --spacing-control-lg: var(--control-height-lg);
   --color-scrim: var(--scrim);
   --color-scrim-strong: var(--scrim-strong);
   --color-on-media: var(--on-media);

package/src/styles/theme.css

@@ -24,6 +24,11 @@
   --text-eyebrow--line-height: 1;
   --text-eyebrow--letter-spacing: 0.08em;
   --text-eyebrow--font-weight: 600;
+  --text-control-sm--line-height: 1rem;
+  --text-control-md--line-height: 1.25rem;
+  --text-control-lg--line-height: 1.5rem;
+  --text-label--line-height: 1.25rem;
+  --text-help--line-height: 1rem;
 
   --radius-sm: 6px;
   --radius-md: 8px;
@@ -61,6 +66,18 @@
   --text-section: var(--font-size-xl);
   --text-eyebrow: var(--font-size-sm);
 
+  /* Control and form type: text-control-sm/md/lg, text-label, text-help. */
+  --text-control-sm: var(--control-text-sm);
+  --text-control-md: var(--control-text-md);
+  --text-control-lg: var(--control-text-lg);
+  --text-label: var(--font-size-label);
+  --text-help: var(--font-size-help);
+
+  /* Control heights as spacing: h-control-md, size-control-sm, min-h-control-lg. */
+  --spacing-control-sm: var(--control-height-sm);
+  --spacing-control-md: var(--control-height);
+  --spacing-control-lg: var(--control-height-lg);
+
   --color-scrim: var(--scrim);
   --color-scrim-strong: var(--scrim-strong);
   --color-on-media: var(--on-media);

package/src/styles/tokens.css

@@ -442,6 +442,17 @@
 
   /* Density */
   --control-height: 2.25rem;
+  /* Control scale: Button, IconButton sizes, Input, Textarea and SelectTrigger
+     share one height and text size per size, so a row of mixed controls aligns.
+     md is --control-height, the density knob a subtree may override. */
+  --control-height-sm: 2rem;      /* 32px */
+  --control-height-lg: 2.75rem;   /* 44px — touch target */
+  --control-text-sm: 0.75rem;     /* 12px */
+  --control-text-md: 0.875rem;    /* 14px */
+  --control-text-lg: 1rem;        /* 16px — fields never zoom on iOS */
+  /* Form text: labels name a field; help text describes or reports on it. */
+  --font-size-label: 0.875rem;    /* 14px */
+  --font-size-help: 0.75rem;      /* 12px */
   --panel-padding: 1rem;
   --content-max-width: 80rem;