@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/calendar/AboutShow/AboutShow.spec.js

@@ -327,7 +327,7 @@ describe('AboutShow Component', () => {
       });
       const img = screen.getByAltText('Charlie Brown');
       expect(img).toHaveAttribute('src', '');
-      expect(img.className).toContain('bg-gray-50');
+      expect(img.className).toContain('bg-bg-secondary');
     });
 
     it('renders multiple performers', () => {
@@ -434,11 +434,11 @@ describe('AboutShow Component', () => {
       render(AboutShow, { props: { performers: [validPerformer] } });
 
       const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
-      expect(performerCard.className).toContain('border-gray-200');
+      expect(performerCard.className).toContain('border-border');
 
       await fireEvent.click(performerCard);
       // Check for the active state border (not the hover state)
-      const activeClassPattern = /border-blue-700(?!\s*dark:hover)/;
+      const activeClassPattern = /border-brand-primary/;
       expect(performerCard.className).toMatch(activeClassPattern);
     });
 
@@ -660,7 +660,7 @@ describe('AboutShow Component', () => {
     it('has dark mode classes for title', () => {
       const { container } = render(AboutShow);
       const title = screen.getByText('About the Show');
-      expect(title.className).toContain('dark:text-white');
+      expect(title.className).toContain('');
     });
 
     it('has dark mode classes for show image background', () => {
@@ -671,7 +671,7 @@ describe('AboutShow Component', () => {
         }
       });
       const img = screen.getByAltText('');
-      expect(img.className).toContain('dark:bg-gray-800');
+      expect(img.className).toContain('');
     });
 
     it('has dark mode classes for description', () => {
@@ -679,14 +679,14 @@ describe('AboutShow Component', () => {
         props: { description: 'Test description' }
       });
       const paragraph = screen.getByText('Test description');
-      expect(paragraph.className).toContain('dark:text-white');
+      expect(paragraph.className).toContain('');
     });
 
     it('has dark mode classes for read more button', () => {
       const longDescription = 'a'.repeat(1600);
       render(AboutShow, { props: { description: longDescription } });
       const button = screen.getByText('Show more');
-      expect(button.className).toContain('dark:text-blue-500');
+      expect(button.className).toContain('');
     });
 
     it('has dark mode classes for performer card', () => {
@@ -706,9 +706,9 @@ describe('AboutShow Component', () => {
       };
       render(AboutShow, { props: { performers: [performer] } });
       const card = screen.getByText('Bob Builder').closest('.cursor-pointer');
-      expect(card.className).toContain('dark:bg-gray-800');
-      expect(card.className).toContain('dark:border-gray-600');
-      expect(card.className).toContain('dark:hover:border-blue-500');
+      expect(card.className).toContain('');
+      expect(card.className).toContain('');
+      expect(card.className).toContain('');
     });
   });
 

package/dist/calendar/AboutShow/AboutShow.svelte

@@ -67,7 +67,7 @@
 
   {#if ShowImage && description}
     <div>
-      <img src={ShowImage} alt="" class="rounded-lg object-contain w-full bg-gray-50 dark:bg-gray-800" />
+      <img src={ShowImage} alt="" class="rounded-lg object-contain w-full bg-bg-secondary" />
     </div>
   {/if}
 
@@ -77,7 +77,7 @@
       {#if showReadMore && description.length > characterLimit}
         <button
           onclick={toggleDescription}
-          class={`${typography.label} text-left hover:underline text-blue-700 dark:text-blue-500`}
+          class={`${typography.label} text-left hover:underline text-brand-primary`}
         >
           {labels.showLess}
         </button>
@@ -88,7 +88,7 @@
       </p>
       <button
         onclick={toggleDescription}
-        class={`${typography.label} text-left hover:underline text-blue-700 dark:text-blue-500`}
+        class={`${typography.label} text-left hover:underline text-brand-primary`}
       >
         {labels.showMore}
       </button>
@@ -115,15 +115,15 @@
               <!-- svelte-ignore a11y_click_events_have_key_events -->
               <!-- svelte-ignore a11y_no_static_element_interactions -->
               <div
-                class="w-72 sm:w-80 absolute bottom-full mb-2.5 rounded-lg p-4 z-50 shadow-xl transition-all duration-300 bg-white dark:bg-gray-800 border-2 border-blue-700 dark:border-blue-500 {index === 0 ? 'left-[190%]' : 'left-1/2 -translate-x-1/2'}"
+                class="w-72 sm:w-80 absolute bottom-full mb-2.5 rounded-lg p-4 z-50 shadow-xl transition-all duration-300 bg-card border-2 border-brand-primary {index === 0 ? 'left-[190%]' : 'left-1/2 -translate-x-1/2'}"
                 onclick={(e) => e.stopPropagation()}
               >
                 <div
-                  class="absolute w-3 h-3 bg-white dark:bg-gray-800 rotate-45 border-r-2 border-b-2 border-blue-700 dark:border-blue-500 -bottom-1.5 {index === 0 ? 'left-[20%]' : 'left-1/2'} -ml-1.5"
+                  class="absolute w-3 h-3 bg-card rotate-45 border-r-2 border-b-2 border-brand-primary -bottom-1.5 {index === 0 ? 'left-[20%]' : 'left-1/2'} -ml-1.5"
                 ></div>
 
                 <button
-                  class="absolute top-2 right-2 p-1 rounded-full transition-colors text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
+                  class="absolute top-2 right-2 p-1 rounded-full transition-colors text-muted-foreground hover:bg-bg-secondary"
                   onclick={closePerformer}
                   aria-label={labels.closePopover}
                 >
@@ -135,14 +135,14 @@
                 </p>
 
                 {#if profile?.instagram || profile?.twitter}
-                  <div class="flex gap-2 items-center {typography.smMuted} mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
+                  <div class="flex gap-2 items-center {typography.smMuted} mt-3 pt-3 border-t border-border">
                     <span>{typeof labels.followLabel === 'function' ? labels.followLabel(firstName) : labels.followLabel}</span>
                     {#if profile?.instagram}
                       <a
                         href={profile.instagram}
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="text-blue-700 dark:text-blue-500 hover:opacity-70 transition-opacity"
+                        class="text-brand-primary hover:opacity-70 transition-opacity"
                         aria-label={labels.instagramProfile}
                       >
                         <LogoInstagram size={20} />
@@ -153,7 +153,7 @@
                         href={profile.twitter}
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="text-blue-700 dark:text-blue-500 hover:opacity-70 transition-opacity"
+                        class="text-brand-primary hover:opacity-70 transition-opacity"
                         aria-label={labels.twitterProfile}
                       >
                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
@@ -169,13 +169,13 @@
             <!-- svelte-ignore a11y_click_events_have_key_events -->
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
-              class="rounded-lg flex flex-col gap-2 p-2 items-center w-24 cursor-pointer transition-all bg-white dark:bg-gray-800 border hover:shadow {activePerformer === performer.ID ? 'border-blue-700 dark:border-blue-500 shadow' : 'border-gray-200 dark:border-gray-600 hover:border-blue-700 dark:hover:border-blue-500'}"
+              class="rounded-lg flex flex-col gap-2 p-2 items-center w-24 cursor-pointer transition-all bg-card border hover:shadow {activePerformer === performer.ID ? 'border-brand-primary shadow' : 'border-border hover:border-brand-primary'}"
               onclick={() => togglePerformer(performer.ID)}
             >
               <img
                 src={performer.shouldBeHidden ? '' : profile?.profileImage ? getImageUrl(profile.profileImage) : ''}
                 alt={displayName || labels.performerAlt}
-                class="size-16 rounded object-cover {!profile?.profileImage || performer.shouldBeHidden ? 'bg-gray-50 dark:bg-gray-700' : ''}"
+                class="size-16 rounded object-cover {!profile?.profileImage || performer.shouldBeHidden ? 'bg-bg-secondary' : ''}"
               />
               <p class="{typography.xs} text-center leading-tight line-clamp-2">
                 {#if !performer.shouldBeHidden}

package/dist/calendar/Calendar/MiniMonthCalendar.spec.js

@@ -214,7 +214,7 @@ describe('MiniMonthCalendar Component', () => {
       });
 
       // Check for event indicator dots
-      const dots = container.querySelectorAll('.bg-blue-600, .bg-blue-500');
+      const dots = container.querySelectorAll('.bg-brand-primary, .bg-brand-primary');
       expect(dots.length).toBeGreaterThan(0);
     });
 
@@ -226,7 +226,7 @@ describe('MiniMonthCalendar Component', () => {
         }
       });
 
-      const dots = container.querySelectorAll('.bg-blue-600, .bg-blue-500');
+      const dots = container.querySelectorAll('.bg-brand-primary, .bg-brand-primary');
       // Should show up to 3 dots per day
       expect(dots.length).toBeGreaterThan(0);
     });
@@ -429,7 +429,7 @@ describe('MiniMonthCalendar Component', () => {
       });
 
       // Check for green checkmark
-      const checkmark = container.querySelector('.text-green-600');
+      const checkmark = container.querySelector('.text-accent-success');
       expect(checkmark).toBeInTheDocument();
     });
 
