Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/unit/figmaTokens.test.ts

@@ -0,0 +1,52 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const css = readFileSync("app/tailwind.css", "utf8");
+
+function decl(name: string): string {
+  const match = css.match(new RegExp(`${name}:\\s*([\\s\\S]*?);`));
+  if (!match?.[1]) throw new Error(`missing ${name}`);
+  return match[1].replace(/\s+/g, " ").trim();
+}
+
+describe("Figma tokens", () => {
+  it("points theme colors, radius, and focus at Figma", () => {
+    expect(decl("--radius-500")).toBe("24px");
+    expect(decl("--color-surface-default-brand-royal")).toContain("royal-blue600");
+    expect(decl("--color-surface-default-brand-kiwi")).toContain("kiwi800");
+    expect(decl("--color-content-default-brand-secondary")).toContain("yellow200");
+    expect(decl("--color-content-invert-brand-secondary")).toContain("yellow800");
+    expect(decl("--color-content-invert-brand-royal")).toContain("royal-blue400");
+    expect(decl("--color-content-default-utility-negative")).toContain("red300");
+    expect(decl("--color-content-default-negative-primary")).toContain(
+      "utility-negative",
+    );
+    expect(decl("--color-border-invert-secondary")).toContain("gray-100");
+    expect(decl("--color-border-invert-tertiary")).toContain("gray-300");
+    expect(decl("--color-border-default-control")).toContain("gray-400");
+    expect(decl("--shadow-focus-default")).toContain("gray-900");
+    expect(decl("--shadow-focus-invert")).toContain("gray-000");
+    expect(css).not.toMatch(/--color-[a-z0-9-]+-light:/);
+    expect(css).not.toContain("--font-mono");
+    expect(css).not.toContain("--measures-radius-");
+    expect(css).not.toContain("--color-surface-inverse-");
+  });
+
+  it("matches the type scale and the five sizing steps", () => {
+    expect(decl("--sizing-450")).toBe("18px");
+    expect(decl("--sizing-700")).toBe("28px");
+    expect(decl("--sizing-900")).toBe("36px");
+    expect(decl("--sizing-1100")).toBe("44px");
+    expect(decl("--sizing-1300")).toBe("52px");
+    expect(decl("--text-display-s")).toBe("32px");
+    expect(decl("--text-display-s--font-weight")).toBe("500");
+    expect(decl("--text-display-xxl--line-height")).toContain("line-height-2600");
+    expect(decl("--text-heading-xl--font-weight")).toBe("700");
+    expect(decl("--text-paragraph-l--line-height")).toContain("line-height-600");
+    expect(decl("--text-paragraph-strong-m--font-weight")).toBe("700");
+    expect(decl("--text-paragraph-em-m")).toBe("16px");
+    expect(decl("--text-link-s")).toBe("14px");
+    expect(decl("--text-small-display")).toContain("display-s");
+    expect(decl("--typography-line-height-1800")).toContain("scale-072");
+  });
+});