@getmicdrop/svelte-components 5.20.2 → 5.21.1

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

@@ -18,7 +18,7 @@ describe('DataTable Component', () => {
     const { container } = render(DataTable);
     const wrapper = container.querySelector('.overflow-x-auto');
     expect(wrapper).toBeInTheDocument();
-    expect(wrapper).toHaveClass('rounded-lg', 'border', 'border-gray-200');
+    expect(wrapper).toHaveClass('rounded-lg', 'border', 'border-border');
   });
 
   it('applies custom className', () => {
@@ -37,7 +37,7 @@ describe('DataTable Component', () => {
     it('applies striped classes when striped is true', () => {
       const { container } = render(DataTable, { props: { striped: true } });
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-gray-50');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-bg-secondary');
     });
   });
 
@@ -45,13 +45,13 @@ describe('DataTable Component', () => {
     it('applies hover classes by default', () => {
       const { container } = render(DataTable);
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('[&>tr]:hover:bg-gray-50');
+      expect(tbody.className).toContain('[&>tr]:hover:bg-bg-secondary');
     });
 
     it('does not apply hover classes when hoverable is false', () => {
       const { container } = render(DataTable, { props: { hoverable: false } });
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).not.toContain('[&>tr]:hover:bg-gray-50');
+      expect(tbody.className).not.toContain('[&>tr]:hover:bg-bg-secondary');
     });
   });
 
