@nationaldesignstudio/react 0.2.0 → 0.5.0

package/src/components/dev-tools/dev-toolbar/dev-toolbar.stories.tsx

@@ -18,34 +18,25 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const DemoContent = () => (
-	<div className="min-h-screen bg-gray-100 py-spacing-64">
+	<div className="min-h-screen bg-gray-100 py-64">
 		<div className="w-full max-w-[90rem] mx-auto px-[var(--spatial-grid-small-margin)] md:px-[var(--spatial-grid-medium-margin)] lg:px-[var(--spatial-grid-large-margin)]">
-			<h1 className="typography-headline-large mb-spacing-16">
-				Dev Toolbar Demo
-			</h1>
-			<p className="typography-body-medium text-gray-600 mb-spacing-8">
+			<h1 className="typography-h2 mb-16">Dev Toolbar Demo</h1>
+			<p className="typography-body-medium text-gray-600 mb-8">
 				Click the bar at the bottom to expand, then toggle the Grid overlay.
 			</p>
-			<p className="typography-body-medium text-gray-600 mb-spacing-32">
+			<p className="typography-body-medium text-gray-600 mb-32">
 				Keyboard shortcut:{" "}
-				<kbd className="px-spacing-8 py-spacing-4 bg-gray-200 rounded-radius-8">
-					⌘G
-				</kbd>{" "}
-				or{" "}
-				<kbd className="px-spacing-8 py-spacing-4 bg-gray-200 rounded-radius-8">
-					Ctrl+G
-				</kbd>
+				<kbd className="px-8 py-4 bg-gray-200 rounded-radius-8">⌘G</kbd> or{" "}
+				<kbd className="px-8 py-4 bg-gray-200 rounded-radius-8">Ctrl+G</kbd>
 			</p>
 
 			<div className="grid grid-cols-4 md:grid-cols-12 lg:grid-cols-24 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]">
 				{["alpha", "beta", "gamma", "delta", "epsilon", "zeta"].map((id) => (
 					<div
 						key={id}
-						className="col-span-4 md:col-span-4 lg:col-span-8 bg-white p-spacing-16 rounded-radius-12 shadow"
+						className="col-span-4 md:col-span-4 lg:col-span-8 bg-white p-16 rounded-radius-12 shadow"
 					>
-						<h3 className="typography-headline-small mb-spacing-8">
-							Card {id}
-						</h3>
+						<h3 className="typography-h4 mb-8">Card {id}</h3>
 						<p className="typography-body-small text-gray-500">
 							Sample content to visualize how the grid overlay aligns with your
 							layout.

package/src/components/dev-tools/dev-toolbar/dev-toolbar.tsx

@@ -152,7 +152,7 @@ export function DevToolbar({ defaultExpanded = false }: DevToolbarProps) {
 				data-testid="dev-toolbar"
 			>
 				<div
-					className={`bg-gray-1100 rounded-radius-16 shadow-lg flex flex-col items-center overflow-hidden px-spacing-12 py-spacing-8 ${isExpanded ? "gap-spacing-4" : ""}`}
+					className={`bg-gray-1100 rounded-radius-16 shadow-lg flex flex-col items-center overflow-hidden px-12 py-8 ${isExpanded ? "gap-4" : ""}`}
 				>
 					<div
 						className={`
@@ -165,7 +165,7 @@ export function DevToolbar({ defaultExpanded = false }: DevToolbarProps) {
 								type="button"
 								onClick={toggleGrid}
 								className={`
-									size-spacing-40 rounded-full flex items-center justify-center transition-colors
+									size-40 rounded-full flex items-center justify-center transition-colors
 									${
 										showGrid
 											? "text-gray-50"
@@ -186,7 +186,7 @@ export function DevToolbar({ defaultExpanded = false }: DevToolbarProps) {
 						onTouchStart={handleBarTouchStart}
 						onClick={handleBarClick}
 						className={`
-							w-spacing-32 h-spacing-4 bg-gray-50 rounded-full transition-opacity
+							w-32 h-4 bg-gray-50 rounded-full transition-opacity
 							${isDragging ? "opacity-100 cursor-grabbing" : "opacity-60 hover:opacity-100 cursor-grab"}
 						`}
 						aria-label={isExpanded ? "Close dev tools" : "Open dev tools"}

package/src/components/foundation/typography/typography.stories.tsx

@@ -0,0 +1,401 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta = {
+	title: "Foundation/Typography",
+	parameters: {
+		layout: "padded",
+	},
+};
+
+export default meta;
+
+/**
+ * Typography Scale showcases all typography styles in the design system.
+ * Each style is shown with its class name and a sample text.
+ */
+export const TypeScale: StoryObj = {
+	render: () => (
+		<div className="space-y-48 p-24">
+			{/* Headings */}
+			<section>
+				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
+					Headings
+				</h2>
+				<div className="space-y-24">
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-h1-display
+						</code>
+						<p className="typography-h1-display text-gray-900">
+							Display Heading
+						</p>
+					</div>
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-h1
+						</code>
+						<p className="typography-h1 text-gray-900">Heading 1</p>
+					</div>
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-h2
+						</code>
+						<p className="typography-h2 text-gray-900">Heading 2</p>
+					</div>
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-h3
+						</code>
+						<p className="typography-h3 text-gray-900">Heading 3</p>
+					</div>
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-h4
+						</code>
+						<p className="typography-h4 text-gray-900">Heading 4</p>
+					</div>
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-h5
+						</code>
+						<p className="typography-h5 text-gray-900">Heading 5</p>
+					</div>
+				</div>
+			</section>
+
+			{/* Body Text */}
+			<section>
+				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
+					Body Text
+				</h2>
+				<div className="space-y-24">
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-body-large
+						</code>
+						<p className="typography-body-large text-gray-900 max-w-640">
+							Body large is used for important introductory text. The quick
+							brown fox jumps over the lazy dog.
+						</p>
+					</div>
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-body-medium
+						</code>
+						<p className="typography-body-medium text-gray-900 max-w-640">
+							Body medium is the default body text size for most content. The
+							quick brown fox jumps over the lazy dog.
+						</p>
+					</div>
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-body-small
+						</code>
+						<p className="typography-body-small text-gray-900 max-w-640">
+							Body small is used for secondary text and compact layouts. The
+							quick brown fox jumps over the lazy dog.
+						</p>
+					</div>
+				</div>
+			</section>
+
+			{/* Supporting Text */}
+			<section>
+				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
+					Supporting Text
+				</h2>
+				<div className="space-y-24">
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-overline
+						</code>
+						<p className="typography-overline text-gray-700 uppercase tracking-wide">
+							Overline Text
+						</p>
+					</div>
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-caption
+						</code>
+						<p className="typography-caption text-gray-600">
+							Caption text for supplementary information
+						</p>
+					</div>
+				</div>
+			</section>
+
+			{/* UI Typography */}
+			<section>
+				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
+					UI Typography
+				</h2>
+				<div className="space-y-24">
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-ui-button-large
+						</code>
+						<p className="typography-ui-button-large text-gray-900">
+							Large Button Text
+						</p>
+					</div>
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-ui-button-medium
+						</code>
+						<p className="typography-ui-button-medium text-gray-900">
+							Medium Button Text
+						</p>
+					</div>
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-ui-button-small
+						</code>
+						<p className="typography-ui-button-small text-gray-900">
+							Small Button Text
+						</p>
+					</div>
+					<div>
+						<code className="text-12 text-gray-500 block mb-8">
+							typography-ui-label
+						</code>
+						<p className="typography-ui-label text-gray-900">Form Label</p>
+					</div>
+				</div>
+			</section>
+		</div>
+	),
+};
+
+/**
+ * Responsive Typography demonstrates how typography scales across breakpoints.
+ * Resize the viewport to see the typography adapt.
+ */
+export const ResponsiveTypography: StoryObj = {
+	render: () => (
+		<div className="space-y-32 p-24">
+			<div className="bg-gray-100 p-16 rounded-8">
+				<p className="typography-body-small text-gray-700 mb-8">
+					Resize the viewport to see responsive typography in action
+				</p>
+				<p className="typography-caption text-gray-500">
+					Mobile (&lt;768px) | Tablet (768px-1440px) | Desktop (&gt;1440px)
+				</p>
+			</div>
+
+			<section>
+				<h3 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
+					Responsive Headings
+				</h3>
+				<div className="space-y-24">
+					<div className="border-l-4 border-indigo-500 pl-16">
+						<code className="text-12 text-gray-500 block mb-4">
+							typography-h1 (responsive)
+						</code>
+						<p className="typography-h1 text-gray-900">Responsive H1</p>
+						<p className="typography-caption text-gray-500 mt-4">
+							48px (sm) → 72px (md) → 96px (lg)
+						</p>
+					</div>
+					<div className="border-l-4 border-indigo-500 pl-16">
+						<code className="text-12 text-gray-500 block mb-4">
+							typography-h2 (responsive)
+						</code>
+						<p className="typography-h2 text-gray-900">Responsive H2</p>
+						<p className="typography-caption text-gray-500 mt-4">
+							48px (sm) → 64px (md) → 72px (lg)
+						</p>
+					</div>
+					<div className="border-l-4 border-indigo-500 pl-16">
+						<code className="text-12 text-gray-500 block mb-4">
+							typography-h3 (responsive)
+						</code>
+						<p className="typography-h3 text-gray-900">Responsive H3</p>
+						<p className="typography-caption text-gray-500 mt-4">
+							32px (sm) → 48px (md) → 64px (lg)
+						</p>
+					</div>
+				</div>
+			</section>
+
+			<section>
+				<h3 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
+					Breakpoint-Specific Utilities
+				</h3>
+				<div className="space-y-16">
+					<div className="grid grid-cols-1 md:grid-cols-3 gap-16">
+						<div className="bg-gray-50 p-16 rounded-8">
+							<code className="text-12 text-gray-500 block mb-8">
+								typography-h4-small
+							</code>
+							<p className="typography-h4-small text-gray-900">H4 Small</p>
+						</div>
+						<div className="bg-gray-50 p-16 rounded-8">
+							<code className="text-12 text-gray-500 block mb-8">
+								typography-h4-medium
+							</code>
+							<p className="typography-h4-medium text-gray-900">H4 Medium</p>
+						</div>
+						<div className="bg-gray-50 p-16 rounded-8">
+							<code className="text-12 text-gray-500 block mb-8">
+								typography-h4-large
+							</code>
+							<p className="typography-h4-large text-gray-900">H4 Large</p>
+						</div>
+					</div>
+				</div>
+			</section>
+		</div>
+	),
+};
+
+/**
+ * Typography specimen shows a sample page layout using the typography system.
+ */
+export const Specimen: StoryObj = {
+	render: () => (
+		<article className="max-w-800 mx-auto p-32">
+			<header className="mb-48">
+				<p className="typography-overline text-indigo-600 uppercase tracking-wide mb-8">
+					Design System
+				</p>
+				<h1 className="typography-h1 text-gray-900 mb-16">
+					Typography Specimen
+				</h1>
+				<p className="typography-body-large text-gray-700">
+					A demonstration of the typography system in a realistic content
+					layout, showing how different styles work together.
+				</p>
+			</header>
+
+			<section className="mb-48">
+				<h2 className="typography-h3 text-gray-900 mb-16">
+					The Foundation of Good Design
+				</h2>
+				<p className="typography-body-medium text-gray-800 mb-16">
+					Typography is the art and technique of arranging type to make written
+					language legible, readable, and appealing when displayed. The
+					arrangement of type involves selecting typefaces, point sizes, line
+					lengths, line-spacing, and letter-spacing.
+				</p>
+				<p className="typography-body-medium text-gray-800 mb-16">
+					The term typography is also applied to the style, arrangement, and
+					appearance of the letters, numbers, and symbols created by the
+					process. Type design is a closely related craft, sometimes considered
+					part of typography.
+				</p>
+			</section>
+
+			<section className="mb-48">
+				<h3 className="typography-h4 text-gray-900 mb-16">Key Principles</h3>
+				<p className="typography-body-medium text-gray-800 mb-16">
+					Most typefaces can be classified into one of four basic groups: those
+					with serifs, those without serifs, scripts and decorative styles.
+				</p>
+
+				<div className="bg-gray-50 p-24 rounded-8 mb-16">
+					<h4 className="typography-h5 text-gray-900 mb-8">
+						Hierarchy Matters
+					</h4>
+					<p className="typography-body-small text-gray-700">
+						Visual hierarchy guides readers through content by creating clear
+						distinctions between headings, body text, and supporting elements.
+					</p>
+				</div>
+
+				<p className="typography-body-medium text-gray-800">
+					Good typography requires attention to detail and an understanding of
+					how type creates meaning and emotion.
+				</p>
+			</section>
+
+			<footer className="border-t border-gray-200 pt-24">
+				<p className="typography-caption text-gray-500">
+					Typography specimen created for the NDS Design System
+				</p>
+			</footer>
+		</article>
+	),
+};
+
+/**
+ * Font comparison shows the different font families in the design system.
+ */
+export const FontFamilies: StoryObj = {
+	render: () => (
+		<div className="space-y-48 p-24">
+			<section>
+				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
+					Heading Font: Inter Tight
+				</h2>
+				<div className="space-y-16">
+					<p className="typography-h2 text-gray-900">
+						The quick brown fox jumps over the lazy dog
+					</p>
+					<p className="typography-h4 text-gray-800">
+						ABCDEFGHIJKLMNOPQRSTUVWXYZ
+					</p>
+					<p className="typography-h4 text-gray-700">
+						abcdefghijklmnopqrstuvwxyz
+					</p>
+					<p className="typography-h4 text-gray-600">0123456789</p>
+				</div>
+			</section>
+
+			<section>
+				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
+					Body Font: Inter
+				</h2>
+				<div className="space-y-16">
+					<p className="typography-body-large text-gray-900">
+						The quick brown fox jumps over the lazy dog
+					</p>
+					<p className="typography-body-medium text-gray-800">
+						ABCDEFGHIJKLMNOPQRSTUVWXYZ
+					</p>
+					<p className="typography-body-medium text-gray-700">
+						abcdefghijklmnopqrstuvwxyz
+					</p>
+					<p className="typography-body-medium text-gray-600">0123456789</p>
+				</div>
+			</section>
+
+			<section>
+				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
+					Font Weights
+				</h2>
+				<div className="grid grid-cols-2 gap-24">
+					<div>
+						<p className="typography-caption text-gray-500 mb-4">
+							Regular (400)
+						</p>
+						<p className="typography-body-medium font-normal text-gray-900">
+							The quick brown fox
+						</p>
+					</div>
+					<div>
+						<p className="typography-caption text-gray-500 mb-4">
+							Medium (500)
+						</p>
+						<p className="typography-body-medium font-medium text-gray-900">
+							The quick brown fox
+						</p>
+					</div>
+					<div>
+						<p className="typography-caption text-gray-500 mb-4">
+							Semibold (600)
+						</p>
+						<p className="typography-body-medium font-semibold text-gray-900">
+							The quick brown fox
+						</p>
+					</div>
+					<div>
+						<p className="typography-caption text-gray-500 mb-4">Bold (700)</p>
+						<p className="typography-body-medium font-bold text-gray-900">
+							The quick brown fox
+						</p>
+					</div>
+				</div>
+			</section>
+		</div>
+	),
+};

package/src/components/organisms/card/card.stories.tsx

@@ -34,7 +34,7 @@ export const Default: Story = {
 				<CardContent>
 					<CardBody>
 						<CardEyebrow>Optional Eyebrow</CardEyebrow>
-						<div className="flex flex-col gap-[6px]">
+						<div className="flex flex-col gap-6">
 							<CardTitle>Card Title</CardTitle>
 							<CardDescription>
 								Use cards when citizens need to scan items at a glance, either
@@ -43,10 +43,10 @@ export const Default: Story = {
 						</div>
 					</CardBody>
 					<CardActions>
-						<Button size="default" variant="charcoal">
+						<Button size="md" variant="primary">
 							Primary
 						</Button>
-						<Button size="default" variant="charcoalOutline">
+						<Button size="md" variant="primary-outline">
 							Secondary
 						</Button>
 					</CardActions>
@@ -68,7 +68,7 @@ export const Vertical: Story = {
 				<CardContent>
 					<CardBody>
 						<CardEyebrow>Optional Eyebrow</CardEyebrow>
-						<div className="flex flex-col gap-[6px]">
+						<div className="flex flex-col gap-6">
 							<CardTitle>Card Title</CardTitle>
 							<CardDescription>
 								Use cards when citizens need to scan items at a glance, either
@@ -77,10 +77,10 @@ export const Vertical: Story = {
 						</div>
 					</CardBody>
 					<CardActions>
-						<Button size="default" variant="charcoal">
+						<Button size="md" variant="primary">
 							Primary
 						</Button>
-						<Button size="default" variant="charcoalOutline">
+						<Button size="md" variant="primary-outline">
 							Secondary
 						</Button>
 					</CardActions>
@@ -98,7 +98,7 @@ export const Horizontal: Story = {
 				<CardContent>
 					<CardBody>
 						<CardEyebrow>Eyebrow</CardEyebrow>
-						<div className="flex flex-col gap-[9px]">
+						<div className="flex flex-col gap-8">
 							<CardTitle>
 								Cards can support multi line headings easily.
 							</CardTitle>
@@ -109,10 +109,10 @@ export const Horizontal: Story = {
 						</div>
 					</CardBody>
 					<CardActions>
-						<Button size="sm" variant="charcoal">
+						<Button size="sm" variant="primary">
 							Primary
 						</Button>
-						<Button size="sm" variant="charcoalOutline">
+						<Button size="sm" variant="primary-outline">
 							Secondary
 						</Button>
 					</CardActions>
@@ -133,7 +133,7 @@ export const WithoutImage: Story = {
 				<CardContent>
 					<CardBody>
 						<CardEyebrow>Category</CardEyebrow>
-						<div className="flex flex-col gap-[6px]">
+						<div className="flex flex-col gap-6">
 							<CardTitle>Card Without Image</CardTitle>
 							<CardDescription>
 								Cards can be used without images for text-focused content.
@@ -141,7 +141,7 @@ export const WithoutImage: Story = {
 						</div>
 					</CardBody>
 					<CardActions>
-						<Button size="default" variant="charcoal">
+						<Button size="md" variant="primary">
 							Learn More
 						</Button>
 					</CardActions>
@@ -158,7 +158,7 @@ export const WithoutEyebrow: Story = {
 				<CardImage />
 				<CardContent>
 					<CardBody>
-						<div className="flex flex-col gap-[6px]">
+						<div className="flex flex-col gap-6">
 							<CardTitle>Card Title</CardTitle>
 							<CardDescription>
 								The eyebrow is optional and can be omitted when not needed.
@@ -166,7 +166,7 @@ export const WithoutEyebrow: Story = {
 						</div>
 					</CardBody>
 					<CardActions>
-						<Button size="default" variant="charcoal">
+						<Button size="md" variant="primary">
 							Primary
 						</Button>
 					</CardActions>
@@ -184,7 +184,7 @@ export const WithoutActions: Story = {
 				<CardContent>
 					<CardBody>
 						<CardEyebrow>Information</CardEyebrow>
-						<div className="flex flex-col gap-[6px]">
+						<div className="flex flex-col gap-6">
 							<CardTitle>Informational Card</CardTitle>
 							<CardDescription>
 								Cards without actions can be used for purely informational
@@ -228,7 +228,7 @@ export const CardGrid: Story = {
 					<CardContent>
 						<CardBody>
 							<CardEyebrow>Category {i}</CardEyebrow>
-							<div className="flex flex-col gap-[6px]">
+							<div className="flex flex-col gap-6">
 								<CardTitle>Card Title {i}</CardTitle>
 								<CardDescription>
 									Brief description of the card content goes here.
@@ -236,7 +236,7 @@ export const CardGrid: Story = {
 							</div>
 						</CardBody>
 						<CardActions>
-							<Button size="sm" variant="charcoal">
+							<Button size="sm" variant="primary">
 								Action
 							</Button>
 						</CardActions>
@@ -262,7 +262,7 @@ export const Playground: Story = {
 				<CardContent>
 					<CardBody>
 						<CardEyebrow>Eyebrow</CardEyebrow>
-						<div className="flex flex-col gap-[6px]">
+						<div className="flex flex-col gap-6">
 							<CardTitle>Card Title</CardTitle>
 							<CardDescription>
 								Use cards when citizens need to scan items at a glance.
@@ -270,10 +270,10 @@ export const Playground: Story = {
 						</div>
 					</CardBody>
 					<CardActions>
-						<Button size="default" variant="charcoal">
+						<Button size="md" variant="primary">
 							Primary
 						</Button>
-						<Button size="default" variant="charcoalOutline">
+						<Button size="md" variant="primary-outline">
 							Secondary
 						</Button>
 					</CardActions>

package/src/components/organisms/card/card.test.tsx

@@ -94,7 +94,7 @@ describe("Card", () => {
 						</CardBody>
 						<CardActions>
 							<Button>Primary Action</Button>
-							<Button variant="charcoalOutline">Secondary Action</Button>
+							<Button variant="outline">Secondary Action</Button>
 						</CardActions>
 					</CardContent>
 				</Card>,

package/src/components/organisms/card/card.tsx

@@ -142,7 +142,7 @@ const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
 CardContent.displayName = "CardContent";
 
 const cardEyebrowVariants = tv({
-	base: "typography-caption-large text-text-muted",
+	base: "typography-overline text-text-muted uppercase tracking-wider",
 });
 
 export interface CardEyebrowProps
@@ -165,7 +165,7 @@ const CardEyebrow = React.forwardRef<HTMLParagraphElement, CardEyebrowProps>(
 CardEyebrow.displayName = "CardEyebrow";
 
 const cardTitleVariants = tv({
-	base: "typography-subheading-small text-text-primary",
+	base: "typography-h5 text-text-primary",
 });
 
 export interface CardTitleProps
@@ -240,7 +240,7 @@ const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>(
 CardBody.displayName = "CardBody";
 
 const cardActionsVariants = tv({
-	base: "flex gap-spacing-12",
+	base: "flex gap-12",
 });
 
 export interface CardActionsProps