@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/primitives/Radio/Radio.stories.svelte

@@ -33,11 +33,11 @@
 <Story name="Group">
   {#snippet template()}
     <div class="space-y-3">
-      <p class="text-sm font-medium text-gray-700">Select size:</p>
+      <p class="text-sm font-medium text-text-secondary">Select size:</p>
       <Radio name="size" value="sm" label="Small" bind:group={selectedSize} />
       <Radio name="size" value="md" label="Medium" bind:group={selectedSize} />
       <Radio name="size" value="lg" label="Large" bind:group={selectedSize} />
-      <p class="text-xs text-gray-500 mt-2">Selected: {selectedSize}</p>
+      <p class="text-xs text-muted-foreground mt-2">Selected: {selectedSize}</p>
     </div>
   {/snippet}
 </Story>
@@ -55,13 +55,13 @@
 <Story name="Pricing Plans">
   {#snippet template()}
     <div class="space-y-3">
-      <p class="text-sm font-medium text-gray-700">Choose your plan:</p>
+      <p class="text-sm font-medium text-text-secondary">Choose your plan:</p>
       <div class="space-y-2">
         <Radio name="plan" value="basic" label="Basic - Free" bind:group={selectedPlan} />
         <Radio name="plan" value="pro" label="Pro - $29/month" bind:group={selectedPlan} />
         <Radio name="plan" value="enterprise" label="Enterprise - Contact us" bind:group={selectedPlan} />
       </div>
-      <p class="text-xs text-gray-500 mt-2">Selected plan: {selectedPlan}</p>
+      <p class="text-xs text-muted-foreground mt-2">Selected plan: {selectedPlan}</p>
     </div>
   {/snippet}
 </Story>
@@ -69,7 +69,7 @@
 <Story name="Horizontal Layout">
   {#snippet template()}
     <div class="space-y-2">
-      <p class="text-sm font-medium text-gray-700">Payment method:</p>
+      <p class="text-sm font-medium text-text-secondary">Payment method:</p>
       <div class="flex gap-6">
         <Radio name="payment" value="card" label="Credit Card" />
         <Radio name="payment" value="paypal" label="PayPal" />

package/dist/primitives/Radio/Radio.svelte

@@ -35,12 +35,12 @@
   }
 
   const colorClasses = {
-    blue: 'text-blue-600',
-    red: 'text-red-600',
-    green: 'text-green-600',
-    purple: 'text-purple-600',
-    orange: 'text-orange-500',
-    yellow: 'text-yellow-400'
+    blue: 'text-brand-primary',
+    red: 'text-accent-danger',
+    green: 'text-accent-success',
+    purple: 'text-brand-primary',
+    orange: 'text-accent-warning',
+    yellow: 'text-accent-warning'
   };
 
   let colorClass = $derived(colorClasses[color] || colorClasses.blue);
@@ -57,10 +57,10 @@
     {disabled}
     checked={isChecked}
     onchange={handleChange}
-    class="w-4 h-4 bg-gray-100 border-gray-300 focus:outline-hidden dark:bg-gray-700 dark:border-gray-600 {colorClass}"
+    class="w-4 h-4 bg-muted border-stroke-primary focus:outline-hidden {colorClass}"
   />
   {#if children}
-    <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
+    <span class="text-sm font-medium text-text-primary">
       {@render children()}
     </span>
   {/if}

package/dist/primitives/SearchResultItem/SearchResultItem.svelte

@@ -60,15 +60,15 @@
 
   // Simple mode (no type): rounded with blue hover
   const simpleBaseClasses = 'w-full text-left rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
-  const simpleDefaultClasses = 'text-gray-900 bg-transparent border-transparent hover:bg-blue-50 focus:bg-blue-50 dark:text-white dark:hover:bg-blue-900/20 dark:focus:bg-blue-900/20';
-  const simpleSelectedClasses = 'text-gray-900 bg-blue-50 dark:text-white dark:bg-blue-900/20';
+  const simpleDefaultClasses = 'text-text-primary bg-transparent border-transparent hover:bg-status-info-bg focus:bg-status-info-bg';
+  const simpleSelectedClasses = 'text-text-primary bg-status-info-bg';
 
   // Typed mode (with type): colored left border, gray hover
   const typedBaseClasses = 'w-full text-left font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none border-l-3';
-  const typedDefaultClasses = 'text-gray-900 bg-transparent hover:bg-gray-50 hover:border-l-4 dark:text-white dark:hover:bg-gray-700';
-  const typedSelectedClasses = 'text-gray-900 bg-primary-100 border-l-primary-600 border-l-4 dark:text-white dark:bg-gray-700';
+  const typedDefaultClasses = 'text-text-primary bg-transparent hover:bg-bg-secondary hover:border-l-4';
+  const typedSelectedClasses = 'text-text-primary bg-primary-100 border-l-primary-600 border-l-4';
 
-  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
+  const disabledClasses = 'text-muted-foreground cursor-not-allowed';
 
   let sizeClass = $derived(buttonMenuItemSizes[size] || buttonMenuItemSizes.md);
   let hasTrailing = $derived(typeof trailing === 'function' || trailing);

package/dist/primitives/SidebarToggle/SidebarToggle.svelte

@@ -32,8 +32,8 @@
   }: Props = $props();
 
   const baseClasses = 'w-6 h-7 inline-flex items-center justify-center rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
-  const defaultClasses = 'text-gray-900 bg-blue-100 border border-blue-200 hover:bg-blue-200 shadow-lg dark:text-white dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700';
-  const disabledClasses = 'bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500';
+  const defaultClasses = 'text-text-primary bg-status-info-bg border border-status-info-border hover:bg-status-info-bg/80 shadow-lg';
+  const disabledClasses = 'bg-bg-tertiary border-border text-muted-foreground cursor-not-allowed';
 
   let classes = $derived(twMerge(
     baseClasses,

package/dist/primitives/Skeleton/CardPlaceholder.spec.js

@@ -121,7 +121,7 @@ describe('CardPlaceholder Styling', () => {
     const { container } = render(CardPlaceholder);
     const wrapper = container.querySelector('[role="status"]');
     expect(wrapper).toHaveClass('border');
-    expect(wrapper).toHaveClass('border-gray-200');
+    expect(wrapper).toHaveClass('border-border');
   });
 
   test('has rounded corners', () => {

package/dist/primitives/Skeleton/CardPlaceholder.svelte

@@ -49,14 +49,14 @@
 
 <div
   role="status"
-  class="{cardWidthClass} p-4 border border-gray-200 rounded-lg shadow dark:border-gray-700 {animateClass} {className}"
+  class="{cardWidthClass} p-4 border border-border rounded-lg shadow {animateClass} {className}"
   aria-label={labels.loadingCard}
   {...restProps}
 >
   {#if showImage}
-    <div class="flex items-center justify-center {imageHeightClass} mb-4 bg-gray-300 rounded-lg dark:bg-gray-700">
+    <div class="flex items-center justify-center {imageHeightClass} mb-4 bg-bg-quaternary rounded-lg">
       <svg
-        class="w-10 h-10 text-gray-200 dark:text-gray-600"
+        class="w-10 h-10 text-text-tertiary"
         aria-hidden="true"
         xmlns="http://www.w3.org/2000/svg"
         fill="currentColor"
@@ -68,16 +68,16 @@
     </div>
   {/if}
 
-  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-80 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-72 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-sm"></div>
+  <div class="h-2.5 bg-bg-tertiary rounded-full w-48 mb-4"></div>
+  <div class="h-2 bg-bg-tertiary rounded-full mb-2.5"></div>
+  <div class="h-2 bg-bg-tertiary rounded-full max-w-80 mb-2.5"></div>
+  <div class="h-2 bg-bg-tertiary rounded-full max-w-72 mb-2.5"></div>
+  <div class="h-2 bg-bg-tertiary rounded-full max-w-sm"></div>
 
   {#if showAvatar}
     <div class="flex items-center mt-4">
       <svg
-        class="w-8 h-8 text-gray-200 dark:text-gray-700 me-3"
+        class="w-8 h-8 text-text-tertiary me-3"
         aria-hidden="true"
         xmlns="http://www.w3.org/2000/svg"
         fill="currentColor"
@@ -86,8 +86,8 @@
         <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
       </svg>
       <div>
-        <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-48"></div>
+        <div class="h-2.5 bg-bg-tertiary rounded-full w-32 mb-2"></div>
+        <div class="h-2 bg-bg-tertiary rounded-full w-48"></div>
       </div>
     </div>
   {/if}

package/dist/primitives/Skeleton/ImagePlaceholder.spec.js

@@ -87,7 +87,7 @@ describe('ImagePlaceholder ShowText', () => {
   test('showText is false by default', () => {
     const { container } = render(ImagePlaceholder);
     // Count placeholder text bars - should only have the sr-only one
-    const textBars = container.querySelectorAll('.rounded-full.bg-gray-200');
+    const textBars = container.querySelectorAll('.rounded-full.bg-bg-tertiary');
     expect(textBars.length).toBe(0);
   });
 
@@ -103,7 +103,7 @@ describe('ImagePlaceholder Styling', () => {
   test('image container has gray background', () => {
     const { container } = render(ImagePlaceholder);
     const imageContainer = container.querySelector('.flex.items-center.justify-center');
-    expect(imageContainer).toHaveClass('bg-gray-300');
+    expect(imageContainer).toHaveClass('bg-bg-quaternary');
   });
 
   test('image container has rounded corners', () => {

package/dist/primitives/Skeleton/ImagePlaceholder.svelte

@@ -42,9 +42,9 @@
   aria-label={labels.loadingImage}
   {...restProps}
 >
-  <div class="flex items-center justify-center w-full {imageHeightClass} bg-gray-300 rounded-lg dark:bg-gray-700">
+  <div class="flex items-center justify-center w-full {imageHeightClass} bg-bg-quaternary rounded-lg">
     <svg
-      class="w-10 h-10 text-gray-200 dark:text-gray-600"
+      class="w-10 h-10 text-text-tertiary"
       aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
       fill="currentColor"
@@ -56,11 +56,11 @@
 
   {#if showText}
     <div class="mt-4">
-      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-lg mb-2.5"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md mb-2.5"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md"></div>
+      <div class="h-2.5 bg-bg-tertiary rounded-full w-48 mb-4"></div>
+      <div class="h-2 bg-bg-tertiary rounded-full max-w-lg mb-2.5"></div>
+      <div class="h-2 bg-bg-tertiary rounded-full mb-2.5"></div>
+      <div class="h-2 bg-bg-tertiary rounded-full max-w-md mb-2.5"></div>
+      <div class="h-2 bg-bg-tertiary rounded-full max-w-md"></div>
     </div>
   {/if}
 

package/dist/primitives/Skeleton/ListPlaceholder.spec.js

@@ -168,14 +168,14 @@ describe('ListPlaceholder Styling', () => {
     const { container } = render(ListPlaceholder);
     const wrapper = container.querySelector('[role="status"]');
     expect(wrapper).toHaveClass('border');
-    expect(wrapper).toHaveClass('border-gray-200');
+    expect(wrapper).toHaveClass('border-border');
   });
 
   test('has dividers between items', () => {
     const { container } = render(ListPlaceholder);
     const wrapper = container.querySelector('[role="status"]');
     expect(wrapper).toHaveClass('divide-y');
-    expect(wrapper).toHaveClass('divide-gray-200');
+    expect(wrapper).toHaveClass('divide-border');
   });
 
   test('has rounded corners', () => {

package/dist/primitives/Skeleton/ListPlaceholder.svelte

@@ -51,7 +51,7 @@
 
 <div
   role="status"
-  class="{containerWidthClass} p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded-lg shadow dark:divide-gray-700 dark:border-gray-700 {animateClass} {className}"
+  class="{containerWidthClass} p-4 space-y-4 border border-border divide-y divide-border rounded-lg shadow {animateClass} {className}"
   aria-label={labels.loadingList}
   {...restProps}
 >
@@ -60,7 +60,7 @@
       <div class="flex items-center">
         {#if showIcon}
           <svg
-            class="{iconSizeClass} text-gray-200 dark:text-gray-700 me-3"
+            class="{iconSizeClass} text-text-tertiary me-3"
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             fill="currentColor"
@@ -70,13 +70,13 @@
           </svg>
         {/if}
         <div>
-          <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-          <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-32"></div>
+          <div class="h-2.5 bg-bg-quaternary rounded-full w-24 mb-2.5"></div>
+          <div class="h-2 bg-bg-tertiary rounded-full w-32"></div>
         </div>
       </div>
 
       {#if showAction}
-        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+        <div class="h-2.5 bg-bg-quaternary rounded-full w-12"></div>
       {/if}
     </div>
   {/each}

package/dist/primitives/Skeleton/Skeleton.spec.js

@@ -35,19 +35,19 @@ describe('Skeleton Component', () => {
 describe('Skeleton Lines', () => {
   test('defaults to 3 lines', () => {
     const { container } = render(Skeleton);
-    const lines = container.querySelectorAll('.rounded-full.bg-gray-200');
+    const lines = container.querySelectorAll('.rounded-full.bg-bg-tertiary');
     expect(lines.length).toBe(3);
   });
 
   test('renders custom number of lines', () => {
     const { container } = render(Skeleton, { props: { lines: 5 } });
-    const lineElements = container.querySelectorAll('.rounded-full.bg-gray-200');
+    const lineElements = container.querySelectorAll('.rounded-full.bg-bg-tertiary');
     expect(lineElements.length).toBe(5);
   });
 
   test('renders 1 line when lines=1', () => {
     const { container } = render(Skeleton, { props: { lines: 1 } });
-    const lineElements = container.querySelectorAll('.rounded-full.bg-gray-200');
+    const lineElements = container.querySelectorAll('.rounded-full.bg-bg-tertiary');
     expect(lineElements.length).toBe(1);
   });
 
@@ -59,19 +59,19 @@ describe('Skeleton Lines', () => {
     });
   });
 
-  test('lines have bg-gray-200 background', () => {
+  test('lines have bg-bg-tertiary background', () => {
     const { container } = render(Skeleton);
     const lines = container.querySelectorAll('[role="status"] > div');
     lines.forEach(line => {
-      expect(line).toHaveClass('bg-gray-200');
+      expect(line).toHaveClass('bg-bg-tertiary');
     });
   });
 
-  test('lines have dark mode background', () => {
+  test('lines have token-based background', () => {
     const { container } = render(Skeleton);
     const lines = container.querySelectorAll('[role="status"] > div');
     lines.forEach(line => {
-      expect(line).toHaveClass('dark:bg-gray-700');
+      expect(line).toHaveClass('bg-bg-tertiary');
     });
   });
 

package/dist/primitives/Skeleton/Skeleton.stories.svelte

@@ -124,7 +124,7 @@
   {#snippet template()}
     <div class="space-y-8">
       <div>
-        <h3 class="text-sm font-medium text-gray-700 mb-3">Basic Skeleton</h3>
+        <h3 class="text-sm font-medium text-text-secondary mb-3">Basic Skeleton</h3>
         <div class="space-y-2 max-w-md">
           <Skeleton class="h-4 w-full" />
           <Skeleton class="h-4 w-3/4" />
@@ -134,15 +134,15 @@
 
       <div class="grid grid-cols-3 gap-6">
         <div>
-          <h3 class="text-sm font-medium text-gray-700 mb-3">Image Placeholder</h3>
+          <h3 class="text-sm font-medium text-text-secondary mb-3">Image Placeholder</h3>
           <ImagePlaceholder />
         </div>
         <div>
-          <h3 class="text-sm font-medium text-gray-700 mb-3">Card Placeholder</h3>
+          <h3 class="text-sm font-medium text-text-secondary mb-3">Card Placeholder</h3>
           <CardPlaceholder />
         </div>
         <div>
-          <h3 class="text-sm font-medium text-gray-700 mb-3">List Placeholder</h3>
+          <h3 class="text-sm font-medium text-text-secondary mb-3">List Placeholder</h3>
           <ListPlaceholder />
         </div>
       </div>

package/dist/primitives/Skeleton/Skeleton.svelte

@@ -48,7 +48,7 @@
 >
   {#each Array(lines) as _, i}
     <div
-      class="{heightClass} bg-gray-200 rounded-full dark:bg-gray-700 {widthPatterns[i % widthPatterns.length]} {i < lines - 1 ? 'mb-2.5' : ''}"
+      class="{heightClass} bg-bg-tertiary rounded-full {widthPatterns[i % widthPatterns.length]} {i < lines - 1 ? 'mb-2.5' : ''}"
     ></div>
   {/each}
   <span class="sr-only">{labels.loading}</span>

package/dist/primitives/Spinner/Spinner.spec.js

@@ -44,17 +44,16 @@ describe("Spinner Component Tests", () => {
     expect(svg).toHaveAttribute("viewBox", "0 0 100 101");
   });
 
-  test("Has dark mode text color classes", () => {
+  test("Has text color classes", () => {
     const { container } = render(Spinner);
     const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("text-gray-200");
-    expect(svg).toHaveClass("dark:text-gray-600");
+    expect(svg).toHaveClass("text-text-tertiary");
   });
 
   test("Has default blue fill color", () => {
     const { container } = render(Spinner);
     const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("fill-blue-600");
+    expect(svg).toHaveClass("fill-brand-primary");
   });
 
   test("Accepts custom class", () => {
@@ -79,6 +78,6 @@ describe("Spinner Component Tests", () => {
   test("Falls back to blue color when an invalid color is provided", () => {
     const { container } = render(Spinner, { color: "invalid-color" });
     const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("fill-blue-600");
+    expect(svg).toHaveClass("fill-brand-primary");
   });
 });

package/dist/primitives/Spinner/Spinner.stories.svelte

@@ -16,7 +16,7 @@
 </Story>
 
 <Story name="Spinner in Container">
-  <div class="flex items-center justify-center h-40 bg-gray-100 dark:bg-gray-700 rounded-lg">
+  <div class="flex items-center justify-center h-40 bg-muted rounded-lg">
     <Spinner />
   </div>
 </Story>
@@ -24,6 +24,6 @@
 <Story name="Spinner with Text">
   <div class="flex flex-col items-center gap-4">
     <Spinner />
-    <p class="text-gray-500 dark:text-gray-400">Loading data...</p>
+    <p class="text-muted-foreground">Loading data...</p>
   </div>
 </Story>

package/dist/primitives/Spinner/Spinner.svelte

@@ -33,7 +33,7 @@
 
 <svg
   aria-hidden="true"
-  class="{sizeClass} text-gray-200 animate-spin dark:text-gray-600 {colorClass} {className}"
+  class="{sizeClass} text-text-tertiary animate-spin {colorClass} {className}"
   viewBox="0 0 100 101"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"

package/dist/primitives/Tabs/Tabs.spec.js

@@ -42,7 +42,7 @@ describe('Tabs Styles - Underline', () => {
     const { container } = render(Tabs, { props: { tabStyle: 'underline' } });
     const tablist = container.querySelector('ul[role="tablist"]');
     expect(tablist).toHaveClass('border-b');
-    expect(tablist).toHaveClass('border-gray-200');
+    expect(tablist).toHaveClass('border-border');
   });
 
   test('underline style has -mb-px class', () => {
@@ -77,7 +77,7 @@ describe('Tabs Styles - Full', () => {
     const { container } = render(Tabs, { props: { tabStyle: 'full' } });
     const tablist = container.querySelector('ul[role="tablist"]');
     expect(tablist).toHaveClass('divide-x');
-    expect(tablist).toHaveClass('divide-gray-200');
+    expect(tablist).toHaveClass('divide-border');
   });
 
   test('full style has rounded-lg class', () => {
@@ -151,17 +151,17 @@ describe('Tabs Accessibility', () => {
   });
 });
 
-describe('Tabs Dark Mode', () => {
-  test('underline has dark mode border class', () => {
+describe('Tabs Token-Based Styling', () => {
+  test('underline has token-based border class', () => {
     const { container } = render(Tabs, { props: { tabStyle: 'underline' } });
     const tablist = container.querySelector('ul[role="tablist"]');
-    expect(tablist).toHaveClass('dark:border-gray-700');
+    expect(tablist).toHaveClass('border-border');
   });
 
-  test('full style has dark mode divide class', () => {
+  test('full style has token-based divide class', () => {
     const { container } = render(Tabs, { props: { tabStyle: 'full' } });
     const tablist = container.querySelector('ul[role="tablist"]');
-    expect(tablist).toHaveClass('dark:divide-gray-700');
+    expect(tablist).toHaveClass('divide-border');
   });
 });
 
@@ -254,13 +254,13 @@ describe('Tabs with TabItems - registerTab functionality', () => {
     const buttons = container.querySelectorAll('button[role="tab"]');
 
     // Active tab should have pills active classes
-    expect(buttons[0]).toHaveClass('bg-blue-600');
+    expect(buttons[0]).toHaveClass('bg-brand-primary');
     expect(buttons[0]).toHaveClass('text-white');
     expect(buttons[0]).toHaveClass('rounded-lg');
 
     // Inactive tabs should have pills inactive classes
     expect(buttons[1]).toHaveClass('rounded-lg');
-    expect(buttons[1]).not.toHaveClass('bg-blue-600');
+    expect(buttons[1]).not.toHaveClass('bg-brand-primary');
   });
 
   test('pills style inactive tab hover state', async () => {
@@ -272,8 +272,8 @@ describe('Tabs with TabItems - registerTab functionality', () => {
 
     // Check that inactive button has hover classes in its className
     const inactiveButton = buttons[1];
-    expect(inactiveButton.className).toContain('hover:text-gray-900');
-    expect(inactiveButton.className).toContain('hover:bg-gray-100');
+    expect(inactiveButton.className).toContain('hover:text-text-primary');
+    expect(inactiveButton.className).toContain('hover:bg-muted');
   });
 
   test('full style applies correct classes', async () => {
@@ -285,11 +285,11 @@ describe('Tabs with TabItems - registerTab functionality', () => {
 
     // Active tab should have full active classes
     expect(buttons[0]).toHaveClass('w-full');
-    expect(buttons[0]).toHaveClass('bg-gray-100');
-    expect(buttons[0]).toHaveClass('text-gray-900');
+    expect(buttons[0]).toHaveClass('bg-muted');
+    expect(buttons[0]).toHaveClass('text-text-primary');
 
     // Inactive tabs should have full inactive classes
     expect(buttons[1]).toHaveClass('w-full');
-    expect(buttons[1]).toHaveClass('bg-white');
+    expect(buttons[1]).toHaveClass('bg-card');
   });
 });

package/dist/primitives/Tabs/Tabs.stories.svelte

@@ -25,19 +25,19 @@
       <TabItem title="Profile">
         <div class="p-4">
           <h3 class="font-medium mb-2">Profile Settings</h3>
-          <p class="text-gray-600">Manage your profile information and preferences.</p>
+          <p class="text-text-secondary">Manage your profile information and preferences.</p>
         </div>
       </TabItem>
       <TabItem title="Account">
         <div class="p-4">
           <h3 class="font-medium mb-2">Account Settings</h3>
-          <p class="text-gray-600">Manage your account security and billing.</p>
+          <p class="text-text-secondary">Manage your account security and billing.</p>
         </div>
       </TabItem>
       <TabItem title="Notifications">
         <div class="p-4">
           <h3 class="font-medium mb-2">Notification Settings</h3>
-          <p class="text-gray-600">Configure how you receive notifications.</p>
+          <p class="text-text-secondary">Configure how you receive notifications.</p>
         </div>
       </TabItem>
     </Tabs>
@@ -47,7 +47,7 @@
 <Story name="Controlled">
   {#snippet template()}
     <div>
-      <p class="text-sm text-gray-500 mb-4">Active tab: {activeTab}</p>
+      <p class="text-sm text-muted-foreground mb-4">Active tab: {activeTab}</p>
       <Tabs bind:activeTab={activeTab}>
         <TabItem title="Tab 1">
           <div class="p-4">Content for Tab 1</div>
@@ -61,11 +61,11 @@
       </Tabs>
       <div class="mt-4 flex gap-2">
         <button
-          class="px-3 py-1 bg-gray-200 rounded text-sm"
+          class="px-3 py-1 bg-bg-tertiary rounded text-sm"
           onclick={() => activeTab = 0}
         >Go to Tab 1</button>
         <button
-          class="px-3 py-1 bg-gray-200 rounded text-sm"
+          class="px-3 py-1 bg-bg-tertiary rounded text-sm"
           onclick={() => activeTab = 2}
         >Go to Tab 3</button>
       </div>

package/dist/primitives/Tabs/Tabs.svelte

@@ -84,9 +84,9 @@
 
   // Tab list classes by style
   const tabListClasses = {
-    underline: `flex flex-wrap -mb-px ${typography.sm} font-medium text-center border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-none`,
+    underline: `flex flex-wrap -mb-px ${typography.sm} font-medium text-center border-b border-border overflow-x-auto scrollbar-none`,
     pills: `flex flex-wrap ${typography.smMuted} font-medium text-center gap-2`,
-    full: `flex flex-wrap ${typography.smMuted} font-medium text-center divide-x divide-gray-200 dark:divide-gray-700 rounded-lg shadow overflow-hidden`
+    full: `flex flex-wrap ${typography.smMuted} font-medium text-center divide-x divide-border rounded-lg shadow overflow-hidden`
   };
 
   // Tab button classes by style
@@ -96,16 +96,16 @@
     switch (tabStyle) {
       case 'underline':
         return isActive
-          ? `${base} p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500`
-          : `${base} p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300`;
+          ? `${base} p-4 text-brand-primary border-b-2 border-brand-primary rounded-t-lg active`
+          : `${base} p-4 border-b-2 border-transparent rounded-t-lg hover:text-text-secondary hover:border-stroke-primary`;
       case 'pills':
         return isActive
-          ? `${base} px-4 py-3 text-white bg-blue-600 rounded-lg active`
-          : `${base} px-4 py-3 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white`;
+          ? `${base} px-4 py-3 text-white bg-brand-primary rounded-lg active`
+          : `${base} px-4 py-3 rounded-lg hover:text-text-primary hover:bg-muted`;
       case 'full':
         return isActive
-          ? `${base} w-full p-4 text-gray-900 bg-gray-100 dark:bg-gray-700 dark:text-white`
-          : `${base} w-full p-4 bg-white hover:text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700`;
+          ? `${base} w-full p-4 text-text-primary bg-muted`
+          : `${base} w-full p-4 bg-card hover:text-text-secondary hover:bg-bg-secondary`;
       default:
         return base;
     }

package/dist/primitives/Toggle.spec.js

@@ -124,11 +124,10 @@ describe('Toggle Component', () => {
     expect(switchEl).toHaveClass('toggle-lg');
   });
 
-  it('has dark mode classes', () => {
+  it('has bg-bg-tertiary class for track', () => {
     const { container } = render(Toggle);
     const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('dark:bg-gray-700');
-    expect(switchEl).toHaveClass('dark:peer-focus:ring-blue-800');
+    expect(switchEl).toHaveClass('bg-bg-tertiary');
   });
 
   it('accepts custom class', () => {
@@ -141,13 +140,12 @@ describe('Toggle Component', () => {
     const { container } = render(Toggle);
     const switchEl = container.querySelector('[role="switch"]');
     expect(switchEl).toHaveClass('peer-focus:ring-4');
-    expect(switchEl).toHaveClass('peer-focus:ring-blue-300');
   });
 
   it('has blue background when checked', () => {
     const { container } = render(Toggle);
     const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('peer-checked:bg-blue-600');
+    expect(switchEl).toHaveClass('peer-checked:bg-brand-primary');
   });
 });