@nationaldesignstudio/react 0.0.17 → 0.1.0

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

@@ -27,63 +27,112 @@ Playground.argTypes = {
 		control: {
 			type: "radio",
 		},
-		options: [
-			"primary",
-			"primaryOutline",
-			"secondary",
-			"charcoal",
-			"charcoalOutline",
-			"charcoalOutlineQuiet",
-			"ivory",
-			"ivoryOutline",
-			"ivoryOutlineQuiet",
-			"gray",
-		],
+		options: ["solid", "outline", "ghost", "subtle"],
+	},
+	colorScheme: {
+		control: {
+			type: "radio",
+		},
+		options: ["dark", "light"],
 	},
 };
 Playground.args = {
 	size: "default",
 	disabled: false,
-	variant: "primary",
+	variant: "solid",
+	colorScheme: "dark",
 };
 
 // =============================================================================
-// Semantic Variants (recommended)
+// Variants (Dark Color Scheme - for light backgrounds)
 // =============================================================================
 
-export const Primary = () => <Button variant="primary">Primary</Button>;
+export const Solid = () => <Button variant="solid">Solid</Button>;
 
-export const PrimaryOutline = () => (
-	<Button variant="primaryOutline">Primary Outline</Button>
-);
+export const Outline = () => <Button variant="outline">Outline</Button>;
+
+export const Ghost = () => <Button variant="ghost">Ghost</Button>;
 
-export const Secondary = () => <Button variant="secondary">Secondary</Button>;
+export const Subtle = () => <Button variant="subtle">Subtle</Button>;
 
 // =============================================================================
-// Legacy Variants
+// Variants (Light Color Scheme - for dark backgrounds)
 // =============================================================================
 
