@nationaldesignstudio/react 0.2.0 → 0.3.0

package/src/styles.css

@@ -1,6 +1,9 @@
 @import "tailwindcss";
 @import "../../tailwind-token-generator/dist/tokens.css";
 
+/* Google Fonts - Inter and Inter Tight */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Inter+Tight:wght@100..900&display=swap");
+
 @font-face {
 	font-family: "PP Neue Montreal";
 	src: url("./assets/fonts/PPNeueMontreal-Variable.woff2")

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

@@ -0,0 +1,301 @@
+/**
+ * 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");
+
+			// H1 should have a large font size (48px+ depending on breakpoint)
+			const sizeNum = Number.parseFloat(fontSize);
+			expect(sizeNum).toBeGreaterThanOrEqual(48);
+
+			// Should use the heading font family (Inter Tight)
+			expect(fontFamily.toLowerCase()).toContain("inter");
+		});
+
+		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");
+
+			// Button text should be medium weight (500) or higher
+			const weightNum = Number.parseInt(fontWeight, 10);
+			expect(weightNum).toBeGreaterThanOrEqual(500);
+		});
+	});
+
+	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-spacing-64 h-8 bg-gray-500">
+					Width test
+				</div>,
+			);
+
+			const element = page.getByTestId("width").element();
+			const width = getComputedStyleValue(element, "width");
+
+			// w-spacing-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="default">
+					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);
+		});
+	});
+});