@peace_node/core/examples/basic-usage.jsx

Core design system with Tailwind CSS tokens, typography, and semantic styling

// 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>
  );
}