@getmicdrop/svelte-components 5.20.2 → 5.21.1

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