@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/stories/ButtonAuditReview.svelte

@@ -162,42 +162,42 @@
 
 <div class="p-6 max-w-7xl mx-auto space-y-8">
   <div class="text-center mb-8">
-    <h1 class="text-3xl font-bold text-gray-900 mb-2">Button Audit Review</h1>
-    <p class="text-gray-600">Last updated: December 30, 2024</p>
+    <h1 class="text-3xl font-bold text-text-primary mb-2">Button Audit Review</h1>
+    <p class="text-text-secondary">Last updated: December 30, 2024</p>
   </div>
 
   <!-- Summary Cards -->
   <div class="grid grid-cols-3 gap-6 mb-8">
-    <div class="p-6 bg-yellow-50 border-2 border-yellow-400 rounded-lg text-center">
-      <div class="text-4xl font-bold text-yellow-600">{totalWithoutVariant}</div>
-      <div class="text-sm text-gray-600 mt-2">Buttons Without Variant</div>
-      <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-yellow-200 text-yellow-800">Needs Review</span>
+    <div class="p-6 bg-status-warning-bg border-2 border-status-warning-border rounded-lg text-center">
+      <div class="text-4xl font-bold text-accent-warning">{totalWithoutVariant}</div>
+      <div class="text-sm text-text-secondary mt-2">Buttons Without Variant</div>
+      <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-status-warning-bg text-status-warning-text">Needs Review</span>
     </div>
-    <div class="p-6 bg-green-50 border-2 border-green-400 rounded-lg text-center">
-      <div class="text-4xl font-bold text-green-600">{recentFixes.length}</div>
-      <div class="text-sm text-gray-600 mt-2">Recent Fix Sessions</div>
-      <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-green-200 text-green-800">Today</span>
+    <div class="p-6 bg-status-success-bg border-2 border-accent-success rounded-lg text-center">
+      <div class="text-4xl font-bold text-accent-success">{recentFixes.length}</div>
+      <div class="text-sm text-text-secondary mt-2">Recent Fix Sessions</div>
+      <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-status-success-bg text-status-success-text">Today</span>
     </div>
-    <div class="p-6 bg-blue-50 border-2 border-blue-400 rounded-lg text-center">
-      <div class="text-4xl font-bold text-blue-600">{validVariants.length}</div>
-      <div class="text-sm text-gray-600 mt-2">Valid Variants</div>
-      <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-blue-200 text-blue-800">Reference</span>
+    <div class="p-6 bg-status-info-bg border-2 border-brand-primary rounded-lg text-center">
+      <div class="text-4xl font-bold text-brand-primary">{validVariants.length}</div>
+      <div class="text-sm text-text-secondary mt-2">Valid Variants</div>
+      <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-status-info-bg text-status-info-text">Reference</span>
     </div>
   </div>
 
   <!-- Buttons Without Variant -->
-  <section class="border-2 border-yellow-400 rounded-lg p-6 bg-yellow-50">
-    <h2 class="text-xl font-bold text-yellow-700 mb-4 flex items-center gap-2">
+  <section class="border-2 border-status-warning-border rounded-lg p-6 bg-status-warning-bg">
+    <h2 class="text-xl font-bold text-status-warning-text mb-4 flex items-center gap-2">
       <span class="text-2xl">⚠</span> Buttons Without Variant (Default to blue-solid)
     </h2>
-    <p class="text-gray-600 mb-4">
-      These buttons have no <code class="bg-white px-2 py-0.5 rounded text-sm">variant</code> prop and render as solid blue by default.
+    <p class="text-text-secondary mb-4">
+      These buttons have no <code class="bg-card px-2 py-0.5 rounded text-sm">variant</code> prop and render as solid blue by default.
       Review each to determine if blue-solid is correct or if another variant should be used.
     </p>
 
-    <div class="overflow-x-auto bg-white rounded-lg">
+    <div class="overflow-x-auto bg-card rounded-lg">
       <table class="w-full text-sm">
-        <thead class="bg-gray-100">
+        <thead class="bg-muted">
           <tr>
             <th class="px-4 py-3 text-left font-medium">File</th>
             <th class="px-4 py-3 text-center font-medium">Count</th>
