refactor: establish local frontend workspace boundaries

OpenSpec change: evolve-frontend-stack

packages/ui/src/theme.test.ts

@@ -0,0 +1,29 @@
+import { DEFAULT_THEME, mergeMantineTheme } from "@mantine/core";
+import source from "@wealthledger/tokens/tokens.json";
+import { describe, expect, it } from "vitest";
+import { colorRoles, cssVariablesResolver, theme } from "./theme";
+
+describe("design theme adapter", () => {
+	it("preserves scale-aware sizes, unscaled breakpoints and shadow layers", () => {
+		expect(theme.spacing?.md).toBe("calc(1rem * var(--mantine-scale))");
+		expect(theme.fontSizes?.sm).toBe("calc(0.875rem * var(--mantine-scale))");
+		expect(theme.breakpoints?.sm).toBe("48em");
+		expect(theme.shadows?.sm).toContain(
+			"calc(-0.3125rem * var(--mantine-scale))",
+		);
+		expect(theme.shadows?.sm).toContain("rgba(0, 0, 0, 0.04)");
+	});
+
+	it("keeps default-shade roles attached to native filled variables", () => {
+		const resolved = mergeMantineTheme(DEFAULT_THEME, theme);
+		const variables = cssVariablesResolver(resolved).variables;
+		expect(colorRoles.primary).toBe("blue");
+		expect(variables["--wl-color-primary"]).toBe(
+			"var(--mantine-color-blue-filled)",
+		);
+		expect(variables["--wl-color-canvas"]).toBe("var(--mantine-color-gray-2)");
+		expect(Object.keys(variables)).toHaveLength(
+			Object.keys(source.color.roles).length,
+		);
+	});
+});