@nationaldesignstudio/react 0.2.0 → 0.5.0

package/src/components/atoms/button/button.test.tsx

@@ -3,6 +3,28 @@ import { page, userEvent } from "vitest/browser";
 import { render } from "vitest-browser-react";
 import { Button } from "./button";
 
+/**
+ * Helper to get computed styles of an element
+ */
+function getStyles(element: HTMLElement) {
+	return window.getComputedStyle(element);
+}
+
+/**
+ * Helper to convert rgb/rgba to hex for easier comparison
+ */
+function _rgbToHex(rgb: string): string {
+	// Handle rgba format
+	const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
+	if (!match) return rgb;
+
+	const r = parseInt(match[1], 10);
+	const g = parseInt(match[2], 10);
+	const b = parseInt(match[3], 10);
+
+	return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+}
+
 describe("Button", () => {
 	describe("Accessibility", () => {
 		test("has correct button role", async () => {
@@ -124,12 +146,274 @@ describe("Button", () => {
 		});
 	});
 
-	describe("Variants", () => {
-		test("applies primary variant classes by default", async () => {
-			render(<Button>Default</Button>);
+	describe("Variant Styles", () => {
+		test("default variant has dark background", async () => {
+			render(<Button variant="default">Default</Button>);
 			const button = page.getByRole("button", { name: "Default" });
-			// Button uses semantic token classes
-			await expect.element(button).toHaveClass(/bg-button-primary-bg/);
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Default variant should have a dark background (gray-1200)
+			// The actual color depends on CSS variables, but it should not be transparent
+			expect(styles.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+			expect(styles.backgroundColor).not.toBe("transparent");
+		});
+
+		test("primary variant has blue background", async () => {
+			render(<Button variant="primary">Primary</Button>);
+			const button = page.getByRole("button", { name: "Primary" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Primary variant should have a visible background
+			expect(styles.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+			expect(styles.backgroundColor).not.toBe("transparent");
+		});
+
+		test("destructive variant has red-tinted background", async () => {
+			render(<Button variant="destructive">Delete</Button>);
+			const button = page.getByRole("button", { name: "Delete" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Destructive variant should have a visible background
+			expect(styles.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+			expect(styles.backgroundColor).not.toBe("transparent");
+		});
+
+		test("ghost variant has transparent background", async () => {
+			render(<Button variant="ghost">Ghost</Button>);
+			const button = page.getByRole("button", { name: "Ghost" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Ghost variant should have transparent background
+			expect(
+				styles.backgroundColor === "rgba(0, 0, 0, 0)" ||
+					styles.backgroundColor === "transparent",
+			).toBe(true);
+		});
+
+		test("link variant has no background and underline on hover behavior", async () => {
+			render(<Button variant="link">Link</Button>);
+			const button = page.getByRole("button", { name: "Link" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Link variant should have transparent background
+			expect(
+				styles.backgroundColor === "rgba(0, 0, 0, 0)" ||
+					styles.backgroundColor === "transparent",
+			).toBe(true);
+		});
+
+		test("outline variant has visible border", async () => {
+			render(<Button variant="outline">Outline</Button>);
+			const button = page.getByRole("button", { name: "Outline" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Outline variant should have a visible border
+			const borderWidth = parseFloat(styles.borderWidth) || 0;
+			expect(borderWidth).toBeGreaterThan(0);
+		});
+
+		test("secondary variant has light gray background with border", async () => {
+			render(<Button variant="secondary">Secondary</Button>);
+			const button = page.getByRole("button", { name: "Secondary" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Secondary variant should have a visible background
+			expect(styles.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+			expect(styles.backgroundColor).not.toBe("transparent");
+
+			// Secondary should also have a border
+			const borderWidth = parseFloat(styles.borderWidth) || 0;
+			expect(borderWidth).toBeGreaterThan(0);
+		});
+	});
+
+	describe("Size Styles", () => {
+		test("small size has 32px height", async () => {
+			render(<Button size="sm">Small</Button>);
+			const button = page.getByRole("button", { name: "Small" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Small button should be 32px height
+			expect(styles.height).toBe("32px");
+		});
+
+		test("default size has 36px height", async () => {
+			render(<Button size="default">Default</Button>);
+			const button = page.getByRole("button", { name: "Default" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Default button should be 36px height
+			expect(styles.height).toBe("36px");
+		});
+
+		test("large size has 40px height", async () => {
+			render(<Button size="lg">Large</Button>);
+			const button = page.getByRole("button", { name: "Large" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Large button should be 40px height
+			expect(styles.height).toBe("40px");
+		});
+
+		test("size affects padding appropriately", async () => {
+			render(
+				<>
+					<Button size="sm">Small</Button>
+					<Button size="lg">Large</Button>
+				</>,
+			);
+			const smallButton = page.getByRole("button", { name: "Small" });
+			const largeButton = page.getByRole("button", { name: "Large" });
+
+			const smallStyles = getStyles(smallButton.element());
+			const largeStyles = getStyles(largeButton.element());
+
+			const smallPaddingLeft = parseFloat(smallStyles.paddingLeft);
+			const largePaddingLeft = parseFloat(largeStyles.paddingLeft);
+
+			// Large should have more padding than small
+			expect(largePaddingLeft).toBeGreaterThan(smallPaddingLeft);
+		});
+
+		test("size affects border radius appropriately", async () => {
+			render(
+				<>
+					<Button size="sm">Small</Button>
+					<Button size="lg">Large</Button>
+				</>,
+			);
+			const smallButton = page.getByRole("button", { name: "Small" });
+			const largeButton = page.getByRole("button", { name: "Large" });
+
+			const smallStyles = getStyles(smallButton.element());
+			const largeStyles = getStyles(largeButton.element());
+
+			const smallRadius = parseFloat(smallStyles.borderRadius);
+			const largeRadius = parseFloat(largeStyles.borderRadius);
+
+			// Large should have more border radius than small
+			// Figma: sm=4px, default=6px, lg=10px
+			expect(largeRadius).toBeGreaterThan(smallRadius);
+		});
+	});
+
+	describe("Disabled State Styles", () => {
+		test("disabled button has reduced opacity", async () => {
+			render(<Button disabled>Disabled</Button>);
+			const button = page.getByRole("button", { name: "Disabled" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Disabled button should have opacity of 0.5
+			expect(parseFloat(styles.opacity)).toBe(0.5);
+		});
+
+		test("disabled button has pointer-events none", async () => {
+			render(<Button disabled>Disabled</Button>);
+			const button = page.getByRole("button", { name: "Disabled" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			expect(styles.pointerEvents).toBe("none");
+		});
+	});
+
+	describe("Data Attributes", () => {
+		test("button has correct data-variant attribute", async () => {
+			render(<Button variant="destructive">Test</Button>);
+			const button = page.getByRole("button", { name: "Test" });
+
+			await expect
+				.element(button)
+				.toHaveAttribute("data-variant", "destructive");
+		});
+
+		test("button has correct data-size attribute", async () => {
+			render(<Button size="lg">Test</Button>);
+			const button = page.getByRole("button", { name: "Test" });
+
+			await expect.element(button).toHaveAttribute("data-size", "lg");
+		});
+
+		test("default variant and size are reflected in data attributes", async () => {
+			render(<Button>Test</Button>);
+			const button = page.getByRole("button", { name: "Test" });
+
+			await expect.element(button).toHaveAttribute("data-variant", "default");
+			await expect.element(button).toHaveAttribute("data-size", "default");
+		});
+	});
+
+	describe("Layout Styles", () => {
+		test("button uses flexbox for content alignment", async () => {
+			render(<Button>Test</Button>);
+			const button = page.getByRole("button", { name: "Test" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			expect(styles.display).toBe("inline-flex");
+			expect(styles.alignItems).toBe("center");
+			expect(styles.justifyContent).toBe("center");
+		});
+
+		test("button has cursor pointer", async () => {
+			render(<Button>Test</Button>);
+			const button = page.getByRole("button", { name: "Test" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			expect(styles.cursor).toBe("pointer");
+		});
+
+		test("button has gap for icon-text spacing", async () => {
+			render(<Button>Test</Button>);
+			const button = page.getByRole("button", { name: "Test" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Gap should be set (6px from Figma)
+			const gap = parseFloat(styles.gap);
+			expect(gap).toBeGreaterThan(0);
 		});
 	});
 });

package/src/components/atoms/button/button.tsx

@@ -9,22 +9,21 @@ import { tv, type VariantProps } from "tailwind-variants";
 import { type ButtonTheme, buttonThemeToStyleVars } from "../../../lib/theme";
 
 /**
- * Button component based on Figma BaseKit / Interface / Buttons
+ * Button component based on Figma Button component
  *
- * Variants:
- * - solid: Filled button
- * - outline: Outlined button
- * - ghost: No background/border, just text
- * - subtle: Light background with subtle styling
+ * Variants (matches Figma):
+ * - primary: Blue filled button for primary actions
+ * - default: Dark filled button for secondary prominence
+ * - secondary: Light gray filled button with subtle border
+ * - destructive: Red filled button for destructive actions
+ * - outline: Bordered button with transparent background
+ * - ghost: Transparent button with subtle hover
+ * - link: Text-only button with underline on hover
  *
- * Color Schemes:
- * - dark: Dark colors for use on light backgrounds (default)
- * - light: Light colors for use on dark backgrounds
- *
- * Sizes:
- * - lg: Large buttons
- * - default: Medium buttons
- * - sm: Small buttons
+ * Sizes (matches Figma):
+ * - sm: Small buttons (32px height)
+ * - default: Default buttons (36px height)
+ * - lg: Large buttons (40px height)
  *
  * For icon-only buttons, use the IconButton component instead.
  *
@@ -32,89 +31,42 @@ import { type ButtonTheme, buttonThemeToStyleVars } from "../../../lib/theme";
  * Pass a `theme` prop to override default colors via CSS custom properties.
  */
 const buttonVariants = tv({
-	base: "inline-flex items-center justify-center gap-spacing-8 whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 rounded-surface-button stroke-surface-button border-solid",
+	base: "inline-flex items-center justify-center gap-spatial-ui-button-gap-icon-text whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50",
 	variants: {
 		variant: {
-			solid: "",
-			outline: "bg-transparent border",
-			ghost: "bg-transparent border-transparent",
-			subtle: "border",
+			// Primary - blue filled button
+			primary:
+				"bg-button-primary-bg text-button-primary-text hover:bg-button-primary-bg-hover active:bg-button-primary-bg-active border-transparent",
+			// Default - dark filled button
+			default:
+				"bg-button-default-bg text-button-default-text hover:bg-button-default-bg-hover active:bg-button-default-bg-active border-transparent",
+			// Secondary - light gray filled with subtle border
+			secondary:
+				"bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg-hover active:bg-button-secondary-bg-active border border-button-secondary-border",
+			// Destructive - red filled button
+			destructive:
+				"bg-button-destructive-bg text-button-destructive-text hover:bg-button-destructive-bg-hover active:bg-button-destructive-bg-active border-transparent",
+			// Outline - bordered with transparent background
+			outline:
+				"bg-button-outline-bg text-button-outline-text hover:bg-button-outline-bg-hover active:bg-button-outline-bg-active border border-button-outline-border hover:border-button-outline-border-hover",
+			// Ghost - transparent with subtle hover
+			ghost:
+				"bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg-hover active:bg-button-ghost-bg-active border-transparent",
+			// Link - text only with underline on hover
+			link: "bg-transparent text-button-link-text hover:text-button-link-text-hover hover:underline active:text-button-link-text-hover border-transparent underline-offset-4",
 			// Themed - uses CSS custom properties for styling
 			themed:
 				"[background:var(--btn-bg)] [color:var(--btn-text)] [border-color:var(--btn-border-color,transparent)] hover:[background:var(--btn-bg-hover,var(--btn-bg))] active:[background:var(--btn-bg-active,var(--btn-bg-hover,var(--btn-bg)))]",
 		},
-		colorScheme: {
-			dark: "",
-			light: "",
-		},
 		size: {
-			lg: "px-spacing-24 py-spacing-12 typography-large-button-large h-spacing-48",
+			sm: "typography-ui-text-xs h-spatial-ui-button-height-small px-spatial-ui-button-padding-x-small py-spatial-ui-button-padding-y-small rounded-surface-button-small",
 			default:
-				"px-spacing-20 py-spacing-10 typography-medium-button-medium h-spacing-40",
-			sm: "px-spacing-16 py-spacing-8 typography-small-button-small h-spacing-32",
+				"typography-ui-text-sm h-spatial-ui-button-height-medium px-spatial-ui-button-padding-x-medium py-spatial-ui-button-padding-y-medium rounded-surface-button-medium",
+			lg: "typography-ui-text-md h-spatial-ui-button-height-large px-spatial-ui-button-padding-x-large py-spatial-ui-button-padding-y-large rounded-surface-button-large",
 		},
 	},
-	compoundVariants: [
-		// Solid + Dark (for light backgrounds) - uses semantic button tokens
-		{
-			variant: "solid",
-			colorScheme: "dark",
-			class:
-				"bg-button-primary-bg text-text-inverted hover:bg-button-primary-bg-hover active:bg-button-primary-bg-hover border-transparent focus-visible:ring-button-primary-bg",
-		},
-		// Solid + Light (for dark backgrounds)
-		{
-			variant: "solid",
-			colorScheme: "light",
-			class:
-				"bg-button-secondary-bg text-text-primary hover:bg-button-secondary-bg-hover active:bg-gray-200 border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-		},
-		// Outline + Dark (for light backgrounds)
-		{
-			variant: "outline",
-			colorScheme: "dark",
-			class:
-				"border-border-subtle text-gray-1000 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-		},
-		// Outline + Light (for dark backgrounds)
-		{
-			variant: "outline",
-			colorScheme: "light",
-			class:
-				"border-gray-50 text-gray-50 hover:bg-alpha-white-10 active:bg-alpha-white-20 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-		},
-		// Ghost + Dark (for light backgrounds)
-		{
-			variant: "ghost",
-			colorScheme: "dark",
-			class:
-				"text-gray-700 hover:text-gray-900 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-		},
-		// Ghost + Light (for dark backgrounds)
-		{
-			variant: "ghost",
-			colorScheme: "light",
-			class:
-				"text-gray-300 hover:text-gray-100 hover:bg-alpha-white-10 active:bg-alpha-white-20 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-		},
-		// Subtle + Dark (for light backgrounds)
-		{
-			variant: "subtle",
-			colorScheme: "dark",
-			class:
-				"border-border-subtle text-alpha-black-60 hover:border-border-strong hover:text-alpha-black-80 active:bg-alpha-black-5 focus-visible:ring-gray-1000",
-		},
-		// Subtle + Light (for dark backgrounds)
-		{
-			variant: "subtle",
-			colorScheme: "light",
-			class:
-				"border-alpha-white-20 text-alpha-white-60 hover:border-alpha-white-30 hover:text-alpha-white-80 active:bg-alpha-white-5 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-		},
-	],
 	defaultVariants: {
-		variant: "solid",
-		colorScheme: "dark",
+		variant: "default",
 		size: "default",
 	},
 });
@@ -139,17 +91,7 @@ function hasThemeValues(theme: ButtonTheme | undefined): boolean {
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 	(
-		{
-			className,
-			variant,
-			colorScheme,
-			size,
-			render,
-			nativeButton,
-			theme,
-			style,
-			...props
-		},
+		{ className, variant, size, render, nativeButton, theme, style, ...props },
 		ref,
 	) => {
 		// When render prop is provided, default nativeButton to false to suppress warnings
@@ -162,15 +104,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 		const combinedStyles = hasTheme ? { ...themeStyles, ...style } : style;
 
 		// Resolve actual values for data attributes
-		const resolvedVariant = effectiveVariant ?? "solid";
-		const resolvedColorScheme = colorScheme ?? "dark";
+		const resolvedVariant = effectiveVariant ?? "default";
 		const resolvedSize = size ?? "default";
 
 		return (
 			<BaseButton
 				className={buttonVariants({
 					variant: effectiveVariant,
-					colorScheme,
 					size,
 					class: className,
 				})}
@@ -179,7 +119,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 				nativeButton={isNativeButton}
 				style={combinedStyles}
 				data-variant={resolvedVariant}
-				data-color-scheme={resolvedColorScheme}
 				data-size={resolvedSize}
 				{...props}
 			/>

package/src/components/atoms/button/button.visual.test.tsx

@@ -4,69 +4,66 @@ import { page } from "vitest/browser";
 import { Button } from "./button";
 
 describe("Button Visual Regression", () => {
-	test("charcoal variant renders correctly", async () => {
-		render(<Button variant="charcoal">Charcoal Button</Button>);
+	test("primary variant renders correctly", async () => {
+		render(<Button variant="primary">Primary Button</Button>);
 
 		await expect(
-			page.getByRole("button", { name: "Charcoal Button" }),
-		).toMatchScreenshot("button-charcoal");
+			page.getByRole("button", { name: "Primary Button" }),
+		).toMatchScreenshot("button-primary");
 	});
 
-	test("charcoalOutline variant renders correctly", async () => {
-		render(<Button variant="charcoalOutline">Charcoal Outline Button</Button>);
+	test("primary-outline variant renders correctly", async () => {
+		render(<Button variant="primary-outline">Primary Outline Button</Button>);
 
 		await expect(
-			page.getByRole("button", { name: "Charcoal Outline Button" }),
-		).toMatchScreenshot("button-charcoal-outline");
+			page.getByRole("button", { name: "Primary Outline Button" }),
+		).toMatchScreenshot("button-primary-outline");
 	});
 
-	test("charcoalOutlineQuiet variant renders correctly", async () => {
+	test("secondary variant renders correctly", async () => {
 		render(
-			<Button variant="charcoalOutlineQuiet">Charcoal Outline Quiet</Button>,
+			<div style={{ background: "#1a1a1a", padding: "20px" }}>
+				<Button variant="secondary">Secondary Button</Button>
+			</div>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Charcoal Outline Quiet" }),
-		).toMatchScreenshot("button-charcoal-outline-quiet");
+			page.getByRole("button", { name: "Secondary Button" }),
+		).toMatchScreenshot("button-secondary");
 	});
 
-	test("ivory variant renders correctly", async () => {
+	test("secondary-outline variant renders correctly", async () => {
 		render(
 			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ivory">Ivory Button</Button>
+				<Button variant="secondary-outline">Secondary Outline Button</Button>
 			</div>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Ivory Button" }),
-		).toMatchScreenshot("button-ivory");
+			page.getByRole("button", { name: "Secondary Outline Button" }),
+		).toMatchScreenshot("button-secondary-outline");
 	});
 
-	test("ivoryOutline variant renders correctly", async () => {
-		render(
-			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ivoryOutline">Ivory Outline Button</Button>
-			</div>,
-		);
+	test("ghost variant renders correctly", async () => {
+		render(<Button variant="ghost">Ghost Button</Button>);
 
 		await expect(
-			page.getByRole("button", { name: "Ivory Outline Button" }),
-		).toMatchScreenshot("button-ivory-outline");
+			page.getByRole("button", { name: "Ghost Button" }),
+		).toMatchScreenshot("button-ghost");
 	});
 
-	test("ivoryOutlineQuiet variant renders correctly", async () => {
+	test("ghost-inverse variant renders correctly", async () => {
 		render(
 			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ivoryOutlineQuiet">Ivory Outline Quiet</Button>
+				<Button variant="ghost-inverse">Ghost Inverse Button</Button>
 			</div>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Ivory Outline Quiet" }),
-		).toMatchScreenshot("button-ivory-outline-quiet");
+			page.getByRole("button", { name: "Ghost Inverse Button" }),
+		).toMatchScreenshot("button-ghost-inverse");
 	});
 
-	// Size variants
 	test("small size renders correctly", async () => {
 		render(<Button size="sm">Small Button</Button>);
 
@@ -75,8 +72,8 @@ describe("Button Visual Regression", () => {
 		).toMatchScreenshot("button-size-small");
 	});
 
-	test("medium (default) size renders correctly", async () => {
-		render(<Button size="default">Medium Button</Button>);
+	test("medium size renders correctly", async () => {
+		render(<Button size="md">Medium Button</Button>);
 
 		await expect(
 			page.getByRole("button", { name: "Medium Button" }),
@@ -91,7 +88,6 @@ describe("Button Visual Regression", () => {
 		).toMatchScreenshot("button-size-large");
 	});
 
-	// Disabled state
 	test("disabled state renders correctly", async () => {
 		render(<Button disabled>Disabled Button</Button>);