@@ -207,16 +207,16 @@
         </thead>
         <tbody>
           {#each buttonsWithoutVariant as item}
-            <tr class="border-b border-gray-200">
+            <tr class="border-b border-border">
               <td class="px-4 py-3">
-                <code class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
+                <code class="text-xs bg-status-warning-bg text-status-warning-text px-2 py-1 rounded">
                   {item.file}
                 </code>
               </td>
               <td class="px-4 py-3 text-center font-medium">{item.count}</td>
-              <td class="px-4 py-3 text-gray-600">{item.context}</td>
+              <td class="px-4 py-3 text-text-secondary">{item.context}</td>
               <td class="px-4 py-3 text-center">
-                <span class="px-2 py-1 text-xs rounded-full bg-yellow-200 text-yellow-800">Review</span>
+                <span class="px-2 py-1 text-xs rounded-full bg-status-warning-bg text-status-warning-text">Review</span>
               </td>
             </tr>
           {/each}
@@ -224,8 +224,8 @@
       </table>
     </div>
 
-    <div class="mt-4 p-4 bg-yellow-100 rounded-lg">
-      <p class="text-sm text-yellow-800">
+    <div class="mt-4 p-4 bg-status-warning-bg rounded-lg">
+      <p class="text-sm text-status-warning-text">
         <strong>Total: ~{totalWithoutVariant} buttons</strong> across the codebase need variant review.
         Many may be intentionally blue-solid (CTAs), but others may need gray-outline, menu-item, or icon variants.
       </p>
@@ -233,48 +233,48 @@
   </section>
 
   <!-- Visual Examples: Current vs Recommended -->
-  <section class="border-2 border-orange-400 rounded-lg p-6 bg-orange-50">
-    <h2 class="text-xl font-bold text-orange-700 mb-4 flex items-center gap-2">
+  <section class="border-2 border-accent-warning rounded-lg p-6 bg-status-warning-bg">
+    <h2 class="text-xl font-bold text-accent-warning mb-4 flex items-center gap-2">
       <span class="text-2xl">👁</span> Visual Comparison: Current vs Recommended
     </h2>
-    <p class="text-gray-600 mb-6">
+    <p class="text-text-secondary mb-6">
       These examples show how buttons WITHOUT a variant currently render (blue-solid default) versus how they SHOULD render with the correct variant.
     </p>
 
     <div class="space-y-8">
       {#each visualExamples as category}
-        <div class="bg-white rounded-lg p-5 border border-orange-200">
+        <div class="bg-card rounded-lg p-5 border border-accent-warning">
           <div class="flex items-center gap-3 mb-2">
-            <h3 class="font-bold text-gray-900">{category.category}</h3>
+            <h3 class="font-bold text-text-primary">{category.category}</h3>
             {#if category.examples[0]?.correct}
-              <span class="px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700">Correct</span>
+              <span class="px-2 py-0.5 text-xs rounded-full bg-status-success-bg text-status-success-text">Correct</span>
             {:else}
-              <span class="px-2 py-0.5 text-xs rounded-full bg-red-100 text-red-700">Needs Fix</span>
+              <span class="px-2 py-0.5 text-xs rounded-full bg-status-error-bg text-status-error-text">Needs Fix</span>
             {/if}
           </div>
-          <p class="text-sm text-gray-500 mb-4">{category.description}</p>
+          <p class="text-sm text-muted-foreground mb-4">{category.description}</p>
 
           <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
             {#each category.examples as example}
-              <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
-                <div class="text-xs text-gray-500 mb-3 font-mono truncate" title={example.location}>
+              <div class="border border-border rounded-lg p-4 bg-bg-secondary">
+                <div class="text-xs text-muted-foreground mb-3 font-mono truncate" title={example.location}>
                   {example.location}
                 </div>
 
                 <div class="space-y-3">
                   <!-- Current (no variant) -->
                   <div>
-                    <div class="text-xs text-red-600 font-medium mb-1">Current (no variant):</div>
+                    <div class="text-xs text-accent-danger font-medium mb-1">Current (no variant):</div>
                     <Button size="sm">{example.label}</Button>
                   </div>
 
                   <!-- Arrow -->
-                  <div class="text-center text-gray-400">↓</div>
+                  <div class="text-center text-muted-foreground">↓</div>
 
                   <!-- Recommended -->
                   <div>
-                    <div class="text-xs text-green-600 font-medium mb-1">
-                      Recommended: <code class="bg-green-100 px-1 rounded">{example.recommended}</code>
+                    <div class="text-xs text-accent-success font-medium mb-1">
+                      Recommended: <code class="bg-status-success-bg px-1 rounded">{example.recommended}</code>
                     </div>
                     <Button variant={example.recommended} size="sm">{example.label}</Button>
                   </div>
@@ -286,8 +286,8 @@
       {/each}
     </div>
 
-    <div class="mt-6 p-4 bg-orange-100 rounded-lg">
-      <p class="text-sm text-orange-800">
+    <div class="mt-6 p-4 bg-status-warning-bg rounded-lg">
+      <p class="text-sm text-status-warning-text">
         <strong>Key insight:</strong> Buttons without variant all render as solid blue (left), making it hard to distinguish
         primary actions from secondary ones. Adding proper variants (right) creates visual hierarchy.
       </p>
@@ -295,19 +295,19 @@
   </section>
 
   <!-- Recent Fixes -->
-  <section class="border-2 border-green-400 rounded-lg p-6 bg-green-50">
-    <h2 class="text-xl font-bold text-green-700 mb-4 flex items-center gap-2">
+  <section class="border-2 border-accent-success rounded-lg p-6 bg-status-success-bg">
+    <h2 class="text-xl font-bold text-status-success-text mb-4 flex items-center gap-2">
       <span class="text-2xl">✓</span> Recent Fixes (December 30, 2024)
     </h2>
 
     <div class="space-y-6">
       {#each recentFixes as fix}
-        <div class="bg-white rounded-lg p-4 border-l-4 border-green-500">
-          <h3 class="font-semibold text-gray-900 mb-2">{fix.description}</h3>
-          <ul class="text-sm text-gray-600 space-y-1">
+        <div class="bg-card rounded-lg p-4 border-l-4 border-accent-success">
+          <h3 class="font-semibold text-text-primary mb-2">{fix.description}</h3>
+          <ul class="text-sm text-text-secondary space-y-1">
             {#each fix.fixes as item}
               <li class="flex items-start gap-2">
-                <span class="text-green-500 mt-0.5">✓</span>
+                <span class="text-accent-success mt-0.5">✓</span>
                 {item}
               </li>
             {/each}
@@ -318,93 +318,93 @@
   </section>
 
   <!-- Valid Variants Reference -->
-  <section class="border rounded-lg p-6 bg-white">
-    <h2 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
-      <span class="text-blue-600">ℹ</span> Valid Variants Reference
+  <section class="border rounded-lg p-6 bg-card">
+    <h2 class="text-xl font-bold text-text-primary mb-4 flex items-center gap-2">
+      <span class="text-brand-primary">ℹ</span> Valid Variants Reference
     </h2>
 
     <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
       {#each validVariants as v}
-        <div class="border border-gray-200 rounded-lg p-4">
+        <div class="border border-border rounded-lg p-4">
           <div class="flex items-center gap-2 mb-3">
             <Button variant={v.name} size="sm">{v.name}</Button>
           </div>
-          <code class="text-xs bg-gray-100 px-2 py-1 rounded block mb-1">
+          <code class="text-xs bg-muted px-2 py-1 rounded block mb-1">
             variant="{v.name}"
           </code>
           {#if v.alias}
-            <code class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded block mb-2">
+            <code class="text-xs bg-status-info-bg text-brand-primary px-2 py-1 rounded block mb-2">
               or: "{v.alias}"
             </code>
           {/if}
-          <p class="text-xs text-gray-500">{v.usage}</p>
+          <p class="text-xs text-muted-foreground">{v.usage}</p>
         </div>
       {/each}
     </div>
   </section>
 
   <!-- Decision Guide -->
-  <section class="border-2 border-blue-400 rounded-lg p-6 bg-blue-50">
-    <h2 class="text-xl font-bold text-blue-700 mb-4">Button Variant Decision Guide</h2>
+  <section class="border-2 border-brand-primary rounded-lg p-6 bg-status-info-bg">
+    <h2 class="text-xl font-bold text-brand-primary mb-4">Button Variant Decision Guide</h2>
 
     <div class="grid grid-cols-2 gap-6">
-      <div class="bg-white rounded-lg p-4">
-        <h3 class="font-semibold text-gray-900 mb-3">When to use each variant</h3>
+      <div class="bg-card rounded-lg p-4">
+        <h3 class="font-semibold text-text-primary mb-3">When to use each variant</h3>
         <ul class="space-y-2 text-sm">
           <li class="flex items-start gap-2">
-            <code class="bg-blue-100 text-blue-800 px-1 rounded text-xs shrink-0">default</code>
-            <span class="text-gray-600">Primary CTAs: Save, Submit, + New</span>
+            <code class="bg-status-info-bg text-status-info-text px-1 rounded text-xs shrink-0">default</code>
+            <span class="text-text-secondary">Primary CTAs: Save, Submit, + New</span>
           </li>
           <li class="flex items-start gap-2">
-            <code class="bg-blue-100 text-blue-800 px-1 rounded text-xs shrink-0">outline</code>
-            <span class="text-gray-600">Secondary CTAs: Invite, Export</span>
+            <code class="bg-status-info-bg text-status-info-text px-1 rounded text-xs shrink-0">outline</code>
+            <span class="text-text-secondary">Secondary CTAs: Invite, Export</span>
           </li>
           <li class="flex items-start gap-2">
-            <code class="bg-gray-100 text-gray-800 px-1 rounded text-xs shrink-0">alternative</code>
-            <span class="text-gray-600">Cancel, Close, Filter, Actions triggers</span>
+            <code class="bg-muted text-text-primary px-1 rounded text-xs shrink-0">alternative</code>
+            <span class="text-text-secondary">Cancel, Close, Filter, Actions triggers</span>
           </li>
           <li class="flex items-start gap-2">
-            <code class="bg-red-100 text-red-800 px-1 rounded text-xs shrink-0">red</code>
-            <span class="text-gray-600">Delete confirmations, destructive actions</span>
+            <code class="bg-status-error-bg text-status-error-text px-1 rounded text-xs shrink-0">red</code>
+            <span class="text-text-secondary">Delete confirmations, destructive actions</span>
           </li>
           <li class="flex items-start gap-2">
-            <code class="bg-gray-100 text-gray-800 px-1 rounded text-xs shrink-0">ghost</code>
-            <span class="text-gray-600">Tertiary actions: Edit, View, Show more</span>
+            <code class="bg-muted text-text-primary px-1 rounded text-xs shrink-0">ghost</code>
+            <span class="text-text-secondary">Tertiary actions: Edit, View, Show more</span>
           </li>
           <li class="flex items-start gap-2">
-            <code class="bg-gray-100 text-gray-800 px-1 rounded text-xs shrink-0">menu-item</code>
-            <span class="text-gray-600">Dropdown items, list selections</span>
+            <code class="bg-muted text-text-primary px-1 rounded text-xs shrink-0">menu-item</code>
+            <span class="text-text-secondary">Dropdown items, list selections</span>
           </li>
           <li class="flex items-start gap-2">
-            <code class="bg-gray-100 text-gray-800 px-1 rounded text-xs shrink-0">icon</code>
-            <span class="text-gray-600">Close buttons, drag handles</span>
+            <code class="bg-muted text-text-primary px-1 rounded text-xs shrink-0">icon</code>
+            <span class="text-text-secondary">Close buttons, drag handles</span>
           </li>
         </ul>
       </div>
 
-      <div class="bg-white rounded-lg p-4">
-        <h3 class="font-semibold text-gray-900 mb-3">Common mistakes</h3>
-        <ul class="space-y-2 text-sm text-gray-600">
+      <div class="bg-card rounded-lg p-4">
+        <h3 class="font-semibold text-text-primary mb-3">Common mistakes</h3>
+        <ul class="space-y-2 text-sm text-text-secondary">
           <li class="flex items-start gap-2">
-            <span class="text-red-500">✗</span>
+            <span class="text-accent-danger">✗</span>
             <span>No variant on dropdown items → defaults to solid blue</span>
           </li>
           <li class="flex items-start gap-2">
-            <span class="text-red-500">✗</span>
+            <span class="text-accent-danger">✗</span>
             <span>No variant on Cancel → should be alternative</span>
           </li>
           <li class="flex items-start gap-2">
-            <span class="text-red-500">✗</span>
+            <span class="text-accent-danger">✗</span>
             <span>No variant on close/X buttons → should be icon</span>
           </li>
           <li class="flex items-start gap-2">
-            <span class="text-red-500">✗</span>
+            <span class="text-accent-danger">✗</span>
             <span>Invalid variant names fall back to default (solid blue)</span>
           </li>
         </ul>
 
-        <div class="mt-4 p-3 bg-blue-100 rounded-lg">
-          <p class="text-xs text-blue-800">
+        <div class="mt-4 p-3 bg-status-info-bg rounded-lg">
+          <p class="text-xs text-status-info-text">
             <strong>Tip:</strong> When in doubt, use alternative for secondary actions
             and default only for the primary action.
           </p>
@@ -414,12 +414,12 @@
   </section>
 
   <!-- How to Find Issues -->
-  <section class="border rounded-lg p-6 bg-gray-50">
-    <h2 class="text-xl font-bold text-gray-900 mb-4">How to Find Buttons Without Variant</h2>
+  <section class="border rounded-lg p-6 bg-bg-secondary">
+    <h2 class="text-xl font-bold text-text-primary mb-4">How to Find Buttons Without Variant</h2>
 
-    <div class="bg-white rounded-lg p-4">
-      <p class="text-sm text-gray-600 mb-2">Run this command in micdrop-frontend:</p>
-      <code class="block bg-gray-900 text-green-400 p-3 rounded text-xs overflow-x-auto">
+    <div class="bg-card rounded-lg p-4">
+      <p class="text-sm text-text-secondary mb-2">Run this command in micdrop-frontend:</p>
+      <code class="block bg-bg-primary text-accent-success p-3 rounded text-xs overflow-x-auto">
         grep -rn "&lt;Button" --include="*.svelte" src | grep -v "variant="
       </code>
     </div>

package/dist/stories/ButtonGridView.spec.js

@@ -155,7 +155,7 @@ describe('ButtonGridView Component', () => {
     it('renders all buttons from manifest', () => {
       const { container } = render(ButtonGridView);
       // Each button is in a card with specific structure
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(10);
     });
 
@@ -213,7 +213,7 @@ describe('ButtonGridView Component', () => {
       await fireEvent.click(toggleButton);
 
       const darkButton = screen.getByRole('button', { name: /🌙/i });
-      expect(darkButton).toHaveClass('bg-gray-800', 'text-white');
+      expect(darkButton).toHaveClass('bg-bg-secondary', 'text-white');
     });
   });
 
@@ -230,7 +230,7 @@ describe('ButtonGridView Component', () => {
 
       await fireEvent.input(searchInput, { target: { value: 'Green' } });
 
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(1);
     });
 
@@ -240,7 +240,7 @@ describe('ButtonGridView Component', () => {
 
       await fireEvent.input(searchInput, { target: { value: 'AnotherComponent' } });
 
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(5);
     });
 
@@ -250,7 +250,7 @@ describe('ButtonGridView Component', () => {
 
       await fireEvent.input(searchInput, { target: { value: 'ghost' } });
 
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(1);
     });
 
@@ -260,7 +260,7 @@ describe('ButtonGridView Component', () => {
 
       await fireEvent.input(searchInput, { target: { value: 'GREEN' } });
 
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(1);
     });
 
@@ -280,7 +280,7 @@ describe('ButtonGridView Component', () => {
       await fireEvent.input(searchInput, { target: { value: 'Green' } });
       await fireEvent.input(searchInput, { target: { value: '' } });
 
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(10);
     });
   });
@@ -309,7 +309,7 @@ describe('ButtonGridView Component', () => {
 
       await fireEvent.change(variantSelect, { target: { value: 'blue-solid' } });
 
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(2);
     });
 
@@ -348,7 +348,7 @@ describe('ButtonGridView Component', () => {
 
       await fireEvent.change(sizeSelect, { target: { value: 'xs' } });
 
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(2);
     });
 
@@ -373,7 +373,7 @@ describe('ButtonGridView Component', () => {
       await fireEvent.change(variantSelect, { target: { value: 'blue-solid' } });
       await fireEvent.change(sizeSelect, { target: { value: 'md' } });
 
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(2);
     });
 
@@ -385,7 +385,7 @@ describe('ButtonGridView Component', () => {
       await fireEvent.input(searchInput, { target: { value: 'Button' } });
       await fireEvent.change(variantSelect, { target: { value: 'red-solid' } });
 
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(1);
     });
 
@@ -400,7 +400,7 @@ describe('ButtonGridView Component', () => {
       await fireEvent.change(variantSelect, { target: { value: 'blue-solid' } });
       await fireEvent.change(sizeSelect, { target: { value: 'md' } });
 
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(1);
     });
   });
@@ -418,7 +418,7 @@ describe('ButtonGridView Component', () => {
       const { container } = render(ButtonGridView);
 
       // Check that size badges exist in the metadata sections
-      const sizeBadges = container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded.bg-gray-100');
+      const sizeBadges = container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded.bg-muted');
       expect(sizeBadges.length).toBeGreaterThan(0);
 
       // Check for specific size values
@@ -455,7 +455,7 @@ describe('ButtonGridView Component', () => {
       const { container } = render(ButtonGridView);
 
       // Should render all button cards including those with (no text)
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(10);
 
       // Check that we have actual button elements inside
@@ -507,7 +507,7 @@ describe('ButtonGridView Component', () => {
       const blueSolidBadge = Array.from(container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded'))
         .find(el => el.textContent === 'blue-solid');
 
-      expect(blueSolidBadge).toHaveClass('bg-blue-100', 'text-blue-700');
+      expect(blueSolidBadge).toHaveClass('bg-status-info-bg', 'text-brand-primary');
     });
 
     it('applies correct color for gray-outline variant', () => {
@@ -515,7 +515,7 @@ describe('ButtonGridView Component', () => {
       const grayOutlineBadge = Array.from(container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded'))
         .find(el => el.textContent === 'gray-outline');
 
-      expect(grayOutlineBadge).toHaveClass('bg-gray-100', 'text-gray-700');
+      expect(grayOutlineBadge).toHaveClass('bg-muted', 'text-text-secondary');
     });
 
     it('applies correct color for red-solid variant', () => {
@@ -523,7 +523,7 @@ describe('ButtonGridView Component', () => {
       const redSolidBadge = Array.from(container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded'))
         .find(el => el.textContent === 'red-solid');
 
-      expect(redSolidBadge).toHaveClass('bg-red-100', 'text-red-700');
+      expect(redSolidBadge).toHaveClass('bg-status-error-bg', 'text-status-error-text');
     });
 
     it('applies correct color for green-solid variant', () => {
@@ -531,7 +531,7 @@ describe('ButtonGridView Component', () => {
       const greenSolidBadge = Array.from(container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded'))
         .find(el => el.textContent === 'green-solid');
 
-      expect(greenSolidBadge).toHaveClass('bg-green-100', 'text-green-700');
+      expect(greenSolidBadge).toHaveClass('bg-status-success-bg', 'text-status-success-text');
     });
 
     it('applies correct color for icon variant', () => {
@@ -539,7 +539,7 @@ describe('ButtonGridView Component', () => {
       const iconBadge = Array.from(container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded'))
         .find(el => el.textContent === 'icon');
 
-      expect(iconBadge).toHaveClass('bg-purple-100', 'text-purple-700');
+      expect(iconBadge).toHaveClass('bg-status-info-bg', 'text-brand-primary');
     });
 
     it('applies correct color for ghost variant', () => {
@@ -547,7 +547,7 @@ describe('ButtonGridView Component', () => {
       const ghostBadge = Array.from(container.querySelectorAll('.px-1\\.5.py-0\\.5.rounded'))
         .find(el => el.textContent === 'ghost');
 
-      expect(ghostBadge).toHaveClass('bg-yellow-100', 'text-yellow-700');
+      expect(ghostBadge).toHaveClass('bg-status-warning-bg', 'text-status-warning-text');
     });
   });
 
@@ -593,12 +593,12 @@ describe('ButtonGridView Component', () => {
       );
     });
 
-    it('applies dark mode classes throughout', () => {
+    it('applies token-based classes for theming throughout', () => {
       const { container } = render(ButtonGridView);
 
-      // Check various elements have dark mode classes
-      const darkElements = container.querySelectorAll('[class*="dark:"]');
-      expect(darkElements.length).toBeGreaterThan(0);
+      // Check various elements have token-based classes (dark mode via CSS custom properties)
+      const tokenElements = container.querySelectorAll('[class*="bg-card"], [class*="text-text-primary"]');
+      expect(tokenElements.length).toBeGreaterThan(0);
     });
   });
 
@@ -610,7 +610,7 @@ describe('ButtonGridView Component', () => {
       await fireEvent.input(searchInput, { target: { value: 'nonexistent' } });
 
       expect(screen.getByText(/Showing 0 of 10 buttons/i)).toBeInTheDocument();
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(0);
     });
 
@@ -631,7 +631,7 @@ describe('ButtonGridView Component', () => {
       await fireEvent.change(variantSelect, { target: { value: 'all' } });
       await fireEvent.change(sizeSelect, { target: { value: 'all' } });
 
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(10);
     });
   });
@@ -641,7 +641,7 @@ describe('ButtonGridView Component', () => {
       const { container } = render(ButtonGridView);
 
       // Should have 10 buttons total from 2 routes
-      const buttonCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800.rounded-lg.p-3');
+      const buttonCards = container.querySelectorAll('.bg-card.rounded-lg.p-3');
       expect(buttonCards.length).toBe(10);
     });