@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/primitives/BottomSheet/BottomSheet.svelte

@@ -63,14 +63,14 @@
 
   let backdropClass = $derived(
     alwaysSheet
-      ? "fixed inset-0 z-50 flex items-end bg-gray-900/50 dark:bg-gray-900/80"
-      : "fixed inset-0 z-50 flex items-end md:items-center md:justify-center bg-gray-900/50 dark:bg-gray-900/80"
+      ? "fixed inset-0 z-50 flex items-end bg-bg-primary/50"
+      : "fixed inset-0 z-50 flex items-end md:items-center md:justify-center bg-bg-primary/50"
   );
 
   let sheetClass = $derived(
     alwaysSheet
-      ? "w-full max-h-[90dvh] bg-white dark:bg-gray-800 rounded-t-xl shadow-xl flex flex-col overflow-hidden"
-      : "w-full max-h-[90dvh] md:max-w-lg md:max-h-[80vh] md:m-4 bg-white dark:bg-gray-800 rounded-t-xl md:rounded-lg shadow-xl flex flex-col overflow-hidden"
+      ? "w-full max-h-[90dvh] bg-card rounded-t-xl shadow-xl flex flex-col overflow-hidden"
+      : "w-full max-h-[90dvh] md:max-w-lg md:max-h-[80vh] md:m-4 bg-card rounded-t-xl md:rounded-lg shadow-xl flex flex-col overflow-hidden"
   );
 </script>
 
@@ -92,11 +92,11 @@
       transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
     >
       <div class="flex justify-center pt-3 pb-2 shrink-0 {alwaysSheet ? '' : 'md:hidden'}"  >
