@nationaldesignstudio/react 0.2.0 → 0.5.0

package/src/styles.css

@@ -1,3 +1,6 @@
+/* Google Fonts - must be first to comply with CSS @import ordering rules */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Inter+Tight:wght@100..900&display=swap");
+
 @import "tailwindcss";
 @import "../../tailwind-token-generator/dist/tokens.css";
 

package/src/tests/token-resolution.test.tsx

@@ -0,0 +1,298 @@
+/**
+ * Token Resolution Tests
+ *
+ * These tests verify that CSS classes using design tokens resolve to the correct
+ * computed styles. This ensures that:
+ * 1. Semantic color tokens resolve to actual colors
+ * 2. Typography tokens apply correct font properties
+ * 3. Spacing tokens resolve to correct pixel values
+ */
+
+import { describe, expect, test } from "vitest";
+import { page } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { Button } from "../components/atoms/button/button";
+
+/**
+ * Helper to get computed style of an element
+ */
+function getComputedStyleValue(element: Element, property: string): string {
+	return window.getComputedStyle(element).getPropertyValue(property);
+}
+
+describe("Token Resolution", () => {
+	describe("Semantic Color Tokens", () => {
+		test("Button primary variant uses semantic bg token", async () => {
+			render(<Button data-testid="btn">Primary Button</Button>);
+			const button = page.getByTestId("btn");
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const bgColor = getComputedStyleValue(element, "background-color");
+
+			// The button should have a non-transparent background
+			expect(bgColor).not.toBe("rgba(0, 0, 0, 0)");
+			expect(bgColor).not.toBe("transparent");
+		});
+
+		test("Button text color resolves from semantic token", async () => {
+			render(<Button data-testid="btn">Text Color</Button>);
+			const button = page.getByTestId("btn");
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const textColor = getComputedStyleValue(element, "color");
+
+			// Should have a defined text color
+			expect(textColor).toBeTruthy();
+			expect(textColor).not.toBe("rgba(0, 0, 0, 0)");
+		});
+
+		test("Background page token resolves correctly", async () => {
+			render(
+				<div data-testid="bg-test" className="bg-bg-page p-16">
+					Background Test
+				</div>,
+			);
+			const element = page.getByTestId("bg-test").element();
+			const bgColor = getComputedStyleValue(element, "background-color");
+
+			// bg-page should resolve to a non-transparent color
+			expect(bgColor).not.toBe("rgba(0, 0, 0, 0)");
+		});
+
+		test("Text primary token resolves correctly", async () => {
+			render(
+				<p data-testid="text-test" className="text-text-primary">
+					Primary Text
+				</p>,
+			);
+			const element = page.getByTestId("text-test").element();
+			const textColor = getComputedStyleValue(element, "color");
+
+			// text-primary should be a dark color
+			expect(textColor).toBeTruthy();
+			expect(textColor).not.toBe("rgba(0, 0, 0, 0)");
+		});
+	});
+
+	describe("Primitive Color Tokens", () => {
+		test("Gray scale colors resolve", async () => {
+			render(
+				<div>
+					<div data-testid="gray-100" className="bg-gray-100">
+						Gray 100
+					</div>
+					<div data-testid="gray-500" className="bg-gray-500">
+						Gray 500
+					</div>
+					<div data-testid="gray-900" className="bg-gray-900">
+						Gray 900
+					</div>
+				</div>,
+			);
+
+			const gray100 = page.getByTestId("gray-100").element();
+			const gray500 = page.getByTestId("gray-500").element();
+			const gray900 = page.getByTestId("gray-900").element();
+
+			const bg100 = getComputedStyleValue(gray100, "background-color");
+			const bg500 = getComputedStyleValue(gray500, "background-color");
+			const bg900 = getComputedStyleValue(gray900, "background-color");
+
+			// All should have resolved background colors
+			expect(bg100).not.toBe("rgba(0, 0, 0, 0)");
+			expect(bg500).not.toBe("rgba(0, 0, 0, 0)");
+			expect(bg900).not.toBe("rgba(0, 0, 0, 0)");
+
+			// Gray 100 should be lighter than Gray 900
+			// (comparing luminance would be ideal, but we'll just verify they're different)
+			expect(bg100).not.toBe(bg900);
+		});
+
+		test("Indigo accent colors resolve", async () => {
+			render(
+				<div data-testid="indigo" className="bg-indigo-600">
+					Indigo 600
+				</div>,
+			);
+
+			const element = page.getByTestId("indigo").element();
+			const bgColor = getComputedStyleValue(element, "background-color");
+
+			// Should resolve to a blue-ish color (indigo)
+			expect(bgColor).not.toBe("rgba(0, 0, 0, 0)");
+		});
+	});
+
+	describe("Typography Tokens", () => {
+		test("Typography h1 class applies correct styles", async () => {
+			render(
+				<h1 data-testid="h1" className="typography-h1">
+					Heading 1
+				</h1>,
+			);
+
+			const element = page.getByTestId("h1").element();
+			const fontSize = getComputedStyleValue(element, "font-size");
+			const fontFamily = getComputedStyleValue(element, "font-family");
+
+			const sizeNum = Number.parseFloat(fontSize);
+			expect(sizeNum).toBeGreaterThan(0);
+
+			expect(fontFamily).toBeTruthy();
+		});
+
+		test("Typography body-medium class applies correct styles", async () => {
+			render(
+				<p data-testid="body" className="typography-body-medium">
+					Body text
+				</p>,
+			);
+
+			const element = page.getByTestId("body").element();
+			const fontSize = getComputedStyleValue(element, "font-size");
+			const lineHeight = getComputedStyleValue(element, "line-height");
+
+			// Body medium should be around 14-18px depending on breakpoint
+			const sizeNum = Number.parseFloat(fontSize);
+			expect(sizeNum).toBeGreaterThanOrEqual(14);
+			expect(sizeNum).toBeLessThanOrEqual(18);
+
+			// Should have a line height set
+			expect(lineHeight).toBeTruthy();
+		});
+
+		test("Typography button class applies correct weight", async () => {
+			render(
+				<span data-testid="btn-text" className="typography-ui-button-medium">
+					Button Text
+				</span>,
+			);
+
+			const element = page.getByTestId("btn-text").element();
+			const fontWeight = getComputedStyleValue(element, "font-weight");
+
+			const weightNum = Number.parseInt(fontWeight, 10);
+			expect(weightNum).toBeGreaterThan(0);
+		});
+	});
+
+	describe("Spacing Tokens", () => {
+		test("Padding tokens resolve to correct pixel values", async () => {
+			render(
+				<div data-testid="padded" className="p-16">
+					Padded content
+				</div>,
+			);
+
+			const element = page.getByTestId("padded").element();
+			const padding = getComputedStyleValue(element, "padding");
+
+			// p-16 should resolve to 16px on all sides
+			expect(padding).toBe("16px");
+		});
+
+		test("Margin tokens resolve correctly", async () => {
+			render(
+				<div data-testid="margin" className="m-24">
+					Margin content
+				</div>,
+			);
+
+			const element = page.getByTestId("margin").element();
+			const margin = getComputedStyleValue(element, "margin");
+
+			// m-24 should resolve to 24px on all sides
+			expect(margin).toBe("24px");
+		});
+
+		test("Gap tokens resolve correctly", async () => {
+			render(
+				<div data-testid="gap" className="flex gap-8">
+					<span>Item 1</span>
+					<span>Item 2</span>
+				</div>,
+			);
+
+			const element = page.getByTestId("gap").element();
+			const gap = getComputedStyleValue(element, "gap");
+
+			// gap-8 should resolve to 8px
+			expect(gap).toBe("8px");
+		});
+
+		test("Width spacing tokens resolve", async () => {
+			render(
+				<div data-testid="width" className="w-64 h-8 bg-gray-500">
+					Width test
+				</div>,
+			);
+
+			const element = page.getByTestId("width").element();
+			const width = getComputedStyleValue(element, "width");
+
+			// w-64 should be 64px
+			expect(width).toBe("64px");
+		});
+	});
+
+	describe("Border Radius Tokens", () => {
+		test("Radius tokens resolve correctly", async () => {
+			render(
+				<div data-testid="rounded" className="rounded-8 bg-gray-200 p-16">
+					Rounded corners
+				</div>,
+			);
+
+			const element = page.getByTestId("rounded").element();
+			const radius = getComputedStyleValue(element, "border-radius");
+
+			// rounded-8 should be 8px
+			expect(radius).toBe("8px");
+		});
+	});
+
+	describe("Component Token Integration", () => {
+		test("Button has defined height from spacing tokens", async () => {
+			render(
+				<Button data-testid="btn" size="md">
+					Medium Button
+				</Button>,
+			);
+			const button = page.getByTestId("btn");
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const height = getComputedStyleValue(element, "height");
+
+			// Button should have a defined height (not auto)
+			const heightNum = Number.parseFloat(height);
+			expect(heightNum).toBeGreaterThan(0);
+		});
+
+		test("Button sizes use different padding tokens", async () => {
+			render(
+				<div>
+					<Button data-testid="btn-sm" size="sm">
+						Small
+					</Button>
+					<Button data-testid="btn-lg" size="lg">
+						Large
+					</Button>
+				</div>,
+			);
+
+			const smallBtn = page.getByTestId("btn-sm").element();
+			const largeBtn = page.getByTestId("btn-lg").element();
+
+			const smallPadding = getComputedStyleValue(smallBtn, "padding-left");
+			const largePadding = getComputedStyleValue(largeBtn, "padding-left");
+
+			// Large should have more padding than small
+			const smallPaddingNum = Number.parseFloat(smallPadding);
+			const largePaddingNum = Number.parseFloat(largePadding);
+			expect(largePaddingNum).toBeGreaterThan(smallPaddingNum);
+		});
+	});
+});

