@getmicdrop/svelte-components 5.21.0 → 5.21.1

package/dist/stories/ButtonAuditDashboard.spec.js

@@ -133,7 +133,7 @@ describe('ButtonAuditDashboard', () => {
     it('should have proper background color', () => {
       const { container } = render(ButtonAuditDashboard);
       const mainContainer = container.querySelector('.min-h-screen');
-      expect(mainContainer).toHaveClass('bg-gray-50', 'dark:bg-gray-900');
+      expect(mainContainer).toHaveClass('bg-bg-secondary');
     });
   });
 
@@ -655,8 +655,8 @@ describe('ButtonAuditDashboard', () => {
       const { container } = render(ButtonAuditDashboard);
 
       // Check for specific color classes
-      expect(container.querySelector('.bg-blue-100.text-blue-800')).toBeInTheDocument();
-      expect(container.querySelector('.bg-gray-100.text-gray-800')).toBeInTheDocument();
+      expect(container.querySelector('.bg-status-info-bg.text-status-info-text')).toBeInTheDocument();
+      expect(container.querySelector('.bg-muted.text-text-primary')).toBeInTheDocument();
     });
 
     it('should render in grid layout', () => {
@@ -698,9 +698,9 @@ describe('ButtonAuditDashboard', () => {
       const { container } = render(ButtonAuditDashboard);
 
       // Check that variant distribution section has color classes
-      expect(container.querySelector('.bg-blue-100')).toBeInTheDocument();
-      expect(container.querySelector('.bg-red-100')).toBeInTheDocument();
-      expect(container.querySelector('.bg-purple-100')).toBeInTheDocument();
+      expect(container.querySelector('.bg-status-info-bg')).toBeInTheDocument();
+      expect(container.querySelector('.bg-status-error-bg')).toBeInTheDocument();
+      expect(container.querySelector('.bg-status-info-bg')).toBeInTheDocument();
     });
   });
 
@@ -771,12 +771,12 @@ describe('ButtonAuditDashboard', () => {
   });
 
   describe('Dark Mode Support', () => {
-    it('should have dark mode classes on elements', () => {
+    it('should use token-based classes for theming', () => {
       const { container } = render(ButtonAuditDashboard);
 
-      // Check for dark: prefixed classes
-      const darkModeElements = container.querySelectorAll('[class*="dark:"]');
-      expect(darkModeElements.length).toBeGreaterThan(0);
+      // Check for token-based classes (dark mode handled by CSS custom properties)
+      const tokenElements = container.querySelectorAll('[class*="bg-bg-secondary"], [class*="text-text-primary"]');
+      expect(tokenElements.length).toBeGreaterThan(0);
     });
 
     it('should toggle dark classes on html element', async () => {
@@ -794,11 +794,11 @@ describe('ButtonAuditDashboard', () => {
       render(ButtonAuditDashboard);
       const darkModeButton = screen.getByRole('button', { name: /Dark/ });
 
-      expect(darkModeButton).toHaveClass('bg-gray-800');
+      expect(darkModeButton).toHaveClass('bg-bg-secondary');
 
       await user.click(darkModeButton);
       const lightModeButton = screen.getByRole('button', { name: /Light/ });
-      expect(lightModeButton).toHaveClass('bg-yellow-500');
+      expect(lightModeButton).toHaveClass('bg-accent-warning');
     });
   });
 

package/dist/stories/ButtonAuditDashboard.svelte

@@ -93,16 +93,16 @@
   // Get variant badge color
   function getVariantColor(variant) {
     switch (variant) {
-      case 'blue-solid': return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
-      case 'gray-outline': return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
-      case 'blue-outline': return 'bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300';
-      case 'gray-text': return 'bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-400';
-      case 'red-solid': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
-      case 'red-outline': return 'bg-red-50 text-red-700 dark:bg-red-900/50 dark:text-red-300';
-      case 'green-solid': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
-      case 'icon': return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
-      case 'ghost': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
-      default: return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
+      case 'blue-solid': return 'bg-status-info-bg text-status-info-text';
+      case 'gray-outline': return 'bg-muted text-text-primary';
+      case 'blue-outline': return 'bg-status-info-bg text-brand-primary';
+      case 'gray-text': return 'bg-bg-secondary text-text-secondary';
+      case 'red-solid': return 'bg-status-error-bg text-status-error-text';
+      case 'red-outline': return 'bg-status-error-bg text-status-error-text';
+      case 'green-solid': return 'bg-status-success-bg text-status-success-text';
+      case 'icon': return 'bg-status-info-bg text-brand-primary';
+      case 'ghost': return 'bg-status-warning-bg text-status-warning-text';
+      default: return 'bg-muted text-text-primary';
     }
   }
 
@@ -159,14 +159,14 @@
     .sort((a, b) => b.buttonCount - a.buttonCount);
 </script>
 
-<div class="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
+<div class="min-h-screen bg-bg-secondary transition-colors">
   <!-- Sticky Header -->
-  <div class="sticky top-0 z-50 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow">
+  <div class="sticky top-0 z-50 bg-card border-b border-border shadow">
     <div class="max-w-7xl mx-auto px-4 py-4">
       <div class="flex flex-wrap items-center justify-between gap-4">
         <div>
-          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Button Audit Dashboard</h1>
-          <p class="text-sm text-gray-500 dark:text-gray-400">
+          <h1 class="text-2xl font-bold text-text-primary">Button Audit Dashboard</h1>
+          <p class="text-sm text-muted-foreground">
             {filteredStats.shown} of {filteredStats.total} buttons from micdrop-frontend
             <span class="text-xs ml-2">Generated: {new Date(manifest.generated).toLocaleString()}</span>
           </p>
@@ -176,13 +176,13 @@
           <!-- Expand/Collapse All -->
           <button
             onclick={expandAll}
-            class="px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+            class="px-3 py-1.5 text-sm rounded-lg border border-stroke-primary hover:bg-muted text-text-secondary"
           >
             Expand All
           </button>
           <button
             onclick={collapseAll}
-            class="px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+            class="px-3 py-1.5 text-sm rounded-lg border border-stroke-primary hover:bg-muted text-text-secondary"
           >
             Collapse All
           </button>
@@ -191,8 +191,8 @@
           <button
             onclick={toggleDarkMode}
             class="px-4 py-2 rounded-lg font-medium transition-all {isDark
-              ? 'bg-yellow-500 text-black hover:bg-yellow-400'
-              : 'bg-gray-800 text-white hover:bg-gray-700'}"
+              ? 'bg-accent-warning text-text-primary hover:bg-accent-warning'
+              : 'bg-bg-secondary text-white hover:bg-bg-secondary'}"
           >
             {#if isDark}
               ☀️ Light
@@ -211,14 +211,14 @@
             type="text"
             bind:value={searchQuery}
             placeholder="Search button text..."
-            class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400"
+            class="w-full px-3 py-2 rounded-lg border border-stroke-primary bg-card text-text-primary placeholder-gray-400"
           />
         </div>
 
         <!-- Variant Filter -->
         <select
           bind:value={variantFilter}
-          class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+          class="px-3 py-2 rounded-lg border border-stroke-primary bg-card text-text-primary"
         >
           <option value="all">All Variants</option>
           {#each allVariants as variant}
@@ -229,7 +229,7 @@
         <!-- Size Filter -->
         <select
           bind:value={sizeFilter}
-          class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+          class="px-3 py-2 rounded-lg border border-stroke-primary bg-card text-text-primary"
         >
           <option value="all">All Sizes</option>
           {#each allSizes as size}
@@ -249,19 +249,19 @@
 
       {#if visibleButtons.length > 0}
         <!-- Category Section -->
-        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+        <div class="bg-card rounded-xl border border-border overflow-hidden">
           <!-- Category Header -->
           <button
             onclick={() => toggleCategory(category.name)}
-            class="w-full flex items-center justify-between px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+            class="w-full flex items-center justify-between px-4 py-3 hover:bg-bg-secondary transition-colors"
           >
             <div class="flex items-center gap-3">
               <span class="text-xl">{expandedCategories.has(category.name) ? '▼' : '▶'}</span>
-              <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{category.name}</h2>
-              <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+              <h2 class="text-lg font-semibold text-text-primary">{category.name}</h2>
+              <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-status-info-bg text-status-info-text">
                 {visibleButtons.length} buttons
               </span>
-              <span class="text-sm text-gray-500 dark:text-gray-400">
+              <span class="text-sm text-muted-foreground">
                 in {category.routes.length} files
               </span>
             </div>
@@ -269,24 +269,24 @@
 
           <!-- Category Content -->
           {#if expandedCategories.has(category.name)}
-            <div class="border-t border-gray-200 dark:border-gray-700">
+            <div class="border-t border-border">
               {#each category.routes as route}
                 {@const routeVisibleButtons = route.buttons.filter(shouldShowButton)}
 
                 {#if routeVisibleButtons.length > 0}
                   <!-- File Section -->
-                  <div class="border-b border-gray-100 dark:border-gray-700/50 last:border-b-0">
+                  <div class="border-b border-border last:border-b-0">
                     <button
                       onclick={() => toggleFile(route.fullPath)}
-                      class="w-full flex items-center justify-between px-6 py-2 hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors text-left"
+                      class="w-full flex items-center justify-between px-6 py-2 hover:bg-bg-secondary transition-colors text-left"
                     >
                       <div class="flex items-center gap-2 min-w-0">
-                        <span class="text-gray-400">{expandedFiles.has(route.fullPath) ? '▾' : '▸'}</span>
-                        <code class="text-sm text-gray-600 dark:text-gray-300 truncate">{route.file}</code>
+                        <span class="text-muted-foreground">{expandedFiles.has(route.fullPath) ? '▾' : '▸'}</span>
+                        <code class="text-sm text-text-secondary truncate">{route.file}</code>
                         <a
                           href={getVSCodeLink(route.fullPath, 1)}
                           onclick={(e) => e.stopPropagation()}
-                          class="text-xs text-blue-500 hover:text-blue-700 dark:text-blue-400 hover:underline"
+                          class="text-xs text-brand-primary hover:text-brand-primary hover:underline"
                           title="Open in VS Code"
                         >
                           📂 Open
@@ -301,13 +301,13 @@
                             tabindex="0"
                             onclick={(e) => { e.stopPropagation(); openPreview(route.route, route.file); }}
                             onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); openPreview(route.route, route.file); }}}
-                            class="px-2 py-0.5 text-xs rounded bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-800 cursor-pointer"
+                            class="px-2 py-0.5 text-xs rounded bg-status-success-bg text-status-success-text hover:bg-status-success-bg/80 cursor-pointer"
                             title="Preview this page"
                           >
                             👁️ Preview
                           </span>
                         {/if}
-                        <span class="text-xs text-gray-500 dark:text-gray-400">
+                        <span class="text-xs text-muted-foreground">
                           {routeVisibleButtons.length} buttons
                         </span>
                       </div>
@@ -315,12 +315,12 @@
 
                     <!-- Buttons Grid -->
                     {#if expandedFiles.has(route.fullPath)}
-                      <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900/50">
+                      <div class="px-6 py-4 bg-bg-secondary">
                         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                           {#each routeVisibleButtons as button, idx}
-                            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-600 space-y-3">
+                            <div class="bg-card rounded-lg p-4 border border-border space-y-3">
                               <!-- Button Preview -->
-                              <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg min-h-[60px]">
+                              <div class="flex items-center justify-center p-4 bg-muted rounded-lg min-h-[60px]">
                                 <Button
                                   variant={button.variant}
                                   size={button.size}
@@ -339,32 +339,32 @@
                                   <span class="px-2 py-0.5 text-xs font-medium rounded {getVariantColor(button.variant)}">
                                     {button.variant}
                                   </span>
-                                  <span class="px-2 py-0.5 text-xs font-medium rounded bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
+                                  <span class="px-2 py-0.5 text-xs font-medium rounded bg-muted text-text-secondary">
                                     {button.size}
                                   </span>
                                   {#if button.loading}
-                                    <span class="px-2 py-0.5 text-xs font-medium rounded bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-200">loading</span>
+                                    <span class="px-2 py-0.5 text-xs font-medium rounded bg-status-warning-bg text-accent-warning">loading</span>
                                   {/if}
                                   {#if button.disabled}
-                                    <span class="px-2 py-0.5 text-xs font-medium rounded bg-gray-200 text-gray-600 dark:bg-gray-600 dark:text-gray-300">disabled</span>
+                                    <span class="px-2 py-0.5 text-xs font-medium rounded bg-bg-tertiary text-text-secondary">disabled</span>
                                   {/if}
                                   {#if button.danger}
-                                    <span class="px-2 py-0.5 text-xs font-medium rounded bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200">danger</span>
+                                    <span class="px-2 py-0.5 text-xs font-medium rounded bg-status-error-bg text-status-error-text">danger</span>
                                   {/if}
                                 </div>
 
                                 <div class="flex items-center justify-between text-xs">
-                                  <span class="text-gray-500 dark:text-gray-400">Line {button.line}</span>
+                                  <span class="text-muted-foreground">Line {button.line}</span>
                                   <a
                                     href={getVSCodeLink(route.fullPath, button.line)}
-                                    class="text-blue-500 hover:text-blue-700 dark:text-blue-400 hover:underline"
+                                    class="text-brand-primary hover:text-brand-primary hover:underline"
                                   >
                                     Open in Code →
                                   </a>
                                 </div>
 
                                 {#if button.text !== '(no text)' && button.text.length > 0}
-                                  <p class="text-xs text-gray-600 dark:text-gray-400 truncate" title={button.text}>
+                                  <p class="text-xs text-text-secondary truncate" title={button.text}>
                                     "{button.text}"
                                   </p>
                                 {/if}
@@ -386,8 +386,8 @@
 
   <!-- Footer Stats -->
   <div class="max-w-7xl mx-auto px-4 py-8">
-    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
-      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Variant Distribution</h3>
+    <div class="bg-card rounded-xl border border-border p-6">
+      <h3 class="text-lg font-semibold text-text-primary mb-4">Variant Distribution</h3>
       <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
         {#each allVariants as variant}
           {@const count = Object.values(manifest.categories)
@@ -395,7 +395,7 @@
             .filter(b => b.variant === variant).length}
           <div class="flex items-center gap-2">
             <span class="px-2 py-1 text-xs font-medium rounded {getVariantColor(variant)}">{variant}</span>
-            <span class="text-sm text-gray-600 dark:text-gray-400">{count}</span>
+            <span class="text-sm text-text-secondary">{count}</span>
           </div>
         {/each}
       </div>
@@ -404,26 +404,26 @@
 
   <!-- Preview Modal -->
   {#if previewModal.open}
-    <div class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-xs">
-      <div class="relative w-full max-w-6xl h-[85vh] bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden flex flex-col">
+    <div class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-overlay-bg backdrop-blur-xs">
+      <div class="relative w-full max-w-6xl h-[85vh] bg-card rounded-xl shadow-2xl overflow-hidden flex flex-col">
         <!-- Modal Header -->
-        <div class="flex items-center justify-between px-4 py-3 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
+        <div class="flex items-center justify-between px-4 py-3 bg-muted border-b border-border">
           <div class="flex items-center gap-3">
-            <span class="text-lg font-semibold text-gray-900 dark:text-white">{previewModal.title}</span>
-            <code class="text-sm text-gray-500 dark:text-gray-400">{previewModal.file}</code>
+            <span class="text-lg font-semibold text-text-primary">{previewModal.title}</span>
+            <code class="text-sm text-muted-foreground">{previewModal.file}</code>
           </div>
           <div class="flex items-center gap-2">
             <a
               href={previewModal.url}
               target="_blank"
               rel="noopener"
-              class="px-3 py-1.5 text-sm rounded-lg bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300"
+              class="px-3 py-1.5 text-sm rounded-lg bg-status-info-bg text-brand-primary hover:bg-status-info-bg/80"
             >
               Open in new tab ↗
             </a>
             <button
               onclick={closePreview}
-              class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-500 dark:text-gray-400"
+              class="p-2 rounded-lg hover:bg-bg-tertiary text-muted-foreground"
             >
               ✕
             </button>
@@ -440,7 +440,7 @@
         </div>
 
         <!-- Modal Footer -->
-        <div class="px-4 py-2 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-600 text-xs text-gray-500 dark:text-gray-400">
+        <div class="px-4 py-2 bg-bg-secondary border-t border-border text-xs text-muted-foreground">
           ⚠️ Preview requires micdrop-frontend dev server running at {FRONTEND_DEV_URL}
         </div>
       </div>

package/dist/stories/ButtonAuditReview.spec.js

@@ -42,7 +42,7 @@ describe('ButtonAuditReview', () => {
       const { container } = render(ButtonAuditReview);
       expect(screen.getByText('Recent Fix Sessions')).toBeInTheDocument();
       // Check the green card has the count 4
-      const greenCard = container.querySelector('.bg-green-50.border-green-400');
+      const greenCard = container.querySelector('.bg-status-success-bg.border-accent-success');
       expect(greenCard?.textContent).toContain('4');
     });
 
@@ -50,7 +50,7 @@ describe('ButtonAuditReview', () => {
       const { container } = render(ButtonAuditReview);
       expect(screen.getByText('Valid Variants')).toBeInTheDocument();
       // Check the blue card has the count 15
-      const blueCards = container.querySelectorAll('.bg-blue-50.border-blue-400');
+      const blueCards = container.querySelectorAll('.bg-status-info-bg.border-brand-primary');
       const summaryBlueCard = blueCards[0];
       expect(summaryBlueCard?.textContent).toContain('15');
     });
@@ -127,13 +127,13 @@ describe('ButtonAuditReview', () => {
 
     it('should render "Needs Fix" badge for incorrect categories', () => {
       const { container } = render(ButtonAuditReview);
-      const needsFixBadges = container.querySelectorAll('.bg-red-100.text-red-700');
+      const needsFixBadges = container.querySelectorAll('.bg-status-error-bg.text-status-error-text');
       expect(needsFixBadges.length).toBeGreaterThan(0);
     });
 
     it('should render "Correct" badge for correct categories', () => {
       const { container } = render(ButtonAuditReview);
-      const correctBadges = container.querySelectorAll('.bg-green-100.text-green-700');
+      const correctBadges = container.querySelectorAll('.bg-status-success-bg.text-status-success-text');
       expect(correctBadges.length).toBeGreaterThan(0);
     });
 
@@ -309,25 +309,25 @@ describe('ButtonAuditReview', () => {
   describe('Color Coding and Visual Indicators', () => {
     it('should use yellow theme for buttons without variant section', () => {
       const { container } = render(ButtonAuditReview);
-      const yellowSection = container.querySelector('.bg-yellow-50.border-yellow-400');
+      const yellowSection = container.querySelector('.bg-status-warning-bg.border-status-warning-border');
       expect(yellowSection).toBeInTheDocument();
     });
 
     it('should use orange theme for visual comparison section', () => {
       const { container } = render(ButtonAuditReview);
-      const orangeSection = container.querySelector('.bg-orange-50.border-orange-400');
+      const orangeSection = container.querySelector('.bg-status-warning-bg.border-accent-warning');
       expect(orangeSection).toBeInTheDocument();
     });
 
     it('should use green theme for recent fixes section', () => {
       const { container } = render(ButtonAuditReview);
-      const greenSection = container.querySelector('.bg-green-50.border-green-400');
+      const greenSection = container.querySelector('.bg-status-success-bg.border-accent-success');
       expect(greenSection).toBeInTheDocument();
     });
 
     it('should use blue theme for decision guide section', () => {
       const { container } = render(ButtonAuditReview);
-      const blueSection = container.querySelector('.bg-blue-50.border-blue-400');
+      const blueSection = container.querySelector('.bg-status-info-bg.border-brand-primary');
       expect(blueSection).toBeInTheDocument();
     });
   });

package/dist/stories/ButtonAuditReview.stories.svelte

@@ -1,14 +1,14 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import ButtonAuditReview from "./ButtonAuditReview.svelte";
-
-  const { Story } = defineMeta({
-    title: "Design System/Button Audit Review",
-    component: ButtonAuditReview,
-    parameters: {
-      layout: 'fullscreen',
-    }
-  });
-</script>
-
-<Story name="All Issues" />
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import ButtonAuditReview from "./ButtonAuditReview.svelte";
+
+  const { Story } = defineMeta({
+    title: "Design System/Button Audit Review",
+    component: ButtonAuditReview,
+    parameters: {
+      layout: 'fullscreen',
+    }
+  });
+</script>
+
+<Story name="All Issues" />