@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/components/Layout/__tests__/ContentSection.test.js

@@ -39,7 +39,7 @@ describe('ContentSection', () => {
             const { container } = render(ContentSection, { title: 'Title', subtitle: 'Subtitle' });
             const subtitle = container.querySelector('p');
             expect(subtitle?.classList.contains('text-sm')).toBe(true);
-            expect(subtitle?.classList.contains('text-gray-500')).toBe(true);
+            expect(subtitle?.classList.contains('text-muted-foreground')).toBe(true);
         });
     });
     describe('headingLevel prop', () => {

package/dist/components/Layout/__tests__/Heading.test.js

@@ -10,7 +10,7 @@ describe('Heading', () => {
         it('applies default variant classes', () => {
             const { container } = render(Heading);
             const h2 = container.querySelector('h2');
-            expect(h2?.classList.contains('text-gray-900')).toBe(true);
+            expect(h2?.classList.contains('text-text-primary')).toBe(true);
         });
         it('applies default size class based on level', () => {
             const { container } = render(Heading);
@@ -77,12 +77,12 @@ describe('Heading', () => {
         it('applies default variant classes', () => {
             const { container } = render(Heading, { variant: 'default' });
             const h2 = container.querySelector('h2');
-            expect(h2?.classList.contains('text-gray-900')).toBe(true);
+            expect(h2?.classList.contains('text-text-primary')).toBe(true);
         });
         it('applies muted variant classes', () => {
             const { container } = render(Heading, { variant: 'muted' });
             const h2 = container.querySelector('h2');
-            expect(h2?.classList.contains('text-gray-600')).toBe(true);
+            expect(h2?.classList.contains('text-text-secondary')).toBe(true);
         });
         it('applies primary variant classes', () => {
             const { container } = render(Heading, { variant: 'primary' });

package/dist/components/Layout/__tests__/PageContainer.test.js

@@ -102,18 +102,18 @@ describe('PageContainer', () => {
         it('applies no background for background="none"', () => {
             const { container } = render(PageContainer, { background: 'none' });
             const div = container.querySelector('div');
-            expect(div?.classList.contains('bg-white')).toBe(false);
-            expect(div?.classList.contains('bg-gray-50')).toBe(false);
+            expect(div?.classList.contains('bg-card')).toBe(false);
+            expect(div?.classList.contains('bg-bg-secondary')).toBe(false);
         });
         it('applies white background for background="white"', () => {
             const { container } = render(PageContainer, { background: 'white' });
             const div = container.querySelector('div');
-            expect(div?.classList.contains('bg-white')).toBe(true);
+            expect(div?.classList.contains('bg-card')).toBe(true);
         });
         it('applies gray background for background="gray"', () => {
             const { container } = render(PageContainer, { background: 'gray' });
             const div = container.querySelector('div');
-            expect(div?.classList.contains('bg-gray-50')).toBe(true);
+            expect(div?.classList.contains('bg-bg-secondary')).toBe(true);
         });
     });
     describe('class prop', () => {

package/dist/components/Layout/__tests__/Text.test.js

@@ -10,7 +10,7 @@ describe('Text', () => {
         it('applies primary variant classes by default', () => {
             const { container } = render(Text);
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-gray-900')).toBe(true);
+            expect(p?.classList.contains('text-text-primary')).toBe(true);
         });
         it('applies base size class by default', () => {
             const { container } = render(Text);
@@ -22,37 +22,37 @@ describe('Text', () => {
         it('applies primary variant classes', () => {
             const { container } = render(Text, { variant: 'primary' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-gray-900')).toBe(true);
+            expect(p?.classList.contains('text-text-primary')).toBe(true);
         });
         it('applies secondary variant classes', () => {
             const { container } = render(Text, { variant: 'secondary' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-gray-500')).toBe(true);
+            expect(p?.classList.contains('text-muted-foreground')).toBe(true);
         });
         it('applies muted variant classes', () => {
             const { container } = render(Text, { variant: 'muted' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-gray-400')).toBe(true);
+            expect(p?.classList.contains('text-muted-foreground')).toBe(true);
         });
         it('applies error variant classes', () => {
             const { container } = render(Text, { variant: 'error' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-red-600')).toBe(true);
+            expect(p?.classList.contains('text-accent-danger')).toBe(true);
         });
         it('applies success variant classes', () => {
             const { container } = render(Text, { variant: 'success' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-green-600')).toBe(true);
+            expect(p?.classList.contains('text-accent-success')).toBe(true);
         });
         it('applies warning variant classes', () => {
             const { container } = render(Text, { variant: 'warning' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-yellow-600')).toBe(true);
+            expect(p?.classList.contains('text-accent-warning')).toBe(true);
         });
         it('applies info variant classes', () => {
             const { container } = render(Text, { variant: 'info' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-blue-600')).toBe(true);
+            expect(p?.classList.contains('text-brand-primary')).toBe(true);
         });
     });
     describe('size prop', () => {
@@ -138,7 +138,7 @@ describe('Text', () => {
         it('preserves default classes when adding custom classes', () => {
             const { container } = render(Text, { class: 'custom-class' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-gray-900')).toBe(true);
+            expect(p?.classList.contains('text-text-primary')).toBe(true);
             expect(p?.classList.contains('text-base')).toBe(true);
             expect(p?.classList.contains('custom-class')).toBe(true);
         });

package/dist/components/Text.spec.js

@@ -38,22 +38,22 @@ describe('Text', () => {
 
   test('default color is default (gray-900)', () => {
     const { container } = render(Text, { props: { children: textSnippet('T') } });
-    expect(container.querySelector('span').className).toContain('text-gray-900');
+    expect(container.querySelector('span').className).toContain('text-text-primary');
   });
 
   test('color muted', () => {
     const { container } = render(Text, { props: { color: 'muted', children: textSnippet('T') } });
-    expect(container.querySelector('span').className).toContain('text-gray-500');
+    expect(container.querySelector('span').className).toContain('text-muted-foreground');
   });
 
   test('color success', () => {
     const { container } = render(Text, { props: { color: 'success', children: textSnippet('T') } });
-    expect(container.querySelector('span').className).toContain('text-green-600');
+    expect(container.querySelector('span').className).toContain('text-accent-success');
   });
 
   test('color error', () => {
     const { container } = render(Text, { props: { color: 'error', children: textSnippet('T') } });
-    expect(container.querySelector('span').className).toContain('text-red-600');
+    expect(container.querySelector('span').className).toContain('text-accent-danger');
   });
 
   test('leading tight', () => {

package/dist/components/Text.svelte

@@ -30,13 +30,13 @@
   };
 
   const colorClasses: Record<string, string> = {
-    default: 'text-gray-900 dark:text-gray-100',
-    muted: 'text-gray-500 dark:text-gray-400',
-    primary: 'text-primary-600 dark:text-primary-400',
-    secondary: 'text-gray-600 dark:text-gray-300',
-    success: 'text-green-600 dark:text-green-400',
-    warning: 'text-yellow-600 dark:text-yellow-400',
-    error: 'text-red-600 dark:text-red-400',
+    default: 'text-text-primary',
+    muted: 'text-muted-foreground',
+    primary: 'text-primary-600',
+    secondary: 'text-text-secondary',
+    success: 'text-accent-success',
+    warning: 'text-accent-warning',
+    error: 'text-accent-danger',
     none: '',
   };
 

package/dist/patterns/chat/ChatActivityNotice.spec.js

@@ -48,7 +48,7 @@ describe('ChatActivityNotice', () => {
 
   test('renders decorative lines', () => {
     const { container } = render(ChatActivityNotice, { props: { actorName: 'Test' } });
-    const lines = container.querySelectorAll('.bg-gray-200, [class*="h-px"]');
+    const lines = container.querySelectorAll('.bg-bg-tertiary, [class*="h-px"]');
     expect(lines.length).toBeGreaterThanOrEqual(1);
   });
 

package/dist/patterns/chat/ChatActivityNotice.svelte

@@ -28,14 +28,14 @@
 </script>
 
 <div class={classNames('flex items-center justify-center gap-3 py-3', className)}>
-  <div class="h-px bg-gray-200 dark:bg-gray-700 w-12"></div>
+  <div class="h-px bg-bg-tertiary w-12"></div>
   <div class="flex flex-col items-center gap-1">
     {@render children?.()}
     {#if actorName || timestamp}
-      <span class="text-[10px] text-gray-400">
+      <span class="text-[10px] text-muted-foreground">
         {#if actorName}{actorName}{/if}{#if actorName && timestamp} · {/if}{#if timestamp}{timestamp}{/if}
       </span>
     {/if}
   </div>
-  <div class="h-px bg-gray-200 dark:bg-gray-700 w-12"></div>
+  <div class="h-px bg-bg-tertiary w-12"></div>
 </div>

package/dist/patterns/chat/ChatBubble.spec.js

@@ -51,7 +51,7 @@ describe('ChatBubble', () => {
 
   test('shows failed indicator', () => {
     const { container } = render(ChatBubble, { props: { failed: true } });
-    const redIndicator = container.querySelector('.text-red-500, .bg-red-500, [class*="red"]');
+    const redIndicator = container.querySelector('.text-accent-danger, .bg-accent-danger, [class*="red"]');
     expect(redIndicator).toBeInTheDocument();
   });
 

package/dist/patterns/chat/ChatBubble.svelte

@@ -56,8 +56,8 @@
     classNames(
       'px-4 py-2.5 rounded-2xl text-sm',
       isOutbound
-        ? 'bg-blue-600 text-white rounded-br-sm'
-        : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-bl-sm',
+        ? 'bg-brand-primary text-white rounded-br-sm'
+        : 'bg-muted text-text-primary rounded-bl-sm',
       className
     )
   );
@@ -70,24 +70,24 @@
     {/if}
     <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'}">
       {#if !isOutbound && senderName}
-        <span class="text-xs text-gray-500 mb-1 px-2">{senderName}</span>
+        <span class="text-xs text-muted-foreground mb-1 px-2">{senderName}</span>
       {/if}
       <div class="flex items-center gap-2 {isOutbound ? 'flex-row-reverse' : ''}">
         <div class={bubbleClasses}>
           {@render children?.()}
         </div>
         {#if failed}
-          <div class="flex items-center justify-center w-5 h-5 bg-red-500 rounded-full shrink-0">
+          <div class="flex items-center justify-center w-5 h-5 bg-accent-danger rounded-full shrink-0">
             <span class="text-white text-xs font-bold leading-none">!</span>
           </div>
         {/if}
       </div>
       {#if failed && errorMessage}
         <div class="flex items-center gap-1 mt-0.5 px-2">
-          <span class="text-[9px] text-red-400">{errorMessage}</span>
+          <span class="text-[9px] text-accent-danger">{errorMessage}</span>
           {#if onretry}
             <button
-              class="text-[9px] text-red-400 hover:text-red-500 flex items-center gap-0.5 opacity-75 hover:opacity-100"
+              class="text-[9px] text-accent-danger hover:text-accent-danger flex items-center gap-0.5 opacity-75 hover:opacity-100"
               onclick={onretry}
             >
               <Renew class="w-2 h-2" />
@@ -96,7 +96,7 @@
           {/if}
         </div>
       {:else if timestamp}
-        <span class="text-[10px] text-gray-400 mt-0.5 px-2">{timestamp}</span>
+        <span class="text-[10px] text-muted-foreground mt-0.5 px-2">{timestamp}</span>
       {/if}
     </div>
   </div>

package/dist/patterns/chat/ChatContainer.spec.js

@@ -25,6 +25,6 @@ describe('ChatContainer', () => {
 
   test('has white background', () => {
     const { container } = render(ChatContainer);
-    expect(container.querySelector('[class*="bg-white"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-card"]')).toBeInTheDocument();
   });
 });

package/dist/patterns/chat/ChatContainer.svelte

@@ -27,9 +27,9 @@
   }: Props = $props();
 </script>
 
-<div class={classNames('flex flex-col h-full bg-white dark:bg-gray-900', className)}>
+<div class={classNames('flex flex-col h-full bg-card', className)}>
   {#if header}
-    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 shrink-0">
+    <div class="px-4 py-3 border-b border-border shrink-0">
       {@render header()}
     </div>
   {/if}
@@ -39,7 +39,7 @@
   </div>
 
   {#if footer}
-    <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shrink-0">
+    <div class="px-4 py-3 border-t border-border bg-card shrink-0">
       {@render footer()}
     </div>
   {/if}

package/dist/patterns/chat/ChatDateDivider.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <div class={classNames('text-center py-2', className)}>
-  <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full">
+  <span class="text-xs font-semibold text-muted-foreground bg-muted px-3 py-1 rounded-full">
     {label}
   </span>
 </div>

package/dist/patterns/chat/ChatInvitationBubble.spec.js

@@ -8,9 +8,9 @@ describe('ChatInvitationBubble', () => {
     expect(screen.getByText(/Invited Alice/i)).toBeInTheDocument();
   });
 
-  test('has blue background', () => {
+  test('has brand-primary background', () => {
     const { container } = render(ChatInvitationBubble, { props: { performerName: 'Bob' } });
-    expect(container.querySelector('[class*="blue"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="brand-primary"]')).toBeInTheDocument();
   });
 
   test('renders invitation icon', () => {

package/dist/patterns/chat/ChatInvitationBubble.svelte

@@ -33,7 +33,7 @@
 
   let bubbleClasses = $derived(
     classNames(
-      'px-4 py-2.5 rounded-2xl text-sm bg-blue-600 text-white flex items-center gap-1.5',
+      'px-4 py-2.5 rounded-2xl text-sm bg-brand-primary text-white flex items-center gap-1.5',
       outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
       className
     )

package/dist/patterns/chat/ChatInvitationNotice.spec.js

@@ -8,9 +8,9 @@ describe('ChatInvitationNotice', () => {
     expect(screen.getByText(/Invited Alice/i)).toBeInTheDocument();
   });
 
-  test('has blue text color', () => {
+  test('has brand-primary text color', () => {
     const { container } = render(ChatInvitationNotice, { props: { performerName: 'Bob' } });
-    expect(container.querySelector('[class*="blue"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="brand-primary"]')).toBeInTheDocument();
   });
 
   test('renders icon', () => {

package/dist/patterns/chat/ChatInvitationNotice.svelte

@@ -30,7 +30,7 @@
   let labels = $derived({ ...defaultLabels, ...userLabels });
 </script>
 
-<span class={classNames('text-xs font-medium text-blue-600 flex items-center gap-1', className)}>
+<span class={classNames('text-xs font-medium text-brand-primary flex items-center gap-1', className)}>
   <SendAltFilled class="w-3 h-3" />
   {typeof labels.invited === 'function' ? labels.invited(performerName) : labels.invited}
 </span>

package/dist/patterns/chat/ChatMessageGroup.svelte

@@ -42,13 +42,13 @@
     {/if}
     <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'}">
       {#if senderName && !isOutbound}
-        <span class="text-xs text-gray-500 mb-1 px-2">{senderName}</span>
+        <span class="text-xs text-muted-foreground mb-1 px-2">{senderName}</span>
       {/if}
       <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'} gap-1">
         {@render children?.()}
       </div>
       {#if timestamp}
-        <span class="text-[10px] text-gray-400 mt-0.5 px-2">
+        <span class="text-[10px] text-muted-foreground mt-0.5 px-2">
           {#if isOutbound && senderName}{senderName} · {/if}{timestamp}
         </span>
       {/if}

package/dist/patterns/chat/ChatSlotUpdate.svelte

@@ -30,12 +30,12 @@
   let classes = $derived(
     variant === 'bubble'
       ? classNames(
-          'px-4 py-2.5 rounded-2xl text-sm bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400',
+          'px-4 py-2.5 rounded-2xl text-sm bg-muted text-text-secondary',
           outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
           className
         )
       : classNames(
-          'text-xs font-medium text-gray-500 dark:text-gray-400',
+          'text-xs font-medium text-muted-foreground',
           className
         )
   );

package/dist/patterns/chat/ChatStatusBadge.spec.js

@@ -3,38 +3,38 @@ import { expect, describe, test } from 'vitest';
 import ChatStatusBadge from './ChatStatusBadge.svelte';
 
 describe('ChatStatusBadge', () => {
-  test('renders confirmed status with green styling', () => {
+  test('renders confirmed status with success styling', () => {
     const { container } = render(ChatStatusBadge, { props: { status: 'confirmed' } });
     expect(screen.getByText(/confirmed/i)).toBeInTheDocument();
-    const badge = container.querySelector('[class*="green"]');
+    const badge = container.querySelector('[class*="accent-success"]');
     expect(badge).toBeInTheDocument();
   });
 
-  test('renders declined status with red styling', () => {
+  test('renders declined status with danger styling', () => {
     const { container } = render(ChatStatusBadge, { props: { status: 'declined' } });
     expect(screen.getByText(/declined/i)).toBeInTheDocument();
-    const badge = container.querySelector('[class*="red"]');
+    const badge = container.querySelector('[class*="accent-danger"]');
     expect(badge).toBeInTheDocument();
   });
 
-  test('renders canceled status with red styling', () => {
+  test('renders canceled status with danger styling', () => {
     const { container } = render(ChatStatusBadge, { props: { status: 'canceled' } });
     expect(screen.getByText(/canceled/i)).toBeInTheDocument();
-    const badge = container.querySelector('[class*="red"]');
+    const badge = container.querySelector('[class*="accent-danger"]');
     expect(badge).toBeInTheDocument();
   });
 
-  test('renders invited status with blue styling', () => {
+  test('renders invited status with brand styling', () => {
     const { container } = render(ChatStatusBadge, { props: { status: 'invited' } });
     expect(screen.getByText(/invited/i)).toBeInTheDocument();
-    const badge = container.querySelector('[class*="blue"]');
+    const badge = container.querySelector('[class*="brand-primary"]');
     expect(badge).toBeInTheDocument();
   });
 
-  test('renders unknown status with gray styling', () => {
+  test('renders unknown status with muted styling', () => {
     const { container } = render(ChatStatusBadge, { props: { status: 'pending' } });
     expect(screen.getByText(/pending/i)).toBeInTheDocument();
-    const badge = container.querySelector('[class*="gray"]');
+    const badge = container.querySelector('[class*="bg-muted"]');
     expect(badge).toBeInTheDocument();
   });
 

package/dist/patterns/chat/ChatStatusBadge.svelte

@@ -41,27 +41,27 @@
     switch (s?.toLowerCase()) {
       case 'confirmed':
         return {
-          textColor: 'text-green-600',
-          bgColor: 'bg-green-50 dark:bg-green-900/20',
+          textColor: 'text-accent-success',
+          bgColor: 'bg-status-success-bg',
           icon: CheckmarkFilled,
         };
       case 'declined':
       case 'canceled':
         return {
-          textColor: 'text-red-600',
-          bgColor: 'bg-red-50 dark:bg-red-900/20',
+          textColor: 'text-accent-danger',
+          bgColor: 'bg-status-error-bg',
           icon: CloseFilled,
         };
       case 'invited':
         return {
-          textColor: 'text-blue-600',
-          bgColor: 'bg-blue-50 dark:bg-blue-900/20',
+          textColor: 'text-brand-primary',
+          bgColor: 'bg-status-info-bg',
           icon: SendAltFilled,
         };
       default:
         return {
-          textColor: 'text-gray-600',
-          bgColor: 'bg-gray-100 dark:bg-gray-800',
+          textColor: 'text-text-secondary',
+          bgColor: 'bg-muted',
           icon: null,
         };
     }

package/dist/patterns/chat/ChatStatusTransition.spec.js

@@ -48,28 +48,28 @@ describe('ChatStatusTransition', () => {
     expect(svgs.length).toBe(0);
   });
 
-  test('confirmed from shows green color', () => {
+  test('confirmed from shows success color', () => {
     const { container } = render(ChatStatusTransition, {
       props: { fromStatus: 'confirmed', toStatus: 'declined' }
     });
-    const green = container.querySelector('[class*="green"]');
-    expect(green).toBeInTheDocument();
+    const success = container.querySelector('[class*="accent-success"]');
+    expect(success).toBeInTheDocument();
   });
 
-  test('declined to shows red color', () => {
+  test('declined to shows danger color', () => {
     const { container } = render(ChatStatusTransition, {
       props: { fromStatus: 'confirmed', toStatus: 'declined' }
     });
-    const red = container.querySelector('[class*="red"]');
-    expect(red).toBeInTheDocument();
+    const danger = container.querySelector('[class*="accent-danger"]');
+    expect(danger).toBeInTheDocument();
   });
 
-  test('invited status shows blue color', () => {
+  test('invited status shows brand color', () => {
     const { container } = render(ChatStatusTransition, {
       props: { fromStatus: 'invited', toStatus: 'confirmed' }
     });
-    const blue = container.querySelector('[class*="blue"]');
-    expect(blue).toBeInTheDocument();
+    const brand = container.querySelector('[class*="brand-primary"]');
+    expect(brand).toBeInTheDocument();
   });
 
   test('applies custom className', () => {

package/dist/patterns/chat/ChatStatusTransition.svelte

@@ -34,14 +34,14 @@
   function getStatusStyle(status: string): StatusStyle {
     switch (status?.toLowerCase()) {
       case 'confirmed':
-        return { color: 'text-green-600', icon: CheckmarkFilled };
+        return { color: 'text-accent-success', icon: CheckmarkFilled };
       case 'declined':
       case 'canceled':
-        return { color: 'text-red-600', icon: CloseFilled };
+        return { color: 'text-accent-danger', icon: CloseFilled };
       case 'invited':
-        return { color: 'text-blue-600', icon: SendAltFilled };
+        return { color: 'text-brand-primary', icon: SendAltFilled };
       default:
-        return { color: 'text-gray-600', icon: null };
+        return { color: 'text-text-secondary', icon: null };
     }
   }
 
@@ -55,7 +55,7 @@
     <FromIcon class="w-3 h-3 {fromStyle.color}" />
   {/if}
   <span class={fromStyle.color}>{fromStatus}</span>
-  <span class="text-gray-400 mx-1">→</span>
+  <span class="text-muted-foreground mx-1">→</span>
   {#if toStyle.icon}
     {@const ToIcon = toStyle.icon}
     <ToIcon class="w-3 h-3 {toStyle.color}" />

package/dist/patterns/chat/ChatTextBubble.spec.js

@@ -8,14 +8,14 @@ describe('ChatTextBubble', () => {
     expect(container.querySelector('.rounded-bl-sm')).toBeInTheDocument();
   });
 
-  test('inbound has gray background', () => {
+  test('inbound has muted background', () => {
     const { container } = render(ChatTextBubble, { props: { direction: 'inbound' } });
-    expect(container.querySelector('[class*="gray"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-muted"]')).toBeInTheDocument();
   });
 
-  test('outbound has blue background', () => {
+  test('outbound has brand-primary background', () => {
     const { container } = render(ChatTextBubble, { props: { direction: 'outbound' } });
-    expect(container.querySelector('[class*="blue"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="brand-primary"]')).toBeInTheDocument();
   });
 
   test('outbound has rounded-br-sm', () => {

package/dist/patterns/chat/ChatTextBubble.svelte

@@ -29,8 +29,8 @@
     classNames(
       'px-4 py-2.5 rounded-2xl text-sm',
       isOutbound
-        ? 'bg-blue-600 text-white rounded-br-sm'
-        : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-bl-sm',
+        ? 'bg-brand-primary text-white rounded-br-sm'
+        : 'bg-muted text-text-primary rounded-bl-sm',
       className
     )
   );

package/dist/patterns/data/DataList.spec.js

@@ -26,27 +26,27 @@ describe('DataList Dividers', () => {
     const { container } = render(DataList);
     const list = container.querySelector('ul');
     expect(list).toHaveClass('divide-y');
-    expect(list).toHaveClass('divide-gray-200');
+    expect(list).toHaveClass('divide-border');
   });
 
   test('dividers=true shows divide classes', () => {
     const { container } = render(DataList, { props: { dividers: true } });
     const list = container.querySelector('ul');
     expect(list).toHaveClass('divide-y');
-    expect(list).toHaveClass('divide-gray-200');
+    expect(list).toHaveClass('divide-border');
   });
 
   test('dividers=false removes divide classes', () => {
     const { container } = render(DataList, { props: { dividers: false } });
     const list = container.querySelector('ul');
     expect(list).not.toHaveClass('divide-y');
-    expect(list).not.toHaveClass('divide-gray-200');
+    expect(list).not.toHaveClass('divide-border');
   });
 
-  test('dividers have dark mode class', () => {
+  test('dividers use token-based border class', () => {
     const { container } = render(DataList, { props: { dividers: true } });
     const list = container.querySelector('ul');
-    expect(list).toHaveClass('dark:divide-gray-700');
+    expect(list).toHaveClass('divide-border');
   });
 });
 

package/dist/patterns/data/DataList.svelte

@@ -8,7 +8,7 @@
   } = $props();
 
   let gapClass = $derived(gap > 0 ? `space-y-${gap}` : '');
-  let dividerClass = $derived(dividers && gap === 0 ? 'divide-y divide-gray-200 dark:divide-gray-700' : '');
+  let dividerClass = $derived(dividers && gap === 0 ? 'divide-y divide-border' : '');
 </script>
 
 <ul class="{dividerClass} {gapClass} {className}" role="list">