@@ -442,7 +442,7 @@ describe('MiniMonthCalendar Component', () => {
       });
 
       // Should not show spinner for display variant
-      expect(container.querySelector('.text-green-600')).not.toBeInTheDocument();
+      expect(container.querySelector('.text-accent-success')).not.toBeInTheDocument();
     });
   });
 
@@ -591,14 +591,14 @@ describe('MiniMonthCalendar Component', () => {
   describe('preview days', () => {
     it('shows previous month preview days by default', () => {
       const { container } = render(MiniMonthCalendar);
-      const previewDays = container.querySelectorAll('.text-gray-300, .dark\\:text-gray-600');
+      const previewDays = container.querySelectorAll('.text-muted-foreground, .dark\\:text-text-secondary');
       // March 2024 starts on a Friday, so should show some preview days
       expect(previewDays.length).toBeGreaterThan(0);
     });
 
     it('shows next month preview days by default', () => {
       const { container } = render(MiniMonthCalendar);
-      const previewDays = container.querySelectorAll('.text-gray-300, .dark\\:text-gray-600');
+      const previewDays = container.querySelectorAll('.text-muted-foreground, .dark\\:text-text-secondary');
       expect(previewDays.length).toBeGreaterThan(0);
     });
 
@@ -937,7 +937,7 @@ describe('MiniMonthCalendar Component', () => {
         cell.getAttribute('aria-selected') === 'true'
       );
 
-      expect(selectedCell?.className).toContain('bg-blue-700');
+      expect(selectedCell?.className).toContain('bg-brand-primary');
     });
 
     it('applies past date style for availability variant', () => {
@@ -968,7 +968,8 @@ describe('MiniMonthCalendar Component', () => {
       const eventCell = cells.find(cell => cell.textContent.includes('15'));
 
       if (eventCell) {
-        expect(eventCell.className).toContain('bg-blue-');
+        // Display variant uses bg-status-info-bg on mobile for event cells
+        expect(eventCell.className).toContain('bg-status-info-bg');
       }
     });
 

package/dist/calendar/Calendar/MiniMonthCalendar.svelte

@@ -655,7 +655,7 @@
             {#if saveStatus === 'saving'}
               <Spinner size="sm" color="secondary" />
             {:else if saveStatus === 'saved'}
-              <span class="flex items-center justify-center text-green-600">
+              <span class="flex items-center justify-center text-accent-success">
                 <CheckCircleSolid class="w-5 h-5" />
               </span>
             {/if}
@@ -665,10 +665,9 @@
 
       <div class="flex items-center gap-2">
         <button
-          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-muted-foreground cursor-pointer select-none transition-all duration-100 ease-out hover:bg-muted hover:text-text-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
           class:scale-90={prevPressed}
-          class:bg-gray-100={prevPressed}
-          class:dark:bg-gray-700={prevPressed}
+          class:bg-muted={prevPressed}
           onclick={goToPrevMonth}
           ontouchstart={() => prevPressed = true}
           ontouchend={() => prevPressed = false}
@@ -684,9 +683,9 @@
 
         {#if showTodayButton}
           <button
-            class="text-sm font-medium px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent text-gray-900 dark:text-white cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed"
+            class="text-sm font-medium px-3 py-1 border border-stroke-primary rounded-lg bg-transparent text-text-primary cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-brand-primary hover:text-white hover:border-brand-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed"
             class:scale-95={todayPressed}
-            class:bg-blue-700={todayPressed}
+            class:bg-brand-primary={todayPressed}
             class:text-white={todayPressed}
             onclick={goToToday}
             ontouchstart={() => todayPressed = true}
@@ -703,10 +702,9 @@
         {/if}
 
         <button
-          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
+          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-muted-foreground cursor-pointer select-none transition-all duration-100 ease-out hover:bg-muted hover:text-text-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2"
           class:scale-90={nextPressed}
-          class:bg-gray-100={nextPressed}
-          class:dark:bg-gray-700={nextPressed}
+          class:bg-muted={nextPressed}
           onclick={goToNextMonth}
           ontouchstart={() => nextPressed = true}
           ontouchend={() => nextPressed = false}
@@ -725,13 +723,13 @@
   <div class="relative overflow-hidden">
     <div
       bind:this={calendarGridElement}
-      class="grid grid-cols-7 gap-0 bg-white dark:bg-gray-800 select-none min-h-[356px] sm:min-h-[388px] md:min-h-[448px] lg:min-h-[508px]"
+      class="grid grid-cols-7 gap-0 bg-card select-none min-h-[356px] sm:min-h-[388px] md:min-h-[448px] lg:min-h-[508px]"
       role="grid"
       aria-label="{MONTH_NAMES[currentMonth]} {currentYear}"
     >
       {#each DAY_NAMES as dayName, i}
         <div
-          class="flex items-end justify-center pb-1 {typography.xsMuted} overflow-hidden leading-none sm:pb-2 sm:pt-1 sm:justify-end sm:pr-2 sm:text-lg sm:text-gray-900 sm:dark:text-white sm:border-b sm:border-gray-200 sm:dark:border-gray-700"
+          class="flex items-end justify-center pb-1 {typography.xsMuted} overflow-hidden leading-none sm:pb-2 sm:pt-1 sm:justify-end sm:pr-2 sm:text-lg sm:text-text-primary sm: sm:border-b sm:border-border sm:"
           role="columnheader"
           aria-label={labels.fullDayNames[i]}
         >
@@ -741,8 +739,8 @@
       {/each}
 
       {#each prevMonthPreviewDays as previewDay}
-        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent border-b border-gray-200 dark:border-gray-700 sm:border-b-0 sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 last:sm:border-r" role="gridcell" aria-disabled="true">
-          <span class="{typography.sm} text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
+        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent border-b border-border sm:border-b-0 sm:p-2 sm:border-t sm:border-l sm:border-border sm: last:sm:border-r" role="gridcell" aria-disabled="true">
+          <span class="{typography.sm} text-muted-foreground w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
         </div>
       {/each}
 
@@ -750,13 +748,12 @@
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div
           class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] select-none
-            border-b border-gray-200 dark:border-gray-700
-            sm:border-b-0 sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700
-            {day.isPast && variant === 'availability' ? 'bg-gray-100 dark:bg-gray-700 cursor-default' : ''}
-            {day.isPast && day.isSelected && variant === 'availability' ? 'bg-blue-100 dark:bg-blue-900/30 cursor-default' : ''}
-            {day.isSelected && !day.isPast && variant === 'availability' ? 'bg-blue-700 dark:bg-blue-600' : ''}
+            border-b border-border sm:border-b-0 sm:p-2 sm:border-t sm:border-l sm:border-border
+            {day.isPast && variant === 'availability' ? 'bg-muted cursor-default' : ''}
+            {day.isPast && day.isSelected && variant === 'availability' ? 'bg-status-info-bg cursor-default' : ''}
+            {day.isSelected && !day.isPast && variant === 'availability' ? 'bg-brand-primary' : ''}
             {!readOnly && (variant === 'availability' ? !day.isPast : day.hasEvents) ? 'cursor-pointer' : ''}
-            {variant !== 'availability' && day.hasEvents ? 'bg-blue-50 dark:bg-blue-900/20 sm:bg-transparent sm:dark:bg-transparent' : ''}"
+            {variant !== 'availability' && day.hasEvents ? 'bg-status-info-bg sm:bg-transparent sm:' : ''}"
           class:last:border-r={true}
           role="gridcell"
           aria-label={getDayAriaLabel(day)}
@@ -768,12 +765,12 @@
           onkeydown={(e) => handleDayKeydown(e, day)}
         >
           <span class="{typography.sm} w-full text-center transition-transform duration-100 ease-out sm:text-lg sm:font-normal sm:text-right sm:mb-2
-            {day.isPast ? 'text-gray-400 dark:text-gray-500' : ''}
+            {day.isPast ? 'text-muted-foreground' : ''}
             {day.isSelected && !day.isPast && variant === 'availability' ? 'text-white font-semibold' : ''}">{day.day}</span>
           {#if variant !== 'availability' && day.hasEvents}
             <div class="flex gap-0.5 mt-0.5">
               {#each day.events.slice(0, 3) as _}
-                <span class="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-500 transition-transform duration-150 ease-out hover:scale-125"></span>
+                <span class="w-1.5 h-1.5 rounded-full bg-brand-primary transition-transform duration-150 ease-out hover:scale-125"></span>
               {/each}
             </div>
           {/if}
@@ -781,8 +778,8 @@
       {/each}
 
       {#each nextMonthPreviewDays as previewDay}
-        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent border-b border-gray-200 dark:border-gray-700 sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 last:sm:border-r" role="gridcell" aria-disabled="true">
-          <span class="{typography.sm} text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
+        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent border-b border-border sm:p-2 sm:border-t sm:border-l sm:border-border sm: last:sm:border-r" role="gridcell" aria-disabled="true">
+          <span class="{typography.sm} text-muted-foreground w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
         </div>
       {/each}
     </div>
@@ -791,11 +788,11 @@
   {#if showLegend && variant === 'availability'}
     <div class="flex items-center justify-center gap-6 pt-4">
       <div class="flex items-center gap-2">
-        <span class="w-5 h-5 rounded bg-blue-700 dark:bg-blue-600 border border-blue-700 dark:border-blue-600"></span>
+        <span class="w-5 h-5 rounded bg-brand-primary border border-brand-primary"></span>
         <span class="{typography.sm}">{labels.legendAvailable}</span>
       </div>
       <div class="flex items-center gap-2">
-        <span class="w-5 h-5 rounded bg-gray-50 dark:bg-gray-700 border-2 border-gray-400 dark:border-gray-500"></span>
+        <span class="w-5 h-5 rounded bg-bg-secondary border-2 border-stroke-primary"></span>
         <span class="{typography.sm}">{labels.legendUnavailable}</span>
       </div>
     </div>

package/dist/calendar/Calendar/MiniMonthCalendar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MiniMonthCalendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/Calendar/MiniMonthCalendar.svelte.js"],"names":[],"mappings":";;;;;AAuuBA;cApsB+B,MAAM;oBAAkB,GAAG,EAAE;aAAW,GAAG,EAAE;iBAAe,MAAM;iBAAe,OAAO;qBAAmB,OAAO;sBAAoB,OAAO;eAAa,OAAO;yBAAuB,OAAO;4BAA0B,OAAO;kBAAgB,GAAG;gBAAc,GAAG;mBAAiB,GAAG;aAAW,MAAM;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;wBAosBtS;wBApsB7C;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAC;IAAC,aAAa,EAAE,GAAG,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}
+{"version":3,"file":"MiniMonthCalendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/Calendar/MiniMonthCalendar.svelte.js"],"names":[],"mappings":";;;;;AAsuBA;cAnsB+B,MAAM;oBAAkB,GAAG,EAAE;aAAW,GAAG,EAAE;iBAAe,MAAM;iBAAe,OAAO;qBAAmB,OAAO;sBAAoB,OAAO;eAAa,OAAO;yBAAuB,OAAO;4BAA0B,OAAO;kBAAgB,GAAG;gBAAc,GAAG;mBAAiB,GAAG;aAAW,MAAM;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;wBAmsBtS;wBAnsB7C;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAC;IAAC,aAAa,EAAE,GAAG,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}

package/dist/calendar/FAQs/FAQs.spec.js

@@ -185,8 +185,8 @@ describe('FAQs Component', () => {
 
       await fireEvent.click(button);
 
-      expect(button.className).toContain('text-gray-900');
-      expect(button.className).toContain('bg-gray-100');
+      expect(button.className).toContain('text-text-primary');
+      expect(button.className).toContain('bg-muted');
     });
 
     it('chevron rotates when expanded', async () => {
@@ -203,7 +203,7 @@ describe('FAQs Component', () => {
 
     it('accordion container has border', () => {
       const { container } = render(FAQs, { props: { faqs, accordion: true } });
-      const accordionDiv = container.querySelector('.border.border-gray-200');
+      const accordionDiv = container.querySelector('.border.border-border');
       expect(accordionDiv).toBeInTheDocument();
     });
 
@@ -220,19 +220,19 @@ describe('FAQs Component', () => {
     it('accordion has dark mode border', () => {
       const { container } = render(FAQs, { props: { faqs, accordion: true } });
       const accordionDiv = container.querySelector('.border');
-      expect(accordionDiv.className).toContain('dark:border-gray-700');
+      expect(accordionDiv.className).toContain('');
     });
 
     it('accordion buttons have dark mode hover', () => {
       render(FAQs, { props: { faqs, accordion: true } });
       const button = screen.getByRole('button');
-      expect(button.className).toContain('dark:hover:bg-gray-800');
+      expect(button.className).toContain('');
     });
 
     it('accordion buttons have dark mode focus ring', () => {
       render(FAQs, { props: { faqs, accordion: true } });
       const button = screen.getByRole('button');
-      expect(button.className).toContain('dark:focus:ring-gray-800');
+      expect(button.className).toContain('');
     });
   });
 });

package/dist/calendar/FAQs/FAQs.svelte

@@ -40,16 +40,16 @@
 
   {#if items.length}
     {#if accordion}
-      <div class="border border-gray-200 rounded-lg dark:border-gray-700">
+      <div class="border border-border rounded-lg">
         {#each items as { question, answer }, index}
           <div>
             <h3>
               <button
                 type="button"
-                class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border-b border-gray-200 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-800 gap-3
+                class="flex items-center justify-between w-full p-5 font-medium text-left text-muted-foreground border-b border-border hover:bg-muted focus:ring-4 focus:ring-border gap-3
                   {index === 0 ? 'rounded-t-lg' : ''}
                   {index === items.length - 1 && openIndex !== index ? 'border-b-0 rounded-b-lg' : ''}
-                  {openIndex === index ? 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:text-white' : ''}"
+                  {openIndex === index ? 'text-text-primary bg-muted' : ''}"
                 onclick={() => toggleAccordion(index)}
                 aria-expanded={openIndex === index}
                 aria-controls="accordion-body-{index}"
@@ -63,7 +63,7 @@
               class="{openIndex === index ? '' : 'hidden'}"
               aria-labelledby="accordion-heading-{index}"
             >
-              <div class="p-5 border-b border-gray-200 dark:border-gray-700 {index === items.length - 1 ? 'border-b-0 rounded-b-lg' : ''}">
+              <div class="p-5 border-b border-border {index === items.length - 1 ? 'border-b-0 rounded-b-lg' : ''}">
                 <p class="{typography.smMuted} leading-relaxed">{answer}</p>
               </div>
             </div>

package/dist/calendar/MonthSwitcher/MonthSwitcher.svelte

@@ -83,12 +83,10 @@
   </h2>
   <div class="flex items-center gap-2">
     <button
-      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-muted-foreground cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-muted hover:text-text-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
       class:scale-90={prevPressed}
-      class:bg-gray-100={prevPressed}
-      class:dark:bg-gray-700={prevPressed}
-      class:text-gray-900={prevPressed}
-      class:dark:text-white={prevPressed}
+      class:bg-muted={prevPressed}
+      class:text-text-primary={prevPressed}
       onclick={handlePrevClick}
       ontouchstart={() => prevPressed = true}
       ontouchend={() => prevPressed = false}
@@ -102,9 +100,9 @@
       <ChevronLeftOutline class="w-5 h-5" />
     </button>
     <button
-      class="{`${typography.label} px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:text-gray-500 dark:disabled:text-gray-400`}"
+      class="{`${typography.label} px-3 py-1 border border-stroke-primary rounded-lg bg-transparent cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-brand-primary hover:text-white hover:border-brand-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:text-muted-foreground:text-muted-foreground`}"
       class:scale-95={todayPressed}
-      class:bg-blue-700={todayPressed}
+      class:bg-brand-primary={todayPressed}
       class:text-white={todayPressed}
       onclick={handleTodayClick}
       ontouchstart={() => todayPressed = true}
@@ -119,12 +117,10 @@
       {labels.today}
     </button>
     <button
-      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
+      class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-muted-foreground cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-muted hover:text-text-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2"
       class:scale-90={nextPressed}
-      class:bg-gray-100={nextPressed}
-      class:dark:bg-gray-700={nextPressed}
-      class:text-gray-900={nextPressed}
-      class:dark:text-white={nextPressed}
+      class:bg-muted={nextPressed}
+      class:text-text-primary={nextPressed}
       onclick={handleNextClick}
       ontouchstart={() => nextPressed = true}
       ontouchend={() => nextPressed = false}