@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/calendar/OrderSummary/OrderSummary.svelte

@@ -186,9 +186,9 @@
 
 <div
   id="orderSummary"
-  class="hidden min-[872px]:block h-fit rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600"
+  class="hidden md:block h-fit rounded-lg bg-card border border-border"
 >
-  <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-600">
+  <div class="px-5 py-4 border-b border-border">
     <h3 class={typography.h3}>
       {labels.orderSummary}
     </h3>
@@ -206,7 +206,7 @@
             {#if ticket.ID == key}
               {@const effectivePrice = getEffectivePrice(ticket)}
               {@const isDonation = isDonationTicket(ticket)}
-              <div class="flex justify-between py-3 border-b border-gray-200/50 dark:border-gray-600/50">
+              <div class="flex justify-between py-3 border-b border-border/50">
                 <div>
                   <p class="{typography.label}">{ticket.name}</p>
                   <p class="{typography.smMuted}">
@@ -234,35 +234,35 @@
 
       <div class="{`${typography.sm} flex flex-col py-3 gap-2`}">
         {#if promoSavings > 0 || (promoDiscount > 0 && !currentPromoRule?.provideDiscount)}
-          <div class="flex justify-between text-gray-600 dark:text-gray-300">
+          <div class="flex justify-between text-text-secondary">
             <span>{labels.fullPrice}</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
           </div>
         {/if}
         {#if promoSavings > 0}
-          <div class="flex justify-between text-green-600 dark:text-green-500">
+          <div class="flex justify-between text-accent-success">
             <span>{labels.discount}</span><span>-${promoSavings.toFixed(2)}</span>
           </div>
         {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
-          <div class="flex justify-between text-green-600 dark:text-green-500">
+          <div class="flex justify-between text-accent-success">
             <span>{labels.discount}</span><span>-${promoDiscount.toFixed(2)}</span>
           </div>
         {/if}
-        <div class="flex justify-between text-gray-600 dark:text-gray-300">
+        <div class="flex justify-between text-text-secondary">
           <span>{labels.subtotal}</span><span>${subtotal.toFixed(2)}</span>
         </div>
-        <div class="flex justify-between text-gray-600 dark:text-gray-300">
+        <div class="flex justify-between text-text-secondary">
           <span>{labels.fees}</span><span>${fees.toFixed(2)}</span>
         </div>
-        <div class="flex justify-between text-gray-600 dark:text-gray-300">
+        <div class="flex justify-between text-text-secondary">
           <span>{labels.taxes}</span><span>${taxes.toFixed(2)}</span>
         </div>
         {#if giftCardApplied}
-          <div class="flex justify-between text-green-600 dark:text-green-500">
+          <div class="flex justify-between text-accent-success">
             <span>{labels.giftCardAppliedLabel}</span>
             <span>-${giftCardAmountDisplay}</span>
           </div>
           {#if giftCardRemainingBalance && parseFloat(giftCardRemainingBalance) > 0}
-            <div class="flex justify-between text-gray-500 dark:text-gray-400 text-xs">
+            <div class="flex justify-between text-muted-foreground text-xs">
               <span>{labels.giftCardBalanceAfterOrder}</span>
               <span>${giftCardRemainingBalance}</span>
             </div>
@@ -271,15 +271,15 @@
       </div>
 
       {#if giftCardApplied?.paymentType === 'gift_card_only'}
-        <div class="flex justify-between py-4 text-lg border-t border-gray-200 dark:border-gray-600">
-          <span class="font-semibold text-gray-900 dark:text-white">{labels.amountDue}</span>
-          <span class="font-bold text-green-600 dark:text-green-400">$0.00</span>
+        <div class="flex justify-between py-4 text-lg border-t border-border">
+          <span class="font-semibold text-text-primary">{labels.amountDue}</span>
+          <span class="font-bold text-accent-success">$0.00</span>
         </div>
-        <p class="text-xs text-gray-500 dark:text-gray-400 text-center -mt-2 mb-2">
+        <p class="text-xs text-muted-foreground text-center -mt-2 mb-2">
           {labels.fullyCoveredByGiftCard}
         </p>
       {:else}
-        <div class="flex justify-between {typography.h3} py-4 text-lg border-t border-gray-200 dark:border-gray-600">
+        <div class="flex justify-between {typography.h3} py-4 text-lg border-t border-border">
           <span>{labels.total}</span><span>${total.toFixed(2)}</span>
         </div>
       {/if}
@@ -287,12 +287,12 @@
 
     {#if totalQuantity > 0 && showTerms}
       <p class="{typography.xsMuted} text-center mb-3">
-        {labels.placeOrderTos} <a href="https://get-micdrop.com/tos" class="text-blue-700 dark:text-blue-500 underline hover:opacity-80" target="_blank" rel="noopener noreferrer">{labels.termsOfService}</a>
+        {labels.placeOrderTos} <a href="https://get-micdrop.com/tos" class="text-brand-primary underline hover:opacity-80" target="_blank" rel="noopener noreferrer">{labels.termsOfService}</a>
       </p>
     {/if}
 
     <button
-      class="w-full h-12 font-semibold rounded-lg flex items-center justify-center transition-colors select-none touch-manipulation {totalQuantity === 0 ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed' : 'bg-blue-700 dark:bg-blue-600 text-white hover:bg-blue-800 dark:hover:bg-blue-700'}"
+      class="w-full h-12 font-semibold rounded-lg flex items-center justify-center transition-colors select-none touch-manipulation {totalQuantity === 0 ? 'bg-bg-tertiary text-muted-foreground cursor-not-allowed' : 'bg-brand-primary text-white hover:bg-brand-primary/90'}"
       onclick={() => {
         if (totalQuantity === 0) return;
         if (executePurchase) {
@@ -314,7 +314,7 @@
 
 {#if showOrderSummaryOnMobile}
   <button
-    class="min-[872px]:hidden fixed inset-0 bg-black/50 z-40 border-none cursor-pointer"
+    class="md:hidden fixed inset-0 bg-overlay-bg z-40 border-none cursor-pointer"
     onclick={() => (showOrderSummaryOnMobile = false)}
     aria-label={labels.closeOrderSummary}
     transition:fade={{ duration: 200 }}
@@ -322,15 +322,15 @@
   <div
     in:fly={{ y: 800, duration: 300, easing: cubicOut }}
     out:fly={{ y: 800, duration: 300, easing: cubicOut }}
-    class="min-[872px]:hidden fixed bottom-0 left-0 w-full overflow-x-hidden overflow-y-auto z-50 max-h-[80vh] rounded-t-lg shadow-xl bg-white dark:bg-gray-800"
+    class="md:hidden fixed bottom-0 left-0 w-full overflow-x-hidden overflow-y-auto z-50 max-h-[80vh] rounded-t-lg shadow-xl bg-card"
   >
-    <div class="flex flex-row justify-between items-center px-5 py-4 border-b border-gray-200 dark:border-gray-600">
+    <div class="flex flex-row justify-between items-center px-5 py-4 border-b border-border">
       <h2 class="{typography.h2} text-xl">
         {labels.orderSummary}
       </h2>
       <button
         onclick={() => (showOrderSummaryOnMobile = false)}
-        class="transition-colors p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700"
+        class="transition-colors p-2 rounded-lg text-muted-foreground hover:text-text-primary hover:bg-bg-secondary"
         aria-label={labels.closeOrderSummary}
       >
         <CloseOutline class="w-7 h-7" />
@@ -344,7 +344,7 @@
             {#if ticket.ID == key}
               {@const effectivePrice = getEffectivePrice(ticket)}
               {@const isDonation = isDonationTicket(ticket)}
-              <div class="flex justify-between py-4 border-b border-gray-200 dark:border-gray-600">
+              <div class="flex justify-between py-4 border-b border-border">
                 <div>
                   <p class="{typography.h5}">{ticket.name}</p>
                   <p class="{typography.smMuted}">
@@ -370,18 +370,18 @@
         {/if}
       {/each}
 
-      <div class="flex flex-col py-4 gap-3 text-gray-600 dark:text-gray-300">
+      <div class="flex flex-col py-4 gap-3 text-text-secondary">
         {#if promoSavings > 0 || (promoDiscount > 0 && !currentPromoRule?.provideDiscount)}
           <div class="flex justify-between">
             <span>{labels.fullPrice}</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
           </div>
         {/if}
         {#if promoSavings > 0}
-          <div class="flex justify-between text-green-600 dark:text-green-500">
+          <div class="flex justify-between text-accent-success">
             <span>{labels.discount}</span><span>-${promoSavings.toFixed(2)}</span>
           </div>
         {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
-          <div class="flex justify-between text-green-600 dark:text-green-500">
+          <div class="flex justify-between text-accent-success">
             <span>{labels.discount}</span><span>-${promoDiscount.toFixed(2)}</span>
           </div>
         {/if}
@@ -395,12 +395,12 @@
           <span>{labels.taxes}</span><span>${taxes.toFixed(2)}</span>
         </div>
         {#if giftCardApplied}
-          <div class="flex justify-between text-green-600 dark:text-green-500">
+          <div class="flex justify-between text-accent-success">
             <span>{labels.giftCardAppliedLabel}</span>
             <span>-${giftCardAmountDisplay}</span>
           </div>
           {#if giftCardRemainingBalance && parseFloat(giftCardRemainingBalance) > 0}
-            <div class="flex justify-between text-gray-500 dark:text-gray-400 text-xs">
+            <div class="flex justify-between text-muted-foreground text-xs">
               <span>{labels.giftCardBalanceAfterOrder}</span>
               <span>${giftCardRemainingBalance}</span>
             </div>
@@ -409,15 +409,15 @@
       </div>
 
       {#if giftCardApplied?.paymentType === 'gift_card_only'}
-        <div class="flex justify-between py-5 border-t border-gray-200 dark:border-gray-600">
-          <span class="font-semibold text-gray-900 dark:text-white">{labels.amountDue}</span>
-          <span class="font-bold text-green-600 dark:text-green-400">$0.00</span>
+        <div class="flex justify-between py-5 border-t border-border">
+          <span class="font-semibold text-text-primary">{labels.amountDue}</span>
+          <span class="font-bold text-accent-success">$0.00</span>
         </div>
-        <p class="text-xs text-gray-500 dark:text-gray-400 text-center -mt-2 mb-2">
+        <p class="text-xs text-muted-foreground text-center -mt-2 mb-2">
           {labels.fullyCoveredByGiftCard}
         </p>
       {:else}
-        <div class="flex justify-between {typography.h3} py-5 border-t border-gray-200 dark:border-gray-600">
+        <div class="flex justify-between {typography.h3} py-5 border-t border-border">
           <span>{labels.total}</span><span>${total.toFixed(2)}</span>
         </div>
       {/if}
@@ -428,11 +428,11 @@
 {#if showFooter}
   <div
     transition:fly={{ y: 100, duration: 200 }}
-    class="min-[872px]:hidden fixed bottom-0 left-0 right-0 z-40 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 shadow-xl p-4 pb-[max(16px,calc(env(safe-area-inset-bottom)+8px))] select-none touch-manipulation"
+    class="md:hidden fixed bottom-0 left-0 right-0 z-40 bg-card border-t border-border shadow-xl p-4 pb-[max(16px,calc(env(safe-area-inset-bottom)+8px))] select-none touch-manipulation"
   >
     <div class="flex items-stretch gap-3">
       <button class="flex flex-col justify-between items-start shrink-0 whitespace-nowrap bg-transparent border-none p-0 cursor-pointer touch-manipulation" onclick={makeOrderSummaryVisible}>
-        <span class="{`${typography.sm} flex items-center gap-1 text-gray-600 dark:text-gray-300`}">
+        <span class="{`${typography.sm} flex items-center gap-1 text-text-secondary`}">
           {totalQuantity} {totalQuantity > 1 ? labels.ticketPlural : labels.ticketSingular}
           <ChevronDownOutline class={`w-4 h-4 ${typography.iconMuted} transition-transform duration-200 ${showOrderSummaryOnMobile ? 'rotate-180' : ''}`} />
         </span>
@@ -440,7 +440,7 @@
       </button>
 
       <button
-        class="{`${typography.label} flex-1 min-w-36 h-12 rounded-lg touch-manipulation flex items-center justify-center ${totalQuantity === 0 || !isAgreed ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed' : 'bg-blue-700 dark:bg-blue-600 text-white hover:bg-blue-800 dark:hover:bg-blue-700'}`}"
+        class="{`${typography.label} flex-1 min-w-36 h-12 rounded-lg touch-manipulation flex items-center justify-center ${totalQuantity === 0 || !isAgreed ? 'bg-bg-tertiary text-muted-foreground cursor-not-allowed' : 'bg-brand-primary text-white hover:bg-brand-primary/90'}`}"
         onclick={() => {
           if (executePurchase) {
             executePurchase(elements);

package/dist/calendar/PublicCard/PublicCard.spec.js

@@ -126,14 +126,14 @@ describe('PublicCard Component', () => {
       const soldOutEvent = { ...mockEvent, status: 'Sold out' };
       render(PublicCard, { props: { events: [soldOutEvent] } });
       const badge = screen.getByText('Sold out');
-      expect(badge.className).toContain('bg-red-100');
+      expect(badge.className).toContain('bg-status-error-bg');
     });
 
     it('applies correct class for Selling fast', () => {
       const sellingFastEvent = { ...mockEvent, status: 'Selling fast' };
       render(PublicCard, { props: { events: [sellingFastEvent] } });
       const badge = screen.getByText('Selling fast');
-      expect(badge.className).toContain('bg-yellow-100');
+      expect(badge.className).toContain('bg-status-warning-bg');
     });
   });
 
@@ -277,7 +277,7 @@ describe('PublicCard Component', () => {
     it('has dark mode support', () => {
       const { container } = render(PublicCard, { props: { events: [mockEvent] } });
       const article = container.querySelector('article');
-      expect(article.className).toContain('dark:bg-gray-800');
+      expect(article.className).toContain('');
     });
   });
 

package/dist/calendar/PublicCard/PublicCard.svelte

@@ -52,13 +52,13 @@
   function getStatusBadgeClass(status) {
     switch (status) {
       case 'Sold out':
-        return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+        return 'bg-status-error-bg text-status-error-text';
       case 'Selling fast':
-        return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
+        return 'bg-status-warning-bg text-status-warning-text';
       case 'Almost sold out':
-        return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+        return 'bg-status-error-bg text-status-error-text';
       default:
-        return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
+        return 'bg-muted text-text-secondary';
     }
   }
 
@@ -91,7 +91,7 @@
 {#each events as event}
   <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
   <article
-    class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer overflow-hidden transition-all duration-200 hover:shadow-lg hover:border-gray-300 dark:hover:border-gray-600 focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 relative {view === 'col'
+    class="bg-card rounded-lg border border-border cursor-pointer overflow-hidden transition-all duration-200 hover:shadow-lg hover:border-stroke-primary focus:outline-hidden focus:ring-4 focus:ring-focus-ring relative {view === 'col'
       ? 'flex flex-col'
       : 'grid grid-cols-[100px_1fr] sm:grid-cols-[160px_1fr] gap-3 sm:gap-4 p-3 sm:p-4'}"
     onclick={() => handleEventClick(event)}
@@ -101,7 +101,7 @@
     aria-label={`${event.name}, ${event.status || labels.onSale}, ${formatEventDate(event)}. ${labels.pressEnterToViewDetails}`}
   >
     <div
-      class="bg-gray-100 dark:bg-gray-700 flex items-center justify-center overflow-hidden {view === 'col'
+      class="bg-muted flex items-center justify-center overflow-hidden {view === 'col'
         ? 'w-full aspect-[4/3] rounded-t-lg'
         : 'w-24 h-24 sm:w-40 sm:h-32 rounded-lg shrink-0'}"
     >
@@ -142,7 +142,7 @@
         <span class="font-medium">
           {formatEventDate(event)}
           {#if event.startDateTime || event.timeline}
-            <span class="text-gray-500 dark:text-gray-500">&#8226;</span>
+            <span class="text-muted-foreground">&#8226;</span>
             {formatTime(event)}
           {/if}
         </span>

package/dist/calendar/ShowCard/ShowCard.spec.js

@@ -233,7 +233,7 @@ describe('ShowCard Component', () => {
 
       // Should show check icon
       await waitFor(() => {
-        const checkIcon = shareButton.querySelector('.text-green-600, .text-green-500');
+        const checkIcon = shareButton.querySelector('.text-accent-success, .text-accent-success');
         expect(checkIcon).toBeInTheDocument();
       });
 
@@ -241,7 +241,7 @@ describe('ShowCard Component', () => {
       vi.advanceTimersByTime(2000);
 
       await waitFor(() => {
-        const shareIcon = shareButton.querySelector('.text-gray-500, .text-gray-400');
+        const shareIcon = shareButton.querySelector('.text-muted-foreground, .text-muted-foreground');
         expect(shareIcon).toBeInTheDocument();
       });
 
@@ -557,7 +557,7 @@ describe('ShowCard Component', () => {
     it('has dark mode support', () => {
       const { container } = render(ShowCard, { props: { event: mockEvent } });
       const wrapper = container.querySelector('.rounded-lg');
-      expect(wrapper.className).toContain('dark:bg-gray-800');
+      expect(wrapper.className).toContain('');
     });
 
     it('has border on medium screens and up', () => {
@@ -569,15 +569,15 @@ describe('ShowCard Component', () => {
     it('applies hover styles to share button', () => {
       const { container } = render(ShowCard, { props: { event: mockEvent, showTitle: true } });
       const shareButton = screen.getByLabelText('Share event');
-      expect(shareButton.className).toContain('hover:bg-gray-100');
-      expect(shareButton.className).toContain('dark:hover:bg-gray-700');
+      expect(shareButton.className).toContain('hover:bg-muted');
+      expect(shareButton.className).toContain('');
     });
 
     it('applies hover styles to venue link', () => {
       const { container } = render(ShowCard, { props: { event: mockEvent } });
       const venueName = screen.getByText('The Music Hall');
-      expect(venueName.className).toContain('group-hover:text-blue-700');
-      expect(venueName.className).toContain('dark:group-hover:text-blue-500');
+      expect(venueName.className).toContain('group-hover:text-brand-primary');
+      expect(venueName.className).toContain('');
     });
 
     it('has border between sections', () => {
@@ -689,7 +689,7 @@ describe('ShowCard Component', () => {
 
       // Wait for success indicator
       await waitFor(() => {
-        const checkIcon = shareButton.querySelector('.text-green-600, .text-green-500');
+        const checkIcon = shareButton.querySelector('.text-accent-success, .text-accent-success');
         expect(checkIcon).toBeInTheDocument();
       });
 

package/dist/calendar/ShowCard/ShowCard.svelte

@@ -99,21 +99,21 @@
   }
 </script>
 
-<div class="h-fit rounded-lg sm:px-5 py-4 md:border md:border-gray-200 md:dark:border-gray-700 bg-white dark:bg-gray-800">
+<div class="h-fit rounded-lg sm:px-5 py-4 md:border md:border-border md: bg-card">
   {#if showTitle}
     <div class="flex justify-between items-start gap-2 mb-4">
       <h2 class="{typography.h2} flex-1 text-left">
         {event.name || ''}
       </h2>
       <button
-        class="shrink-0 p-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 relative"
+        class="shrink-0 p-2 rounded-lg transition-colors hover:bg-muted relative"
         aria-label={labels.shareEvent}
         onclick={handleShare}
       >
         {#if shareSuccess}
-          <CheckOutline class="w-5 h-5 text-green-600 dark:text-green-500" />
+          <CheckOutline class="w-5 h-5 text-accent-success" />
         {:else}
-          <ShareOutline class="w-5 h-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer" />
+          <ShareOutline class="w-5 h-5 text-muted-foreground hover:text-text-secondary cursor-pointer" />
         {/if}
       </button>
     </div>
@@ -130,7 +130,7 @@
   </div>
 
   {#if showtimes && showtimes.length > 1}
-    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+    <div class="mt-4 pt-4 border-t border-border">
       <p class="{typography.smMuted} mb-2">{labels.moreShowtimes}</p>
       <div class="flex flex-wrap gap-2">
         {#each showtimes as showtime}
@@ -149,17 +149,17 @@
   {/if}
 
   {#if event.venue}
-    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+    <div class="mt-4 pt-4 border-t border-border">
       <a
         href="https://www.google.com/maps/search/?api=1&query={encodeURIComponent(event.venue.googleLocationNameCache || event.venue.address || event.venue.name)}"
         target="_blank"
         rel="noopener noreferrer"
         class="group block"
       >
-        <p class="{typography.label} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
+        <p class="{typography.label} transition-colors group-hover:text-brand-primary">
           {event.venue.name}
         </p>
-        <p class="{typography.smMuted} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
+        <p class="{typography.smMuted} transition-colors group-hover:text-brand-primary">
           {event.venue.address || ''}
         </p>
       </a>

package/dist/calendar/ShowTimeCard/ShowTimeCard.spec.js

@@ -106,13 +106,13 @@ describe('ShowTimeCard Component', () => {
     it('applies selected border class', () => {
       const { container } = render(ShowTimeCard, { props: { isSelected: true } });
       const card = container.querySelector('[role="button"]');
-      expect(card.className).toContain('border-blue-700');
+      expect(card.className).toContain('border-brand-primary');
     });
 
     it('applies unselected border class when not selected', () => {
       const { container } = render(ShowTimeCard, { props: { isSelected: false } });
       const card = container.querySelector('[role="button"]');
-      expect(card.className).toContain('border-gray-200');
+      expect(card.className).toContain('border-border');
     });
   });
 
@@ -225,7 +225,7 @@ describe('ShowTimeCard Component', () => {
     it('includes dark mode background', () => {
       const { container } = render(ShowTimeCard);
       const card = container.querySelector('[role="button"]');
-      expect(card.className).toContain('dark:bg-gray-800');
+      expect(card.className).toContain('');
     });
 
     it('applies selected text color when selected', () => {
@@ -235,7 +235,7 @@ describe('ShowTimeCard Component', () => {
       // Find the date span (middle one) which gets the selected color
       const spans = container.querySelectorAll('span');
       const dateSpan = spans[1]; // Second span is the date
-      expect(dateSpan.className).toContain('text-blue-700');
+      expect(dateSpan.className).toContain('text-brand-primary');
     });
   });
 });

package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte

@@ -62,9 +62,9 @@
 </script>
 
 <div
-  class="w-full h-28 rounded-lg flex flex-col justify-center items-center gap-1.5 cursor-pointer border-2 px-1 transition-colors bg-white dark:bg-gray-800 {isSelected
-    ? 'border-blue-700 dark:border-blue-500'
-    : 'border-gray-200 dark:border-gray-700 hover:border-blue-700 dark:hover:border-blue-500'}"
+  class="w-full h-28 rounded-lg flex flex-col justify-center items-center gap-1.5 cursor-pointer border-2 px-1 transition-colors bg-card {isSelected
+    ? 'border-brand-primary'
+    : 'border-border hover:border-brand-primary'}"
   onclick={handleCardClick}
   onkeydown={handleKeydown}
   tabindex="0"
@@ -73,7 +73,7 @@
   aria-pressed={isSelected}
 >
   <span class="{typography.label} text-sm {typography.textMuted}">{day}</span>
-  <span class="{typography.label} text-base {isSelected ? 'text-blue-700 dark:text-blue-500' : ''}">
+  <span class="{typography.label} text-base {isSelected ? 'text-brand-primary' : ''}">
     {formatDate(date)}
   </span>
   <span class="{typography.label} text-sm {typography.textMuted}">{formatHour(time)}</span>

package/dist/components/Heading.spec.js

@@ -84,6 +84,6 @@ describe('Heading', () => {
 
   test('has dark mode text class', () => {
     const { container } = render(Heading, { props: { children: textSnippet('T') } });
-    expect(container.querySelector('h2').className).toContain('dark:text-white');
+    expect(container.querySelector('h2').className).toContain('');
   });
 });

package/dist/components/Heading.svelte

@@ -42,7 +42,7 @@
   };
 
   const colorClasses: Record<string, string> = {
-    default: 'text-gray-900 dark:text-white',
+    default: 'text-text-primary',
     none: '',
   };
   let sizeClass = $derived(sizeClasses[size] || 'text-lg');

package/dist/components/Layout/AppShell.svelte

@@ -38,10 +38,10 @@
 
   // Background classes based on variant
   const variantBackgrounds: Record<Variant, string> = {
-    admin: 'bg-gray-50 dark:bg-gray-800',
-    performer: 'bg-gray-50 dark:bg-gray-800',
-    public: 'bg-white dark:bg-gray-900',
-    minimal: 'bg-white dark:bg-gray-900',
+    admin: 'bg-bg-secondary',
+    performer: 'bg-bg-secondary',
+    public: 'bg-card',
+    minimal: 'bg-card',
   };
 
   // Sidebar width classes

package/dist/components/Layout/ContentSection.svelte

@@ -55,13 +55,13 @@
         {#if title}
           <svelte:element
             this={headingElement}
-            class="{titleSizeClasses[titleSize]} font-semibold text-gray-900 dark:text-white"
+            class="{titleSizeClasses[titleSize]} font-semibold text-text-primary"
           >
             {title}
           </svelte:element>
         {/if}
         {#if subtitle}
-          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+          <p class="text-sm text-muted-foreground mt-1">
             {subtitle}
           </p>
         {/if}

package/dist/components/Layout/Heading.svelte

@@ -54,9 +54,9 @@
   };
 
   const variantClasses: Record<Variant, string> = {
-    default: 'text-gray-900 dark:text-white',
-    muted: 'text-gray-600 dark:text-gray-400',
-    primary: 'text-primary dark:text-primary',
+    default: 'text-text-primary',
+    muted: 'text-text-secondary',
+    primary: 'text-primary',
   };
 
   const weightClasses: Record<string, string> = {

package/dist/components/Layout/PageContainer.svelte

@@ -51,8 +51,8 @@
 
   const backgroundClasses: Record<string, string> = {
     none: '',
-    white: 'bg-white dark:bg-gray-900',
-    gray: 'bg-gray-50 dark:bg-gray-800',
+    white: 'bg-card',
+    gray: 'bg-bg-secondary',
   };
 
   let classes = $derived([

package/dist/components/Layout/Section.spec.js

@@ -118,14 +118,14 @@ describe('Section Combinations', () => {
     const { container } = render(Section, {
       props: {
         title: 'Orders',
-        titleClass: 'text-blue-500',
+        titleClass: 'text-brand-primary',
         class: 'my-section'
       }
     });
     const section = container.querySelector('section');
     const h2 = container.querySelector('h2');
     expect(section).toHaveClass('my-section');
-    expect(h2).toHaveClass('text-blue-500');
+    expect(h2).toHaveClass('text-brand-primary');
   });
 
   test('all props together', () => {
@@ -134,12 +134,12 @@ describe('Section Combinations', () => {
         title: 'Statistics',
         titleSize: 'lg',
         gap: '6',
-        class: 'bg-white',
+        class: 'bg-card',
         titleClass: 'font-bold'
       }
     });
     const section = container.querySelector('section');
-    expect(section).toHaveClass('bg-white');
+    expect(section).toHaveClass('bg-card');
     expect(section).toHaveClass('space-y-6');
     expect(section).toHaveAttribute('aria-label', 'Statistics');
     const h2 = container.querySelector('h2');

package/dist/components/Layout/Text.svelte

@@ -39,13 +39,13 @@
   }: Props = $props();
 
   const variantClasses: Record<Variant, string> = {
-    primary: 'text-gray-900 dark:text-white',
-    secondary: 'text-gray-500 dark:text-gray-400',
-    muted: 'text-gray-400 dark:text-gray-500',
-    error: 'text-red-600 dark:text-red-500',
-    success: 'text-green-600 dark:text-green-500',
-    warning: 'text-yellow-600 dark:text-yellow-500',
-    info: 'text-blue-600 dark:text-blue-500',
+    primary: 'text-text-primary',
+    secondary: 'text-muted-foreground',
+    muted: 'text-muted-foreground',
+    error: 'text-accent-danger',
+    success: 'text-accent-success',
+    warning: 'text-accent-warning',
+    info: 'text-brand-primary',
   };
 
   const sizeClasses: Record<Size, string> = {

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

@@ -23,27 +23,27 @@ describe('AppShell', () => {
         it('applies admin background by default', () => {
             const { container } = render(AppShell);
             const shell = container.querySelector('div');
-            expect(shell?.classList.contains('bg-gray-50')).toBe(true);
+            expect(shell?.classList.contains('bg-bg-secondary')).toBe(true);
         });
         it('applies admin background for variant="admin"', () => {
             const { container } = render(AppShell, { variant: 'admin' });
             const shell = container.querySelector('div');
-            expect(shell?.classList.contains('bg-gray-50')).toBe(true);
+            expect(shell?.classList.contains('bg-bg-secondary')).toBe(true);
         });
         it('applies performer background for variant="performer"', () => {
             const { container } = render(AppShell, { variant: 'performer' });
             const shell = container.querySelector('div');
-            expect(shell?.classList.contains('bg-gray-50')).toBe(true);
+            expect(shell?.classList.contains('bg-bg-secondary')).toBe(true);
         });
         it('applies public background for variant="public"', () => {
             const { container } = render(AppShell, { variant: 'public' });
             const shell = container.querySelector('div');
-            expect(shell?.classList.contains('bg-white')).toBe(true);
+            expect(shell?.classList.contains('bg-card')).toBe(true);
         });
         it('applies minimal background for variant="minimal"', () => {
             const { container } = render(AppShell, { variant: 'minimal' });
             const shell = container.querySelector('div');
-            expect(shell?.classList.contains('bg-white')).toBe(true);
+            expect(shell?.classList.contains('bg-card')).toBe(true);
         });
     });
     describe('fixedHeader prop', () => {