@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/stories/DesignSystemAudit.stories.svelte

@@ -15,65 +15,65 @@
 
 <Story name="Overview">
   <div class="space-y-8">
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6">
-      <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Remaining Arbitrary Pixel Values</h1>
-      <p class="text-gray-700 dark:text-gray-300">
+    <div class="bg-status-info-bg rounded-lg p-6">
+      <h1 class="text-2xl font-bold text-text-primary mb-4">Remaining Arbitrary Pixel Values</h1>
+      <p class="text-text-secondary">
         This audit documents the 8 remaining arbitrary pixel values in svelte-components that haven't been converted to Flowbite-native Tailwind classes.
       </p>
-      <p class="text-gray-600 dark:text-gray-400 mt-2 text-sm">
+      <p class="text-text-secondary mt-2 text-sm">
         <strong>Goal:</strong> Evaluate each case and determine if they should be converted to Flowbite-native tokens, added as custom theme extensions, or left as-is.
       </p>
     </div>
 
     <!-- Summary Table -->
-    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6">
-      <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Summary: Action Items</h2>
+    <div class="bg-muted rounded-lg p-6">
+      <h2 class="text-xl font-bold text-text-primary mb-4">Summary: Action Items</h2>
 
       <table class="w-full text-sm">
         <thead>
-          <tr class="text-left border-b border-gray-300 dark:border-gray-600">
-            <th class="py-2 font-semibold text-gray-700 dark:text-gray-300">Component</th>
-            <th class="py-2 font-semibold text-gray-700 dark:text-gray-300">Value</th>
-            <th class="py-2 font-semibold text-gray-700 dark:text-gray-300">Action</th>
-            <th class="py-2 font-semibold text-gray-700 dark:text-gray-300">Priority</th>
+          <tr class="text-left border-b border-stroke-primary">
+            <th class="py-2 font-semibold text-text-secondary">Component</th>
+            <th class="py-2 font-semibold text-text-secondary">Value</th>
+            <th class="py-2 font-semibold text-text-secondary">Action</th>
+            <th class="py-2 font-semibold text-text-secondary">Priority</th>
           </tr>
         </thead>
-        <tbody class="text-gray-600 dark:text-gray-400">
-          <tr class="border-b border-gray-200 dark:border-gray-700">
+        <tbody class="text-text-secondary">
+          <tr class="border-b border-border">
             <td class="py-2">MiniMonthCalendar</td>
-            <td class="py-2"><code class="text-xs bg-gray-200 dark:bg-gray-700 px-1 rounded">min-h-[356px]</code> etc.</td>
+            <td class="py-2"><code class="text-xs bg-bg-tertiary px-1 rounded">min-h-[356px]</code> etc.</td>
             <td class="py-2">Add theme tokens</td>
-            <td class="py-2"><span class="px-2 py-0.5 rounded text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">Medium</span></td>
+            <td class="py-2"><span class="px-2 py-0.5 rounded text-xs bg-status-warning-bg text-status-warning-text">Medium</span></td>
           </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
+          <tr class="border-b border-border">
             <td class="py-2">OrderSummary</td>
-            <td class="py-2"><code class="text-xs bg-gray-200 dark:bg-gray-700 px-1 rounded">min-[872px]</code></td>
+            <td class="py-2"><code class="text-xs bg-bg-tertiary px-1 rounded">min-[872px]</code></td>
             <td class="py-2">Add custom breakpoint</td>
-            <td class="py-2"><span class="px-2 py-0.5 rounded text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">Medium</span></td>
+            <td class="py-2"><span class="px-2 py-0.5 rounded text-xs bg-status-warning-bg text-status-warning-text">Medium</span></td>
           </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
+          <tr class="border-b border-border">
             <td class="py-2">OrderSummary</td>
