@neynar/ui 0.1.1

package/src/components/ui/stories/colors.stories.tsx

@@ -0,0 +1,502 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Theme } from "../theme";
+import { ThemeToggle } from "../theme-toggle";
+
+/**
+ * The @neynar/ui color system uses semantic color tokens that automatically adapt between light and dark themes.
+ * All colors are based on CSS custom properties and use the OKLCH color space for better color consistency and accessibility.
+ * 
+ * This comprehensive reference shows all 35+ semantic color tokens with live examples, usage guidelines, and technical details.
+ */
+const meta = {
+  title: "Colors/Colors",
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: `
+The @neynar/ui color system uses semantic color tokens that automatically adapt between light and dark themes. All colors are based on CSS custom properties and use the OKLCH color space for better color consistency and accessibility.
+
+**Key Features:**
+- 🎨 Semantic color naming by purpose, not appearance
+- 🌓 Automatic light/dark mode adaptation
+- ♿ WCAG AA compliant contrast ratios
+- 🎯 Figma design system aligned
+- 🎪 35+ semantic color tokens
+- 🔄 Perfect theme synchronization
+
+**Architecture:**
+- Uses CSS custom properties with OKLCH color space
+- Single source of truth with cookie persistence
+- Event-driven theme synchronization
+- Framework-agnostic implementation
+
+**Usage:**
+Use the theme toggle to see how all colors automatically adapt between light and dark modes. Each color token has a corresponding foreground color for proper contrast.
+        `,
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Complete color palette showing all semantic color tokens with live theme switching.
+ * This is the definitive reference for all available colors in the design system.
+ */
+export const CompleteColorReference: Story = {
+  render: () => (
+    <div className="min-h-screen bg-background text-foreground">
+      <Theme />
+      
+      <div className="max-w-7xl mx-auto p-8 space-y-12">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-4xl font-bold mb-3">Color System</h1>
+            <p className="text-lg text-muted-foreground max-w-3xl">
+              Complete reference for all 35+ semantic color tokens. Toggle between light and dark themes to see automatic adaptation.
+            </p>
+          </div>
+          <ThemeToggle showLabel />
+        </div>
+
+        {/* Color Architecture */}
+        <section className="bg-card text-card-foreground border rounded-lg p-6">
+          <h2 className="text-2xl font-semibold mb-4">Color Architecture</h2>
+          <div className="grid gap-6 md:grid-cols-2">
+            <div>
+              <h3 className="font-medium mb-3">Design Principles</h3>
+              <ul className="text-sm space-y-2 text-muted-foreground">
+                <li>🎯 <strong>Semantic naming</strong> - Colors named by purpose, not appearance</li>
+                <li>🌓 <strong>Theme adaptation</strong> - Automatic light/dark mode variants</li>
+                <li>♿ <strong>Accessibility first</strong> - WCAG AA contrast ratios maintained</li>
+                <li>🎨 <strong>Figma aligned</strong> - Direct mapping to design tokens</li>
+              </ul>
+            </div>
+            <div>
+              <h3 className="font-medium mb-3">Technical Implementation</h3>
+              <ul className="text-sm space-y-2 text-muted-foreground">
+                <li>🔧 <strong>OKLCH color space</strong> - Better color consistency</li>
+                <li>🍪 <strong>Cookie persistence</strong> - Maintains theme across sessions</li>
+                <li>⚡ <strong>Event synchronization</strong> - Perfect cross-instance sync</li>
+                <li>🚀 <strong>Zero-config</strong> - Works without providers</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        {/* Background & Surface Colors */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Background & Surface Colors</h2>
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <div className="p-6 rounded-lg border bg-background min-h-[120px] flex flex-col justify-between">
+              <div>
+                <strong className="text-foreground">Background</strong>
+                <div className="text-xs text-muted-foreground mt-1">bg-background</div>
+              </div>
+              <p className="text-sm text-foreground mt-2">Primary page background</p>
+            </div>
+            <div className="p-6 rounded-lg border bg-card min-h-[120px] flex flex-col justify-between">
+              <div>
+                <strong className="text-card-foreground">Card</strong>
+                <div className="text-xs text-muted-foreground mt-1">bg-card</div>
+              </div>
+              <p className="text-sm text-card-foreground mt-2">Elevated containers</p>
+            </div>
+            <div className="p-6 rounded-lg border bg-popover min-h-[120px] flex flex-col justify-between">
+              <div>
+                <strong className="text-popover-foreground">Popover</strong>
+                <div className="text-xs text-muted-foreground mt-1">bg-popover</div>
+              </div>
+              <p className="text-sm text-popover-foreground mt-2">Overlay containers</p>
+            </div>
+            <div className="p-6 rounded-lg border bg-input min-h-[120px] flex flex-col justify-between">
+              <div>
+                <strong className="text-foreground">Input</strong>
+                <div className="text-xs text-muted-foreground mt-1">bg-input</div>
+              </div>
+              <p className="text-sm text-foreground mt-2">Form field backgrounds</p>
+            </div>
+          </div>
+        </section>
+
+        {/* Brand Colors */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Brand Colors</h2>
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <div className="p-6 rounded-lg bg-primary min-h-[140px] flex flex-col justify-between">
+              <div>
+                <strong className="text-primary-foreground">Primary</strong>
+                <div className="text-xs text-primary-foreground/80 mt-1">bg-primary</div>
+              </div>
+              <div className="mt-3">
+                <p className="text-sm text-primary-foreground/90 mb-2">Farcaster Purple</p>
+                <p className="text-xs text-primary-foreground/80">#7f62c6</p>
+              </div>
+            </div>
+            <div className="p-6 rounded-lg border bg-secondary min-h-[140px] flex flex-col justify-between">
+              <div>
+                <strong className="text-secondary-foreground">Secondary</strong>
+                <div className="text-xs text-muted-foreground mt-1">bg-secondary</div>
+              </div>
+              <p className="text-sm text-secondary-foreground mt-2">Secondary actions</p>
+            </div>
+            <div className="p-6 rounded-lg border bg-muted min-h-[140px] flex flex-col justify-between">
+              <div>
+                <strong className="text-foreground">Muted</strong>
+                <div className="text-xs text-muted-foreground mt-1">bg-muted</div>
+              </div>
+              <p className="text-sm text-muted-foreground mt-2">Subtle backgrounds</p>
+            </div>
+            <div className="p-6 rounded-lg border bg-accent min-h-[140px] flex flex-col justify-between">
+              <div>
+                <strong className="text-accent-foreground">Accent</strong>
+                <div className="text-xs text-muted-foreground mt-1">bg-accent</div>
+              </div>
+              <p className="text-sm text-accent-foreground mt-2">Subtle emphasis</p>
+            </div>
+          </div>
+        </section>
+
+        {/* State Colors */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">State & Feedback Colors</h2>
+          <div className="grid gap-4 md:grid-cols-3">
+            <div className="p-6 rounded-lg bg-destructive min-h-[140px] flex flex-col justify-between">
+              <div>
+                <strong className="text-destructive-foreground">Destructive</strong>
+                <div className="text-xs text-destructive-foreground/80 mt-1">bg-destructive</div>
+              </div>
+              <div className="mt-3">
+                <p className="text-sm text-destructive-foreground/90 mb-1">Error states</p>
+                <p className="text-xs text-destructive-foreground/80">Dangerous actions</p>
+              </div>
+            </div>
+            <div className="p-6 rounded-lg bg-success min-h-[140px] flex flex-col justify-between">
+              <div>
+                <strong className="text-success-foreground">Success</strong>
+                <div className="text-xs text-success-foreground/80 mt-1">bg-success</div>
+              </div>
+              <div className="mt-3">
+                <p className="text-sm text-success-foreground/90 mb-1">Success states</p>
+                <p className="text-xs text-success-foreground/80">Confirmations</p>
+              </div>
+            </div>
+            <div className="p-6 rounded-lg bg-warning min-h-[140px] flex flex-col justify-between">
+              <div>
+                <strong className="text-warning-foreground">Warning</strong>
+                <div className="text-xs text-warning-foreground/80 mt-1">bg-warning</div>
+              </div>
+              <div className="mt-3">
+                <p className="text-sm text-warning-foreground/90 mb-1">Warning states</p>
+                <p className="text-xs text-warning-foreground/80">Cautions</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Interactive Elements */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Interactive & Border Colors</h2>
+          <div className="grid gap-4 md:grid-cols-3">
+            <div className="p-6 rounded-lg border-4 border-border bg-card min-h-[120px] flex flex-col justify-between">
+              <div>
+                <strong className="text-card-foreground">Border</strong>
+                <div className="text-xs text-muted-foreground mt-1">border-border</div>
+              </div>
+              <p className="text-sm text-muted-foreground mt-2">Default borders</p>
+            </div>
+            <div className="p-6 rounded-lg ring-4 ring-ring bg-card min-h-[120px] flex flex-col justify-between">
+              <div>
+                <strong className="text-card-foreground">Ring</strong>
+                <div className="text-xs text-muted-foreground mt-1">ring-ring</div>
+              </div>
+              <p className="text-sm text-muted-foreground mt-2">Focus indicators</p>
+            </div>
+            <div className="p-6 rounded-lg border-2 border-dashed border-muted bg-muted/20 min-h-[120px] flex flex-col justify-between">
+              <div>
+                <strong className="text-foreground">Interactive Demo</strong>
+                <div className="text-xs text-muted-foreground mt-1">Various borders</div>
+              </div>
+              <p className="text-sm text-muted-foreground mt-2">Hover & focus states</p>
+            </div>
+          </div>
+        </section>
+
+        {/* Chart Colors */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Data Visualization Colors</h2>
+          <div className="grid gap-4 grid-cols-5">
+            <div className="aspect-square rounded-lg text-white text-center flex flex-col items-center justify-center p-4" style={{backgroundColor: 'hsl(var(--chart-1))'}}>
+              <strong className="text-sm">Chart 1</strong>
+              <div className="text-xs opacity-90 mt-1">Blue 1</div>
+              <div className="text-xs opacity-80 mt-1">#829ae0</div>
+            </div>
+            <div className="aspect-square rounded-lg text-white text-center flex flex-col items-center justify-center p-4" style={{backgroundColor: 'hsl(var(--chart-2))'}}>
+              <strong className="text-sm">Chart 2</strong>
+              <div className="text-xs opacity-90 mt-1">Blue 2</div>
+              <div className="text-xs opacity-80 mt-1">#1a75ff</div>
+            </div>
+            <div className="aspect-square rounded-lg text-white text-center flex flex-col items-center justify-center p-4" style={{backgroundColor: 'hsl(var(--chart-3))'}}>
+              <strong className="text-sm">Chart 3</strong>
+              <div className="text-xs opacity-90 mt-1">Purple 1</div>
+              <div className="text-xs opacity-80 mt-1">#c6acde</div>
+            </div>
+            <div className="aspect-square rounded-lg text-white text-center flex flex-col items-center justify-center p-4" style={{backgroundColor: 'hsl(var(--chart-4))'}}>
+              <strong className="text-sm">Chart 4</strong>
+              <div className="text-xs opacity-90 mt-1">Purple 2</div>
+              <div className="text-xs opacity-80 mt-1">#9c27b0</div>
+            </div>
+            <div className="aspect-square rounded-lg text-white text-center flex flex-col items-center justify-center p-4" style={{backgroundColor: 'hsl(var(--chart-5))'}}>
+              <strong className="text-sm">Chart 5</strong>
+              <div className="text-xs opacity-90 mt-1">Violet</div>
+              <div className="text-xs opacity-80 mt-1">#7dc6da</div>
+            </div>
+          </div>
+        </section>
+
+        {/* Sidebar Colors */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Sidebar Colors</h2>
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <div className="p-6 rounded-lg border bg-sidebar min-h-[120px] flex flex-col justify-between">
+              <div>
+                <strong className="text-sidebar-foreground">Sidebar</strong>
+                <div className="text-xs text-muted-foreground mt-1">bg-sidebar</div>
+              </div>
+              <p className="text-sm text-sidebar-foreground mt-2">Sidebar background</p>
+            </div>
+            <div className="p-6 rounded-lg bg-sidebar-primary min-h-[120px] flex flex-col justify-between">
+              <div>
+                <strong className="text-sidebar-primary-foreground">Sidebar Primary</strong>
+                <div className="text-xs text-sidebar-primary-foreground/80 mt-1">bg-sidebar-primary</div>
+              </div>
+              <p className="text-sm text-sidebar-primary-foreground/90 mt-2">Active items</p>
+            </div>
+            <div className="p-6 rounded-lg bg-sidebar-accent min-h-[120px] flex flex-col justify-between">
+              <div>
+                <strong className="text-sidebar-accent-foreground">Sidebar Accent</strong>
+                <div className="text-xs text-muted-foreground mt-1">bg-sidebar-accent</div>
+              </div>
+              <p className="text-sm text-sidebar-accent-foreground mt-2">Accent backgrounds</p>
+            </div>
+            <div className="p-6 rounded-lg border-4 border-sidebar-border bg-sidebar min-h-[120px] flex flex-col justify-between">
+              <div>
+                <strong className="text-sidebar-foreground">Sidebar Border</strong>
+                <div className="text-xs text-muted-foreground mt-1">border-sidebar-border</div>
+              </div>
+              <p className="text-sm text-sidebar-foreground mt-2">Sidebar borders</p>
+            </div>
+          </div>
+        </section>
+
+        {/* Usage Guidelines */}
+        <section className="bg-card text-card-foreground border rounded-lg p-8">
+          <h2 className="text-2xl font-semibold mb-6">Usage Guidelines</h2>
+          
+          <div className="grid gap-8 lg:grid-cols-2">
+            <div>
+              <h3 className="text-lg font-medium mb-4">Color Pairing Rules</h3>
+              <div className="space-y-3">
+                <div className="flex items-center gap-3">
+                  <div className="w-4 h-4 bg-primary rounded"></div>
+                  <code className="bg-muted px-2 py-1 rounded text-sm">bg-primary</code>
+                  <span className="text-muted-foreground">→</span>
+                  <code className="bg-muted px-2 py-1 rounded text-sm">text-primary-foreground</code>
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="w-4 h-4 bg-secondary rounded border"></div>
+                  <code className="bg-muted px-2 py-1 rounded text-sm">bg-secondary</code>
+                  <span className="text-muted-foreground">→</span>
+                  <code className="bg-muted px-2 py-1 rounded text-sm">text-secondary-foreground</code>
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="w-4 h-4 bg-destructive rounded"></div>
+                  <code className="bg-muted px-2 py-1 rounded text-sm">bg-destructive</code>
+                  <span className="text-muted-foreground">→</span>
+                  <code className="bg-muted px-2 py-1 rounded text-sm">text-destructive-foreground</code>
+                </div>
+              </div>
+            </div>
+            
+            <div>
+              <h3 className="text-lg font-medium mb-4">Semantic Usage</h3>
+              <ul className="space-y-2 text-sm">
+                <li><strong className="text-primary">Primary:</strong> <span className="text-muted-foreground">Main actions, brand elements</span></li>
+                <li><strong className="text-destructive">Destructive:</strong> <span className="text-muted-foreground">Errors, dangerous actions</span></li>
+                <li><strong className="text-success">Success:</strong> <span className="text-muted-foreground">Confirmations, completed states</span></li>
+                <li><strong className="text-warning">Warning:</strong> <span className="text-muted-foreground">Cautions, important notices</span></li>
+                <li><strong>Muted:</strong> <span className="text-muted-foreground">Disabled states, subtle content</span></li>
+                <li><strong>Accent:</strong> <span className="text-muted-foreground">Information highlights</span></li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="mt-8 p-4 bg-accent/50 rounded-lg border border-accent">
+            <h4 className="font-medium mb-2 text-accent-foreground">Accessibility Note</h4>
+            <p className="text-sm text-muted-foreground">
+              All color combinations maintain WCAG AA contrast ratios (4.5:1 minimum). 
+              Colors automatically adapt between themes while preserving accessibility.
+            </p>
+          </div>
+        </section>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Component usage examples demonstrating proper color application in real UI patterns.
+ */
+export const ComponentExamples: Story = {
+  render: () => (
+    <div className="min-h-screen bg-background text-foreground">
+      <Theme />
+      
+      <div className="max-w-6xl mx-auto p-8 space-y-12">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold mb-2">Component Examples</h1>
+            <p className="text-muted-foreground">
+              Real-world usage patterns showing proper color application
+            </p>
+          </div>
+          <ThemeToggle showLabel />
+        </div>
+
+        {/* Buttons */}
+        <section className="space-y-6">
+          <h2 className="text-xl font-semibold">Buttons</h2>
+          <div className="flex flex-wrap gap-4">
+            <button className="px-6 py-3 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors">
+              Primary Action
+            </button>
+            <button className="px-6 py-3 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/80 transition-colors">
+              Secondary Action
+            </button>
+            <button className="px-6 py-3 bg-destructive text-destructive-foreground rounded-md hover:bg-destructive/90 transition-colors">
+              Delete Item
+            </button>
+            <button className="px-6 py-3 bg-success text-success-foreground rounded-md hover:bg-success/90 transition-colors">
+              Confirm
+            </button>
+            <button className="px-6 py-3 bg-muted text-muted-foreground rounded-md hover:bg-muted/80 transition-colors">
+              Disabled Style
+            </button>
+          </div>
+        </section>
+
+        {/* Cards */}
+        <section className="space-y-6">
+          <h2 className="text-xl font-semibold">Cards & Containers</h2>
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <div className="bg-card text-card-foreground border border-border rounded-lg p-6">
+              <h3 className="font-medium mb-2">Standard Card</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Uses card background with proper text contrast
+              </p>
+              <button className="text-primary hover:text-primary/80 text-sm font-medium">
+                Learn more →
+              </button>
+            </div>
+            
+            <div className="bg-muted text-muted-foreground rounded-lg p-6">
+              <h3 className="font-medium mb-2 text-foreground">Muted Card</h3>
+              <p className="text-sm mb-4">
+                Subtle container for less important content
+              </p>
+              <button className="text-primary hover:text-primary/80 text-sm font-medium">
+                View details
+              </button>
+            </div>
+            
+            <div className="bg-accent text-accent-foreground border rounded-lg p-6">
+              <h3 className="font-medium mb-2">Accent Card</h3>
+              <p className="text-sm mb-4">
+                Highlighted information container
+              </p>
+              <button className="text-primary hover:text-primary/80 text-sm font-medium">
+                Take action
+              </button>
+            </div>
+          </div>
+        </section>
+
+        {/* Status Messages */}
+        <section className="space-y-6">
+          <h2 className="text-xl font-semibold">Status & Feedback</h2>
+          <div className="space-y-4 max-w-2xl">
+            <div className="bg-success text-success-foreground p-4 rounded-lg flex items-start gap-3">
+              <div className="w-5 h-5 bg-success-foreground/20 rounded-full flex items-center justify-center mt-0.5">
+                <div className="w-2 h-2 bg-success-foreground rounded-full"></div>
+              </div>
+              <div>
+                <strong>Success!</strong>
+                <p className="text-sm opacity-90 mt-1">Your changes have been saved successfully.</p>
+              </div>
+            </div>
+            
+            <div className="bg-warning text-warning-foreground p-4 rounded-lg flex items-start gap-3">
+              <div className="w-5 h-5 bg-warning-foreground/20 rounded-full flex items-center justify-center mt-0.5">
+                <div className="w-2 h-2 bg-warning-foreground rounded-full"></div>
+              </div>
+              <div>
+                <strong>Warning:</strong>
+                <p className="text-sm opacity-90 mt-1">This action cannot be undone. Please proceed with caution.</p>
+              </div>
+            </div>
+            
+            <div className="bg-destructive text-destructive-foreground p-4 rounded-lg flex items-start gap-3">
+              <div className="w-5 h-5 bg-destructive-foreground/20 rounded-full flex items-center justify-center mt-0.5">
+                <div className="w-2 h-2 bg-destructive-foreground rounded-full"></div>
+              </div>
+              <div>
+                <strong>Error:</strong>
+                <p className="text-sm opacity-90 mt-1">Unable to process your request. Please try again.</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Form Elements */}
+        <section className="space-y-6">
+          <h2 className="text-xl font-semibold">Form Elements</h2>
+          <div className="space-y-6 max-w-md">
+            <div>
+              <label className="block text-sm font-medium mb-2">Normal Input</label>
+              <input 
+                className="w-full px-3 py-2 bg-input text-foreground border border-input rounded-md focus:ring-2 focus:ring-ring focus:border-transparent outline-none transition-all" 
+                placeholder="Enter your text..."
+                defaultValue="Sample input text"
+              />
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium mb-2">Success State</label>
+              <input 
+                className="w-full px-3 py-2 bg-input text-foreground border border-success rounded-md focus:ring-2 focus:ring-success focus:border-transparent outline-none" 
+                placeholder="Valid input"
+                defaultValue="valid@example.com"
+              />
+              <p className="text-sm text-success mt-1">Email format is valid</p>
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium mb-2">Error State</label>
+              <input 
+                className="w-full px-3 py-2 bg-input text-foreground border border-destructive rounded-md focus:ring-2 focus:ring-destructive focus:border-transparent outline-none" 
+                placeholder="Invalid input"
+                defaultValue="invalid-email"
+              />
+              <p className="text-sm text-destructive mt-1">Please enter a valid email address</p>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  ),
+};