@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/primitives/DarkModeToggle.stories.svelte

@@ -17,20 +17,20 @@
 <Story name="Default">
   <div class="flex flex-col gap-4 p-4">
     <h3 class="text-lg font-semibold">Theme Toggle (3-State)</h3>
-    <p class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
+    <p class="text-sm text-muted-foreground">
       Cycles through: Auto → Light → Dark → Auto
     </p>
     <DarkModeToggle />
-    <p class="text-xs text-gray-500 dark:text-gray-400">
+    <p class="text-xs text-muted-foreground">
       Click the toggle to cycle through theme modes. In auto mode, it follows system preferences.
     </p>
   </div>
 </Story>
 
 <Story name="In Header">
-  <div class="bg-white dark:bg-gray-900 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-lg">
+  <div class="bg-card border border-border p-4 rounded-lg">
     <div class="flex items-center justify-between">
-      <h2 class="text-xl font-bold text-gray-900 dark:text-white dark:text-white">Application Header</h2>
+      <h2 class="text-xl font-bold text-text-primary">Application Header</h2>
       <DarkModeToggle />
     </div>
   </div>
@@ -38,17 +38,17 @@
 
 <Story name="Theme States Demo">
   <div class="space-y-4 p-4">
-    <div class="bg-white dark:bg-gray-900 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
-      <h3 class="text-lg font-semibold text-gray-900 dark:text-white dark:text-white mb-2">
+    <div class="bg-card p-6 rounded-lg border border-border">
+      <h3 class="text-lg font-semibold text-text-primary mb-2">
         Current Theme Demo
       </h3>
-      <p class="text-gray-500 dark:text-gray-400 dark:text-gray-300 mb-4">
+      <p class="text-muted-foreground mb-4">
         This content changes appearance based on the selected theme mode.
       </p>
       <DarkModeToggle />
     </div>
 
-    <div class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
+    <div class="text-sm text-muted-foreground">
       <p><strong>Auto Mode:</strong> Follows system preferences</p>
       <p><strong>Light Mode:</strong> Forces light theme</p>
       <p><strong>Dark Mode:</strong> Forces dark theme</p>

package/dist/primitives/DarkModeToggle.svelte

@@ -109,7 +109,7 @@
   title={titleText}
 >
   <span
-    class="text-amber-500 transition-all duration-300 {themeMode === 'light'
+    class="text-accent-warning transition-all duration-300 {themeMode === 'light'
       ? 'scale-100 rotate-0 opacity-100'
       : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
   >