-            <td class="py-2"><code class="text-xs bg-gray-200 dark:bg-gray-700 px-1 rounded">max-h-[80vh]</code></td>
-            <td class="py-2 text-green-600 dark:text-green-400">Keep as-is ✓</td>
-            <td class="py-2"><span class="px-2 py-0.5 rounded text-xs bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-400">None</span></td>
+            <td class="py-2"><code class="text-xs bg-bg-tertiary px-1 rounded">max-h-[80vh]</code></td>
+            <td class="py-2 text-accent-success">Keep as-is ✓</td>
+            <td class="py-2"><span class="px-2 py-0.5 rounded text-xs bg-bg-tertiary text-text-secondary">None</span></td>
           </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
+          <tr class="border-b border-border">
             <td class="py-2">OrderSummary</td>
-            <td class="py-2"><code class="text-xs bg-gray-200 dark:bg-gray-700 px-1 rounded">pb-[max(...)]</code></td>
-            <td class="py-2 text-green-600 dark:text-green-400">Keep as-is ✓</td>
-            <td class="py-2"><span class="px-2 py-0.5 rounded text-xs bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-400">None</span></td>
+            <td class="py-2"><code class="text-xs bg-bg-tertiary px-1 rounded">pb-[max(...)]</code></td>
+            <td class="py-2 text-accent-success">Keep as-is ✓</td>
+            <td class="py-2"><span class="px-2 py-0.5 rounded text-xs bg-bg-tertiary text-text-secondary">None</span></td>
           </tr>
-          <tr class="border-b border-gray-200 dark:border-gray-700">
+          <tr class="border-b border-border">
             <td class="py-2">OrderSummary</td>
-            <td class="py-2"><code class="text-xs bg-gray-200 dark:bg-gray-700 px-1 rounded">min-w-[140px]</code></td>
+            <td class="py-2"><code class="text-xs bg-bg-tertiary px-1 rounded">min-w-[140px]</code></td>
             <td class="py-2">Convert to min-w-36</td>
-            <td class="py-2"><span class="px-2 py-0.5 rounded text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">Easy</span></td>
+            <td class="py-2"><span class="px-2 py-0.5 rounded text-xs bg-status-success-bg text-status-success-text">Easy</span></td>
           </tr>
           <tr>
             <td class="py-2">CustomImageDropzone</td>
-            <td class="py-2"><code class="text-xs bg-gray-200 dark:bg-gray-700 px-1 rounded">top-[22px]</code> etc.</td>
+            <td class="py-2"><code class="text-xs bg-bg-tertiary px-1 rounded">top-[22px]</code> etc.</td>
             <td class="py-2">Convert to top-5 right-5</td>
-            <td class="py-2"><span class="px-2 py-0.5 rounded text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">Easy</span></td>
+            <td class="py-2"><span class="px-2 py-0.5 rounded text-xs bg-status-success-bg text-status-success-text">Easy</span></td>
           </tr>
         </tbody>
       </table>
@@ -83,11 +83,11 @@
 
 <Story name="Calendar Grid Heights">
   <div class="space-y-6">
-    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">MiniMonthCalendar - Grid Heights</h2>
+    <h2 class="text-2xl font-bold text-text-primary">MiniMonthCalendar - Grid Heights</h2>
 
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
-      <h3 class="font-semibold text-blue-800 dark:text-blue-300 mb-2">Arbitrary Values Found:</h3>
-      <code class="block text-sm bg-white dark:bg-gray-800 p-3 rounded border border-blue-200 dark:border-blue-800">
+    <div class="bg-status-info-bg rounded-lg p-4">
+      <h3 class="font-semibold text-status-info-text mb-2">Arbitrary Values Found:</h3>
+      <code class="block text-sm bg-card p-3 rounded border border-status-info-border">
         min-h-[356px] sm:min-h-[388px] md:min-h-[448px] lg:min-h-[508px]<br/>
         min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px]
       </code>
@@ -95,28 +95,28 @@
 
     <div class="grid md:grid-cols-2 gap-6">
       <div>
-        <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Pages Used:</h4>
-        <ul class="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+        <h4 class="font-medium text-text-secondary mb-2">Pages Used:</h4>
+        <ul class="list-disc list-inside text-sm text-text-secondary space-y-1">
           <li>performers-portal: /availability/[venueId]</li>
           <li>micdrop-frontend: /venues/[id]/calendar</li>
           <li>venue-calendar-npm: Calendar widget</li>
         </ul>
       </div>
       <div>
