@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/stories/ButtonShowcase.svelte

@@ -45,12 +45,12 @@
   }
 </script>
 
-<div class="p-8 space-y-12 bg-gray-50 dark:bg-gray-900 min-h-screen transition-colors">
+<div class="p-8 space-y-12 bg-bg-secondary min-h-screen transition-colors">
   <!-- Header with Dark Mode Toggle -->
   <div class="max-w-5xl flex items-start justify-between gap-4">
     <div>
-      <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Button Catalog</h1>
-      <p class="text-gray-600 dark:text-gray-300">
+      <h1 class="text-3xl font-bold text-text-primary mb-2">Button Catalog</h1>
+      <p class="text-text-secondary">
         Real buttons as they appear in the app. Click interactive buttons to see their behavior.
         <strong>Use these nicknames when telling Claude what button you want.</strong>
       </p>
@@ -59,8 +59,8 @@
       onclick={toggleDarkMode}
       class="flex items-center gap-2 px-4 py-2 rounded-lg border-2 transition-all font-medium
         {isDark
-          ? 'bg-gray-800 border-yellow-400 text-yellow-400 hover:bg-gray-700'
-          : 'bg-white border-gray-300 text-gray-700 hover:border-blue-500 hover:text-blue-600'}"
+          ? 'bg-bg-secondary border-status-warning-border text-accent-warning hover:bg-bg-secondary'
+          : 'bg-card border-stroke-primary text-text-secondary hover:border-interactive-border hover:text-brand-primary'}"
     >
       {#if isDark}
         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
@@ -80,37 +80,37 @@
   <!-- LOGIN PAGE BUTTONS -->
   <!-- ============================================ -->
   <section class="space-y-4">
-    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Login Page</h2>
-    <p class="text-sm text-gray-500 dark:text-gray-400">Found on: /login, /signup, /forgot-password</p>
+    <h2 class="text-xl font-bold text-text-primary border-b border-border pb-2">Login Page</h2>
+    <p class="text-sm text-muted-foreground">Found on: /login, /signup, /forgot-password</p>
 
     <div class="grid gap-6">
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-64">
           <Button size="xl-medium">Log in</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Login button"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Primary login action. Blue, full-width, medium height.</p>
+          <p class="font-semibold text-text-primary">"Login button"</p>
+          <p class="text-sm text-muted-foreground">Primary login action. Blue, full-width, medium height.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-64">
           <Button variant="outline" size="xl-medium">Send me a login link</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Magic link button" or "Secondary login button"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Alternative login option. Blue outline, full-width.</p>
+          <p class="font-semibold text-text-primary">"Magic link button" or "Secondary login button"</p>
+          <p class="text-sm text-muted-foreground">Alternative login option. Blue outline, full-width.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-64">
           <Button size="xl-medium">Create account</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Signup button"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Account creation. Same style as login button.</p>
+          <p class="font-semibold text-text-primary">"Signup button"</p>
+          <p class="text-sm text-muted-foreground">Account creation. Same style as login button.</p>
         </div>
       </div>
     </div>
@@ -120,11 +120,11 @@
   <!-- FORM BUTTONS (with behaviors) -->
   <!-- ============================================ -->
   <section class="space-y-4">
-    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Form Buttons (Interactive - Click to see behavior!)</h2>
-    <p class="text-sm text-gray-500 dark:text-gray-400">Found on: Performer Profile, Venue Settings, any edit form</p>
+    <h2 class="text-xl font-bold text-text-primary border-b border-border pb-2">Form Buttons (Interactive - Click to see behavior!)</h2>
+    <p class="text-sm text-muted-foreground">Found on: Performer Profile, Venue Settings, any edit form</p>
 
     <div class="grid gap-6">
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button
             onclick={demoSave}
@@ -136,29 +136,29 @@
           </Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Save button with feedback"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Click to see: Loading spinner → "Saved!" confirmation. Used after editing profiles, settings.</p>
+          <p class="font-semibold text-text-primary">"Save button with feedback"</p>
+          <p class="text-sm text-muted-foreground">Click to see: Loading spinner → "Saved!" confirmation. Used after editing profiles, settings.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button>Save</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Simple save button"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Basic save without loading/success feedback. For quick actions.</p>
+          <p class="font-semibold text-text-primary">"Simple save button"</p>
+          <p class="text-sm text-muted-foreground">Basic save without loading/success feedback. For quick actions.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48 flex gap-2">
           <Button variant="ghost">Cancel</Button>
           <Button>Save</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Cancel/Save pair"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Standard form footer. Ghost cancel + solid save.</p>
+          <p class="font-semibold text-text-primary">"Cancel/Save pair"</p>
+          <p class="text-sm text-muted-foreground">Standard form footer. Ghost cancel + solid save.</p>
         </div>
       </div>
     </div>
@@ -168,50 +168,50 @@
   <!-- MODAL BUTTONS -->
   <!-- ============================================ -->
   <section class="space-y-4">
-    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Modal / Dialog Buttons</h2>
-    <p class="text-sm text-gray-500 dark:text-gray-400">Found on: Confirmation dialogs, edit modals, delete warnings</p>
+    <h2 class="text-xl font-bold text-text-primary border-b border-border pb-2">Modal / Dialog Buttons</h2>
+    <p class="text-sm text-muted-foreground">Found on: Confirmation dialogs, edit modals, delete warnings</p>
 
     <div class="grid gap-6">
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48 flex gap-2 justify-end">
           <Button variant="ghost">Cancel</Button>
           <Button>Confirm</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Confirm modal"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Standard confirmation. Ghost cancel, solid confirm.</p>
+          <p class="font-semibold text-text-primary">"Confirm modal"</p>
+          <p class="text-sm text-muted-foreground">Standard confirmation. Ghost cancel, solid confirm.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48 flex gap-2 justify-end">
           <Button variant="alternative">Cancel</Button>
           <Button variant="red">Delete</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Delete confirmation"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Dangerous action warning. Gray cancel, red delete.</p>
+          <p class="font-semibold text-text-primary">"Delete confirmation"</p>
+          <p class="text-sm text-muted-foreground">Dangerous action warning. Gray cancel, red delete.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48 flex gap-2 justify-end">
           <Button variant="alternative">No, keep it</Button>
           <Button variant="red">Yes, remove</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Remove confirmation"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Removing something (like from a list). Less scary than delete.</p>
+          <p class="font-semibold text-text-primary">"Remove confirmation"</p>
+          <p class="text-sm text-muted-foreground">Removing something (like from a list). Less scary than delete.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button>Done</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Done button"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Close a modal after viewing (not editing). Single action.</p>
+          <p class="font-semibold text-text-primary">"Done button"</p>
+          <p class="text-sm text-muted-foreground">Close a modal after viewing (not editing). Single action.</p>
         </div>
       </div>
     </div>
@@ -221,11 +221,11 @@
   <!-- ACTION BUTTONS -->
   <!-- ============================================ -->
   <section class="space-y-4">
-    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Action Buttons</h2>
-    <p class="text-sm text-gray-500 dark:text-gray-400">Found on: Table rows, cards, toolbars</p>
+    <h2 class="text-xl font-bold text-text-primary border-b border-border pb-2">Action Buttons</h2>
+    <p class="text-sm text-muted-foreground">Found on: Table rows, cards, toolbars</p>
 
     <div class="grid gap-6">
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button
             onclick={demoInvite}
@@ -237,48 +237,48 @@
           </Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Invite button"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Click to see loading → success. Send invitation to performer/venue.</p>
+          <p class="font-semibold text-text-primary">"Invite button"</p>
+          <p class="text-sm text-muted-foreground">Click to see loading → success. Send invitation to performer/venue.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button beforeIcon={Add}>Add Performer</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Add button with icon"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Creating new items. Plus icon + text.</p>
+          <p class="font-semibold text-text-primary">"Add button with icon"</p>
+          <p class="text-sm text-muted-foreground">Creating new items. Plus icon + text.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button variant="alternative">Edit</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Edit button"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Secondary action. White with gray border.</p>
+          <p class="font-semibold text-text-primary">"Edit button"</p>
+          <p class="text-sm text-muted-foreground">Secondary action. White with gray border.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button variant="outline">View Details</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"View button" or "Details button"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Navigate to detail page. Blue outline.</p>
+          <p class="font-semibold text-text-primary">"View button" or "Details button"</p>
+          <p class="text-sm text-muted-foreground">Navigate to detail page. Blue outline.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button beforeIcon={ArrowLeft} variant="ghost">Back</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Back button"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Navigate back. Ghost style with arrow icon.</p>
+          <p class="font-semibold text-text-primary">"Back button"</p>
+          <p class="text-sm text-muted-foreground">Navigate back. Ghost style with arrow icon.</p>
         </div>
       </div>
     </div>
@@ -288,57 +288,57 @@
   <!-- DANGER BUTTONS -->
   <!-- ============================================ -->
   <section class="space-y-4">
-    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Danger / Warning Buttons</h2>
-    <p class="text-sm text-gray-500 dark:text-gray-400">For removing, deleting, signing out</p>
+    <h2 class="text-xl font-bold text-text-primary border-b border-border pb-2">Danger / Warning Buttons</h2>
+    <p class="text-sm text-muted-foreground">For removing, deleting, signing out</p>
 
     <div class="grid gap-6">
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button variant="red">Delete</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Delete button" (solid red)</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Permanent deletion. Red solid - most dangerous looking.</p>
+          <p class="font-semibold text-text-primary">"Delete button" (solid red)</p>
+          <p class="text-sm text-muted-foreground">Permanent deletion. Red solid - most dangerous looking.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button variant="red-outline">Remove</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Remove button" (red outline)</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Removing from list/association. Less scary than solid red.</p>
+          <p class="font-semibold text-text-primary">"Remove button" (red outline)</p>
+          <p class="text-sm text-muted-foreground">Removing from list/association. Less scary than solid red.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button variant="red-outline" beforeIcon={DeleteIcon}>Delete Event</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Delete with icon"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Delete action with trash icon for clarity.</p>
+          <p class="font-semibold text-text-primary">"Delete with icon"</p>
+          <p class="text-sm text-muted-foreground">Delete action with trash icon for clarity.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button variant="ghost-red">Sign out</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Sign out button"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Logout action. Subtle red text, no background.</p>
+          <p class="font-semibold text-text-primary">"Sign out button"</p>
+          <p class="text-sm text-muted-foreground">Logout action. Subtle red text, no background.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button variant="ghost-red">Cancel subscription</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Cancel subscription"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Account-level dangerous action. Subtle but red.</p>
+          <p class="font-semibold text-text-primary">"Cancel subscription"</p>
+          <p class="text-sm text-muted-foreground">Account-level dangerous action. Subtle but red.</p>
         </div>
       </div>
     </div>
@@ -348,30 +348,30 @@
   <!-- TOGGLE / FILTER BUTTONS -->
   <!-- ============================================ -->
   <section class="space-y-4">
-    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Toggle / Filter Buttons</h2>
-    <p class="text-sm text-gray-500 dark:text-gray-400">Found on: Filter bars, tab-like selections</p>
+    <h2 class="text-xl font-bold text-text-primary border-b border-border pb-2">Toggle / Filter Buttons</h2>
+    <p class="text-sm text-muted-foreground">Found on: Filter bars, tab-like selections</p>
 
     <div class="grid gap-6">
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-64 flex gap-2">
           <Button variant="toggle" active={true}>Upcoming</Button>
           <Button variant="toggle">Past</Button>
           <Button variant="toggle">All</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Filter tabs" or "Toggle group"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">One active at a time. Like tabs but smaller.</p>
+          <p class="font-semibold text-text-primary">"Filter tabs" or "Toggle group"</p>
+          <p class="text-sm text-muted-foreground">One active at a time. Like tabs but smaller.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-64 flex gap-2">
           <Button variant="toggle" active={true} size="sm">Active</Button>
           <Button variant="toggle" size="sm">Inactive</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Small filter toggles"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Compact version for tight spaces.</p>
+          <p class="font-semibold text-text-primary">"Small filter toggles"</p>
+          <p class="text-sm text-muted-foreground">Compact version for tight spaces.</p>
         </div>
       </div>
     </div>
@@ -381,27 +381,27 @@
   <!-- LINK-STYLE BUTTONS -->
   <!-- ============================================ -->
   <section class="space-y-4">
-    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Link-Style Buttons</h2>
-    <p class="text-sm text-gray-500 dark:text-gray-400">For inline actions that look like text links</p>
+    <h2 class="text-xl font-bold text-text-primary border-b border-border pb-2">Link-Style Buttons</h2>
+    <p class="text-sm text-muted-foreground">For inline actions that look like text links</p>
 
     <div class="grid gap-6">
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button variant="link">Forgot password?</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Link button" or "Text link"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Looks like a link but is a button. For inline actions.</p>
+          <p class="font-semibold text-text-primary">"Link button" or "Text link"</p>
+          <p class="text-sm text-muted-foreground">Looks like a link but is a button. For inline actions.</p>
         </div>
       </div>
 
-      <div class="flex items-center gap-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div class="flex items-center gap-6 p-4 bg-card rounded-lg border border-border">
         <div class="w-48">
           <Button variant="link" size="sm">Learn more</Button>
         </div>
         <div class="flex-1">
-          <p class="font-semibold text-gray-900 dark:text-white">"Learn more link"</p>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Small text link for supplementary actions.</p>
+          <p class="font-semibold text-text-primary">"Learn more link"</p>
+          <p class="text-sm text-muted-foreground">Small text link for supplementary actions.</p>
         </div>
       </div>
     </div>
@@ -411,41 +411,41 @@
   <!-- SIZE COMPARISON -->
   <!-- ============================================ -->
   <section class="space-y-4">
-    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Size Comparison</h2>
-    <p class="text-sm text-gray-500 dark:text-gray-400">All sizes side-by-side for reference</p>
+    <h2 class="text-xl font-bold text-text-primary border-b border-border pb-2">Size Comparison</h2>
+    <p class="text-sm text-muted-foreground">All sizes side-by-side for reference</p>
 
-    <div class="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+    <div class="p-4 bg-card rounded-lg border border-border">
       <div class="flex items-end gap-4 flex-wrap">
         <div class="text-center">
           <Button size="xs">Extra Small</Button>
-          <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">xs - Compact UI</p>
+          <p class="text-xs text-muted-foreground mt-2">xs - Compact UI</p>
         </div>
         <div class="text-center">
           <Button size="sm">Small</Button>
-          <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">sm - Table rows</p>
+          <p class="text-xs text-muted-foreground mt-2">sm - Table rows</p>
         </div>
         <div class="text-center">
           <Button size="md">Medium</Button>
-          <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">md - Default</p>
+          <p class="text-xs text-muted-foreground mt-2">md - Default</p>
         </div>
         <div class="text-center">
           <Button size="lg">Large</Button>
-          <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">lg - Emphasis</p>
+          <p class="text-xs text-muted-foreground mt-2">lg - Emphasis</p>
         </div>
         <div class="text-center">
           <Button size="xl">Extra Large</Button>
-          <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">xl - Hero buttons</p>
+          <p class="text-xs text-muted-foreground mt-2">xl - Hero buttons</p>
         </div>
       </div>
     </div>
 
-    <div class="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 max-w-sm">
-      <p class="font-medium text-gray-900 dark:text-white mb-3">Full-width buttons (for forms)</p>
+    <div class="p-4 bg-card rounded-lg border border-border max-w-sm">
+      <p class="font-medium text-text-primary mb-3">Full-width buttons (for forms)</p>
       <div class="space-y-3">
         <Button size="xl-medium">Log in</Button>
-        <p class="text-xs text-gray-400 dark:text-gray-500">xl-medium - Login/signup forms</p>
+        <p class="text-xs text-muted-foreground">xl-medium - Login/signup forms</p>
         <Button size="full">Submit Application</Button>
-        <p class="text-xs text-gray-400 dark:text-gray-500">full - Larger form submit</p>
+        <p class="text-xs text-muted-foreground">full - Larger form submit</p>
       </div>
     </div>
   </section>
@@ -454,70 +454,70 @@
   <!-- QUICK NICKNAME REFERENCE -->
   <!-- ============================================ -->
   <section class="space-y-4">
-    <h2 class="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Quick Nickname Reference</h2>
-    <p class="text-sm text-gray-500 dark:text-gray-400">Copy these phrases when asking Claude for buttons</p>
+    <h2 class="text-xl font-bold text-text-primary border-b border-border pb-2">Quick Nickname Reference</h2>
+    <p class="text-sm text-muted-foreground">Copy these phrases when asking Claude for buttons</p>
 
     <div class="overflow-x-auto">
-      <table class="w-full text-sm text-gray-900 dark:text-gray-200">
-        <thead class="bg-gray-100 dark:bg-gray-700">
+      <table class="w-full text-sm text-text-primary">
+        <thead class="bg-muted">
           <tr>
             <th class="text-left p-3 font-semibold">Say this to Claude</th>
             <th class="text-left p-3 font-semibold">You'll get</th>
             <th class="text-left p-3 font-semibold">Where it's used</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-          <tr class="bg-white dark:bg-gray-800">
+        <tbody class="divide-y divide-border">
+          <tr class="bg-card">
             <td class="p-3 font-medium">"Login button"</td>
             <td class="p-3">Blue, full-width</td>
             <td class="p-3">Login page, signup</td>
           </tr>
-          <tr class="bg-white dark:bg-gray-800">
+          <tr class="bg-card">
             <td class="p-3 font-medium">"Magic link button"</td>
             <td class="p-3">Blue outline, full-width</td>
             <td class="p-3">Login page secondary</td>
           </tr>
-          <tr class="bg-white dark:bg-gray-800">
+          <tr class="bg-card">
             <td class="p-3 font-medium">"Save button with feedback"</td>
             <td class="p-3">Loading → "Saved!"</td>
             <td class="p-3">Profile, settings forms</td>
           </tr>
-          <tr class="bg-white dark:bg-gray-800">
+          <tr class="bg-card">
             <td class="p-3 font-medium">"Cancel/Save pair"</td>
             <td class="p-3">Ghost + solid side by side</td>
             <td class="p-3">Any form footer</td>
           </tr>
-          <tr class="bg-white dark:bg-gray-800">
+          <tr class="bg-card">
             <td class="p-3 font-medium">"Delete confirmation"</td>
             <td class="p-3">Gray cancel + red delete</td>
             <td class="p-3">Delete modals</td>
           </tr>
-          <tr class="bg-white dark:bg-gray-800">
+          <tr class="bg-card">
             <td class="p-3 font-medium">"Add button with icon"</td>
             <td class="p-3">Plus icon + text</td>
             <td class="p-3">Creating new things</td>
           </tr>
-          <tr class="bg-white dark:bg-gray-800">
+          <tr class="bg-card">
             <td class="p-3 font-medium">"Edit button"</td>
             <td class="p-3">White with gray border</td>
             <td class="p-3">Table rows, cards</td>
           </tr>
-          <tr class="bg-white dark:bg-gray-800">
+          <tr class="bg-card">
             <td class="p-3 font-medium">"Back button"</td>
             <td class="p-3">Arrow + ghost style</td>
             <td class="p-3">Navigation</td>
           </tr>
-          <tr class="bg-white dark:bg-gray-800">
+          <tr class="bg-card">
             <td class="p-3 font-medium">"Sign out button"</td>
             <td class="p-3">Subtle red text</td>
             <td class="p-3">User menu, settings</td>
           </tr>
-          <tr class="bg-white dark:bg-gray-800">
+          <tr class="bg-card">
             <td class="p-3 font-medium">"Filter tabs"</td>
             <td class="p-3">Toggle group</td>
             <td class="p-3">List filtering</td>
           </tr>
-          <tr class="bg-white dark:bg-gray-800">
+          <tr class="bg-card">
             <td class="p-3 font-medium">"Link button"</td>
             <td class="p-3">Text that looks like link</td>
             <td class="p-3">Inline actions</td>