@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/patterns/page/PageLayout.svelte

@@ -31,7 +31,7 @@
 
 <div class="px-4 pt-4 pb-20 md:pb-6 {className}">
   {#if variant === 'card'}
-    <Card className="bg-white dark:bg-gray-800 {maxWidth}">
+    <Card className="bg-card {maxWidth}">
       {@render children?.()}
     </Card>
   {:else}

package/dist/patterns/page/PageLoader.stories.svelte

@@ -89,13 +89,13 @@
   <div class="space-y-4">
     <div class="flex gap-2">
       <button
-        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        class="px-4 py-2 bg-brand-primary text-white rounded hover:bg-brand-primary"
         onclick={simulateLoading}
       >
         Simulate Loading
       </button>
       <button
-        class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+        class="px-4 py-2 bg-accent-danger text-white rounded hover:bg-accent-danger"
         onclick={simulateError}
       >
         Simulate Error
@@ -109,9 +109,9 @@
       showRetry={true}
       onRetry={simulateLoading}
     >
-      <div class="p-8 bg-green-50 rounded-lg">
-        <h3 class="text-xl font-bold text-green-800">Success!</h3>
-        <p class="text-green-600 mt-2">Your content has loaded successfully.</p>
+      <div class="p-8 bg-status-success-bg rounded-lg">
+        <h3 class="text-xl font-bold text-status-success-text">Success!</h3>
+        <p class="text-accent-success mt-2">Your content has loaded successfully.</p>
       </div>
     </PageLoader>
   </div>

package/dist/patterns/page/SectionHeader.spec.js

@@ -83,10 +83,10 @@ describe('SectionHeader Count', () => {
     expect(badge).toHaveClass('justify-center');
   });
 
-  test('count badge has bg-gray-100', () => {
+  test('count badge has bg-muted', () => {
     const { container } = render(SectionHeader, { props: { title: 'Test', count: 10 } });
     const badge = container.querySelector('span');
-    expect(badge).toHaveClass('bg-gray-100');
+    expect(badge).toHaveClass('bg-muted');
   });
 
   test('count badge has rounded-full', () => {
@@ -95,10 +95,10 @@ describe('SectionHeader Count', () => {
     expect(badge).toHaveClass('rounded-full');
   });
 
-  test('count badge has dark mode bg', () => {
+  test('count badge uses token-based bg class', () => {
     const { container } = render(SectionHeader, { props: { title: 'Test', count: 10 } });
     const badge = container.querySelector('span');
-    expect(badge).toHaveClass('dark:bg-gray-700');
+    expect(badge).toHaveClass('bg-muted');
   });
 
   test('count badge has padding', () => {
@@ -125,16 +125,16 @@ describe('SectionHeader Divider', () => {
     expect(container.querySelector('hr')).not.toBeInTheDocument();
   });
 
-  test('divider has border-gray-200', () => {
+  test('divider has border-border', () => {
     const { container } = render(SectionHeader, { props: { divider: true } });
     const hr = container.querySelector('hr');
-    expect(hr).toHaveClass('border-gray-200');
+    expect(hr).toHaveClass('border-border');
   });
 
-  test('divider has dark mode class', () => {
+  test('divider uses token-based border class', () => {
     const { container } = render(SectionHeader, { props: { divider: true } });
     const hr = container.querySelector('hr');
-    expect(hr).toHaveClass('dark:border-gray-700');
+    expect(hr).toHaveClass('border-border');
   });
 
   test('divider has mb-4 margin', () => {

package/dist/patterns/page/SectionHeader.svelte

@@ -23,7 +23,7 @@
 
 <div class={className}>
   {#if divider}
-    <hr class="border-gray-200 dark:border-gray-700 mb-4" />
+    <hr class="border-border mb-4" />
   {/if}
 
   <div class="flex items-center justify-between gap-4">
@@ -32,7 +32,7 @@
         <h2 class={typography.h3}>{title}</h2>
       {/if}
       {#if count !== null}
-        <span class={`inline-flex items-center justify-center px-2 py-0.5 ${typography.xsMuted} bg-gray-100 dark:bg-gray-700 rounded-full`}>
+        <span class={`inline-flex items-center justify-center px-2 py-0.5 ${typography.xsMuted} bg-muted rounded-full`}>
           {count}
         </span>
       {/if}

package/dist/presets/buttons.js

@@ -71,6 +71,6 @@ export const ICON_BUTTON_PRESETS = {
   destructive: {
     variant: 'ghost',
     size: 'sm',
-    className: 'p-2 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900',
+    className: 'p-2 text-accent-danger hover:bg-status-error-bg',
   },
 };

package/dist/presets/buttons.spec.js

@@ -103,13 +103,13 @@ describe('Icon Button Presets', () => {
     });
 
     it('has red color classes', () => {
-      expect(ICON_BUTTON_PRESETS.destructive.className).toContain('text-red-600');
-      expect(ICON_BUTTON_PRESETS.destructive.className).toContain('hover:bg-red-100');
+      expect(ICON_BUTTON_PRESETS.destructive.className).toContain('text-accent-danger');
+      expect(ICON_BUTTON_PRESETS.destructive.className).toContain('hover:bg-status-error-bg');
     });
 
     it('has dark mode red classes', () => {
-      expect(ICON_BUTTON_PRESETS.destructive.className).toContain('dark:text-red-400');
-      expect(ICON_BUTTON_PRESETS.destructive.className).toContain('dark:hover:bg-red-900');
+      expect(ICON_BUTTON_PRESETS.destructive.className).toContain('');
+      expect(ICON_BUTTON_PRESETS.destructive.className).toContain('');
     });
   });
 });

package/dist/primitives/Accordion/Accordion.spec.js

@@ -71,19 +71,19 @@ describe('Accordion Component', () => {
     const { container } = render(Accordion);
     const accordion = container.querySelector('[data-accordion]');
     expect(accordion).toHaveClass('divide-y');
-    expect(accordion).toHaveClass('divide-gray-200');
+    expect(accordion).toHaveClass('divide-border');
   });
 
-  test('has dark mode divide classes', () => {
+  test('has token-based divide classes', () => {
     const { container } = render(Accordion);
     const accordion = container.querySelector('[data-accordion]');
-    expect(accordion).toHaveClass('dark:divide-gray-700');
+    expect(accordion).toHaveClass('divide-border');
   });
 
-  test('has dark mode border classes when not flush', () => {
+  test('has border class when not flush', () => {
     const { container } = render(Accordion);
     const accordion = container.querySelector('[data-accordion]');
-    expect(accordion).toHaveClass('dark:border-gray-700');
+    expect(accordion).toHaveClass('border');
   });
 
   test('renders children snippet content', () => {

package/dist/primitives/Accordion/Accordion.stories.svelte

@@ -22,13 +22,13 @@
     <div class="max-w-xl">
       <Accordion>
         <AccordionItem title="What is Micdrop?">
-          <p class="text-gray-600">Micdrop is a platform for comedians and venues to manage shows, ticket sales, and performer booking.</p>
+          <p class="text-text-secondary">Micdrop is a platform for comedians and venues to manage shows, ticket sales, and performer booking.</p>
         </AccordionItem>
         <AccordionItem title="How do I get started?">
-          <p class="text-gray-600">Sign up for an account, set up your venue or performer profile, and start creating shows.</p>
+          <p class="text-text-secondary">Sign up for an account, set up your venue or performer profile, and start creating shows.</p>
         </AccordionItem>
         <AccordionItem title="What are the fees?">
-          <p class="text-gray-600">Micdrop charges a small percentage per ticket sold. There are no monthly fees.</p>
+          <p class="text-text-secondary">Micdrop charges a small percentage per ticket sold. There are no monthly fees.</p>
         </AccordionItem>
       </Accordion>
     </div>
@@ -40,10 +40,10 @@
     <div class="max-w-xl">
       <Accordion>
         <AccordionItem title="Expanded by default" open={true}>
-          <p class="text-gray-600">This item starts expanded.</p>
+          <p class="text-text-secondary">This item starts expanded.</p>
         </AccordionItem>
         <AccordionItem title="Collapsed item">
-          <p class="text-gray-600">Click to expand this item.</p>
+          <p class="text-text-secondary">Click to expand this item.</p>
         </AccordionItem>
       </Accordion>
     </div>
@@ -55,7 +55,7 @@
     <div class="max-w-xl">
       <Accordion>
         <AccordionItem title="Features">
-          <ul class="list-disc list-inside text-gray-600 space-y-2">
+          <ul class="list-disc list-inside text-text-secondary space-y-2">
             <li>Online ticket sales</li>
             <li>Performer management</li>
             <li>Show scheduling</li>
@@ -64,9 +64,9 @@
         </AccordionItem>
         <AccordionItem title="Pricing">
           <div class="space-y-2">
-            <p class="text-gray-600"><strong>Basic:</strong> Free</p>
-            <p class="text-gray-600"><strong>Pro:</strong> $29/month</p>
-            <p class="text-gray-600"><strong>Enterprise:</strong> Contact us</p>
+            <p class="text-text-secondary"><strong>Basic:</strong> Free</p>
+            <p class="text-text-secondary"><strong>Pro:</strong> $29/month</p>
+            <p class="text-text-secondary"><strong>Enterprise:</strong> Contact us</p>
           </div>
         </AccordionItem>
       </Accordion>

package/dist/primitives/Accordion/Accordion.svelte

@@ -53,8 +53,8 @@
   // Flowbite-native classes
   // Note: overflow-hidden was removed to allow dropdowns/menus inside accordion items to render outside the container
   let containerClasses = $derived(flush
-    ? "divide-y divide-gray-200 dark:divide-gray-700"
-    : "border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700");
+    ? "divide-y divide-border"
+    : "border border-border rounded-lg divide-y divide-border");
 </script>
 
 <div class="{containerClasses} {className}" data-accordion={multiple ? "open" : "collapse"} {...restProps}>

package/dist/primitives/Accordion/AccordionItem.spec.js

@@ -290,25 +290,19 @@ describe('AccordionItem - Styling (Flowbite Native)', () => {
   test('button has gray background', () => {
     const { container } = render(AccordionItemWrapper);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('bg-gray-100');
+    expect(button).toHaveClass('bg-muted');
   });
 
-  test('button has dark mode background', () => {
+  test('button has token-based background', () => {
     const { container } = render(AccordionItemWrapper);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('dark:bg-gray-800');
+    expect(button).toHaveClass('bg-muted');
   });
 
   test('button has hover state', () => {
     const { container } = render(AccordionItemWrapper);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('hover:bg-gray-200');
-  });
-
-  test('button has dark mode hover state', () => {
-    const { container } = render(AccordionItemWrapper);
-    const button = container.querySelector('button');
-    expect(button).toHaveClass('dark:hover:bg-gray-700');
+    expect(button).toHaveClass('hover:bg-bg-tertiary');
   });
 
   test('content has p-5 padding', async () => {
@@ -340,7 +334,7 @@ describe('AccordionItem - Styling (Flowbite Native)', () => {
       const contentWrapper = container.querySelector('p').parentElement;
       expect(contentWrapper).toHaveClass('border');
       expect(contentWrapper).toHaveClass('border-t-0');
-      expect(contentWrapper).toHaveClass('border-gray-200');
+      expect(contentWrapper).toHaveClass('border-border');
     });
   });
 
@@ -360,7 +354,7 @@ describe('AccordionItem - Styling (Flowbite Native)', () => {
     });
   });
 
-  test('content has dark mode border', async () => {
+  test('content has token-based border', async () => {
     const user = userEvent.setup();
     const { container } = render(AccordionItemWrapper, {
       props: { flush: false }
@@ -372,7 +366,7 @@ describe('AccordionItem - Styling (Flowbite Native)', () => {
 
     await waitFor(() => {
       const contentWrapper = container.querySelector('p').parentElement;
-      expect(contentWrapper).toHaveClass('dark:border-gray-700');
+      expect(contentWrapper).toHaveClass('border-border');
     });
   });
 });
@@ -381,10 +375,9 @@ describe('AccordionItem - Typography Integration', () => {
   test('header uses typography.body class', () => {
     const { container } = render(AccordionItemWrapper);
     const headerSpan = container.querySelector('button span');
-    // typography.body = "text-base text-gray-900 dark:text-white leading-relaxed"
+    // typography.body = "text-base text-text-primary leading-relaxed"
     expect(headerSpan).toHaveClass('text-base');
-    expect(headerSpan).toHaveClass('text-gray-900');
-    expect(headerSpan).toHaveClass('dark:text-white');
+    expect(headerSpan).toHaveClass('text-text-primary');
     expect(headerSpan).toHaveClass('leading-relaxed');
   });
 
@@ -398,10 +391,9 @@ describe('AccordionItem - Typography Integration', () => {
 
     await waitFor(() => {
       const content = container.querySelector('p');
-      // typography.bodyMuted = "text-base text-gray-500 dark:text-gray-400 leading-relaxed"
+      // typography.bodyMuted = "text-base text-muted-foreground leading-relaxed"
       expect(content).toHaveClass('text-base');
-      expect(content).toHaveClass('text-gray-500');
-      expect(content).toHaveClass('dark:text-gray-400');
+      expect(content).toHaveClass('text-muted-foreground');
       expect(content).toHaveClass('leading-relaxed');
     });
   });
@@ -409,10 +401,9 @@ describe('AccordionItem - Typography Integration', () => {
   test('button header text uses typography.smMuted', () => {
     const { container } = render(AccordionItemWrapper);
     const button = container.querySelector('button');
-    // typography.smMuted = "text-sm text-gray-500 dark:text-gray-400"
+    // typography.smMuted = "text-sm text-muted-foreground"
     expect(button).toHaveClass('text-sm');
-    expect(button).toHaveClass('text-gray-500');
-    expect(button).toHaveClass('dark:text-gray-400');
+    expect(button).toHaveClass('text-muted-foreground');
   });
 });
 
@@ -420,13 +411,13 @@ describe('AccordionItem - Border Props', () => {
   test('applies borderOpenClass when open', async () => {
     const user = userEvent.setup();
     const { container } = render(AccordionItemWrapper, {
-      props: { borderOpenClass: 'border-blue-500' }
+      props: { borderOpenClass: 'border-interactive-border' }
     });
     const button = container.querySelector('button');
 
     // Initially closed - no borderOpenClass
     const wrapper = container.querySelector('div');
-    expect(wrapper).not.toHaveClass('border-blue-500');
+    expect(wrapper).not.toHaveClass('border-interactive-border');
 
     // Click to open
     await user.click(button);
@@ -434,14 +425,14 @@ describe('AccordionItem - Border Props', () => {
 
     await waitFor(() => {
       const wrapper = container.querySelector('div');
-      expect(wrapper).toHaveClass('border-blue-500');
+      expect(wrapper).toHaveClass('border-interactive-border');
     });
   });
 
   test('removes borderOpenClass when closed', async () => {
     const user = userEvent.setup();
     const { container } = render(AccordionItemWrapper, {
-      props: { open: true, borderOpenClass: 'border-red-500' }
+      props: { open: true, borderOpenClass: 'border-status-error-border' }
     });
 
     await tick();
@@ -450,7 +441,7 @@ describe('AccordionItem - Border Props', () => {
     // Initially open - has borderOpenClass
     await waitFor(() => {
       const wrapper = container.querySelector('div');
-      expect(wrapper).toHaveClass('border-red-500');
+      expect(wrapper).toHaveClass('border-status-error-border');
     });
 
     // Click to close
@@ -459,7 +450,7 @@ describe('AccordionItem - Border Props', () => {
 
     await waitFor(() => {
       const wrapper = container.querySelector('div');
-      expect(wrapper).not.toHaveClass('border-red-500');
+      expect(wrapper).not.toHaveClass('border-status-error-border');
     });
   });
 

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -67,11 +67,11 @@
   let headerClasses = $derived([
     "flex items-center justify-between w-full p-5 font-medium text-left",
     typography.smMuted,
-    "bg-gray-100 dark:bg-gray-800",
-    "hover:bg-gray-200 dark:hover:bg-gray-700",
+    "bg-muted",
+    "hover:bg-bg-tertiary",
     "focus:outline-hidden",
     "gap-3",
-    isOpen ? "bg-gray-100 dark:bg-gray-800" : "",
+    isOpen ? "bg-muted" : "",
   ].join(" "));
 </script>
 
@@ -93,7 +93,7 @@
 
   {#if isOpen}
     <div transition:safeSlide={{ duration: 200 }}>
-      <div class="p-5 {flush ? '' : 'border border-t-0 border-gray-200 dark:border-gray-700'}">
+      <div class="p-5 {flush ? '' : 'border border-t-0 border-border'}">
         <p class={typography.bodyMuted}>
           {#if children}{@render children()}{/if}
         </p>

package/dist/primitives/Avatar/Avatar.spec.js

@@ -63,15 +63,15 @@ describe('Avatar with Initials', () => {
   test('initials container has gray colors', () => {
     const { container } = render(Avatar, { props: { initials: 'EF' } });
     const div = container.querySelector('div');
-    expect(div).toHaveClass('text-gray-600');
-    expect(div).toHaveClass('bg-gray-200');
+    expect(div).toHaveClass('text-text-secondary');
+    expect(div).toHaveClass('bg-bg-tertiary');
   });
 
-  test('initials container has dark mode colors', () => {
+  test('initials container uses token-based colors', () => {
     const { container } = render(Avatar, { props: { initials: 'GH' } });
     const div = container.querySelector('div');
-    expect(div).toHaveClass('dark:bg-gray-700');
-    expect(div).toHaveClass('dark:text-gray-300');
+    expect(div).toHaveClass('text-text-secondary');
+    expect(div).toHaveClass('bg-bg-tertiary');
   });
 });
 
@@ -81,16 +81,16 @@ describe('Avatar Default Placeholder', () => {
     expect(container.querySelector('svg')).toBeInTheDocument();
   });
 
-  test('placeholder container has bg-gray-200', () => {
+  test('placeholder container has bg-bg-tertiary', () => {
     const { container } = render(Avatar);
     const div = container.querySelector('div');
-    expect(div).toHaveClass('bg-gray-200');
+    expect(div).toHaveClass('bg-bg-tertiary');
   });
 
-  test('placeholder container has dark mode bg', () => {
+  test('placeholder container uses token-based bg', () => {
     const { container } = render(Avatar);
     const div = container.querySelector('div');
-    expect(div).toHaveClass('dark:bg-gray-700');
+    expect(div).toHaveClass('bg-bg-tertiary');
   });
 
   test('svg has correct sizing classes', () => {
@@ -100,10 +100,10 @@ describe('Avatar Default Placeholder', () => {
     expect(svg).toHaveClass('h-1/2');
   });
 
-  test('svg has text-gray-400 color', () => {
+  test('svg has text-muted-foreground color', () => {
     const { container } = render(Avatar);
     const svg = container.querySelector('svg');
-    expect(svg).toHaveClass('text-gray-400');
+    expect(svg).toHaveClass('text-muted-foreground');
   });
 });
 

package/dist/primitives/Avatar/Avatar.stories.svelte

@@ -37,6 +37,7 @@
   {/snippet}
 </Story>
 
+<!-- Note: fill colors in data URIs cannot use CSS custom properties; hardcoded hex values are required here -->
 <Story name="With Image" args={{ src: 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><rect width="150" height="150" fill="#6366f1"/><circle cx="75" cy="55" r="30" fill="#fff"/><ellipse cx="75" cy="130" rx="45" ry="35" fill="#fff"/></svg>'), alt: 'User avatar' }}>
   {#snippet template(args)}
     <Avatar {...args} />
@@ -48,23 +49,23 @@
     <div class="flex items-end gap-4">
       <div class="text-center">
         <Avatar size="xs" initials="XS" />
-        <p class="text-xs text-gray-500 mt-1">xs</p>
+        <p class="text-xs text-muted-foreground mt-1">xs</p>
       </div>
       <div class="text-center">
         <Avatar size="sm" initials="SM" />
-        <p class="text-xs text-gray-500 mt-1">sm</p>
+        <p class="text-xs text-muted-foreground mt-1">sm</p>
       </div>
       <div class="text-center">
         <Avatar size="md" initials="MD" />
-        <p class="text-xs text-gray-500 mt-1">md</p>
+        <p class="text-xs text-muted-foreground mt-1">md</p>
       </div>
       <div class="text-center">
         <Avatar size="lg" initials="LG" />
-        <p class="text-xs text-gray-500 mt-1">lg</p>
+        <p class="text-xs text-muted-foreground mt-1">lg</p>
       </div>
       <div class="text-center">
         <Avatar size="xl" initials="XL" />
-        <p class="text-xs text-gray-500 mt-1">xl</p>
+        <p class="text-xs text-muted-foreground mt-1">xl</p>
       </div>
     </div>
   {/snippet}

package/dist/primitives/Avatar/Avatar.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Avatar/Avatar.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA4GA;;;;mBAAkH;mBAxG7F,iBAAiB;6CA+FO,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Avatar.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Avatar/Avatar.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA6GA;;;;mBAAkH;mBAzG7F,iBAAiB;6CAgGO,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/primitives/Avatar/Avatar.svelte

@@ -50,16 +50,16 @@
   />
 {:else if initials}
   <div
-    class="flex items-center justify-center font-medium text-gray-600 bg-gray-200 dark:bg-gray-700 dark:text-gray-300 {sizeClass} {roundedClass} {className}"
+    class="flex items-center justify-center font-medium text-text-secondary bg-bg-tertiary {sizeClass} {roundedClass} {className}"
   >
     {initials}
   </div>
 {:else}
   <!-- Default placeholder -->
   <div
-    class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 {sizeClass} {roundedClass} {className}"
+    class="flex items-center justify-center bg-bg-tertiary {sizeClass} {roundedClass} {className}"
   >
-    <svg class="w-1/2 h-1/2 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <svg class="w-1/2 h-1/2 text-muted-foreground" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
     </svg>
   </div>

package/dist/primitives/Badges/Badge.spec.js

@@ -35,43 +35,43 @@ describe('Badge Component Tests', () => {
     // neutral variant (default)
     const { container: neutralContainer } = render(Badge, { variant: 'neutral' });
     const neutralBadge = neutralContainer.querySelector('div');
-    expect(neutralBadge).toHaveClass('bg-gray-100');
+    expect(neutralBadge).toHaveClass('bg-muted');
 
     // success variant
     const { container: successContainer } = render(Badge, { variant: 'success' });
     const successBadge = successContainer.querySelector('div');
-    expect(successBadge).toHaveClass('bg-green-100');
+    expect(successBadge).toHaveClass('bg-status-success-bg');
 
     // warning variant
     const { container: warningContainer } = render(Badge, { variant: 'warning' });
     const warningBadge = warningContainer.querySelector('div');
-    expect(warningBadge).toHaveClass('bg-yellow-100');
+    expect(warningBadge).toHaveClass('bg-status-warning-bg');
 
     // error variant
     const { container: errorContainer } = render(Badge, { variant: 'error' });
     const errorBadge = errorContainer.querySelector('div');
-    expect(errorBadge).toHaveClass('bg-red-100');
+    expect(errorBadge).toHaveClass('bg-status-error-bg');
 
     // info variant
     const { container: infoContainer } = render(Badge, { variant: 'info' });
     const infoBadge = infoContainer.querySelector('div');
-    expect(infoBadge).toHaveClass('bg-blue-100');
+    expect(infoBadge).toHaveClass('bg-status-info-bg');
   });
 
   test('Handles case-insensitive variants', () => {
     const { container: upperContainer } = render(Badge, { variant: 'SUCCESS' });
     const upperBadge = upperContainer.querySelector('div');
-    expect(upperBadge).toHaveClass('bg-green-100');
+    expect(upperBadge).toHaveClass('bg-status-success-bg');
 
     const { container: mixedContainer } = render(Badge, { variant: 'Warning' });
     const mixedBadge = mixedContainer.querySelector('div');
-    expect(mixedBadge).toHaveClass('bg-yellow-100');
+    expect(mixedBadge).toHaveClass('bg-status-warning-bg');
   });
 
   test('Falls back to neutral variant for unknown variants', () => {
     const { container } = render(Badge, { variant: 'unknown' });
     const badge = container.querySelector('div');
-    expect(badge).toHaveClass('bg-gray-100');
+    expect(badge).toHaveClass('bg-muted');
   });
 
   test('Shows status dot when showDot is true', () => {
@@ -114,14 +114,14 @@ describe('Badge Component Tests', () => {
   });
 
   test('Applies custom text color', () => {
-    const { container } = render(Badge, { textColor: '#ff0000' });
+    const { container } = render(Badge, { textColor: 'hsl(var(--accent-danger))' });
     const badge = container.querySelector('div');
     // Browser may convert hex to rgb
     expect(badge.style.color).toBeTruthy();
   });
 
   test('Applies custom background color', () => {
-    const { container } = render(Badge, { bgColor: '#00ff00' });
+    const { container } = render(Badge, { bgColor: 'hsl(var(--accent-success))' });
     const badge = container.querySelector('div');
     // Browser may convert hex to rgb
     expect(badge.style.backgroundColor).toBeTruthy();

package/dist/primitives/BottomSheet/BottomSheet.spec.js

@@ -82,7 +82,7 @@ describe('BottomSheet Component', () => {
     const { container } = render(BottomSheet, {
       props: { open: true, onclose }
     });
-    const sheet = container.querySelector('.bg-white, .dark\\:bg-gray-800');
+    const sheet = container.querySelector('.bg-card, .dark\\:bg-bg-secondary');
 
     await fireEvent.click(sheet);
     expect(closeCalled).toBe(false);
@@ -115,7 +115,7 @@ describe('BottomSheet Component', () => {
   it('has handle bar element', () => {
     const { container } = render(BottomSheet, { props: { open: true } });
     // The handle is the gray bar with rounded corners
-    const handle = container.querySelector('.w-10.h-1.bg-gray-300');
+    const handle = container.querySelector('.w-10.h-1.bg-bg-quaternary');
     expect(handle).toBeTruthy();
   });
 
@@ -150,7 +150,7 @@ describe('BottomSheet Component', () => {
   it('does not render actions area when no actions snippet is provided', () => {
     const { container } = render(BottomSheet, { props: { open: true } });
     // The actions footer area should not exist if no actions snippet
-    const actionsArea = container.querySelector('.border-t.border-gray-200');
+    const actionsArea = container.querySelector('.border-t.border-border');
     expect(actionsArea).toBeFalsy();
   });
 
@@ -182,7 +182,7 @@ describe('BottomSheet Component', () => {
       props: { open: true, onclose }
     });
     // Click the inner sheet panel (not the backdrop itself)
-    const sheetPanel = container.querySelector('.bg-white');
+    const sheetPanel = container.querySelector('.bg-card');
     await fireEvent.click(sheetPanel);
     expect(closeCalled).toBe(false);
   });
@@ -217,7 +217,7 @@ describe('BottomSheet Component', () => {
       props: { open: true, onclose }
     });
     // Click the handle bar (a child of the backdrop)
-    const handleBar = container.querySelector('.w-10.h-1.bg-gray-300');
+    const handleBar = container.querySelector('.w-10.h-1.bg-bg-quaternary');
     await fireEvent.click(handleBar);
     expect(closeCalled).toBe(false);
   });