-        <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Why Arbitrary:</h4>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
+        <h4 class="font-medium text-text-secondary mb-2">Why Arbitrary:</h4>
+        <p class="text-sm text-text-secondary">
           Calendar cells need consistent proportions across breakpoints. The heights ensure
           6 weeks of days fit properly with room for event indicators.
         </p>
       </div>
     </div>
 
-    <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4">
-      <h4 class="font-semibold text-amber-800 dark:text-amber-300 mb-2">Recommendation:</h4>
-      <p class="text-sm text-amber-700 dark:text-amber-400 mb-2">
+    <div class="bg-status-warning-bg rounded-lg p-4">
+      <h4 class="font-semibold text-accent-warning mb-2">Recommendation:</h4>
+      <p class="text-sm text-accent-warning mb-2">
         <strong>Option A (Preferred):</strong> Add to tailwind.config.js as semantic calendar tokens:
       </p>
-      <pre class="text-xs bg-white dark:bg-gray-800 p-3 rounded border border-amber-200 dark:border-amber-800 overflow-x-auto">
+      <pre class="text-xs bg-card p-3 rounded border border-status-warning-border overflow-x-auto">
 {`// tailwind.config.js
 theme: {
   extend: {
@@ -135,9 +135,9 @@ theme: {
       </pre>
     </div>
 
-    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-800">
-      <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-3">Live Preview:</h4>
-      <p class="text-sm text-gray-500 dark:text-gray-400 italic">
+    <div class="border border-border rounded-lg p-4 bg-card">
+      <h4 class="font-medium text-text-secondary mb-3">Live Preview:</h4>
+      <p class="text-sm text-muted-foreground italic">
         MiniMonthCalendar component lives in venue-calendar-npm package. See that package's Storybook for live preview.
       </p>
     </div>
@@ -146,11 +146,11 @@ theme: {
 
 <Story name="OrderSummary Breakpoint">
   <div class="space-y-6">
-    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">OrderSummary - Custom Breakpoint</h2>
+    <h2 class="text-2xl font-bold text-text-primary">OrderSummary - Custom Breakpoint</h2>
 
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
-      <h3 class="font-semibold text-blue-800 dark:text-blue-300 mb-2">Arbitrary Values Found:</h3>
-      <code class="block text-sm bg-white dark:bg-gray-800 p-3 rounded border border-blue-200 dark:border-blue-800">
+    <div class="bg-status-info-bg rounded-lg p-4">
+      <h3 class="font-semibold text-status-info-text mb-2">Arbitrary Values Found:</h3>
+      <code class="block text-sm bg-card p-3 rounded border border-status-info-border">
         min-[872px]:block<br/>
         min-[872px]:hidden
       </code>
@@ -158,27 +158,27 @@ theme: {
 
     <div class="grid md:grid-cols-2 gap-6">
       <div>
-        <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Pages Used:</h4>
-        <ul class="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+        <h4 class="font-medium text-text-secondary mb-2">Pages Used:</h4>
+        <ul class="list-disc list-inside text-sm text-text-secondary space-y-1">
           <li>micdrop-frontend: /checkout</li>
           <li>micdrop-frontend: /e/[eventId]</li>
         </ul>
       </div>
       <div>
-        <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Why Arbitrary:</h4>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
+        <h4 class="font-medium text-text-secondary mb-2">Why Arbitrary:</h4>
+        <p class="text-sm text-text-secondary">
           872px is the exact point where the order summary fits beside the ticket selector.
           Standard breakpoints (md:768px, lg:1024px) don't match the layout needs.
         </p>
       </div>
     </div>
 
-    <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4">
-      <h4 class="font-semibold text-amber-800 dark:text-amber-300 mb-2">Recommendation:</h4>
-      <p class="text-sm text-amber-700 dark:text-amber-400 mb-2">
+    <div class="bg-status-warning-bg rounded-lg p-4">
+      <h4 class="font-semibold text-accent-warning mb-2">Recommendation:</h4>
+      <p class="text-sm text-accent-warning mb-2">
         <strong>Option A (Preferred):</strong> Add custom breakpoint to tailwind.config.js:
       </p>
-      <pre class="text-xs bg-white dark:bg-gray-800 p-3 rounded border border-amber-200 dark:border-amber-800 overflow-x-auto">
+      <pre class="text-xs bg-card p-3 rounded border border-status-warning-border overflow-x-auto">
 {`// tailwind.config.js
 theme: {
   extend: {
@@ -188,8 +188,8 @@ theme: {
   }
 }`}
       </pre>
-      <p class="text-sm text-amber-700 dark:text-amber-400 mt-2">
-        Then use: <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">checkout:block</code> instead of <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">min-[872px]:block</code>
+      <p class="text-sm text-accent-warning mt-2">
+        Then use: <code class="bg-muted px-1 rounded">checkout:block</code> instead of <code class="bg-muted px-1 rounded">min-[872px]:block</code>
       </p>
     </div>
   </div>
@@ -197,33 +197,33 @@ theme: {
 
 <Story name="Viewport Height Keep">
   <div class="space-y-6">
-    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">OrderSummary - Max Height (Viewport)</h2>
+    <h2 class="text-2xl font-bold text-text-primary">OrderSummary - Max Height (Viewport)</h2>
 
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
-      <h3 class="font-semibold text-blue-800 dark:text-blue-300 mb-2">Arbitrary Value Found:</h3>
-      <code class="block text-sm bg-white dark:bg-gray-800 p-3 rounded border border-blue-200 dark:border-blue-800">
+    <div class="bg-status-info-bg rounded-lg p-4">
+      <h3 class="font-semibold text-status-info-text mb-2">Arbitrary Value Found:</h3>
+      <code class="block text-sm bg-card p-3 rounded border border-status-info-border">
         max-h-[80vh]
       </code>
     </div>
 
     <div class="grid md:grid-cols-2 gap-6">
       <div>
-        <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Context:</h4>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
+        <h4 class="font-medium text-text-secondary mb-2">Context:</h4>
+        <p class="text-sm text-text-secondary">
           Mobile bottom sheet for order summary. Limits height to 80% of viewport so user can still see page behind.
         </p>
       </div>
       <div>
-        <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Why Arbitrary:</h4>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
+        <h4 class="font-medium text-text-secondary mb-2">Why Arbitrary:</h4>
+        <p class="text-sm text-text-secondary">
           Tailwind doesn't have viewport-relative max-height utilities by default.
         </p>
       </div>
     </div>
 
-    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
-      <h4 class="font-semibold text-green-800 dark:text-green-300 mb-2">Recommendation: Keep As-Is ✓</h4>
-      <p class="text-sm text-green-700 dark:text-green-400">
+    <div class="bg-status-success-bg rounded-lg p-4">
+      <h4 class="font-semibold text-status-success-text mb-2">Recommendation: Keep As-Is ✓</h4>
+      <p class="text-sm text-status-success-text">
         This is a legitimate use of arbitrary values. Viewport-relative units (vh, vw, dvh)
         are not part of Tailwind's default scale and adding them would be non-standard.
         The arbitrary syntax is the correct approach here.
@@ -234,33 +234,33 @@ theme: {
 
 <Story name="Safe Area Keep">
   <div class="space-y-6">
-    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">OrderSummary - Safe Area Inset</h2>
+    <h2 class="text-2xl font-bold text-text-primary">OrderSummary - Safe Area Inset</h2>
 
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
-      <h3 class="font-semibold text-blue-800 dark:text-blue-300 mb-2">Arbitrary Value Found:</h3>
-      <code class="block text-sm bg-white dark:bg-gray-800 p-3 rounded border border-blue-200 dark:border-blue-800">
+    <div class="bg-status-info-bg rounded-lg p-4">
+      <h3 class="font-semibold text-status-info-text mb-2">Arbitrary Value Found:</h3>
+      <code class="block text-sm bg-card p-3 rounded border border-status-info-border">
         pb-[max(16px,calc(env(safe-area-inset-bottom)+8px))]
       </code>
     </div>
 
     <div class="grid md:grid-cols-2 gap-6">
       <div>
-        <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Context:</h4>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
+        <h4 class="font-medium text-text-secondary mb-2">Context:</h4>
+        <p class="text-sm text-text-secondary">
           Fixed bottom bar on mobile checkout. Needs to account for iPhone home indicator / Android navigation.
         </p>
       </div>
       <div>
-        <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Why Arbitrary:</h4>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
+        <h4 class="font-medium text-text-secondary mb-2">Why Arbitrary:</h4>
+        <p class="text-sm text-text-secondary">
           CSS env() functions for safe-area-inset are not supported by Tailwind utilities.
         </p>
       </div>
     </div>
 
-    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
-      <h4 class="font-semibold text-green-800 dark:text-green-300 mb-2">Recommendation: Keep As-Is ✓</h4>
-      <p class="text-sm text-green-700 dark:text-green-400">
+    <div class="bg-status-success-bg rounded-lg p-4">
+      <h4 class="font-semibold text-status-success-text mb-2">Recommendation: Keep As-Is ✓</h4>
+      <p class="text-sm text-status-success-text">
         Safe area insets require CSS env() which has no Tailwind equivalent.
         This is the correct approach for iOS/Android safe areas.
         Consider extracting to a utility class in CSS if used in multiple places.
@@ -271,46 +271,46 @@ theme: {
 
 <Story name="Button Width Fixable">
   <div class="space-y-6">
-    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">OrderSummary - Button Min Width</h2>
+    <h2 class="text-2xl font-bold text-text-primary">OrderSummary - Button Min Width</h2>
 
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
-      <h3 class="font-semibold text-blue-800 dark:text-blue-300 mb-2">Arbitrary Value Found:</h3>
-      <code class="block text-sm bg-white dark:bg-gray-800 p-3 rounded border border-blue-200 dark:border-blue-800">
+    <div class="bg-status-info-bg rounded-lg p-4">
+      <h3 class="font-semibold text-status-info-text mb-2">Arbitrary Value Found:</h3>
+      <code class="block text-sm bg-card p-3 rounded border border-status-info-border">
         min-w-[140px]
       </code>
     </div>
 
     <div class="grid md:grid-cols-2 gap-6">
       <div>
-        <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Context:</h4>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
+        <h4 class="font-medium text-text-secondary mb-2">Context:</h4>
+        <p class="text-sm text-text-secondary">
           "View order" / "Checkout" button in mobile bottom bar.
         </p>
       </div>
       <div>
-        <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Tailwind Equivalent:</h4>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
-          140px ≈ <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">min-w-36</code> (144px)
+        <h4 class="font-medium text-text-secondary mb-2">Tailwind Equivalent:</h4>
+        <p class="text-sm text-text-secondary">
+          140px ≈ <code class="bg-muted px-1 rounded">min-w-36</code> (144px)
         </p>
       </div>
     </div>
 
-    <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4">
-      <h4 class="font-semibold text-amber-800 dark:text-amber-300 mb-2">Recommendation: Convert to Tailwind</h4>
-      <p class="text-sm text-amber-700 dark:text-amber-400">
-        Replace <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">min-w-[140px]</code> with
-        <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">min-w-36</code> (144px).
+    <div class="bg-status-warning-bg rounded-lg p-4">
+      <h4 class="font-semibold text-accent-warning mb-2">Recommendation: Convert to Tailwind</h4>
+      <p class="text-sm text-accent-warning">
+        Replace <code class="bg-muted px-1 rounded">min-w-[140px]</code> with
+        <code class="bg-muted px-1 rounded">min-w-36</code> (144px).
         The 4px difference is imperceptible.
       </p>
     </div>
 
-    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-800">
-      <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-3">Visual Comparison:</h4>
+    <div class="border border-border rounded-lg p-4 bg-card">
+      <h4 class="font-medium text-text-secondary mb-3">Visual Comparison:</h4>
       <div class="flex gap-4 items-center">
-        <button class="min-w-[140px] h-12 rounded-lg text-sm font-semibold bg-blue-700 text-white">
+        <button class="min-w-[140px] h-12 rounded-lg text-sm font-semibold bg-brand-primary text-white">
           min-w-[140px]
         </button>
-        <button class="min-w-36 h-12 rounded-lg text-sm font-semibold bg-green-700 text-white">
+        <button class="min-w-36 h-12 rounded-lg text-sm font-semibold bg-accent-success text-white">
           min-w-36 (144px)
         </button>
       </div>
@@ -320,55 +320,55 @@ theme: {
 
 <Story name="Dropzone Position Fixable">
   <div class="space-y-6">
-    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">CustomImageDropzone - Close Button Position</h2>
+    <h2 class="text-2xl font-bold text-text-primary">CustomImageDropzone - Close Button Position</h2>
 
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
-      <h3 class="font-semibold text-blue-800 dark:text-blue-300 mb-2">Arbitrary Values Found:</h3>
-      <code class="block text-sm bg-white dark:bg-gray-800 p-3 rounded border border-blue-200 dark:border-blue-800">
+    <div class="bg-status-info-bg rounded-lg p-4">
+      <h3 class="font-semibold text-status-info-text mb-2">Arbitrary Values Found:</h3>
+      <code class="block text-sm bg-card p-3 rounded border border-status-info-border">
         top-[22px] right-[19px]
       </code>
     </div>
 
     <div class="grid md:grid-cols-2 gap-6">
       <div>
-        <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Pages Used:</h4>
-        <ul class="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+        <h4 class="font-medium text-text-secondary mb-2">Pages Used:</h4>
+        <ul class="list-disc list-inside text-sm text-text-secondary space-y-1">
           <li>performers-portal: /profile (profile photo)</li>
           <li>micdrop-frontend: /venues/settings (venue logo)</li>
         </ul>
       </div>
       <div>
-        <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Why Arbitrary:</h4>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
+        <h4 class="font-medium text-text-secondary mb-2">Why Arbitrary:</h4>
+        <p class="text-sm text-text-secondary">
           The close button needs precise positioning on the 256x256 circular profile photo.
           22px and 19px are calculated to place the button at the visual "corner" of the circle.
         </p>
       </div>
     </div>
 
-    <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4">
-      <h4 class="font-semibold text-amber-800 dark:text-amber-300 mb-2">Recommendation:</h4>
-      <p class="text-sm text-amber-700 dark:text-amber-400 mb-2">
-        Use closest Tailwind values: <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">top-5 right-5</code> (20px each)
+    <div class="bg-status-warning-bg rounded-lg p-4">
+      <h4 class="font-semibold text-accent-warning mb-2">Recommendation:</h4>
+      <p class="text-sm text-accent-warning mb-2">
+        Use closest Tailwind values: <code class="bg-muted px-1 rounded">top-5 right-5</code> (20px each)
       </p>
     </div>
 
-    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-800">
-      <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-3">Visual Comparison (256x256 profile photo):</h4>
+    <div class="border border-border rounded-lg p-4 bg-card">
+      <h4 class="font-medium text-text-secondary mb-3">Visual Comparison (256x256 profile photo):</h4>
       <div class="flex gap-8 justify-center">
         <div class="relative">
-          <div class="w-64 h-64 rounded-full bg-gray-200 dark:bg-gray-700"></div>
-          <div class="absolute top-[22px] right-[19px] w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-white text-xs font-bold">
+          <div class="w-64 h-64 rounded-full bg-bg-tertiary"></div>
+          <div class="absolute top-[22px] right-[19px] w-8 h-8 rounded-full bg-accent-danger flex items-center justify-center text-white text-xs font-bold">
             ×
           </div>
-          <p class="text-xs text-center mt-2 text-gray-500">Current: top-[22px] right-[19px]</p>
+          <p class="text-xs text-center mt-2 text-muted-foreground">Current: top-[22px] right-[19px]</p>
         </div>
         <div class="relative">
-          <div class="w-64 h-64 rounded-full bg-gray-200 dark:bg-gray-700"></div>
-          <div class="absolute top-5 right-5 w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white text-xs font-bold">
+          <div class="w-64 h-64 rounded-full bg-bg-tertiary"></div>
+          <div class="absolute top-5 right-5 w-8 h-8 rounded-full bg-accent-success flex items-center justify-center text-white text-xs font-bold">
             ×
           </div>
-          <p class="text-xs text-center mt-2 text-gray-500">Tailwind: top-5 right-5 (20px)</p>
+          <p class="text-xs text-center mt-2 text-muted-foreground">Tailwind: top-5 right-5 (20px)</p>
         </div>
       </div>
     </div>
@@ -377,14 +377,14 @@ theme: {
 
 <Story name="Tailwind Config Additions">
   <div class="space-y-6">
-    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Recommended tailwind.config.js Additions</h2>
+    <h2 class="text-2xl font-bold text-text-primary">Recommended tailwind.config.js Additions</h2>
 
-    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6">
-      <p class="text-sm text-blue-700 dark:text-blue-400 mb-4">
+    <div class="bg-status-info-bg rounded-lg p-6">
+      <p class="text-sm text-brand-primary mb-4">
         Copy and paste this into the consuming app's tailwind.config.js to enable semantic calendar tokens and the checkout breakpoint.
       </p>
 
-      <pre class="text-xs bg-white dark:bg-gray-800 p-4 rounded border border-blue-200 dark:border-blue-800 overflow-x-auto">
+      <pre class="text-xs bg-card p-4 rounded border border-status-info-border overflow-x-auto">
 {`// tailwind.config.js
 module.exports = {
   theme: {
@@ -408,9 +408,9 @@ module.exports = {
       </pre>
     </div>
 
-    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6">
-      <h3 class="font-semibold text-gray-700 dark:text-gray-300 mb-4">What to do next:</h3>
-      <ol class="list-decimal list-inside text-sm text-gray-600 dark:text-gray-400 space-y-2">
+    <div class="bg-muted rounded-lg p-6">
+      <h3 class="font-semibold text-text-secondary mb-4">What to do next:</h3>
+      <ol class="list-decimal list-inside text-sm text-text-secondary space-y-2">
         <li><strong>Easy fixes (do now):</strong> Convert min-w-[140px] → min-w-36, top-[22px] right-[19px] → top-5 right-5</li>
         <li><strong>Medium effort:</strong> Add the tailwind.config.js extensions above to micdrop-frontend</li>
         <li><strong>Keep as-is:</strong> max-h-[80vh] and pb-[max(...safe-area...)] are correct uses of arbitrary values</li>

package/dist/stories/PatternsGallery.spec.js

@@ -356,7 +356,7 @@ describe('PatternsGallery', () => {
     it('applies light mode background by default', () => {
       const { container } = render(PatternsGallery);
       const mainDiv = container.querySelector('.min-h-screen');
-      expect(mainDiv).toHaveClass('bg-gray-50');
+      expect(mainDiv).toHaveClass('bg-bg-secondary');
     });
 
     it('applies dark mode background when dark mode is toggled', async () => {
@@ -366,14 +366,14 @@ describe('PatternsGallery', () => {
       await fireEvent.click(toggleButton);
 
       const mainDiv = container.querySelector('.min-h-screen');
-      expect(mainDiv).toHaveClass('bg-gray-900');
+      expect(mainDiv).toHaveClass('bg-bg-primary');
     });
 
     it('applies correct section styling in light mode', () => {
       const { container } = render(PatternsGallery);
       const sections = container.querySelectorAll('section');
       expect(sections.length).toBeGreaterThan(0);
-      expect(sections[0]).toHaveClass('bg-white');
+      expect(sections[0]).toHaveClass('bg-card');
     });
   });