@peace_node/core
Version:
Core design system with Tailwind CSS tokens, typography, and semantic styling
136 lines (126 loc) • 6.13 kB
JSX
// Example: Basic usage of @styledoc/design-system
export default function ExamplePage() {
return (
<div className="min-h-screen bg-background text-foreground">
{/* Typography Examples */}
<div className="container mx-auto px-4 py-8">
<h1 className="text-sans-4xl font-bold mb-6">Design System Example</h1>
{/* Semantic HTML - automatically styled */}
<section className="mb-8">
<h2>Semantic HTML (automatically styled)</h2>
<p>This paragraph is automatically styled with proper spacing and typography.</p>
<ul>
<li>List items have consistent styling</li>
<li>With proper spacing between items</li>
</ul>
<blockquote>
This blockquote is automatically styled with a left border and italic text.
</blockquote>
<code>Inline code is styled with a background and monospace font</code>
</section>
{/* Typography Tokens */}
<section className="mb-8">
<h2 className="text-sans-2xl font-semibold mb-4">Typography Tokens</h2>
<div className="space-y-2">
<p className="text-sans-xs">Extra small sans text</p>
<p className="text-sans-sm">Small sans text</p>
<p className="text-sans-base">Base sans text</p>
<p className="text-sans-lg">Large sans text</p>
<p className="text-sans-xl">Extra large sans text</p>
</div>
<div className="mt-4 space-y-2">
<p className="text-serif-base">Base serif text</p>
<p className="text-serif-lg">Large serif text</p>
<p className="text-mono-sm">Small monospace text</p>
<p className="text-mono-base">Base monospace text</p>
</div>
</section>
{/* Color Examples */}
<section className="mb-8">
<h2 className="text-sans-2xl font-semibold mb-4">Color Tokens</h2>
{/* Semantic Colors */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<div className="bg-primary text-primary-foreground p-4 rounded-lg">
<p className="text-sans-sm font-medium">Primary</p>
</div>
<div className="bg-secondary text-secondary-foreground p-4 rounded-lg">
<p className="text-sans-sm font-medium">Secondary</p>
</div>
<div className="bg-muted text-muted-foreground p-4 rounded-lg">
<p className="text-sans-sm font-medium">Muted</p>
</div>
<div className="bg-destructive text-destructive-foreground p-4 rounded-lg">
<p className="text-sans-sm font-medium">Destructive</p>
</div>
</div>
{/* Custom Color Palettes */}
<div className="grid grid-cols-5 gap-2 mb-4">
<div className="bg-dodger-100 text-dodger-900 p-2 rounded text-center">
<p className="text-sans-xs">Dodger 100</p>
</div>
<div className="bg-dodger-300 text-dodger-900 p-2 rounded text-center">
<p className="text-sans-xs">Dodger 300</p>
</div>
<div className="bg-dodger-500 text-white p-2 rounded text-center">
<p className="text-sans-xs">Dodger 500</p>
</div>
<div className="bg-dodger-700 text-white p-2 rounded text-center">
<p className="text-sans-xs">Dodger 700</p>
</div>
<div className="bg-dodger-900 text-white p-2 rounded text-center">
<p className="text-sans-xs">Dodger 900</p>
</div>
</div>
<div className="grid grid-cols-5 gap-2">
<div className="bg-hydrant-100 text-hydrant-900 p-2 rounded text-center">
<p className="text-sans-xs">Hydrant 100</p>
</div>
<div className="bg-hydrant-300 text-hydrant-900 p-2 rounded text-center">
<p className="text-sans-xs">Hydrant 300</p>
</div>
<div className="bg-hydrant-500 text-white p-2 rounded text-center">
<p className="text-sans-xs">Hydrant 500</p>
</div>
<div className="bg-hydrant-700 text-white p-2 rounded text-center">
<p className="text-sans-xs">Hydrant 700</p>
</div>
<div className="bg-hydrant-900 text-white p-2 rounded text-center">
<p className="text-sans-xs">Hydrant 900</p>
</div>
</div>
</section>
{/* Cards and Layout */}
<section className="mb-8">
<h2 className="text-sans-2xl font-semibold mb-4">Layout Components</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="bg-card text-card-foreground p-6 rounded-lg border">
<h3 className="text-sans-lg font-semibold mb-2">Card Example</h3>
<p className="text-sans-sm text-muted-foreground">
This card uses the semantic color tokens for consistent theming.
</p>
</div>
<div className="bg-popover text-popover-foreground p-6 rounded-lg border">
<h3 className="text-sans-lg font-semibold mb-2">Popover Style</h3>
<p className="text-sans-sm text-muted-foreground">
Another card variant using popover color tokens.
</p>
</div>
</div>
</section>
{/* Dark Mode Toggle Example */}
<section>
<h2 className="text-sans-2xl font-semibold mb-4">Dark Mode</h2>
<button
onClick={() => document.documentElement.classList.toggle('dark')}
className="bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sans-sm font-medium hover:opacity-90 transition-opacity"
>
Toggle Dark Mode
</button>
<p className="text-sans-sm text-muted-foreground mt-2">
Click the button above to toggle between light and dark themes.
</p>
</section>
</div>
</div>
);
}