-export const Charcoal = () => <Button variant="charcoal">Charcoal</Button>;
-
-export const CharcoalOutline = () => (
-	<Button variant="charcoalOutline">Charcoal Outline</Button>
+const DarkBackground = ({ children }: { children: React.ReactNode }) => (
+	<div className="rounded-radius-12 bg-gray-1200 p-spacing-32">{children}</div>
 );
 
-export const CharcoalOutlineQuiet = () => (
-	<Button variant="charcoalOutlineQuiet">Charcoal Outline Quiet</Button>
+export const SolidLight = () => (
+	<DarkBackground>
+		<Button variant="solid" colorScheme="light">
+			Solid Light
+		</Button>
+	</DarkBackground>
 );
 
-export const Ivory = () => <Button variant="ivory">Ivory</Button>;
+export const OutlineLight = () => (
+	<DarkBackground>
+		<Button variant="outline" colorScheme="light">
+			Outline Light
+		</Button>
+	</DarkBackground>
+);
 
-export const IvoryOutline = () => (
-	<Button variant="ivoryOutline">Ivory Outline</Button>
+export const GhostLight = () => (
+	<DarkBackground>
+		<Button variant="ghost" colorScheme="light">
+			Ghost Light
+		</Button>
+	</DarkBackground>
 );
 
-export const IvoryOutlineQuiet = () => (
-	<Button variant="ivoryOutlineQuiet">Ivory Outline Quiet</Button>
+export const SubtleLight = () => (
+	<DarkBackground>
+		<Button variant="subtle" colorScheme="light">
+			Subtle Light
+		</Button>
+	</DarkBackground>
 );
 
-export const Gray = () => <Button variant="gray">Gray</Button>;
+// =============================================================================
+// All Variants Comparison
+// =============================================================================
+
+export const AllVariants = () => (
+	<div className="flex flex-col gap-spacing-32">
+		<div>
+			<h3 className="mb-spacing-16 text-14 font-medium text-text-secondary">
+				Dark Color Scheme (for light backgrounds)
+			</h3>
+			<div className="flex gap-spacing-16">
+				<Button variant="solid">Solid</Button>
+				<Button variant="outline">Outline</Button>
+				<Button variant="ghost">Ghost</Button>
+				<Button variant="subtle">Subtle</Button>
+			</div>
+		</div>
+		<DarkBackground>
+			<h3 className="mb-spacing-16 text-14 font-medium text-gray-400">
+				Light Color Scheme (for dark backgrounds)
+			</h3>
+			<div className="flex gap-spacing-16">
+				<Button variant="solid" colorScheme="light">
+					Solid
+				</Button>
+				<Button variant="outline" colorScheme="light">
+					Outline
+				</Button>
+				<Button variant="ghost" colorScheme="light">
+					Ghost
+				</Button>
+				<Button variant="subtle" colorScheme="light">
+					Subtle
+				</Button>
+			</div>
+		</DarkBackground>
+	</div>
+);
 
 // =============================================================================
 // Sizes

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

@@ -1,3 +1,5 @@
+"use client";
+
 import {
 	Button as BaseButton,
 	type ButtonProps as BaseButtonProps,
@@ -10,16 +12,14 @@ import { type ButtonTheme, buttonThemeToStyleVars } from "../../../lib/theme";
  * Button component based on Figma BaseKit / Interface / Buttons
  *
  * Variants:
- * - primary: Primary filled button using semantic color tokens
- * - primaryOutline: Outlined primary button (for light backgrounds)
- * - secondary: Secondary button using semantic color tokens
- * - charcoal: Dark filled button (for light backgrounds) - legacy
- * - charcoalOutline: Dark outlined button (for light backgrounds)
- * - charcoalOutlineQuiet: Subtle dark outlined button (for light backgrounds)
- * - ivory: Light filled button (for dark backgrounds)
- * - ivoryOutline: Light outlined button (for dark backgrounds)
- * - ivoryOutlineQuiet: Subtle light outlined button (for dark backgrounds)
- * - gray: Gray filled button (for dark backgrounds)
+ * - solid: Filled button
+ * - outline: Outlined button
+ * - ghost: No background/border, just text
+ * - subtle: Light background with subtle styling
+ *
+ * Color Schemes:
+ * - dark: Dark colors for use on light backgrounds (default)
+ * - light: Light colors for use on dark backgrounds
  *
  * Sizes:
  * - lg: Large buttons
@@ -30,58 +30,91 @@ import { type ButtonTheme, buttonThemeToStyleVars } from "../../../lib/theme";
  *
  * Theme Support:
  * Pass a `theme` prop to override default colors via CSS custom properties.
- * Surface tokens (--radius-surface-button, --surface-button-stroke) control
- * border radius and stroke width across all variants.
  */
 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",
 	variants: {
 		variant: {
-			// Primary - uses semantic color tokens
-			primary:
-				"bg-button-primary-bg text-text-inverted hover:bg-button-primary-bg-hover border-transparent focus-visible:ring-button-primary-bg",
-			// Primary Outline - outlined primary (for light backgrounds)
-			primaryOutline:
-				"bg-transparent text-text-primary border-border-strong hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-button-primary-bg",
-			// Secondary - uses semantic color tokens
-			secondary:
-				"bg-button-secondary-bg text-text-primary border-border-subtle hover:bg-button-secondary-bg-hover focus-visible:ring-button-primary-bg",
-			// Charcoal (dark filled) - primary dark (legacy)
-			charcoal:
-				"bg-gray-1200 text-gray-100 hover:bg-gray-1100 active:bg-gray-1000 border-transparent focus-visible:ring-gray-1000",
-			// Charcoal Outline - outlined dark (for light backgrounds)
-			charcoalOutline:
-				"border-border-strong text-gray-1000 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-			// Charcoal Outline Quiet - subtle outlined dark (for light backgrounds)
-			charcoalOutlineQuiet:
-				"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",
-			// Ivory (light filled) - primary light (for dark backgrounds)
-			ivory:
-				"bg-gray-50 text-gray-1000 hover:bg-gray-100 active:bg-gray-200 border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-			// Ivory Outline - outlined light (for dark backgrounds)
-			ivoryOutline:
-				"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",
-			// Ivory Outline Quiet - subtle light outline (for dark backgrounds)
-			ivoryOutlineQuiet:
-				"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",
-			// Gray - gray filled button (for dark backgrounds)
-			gray: "bg-gray-800 text-gray-100 hover:bg-gray-700 active:bg-gray-600 border-transparent focus-visible:ring-gray-700 focus-visible:ring-offset-gray-1000",
+			solid: "",
+			outline: "bg-transparent border",
+			ghost: "bg-transparent border-transparent",
+			subtle: "border",
 			// 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: {
-			// Large button - uses primitive spacing tokens
-			lg: "px-spacing-24 py-spacing-12 typography-brand-large-button-large h-spacing-48",
-			// Medium button (default) - uses primitive spacing tokens
+			lg: "px-spacing-24 py-spacing-12 typography-large-button-large h-spacing-48",
 			default:
-				"px-spacing-20 py-spacing-10 typography-brand-medium-button-medium h-spacing-40",
-			// Small button - uses primitive spacing tokens
-			sm: "px-spacing-16 py-spacing-8 typography-brand-small-button-small h-spacing-32",
+				"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",
 		},
 	},
+	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-strong 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: "primary",
+		variant: "solid",
+		colorScheme: "dark",
 		size: "default",
 	},
 });
@@ -106,7 +139,17 @@ function hasThemeValues(theme: ButtonTheme | undefined): boolean {
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 	(
-		{ className, variant, size, render, nativeButton, theme, style, ...props },
+		{
+			className,
+			variant,
+			colorScheme,
+			size,
+			render,
+			nativeButton,
+			theme,
+			style,
+			...props
+		},
 		ref,
 	) => {
 		// When render prop is provided, default nativeButton to false to suppress warnings
@@ -118,10 +161,16 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 		const themeStyles = buttonThemeToStyleVars(theme);
 		const combinedStyles = hasTheme ? { ...themeStyles, ...style } : style;
 
+		// Resolve actual values for data attributes
+		const resolvedVariant = effectiveVariant ?? "solid";
+		const resolvedColorScheme = colorScheme ?? "dark";
+		const resolvedSize = size ?? "default";
+
 		return (
 			<BaseButton
 				className={buttonVariants({
 					variant: effectiveVariant,
+					colorScheme,
 					size,
 					class: className,
 				})}
@@ -129,6 +178,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 				render={render}
 				nativeButton={isNativeButton}
 				style={combinedStyles}
+				data-variant={resolvedVariant}
+				data-color-scheme={resolvedColorScheme}
+				data-size={resolvedSize}
 				{...props}
 			/>
 		);

package/src/components/atoms/button/icon-button.stories.tsx

@@ -77,90 +77,241 @@ Playground.argTypes = {
 		control: {
 			type: "radio",
 		},
-		options: [
-			"charcoal",
-			"charcoalOutline",
-			"charcoalOutlineQuiet",
-			"ivory",
-			"ivoryOutline",
-			"ivoryOutlineQuiet",
-		],
+		options: ["solid", "outline", "ghost", "subtle"],
+	},
+	colorScheme: {
+		control: {
+			type: "radio",
+		},
+		options: ["dark", "light"],
+	},
+	rounded: {
+		control: {
+			type: "radio",
+		},
+		options: ["default", "sm", "full"],
 	},
 };
 Playground.args = {
 	size: "default",
 	disabled: false,
-	variant: "charcoal",
+	variant: "solid",
+	colorScheme: "dark",
+	rounded: "default",
+	"aria-label": "Search",
 };
 
 // =============================================================================
-// Variants
+// Variants (Dark Color Scheme - for light backgrounds)
 // =============================================================================
 
-export const Charcoal = () => (
-	<IconButton variant="charcoal">
+export const Solid = () => (
+	<IconButton variant="solid" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
-export const CharcoalOutline = () => (
-	<IconButton variant="charcoalOutline">
+export const Outline = () => (
+	<IconButton variant="outline" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
-export const CharcoalOutlineQuiet = () => (
-	<IconButton variant="charcoalOutlineQuiet">
+export const Ghost = () => (
+	<IconButton variant="ghost" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
-export const Ivory = () => (
-	<IconButton variant="ivory">
+export const Subtle = () => (
+	<IconButton variant="subtle" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
-export const IvoryOutline = () => (
-	<IconButton variant="ivoryOutline">
-		<ArrowRightIcon />
+// =============================================================================
+// Variants (Light Color Scheme - for dark backgrounds)
+// =============================================================================
+
+const DarkBackground = ({ children }: { children: React.ReactNode }) => (
+	<div className="rounded-radius-12 bg-gray-1200 p-spacing-32">{children}</div>
+);
+
+export const SolidLight = () => (
+	<DarkBackground>
+		<IconButton variant="solid" colorScheme="light" aria-label="Navigate">
+			<ArrowRightIcon />
+		</IconButton>
+	</DarkBackground>
+);
+
+export const OutlineLight = () => (
+	<DarkBackground>
+		<IconButton variant="outline" colorScheme="light" aria-label="Navigate">
+			<ArrowRightIcon />
+		</IconButton>
+	</DarkBackground>
+);
+
+export const GhostLight = () => (
+	<DarkBackground>
+		<IconButton variant="ghost" colorScheme="light" aria-label="Navigate">
+			<ArrowRightIcon />
+		</IconButton>
+	</DarkBackground>
+);
+
+export const SubtleLight = () => (
+	<DarkBackground>
+		<IconButton variant="subtle" colorScheme="light" aria-label="Navigate">
+			<ArrowRightIcon />
+		</IconButton>
+	</DarkBackground>
+);
+
+// =============================================================================
+// All Variants Comparison
+// =============================================================================
+
+export const AllVariants = () => (
+	<div className="flex flex-col gap-spacing-32">
+		<div>
+			<h3 className="mb-spacing-16 text-14 font-medium text-text-secondary">
+				Dark Color Scheme (for light backgrounds)
+			</h3>
+			<div className="flex gap-spacing-16">
+				<IconButton variant="solid" aria-label="Solid">
+					<SearchIcon />
+				</IconButton>
+				<IconButton variant="outline" aria-label="Outline">
+					<SearchIcon />
+				</IconButton>
+				<IconButton variant="ghost" aria-label="Ghost">
+					<SearchIcon />
+				</IconButton>
+				<IconButton variant="subtle" aria-label="Subtle">
+					<SearchIcon />
+				</IconButton>
+			</div>
+		</div>
+		<DarkBackground>
+			<h3 className="mb-spacing-16 text-14 font-medium text-gray-400">
+				Light Color Scheme (for dark backgrounds)
+			</h3>
+			<div className="flex gap-spacing-16">
+				<IconButton variant="solid" colorScheme="light" aria-label="Solid">
+					<ArrowRightIcon />
+				</IconButton>
+				<IconButton variant="outline" colorScheme="light" aria-label="Outline">
+					<ArrowRightIcon />
+				</IconButton>
+				<IconButton variant="ghost" colorScheme="light" aria-label="Ghost">
+					<ArrowRightIcon />
+				</IconButton>
+				<IconButton variant="subtle" colorScheme="light" aria-label="Subtle">
+					<ArrowRightIcon />
+				</IconButton>
+			</div>
+		</DarkBackground>
+	</div>
+);
+
+// =============================================================================
+// Rounded Variants
+// =============================================================================
+
+export const RoundedDefault = () => (
+	<IconButton rounded="default" aria-label="Search">
+		<SearchIcon />
 	</IconButton>
 );
 
-export const IvoryOutlineQuiet = () => (
-	<IconButton variant="ivoryOutlineQuiet">
-		<ArrowRightIcon />
+export const RoundedSm = () => (
+	<IconButton rounded="sm" aria-label="Search">
+		<SearchIcon />
 	</IconButton>
 );
 
+export const RoundedFull = () => (
+	<IconButton rounded="full" aria-label="Search">
+		<SearchIcon />
+	</IconButton>
+);
+
+export const AllRounded = () => (
+	<div className="flex gap-spacing-16">
+		<div className="text-center">
+			<IconButton rounded="default" aria-label="Default rounded">
+				<SearchIcon />
+			</IconButton>
+			<p className="mt-spacing-8 text-12 text-text-muted">default</p>
+		</div>
+		<div className="text-center">
+			<IconButton rounded="sm" aria-label="Small rounded">
+				<SearchIcon />
+			</IconButton>
+			<p className="mt-spacing-8 text-12 text-text-muted">sm</p>
+		</div>
+		<div className="text-center">
+			<IconButton rounded="full" aria-label="Full rounded">
+				<SearchIcon />
+			</IconButton>
+			<p className="mt-spacing-8 text-12 text-text-muted">full</p>
+		</div>
+	</div>
+);
+
 // =============================================================================
 // Sizes
 // =============================================================================
 
 export const Small = () => (
-	<IconButton size="sm">
+	<IconButton size="sm" aria-label="Search">
 		<ArrowRightIcon />
 	</IconButton>
 );
 
 export const Medium = () => (
-	<IconButton size="default">
+	<IconButton size="default" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
 export const Large = () => (
-	<IconButton size="lg">
+	<IconButton size="lg" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
+export const AllSizes = () => (
+	<div className="flex items-center gap-spacing-16">
+		<div className="text-center">
+			<IconButton size="sm" aria-label="Small">
+				<ArrowRightIcon />
+			</IconButton>
+			<p className="mt-spacing-8 text-12 text-text-muted">sm (32px)</p>
+		</div>
+		<div className="text-center">
+			<IconButton size="default" aria-label="Default">
+				<SearchIcon />
+			</IconButton>
+			<p className="mt-spacing-8 text-12 text-text-muted">default (40px)</p>
+		</div>
+		<div className="text-center">
+			<IconButton size="lg" aria-label="Large">
+				<SearchIcon />
+			</IconButton>
+			<p className="mt-spacing-8 text-12 text-text-muted">lg (48px)</p>
+		</div>
+	</div>
+);
+
 // =============================================================================
 // States
 // =============================================================================
 
 export const Disabled = () => (
-	<IconButton disabled>
+	<IconButton disabled aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );