@getmicdrop/svelte-components 5.21.0 → 5.21.1

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);
     });
 

package/dist/stories/ButtonGridView.svelte

@@ -58,27 +58,27 @@
   // Variant colors
   function variantColor(variant) {
     const colors = {
-      'blue-solid': 'bg-blue-100 text-blue-700',
-      'gray-outline': 'bg-gray-100 text-gray-700',
-      'blue-outline': 'bg-blue-50 text-blue-600',
-      'gray-text': 'bg-gray-50 text-gray-500',
-      'red-solid': 'bg-red-100 text-red-700',
-      'red-outline': 'bg-red-50 text-red-600',
-      'green-solid': 'bg-green-100 text-green-700',
-      'icon': 'bg-purple-100 text-purple-700',
-      'ghost': 'bg-yellow-100 text-yellow-700'
+      'blue-solid': 'bg-status-info-bg text-brand-primary',
+      'gray-outline': 'bg-muted text-text-secondary',
+      'blue-outline': 'bg-status-info-bg text-brand-primary',
+      'gray-text': 'bg-bg-secondary text-muted-foreground',
+      'red-solid': 'bg-status-error-bg text-status-error-text',
+      'red-outline': 'bg-status-error-bg text-accent-danger',
+      'green-solid': 'bg-status-success-bg text-status-success-text',
+      'icon': 'bg-status-info-bg text-brand-primary',
+      'ghost': 'bg-status-warning-bg text-status-warning-text'
     };
-    return colors[variant] || 'bg-gray-100 text-gray-700';
+    return colors[variant] || 'bg-muted text-text-secondary';
   }
 </script>
 
-<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
+<div class="min-h-screen bg-muted p-4">
   <!-- Header -->
-  <div class="sticky top-0 z-50 bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-4">
+  <div class="sticky top-0 z-50 bg-card rounded-lg shadow p-4 mb-4">
     <div class="flex flex-wrap items-center justify-between gap-4">
       <div>
-        <h1 class="text-xl font-bold text-gray-900 dark:text-white">Button Grid View</h1>
-        <p class="text-sm text-gray-500 dark:text-gray-400">
+        <h1 class="text-xl font-bold text-text-primary">Button Grid View</h1>
+        <p class="text-sm text-muted-foreground">
           Showing {filtered.length} of {allButtons.length} buttons
         </p>
       </div>
@@ -88,20 +88,20 @@
           type="text"
           bind:value={searchQuery}
           placeholder="Search..."
-          class="px-3 py-1.5 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white w-40"
+          class="px-3 py-1.5 text-sm rounded border border-stroke-primary bg-card text-text-primary w-40"
         />
 
-        <select bind:value={variantFilter} class="px-2 py-1.5 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+        <select bind:value={variantFilter} class="px-2 py-1.5 text-sm rounded border border-stroke-primary bg-card text-text-primary">
           <option value="all">All Variants</option>
           {#each allVariants as v}<option value={v}>{v}</option>{/each}
         </select>
 
-        <select bind:value={sizeFilter} class="px-2 py-1.5 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+        <select bind:value={sizeFilter} class="px-2 py-1.5 text-sm rounded border border-stroke-primary bg-card text-text-primary">
           <option value="all">All Sizes</option>
           {#each allSizes as s}<option value={s}>{s}</option>{/each}
         </select>
 
-        <button onclick={toggleDark} class="px-3 py-1.5 text-sm rounded {isDark ? 'bg-gray-800 text-white' : 'bg-yellow-500 text-black'}">
+        <button onclick={toggleDark} class="px-3 py-1.5 text-sm rounded {isDark ? 'bg-bg-secondary text-white' : 'bg-accent-warning text-text-primary'}">
           {isDark ? '🌙' : '☀️'}
         </button>
       </div>
@@ -111,9 +111,9 @@
   <!-- Grid -->
   <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-3">
     {#each filtered as button, i}
-      <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 flex flex-col">
+      <div class="bg-card rounded-lg p-3 border border-border flex flex-col">
         <!-- Button Preview -->
-        <div class="flex items-center justify-center p-3 bg-gray-50 dark:bg-gray-700 rounded mb-2 min-h-[50px]">
+        <div class="flex items-center justify-center p-3 bg-bg-secondary rounded mb-2 min-h-[50px]">
           <Button
             variant={button.variant}
             size={button.size}
@@ -130,11 +130,11 @@
         <div class="text-xs space-y-1">
           <div class="flex gap-1 flex-wrap">
             <span class="px-1.5 py-0.5 rounded {variantColor(button.variant)}">{button.variant}</span>
-            <span class="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">{button.size}</span>
+            <span class="px-1.5 py-0.5 rounded bg-muted text-text-secondary">{button.size}</span>
           </div>
           <a
             href={vscodeLink(button.fullPath, button.line)}
-            class="block text-blue-500 hover:underline truncate"
+            class="block text-brand-primary hover:underline truncate"
             title={button.file}
           >
             {shortFile(button.file)}:{button.line}

package/dist/stories/ButtonShowcase.spec.js

@@ -397,14 +397,14 @@ describe('ButtonShowcase', () => {
 
     it('has background styling for light mode', () => {
       const { container } = render(ButtonShowcase);
-      const mainDiv = container.querySelector('.bg-gray-50');
+      const mainDiv = container.querySelector('.bg-bg-secondary');
       expect(mainDiv).toBeInTheDocument();
     });
 
-    it('includes dark mode styling classes', () => {
+    it('uses token-based colors for automatic dark mode', () => {
       const { container } = render(ButtonShowcase);
-      const darkModeElements = container.querySelectorAll('.dark\\:bg-gray-900, .dark\\:text-white');
-      expect(darkModeElements.length).toBeGreaterThan(0);
+      const tokenElements = container.querySelectorAll('.bg-bg-secondary, .text-text-primary');
+      expect(tokenElements.length).toBeGreaterThan(0);
     });
   });