fix(ui-web): teach cn() the design system's text and control scales

cn() used plain tailwind-merge, which only knows Tailwind's default scales.
It read the custom font sizes (text-ui-label, text-ui-caption, ...) as text
colors, so of a size and a color in one class list only the last survived:

- Small, extra-small and large buttons lost their variant's text color. A
  small primary button rendered foreground text on the primary fill (ink on
  ink in the light theme, near-white on white in the dark theme), and
  destructive, secondary and link buttons lost their colors the same way.
- Default-size and icon buttons, tab triggers and the typography helpers
  lost their font size and inherited the parent's instead.

The control and icon spacing scales (h-control-sm, size-icon-md, ...) were
unknown as well, so they never merged with other sizes: an explicit h-auto
or h-9 on a Button, Input or Toggle lost to the component's own height, and
large buttons and toggles drew their icons at the medium size.

cn() now extends tailwind-merge with the text and spacing keys styles.css
adds under @theme. A unit test probes cn() with every @theme key in
styles.css, so a new key that is not registered fails the test.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MRtGG9ARfqqhma3t85Ro2u

packages/ui-web/src/lib/utils.test.ts

@@ -0,0 +1,80 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+import { buttonVariants } from "../components/ui/button.js";
+import { cn } from "./utils.js";
+
+describe("cn", () => {
+  it("keeps a text color next to a ui text size", () => {
+    expect(cn("text-primary-foreground", "text-ui-label")).toBe(
+      "text-primary-foreground text-ui-label",
+    );
+    expect(cn("text-ui-body-sm", "text-muted-foreground")).toBe(
+      "text-ui-body-sm text-muted-foreground",
+    );
+  });
+
+  it("merges two text sizes to the last one", () => {
+    expect(cn("text-ui-body-sm", "text-ui-label")).toBe("text-ui-label");
+    expect(cn("text-sm", "text-ui-caption")).toBe("text-ui-caption");
+    expect(cn("text-ui-caption", "text-lg")).toBe("text-lg");
+  });
+
+  it("merges two text colors to the last one", () => {
+    expect(cn("text-ui-label text-primary-foreground", "text-destructive")).toBe(
+      "text-ui-label text-destructive",
+    );
+  });
+
+  it("merges ui control sizes with other sizes", () => {
+    expect(cn("h-control-sm", "h-8")).toBe("h-8");
+    expect(cn("h-auto", "h-control-md")).toBe("h-control-md");
+    expect(cn("[&_svg]:size-icon-md", "[&_svg]:size-icon-lg")).toBe("[&_svg]:size-icon-lg");
+  });
+
+  it("keeps small buttons readable", () => {
+    for (const size of ["xs", "sm", "default", "lg"] as const) {
+      const classes = cn(buttonVariants({ variant: "default", size })).split(" ");
+      expect(classes, size).toContain("text-primary-foreground");
+      expect(classes.filter((name) => name.startsWith("text-ui-")).length, size).toBe(1);
+    }
+    expect(cn(buttonVariants({ variant: "destructive", size: "sm" })).split(" ")).toEqual(
+      expect.arrayContaining(["text-destructive", "text-ui-label"]),
+    );
+  });
+});
+
+/** One merge check per `@theme` namespace: [earlier classes, later classes, expected]. */
+const NAMESPACE_PROBES: Record<string, (name: string) => [string, string, string]> = {
+  color: (name) => ["text-ui-body text-foreground", `text-${name}`, `text-ui-body text-${name}`],
+  radius: (name) => ["rounded-sm", `rounded-${name}`, `rounded-${name}`],
+  spacing: (name) => [
+    "h-4 p-2 gap-2",
+    `h-${name} p-${name} gap-${name}`,
+    `h-${name} p-${name} gap-${name}`,
+  ],
+  text: (name) => ["text-foreground text-sm", `text-${name}`, `text-foreground text-${name}`],
+};
+
+describe("cn knows every @theme key in styles.css", () => {
+  const css = readFileSync(new URL("../styles.css", import.meta.url), "utf8");
+  const theme = css.match(/@theme inline \{([\s\S]*?)\n\}/)?.[1] ?? "";
+  const keys = [...theme.matchAll(/^\s*--([a-z0-9-]+):/gm)]
+    .map((match) => match[1] ?? "")
+    .filter((key) => !key.includes("--"));
+
+  it("finds the theme keys", () => {
+    expect(keys).toContain("text-ui-label");
+    expect(keys).toContain("spacing-control-sm");
+  });
+
+  for (const key of keys) {
+    it(`--${key}`, () => {
+      const namespace = Object.keys(NAMESPACE_PROBES).find((ns) => key.startsWith(`${ns}-`));
+      expect(namespace, `add a probe for the @theme namespace of --${key}`).toBeDefined();
+      const [earlier, later, expected] = NAMESPACE_PROBES[namespace ?? ""]!(
+        key.slice(`${namespace}-`.length),
+      );
+      expect(cn(earlier, later)).toBe(expected);
+    });
+  }
+});

packages/ui-web/src/lib/utils.ts

@@ -1,5 +1,40 @@
-import { type ClassValue, clsx } from "clsx";
+import type { ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+/**
+ * The scales `styles.css` adds under `@theme`. tailwind-merge only knows Tailwind's
+ * defaults, so without them it reads `text-ui-label` as a text color (dropping the
+ * real color) and never merges `h-control-sm` with `h-8`. `utils.test.ts` fails
+ * when `@theme` gains a key that is missing here.
+ */
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: [
+        "ui-caption",
+        "ui-label",
+        "ui-body-sm",
+        "ui-body",
+        "ui-reading",
+        "ui-title-sm",
+        "ui-title",
+      ],
+      spacing: [
+        "control-xs",
+        "control-sm",
+        "control-md",
+        "control-lg",
+        "icon-sm",
+        "icon-md",
+        "icon-lg",
+        "rk-shell",
+        "rk-sidebar-x",
+        "rk-sidebar-y",
+      ],
+    },
+  },
+});
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));