@@ -106,7 +106,7 @@ describe('DataTable Component', () => {
     it('tbody has divide styles', () => {
       const { container } = render(DataTable);
       const tbody = container.querySelector('tbody');
-      expect(tbody).toHaveClass('divide-y', 'divide-gray-200');
+      expect(tbody).toHaveClass('divide-y', 'divide-border');
     });
 
     it('table has full width', () => {
@@ -126,31 +126,31 @@ describe('DataTable Component', () => {
     it('includes dark mode border classes', () => {
       const { container } = render(DataTable);
       const wrapper = container.querySelector('.overflow-x-auto');
-      expect(wrapper.className).toContain('dark:border-gray-700');
+      expect(wrapper.className).toContain('');
     });
 
     it('includes dark mode divide classes on tbody', () => {
       const { container } = render(DataTable);
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('dark:divide-gray-700');
+      expect(tbody.className).toContain('');
     });
 
-    it('includes dark mode striped classes when enabled', () => {
+    it('striped classes use token-based bg (auto dark mode via CSS vars)', () => {
       const { container } = render(DataTable, { props: { striped: true } });
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('dark:[&>tr:nth-child(odd)]:bg-gray-800');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-bg-secondary');
     });
 
-    it('includes dark mode hover classes when enabled', () => {
+    it('hover classes use token-based bg (auto dark mode via CSS vars)', () => {
       const { container } = render(DataTable, { props: { hoverable: true } });
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('dark:[&>tr]:hover:bg-gray-700');
+      expect(tbody.className).toContain('[&>tr]:hover:bg-bg-secondary');
     });
 
-    it('includes dark mode bordered classes when enabled', () => {
+    it('bordered classes use token-based border (auto dark mode via CSS vars)', () => {
       const { container } = render(DataTable, { props: { bordered: true } });
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('dark:[&_td]:border-gray-700');
+      expect(tbody.className).toContain('[&_td]:border-border');
     });
   });
 
@@ -158,7 +158,7 @@ describe('DataTable Component', () => {
     it('can combine striped and bordered', () => {
       const { container } = render(DataTable, { props: { striped: true, bordered: true } });
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-gray-50');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-bg-secondary');
       expect(tbody.className).toContain('[&_td]:border-x');
     });
 
@@ -175,9 +175,9 @@ describe('DataTable Component', () => {
       const wrapper = container.querySelector('.overflow-x-auto');
       expect(wrapper).toHaveClass('test-class');
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-gray-50');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-bg-secondary');
       expect(tbody.className).toContain('[&_td]:border-x');
-      expect(tbody.className).toContain('[&>tr]:hover:bg-gray-50');
+      expect(tbody.className).toContain('[&>tr]:hover:bg-bg-secondary');
     });
 
     it('can disable all visual effects', () => {
@@ -209,7 +209,7 @@ describe('DataTable Component', () => {
       const { container } = render(DataTable, { props: { header } });
       const thead = container.querySelector('thead');
       expect(thead).toBeInTheDocument();
-      expect(thead).toHaveClass('text-xs', 'uppercase', 'bg-gray-50');
+      expect(thead).toHaveClass('text-xs', 'uppercase', 'bg-bg-secondary');
     });
 
     it('header receives cellSize as argument', () => {
@@ -228,7 +228,7 @@ describe('DataTable Component', () => {
       }));
       const { container } = render(DataTable, { props: { header } });
       const thead = container.querySelector('thead');
-      expect(thead.className).toContain('dark:bg-gray-700');
+      expect(thead.className).toContain('');
     });
   });
 

package/dist/patterns/data/DataTable.svelte

@@ -20,15 +20,15 @@
   let cellSize = $derived(sizeClasses[size] || sizeClasses.md);
 </script>
 
-<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700 {className}">
+<div class="overflow-x-auto rounded-lg border border-border {className}">
   <table class={`w-full text-left ${typography.textMuted}`}>
     {#if header}
-      <thead class={`text-xs uppercase bg-gray-50 dark:bg-gray-700 ${typography.textMuted}`}>
+      <thead class={`text-xs uppercase bg-bg-secondary ${typography.textMuted}`}>
         {@render header(cellSize)}
       </thead>
     {/if}
 
-    <tbody class="divide-y divide-gray-200 dark:divide-gray-700 {striped ? '[&>tr:nth-child(odd)]:bg-gray-50 dark:[&>tr:nth-child(odd)]:bg-gray-800' : ''} {hoverable ? '[&>tr]:hover:bg-gray-50 dark:[&>tr]:hover:bg-gray-700' : ''} {bordered ? '[&_td]:border-x [&_td]:border-gray-200 dark:[&_td]:border-gray-700' : ''}">
+    <tbody class="divide-y divide-border {striped ? '[&>tr:nth-child(odd)]:bg-bg-secondary' : ''} {hoverable ? '[&>tr]:hover:bg-bg-secondary' : ''} {bordered ? '[&_td]:border-x [&_td]:border-border' : ''}">
       {@render children?.(cellSize)}
     </tbody>
   </table>

package/dist/patterns/forms/FormActions.spec.js

@@ -54,8 +54,8 @@ describe("FormActions Component Tests", () => {
     setupTest({ isSuccess: true });
     const submitBtn = screen.getByText("Save").closest("button, a");
     // Check for success variant classes (green background)
-    expect(submitBtn).toHaveClass("bg-green-600");
-    expect(submitBtn).toHaveClass("border-green-600");
+    expect(submitBtn).toHaveClass("bg-accent-success");
+    expect(submitBtn).toHaveClass("border-accent-success");
   });
 
   test("Submit button is disabled when disabled prop is true", () => {
@@ -73,16 +73,16 @@ describe("FormActions Component Tests", () => {
     setupTest({ submitVariant: "red-solid" });
     const submitBtn = screen.getByText("Save").closest("button, a");
     // Check for red variant classes (red-solid maps to "red" variant)
-    expect(submitBtn).toHaveClass("bg-red-700");
-    expect(submitBtn).toHaveClass("border-red-700");
+    expect(submitBtn).toHaveClass("bg-accent-danger");
+    expect(submitBtn).toHaveClass("border-accent-danger");
   });
 
   test("Uses custom cancel variant", () => {
     setupTest({ cancelVariant: "blue-outline" });
     const cancelBtn = screen.getByText("Cancel").closest("button, a");
     // Check for outline variant classes (blue-outline maps to "outline" variant)
-    expect(cancelBtn).toHaveClass("text-blue-700");
-    expect(cancelBtn).toHaveClass("border-blue-700");
+    expect(cancelBtn).toHaveClass("text-brand-primary");
+    expect(cancelBtn).toHaveClass("border-brand-primary");
     expect(cancelBtn).toHaveClass("bg-transparent");
   });
 

package/dist/patterns/forms/FormActions.stories.svelte

@@ -61,7 +61,7 @@
 />
 
 <Story name="Interactive Submit">
-  <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg">
+  <div class="bg-bg-secondary p-8 rounded-lg">
     <FormActions
       submitLabel="Save Changes"
       isSubmitting={submitting}

package/dist/patterns/forms/FormActions.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <div
-  class="w-full md:static flex bg-white dark:bg-gray-800 md:bg-transparent md:dark:bg-transparent md:rounded-b-lg items-center justify-center md:justify-end gap-4 py-5 px-4 {className}"
+  class="w-full md:static flex bg-card md:bg-transparent md: md:rounded-b-lg items-center justify-center md:justify-end gap-4 py-5 px-4 {className}"
 >
   {#if showCancel}
     <Button

package/dist/patterns/forms/FormSection.spec.js

@@ -101,16 +101,16 @@ describe('FormSection Divider', () => {
     expect(container.querySelector('hr')).not.toBeInTheDocument();
   });
 
-  test('divider has border-gray-200', () => {
+  test('divider has border-border', () => {
     const { container } = render(FormSection, { 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(FormSection, { props: { divider: true } });
     const hr = container.querySelector('hr');
-    expect(hr).toHaveClass('dark:border-gray-700');
+    expect(hr).toHaveClass('border-border');
   });
 });
 

package/dist/patterns/forms/FormSection.svelte

@@ -11,9 +11,9 @@
   } = $props();
 </script>
 
-<section class="space-y-4 {bordered ? 'border border-gray-200 dark:border-gray-700 rounded-lg p-4' : ''} {className}">
+<section class="space-y-4 {bordered ? 'border border-border rounded-lg p-4' : ''} {className}">
   {#if divider}
-    <hr class="border-gray-200 dark:border-gray-700" />
+    <hr class="border-border" />
   {/if}
 
   {#if title || description}

package/dist/patterns/forms/FormValidationSummary.spec.js

@@ -154,8 +154,8 @@ describe('FormValidationSummary Component', () => {
             },
         });
         const alert = container.querySelector('[role="alert"]');
-        expect(alert.classList.contains('bg-red-50')).toBe(true);
-        expect(alert.classList.contains('border-red-200')).toBe(true);
+        expect(alert.classList.contains('bg-status-error-bg')).toBe(true);
+        expect(alert.classList.contains('border-status-error-border')).toBe(true);
     });
     it('renders warning icon', () => {
         const { container } = render(FormValidationSummary, {

package/dist/patterns/forms/FormValidationSummary.stories.svelte

@@ -73,15 +73,15 @@
     <div class="space-y-4 mt-4">
       <div>
         <label for="firstName" class="block text-sm font-medium mb-1">First Name</label>
-        <input id="firstName" type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
+        <input id="firstName" type="text" class="w-full px-3 py-2 border border-status-error-border rounded" />
       </div>
       <div>
         <label for="email" class="block text-sm font-medium mb-1">Email</label>
-        <input id="email" type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
+        <input id="email" type="email" class="w-full px-3 py-2 border border-status-error-border rounded" />
       </div>
       <div>
         <label for="phone" class="block text-sm font-medium mb-1">Phone</label>
-        <input id="phone" type="tel" class="w-full px-3 py-2 border border-red-300 rounded" />
+        <input id="phone" type="tel" class="w-full px-3 py-2 border border-status-error-border rounded" />
       </div>
     </div>
   </div>
@@ -93,5 +93,5 @@
     {fieldLabels}
     show={false}
   />
-  <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">The validation summary is hidden</p>
+  <p class="text-sm text-muted-foreground mt-2">The validation summary is hidden</p>
 </Story>

package/dist/patterns/forms/FormValidationSummary.svelte

@@ -52,14 +52,14 @@
 {#if show && hasErrors}
   <div
     transition:safeSlide={{ duration: 300, easing: cubicOut }}
-    class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4"
+    class="bg-status-error-bg border border-status-error-border rounded-lg p-4 mb-4"
     role="alert"
     aria-live="polite"
   >
     <div class="flex items-start gap-2">
-      <WarningIcon class="shrink-0 text-red-600 dark:text-red-500 mt-0.5" />
+      <WarningIcon class="shrink-0 text-accent-danger mt-0.5" />
       <div class="flex-1">
-        <p class="text-sm font-medium text-red-800 dark:text-red-400">
+        <p class="text-sm font-medium text-status-error-text">
           {labels.pleaseFixTheFollowing}
         </p>
         <ul class="mt-2 space-y-1">
@@ -68,7 +68,7 @@
               <Button
                 variant="link"
                 size="sm"
-                class="text-red-600! dark:text-red-500! hover:text-red-900! dark:hover:text-red-400!"
+                class="!text-accent-danger hover:!text-accent-danger"
                 onclick={() => scrollToField(field.elementId)}
               >
                 {field.label}

package/dist/patterns/navigation/BottomNav.stories.svelte

@@ -30,13 +30,13 @@
 </script>
 
 <Story name="Default (4 Tabs)">
-  <div class="bg-gray-100 dark:bg-gray-700 p-4">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Mobile Bottom Navigation (4 tabs)</p>
-    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
+  <div class="bg-muted p-4">
+    <p class="text-sm text-muted-foreground mb-4">Mobile Bottom Navigation (4 tabs)</p>
+    <div class="max-w-md mx-auto bg-card rounded-lg shadow-lg overflow-hidden">
       <div class="h-64 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center">
-        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
+        <p class="text-muted-foreground">Page Content Area</p>
       </div>
-      <div class="flex border-t bg-white dark:bg-gray-900">
+      <div class="flex border-t bg-card">
         <BottomNav links={defaultLinks} />
       </div>
     </div>
@@ -44,13 +44,13 @@
 </Story>
 
 <Story name="With 5 Tabs">
-  <div class="bg-gray-100 dark:bg-gray-700 p-4">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Extended Navigation (5 tabs)</p>
-    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
+  <div class="bg-muted p-4">
+    <p class="text-sm text-muted-foreground mb-4">Extended Navigation (5 tabs)</p>
+    <div class="max-w-md mx-auto bg-card rounded-lg shadow-lg overflow-hidden">
       <div class="h-64 bg-gradient-to-br from-purple-50 to-purple-100 flex items-center justify-center">
-        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
+        <p class="text-muted-foreground">Page Content Area</p>
       </div>
-      <div class="flex border-t bg-white dark:bg-gray-900">
+      <div class="flex border-t bg-card">
         <BottomNav links={extendedLinks} />
       </div>
     </div>
@@ -58,13 +58,13 @@
 </Story>
 
 <Story name="Different Icon Set">
-  <div class="bg-gray-100 dark:bg-gray-700 p-4">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Custom Icons</p>
-    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
+  <div class="bg-muted p-4">
+    <p class="text-sm text-muted-foreground mb-4">Custom Icons</p>
+    <div class="max-w-md mx-auto bg-card rounded-lg shadow-lg overflow-hidden">
       <div class="h-64 bg-gradient-to-br from-green-50 to-green-100 flex items-center justify-center">
-        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
+        <p class="text-muted-foreground">Page Content Area</p>
       </div>
-      <div class="flex border-t bg-white dark:bg-gray-900">
+      <div class="flex border-t bg-card">
         <BottomNav
           links={[
             { label: 'Dashboard', href: '/', icon: 'Home' },
@@ -79,7 +79,7 @@
 </Story>
 
 <Story name="Mobile Viewport">
-  <div class="max-w-[375px] mx-auto bg-white dark:bg-gray-900 shadow-2xl rounded-3xl overflow-hidden">
+  <div class="max-w-[375px] mx-auto bg-card shadow-2xl rounded-3xl overflow-hidden">
     <!-- Mock iPhone screen -->
     <div class="h-[667px] flex flex-col">
       <!-- Status bar -->
@@ -91,11 +91,11 @@
       <!-- Content area -->
       <div class="flex-1 bg-gradient-to-br from-blue-50 to-purple-50 p-4">
         <h1 class="text-2xl font-bold mb-2">Home</h1>
-        <p class="text-gray-500 dark:text-gray-400">This is a mobile viewport simulation</p>
+        <p class="text-muted-foreground">This is a mobile viewport simulation</p>
       </div>
 
       <!-- Bottom navigation -->
-      <div class="flex border-t bg-white dark:bg-gray-900 safe-bottom">
+      <div class="flex border-t bg-card safe-bottom">
         <BottomNav links={defaultLinks} />
       </div>
     </div>
@@ -103,13 +103,13 @@
 </Story>
 
 <Story name="Dark Mode">
-  <div class="dark bg-gray-900 p-4 min-h-screen">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Dark Mode Bottom Navigation</p>
-    <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-2xl overflow-hidden">
+  <div class="dark bg-bg-primary p-4 min-h-screen">
+    <p class="text-sm text-muted-foreground mb-4">Dark Mode Bottom Navigation</p>
+    <div class="max-w-md mx-auto bg-bg-secondary rounded-lg shadow-2xl overflow-hidden">
       <div class="h-64 bg-gradient-to-br from-gray-900 to-gray-800 flex items-center justify-center">
-        <p class="text-gray-500 dark:text-gray-400">Dark Mode Content</p>
+        <p class="text-muted-foreground">Dark Mode Content</p>
       </div>
-      <div class="flex border-t border-gray-700 bg-gray-800">
+      <div class="flex border-t border-stroke-primary bg-bg-secondary">
         <BottomNav links={defaultLinks} />
       </div>
     </div>

package/dist/patterns/navigation/BottomNav.svelte

@@ -66,16 +66,16 @@
     {href}
     class={`bottom-nav-item flex-1 flex items-center justify-center py-3 px-2 no-underline bg-transparent border-none cursor-pointer min-w-0
       ${typography.textMuted} transition-colors duration-150
-      hover:text-gray-900 hover:no-underline dark:hover:text-white
+      hover:text-text-primary hover:no-underline
       select-none touch-manipulation
-      ${isActive(href, currentPath) ? 'active text-blue-700 dark:text-blue-500' : ''}`}
+      ${isActive(href, currentPath) ? 'active text-brand-primary' : ''}`}
     aria-label={label}
     style="-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;"
   >
     <span class="bottom-nav-icon relative flex items-center justify-center transition-transform duration-150 active:scale-[0.8]">
       <Icon name={icon} size="24" />
       {#if label === labels.showsLabel && invitationCount > 0}
-        <span class="notification-dot absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
+        <span class="notification-dot absolute -top-1 -right-1 w-2 h-2 bg-accent-danger rounded-full"></span>
       {/if}
     </span>
   </a>

package/dist/patterns/navigation/Header.spec.js

@@ -159,7 +159,7 @@ describe('Header', () => {
             await fireEvent.click(mobileButton);
             // The mobile sheet uses portal action to render to document.body,
             // so we need to check in document.body instead of container
-            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-overlay-bg');
             expect(mobileSheet).toBeTruthy();
         });
         it('navigates when a mobile sheet dropdown link is clicked', async () => {
@@ -168,7 +168,7 @@ describe('Header', () => {
             const mobileButton = container.querySelector('button.block.md\\:hidden');
             await fireEvent.click(mobileButton);
             // Mobile sheet renders via portal in document.body
-            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-overlay-bg');
             expect(mobileSheet).toBeTruthy();
             // Click the first dropdown link in the mobile sheet
             const menuItems = mobileSheet.querySelectorAll('button');
@@ -183,7 +183,7 @@ describe('Header', () => {
             const { container } = render(Header, { ...defaultProps, signoutHandler });
             const mobileButton = container.querySelector('button.block.md\\:hidden');
             await fireEvent.click(mobileButton);
-            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-overlay-bg');
             expect(mobileSheet).toBeTruthy();
             // Find the Sign Out button in the mobile sheet
             const menuItems = mobileSheet.querySelectorAll('button');
@@ -230,8 +230,8 @@ describe('Header', () => {
         it('marks current path as active', () => {
             const { container } = render(Header, defaultProps);
             const showsLink = container.querySelector('a[href="/shows"]');
-            // The active link should have 'text-blue-700' class (or dark mode 'dark:text-blue-500')
-            expect(showsLink.classList.contains('text-blue-700')).toBe(true);
+            // The active link should have 'text-brand-primary' class (or dark mode '')
+            expect(showsLink.classList.contains('text-brand-primary')).toBe(true);
         });
     });
     describe('default values', () => {
@@ -245,7 +245,7 @@ describe('Header', () => {
             const { container } = render(Header, { ...defaultProps, name: 'Jane Doe' });
             const mobileButton = container.querySelector('button.block.md\\:hidden');
             await fireEvent.click(mobileButton);
-            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-overlay-bg');
             expect(mobileSheet).toBeTruthy();
             expect(mobileSheet.textContent).toContain('Jane Doe');
         });
@@ -253,7 +253,7 @@ describe('Header', () => {
             const { container } = render(Header, { ...defaultProps, name: '' });
             const mobileButton = container.querySelector('button.block.md\\:hidden');
             await fireEvent.click(mobileButton);
-            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-overlay-bg');
             expect(mobileSheet).toBeTruthy();
             expect(mobileSheet.textContent).toContain('Performer');
         });
@@ -281,13 +281,13 @@ describe('Header', () => {
             const { container } = render(Header, propsWithRoot);
             const homeLink = container.querySelector('a[href="/performers/"]');
             // /shows does not match /performers/, so it should NOT be active
-            expect(homeLink.classList.contains('text-blue-700')).toBe(false);
+            expect(homeLink.classList.contains('text-brand-primary')).toBe(false);
         });
         it('marks link as active using startsWith for non-root paths', () => {
             const { container } = render(Header, defaultProps);
             // '/shows' starts with '/shows' so it should be active
             const showsLink = container.querySelector('a[href="/shows"]');
-            expect(showsLink.classList.contains('text-blue-700')).toBe(true);
+            expect(showsLink.classList.contains('text-brand-primary')).toBe(true);
         });
     });
 });

package/dist/patterns/navigation/Header.svelte

@@ -92,8 +92,7 @@
         <a
           {href}
           class={`px-4 py-2 ${typography.label} ${typography.textMuted} no-underline rounded-lg transition-all duration-150
-            hover:text-gray-900 hover:bg-gray-100 hover:no-underline dark:hover:text-white dark:hover:bg-gray-700
-            ${isActive(href, currentPath) ? 'text-blue-700 bg-gray-100 dark:text-blue-500 dark:bg-gray-700' : ''}`}
+            hover:text-text-primary hover:bg-muted hover:no-underline ${isActive(href, currentPath) ? 'text-brand-primary bg-muted' : ''}`}
         >
           {label}
         </a>
@@ -114,8 +113,8 @@
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <!-- svelte-ignore a11y_no_static_element_interactions -->
           <div class="fixed inset-0 z-30 bg-transparent" onclick={() => showDesktopDropdown = false}></div>
-          <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-40 overflow-hidden">
-            <div class="py-3 px-4 border-b border-gray-200 dark:border-gray-700">
+          <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-card border border-border rounded-lg shadow-lg z-40 overflow-hidden">
+            <div class="py-3 px-4 border-b border-border">
               <span class={`block ${typography.label}`}>{name || labels.defaultName}</span>
               <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
             </div>
@@ -127,7 +126,7 @@
                 {label}
               </MenuItem>
             {/each}
-            <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
+            <div class="h-px bg-bg-tertiary"></div>
             <MenuItem
               danger
               size="md"
@@ -150,8 +149,7 @@
       <a
         {href}
         class={`px-4 py-2 ${typography.label} ${typography.textMuted} no-underline rounded-lg transition-all duration-150
-          hover:text-gray-900 hover:bg-gray-100 hover:no-underline dark:hover:text-white dark:hover:bg-gray-700
-          ${isActive(href, currentPath) ? 'text-blue-700 bg-gray-100 dark:text-blue-500 dark:bg-gray-700' : ''}`}
+          hover:text-text-primary hover:bg-muted hover:no-underline           ${isActive(href, currentPath) ? 'text-brand-primary bg-muted' : ''}`}
       >
         {label}
       </a>
@@ -182,8 +180,8 @@
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div class="fixed inset-0 z-30 bg-transparent" onclick={() => showDesktopDropdown = false}></div>
-        <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-40 overflow-hidden">
-          <div class="py-3 px-4 border-b border-gray-200 dark:border-gray-700">
+        <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-card border border-border rounded-lg shadow-lg z-40 overflow-hidden">
+          <div class="py-3 px-4 border-b border-border">
             <span class={`block ${typography.label}`}>{name || labels.defaultName}</span>
             <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
           </div>
@@ -195,7 +193,7 @@
               {label}
             </MenuItem>
           {/each}
-          <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
+          <div class="h-px bg-bg-tertiary"></div>
           <MenuItem
             danger
             size="md"
@@ -213,7 +211,7 @@
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    class="fixed inset-0 flex items-end justify-center bg-black/50 z-50 touch-none overscroll-none"
+    class="fixed inset-0 flex items-end justify-center bg-overlay-bg z-50 touch-none overscroll-none"
     onclick={() => { showMobileSheet = false; }}
     transition:fade={{ duration: 300 }}
     use:portal
@@ -221,15 +219,15 @@
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
-      class="bg-white dark:bg-gray-800 rounded-t-3xl shadow-xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden pb-[var(--safe-bottom,0px)] touch-pan-y overscroll-contain"
+      class="bg-card rounded-t-3xl shadow-xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden pb-[var(--safe-bottom,0px)] touch-pan-y overscroll-contain"
       onclick={(e) => e.stopPropagation()}
       transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
     >
       <div class="flex justify-center pt-3 pb-2">
-        <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="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+      <div class="px-6 py-4 border-b border-border">
         <p class={`${typography.h4} m-0`}>{name || labels.defaultName}</p>
         <p class={`${typography.smMuted} mt-0.5 m-0`}>{email || ""}</p>
       </div>
@@ -253,7 +251,7 @@
         </MenuItem>
       </div>
 
-      <div class="border-t-8 border-gray-100 dark:border-gray-700">
+      <div class="border-t-8 border-border">
         <Button variant="ghost" size="full" class="py-4 text-base font-semibold" onclick={() => showMobileSheet = false}>
           {labels.cancel}
         </Button>

package/dist/patterns/navigation/Header.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.ts"],"names":[],"mappings":"AA8OA,QAAA,MAAM,MAAM;qBA5LS,MAAM,IAAI;WACpB,MAAM;aACJ,MAAM;YACP,MAAM;eACH;eAjBJ,MAAM;cACP,MAAM;OAgBQ;oBACJ;eAlBT,MAAM;cACP,MAAM;OAiBa;qBACR,OAAO;aACf,OAAO;;;;;;MAAsB;UAqLU,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.ts"],"names":[],"mappings":"AA4OA,QAAA,MAAM,MAAM;qBA1LS,MAAM,IAAI;WACpB,MAAM;aACJ,MAAM;YACP,MAAM;eACH;eAjBJ,MAAM;cACP,MAAM;OAgBQ;oBACJ;eAlBT,MAAM;cACP,MAAM;OAiBa;qBACR,OAAO;aACf,OAAO;;;;;;MAAsB;UAmLU,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

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

@@ -42,14 +42,14 @@ describe('PageLayout Variant', () => {
   test('default variant renders children directly', () => {
     const { container } = render(PageLayout, { props: { variant: 'default' } });
     // Should not have a Card wrapper
-    const card = container.querySelector('.bg-white.dark\\:bg-gray-800');
+    const card = container.querySelector('.bg-card.dark\\:bg-bg-secondary');
     expect(card).not.toBeInTheDocument();
   });
 
   test('card variant wraps content in Card', () => {
     const { container } = render(PageLayout, { props: { variant: 'card' } });
     // Card should be rendered with white bg
-    const cardWrapper = container.querySelector('.bg-white');
+    const cardWrapper = container.querySelector('.bg-card');
     expect(cardWrapper).toBeInTheDocument();
   });
 });
@@ -122,8 +122,8 @@ describe('PageLayout Combinations', () => {
     const { container } = render(PageLayout, {
       props: { variant: 'card', maxWidth: 'max-w-3xl' }
     });
-    // Card renders with bg-white
-    expect(container.querySelector('.bg-white')).toBeInTheDocument();
+    // Card renders with bg-card
+    expect(container.querySelector('.bg-card')).toBeInTheDocument();
   });
 
   test('all props together', () => {
@@ -139,7 +139,7 @@ describe('PageLayout Combinations', () => {
       }
     });
     expect(container.querySelector('nav')).toBeInTheDocument();
-    expect(container.querySelector('.bg-white')).toBeInTheDocument();
+    expect(container.querySelector('.bg-card')).toBeInTheDocument();
     expect(container.querySelector('.custom-page')).toBeInTheDocument();
   });
 });