-        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
+        <div class="w-10 h-1 bg-bg-quaternary rounded-full"></div>
       </div>
 
       {#if title}
-        <div class="px-6 pb-4 border-b border-gray-200 dark:border-gray-700 shrink-0">
+        <div class="px-6 pb-4 border-b border-border shrink-0">
           <h3 class={typography.h3}>{title}</h3>
         </div>
       {/if}
@@ -106,7 +106,7 @@
       </div>
 
       {#if actions}
-        <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 shrink-0 flex flex-col gap-3">
+        <div class="px-6 py-4 border-t border-border shrink-0 flex flex-col gap-3">
           {@render actions?.()}
         </div>
       {/if}

package/dist/primitives/Breadcrumb/Breadcrumb.spec.js

@@ -52,7 +52,9 @@ describe("Breadcrumb Component Tests", () => {
     setupTest();
     // Separators appear between items (n-1 separators for n items)
     // We use text character "›" instead of SVG arrows for consistent spacing
-    const separators = document.querySelectorAll("span.text-gray-400");
+    // Separators contain the "›" character
+    const allSpans = document.querySelectorAll("span");
+    const separators = Array.from(allSpans).filter(s => s.textContent?.trim() === '›');
     // 3 items means 2 separators
     expect(separators.length).toBe(2);
   });
@@ -89,7 +91,7 @@ describe("Breadcrumb Component Tests", () => {
   test("Last item has tertiary text color", () => {
     setupTest();
     const lastItem = screen.getByText("Settings");
-    expect(lastItem).toHaveClass("text-gray-500");
+    expect(lastItem).toHaveClass("text-muted-foreground");
   });
 
   test("Last item has default cursor", () => {

package/dist/primitives/Breadcrumb/Breadcrumb.svelte

@@ -51,7 +51,7 @@
         {#each data as crumb, index}
           <li class="inline-flex items-center">
             {#if index > 0}
-              <span class="text-gray-400" style="margin: 0 6px;">›</span>
+              <span class="text-muted-foreground" style="margin: 0 6px;">›</span>
             {/if}
             {#if index === 0 && showHomeIcon && data.length === 1}
               <!-- Single item with home icon - show as non-clickable label -->
@@ -64,7 +64,7 @@
               <a
                 href={crumb.href}
                 onclick={() => handleClick(crumb)}
-                class="{typography.smMuted} inline-flex items-center font-medium hover:text-blue-600 dark:hover:text-white"
+                class="{typography.smMuted} inline-flex items-center font-medium hover:text-brand-primary"
                 style="gap: 6px;"
               >
                 <HomeSolid class="w-3 h-3" />
@@ -80,7 +80,7 @@
               <a
                 href={crumb.href}
                 onclick={() => handleClick(crumb)}
-                class="{typography.smMuted} font-medium hover:text-blue-600 dark:hover:text-white max-w-48 truncate"
+                class="{typography.smMuted} font-medium hover:text-brand-primary max-w-48 truncate"
                 title={crumb.name}
               >
                 {crumb.name}
@@ -95,7 +95,7 @@
   {#if title || subtitle}
     <div class="flex flex-col gap-1">
       {#if title}
-        <h1 class="text-3xl font-semibold text-gray-900 dark:text-white truncate" title={title}>
+        <h1 class="text-3xl font-semibold text-text-primary truncate" title={title}>
           {title}
         </h1>
       {/if}

package/dist/primitives/Button/Button.spec.js

@@ -55,47 +55,47 @@ describe('Button Component Tests', () => {
 describe('Button Variants', () => {
   test('Default variant has blue background', () => {
     const { button } = setupTest();
-    expect(button).toHaveClass('bg-blue-700');
+    expect(button).toHaveClass('bg-brand-primary');
   });
 
   test('Blue outline variant', () => {
     const { button } = setupTest({ variant: 'outline' });
-    expect(button).toHaveClass('text-blue-700');
-    expect(button).toHaveClass('border-blue-700');
+    expect(button).toHaveClass('text-brand-primary');
+    expect(button).toHaveClass('border-brand-primary');
   });
 
   test('Gray outline variant (alternative)', () => {
     const { button } = setupTest({ variant: 'alternative' });
-    expect(button).toHaveClass('text-gray-900');
-    expect(button).toHaveClass('border-gray-200');
+    expect(button).toHaveClass('text-text-primary');
+    expect(button).toHaveClass('border-border');
   });
 
   test('Red solid variant', () => {
     const { button } = setupTest({ variant: 'red' });
-    expect(button).toHaveClass('bg-red-700');
+    expect(button).toHaveClass('bg-accent-danger');
   });
 
   test('Red outline variant', () => {
     const { button } = setupTest({ variant: 'red-outline' });
-    expect(button).toHaveClass('text-red-700');
-    expect(button).toHaveClass('border-red-700');
+    expect(button).toHaveClass('text-status-error-text');
+    expect(button).toHaveClass('border-accent-danger');
   });
 
   test('Red text variant (ghost-red)', () => {
     const { button } = setupTest({ variant: 'ghost-red' });
-    expect(button).toHaveClass('text-red-700');
+    expect(button).toHaveClass('text-status-error-text');
     expect(button).toHaveClass('bg-transparent');
   });
 
   test('Gray text variant (ghost)', () => {
     const { button } = setupTest({ variant: 'ghost' });
-    expect(button).toHaveClass('text-gray-500');
+    expect(button).toHaveClass('text-muted-foreground');
     expect(button).toHaveClass('bg-transparent');
   });
 
   test('Legacy variant names still work', () => {
     const { button } = setupTest({ variant: 'blue-solid' });
-    expect(button).toHaveClass('bg-blue-700');
+    expect(button).toHaveClass('bg-brand-primary');
   });
 });
 
@@ -169,7 +169,7 @@ describe('Button States', () => {
     const { button, onClick } = setupTest({ success: true });
 
     expect(button).toBeDisabled();
-    expect(button).toHaveClass('bg-green-600');
+    expect(button).toHaveClass('bg-accent-success');
     await userEvent.click(button);
     expect(onClick).not.toHaveBeenCalled();
 
@@ -182,13 +182,13 @@ describe('Button States', () => {
 
   test('Active state for toggle variant', () => {
     const { button } = setupTest({ active: true, variant: 'toggle' });
-    expect(button).toHaveClass('bg-blue-600');
+    expect(button).toHaveClass('bg-brand-primary');
   });
 
   test('Active state for ghost variant', () => {
     const { button } = setupTest({ active: true, variant: 'ghost' });
-    expect(button).toHaveClass('text-blue-700');
-    expect(button).toHaveClass('bg-blue-50');
+    expect(button).toHaveClass('text-brand-primary');
+    expect(button).toHaveClass('bg-status-info-bg');
   });
 });
 

package/dist/primitives/Button/Button.svelte

@@ -107,31 +107,31 @@
   // have been extracted to dedicated components: MenuItem, AvatarButton, NavItem, CardAction,
   // SearchResultItem, LandingButton, SidebarToggle. Use those components instead.
   const variantClasses: Record<string, string> = {
-    default: "text-white bg-blue-700 border border-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700",
-    alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
-    outline: "text-blue-700 bg-transparent border border-blue-700 hover:text-white hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500",
-    red: "text-white bg-red-700 border border-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
-    "red-outline": "text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
-    "green-outline": "text-green-700 bg-transparent border border-green-700 hover:text-white hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600",
-    ghost: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
-    "ghost-red": "text-red-700 bg-transparent border-transparent hover:bg-red-100 hover:text-red-900 dark:text-red-500 dark:hover:bg-red-900/50 dark:hover:text-red-400",
-    link: "text-blue-700 bg-transparent border-transparent hover:underline dark:text-blue-500",
-    icon: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700",
-    toggle: "text-gray-900 bg-gray-100 border border-gray-200 hover:bg-gray-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600",
-    success: "text-white bg-green-600 border border-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700",
+    default: "text-white bg-brand-primary border border-brand-primary hover:bg-brand-primary/90",
+    alternative: "text-text-primary bg-card border border-border hover:bg-muted hover:text-brand-primary",
+    outline: "text-brand-primary bg-transparent border border-brand-primary hover:text-white hover:bg-brand-primary",
+    red: "text-white bg-accent-danger border border-accent-danger hover:bg-accent-danger/90",
+    "red-outline": "text-status-error-text bg-transparent border border-accent-danger hover:text-white hover:bg-accent-danger",
+    "green-outline": "text-status-success-text bg-transparent border border-accent-success hover:text-white hover:bg-accent-success",
+    ghost: "text-muted-foreground bg-transparent border-transparent hover:bg-muted hover:text-text-primary",
+    "ghost-red": "text-status-error-text bg-transparent border-transparent hover:bg-status-error-bg hover:text-accent-danger",
+    link: "text-brand-primary bg-transparent border-transparent hover:underline",
+    icon: "text-muted-foreground bg-transparent border-transparent hover:bg-muted",
+    toggle: "text-text-primary bg-muted border border-border hover:bg-bg-tertiary",
+    success: "text-white bg-accent-success border border-accent-success hover:bg-accent-success/90",
   };
 
   // Active state classes for ghost and toggle
   // NOTE: menu-item and nav active states are now handled by MenuItem and NavItem components
   const activeClasses: Record<string, string> = {
-    ghost: "text-blue-700 bg-blue-50 dark:text-white dark:bg-gray-900",
-    toggle: "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 dark:text-white dark:bg-blue-600 dark:border-blue-600 dark:hover:bg-blue-700",
+    ghost: "text-brand-primary bg-status-info-bg",
+    toggle: "text-white bg-brand-primary border-brand-primary hover:bg-brand-primary",
   };
 
   // Disabled classes
-  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 disabledClasses = "bg-bg-tertiary border-border text-muted-foreground cursor-not-allowed";
   // Disabled classes for transparent variants (link, ghost) - no background
-  const disabledTransparentClasses = "text-gray-400 cursor-not-allowed dark:text-gray-500";
+  const disabledTransparentClasses = "text-muted-foreground cursor-not-allowed";
 
 let sizeClass = $derived((() => {
     if (resolvedVariant === "icon") return buttonIconSizes[size as keyof typeof buttonIconSizes] || buttonIconSizes.sm;

package/dist/primitives/Button/ButtonVariantShowcase.spec.js

@@ -196,7 +196,7 @@ describe('ButtonVariantShowcase', () => {
       await fireEvent.click(toggleButton);
 
       const mainDiv = container.querySelector('.min-h-screen');
-      expect(mainDiv.className).toContain('bg-gray-900');
+      expect(mainDiv.className).toContain('bg-bg-primary');
     });
   });
 });

package/dist/primitives/Button/ButtonVariantShowcase.svelte

@@ -24,25 +24,25 @@
   }
 </script>
 
-<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
+<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-bg-primary' : 'bg-bg-secondary'}">
   <div class="flex items-center justify-between">
     <div>
-      <h1 class="text-2xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Button Variants</h1>
-      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">All variants × all sizes</p>
+      <h1 class="text-2xl font-bold {isDark ? 'text-white' : 'text-text-primary'}">Button Variants</h1>
+      <p class="{isDark ? 'text-muted-foreground' : 'text-text-secondary'}">All variants × all sizes</p>
     </div>
     <button
       onclick={toggleDark}
-      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
+      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-accent-warning text-text-primary' : 'bg-bg-secondary text-white'}"
     >
       {isDark ? '☀️ Light' : '🌙 Dark'}
     </button>
   </div>
 
   {#each variants as v}
-    <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+    <section class="rounded-xl p-5 {isDark ? 'bg-bg-secondary' : 'bg-card'} border {isDark ? 'border-stroke-primary' : 'border-border'}">
       <div class="mb-3">
-        <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">{v.name}</h2>
-        <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">{v.label} — {v.desc}</p>
+        <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-text-primary'}">{v.name}</h2>
+        <p class="text-sm {isDark ? 'text-muted-foreground' : 'text-muted-foreground'}">{v.label} — {v.desc}</p>
       </div>
 
       {#if v.name === 'icon'}
@@ -69,10 +69,10 @@
     </section>
   {/each}
 
-  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+  <section class="rounded-xl p-5 {isDark ? 'bg-bg-secondary' : 'bg-card'} border {isDark ? 'border-stroke-primary' : 'border-border'}">
     <div class="mb-3">
-      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Width Sizes</h2>
-      <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">Full-width and responsive options</p>
+      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-text-primary'}">Width Sizes</h2>
+      <p class="text-sm {isDark ? 'text-muted-foreground' : 'text-muted-foreground'}">Full-width and responsive options</p>
     </div>
     <div class="max-w-md space-y-3">
       <Button size="full">full</Button>
@@ -85,10 +85,10 @@
     </div>
   </section>
 
-  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+  <section class="rounded-xl p-5 {isDark ? 'bg-bg-secondary' : 'bg-card'} border {isDark ? 'border-stroke-primary' : 'border-border'}">
     <div class="mb-3">
-      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">States</h2>
-      <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">Loading, success, disabled</p>
+      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-text-primary'}">States</h2>
+      <p class="text-sm {isDark ? 'text-muted-foreground' : 'text-muted-foreground'}">Loading, success, disabled</p>
     </div>
     <div class="flex flex-wrap gap-4 items-center">
       <Button disabled>Disabled</Button>
@@ -97,27 +97,27 @@
     </div>
   </section>
 
-  <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
+  <section class="rounded-xl p-5 {isDark ? 'bg-bg-secondary' : 'bg-card'} border {isDark ? 'border-stroke-primary' : 'border-border'}">
     <div class="mb-3">
-      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Common Patterns</h2>
+      <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-text-primary'}">Common Patterns</h2>
     </div>
     <div class="space-y-4">
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Cancel / Save</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">Cancel / Save</p>
         <div class="flex gap-2">
           <Button variant="ghost">Cancel</Button>
           <Button>Save</Button>
         </div>
       </div>
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Delete Confirmation</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">Delete Confirmation</p>
         <div class="flex gap-2">
           <Button variant="alternative">Cancel</Button>
           <Button variant="red">Delete</Button>
         </div>
       </div>
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Toggle Group</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">Toggle Group</p>
         <div class="flex gap-2">
           <Button variant="toggle" active={true}>Active</Button>
           <Button variant="toggle">Inactive</Button>

package/dist/primitives/Card.spec.js

@@ -12,7 +12,7 @@ describe("Card Component Tests", () => {
   test("Applies base classes", () => {
     const { container } = render(Card, { props: {} });
     const card = container.querySelector("div");
-    expect(card).toHaveClass("bg-white");
+    expect(card).toHaveClass("bg-card");
     expect(card).toHaveClass("rounded-lg");
     expect(card).toHaveClass("shadow-md");
   });

package/dist/primitives/Card.stories.svelte

@@ -17,6 +17,6 @@
 <Story name="Default Card">
   <Card>
     <h3 class="text-lg font-semibold mb-2">Default Card</h3>
-    <p class="text-gray-600">A default card with standard styling. Use className prop to customize.</p>
+    <p class="text-text-secondary">A default card with standard styling. Use className prop to customize.</p>
   </Card>
 </Story>

package/dist/primitives/Card.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <div
-  class="bg-white dark:bg-gray-900 rounded-lg shadow-md {border ? 'border border-gray-200 dark:border-gray-700' : ''} {padding ? 'p-6' : ''} {horizontal ? 'flex flex-row' : ''} {className}"
+  class="bg-card rounded-lg shadow-md {border ? 'border border-border' : ''} {padding ? 'p-6' : ''} {horizontal ? 'flex flex-row' : ''} {className}"
   {...restProps}
 >
   {#if children}{@render children()}{/if}

package/dist/primitives/CardAction/CardAction.svelte

@@ -36,9 +36,9 @@
   }: Props = $props();
 
   const baseClasses = 'w-full text-left rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none flex items-center justify-start';
-  const defaultClasses = 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700';
-  const selectedClasses = 'text-gray-900 bg-blue-50 border border-blue-500 dark:bg-blue-900/20 dark:text-white dark:border-blue-500';
-  const disabledClasses = 'bg-gray-100 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-card border border-stroke-primary hover:bg-bg-secondary';
+  const selectedClasses = 'text-text-primary bg-status-info-bg border border-interactive-border';
+  const disabledClasses = 'bg-muted border-border text-muted-foreground cursor-not-allowed';
 
   let sizeClass = $derived(buttonCardSizes[size] || buttonCardSizes.md);
 

package/dist/primitives/Checkbox/Checkbox.spec.js

@@ -69,37 +69,37 @@ describe('Checkbox Colors', () => {
   test('default color is blue', () => {
     const { container } = render(Checkbox);
     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(Checkbox, { 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(Checkbox, { 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(Checkbox, { 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(Checkbox, { 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(Checkbox, { props: { color: 'yellow' } });
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-yellow-400');
+    expect(input).toHaveClass('text-accent-warning');
   });
 });
 
@@ -118,16 +118,16 @@ describe('Checkbox Input Styling', () => {
     expect(input).toHaveClass('rounded');
   });
 
-  test('has border-gray-300 border', () => {
+  test('has border-stroke-primary border', () => {
     const { container } = render(Checkbox);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('border-gray-300');
+    expect(input).toHaveClass('border-stroke-primary');
   });
 
-  test('has dark mode border', () => {
+  test('uses token-based border (auto dark mode via CSS vars)', () => {
     const { container } = render(Checkbox);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('dark:border-gray-600');
+    expect(input).toHaveClass('border-stroke-primary');
   });
 
   test('has focus:outline-hidden', () => {
@@ -229,7 +229,7 @@ describe('Checkbox Color Fallback', () => {
   test('falls back to blue when an invalid color is provided', () => {
     const { container } = render(Checkbox, { props: { color: 'invalid-color' } });
     const input = container.querySelector('input');
-    expect(input).toHaveClass('text-blue-600');
+    expect(input).toHaveClass('text-brand-primary');
   });
 });
 

package/dist/primitives/Checkbox/Checkbox.stories.svelte

@@ -53,7 +53,7 @@
   {#snippet template()}
     <div class="space-y-4">
       <Checkbox label="Click to toggle" bind:checked={checked} />
-      <p class="text-sm text-gray-500">Checked: {checked ? 'Yes' : 'No'}</p>
+      <p class="text-sm text-muted-foreground">Checked: {checked ? 'Yes' : 'No'}</p>
     </div>
   {/snippet}
 </Story>
@@ -61,11 +61,11 @@
 <Story name="Group">
   {#snippet template()}
     <div class="space-y-3">
-      <p class="text-sm font-medium text-gray-700">Notification preferences:</p>
+      <p class="text-sm font-medium text-text-secondary">Notification preferences:</p>
       <Checkbox label="I accept the terms and conditions" bind:checked={checkedItems.terms} />
       <Checkbox label="Send me product updates" bind:checked={checkedItems.updates} />
       <Checkbox label="Send me marketing emails" bind:checked={checkedItems.marketing} />
-      <p class="text-xs text-gray-500 mt-2">
+      <p class="text-xs text-muted-foreground mt-2">
         Selected: {Object.entries(checkedItems).filter(([_, v]) => v).map(([k]) => k).join(', ') || 'none'}
       </p>
     </div>

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -42,20 +42,20 @@
   }
 
   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);
 
   let inputClasses = $derived([
     "w-4 h-4 shrink-0 rounded",
-    "border-gray-300",
-    "dark:border-gray-600",
+    "border-stroke-primary",
+    "",
     "focus:outline-hidden",
     colorClass,
     disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
@@ -81,7 +81,7 @@
     class={inputClasses}
   />
   {#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/DarkModeToggle.spec.js

@@ -69,13 +69,13 @@ describe("DarkModeToggle Component Tests", () => {
 
   test("Contains sun icon SVG", () => {
     const { container } = setupTest();
-    const sunIcon = container.querySelector('span.text-amber-500 svg');
+    const sunIcon = container.querySelector('span.text-accent-warning svg');
     expect(sunIcon).toBeInTheDocument();
   });
 
   test("Contains moon icon SVG", () => {
     const { container } = setupTest();
-    const moonIcon = container.querySelector('span:not(.text-amber-500) svg');
+    const moonIcon = container.querySelector('span:not(.text-accent-warning) svg');
     expect(moonIcon).toBeInTheDocument();
   });
 
@@ -95,7 +95,7 @@ describe("DarkModeToggle Component Tests", () => {
   test("Sun and moon single icons have hidden classes in auto mode", () => {
     const { container } = setupTest();
     // In auto mode, the main sun/moon icons should have opacity-0 and scale-0 classes
-    const sunIcon = container.querySelector('span.text-amber-500');
+    const sunIcon = container.querySelector('span.text-accent-warning');
     const moonIcon = container.querySelectorAll('span')[1]; // Second span is moon
     expect(sunIcon).toHaveClass('opacity-0');
     expect(sunIcon).toHaveClass('scale-0');
@@ -141,8 +141,8 @@ describe("DarkModeToggle Component Tests", () => {
 
   test("Sun icon has correct color class", () => {
     const { container } = setupTest();
-    const sunIcon = container.querySelector('span.text-amber-500');
-    expect(sunIcon).toHaveClass("text-amber-500");
+    const sunIcon = container.querySelector('span.text-accent-warning');
+    expect(sunIcon).toHaveClass("text-accent-warning");
   });
 
   test("Button has overflow hidden for auto icon", () => {
@@ -215,7 +215,7 @@ describe("DarkModeToggle 3-State Cycle", () => {
 
     // Click 1: auto -> light
     await user.click(button);
-    const sunSpan = container.querySelector('span.text-amber-500');
+    const sunSpan = container.querySelector('span.text-accent-warning');
     // In light mode, sun should be visible (no opacity-0 class)
     expect(sunSpan.classList.contains("opacity-0")).toBe(false);
     expect(container.querySelector("div.absolute.inset-0")).not.toBeInTheDocument();
@@ -225,7 +225,7 @@ describe("DarkModeToggle 3-State Cycle", () => {
     // Find the direct child spans of the button (not nested spans)
     const buttonSpans = Array.from(button.querySelectorAll(':scope > span'));
     const moonSpan = buttonSpans.find(
-      span => !span.classList.contains('text-amber-500')
+      span => !span.classList.contains('text-accent-warning')
     );
     // In dark mode, moon should be visible (no opacity-0)
     expect(moonSpan.classList.contains("opacity-0")).toBe(false);
@@ -290,12 +290,12 @@ describe("DarkModeToggle Initial State", () => {
     const button = screen.getByRole("button");
     const buttonSpans = Array.from(button.querySelectorAll(':scope > span'));
     const moonSpan = buttonSpans.find(
-      span => !span.classList.contains('text-amber-500')
+      span => !span.classList.contains('text-accent-warning')
     );
     // In dark mode, moon should be visible (no opacity-0)
     expect(moonSpan.classList.contains("opacity-0")).toBe(false);
     // Sun should be hidden
-    const sunSpan = container.querySelector('span.text-amber-500');
+    const sunSpan = container.querySelector('span.text-accent-warning');
     expect(sunSpan.classList.contains("opacity-0")).toBe(true);
   });
 
@@ -303,13 +303,13 @@ describe("DarkModeToggle Initial State", () => {
     localStorageMock.store.theme = "light";
     const { container } = setupTest();
     const button = screen.getByRole("button");
-    const sunSpan = container.querySelector('span.text-amber-500');
+    const sunSpan = container.querySelector('span.text-accent-warning');
     // In light mode, sun should be visible (no opacity-0)
     expect(sunSpan.classList.contains("opacity-0")).toBe(false);
     // Moon should be hidden - need to check all spans that have transition-all
     const allSpansWithTransition = Array.from(button.querySelectorAll('span.transition-all'));
     const moonSpan = allSpansWithTransition.find(
-      span => !span.classList.contains('text-amber-500')
+      span => !span.classList.contains('text-accent-warning')
     );
     expect(moonSpan).toBeDefined();
     expect(moonSpan.classList.contains("opacity-0")).toBe(true);