From 3884580aaaed3753bf85156c2e1defd1fec3e987 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-FE <core-fe@agents.moleculesai.app>
Date: Sun, 10 May 2026 04:42:10 +0000
Subject: [PATCH] =?UTF-8?q?test(canvas):=20add=20cssVar=20unit=20tests=20f?=
 =?UTF-8?q?or=20theme=20token=20=E2=86=92=20CSS=20variable=20mapping?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Covers all ColorToken variants (surface, ink, accent, good, bad, warm,
bg, warn, plasma), pure-function property (deterministic output).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/lib/__tests__/cssVar.test.ts | 67 +++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 canvas/src/lib/__tests__/cssVar.test.ts

diff --git a/canvas/src/lib/__tests__/cssVar.test.ts b/canvas/src/lib/__tests__/cssVar.test.ts
new file mode 100644
index 00000000..148602f7
--- /dev/null
+++ b/canvas/src/lib/__tests__/cssVar.test.ts
@@ -0,0 +1,67 @@
+// @vitest-environment jsdom
+/**
+ * Tests for cssVar — maps ColorToken to a CSS variable string.
+ *
+ * Exists for the rare case where an inline style="" or SVG fill needs
+ * a token value rather than a Tailwind class. The returned var(--color-foo)
+ * string follows the live theme without re-renders.
+ */
+import { describe, it, expect } from "vitest";
+import { cssVar } from "../theme";
+import type { ColorToken } from "../theme";
+
+describe("cssVar", () => {
+  it("returns 'var(--color-surface)' for 'surface'", () => {
+    expect(cssVar("surface")).toBe("var(--color-surface)");
+  });
+
+  it("returns 'var(--color-ink)' for 'ink'", () => {
+    expect(cssVar("ink")).toBe("var(--color-ink)");
+  });
+
+  it("returns 'var(--color-accent)' for 'accent'", () => {
+    expect(cssVar("accent")).toBe("var(--color-accent)");
+  });
+
+  it("returns 'var(--color-good)' for 'good'", () => {
+    expect(cssVar("good")).toBe("var(--color-good)");
+  });
+
+  it("returns 'var(--color-bad)' for 'bad'", () => {
+    expect(cssVar("bad")).toBe("var(--color-bad)");
+  });
+
+  it("returns 'var(--color-warn)' for 'warn'", () => {
+    expect(cssVar("warn")).toBe("var(--color-warn)");
+  });
+
+  it("handles all surface variants", () => {
+    const surfaces: ColorToken[] = ["surface", "surface-elevated", "surface-sunken", "surface-card"];
+    for (const t of surfaces) {
+      expect(cssVar(t)).toBe(`var(--color-${t})`);
+    }
+  });
+
+  it("handles all ink variants", () => {
+    const inks: ColorToken[] = ["ink", "ink-mid", "ink-soft", "ink-mute", "ink-dim"];
+    for (const t of inks) {
+      expect(cssVar(t)).toBe(`var(--color-${t})`);
+    }
+  });
+
+  it("handles always-dark tokens", () => {
+    const dark: ColorToken[] = ["bg", "bg-elev", "bg-card", "line-strong", "accent-dim", "plasma"];
+    for (const t of dark) {
+      expect(cssVar(t)).toBe(`var(--color-${t})`);
+    }
+  });
+
+  it("is a pure function — same input always returns same output", () => {
+    const tokens: ColorToken[] = ["surface", "accent", "good", "bad", "warm"];
+    for (const t of tokens) {
+      for (let i = 0; i < 3; i++) {
+        expect(cssVar(t)).toBe(`var(--color-${t})`);
+      }
+    }
+  });
+});