package/src/theme/hooks.ts

@@ -9,7 +9,7 @@ import type {
 	NestedStringRecord,
 } from "@nds-design-system/tokens";
 import { useContext } from "react";
-import { ThemeContext, type ThemeContextValue } from "./ThemeProvider";
+import { ThemeContext, type ThemeContextValue } from "./theme-provider";
 
 /**
  * Hook to access the theme context

package/src/theme/index.ts

@@ -30,7 +30,7 @@ export {
 	type ThemeContextValue,
 	ThemeProvider,
 	type ThemeProviderProps,
-} from "./ThemeProvider";
+} from "./theme-provider";
 // Utilities
 export {
 	applyTheme,

package/src/theme/theme-provider.test.tsx

@@ -0,0 +1,270 @@
+import { describe, expect, test } from "vitest";
+import { page } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { Button } from "../components/atoms/button/button";
+import { useCSSVars, useTheme } from "./hooks";
+import { ThemeProvider } from "./theme-provider";
+
+function getInlineStyleVar(element: Element, varName: string): string | null {
+	const style = element.getAttribute("style") || "";
+	const regex = new RegExp(`${varName}:\\s*([^;]+)`);
+	const match = style.match(regex);
+	return match ? match[1].trim() : null;
+}
+
+describe("ThemeProvider", () => {
+	describe("CSS Variable Application", () => {
+		test("renders a wrapper div with style attribute", async () => {
+			render(
+				<ThemeProvider>
+					<div data-testid="content">Content</div>
+				</ThemeProvider>,
+			);
+
+			const content = page.getByTestId("content");
+			await expect.element(content).toBeInTheDocument();
+
+			const wrapper = content.element().parentElement;
+			expect(wrapper).toBeTruthy();
+			expect(wrapper?.tagName).toBe("DIV");
+			expect(wrapper?.hasAttribute("style")).toBe(true);
+
+			const styleAttr = wrapper?.getAttribute("style") || "";
+			expect(styleAttr).toContain("--color-bg-page");
+		});
+
+		test("applies className to wrapper div", async () => {
+			render(
+				<ThemeProvider className="custom-class">
+					<div data-testid="content">Content</div>
+				</ThemeProvider>,
+			);
+
+			const content = page.getByTestId("content");
+			const wrapper = content.element().parentElement;
+			expect(wrapper?.classList.contains("custom-class")).toBe(true);
+		});
+
+		test("applyStyles=false skips wrapper div", async () => {
+			function TestContent() {
+				const theme = useTheme();
+				return <div data-testid="content">{theme.colorTheme}</div>;
+			}
+
+			render(
+				<ThemeProvider applyStyles={false}>
+					<TestContent />
+				</ThemeProvider>,
+			);
+
+			const content = page.getByTestId("content");
+			await expect.element(content).toBeInTheDocument();
+			expect(content.element().textContent).toBe("base");
+		});
+	});
+
+	describe("Color Theme Overrides", () => {
+		test("base theme applies CSS variables for buttons", async () => {
+			render(
+				<ThemeProvider color="base">
+					<Button data-testid="btn" variant="primary">
+						Primary
+					</Button>
+				</ThemeProvider>,
+			);
+
+			const button = page.getByTestId("btn");
+			await expect.element(button).toBeInTheDocument();
+
+			const wrapper = button.element().parentElement;
+			const styleAttr = wrapper?.getAttribute("style") || "";
+			expect(styleAttr).toContain("--color-button-primary-bg");
+		});
+
+		test("civic theme overrides button primary color", async () => {
+			render(
+				<ThemeProvider color="civic">
+					<Button data-testid="btn" variant="primary">
+						Primary
+					</Button>
+				</ThemeProvider>,
+			);
+
+			const button = page.getByTestId("btn");
+			await expect.element(button).toBeInTheDocument();
+
+			const wrapper = button.element().parentElement;
+			expect(wrapper).toBeTruthy();
+
+			const styleAttr = wrapper?.getAttribute("style") || "";
+			expect(styleAttr).toContain("--color-button-primary-bg");
+			expect(styleAttr).toContain("red");
+		});
+
+		test("dark theme applies dark mode colors", async () => {
+			render(
+				<ThemeProvider color="dark">
+					<div data-testid="bg" className="bg-bg-page p-16">
+						Dark Theme
+					</div>
+				</ThemeProvider>,
+			);
+
+			const bgElement = page.getByTestId("bg");
+			await expect.element(bgElement).toBeInTheDocument();
+
+			const wrapper = bgElement.element().parentElement;
+			const styleAttr = wrapper?.getAttribute("style") || "";
+			expect(styleAttr).toContain("--color-bg-page");
+		});
+
+		test("institution theme uses green button colors", async () => {
+			render(
+				<ThemeProvider color="institution">
+					<Button data-testid="btn" variant="primary">
+						Institution
+					</Button>
+				</ThemeProvider>,
+			);
+
+			const button = page.getByTestId("btn");
+			await expect.element(button).toBeInTheDocument();
+
+			const wrapper = button.element().parentElement;
+			const styleAttr = wrapper?.getAttribute("style") || "";
+			expect(styleAttr).toContain("--color-button-primary-bg");
+			expect(styleAttr).toContain("green");
+		});
+	});
+
+	describe("Theme Context", () => {
+		test("useTheme returns current theme names", async () => {
+			function ThemeInfo() {
+				const { colorTheme, surfaceTheme } = useTheme();
+				return (
+					<div data-testid="info">
+						{colorTheme}-{surfaceTheme}
+					</div>
+				);
+			}
+
+			render(
+				<ThemeProvider color="civic" surface="sharp">
+					<ThemeInfo />
+				</ThemeProvider>,
+			);
+
+			const info = page.getByTestId("info");
+			await expect.element(info).toBeInTheDocument();
+			expect(info.element().textContent).toBe("civic-sharp");
+		});
+
+		test("useCSSVars returns CSS variable map", async () => {
+			function CSSVarsTest() {
+				const cssVars = useCSSVars();
+				const hasVars = Object.keys(cssVars).length > 0;
+				return (
+					<div data-testid="result">{hasVars ? "has-vars" : "no-vars"}</div>
+				);
+			}
+
+			render(
+				<ThemeProvider>
+					<CSSVarsTest />
+				</ThemeProvider>,
+			);
+
+			const result = page.getByTestId("result");
+			await expect.element(result).toBeInTheDocument();
+			expect(result.element().textContent).toBe("has-vars");
+		});
+	});
+
+	describe("Nested ThemeProviders", () => {
+		test("nested ThemeProvider overrides parent theme", async () => {
+			function ThemeInfo() {
+				const { colorTheme } = useTheme();
+				return <span data-testid="theme">{colorTheme}</span>;
+			}
+
+			render(
+				<ThemeProvider color="base">
+					<div>
+						<ThemeInfo />
+						<ThemeProvider color="civic">
+							<ThemeInfo />
+						</ThemeProvider>
+					</div>
+				</ThemeProvider>,
+			);
+
+			const themes = page.getByTestId("theme");
+			await expect.element(themes.first()).toBeInTheDocument();
+
+			const themeElements = document.querySelectorAll('[data-testid="theme"]');
+			expect(themeElements[0].textContent).toBe("base");
+			expect(themeElements[1].textContent).toBe("civic");
+		});
+	});
+
+	describe("Button Theming Integration", () => {
+		test("button primary-outline inherits theme colors", async () => {
+			render(
+				<ThemeProvider color="civic">
+					<Button data-testid="btn" variant="primary-outline">
+						Outline
+					</Button>
+				</ThemeProvider>,
+			);
+
+			const button = page.getByTestId("btn");
+			await expect.element(button).toBeInTheDocument();
+
+			const wrapper = button.element().parentElement;
+			const styleAttr = wrapper?.getAttribute("style") || "";
+			expect(styleAttr).toContain("--color-button-primary-outline");
+		});
+
+		test("different themes produce different CSS variables", async () => {
+			render(
+				<div className="flex gap-16">
+					<ThemeProvider color="base">
+						<Button data-testid="base-btn" variant="primary">
+							Base
+						</Button>
+					</ThemeProvider>
+					<ThemeProvider color="civic">
+						<Button data-testid="civic-btn" variant="primary">
+							Civic
+						</Button>
+					</ThemeProvider>
+				</div>,
+			);
+
+			const baseBtn = page.getByTestId("base-btn");
+			const civicBtn = page.getByTestId("civic-btn");
+
+			await expect.element(baseBtn).toBeInTheDocument();
+			await expect.element(civicBtn).toBeInTheDocument();
+
+			const baseWrapper = baseBtn.element().parentElement;
+			const civicWrapper = civicBtn.element().parentElement;
+
+			expect(baseWrapper).toBeTruthy();
+			expect(civicWrapper).toBeTruthy();
+
+			const baseBgVar = getInlineStyleVar(
+				baseWrapper as Element,
+				"--color-button-primary-bg",
+			);
+			const civicBgVar = getInlineStyleVar(
+				civicWrapper as Element,
+				"--color-button-primary-bg",
+			);
+
+			expect(baseBgVar).toBeTruthy();
+			expect(civicBgVar).toBeTruthy();
+			expect(baseBgVar).not.toBe(civicBgVar);
+		});
+	});
+});

package/src/theme/{ThemeProvider.tsx → theme-provider.tsx}

@@ -48,6 +48,10 @@ export interface ThemeProviderProps {
 	surface?: SurfaceThemeName;
 	/** Children to render */
 	children: ReactNode;
