@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/primitives/Label/Label.spec.js

@@ -31,57 +31,57 @@ describe('Label Colors', () => {
   test('default color is gray', () => {
     const { container } = render(Label);
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-gray-900');
+    expect(label).toHaveClass('text-text-primary');
   });
 
-  test('gray color applies text-gray-900', () => {
+  test('gray color applies text-text-primary', () => {
     const { container } = render(Label, { props: { color: 'gray' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-gray-900');
+    expect(label).toHaveClass('text-text-primary');
   });
 
-  test('green color applies text-green-700', () => {
+  test('green color applies text-status-success-text', () => {
     const { container } = render(Label, { props: { color: 'green' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-green-700');
+    expect(label).toHaveClass('text-status-success-text');
   });
 
-  test('red color applies text-red-700', () => {
+  test('red color applies text-status-error-text', () => {
     const { container } = render(Label, { props: { color: 'red' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-red-700');
+    expect(label).toHaveClass('text-status-error-text');
   });
 
-  test('disabled color applies text-gray-400', () => {
+  test('disabled color applies text-muted-foreground', () => {
     const { container } = render(Label, { props: { color: 'disabled' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-gray-400');
+    expect(label).toHaveClass('text-muted-foreground');
   });
 });
 
-describe('Label Dark Mode', () => {
-  test('gray has dark mode class', () => {
+describe('Label Token-Based Colors', () => {
+  test('gray uses text-text-primary', () => {
     const { container } = render(Label, { props: { color: 'gray' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('dark:text-gray-300');
+    expect(label).toHaveClass('text-text-primary');
   });
 
-  test('green has dark mode class', () => {
+  test('green uses text-status-success-text', () => {
     const { container } = render(Label, { props: { color: 'green' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('dark:text-green-500');
+    expect(label).toHaveClass('text-status-success-text');
   });
 
-  test('red has dark mode class', () => {
+  test('red uses text-status-error-text', () => {
     const { container } = render(Label, { props: { color: 'red' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('dark:text-red-500');
+    expect(label).toHaveClass('text-status-error-text');
   });
 
-  test('disabled has dark mode class', () => {
+  test('disabled uses text-muted-foreground', () => {
     const { container } = render(Label, { props: { color: 'disabled' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('dark:text-gray-500');
+    expect(label).toHaveClass('text-muted-foreground');
   });
 });
 
@@ -148,8 +148,7 @@ describe('Label Color Fallback', () => {
   test('falls back to gray when an invalid color is provided', () => {
     const { container } = render(Label, { props: { color: 'invalid-color' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-gray-900');
-    expect(label).toHaveClass('dark:text-gray-300');
+    expect(label).toHaveClass('text-text-primary');
   });
 });
 
@@ -160,7 +159,7 @@ describe('Label Class Composition', () => {
     });
     const label = container.querySelector('label');
     expect(label).toHaveClass('text-sm'); // from defaultClass
-    expect(label).toHaveClass('text-green-700'); // from color
+    expect(label).toHaveClass('text-status-success-text'); // from color
     expect(label).toHaveClass('extra-class'); // from custom class
   });
 });

package/dist/primitives/Label/Label.svelte

@@ -20,10 +20,10 @@
   }: Props = $props();
 
   const colorClasses = {
-    gray: "text-gray-900 dark:text-gray-300",
-    green: "text-green-700 dark:text-green-500",
-    red: "text-red-700 dark:text-red-500",
-    disabled: "text-gray-400 dark:text-gray-500"
+    gray: "text-text-primary",
+    green: "text-status-success-text",
+    red: "text-status-error-text",
+    disabled: "text-muted-foreground"
   };
 
   let labelClass = $derived(`${defaultClass} ${colorClasses[color] || colorClasses.gray} ${className}`.trim());

package/dist/primitives/LandingButton/LandingButton.svelte

@@ -43,11 +43,11 @@
   const baseClasses = 'inline-flex items-center justify-center rounded-xl font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none no-underline hover:no-underline shadow hover:shadow-md';
 
   const variantClasses = {
-    primary: 'text-white bg-blue-600 border border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:border-blue-600 dark:hover:bg-blue-700',
-    secondary: 'text-gray-700 bg-white border border-gray-200 hover:border-gray-400 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:text-gray-100',
+    primary: 'text-white bg-brand-primary border border-brand-primary hover:bg-brand-primary',
+    secondary: 'text-text-secondary bg-card border border-border hover:border-stroke-primary hover:text-text-primary',
   };
 
-  const disabledClasses = 'bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed shadow-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500';
+  const disabledClasses = 'bg-bg-tertiary border-border text-muted-foreground cursor-not-allowed shadow-none';
 
   // Landing size from tokens
   let sizeClass = $derived(buttonSizes.landing);

package/dist/primitives/MenuItem/MenuItem.spec.js

@@ -29,19 +29,19 @@ describe('MenuItem', () => {
   test('applies default (non-danger) styling', () => {
     const { container } = render(MenuItem);
     const button = container.querySelector('button');
-    expect(button.className).toContain('text-gray-900');
+    expect(button.className).toContain('text-text-primary');
   });
 
   test('applies danger styling', () => {
     const { container } = render(MenuItem, { props: { danger: true } });
     const button = container.querySelector('button');
-    expect(button.className).toContain('text-red-600');
+    expect(button.className).toContain('text-accent-danger');
   });
 
   test('applies active styling', () => {
     const { container } = render(MenuItem, { props: { active: true } });
     const button = container.querySelector('button');
-    expect(button.className).toContain('bg-blue-50');
+    expect(button.className).toContain('bg-status-info-bg');
   });
 
   test('applies disabled state', () => {
@@ -117,8 +117,8 @@ describe('MenuItem', () => {
   test('danger + active combination applies danger active styling', () => {
     const { container } = render(MenuItem, { props: { danger: true, active: true } });
     const button = container.querySelector('button');
-    expect(button.className).toContain('text-red-600');
-    expect(button.className).toContain('bg-blue-50');
+    expect(button.className).toContain('text-accent-danger');
+    expect(button.className).toContain('bg-status-info-bg');
   });
 
   test('unknown size falls back to md sizing', () => {

package/dist/primitives/MenuItem/MenuItem.svelte

@@ -44,12 +44,12 @@
   const baseClasses = 'w-full text-left whitespace-nowrap bg-transparent border-transparent rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
 
   const variantClasses = {
-    default: 'text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
-    danger: 'text-red-600 hover:bg-red-50 dark:text-red-500 dark:hover:bg-gray-600',
+    default: 'text-text-primary hover:bg-muted',
+    danger: 'text-accent-danger hover:bg-status-error-bg',
   };
 
-  const activeClasses = 'bg-blue-50 dark:bg-gray-700';
-  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
+  const activeClasses = 'bg-status-info-bg';
+  const disabledClasses = 'text-muted-foreground cursor-not-allowed';
 
   let sizeClass = $derived(buttonMenuItemSizes[size] || buttonMenuItemSizes.md);
 

package/dist/primitives/Modal/Modal.stories.svelte

@@ -27,12 +27,12 @@
       <h2 class="text-xl font-semibold mb-2">Modal Title</h2>
     {/snippet}
     {#snippet body()}
-      <p class="text-gray-500 dark:text-gray-400">This is the modal body content.</p>
+      <p class="text-muted-foreground">This is the modal body content.</p>
     {/snippet}
     {#snippet footer()}
       <button
         onclick={() => (show1 = false)}
-        class="px-4 py-2 bg-gray-600 text-white rounded-lg"
+        class="px-4 py-2 bg-bg-tertiary text-white rounded-lg"
       >
         Close
       </button>
@@ -51,9 +51,9 @@
     {#snippet body()}
       <div class="flex flex-col items-center gap-4">
         <div
-          class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"
+          class="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-primary"
         ></div>
-        <p class="text-gray-500 dark:text-gray-400">Processing your request...</p>
+        <p class="text-muted-foreground">Processing your request...</p>
       </div>
     {/snippet}
   </ModalProgress>
@@ -62,22 +62,22 @@
 <Story name="Success State">
   <button
     onclick={() => (show3 = true)}
-    class="px-4 py-2 bg-green-600 text-white rounded-lg"
+    class="px-4 py-2 bg-accent-success text-white rounded-lg"
   >
     Open Success Modal
   </button>
   <ModalProgress bind:open={show3} isSuccess={true}>
     {#snippet body()}
       <div class="flex flex-col items-center gap-4 text-center">
-        <div class="text-green-600 dark:text-green-400 text-5xl">✓</div>
+        <div class="text-accent-success text-5xl">✓</div>
         <h3 class="text-xl font-semibold">Success!</h3>
-        <p class="text-gray-500 dark:text-gray-400">Your action was completed successfully.</p>
+        <p class="text-muted-foreground">Your action was completed successfully.</p>
       </div>
     {/snippet}
     {#snippet footer()}
       <button
         onclick={() => (show3 = false)}
-        class="px-4 py-2 bg-green-600 text-white rounded-lg"
+        class="px-4 py-2 bg-accent-success text-white rounded-lg"
       >
         Done
       </button>

package/dist/primitives/Modal/Modal.svelte

@@ -121,7 +121,7 @@
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    class="fixed inset-0 flex bg-black/50 z-50 items-end justify-center md:items-center md:p-4 touch-none overscroll-none"
+    class="fixed inset-0 flex bg-overlay-bg z-50 items-end justify-center md:items-center md:p-4 touch-none overscroll-none"
     onmousedown={(e) => {
       // Only track direct clicks on backdrop, not drags that end on backdrop
       if (e.target === e.currentTarget && !persistent) {
@@ -145,13 +145,13 @@
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
-      class="md:hidden bg-white dark:bg-gray-800 rounded-t-3xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden flex flex-col shadow-[0_-10px_40px_rgba(0,0,0,0.15)] touch-pan-y overscroll-contain"
+      class="md:hidden bg-card rounded-t-3xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden flex flex-col shadow-[0_-10px_40px_rgba(0,0,0,0.15)] touch-pan-y overscroll-contain"
       onclick={(e) => e.stopPropagation()}
       transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
     >
       <!-- Handle bar -->
       <div class="flex justify-center pt-3 pb-1 shrink-0">
-        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-xs"></div>
+        <div class="w-10 h-1 bg-bg-quaternary rounded-xs"></div>
       </div>
 
       <div class="p-6 pb-[calc(5rem+env(safe-area-inset-bottom,0px))] overflow-y-auto flex-1">
@@ -167,7 +167,7 @@
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
-      class="hidden md:block bg-white dark:bg-gray-800 p-6 rounded-lg {modalSizeClass} w-full max-h-[calc(100vh-4rem)] overflow-y-auto shadow-2xl"
+      class="hidden md:block bg-card p-6 rounded-lg {modalSizeClass} w-full max-h-[calc(100vh-4rem)] overflow-y-auto shadow-2xl"
       onclick={(e) => e.stopPropagation()}
       transition:fly={{ y: 20, duration: 200 }}
     >

package/dist/primitives/NavItem/NavItem.spec.js

@@ -31,13 +31,13 @@ describe('NavItem', () => {
   test('applies default (inactive) styling', () => {
     const { container } = render(NavItem);
     const button = container.querySelector('button');
-    expect(button.className).toContain('text-gray-500');
+    expect(button.className).toContain('text-muted-foreground');
   });
 
   test('applies active styling', () => {
     const { container } = render(NavItem, { props: { active: true } });
     const button = container.querySelector('button');
-    expect(button.className).toContain('text-blue-600');
+    expect(button.className).toContain('text-brand-primary');
   });
 
   test('applies disabled styling', () => {

package/dist/primitives/NavItem/NavItem.svelte

@@ -35,9 +35,9 @@
   }: Props = $props();
 
   const baseClasses = 'flex flex-col items-center justify-center h-full py-2 bg-transparent border-transparent rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
-  const defaultClasses = 'text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-500';
-  const activeClasses = 'text-blue-600 dark:text-blue-500';
-  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
+  const defaultClasses = 'text-muted-foreground hover:text-brand-primary';
+  const activeClasses = 'text-brand-primary';
+  const disabledClasses = 'text-muted-foreground cursor-not-allowed';
 
   let variantClass = $derived(() => {
     if (disabled) return disabledClasses;

package/dist/primitives/NumberInput/NumberInput.spec.js

@@ -146,54 +146,54 @@ describe('NumberInput Styling', () => {
     expect(incrementBtn).toHaveClass('rounded-r-lg');
   });
 
-  test('buttons have bg-gray-100 background', () => {
+  test('buttons have bg-muted background', () => {
     const { container } = render(NumberInput);
     const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
-    expect(decrementBtn).toHaveClass('bg-gray-100');
+    expect(decrementBtn).toHaveClass('bg-muted');
   });
 
-  test('buttons have border-gray-300 border', () => {
+  test('buttons have border-stroke-primary border', () => {
     const { container } = render(NumberInput);
     const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
-    expect(decrementBtn).toHaveClass('border-gray-300');
+    expect(decrementBtn).toHaveClass('border-stroke-primary');
   });
 
-  test('display has bg-gray-50 background', () => {
+  test('display has bg-bg-secondary background', () => {
     const { container } = render(NumberInput);
     const display = container.querySelector('span');
-    expect(display).toHaveClass('bg-gray-50');
+    expect(display).toHaveClass('bg-bg-secondary');
   });
 
-  test('display has text-gray-500 color', () => {
+  test('display has text-muted-foreground color', () => {
     const { container } = render(NumberInput);
     const display = container.querySelector('span');
-    expect(display).toHaveClass('text-gray-500');
+    expect(display).toHaveClass('text-muted-foreground');
   });
 });
 
-describe('NumberInput Dark Mode', () => {
-  test('buttons have dark mode background', () => {
+describe('NumberInput Token-Based Styling', () => {
+  test('buttons have token-based background', () => {
     const { container } = render(NumberInput);
     const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
-    expect(decrementBtn).toHaveClass('dark:bg-gray-700');
+    expect(decrementBtn).toHaveClass('bg-muted');
   });
 
-  test('buttons have dark mode border', () => {
+  test('buttons have token-based border', () => {
     const { container } = render(NumberInput);
     const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
-    expect(decrementBtn).toHaveClass('dark:border-gray-600');
+    expect(decrementBtn).toHaveClass('border-stroke-primary');
   });
 
-  test('display has dark mode background', () => {
+  test('display has token-based background', () => {
     const { container } = render(NumberInput);
     const display = container.querySelector('span');
-    expect(display).toHaveClass('dark:bg-gray-800');
+    expect(display).toHaveClass('bg-bg-secondary');
   });
 
-  test('display has dark mode text color', () => {
+  test('display has token-based text color', () => {
     const { container } = render(NumberInput);
     const display = container.querySelector('span');
-    expect(display).toHaveClass('dark:text-gray-400');
+    expect(display).toHaveClass('text-muted-foreground');
   });
 });
 

package/dist/primitives/NumberInput/NumberInput.svelte

@@ -4,8 +4,8 @@
    * Quantity stepper with increment/decrement buttons
    *
    * Matches Figma design:
-   * - Buttons: bg-gray-100, border-gray-300, outer corners rounded
-   * - Display: bg-gray-50, border-gray-300
+   * - Buttons: bg-muted, border-stroke-primary, outer corners rounded
+   * - Display: bg-bg-secondary, border-stroke-primary
    * - Height: 37px
    * - Icons: 10x10px
    */
@@ -55,9 +55,9 @@
   let isMaxDisabled = $derived(disabled || value >= max);
 
   // Button base classes matching Figma spec
-  const buttonBase = "h-[37px] px-3 flex items-center justify-center bg-gray-100 border border-gray-300 transition-colors dark:bg-gray-700 dark:border-gray-600";
-  const buttonHover = "hover:bg-gray-200 dark:hover:bg-gray-600";
-  const buttonDisabled = "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-gray-100 dark:disabled:hover:bg-gray-700";
+  const buttonBase = "h-[37px] px-3 flex items-center justify-center bg-muted border border-stroke-primary transition-colors";
+  const buttonHover = "hover:bg-bg-tertiary";
+  const buttonDisabled = "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-muted:hover:bg-bg-secondary";
 
   let decrementClasses = $derived(twMerge(
     buttonBase,
@@ -74,7 +74,7 @@
   ));
 
   // Display classes matching Figma spec
-  const displayClasses = "h-[37px] px-4 flex items-center justify-center text-gray-500 text-sm bg-gray-50 border-y border-gray-300 -mx-px dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600";
+  const displayClasses = "h-[37px] px-4 flex items-center justify-center text-muted-foreground text-sm bg-bg-secondary border-y border-stroke-primary -mx-px";
 
   let containerClasses = $derived(twMerge(
     "inline-flex items-center",
@@ -90,7 +90,7 @@
     disabled={isMinDisabled}
     aria-label={labels.decreaseQuantity}
   >
-    <svg class="w-3 h-3 text-gray-800 dark:text-white" fill="none" viewBox="0 0 18 2">
+    <svg class="w-3 h-3 text-text-primary" fill="none" viewBox="0 0 18 2">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16"/>
     </svg>
   </button>
@@ -106,7 +106,7 @@
     disabled={isMaxDisabled}
     aria-label={labels.increaseQuantity}
   >
-    <svg class="w-3 h-3 text-gray-800 dark:text-white" fill="none" viewBox="0 0 18 18">
+    <svg class="w-3 h-3 text-text-primary" fill="none" viewBox="0 0 18 18">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
     </svg>
   </button>

package/dist/primitives/Pagination/DotIndicator.svelte

@@ -31,14 +31,14 @@
 
   const variantClasses: Record<string, { active: string; inactive: string; hover: string }> = {
     light: {
-      active: 'bg-white',
-      inactive: 'bg-white/30',
-      hover: 'hover:bg-white/50',
+      active: 'bg-card',
+      inactive: 'bg-card/30',
+      hover: 'hover:bg-card/50',
     },
     dark: {
-      active: 'bg-gray-900 dark:bg-white',
-      inactive: 'bg-gray-300 dark:bg-gray-600',
-      hover: 'hover:bg-gray-400 dark:hover:bg-gray-500',
+      active: 'bg-bg-primary',
+      inactive: 'bg-bg-quaternary',
+      hover: 'hover:bg-muted-foreground',
     },
   };
 

package/dist/primitives/Pagination/Pagination.spec.js

@@ -193,13 +193,13 @@ describe('Pagination Button Styling', () => {
     const { container } = render(Pagination, { props: { totalPages: 3 } });
     const button = container.querySelector('[aria-label="Previous page"]');
     expect(button).toHaveClass('border');
-    expect(button).toHaveClass('border-gray-300');
+    expect(button).toHaveClass('border-stroke-primary');
   });
 
-  test('buttons have bg-white background', () => {
+  test('buttons have bg-card background', () => {
     const { container } = render(Pagination, { props: { totalPages: 3, currentPage: 1 } });
     const nextButton = container.querySelector('[aria-label="Next page"]');
-    expect(nextButton).toHaveClass('bg-white');
+    expect(nextButton).toHaveClass('bg-card');
   });
 
   test('prev button has rounded-s-lg', () => {
@@ -214,11 +214,11 @@ describe('Pagination Button Styling', () => {
     expect(nextButton).toHaveClass('rounded-e-lg');
   });
 
-  test('active page has bg-blue-50', () => {
+  test('active page has bg-status-info-bg', () => {
     const { container } = render(Pagination, { props: { totalPages: 3, currentPage: 2 } });
     const activeButton = container.querySelector('[aria-current="page"]');
-    expect(activeButton).toHaveClass('bg-blue-50');
-    expect(activeButton).toHaveClass('text-blue-600');
+    expect(activeButton).toHaveClass('bg-status-info-bg');
+    expect(activeButton).toHaveClass('text-brand-primary');
   });
 
   test('disabled buttons have opacity-50', () => {

package/dist/primitives/Pagination/Pagination.stories.svelte

@@ -28,7 +28,7 @@
   {#snippet template()}
     <div>
       <Pagination totalPages={10} bind:currentPage={page1} />
-      <p class="text-sm text-gray-500 mt-4">Current page: {page1}</p>
+      <p class="text-sm text-muted-foreground mt-4">Current page: {page1}</p>
     </div>
   {/snippet}
 </Story>
@@ -37,7 +37,7 @@
   {#snippet template()}
     <div>
       <Pagination totalPages={10} bind:currentPage={page2} />
-      <p class="text-sm text-gray-500 mt-4">Current page: {page2}</p>
+      <p class="text-sm text-muted-foreground mt-4">Current page: {page2}</p>
     </div>
   {/snippet}
 </Story>
@@ -46,7 +46,7 @@
   {#snippet template()}
     <div>
       <Pagination totalPages={3} bind:currentPage={page3} />
-      <p class="text-sm text-gray-500 mt-4">Current page: {page3}</p>
+      <p class="text-sm text-muted-foreground mt-4">Current page: {page3}</p>
     </div>
   {/snippet}
 </Story>
@@ -63,7 +63,7 @@
       <h3 class="font-medium mb-4">Search Results</h3>
       <ul class="space-y-2 mb-4">
         {#each [1, 2, 3, 4, 5] as i}
-          <li class="p-3 border rounded hover:bg-gray-50">
+          <li class="p-3 border rounded hover:bg-bg-secondary">
             Result item {i}
           </li>
         {/each}

package/dist/primitives/Pagination/Pagination.svelte

@@ -116,10 +116,10 @@
   let showEndEllipsis = $derived(visiblePages[visiblePages.length - 1] < totalPages);
 
   // Base button classes (Flowbite connected style)
-  const baseButtonClasses = "flex items-center justify-center leading-tight font-medium border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white";
+  const baseButtonClasses = "flex items-center justify-center leading-tight font-medium border border-stroke-primary bg-card text-muted-foreground hover:bg-muted hover:text-text-secondary";
 
   // Active state classes (Flowbite style)
-  const activeClasses = "flex items-center justify-center leading-tight font-medium border border-gray-300 bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700 dark:border-gray-700 dark:text-white";
+  const activeClasses = "flex items-center justify-center leading-tight font-medium border border-stroke-primary bg-status-info-bg text-brand-primary hover:bg-status-info-bg hover:text-brand-primary";
 
   // Disabled state classes
   const disabledClasses = "cursor-not-allowed opacity-50";
@@ -127,7 +127,7 @@
 
 {#if variant === 'table'}
   <div class="flex flex-col items-center gap-3 sm:flex-row sm:justify-between {className}" {...restProps}>
-    <span class={`${typography.sm} text-gray-700 dark:text-gray-400`}>
+    <span class={`${typography.sm} text-text-secondary`}>
       {labels.showing} <span class={`font-semibold ${typography.sm}`}>{startItem}</span> {labels.to} <span class={`font-semibold ${typography.sm}`}>{endItem}</span> {labels.of} <span class={`font-semibold ${typography.sm}`}>{totalItems}</span> {labels.entries}
     </span>
     <nav class="inline-flex -space-x-px rtl:space-x-reverse" aria-label={labels.pagination}>

package/dist/primitives/Radio/Radio.spec.js

@@ -68,37 +68,37 @@ describe('Radio Colors', () => {
   test('default color is blue', () => {
     const { container } = render(Radio);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-blue-600');
+    expect(input).toHaveClass('text-brand-primary');
   });
 
-  test('red color applies text-red-600', () => {
+  test('red color applies text-accent-danger', () => {
     const { container } = render(Radio, { props: { color: 'red' } });
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-red-600');
+    expect(input).toHaveClass('text-accent-danger');
   });
 
-  test('green color applies text-green-600', () => {
+  test('green color applies text-accent-success', () => {
     const { container } = render(Radio, { props: { color: 'green' } });
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-green-600');
+    expect(input).toHaveClass('text-accent-success');
   });
 
-  test('purple color applies text-purple-600', () => {
+  test('purple color applies text-brand-primary', () => {
     const { container } = render(Radio, { props: { color: 'purple' } });
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-purple-600');
+    expect(input).toHaveClass('text-brand-primary');
   });
 
-  test('orange color applies text-orange-500', () => {
+  test('orange color applies text-accent-warning', () => {
     const { container } = render(Radio, { props: { color: 'orange' } });
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-orange-500');
+    expect(input).toHaveClass('text-accent-warning');
   });
 
-  test('yellow color applies text-yellow-400', () => {
+  test('yellow color applies text-accent-warning', () => {
     const { container } = render(Radio, { props: { color: 'yellow' } });
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-yellow-400');
+    expect(input).toHaveClass('text-accent-warning');
   });
 });
 
@@ -110,28 +110,28 @@ describe('Radio Input Styling', () => {
     expect(input).toHaveClass('h-4');
   });
 
-  test('has bg-gray-100 background', () => {
+  test('has bg-muted background', () => {
     const { container } = render(Radio);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('bg-gray-100');
+    expect(input).toHaveClass('bg-muted');
   });
 
-  test('has border-gray-300 border', () => {
+  test('has border-stroke-primary border', () => {
     const { container } = render(Radio);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('border-gray-300');
+    expect(input).toHaveClass('border-stroke-primary');
   });
 
-  test('has dark mode background', () => {
+  test('has token-based background', () => {
     const { container } = render(Radio);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('dark:bg-gray-700');
+    expect(input).toHaveClass('bg-muted');
   });
 
-  test('has dark mode border', () => {
+  test('has token-based border', () => {
     const { container } = render(Radio);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('dark:border-gray-600');
+    expect(input).toHaveClass('border-stroke-primary');
   });
 
   test('has focus:outline-hidden', () => {