@nationaldesignstudio/react 0.5.2 → 0.5.3

package/src/styles.css

@@ -1,14 +0,0 @@
-/* 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";
-
-@font-face {
-	font-family: "PP Neue Montreal";
-	src: url("./assets/fonts/PPNeueMontreal-Variable.woff2")
-		format("woff2-variations");
-	font-weight: 100 900;
-	font-style: normal;
-	font-display: swap;
-}

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

@@ -1,298 +0,0 @@
-/**
- * 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/theme-provider.test.tsx

@@ -1,270 +0,0 @@
-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);
-		});
-	});
-});