@nationaldesignstudio/react 0.5.2 → 0.5.4

package/src/stories/token-showcase.tsx

@@ -1,777 +0,0 @@
-import type * as React from "react";
-
-// =============================================================================
-// Color Tokens
-// =============================================================================
-
-type ColorScale = {
-	name: string;
-	prefix: string;
-	shades: (string | number)[];
-	vibrant?: (string | number)[];
-};
-
-const neutralScales: ColorScale[] = [
-	{
-		name: "Gray",
-		prefix: "gray",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
-	},
-	{
-		name: "Brown",
-		prefix: "brown",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
-	},
-	{
-		name: "Steel",
-		prefix: "steel",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
-	},
-];
-
-const colorScales: ColorScale[] = [
-	{
-		name: "Red",
-		prefix: "red",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Pink",
-		prefix: "pink",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Purple",
-		prefix: "purple",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Iris",
-		prefix: "iris",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Indigo",
-		prefix: "indigo",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Blue",
-		prefix: "blue",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Ice",
-		prefix: "ice",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Cyan",
-		prefix: "cyan",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Teal",
-		prefix: "teal",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Green",
-		prefix: "green",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Sage",
-		prefix: "sage",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Lime",
-		prefix: "lime",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Yellow",
-		prefix: "yellow",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Amber",
-		prefix: "amber",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Orange",
-		prefix: "orange",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-	{
-		name: "Ember",
-		prefix: "ember",
-		shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-		vibrant: ["v100", "v200", "v300", "v400"],
-	},
-];
-
-// Tailwind needs static class names - generate lookup maps
-const bgClasses: Record<string, string> = {
-	// Neutrals
-	"gray-50": "bg-gray-50",
-	"gray-100": "bg-gray-100",
-	"gray-200": "bg-gray-200",
-	"gray-300": "bg-gray-300",
-	"gray-400": "bg-gray-400",
-	"gray-500": "bg-gray-500",
-	"gray-600": "bg-gray-600",
-	"gray-700": "bg-gray-700",
-	"gray-800": "bg-gray-800",
-	"gray-900": "bg-gray-900",
-	"gray-1000": "bg-gray-1000",
-	"gray-1100": "bg-gray-1100",
-	"gray-1200": "bg-gray-1200",
-	"brown-50": "bg-brown-50",
-	"brown-100": "bg-brown-100",
-	"brown-200": "bg-brown-200",
-	"brown-300": "bg-brown-300",
-	"brown-400": "bg-brown-400",
-	"brown-500": "bg-brown-500",
-	"brown-600": "bg-brown-600",
-	"brown-700": "bg-brown-700",
-	"brown-800": "bg-brown-800",
-	"brown-900": "bg-brown-900",
-	"brown-1000": "bg-brown-1000",
-	"brown-1100": "bg-brown-1100",
-	"brown-1200": "bg-brown-1200",
-	"steel-50": "bg-steel-50",
-	"steel-100": "bg-steel-100",
-	"steel-200": "bg-steel-200",
-	"steel-300": "bg-steel-300",
-	"steel-400": "bg-steel-400",
-	"steel-500": "bg-steel-500",
-	"steel-600": "bg-steel-600",
-	"steel-700": "bg-steel-700",
-	"steel-800": "bg-steel-800",
-	"steel-900": "bg-steel-900",
-	"steel-1000": "bg-steel-1000",
-	"steel-1100": "bg-steel-1100",
-	"steel-1200": "bg-steel-1200",
-	// Colors
-	"red-50": "bg-red-50",
-	"red-100": "bg-red-100",
-	"red-200": "bg-red-200",
-	"red-300": "bg-red-300",
-	"red-400": "bg-red-400",
-	"red-500": "bg-red-500",
-	"red-600": "bg-red-600",
-	"red-700": "bg-red-700",
-	"red-800": "bg-red-800",
-	"red-900": "bg-red-900",
-	"red-v100": "bg-red-v100",
-	"red-v200": "bg-red-v200",
-	"red-v300": "bg-red-v300",
-	"red-v400": "bg-red-v400",
-	"pink-50": "bg-pink-50",
-	"pink-100": "bg-pink-100",
-	"pink-200": "bg-pink-200",
-	"pink-300": "bg-pink-300",
-	"pink-400": "bg-pink-400",
-	"pink-500": "bg-pink-500",
-	"pink-600": "bg-pink-600",
-	"pink-700": "bg-pink-700",
-	"pink-800": "bg-pink-800",
-	"pink-900": "bg-pink-900",
-	"pink-v100": "bg-pink-v100",
-	"pink-v200": "bg-pink-v200",
-	"pink-v300": "bg-pink-v300",
-	"pink-v400": "bg-pink-v400",
-	"purple-50": "bg-purple-50",
-	"purple-100": "bg-purple-100",
-	"purple-200": "bg-purple-200",
-	"purple-300": "bg-purple-300",
-	"purple-400": "bg-purple-400",
-	"purple-500": "bg-purple-500",
-	"purple-600": "bg-purple-600",
-	"purple-700": "bg-purple-700",
-	"purple-800": "bg-purple-800",
-	"purple-900": "bg-purple-900",
-	"purple-v100": "bg-purple-v100",
-	"purple-v200": "bg-purple-v200",
-	"purple-v300": "bg-purple-v300",
-	"purple-v400": "bg-purple-v400",
-	"iris-50": "bg-iris-50",
-	"iris-100": "bg-iris-100",
-	"iris-200": "bg-iris-200",
-	"iris-300": "bg-iris-300",
-	"iris-400": "bg-iris-400",
-	"iris-500": "bg-iris-500",
-	"iris-600": "bg-iris-600",
-	"iris-700": "bg-iris-700",
-	"iris-800": "bg-iris-800",
-	"iris-900": "bg-iris-900",
-	"iris-v100": "bg-iris-v100",
-	"iris-v200": "bg-iris-v200",
-	"iris-v300": "bg-iris-v300",
-	"iris-v400": "bg-iris-v400",
-	"indigo-50": "bg-indigo-50",
-	"indigo-100": "bg-indigo-100",
-	"indigo-200": "bg-indigo-200",
-	"indigo-300": "bg-indigo-300",
-	"indigo-400": "bg-indigo-400",
-	"indigo-500": "bg-indigo-500",
-	"indigo-600": "bg-indigo-600",
-	"indigo-700": "bg-indigo-700",
-	"indigo-800": "bg-indigo-800",
-	"indigo-900": "bg-indigo-900",
-	"indigo-v100": "bg-indigo-v100",
-	"indigo-v200": "bg-indigo-v200",
-	"indigo-v300": "bg-indigo-v300",
-	"indigo-v400": "bg-indigo-v400",
-	"blue-50": "bg-blue-50",
-	"blue-100": "bg-blue-100",
-	"blue-200": "bg-blue-200",
-	"blue-300": "bg-blue-300",
-	"blue-400": "bg-blue-400",
-	"blue-500": "bg-blue-500",
-	"blue-600": "bg-blue-600",
-	"blue-700": "bg-blue-700",
-	"blue-800": "bg-blue-800",
-	"blue-900": "bg-blue-900",
-	"blue-v100": "bg-blue-v100",
-	"blue-v200": "bg-blue-v200",
-	"blue-v300": "bg-blue-v300",
-	"blue-v400": "bg-blue-v400",
-	"ice-50": "bg-ice-50",
-	"ice-100": "bg-ice-100",
-	"ice-200": "bg-ice-200",
-	"ice-300": "bg-ice-300",
-	"ice-400": "bg-ice-400",
-	"ice-500": "bg-ice-500",
-	"ice-600": "bg-ice-600",
-	"ice-700": "bg-ice-700",
-	"ice-800": "bg-ice-800",
-	"ice-900": "bg-ice-900",
-	"ice-v100": "bg-ice-v100",
-	"ice-v200": "bg-ice-v200",
-	"ice-v300": "bg-ice-v300",
-	"ice-v400": "bg-ice-v400",
-	"cyan-50": "bg-cyan-50",
-	"cyan-100": "bg-cyan-100",
-	"cyan-200": "bg-cyan-200",
-	"cyan-300": "bg-cyan-300",
-	"cyan-400": "bg-cyan-400",
-	"cyan-500": "bg-cyan-500",
-	"cyan-600": "bg-cyan-600",
-	"cyan-700": "bg-cyan-700",
-	"cyan-800": "bg-cyan-800",
-	"cyan-900": "bg-cyan-900",
-	"cyan-v100": "bg-cyan-v100",
-	"cyan-v200": "bg-cyan-v200",
-	"cyan-v300": "bg-cyan-v300",
-	"cyan-v400": "bg-cyan-v400",
-	"teal-50": "bg-teal-50",
-	"teal-100": "bg-teal-100",
-	"teal-200": "bg-teal-200",
-	"teal-300": "bg-teal-300",
-	"teal-400": "bg-teal-400",
-	"teal-500": "bg-teal-500",
-	"teal-600": "bg-teal-600",
-	"teal-700": "bg-teal-700",
-	"teal-800": "bg-teal-800",
-	"teal-900": "bg-teal-900",
-	"teal-v100": "bg-teal-v100",
-	"teal-v200": "bg-teal-v200",
-	"teal-v300": "bg-teal-v300",
-	"teal-v400": "bg-teal-v400",
-	"green-50": "bg-green-50",
-	"green-100": "bg-green-100",
-	"green-200": "bg-green-200",
-	"green-300": "bg-green-300",
-	"green-400": "bg-green-400",
-	"green-500": "bg-green-500",
-	"green-600": "bg-green-600",
-	"green-700": "bg-green-700",
-	"green-800": "bg-green-800",
-	"green-900": "bg-green-900",
-	"green-v100": "bg-green-v100",
-	"green-v200": "bg-green-v200",
-	"green-v300": "bg-green-v300",
-	"green-v400": "bg-green-v400",
-	"sage-50": "bg-sage-50",
-	"sage-100": "bg-sage-100",
-	"sage-200": "bg-sage-200",
-	"sage-300": "bg-sage-300",
-	"sage-400": "bg-sage-400",
-	"sage-500": "bg-sage-500",
-	"sage-600": "bg-sage-600",
-	"sage-700": "bg-sage-700",
-	"sage-800": "bg-sage-800",
-	"sage-900": "bg-sage-900",
-	"sage-v100": "bg-sage-v100",
-	"sage-v200": "bg-sage-v200",
-	"sage-v300": "bg-sage-v300",
-	"sage-v400": "bg-sage-v400",
-	"lime-50": "bg-lime-50",
-	"lime-100": "bg-lime-100",
-	"lime-200": "bg-lime-200",
-	"lime-300": "bg-lime-300",
-	"lime-400": "bg-lime-400",
-	"lime-500": "bg-lime-500",
-	"lime-600": "bg-lime-600",
-	"lime-700": "bg-lime-700",
-	"lime-800": "bg-lime-800",
-	"lime-900": "bg-lime-900",
-	"lime-v100": "bg-lime-v100",
-	"lime-v200": "bg-lime-v200",
-	"lime-v300": "bg-lime-v300",
-	"lime-v400": "bg-lime-v400",
-	"yellow-50": "bg-yellow-50",
-	"yellow-100": "bg-yellow-100",
-	"yellow-200": "bg-yellow-200",
-	"yellow-300": "bg-yellow-300",
-	"yellow-400": "bg-yellow-400",
-	"yellow-500": "bg-yellow-500",
-	"yellow-600": "bg-yellow-600",
-	"yellow-700": "bg-yellow-700",
-	"yellow-800": "bg-yellow-800",
-	"yellow-900": "bg-yellow-900",
-	"yellow-v100": "bg-yellow-v100",
-	"yellow-v200": "bg-yellow-v200",
-	"yellow-v300": "bg-yellow-v300",
-	"yellow-v400": "bg-yellow-v400",
-	"amber-50": "bg-amber-50",
-	"amber-100": "bg-amber-100",
-	"amber-200": "bg-amber-200",
-	"amber-300": "bg-amber-300",
-	"amber-400": "bg-amber-400",
-	"amber-500": "bg-amber-500",
-	"amber-600": "bg-amber-600",
-	"amber-700": "bg-amber-700",
-	"amber-800": "bg-amber-800",
-	"amber-900": "bg-amber-900",
-	"amber-v100": "bg-amber-v100",
-	"amber-v200": "bg-amber-v200",
-	"amber-v300": "bg-amber-v300",
-	"amber-v400": "bg-amber-v400",
-	"orange-50": "bg-orange-50",
-	"orange-100": "bg-orange-100",
-	"orange-200": "bg-orange-200",
-	"orange-300": "bg-orange-300",
-	"orange-400": "bg-orange-400",
-	"orange-500": "bg-orange-500",
-	"orange-600": "bg-orange-600",
-	"orange-700": "bg-orange-700",
-	"orange-800": "bg-orange-800",
-	"orange-900": "bg-orange-900",
-	"orange-v100": "bg-orange-v100",
-	"orange-v200": "bg-orange-v200",
-	"orange-v300": "bg-orange-v300",
-	"orange-v400": "bg-orange-v400",
-	"ember-50": "bg-ember-50",
-	"ember-100": "bg-ember-100",
-	"ember-200": "bg-ember-200",
-	"ember-300": "bg-ember-300",
-	"ember-400": "bg-ember-400",
-	"ember-500": "bg-ember-500",
-	"ember-600": "bg-ember-600",
-	"ember-700": "bg-ember-700",
-	"ember-800": "bg-ember-800",
-	"ember-900": "bg-ember-900",
-	"ember-v100": "bg-ember-v100",
-	"ember-v200": "bg-ember-v200",
-	"ember-v300": "bg-ember-v300",
-	"ember-v400": "bg-ember-v400",
-	// Alpha
-	"alpha-black-5": "bg-alpha-black-5",
-	"alpha-black-10": "bg-alpha-black-10",
-	"alpha-black-20": "bg-alpha-black-20",
-	"alpha-black-30": "bg-alpha-black-30",
-	"alpha-black-40": "bg-alpha-black-40",
-	"alpha-black-50": "bg-alpha-black-50",
-	"alpha-black-60": "bg-alpha-black-60",
-	"alpha-black-70": "bg-alpha-black-70",
-	"alpha-black-80": "bg-alpha-black-80",
-	"alpha-black-90": "bg-alpha-black-90",
-	"alpha-black-95": "bg-alpha-black-95",
-	"alpha-white-5": "bg-alpha-white-5",
-	"alpha-white-10": "bg-alpha-white-10",
-	"alpha-white-20": "bg-alpha-white-20",
-	"alpha-white-30": "bg-alpha-white-30",
-	"alpha-white-40": "bg-alpha-white-40",
-	"alpha-white-50": "bg-alpha-white-50",
-	"alpha-white-60": "bg-alpha-white-60",
-	"alpha-white-70": "bg-alpha-white-70",
-	"alpha-white-80": "bg-alpha-white-80",
-	"alpha-white-90": "bg-alpha-white-90",
-	"alpha-white-95": "bg-alpha-white-95",
-};
-
-const ColorScaleRow: React.FC<{ scale: ColorScale; showVibrant?: boolean }> = ({
-	scale,
-	showVibrant = true,
-}) => {
-	const allShades =
-		showVibrant && scale.vibrant
-			? [...scale.shades, ...scale.vibrant]
-			: scale.shades;
-	return (
-		<div className="grid grid-cols-[72px_1fr] gap-16 items-center">
-			<span className="text-14 font-medium text-gray-700">{scale.name}</span>
-			<div className="grid grid-flow-col auto-cols-fr gap-2">
-				{allShades.map((shade) => {
-					const key = `${scale.prefix}-${shade}`;
-					return (
-						<div
-							key={key}
-							className={`h-32 rounded-4 ${bgClasses[key] || ""}`}
-							title={`${scale.prefix}-${shade}`}
-						/>
-					);
-				})}
-			</div>
-		</div>
-	);
-};
-
-export const ColorTokens: React.FC = () => (
-	<div className="space-y-48">
-		{/* Neutrals */}
-		<section>
-			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
-				Neutrals
-			</h3>
-			<div className="bg-white rounded-8 border border-gray-200 p-24 space-y-12">
-				{neutralScales.map((scale) => (
-					<ColorScaleRow key={scale.prefix} scale={scale} showVibrant={false} />
-				))}
-			</div>
-		</section>
-
-		{/* Chromatic Colors */}
-		<section>
-			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
-				Colors
-			</h3>
-			<div className="bg-white rounded-8 border border-gray-200 p-24 space-y-12">
-				{colorScales.map((scale) => (
-					<ColorScaleRow key={scale.prefix} scale={scale} />
-				))}
-			</div>
-		</section>
-
-		{/* Alpha Colors */}
-		<section>
-			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
-				Alpha
-			</h3>
-			<div className="grid grid-cols-2 gap-24">
-				<div className="bg-white rounded-8 border border-gray-200 p-24">
-					<div className="text-12 font-medium text-gray-600 mb-16">
-						Black (on light)
-					</div>
-					<div className="grid grid-flow-col auto-cols-fr gap-2 bg-gray-100 p-16 rounded-8">
-						{[5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95].map((alpha) => (
-							<div
-								key={`alpha-black-${alpha}`}
-								className={`h-32 rounded-4 ${bgClasses[`alpha-black-${alpha}`] || ""}`}
-								title={`alpha-black-${alpha}`}
-							/>
-						))}
-					</div>
-				</div>
-				<div className="bg-white rounded-8 border border-gray-200 p-24">
-					<div className="text-12 font-medium text-gray-600 mb-16">
-						White (on dark)
-					</div>
-					<div className="grid grid-flow-col auto-cols-fr gap-2 bg-gray-900 p-16 rounded-8">
-						{[5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95].map((alpha) => (
-							<div
-								key={`alpha-white-${alpha}`}
-								className={`h-32 rounded-4 ${bgClasses[`alpha-white-${alpha}`] || ""}`}
-								title={`alpha-white-${alpha}`}
-							/>
-						))}
-					</div>
-				</div>
-			</div>
-		</section>
-	</div>
-);
-
-// =============================================================================
-// Spacing Tokens
-// =============================================================================
-
-const spacingScale = [
-	2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96, 112,
-	128, 144, 160, 176, 192, 208, 224, 240, 256, 288, 320, 352, 384, 400,
-];
-
-const widthClasses: Record<number, string> = {
-	2: "w-2",
-	4: "w-4",
-	6: "w-6",
-	8: "w-8",
-	10: "w-10",
-	12: "w-12",
-	16: "w-16",
-	20: "w-20",
-	24: "w-24",
-	28: "w-28",
-	32: "w-32",
-	36: "w-36",
-	40: "w-40",
-	48: "w-48",
-	56: "w-56",
-	64: "w-64",
-	72: "w-72",
-	80: "w-80",
-	96: "w-96",
-	112: "w-112",
-	128: "w-128",
-	144: "w-144",
-	160: "w-160",
-	176: "w-176",
-	192: "w-192",
-	208: "w-208",
-	224: "w-224",
-	240: "w-240",
-	256: "w-256",
-	288: "w-288",
-	320: "w-320",
-	352: "w-352",
-	384: "w-384",
-	400: "w-400",
-};
-
-export const SpacingTokens: React.FC = () => (
-	<div className="bg-white rounded-8 border border-gray-200 overflow-hidden">
-		<div className="grid grid-cols-[64px_1fr_100px] gap-16 px-24 py-12 bg-gray-50 border-b border-gray-200 text-12 font-medium text-gray-500 uppercase">
-			<div>Value</div>
-			<div>Preview</div>
-			<div>Token</div>
-		</div>
-		<div className="divide-y divide-gray-100">
-			{spacingScale.map((size) => (
-				<div
-					key={size}
-					className="grid grid-cols-[64px_1fr_100px] gap-16 px-24 py-8 items-center"
-				>
-					<div className="text-14 font-mono text-gray-600">{size}px</div>
-					<div className="flex items-center">
-						<div
-							className={`h-12 bg-indigo-500 rounded-2 ${widthClasses[size]} max-w-full`}
-						/>
-					</div>
-					<div className="text-12 font-mono text-gray-400">spacing-{size}</div>
-				</div>
-			))}
-		</div>
-	</div>
-);
-
-// =============================================================================
-// Typography Tokens
-// =============================================================================
-
-type TypographyToken = {
-	name: string;
-	class: string;
-	sizes: string;
-};
-
-const headingTokens: TypographyToken[] = [
-	{
-		name: "Display",
-		class: "typography-h1-display",
-		sizes: "64px → 96px → 128px",
-	},
-	{ name: "H1", class: "typography-h1", sizes: "48px → 72px → 96px" },
-	{ name: "H2", class: "typography-h2", sizes: "48px → 64px → 72px" },
-	{ name: "H3", class: "typography-h3", sizes: "32px → 48px → 64px" },
-	{ name: "H4", class: "typography-h4", sizes: "24px → 32px → 48px" },
-	{ name: "H5", class: "typography-h5", sizes: "21px → 24px → 32px" },
-];
-
-const bodyTokens: TypographyToken[] = [
-	{
-		name: "Body Large",
-		class: "typography-body-large",
-		sizes: "16px → 18px → 21px",
-	},
-	{
-		name: "Body Medium",
-		class: "typography-body-medium",
-		sizes: "14px → 16px → 18px",
-	},
-	{
-		name: "Body Small",
-		class: "typography-body-small",
-		sizes: "12px → 14px → 14px",
-	},
-];
-
-const uiTokens: TypographyToken[] = [
-	{ name: "Overline", class: "typography-overline", sizes: "14px" },
-	{ name: "Caption", class: "typography-caption", sizes: "11px" },
-	{ name: "Button Large", class: "typography-ui-button-large", sizes: "18px" },
-	{
-		name: "Button Medium",
-		class: "typography-ui-button-medium",
-		sizes: "16px",
-	},
-	{ name: "Button Small", class: "typography-ui-button-small", sizes: "14px" },
-	{ name: "Label", class: "typography-ui-label", sizes: "14px" },
-];
-
-const TypographyRow: React.FC<{ token: TypographyToken; sample?: string }> = ({
-	token,
-	sample,
-}) => {
-	const isHeading = token.class.includes("h1") || token.class.includes("h2");
-	const text = sample || (isHeading ? "Aa" : "The quick brown fox");
-
-	return (
-		<div className="py-12 border-b border-gray-100 last:border-0">
-			<div className="flex items-baseline justify-between gap-16 mb-4">
-				<code className="text-12 font-mono text-indigo-600 bg-indigo-50 px-8 py-2 rounded-4">
-					{token.class}
-				</code>
-				<span className="text-12 text-gray-400">{token.sizes}</span>
-			</div>
-			<p className={token.class}>{text}</p>
-		</div>
-	);
-};
-
-export const TypographyTokens: React.FC = () => (
-	<div className="space-y-32">
-		<section>
-			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
-				Headings (Responsive)
-			</h3>
-			<div className="bg-white rounded-8 border border-gray-200 p-24">
-				{headingTokens.map((token) => (
-					<TypographyRow key={token.class} token={token} />
-				))}
-			</div>
-		</section>
-
-		<section>
-			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
-				Body (Responsive)
-			</h3>
-			<div className="bg-white rounded-8 border border-gray-200 p-24">
-				{bodyTokens.map((token) => (
-					<TypographyRow key={token.class} token={token} />
-				))}
-			</div>
-		</section>
-
-		<section>
-			<h3 className="text-12 font-semibold text-gray-500 uppercase tracking-wider mb-16">
-				UI Elements
-			</h3>
-			<div className="bg-white rounded-8 border border-gray-200 p-24">
-				{uiTokens.map((token) => (
-					<TypographyRow key={token.class} token={token} />
-				))}
-			</div>
-		</section>
-	</div>
-);
-
-// =============================================================================
-// Responsive Typography Demo
-// =============================================================================
-
-export const ResponsiveTypography: React.FC = () => (
-	<div className="space-y-32">
-		<div className="bg-indigo-50 border border-indigo-100 rounded-8 p-16">
-			<p className="text-14 text-indigo-700">
-				<strong>Responsive Typography</strong> — Resize viewport to see
-				typography scale. Mobile (&lt;768px) → Tablet → Desktop (&gt;1440px)
-			</p>
-		</div>
-
-		<section className="space-y-16">
-			<div className="border-l-4 border-indigo-500 pl-16">
-				<code className="text-12 font-mono text-gray-500">
-					typography-h1-display
-				</code>
-				<h1 className="typography-h1-display">Display</h1>
-			</div>
-			<div className="border-l-4 border-indigo-400 pl-16">
-				<code className="text-12 font-mono text-gray-500">typography-h1</code>
-				<h1 className="typography-h1">Heading 1</h1>
-			</div>
-			<div className="border-l-4 border-indigo-300 pl-16">
-				<code className="text-12 font-mono text-gray-500">typography-h2</code>
-				<h2 className="typography-h2">Heading 2</h2>
-			</div>
-			<div className="border-l-4 border-indigo-200 pl-16">
-				<code className="text-12 font-mono text-gray-500">typography-h3</code>
-				<h3 className="typography-h3">Heading 3</h3>
-			</div>
-		</section>
-
-		<section className="bg-gray-50 rounded-8 p-16 space-y-12">
-			<div>
-				<code className="text-12 font-mono text-gray-500">
-					typography-body-large
-				</code>
-				<p className="typography-body-large">
-					Large body text scales from 16px to 21px.
-				</p>
-			</div>
-			<div>
-				<code className="text-12 font-mono text-gray-500">
-					typography-body-medium
-				</code>
-				<p className="typography-body-medium">
-					Medium body text scales from 14px to 18px.
-				</p>
-			</div>
-			<div>
-				<code className="text-12 font-mono text-gray-500">
-					typography-body-small
-				</code>
-				<p className="typography-body-small">
-					Small body text scales from 12px to 14px.
-				</p>
-			</div>
-		</section>
-	</div>
-);
-
-// =============================================================================
-// Main Export
-// =============================================================================
-
-export const TokenShowcase: React.FC = () => (
-	<div className="p-32 bg-gray-50 min-h-screen">
-		<div className="max-w-6xl mx-auto">
-			<header className="mb-32">
-				<h1 className="text-24 font-bold text-gray-900">Design Tokens</h1>
-				<p className="text-gray-600">
-					Primitive color palette from the design system
-				</p>
-			</header>
-			<ColorTokens />
-		</div>
-	</div>
-);