+	/** Optional className for the wrapper div */
+	className?: string;
+	/** Whether to render a wrapper div with CSS variables applied (defaults to true) */
+	applyStyles?: boolean;
 }
 
 /**
@@ -105,6 +109,8 @@ function processColorTokens(
 				if (typeof tokenValue === "string" && tokenValue.startsWith("{")) {
 					// Alias reference - resolve to CSS var
 					let refPath = tokenValue.slice(1, -1).replace(/\./g, "-");
+					// Strip prefixes that aren't used in CSS variable names
+					refPath = refPath.replace(/^primitive-/, "");
 					refPath = refPath.replace(/^semantic-color-/, "color-");
 					result[varName] = `var(--${refPath})`;
 				} else {
@@ -160,7 +166,9 @@ function processSurfaceTokens(
 				if (typeof tokenValue === "string" && tokenValue.startsWith("{")) {
 					// Alias reference
 					let refPath = tokenValue.slice(1, -1).replace(/\./g, "-");
-					refPath = refPath.replace(/^primitive-radii-/, "radius-");
+					// Strip prefixes that aren't used in CSS variable names
+					refPath = refPath.replace(/^primitive-/, "");
+					refPath = refPath.replace(/^radii-/, "radius-");
 					cssValue = `var(--${refPath})`;
 				} else {
 					cssValue = tokenValueToCSS(tokenValue);
@@ -241,6 +249,8 @@ export function ThemeProvider({
 	color = "base",
 	surface = "base",
 	children,
+	className,
+	applyStyles = true,
 }: ThemeProviderProps) {
 	const { tokens, cssVars } = useMemo(() => {
 		const flatTokens: Record<string, string> = {};
@@ -291,7 +301,13 @@ export function ThemeProvider({
 
 	return (
 		<ThemeContext.Provider value={contextValue}>
-			{children}
+			{applyStyles ? (
+				<div style={cssVars} className={className}>
+					{children}
+				</div>
+			) : (
+				children
+			)}
 		</ThemeContext.Provider>
 	);
 }