@@ -127,15 +127,15 @@
   {#if themeMode === "auto"}
     <div class="absolute inset-0 overflow-hidden rounded-lg">
       <div
-        class="absolute flex h-full w-full items-center justify-center bg-white"
+        class="absolute flex h-full w-full items-center justify-center bg-card"
         style="clip-path: polygon(0 0, 100% 0, 0 100%)"
       >
-        <span class="-translate-x-1 -translate-y-1 text-amber-500">
+        <span class="-translate-x-1 -translate-y-1 text-accent-warning">
           <SunIcon size="12" />
         </span>
       </div>
       <div
-        class="absolute flex h-full w-full items-center justify-center bg-gray-800"
+        class="absolute flex h-full w-full items-center justify-center bg-bg-secondary"
         style="clip-path: polygon(100% 0, 100% 100%, 0 100%)"
       >
         <span class="translate-x-1 translate-y-1">

package/dist/primitives/Drawer/Drawer.spec.js

@@ -152,16 +152,16 @@ describe('Drawer Styling', () => {
     expect(dialog).toHaveClass('flex-col');
   });
 
-  test('has bg-white background', () => {
+  test('has bg-card background', () => {
     const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
-    expect(dialog).toHaveClass('bg-white');
+    expect(dialog).toHaveClass('bg-card');
   });
 
-  test('has dark mode background', () => {
+  test('has token-based background', () => {
     const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
-    expect(dialog).toHaveClass('dark:bg-gray-800');
+    expect(dialog).toHaveClass('bg-card');
   });
 });
 

package/dist/primitives/Drawer/Drawer.stories.svelte

@@ -33,11 +33,11 @@
       <Drawer bind:open={openRight} position="right">
         <div class="p-6">
           <h2 class="text-xl font-semibold mb-4">Drawer Title</h2>
-          <p class="text-gray-600 mb-4">
+          <p class="text-text-secondary mb-4">
             This drawer slides in from the right side. Click outside or use the close button to dismiss.
           </p>
           <div class="space-y-4">
-            <p class="text-sm text-gray-500">Some content here...</p>
+            <p class="text-sm text-muted-foreground">Some content here...</p>
             <Button onclick={() => openRight = false}>Close</Button>
           </div>
         </div>
@@ -54,10 +54,10 @@
         <div class="p-6">
           <h2 class="text-xl font-semibold mb-4">Navigation</h2>
           <nav class="space-y-2">
-            <a href="/dashboard" class="block px-3 py-2 rounded hover:bg-gray-100">Dashboard</a>
-            <a href="/shows" class="block px-3 py-2 rounded hover:bg-gray-100">Shows</a>
-            <a href="/performers" class="block px-3 py-2 rounded hover:bg-gray-100">Performers</a>
-            <a href="/settings" class="block px-3 py-2 rounded hover:bg-gray-100">Settings</a>
+            <a href="/dashboard" class="block px-3 py-2 rounded hover:bg-muted">Dashboard</a>
+            <a href="/shows" class="block px-3 py-2 rounded hover:bg-muted">Shows</a>
+            <a href="/performers" class="block px-3 py-2 rounded hover:bg-muted">Performers</a>
+            <a href="/settings" class="block px-3 py-2 rounded hover:bg-muted">Settings</a>
           </nav>
           <div class="mt-6">
             <Button variant="ghost" onclick={() => openLeft = false}>Close</Button>

package/dist/primitives/Drawer/Drawer.svelte

@@ -74,15 +74,15 @@
   let placementClasses = $derived.by(() => {
     switch (placement) {
       case 'left':
-        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
+        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-border`;
       case 'right':
-        return `top-0 right-0 h-screen ${widthClass} max-w-full border-l border-gray-200 dark:border-gray-700`;
+        return `top-0 right-0 h-screen ${widthClass} max-w-full border-l border-border`;
       case 'top':
-        return `top-0 left-0 right-0 w-full border-b border-gray-200 dark:border-gray-700`;
+        return `top-0 left-0 right-0 w-full border-b border-border`;
       case 'bottom':
-        return `bottom-0 left-0 right-0 w-full border-t border-gray-200 dark:border-gray-700`;
+        return `bottom-0 left-0 right-0 w-full border-t border-border`;
       default:
-        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
+        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-border`;
     }
   });
 
@@ -155,11 +155,11 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 {#if edge && placement === "bottom" && !isVisible}
   <div
-    class="fixed bottom-0 left-0 right-0 z-40 flex justify-center w-full p-4 cursor-pointer bg-white border-t border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-colors"
+    class="fixed bottom-0 left-0 right-0 z-40 flex justify-center w-full p-4 cursor-pointer bg-card border-t border-border hover:bg-bg-secondary transition-colors"
     style="bottom: {edgeOffset}px"
     onclick={handleEdgeClick}
   >
-    <span class="absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600"></span>
+    <span class="absolute w-8 h-1 -translate-x-1/2 bg-bg-quaternary rounded-lg top-3 left-1/2"></span>
   </div>
 {/if}
 
@@ -170,7 +170,7 @@
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
-      class="fixed inset-0 z-30 bg-gray-900/50 dark:bg-gray-900/80"
+      class="fixed inset-0 z-30 bg-bg-primary/50"
       onclick={handleBackdropClick}
       transition:fade={{ duration: 200 }}
       role="presentation"
@@ -182,7 +182,7 @@
     bind:this={drawerElement}
     {id}
     class="
-      fixed z-40 flex flex-col bg-white dark:bg-gray-800
+      fixed z-40 flex flex-col bg-card
       {placementClasses}
       {className}
     "
@@ -195,7 +195,7 @@
   >
     <!-- Header (sticky) -->
     {#if title || header}
-      <header class="shrink-0 p-4 border-b border-gray-200 dark:border-gray-700">
+      <header class="shrink-0 p-4 border-b border-border">
         {#if header}
           {@render header()}
         {:else}
@@ -216,7 +216,7 @@
 
     <!-- Actions (sticky footer) -->
     {#if actions}
-      <footer class="shrink-0 p-4 border-t border-gray-200 dark:border-gray-700 flex flex-col gap-3">
+      <footer class="shrink-0 p-4 border-t border-border flex flex-col gap-3">
         {@render actions()}
       </footer>
     {/if}

package/dist/primitives/Dropdown/Dropdown.spec.js

@@ -59,16 +59,16 @@ describe('Dropdown Styling', () => {
     expect(menu).toHaveClass('z-10');
   });
 
-  test('has bg-white background', () => {
+  test('has bg-card background', () => {
     const { container } = render(Dropdown, { props: { open: true } });
     const menu = container.querySelector('[role="menu"]');
-    expect(menu).toHaveClass('bg-white');
+    expect(menu).toHaveClass('bg-card');
   });
 
-  test('has dark mode background', () => {
+  test('has token-based background', () => {
     const { container } = render(Dropdown, { props: { open: true } });
     const menu = container.querySelector('[role="menu"]');
-    expect(menu).toHaveClass('dark:bg-gray-700');
+    expect(menu).toHaveClass('bg-card');
   });
 
   test('has rounded-lg border radius', () => {
@@ -93,7 +93,7 @@ describe('Dropdown Styling', () => {
     const { container } = render(Dropdown, { props: { open: true } });
     const menu = container.querySelector('[role="menu"]');
     expect(menu).toHaveClass('divide-y');
-    expect(menu).toHaveClass('divide-gray-100');
+    expect(menu).toHaveClass('divide-border');
   });
 });
 
@@ -116,16 +116,16 @@ describe('Dropdown List', () => {
     expect(ul).toHaveClass('text-sm');
   });
 
-  test('ul has text-gray-700 color', () => {
+  test('ul has text-text-secondary color', () => {
     const { container } = render(Dropdown, { props: { open: true } });
     const ul = container.querySelector('ul');
-    expect(ul).toHaveClass('text-gray-700');
+    expect(ul).toHaveClass('text-text-secondary');
   });
 
-  test('ul has dark mode text color', () => {
+  test('ul has token-based text color', () => {
     const { container } = render(Dropdown, { props: { open: true } });
     const ul = container.querySelector('ul');
-    expect(ul).toHaveClass('dark:text-gray-200');
+    expect(ul).toHaveClass('text-text-secondary');
   });
 });
 

package/dist/primitives/Dropdown/Dropdown.stories.svelte

@@ -53,7 +53,7 @@
           <DropdownItem onclick={() => open2 = false}>Share</DropdownItem>
           <DropdownItem onclick={() => open2 = false}>Export</DropdownItem>
           <div class="border-t my-1"></div>
-          <DropdownItem onclick={() => open2 = false} class="text-red-600">Delete</DropdownItem>
+          <DropdownItem onclick={() => open2 = false} class="text-accent-danger">Delete</DropdownItem>
         </Dropdown>
       {/if}
     </div>
@@ -115,7 +115,7 @@
         <h3 class="font-medium">Card Title</h3>
         <div class="relative">
           <button
-            class="p-1 hover:bg-gray-100 rounded"
+            class="p-1 hover:bg-muted rounded"
             onclick={() => open1 = !open1}
           >
             ⋮
@@ -124,12 +124,12 @@
             <Dropdown class="absolute mt-1 right-0 z-10">
               <DropdownItem onclick={() => open1 = false}>Edit</DropdownItem>
               <DropdownItem onclick={() => open1 = false}>Share</DropdownItem>
-              <DropdownItem onclick={() => open1 = false} class="text-red-600">Delete</DropdownItem>
+              <DropdownItem onclick={() => open1 = false} class="text-accent-danger">Delete</DropdownItem>
             </Dropdown>
           {/if}
         </div>
       </div>
-      <p class="text-gray-600 text-sm">
+      <p class="text-text-secondary text-sm">
         This is a card with a dropdown menu in the header for common actions.
       </p>
     </div>

package/dist/primitives/Dropdown/Dropdown.svelte

@@ -166,13 +166,13 @@
 {#if open}
   <div
     bind:this={containerRef}
-    class="absolute z-10 bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-44 dark:bg-gray-700 dark:divide-gray-600 {className}"
+    class="absolute z-10 bg-card divide-y divide-border rounded-lg shadow-lg w-44 {className}"
     role="menu"
     aria-label={ariaLabel ?? labels.menu}
     transition:bloom={{ origin: placementOrigins[placement] || "top left" }}
     {...restProps}
   >
-    <ul bind:this={dropdownRef} class="py-2 text-sm text-gray-700 dark:text-gray-200">
+    <ul bind:this={dropdownRef} class="py-2 text-sm text-text-secondary">
       {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
     </ul>
   </div>

package/dist/primitives/Dropdown/DropdownDivider.svelte

@@ -6,4 +6,4 @@
   let { class: className = '' }: Props = $props();
 </script>
 
-<li class="my-1 border-t border-gray-200 dark:border-gray-600 {className}" role="separator" aria-hidden="true"></li>
+<li class="my-1 border-t border-border {className}" role="separator" aria-hidden="true"></li>

package/dist/primitives/Dropdown/DropdownItem.spec.js

@@ -131,26 +131,19 @@ describe('DropdownItem Styling', () => {
   test('has hover styles', () => {
     const { container } = render(DropdownItem);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('hover:bg-gray-100');
+    expect(button).toHaveClass('hover:bg-muted');
   });
 
-  test('has dark mode hover styles', () => {
+  test('has hover styles', () => {
     const { container } = render(DropdownItem);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('dark:hover:bg-gray-600');
-    expect(button).toHaveClass('dark:hover:text-white');
+    expect(button).toHaveClass('hover:bg-muted');
   });
 
   test('has default text color', () => {
     const { container } = render(DropdownItem);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('text-gray-700');
-  });
-
-  test('has dark mode text color', () => {
-    const { container } = render(DropdownItem);
-    const button = container.querySelector('button');
-    expect(button).toHaveClass('dark:text-gray-200');
+    expect(button).toHaveClass('text-text-secondary');
   });
 });
 
@@ -315,8 +308,8 @@ describe('DropdownItem Active URL Styling', () => {
     });
 
     const anchor = container.querySelector('a');
-    expect(anchor).toHaveClass('bg-blue-50');
-    expect(anchor).toHaveClass('text-blue-700');
+    expect(anchor).toHaveClass('bg-status-info-bg');
+    expect(anchor).toHaveClass('text-brand-primary');
   });
 
   test('applies default classes when activeUrl does not match href', () => {
@@ -330,7 +323,7 @@ describe('DropdownItem Active URL Styling', () => {
     });
 
     const anchor = container.querySelector('a');
-    expect(anchor).toHaveClass('text-gray-700');
-    expect(anchor).not.toHaveClass('bg-blue-50');
+    expect(anchor).toHaveClass('text-text-secondary');
+    expect(anchor).not.toHaveClass('bg-status-info-bg');
   });
 });

package/dist/primitives/Dropdown/DropdownItem.svelte

@@ -44,10 +44,10 @@
     }
   }
 
-  const baseClasses = "block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white";
-  const activeClasses = "bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white";
+  const baseClasses = "block w-full text-left px-4 py-2 text-sm hover:bg-muted";
+  const activeClasses = "bg-status-info-bg text-brand-primary";
   const disabledClasses = "opacity-50 cursor-not-allowed";
-  const defaultClasses = "text-gray-700 dark:text-gray-200";
+  const defaultClasses = "text-text-secondary";
 </script>
 
 {#if href}

package/dist/primitives/Helper/Helper.spec.js

@@ -15,19 +15,19 @@ describe('Helper', () => {
     expect(container.querySelector('p')).toBeInTheDocument();
   });
 
-  test('default color has gray text', () => {
+  test('default color has muted-foreground text', () => {
     const { container } = render(Helper);
-    expect(container.querySelector('[class*="gray"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="text-muted-foreground"]')).toBeInTheDocument();
   });
 
-  test('red color has red text', () => {
+  test('red color has accent-danger text', () => {
     const { container } = render(Helper, { props: { color: 'red' } });
-    expect(container.querySelector('[class*="red"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="text-accent-danger"]')).toBeInTheDocument();
   });
 
-  test('green color has green text', () => {
+  test('green color has accent-success text', () => {
     const { container } = render(Helper, { props: { color: 'green' } });
-    expect(container.querySelector('[class*="green"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="text-accent-success"]')).toBeInTheDocument();
   });
 
   test('applies custom className', () => {

package/dist/primitives/Helper/Helper.svelte

@@ -22,9 +22,9 @@
   }: Props = $props();
 
   const colorClasses: Record<string, string> = {
-    default: 'text-gray-500 dark:text-gray-400',
-    red: 'text-red-600 dark:text-red-500',
-    green: 'text-green-600 dark:text-green-500'
+    default: 'text-muted-foreground',
+    red: 'text-accent-danger',
+    green: 'text-accent-success'
   };
 </script>
 

package/dist/primitives/Icons/Icon.stories.svelte

@@ -45,9 +45,9 @@
 <Story name="All Icons">
   <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-6 p-4">
     {#each iconNames as iconName}
-      <div class="flex flex-col items-center gap-2 p-3 border rounded-lg hover:bg-gray-50 dark:bg-gray-800">
+      <div class="flex flex-col items-center gap-2 p-3 border rounded-lg hover:bg-bg-secondary">
         <Icon name={iconName} size="24" />
-        <span class="text-xs text-gray-500 dark:text-gray-400 text-center">{iconName}</span>
+        <span class="text-xs text-muted-foreground text-center">{iconName}</span>
       </div>
     {/each}
   </div>
@@ -57,23 +57,23 @@
   <div class="flex items-end gap-6 p-4">
     <div class="flex flex-col items-center gap-2">
       <Icon name="Home" size="16" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">16px</span>
+      <span class="text-xs text-muted-foreground">16px</span>
     </div>
     <div class="flex flex-col items-center gap-2">
       <Icon name="Home" size="20" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">20px</span>
+      <span class="text-xs text-muted-foreground">20px</span>
     </div>
     <div class="flex flex-col items-center gap-2">
       <Icon name="Home" size="24" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">24px</span>
+      <span class="text-xs text-muted-foreground">24px</span>
     </div>
     <div class="flex flex-col items-center gap-2">
       <Icon name="Home" size="32" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">32px</span>
+      <span class="text-xs text-muted-foreground">32px</span>
     </div>
     <div class="flex flex-col items-center gap-2">
       <Icon name="Home" size="48" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">48px</span>
+      <span class="text-xs text-muted-foreground">48px</span>
     </div>
   </div>
 </Story>
@@ -81,20 +81,20 @@
 <Story name="Icon Colors">
   <div class="flex items-center gap-6 p-4">
     <div class="flex flex-col items-center gap-2">
-      <Icon name="CheckCircle" size="32" color="#22c55e" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">Success</span>
+      <Icon name="CheckCircle" size="32" color="hsl(var(--accent-success))" />
+      <span class="text-xs text-muted-foreground">Success</span>
     </div>
     <div class="flex flex-col items-center gap-2">
-      <Icon name="ErrorCircle" size="32" color="#ef4444" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">Error</span>
+      <Icon name="ErrorCircle" size="32" color="hsl(var(--accent-danger))" />
+      <span class="text-xs text-muted-foreground">Error</span>
     </div>
     <div class="flex flex-col items-center gap-2">
-      <Icon name="Info" size="32" color="#3b82f6" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">Info</span>
+      <Icon name="Info" size="32" color="hsl(var(--brand-primary))" />
+      <span class="text-xs text-muted-foreground">Info</span>
     </div>
     <div class="flex flex-col items-center gap-2">
-      <Icon name="Notification" size="32" color="#f59e0b" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">Warning</span>
+      <Icon name="Notification" size="32" color="hsl(var(--accent-warning))" />
+      <span class="text-xs text-muted-foreground">Warning</span>
     </div>
   </div>
 </Story>