@getmicdrop/svelte-components 5.21.0 → 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

@@ -1,191 +1,191 @@
-<script>
-  import { CloseOutline, LogoInstagram } from '../../primitives/Icons';
-  import { typography } from '../../tokens/typography';
-
-  /**
-   * Default labels for user-visible strings in AboutShow.
-   * Consumers can override via the `labels` prop.
-   */
-  const defaultLabels = {
-    title: 'About the Show',
-    followLabel: (name) => `Follow ${name}:`,
-    showLess: 'Show less',
-    showMore: 'Show more',
-    closePopover: 'Close',
-    instagramProfile: 'Instagram profile',
-    twitterProfile: 'Twitter profile',
-    performerAlt: 'Performer',
-  };
-
-  let {
-    performers = [],
-    ShowImage = '',
-    description = '',
-    showTitle = true,
-    title = undefined,
-    showReadMore = true,
-    getImageUrl = (url) => url,
-    /** @type {Partial<typeof defaultLabels>} Override any user-visible string */
-    labels: userLabels = {},
-  } = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let activePerformer = $state(null);
-  let characterLimit = 1500;
-  let showFullDescription = $state(false);
-
-  let validPerformers = $derived(performers.filter(performer => {
-    const isConfirmed = performer.acceptedState === 2;
-    const isNotHidden = !performer.shouldBeHidden;
-    const profile = performer.RosterPerformer?.User?.performerProfile;
-    const hasName = profile?.firstName || profile?.lastName || profile?.stageName;
-    return isConfirmed && isNotHidden && hasName;
-  }));
-
-  function togglePerformer(id) {
-    if (activePerformer === id) {
-      activePerformer = null;
-    } else {
-      activePerformer = id;
-    }
-  }
-
-  function closePerformer() {
-    activePerformer = null;
-  }
-
-  function toggleDescription() {
-    showFullDescription = !showFullDescription;
-  }
-</script>
-
-<div class="flex flex-col gap-3">
-  {#if showTitle}
-    <h2 class="{typography.h2} text-xl">{title ?? labels.title}</h2>
-  {/if}
-
-  {#if ShowImage && description}
-    <div>
-      <img src={ShowImage} alt="" class="rounded-lg object-contain w-full bg-gray-50 dark:bg-gray-800" />
-    </div>
-  {/if}
-
-  {#if description}
-    {#if showFullDescription || description.length <= characterLimit || !showReadMore}
-      <p class={`${typography.sm} leading-relaxed whitespace-pre-line`}>{description}</p>
-      {#if showReadMore && description.length > characterLimit}
-        <button
-          onclick={toggleDescription}
-          class={`${typography.label} text-left hover:underline text-blue-700 dark:text-blue-500`}
-        >
-          {labels.showLess}
-        </button>
-      {/if}
-    {:else}
-      <p class={`${typography.sm} leading-relaxed whitespace-pre-line`}>
-        {description.slice(0, characterLimit)}...
-      </p>
-      <button
-        onclick={toggleDescription}
-        class={`${typography.label} text-left hover:underline text-blue-700 dark:text-blue-500`}
-      >
-        {labels.showMore}
-      </button>
-    {/if}
-  {/if}
-
-  {#if validPerformers.length > 0}
-    <div class="py-2">
-      {#if activePerformer !== null}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div class="fixed inset-0 z-40" onclick={closePerformer}></div>
-      {/if}
-
-      <div class="flex flex-wrap justify-start gap-4">
-        {#each validPerformers as performer, index}
-          {@const profile = performer.RosterPerformer?.User?.performerProfile}
-          {@const displayName = profile?.useStageName && profile?.stageName
-            ? profile.stageName
-            : `${profile?.firstName || ''} ${profile?.lastName || ''}`.trim()}
-          {@const firstName = profile?.firstName || displayName.split(' ')[0] || displayName}
-          <div class="relative">
-            {#if activePerformer === performer.ID && !performer.shouldBeHidden}
-              <!-- 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'}"
-                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"
-                ></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"
-                  onclick={closePerformer}
-                  aria-label={labels.closePopover}
-                >
-                  <CloseOutline class="w-5 h-5" />
-                </button>
-
-                <p class="{typography.sm} leading-relaxed pr-6">
-                  {profile?.biography || ''}
-                </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">
-                    <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"
-                        aria-label={labels.instagramProfile}
-                      >
-                        <LogoInstagram size={20} />
-                      </a>
-                    {/if}
-                    {#if profile?.twitter}
-                      <a
-                        href={profile.twitter}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="text-blue-700 dark:text-blue-500 hover:opacity-70 transition-opacity"
-                        aria-label={labels.twitterProfile}
-                      >
-                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                          <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
-                        </svg>
-                      </a>
-                    {/if}
-                  </div>
-                {/if}
-              </div>
-            {/if}
-
-            <!-- 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'}"
-              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' : ''}"
-              />
-              <p class="{typography.xs} text-center leading-tight line-clamp-2">
-                {#if !performer.shouldBeHidden}
-                  {displayName}
-                {/if}
-              </p>
-            </div>
-          </div>
-        {/each}
-      </div>
-    </div>
-  {/if}
-</div>
+<script>
+  import { CloseOutline, LogoInstagram } from '../../primitives/Icons';
+  import { typography } from '../../tokens/typography';
+
+  /**
+   * Default labels for user-visible strings in AboutShow.
+   * Consumers can override via the `labels` prop.
+   */
+  const defaultLabels = {
+    title: 'About the Show',
+    followLabel: (name) => `Follow ${name}:`,
+    showLess: 'Show less',
+    showMore: 'Show more',
+    closePopover: 'Close',
+    instagramProfile: 'Instagram profile',
+    twitterProfile: 'Twitter profile',
+    performerAlt: 'Performer',
+  };
+
+  let {
+    performers = [],
+    ShowImage = '',
+    description = '',
+    showTitle = true,
+    title = undefined,
+    showReadMore = true,
+    getImageUrl = (url) => url,
+    /** @type {Partial<typeof defaultLabels>} Override any user-visible string */
+    labels: userLabels = {},
+  } = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let activePerformer = $state(null);
+  let characterLimit = 1500;
+  let showFullDescription = $state(false);
+
+  let validPerformers = $derived(performers.filter(performer => {
+    const isConfirmed = performer.acceptedState === 2;
+    const isNotHidden = !performer.shouldBeHidden;
+    const profile = performer.RosterPerformer?.User?.performerProfile;
+    const hasName = profile?.firstName || profile?.lastName || profile?.stageName;
+    return isConfirmed && isNotHidden && hasName;
+  }));
+
+  function togglePerformer(id) {
+    if (activePerformer === id) {
+      activePerformer = null;
+    } else {
+      activePerformer = id;
+    }
+  }
+
+  function closePerformer() {
+    activePerformer = null;
+  }
+
+  function toggleDescription() {
+    showFullDescription = !showFullDescription;
+  }
+</script>
+
+<div class="flex flex-col gap-3">
+  {#if showTitle}
+    <h2 class="{typography.h2} text-xl">{title ?? labels.title}</h2>
+  {/if}
+
+  {#if ShowImage && description}
+    <div>
+      <img src={ShowImage} alt="" class="rounded-lg object-contain w-full bg-bg-secondary" />
+    </div>
+  {/if}
+
+  {#if description}
+    {#if showFullDescription || description.length <= characterLimit || !showReadMore}
+      <p class={`${typography.sm} leading-relaxed whitespace-pre-line`}>{description}</p>
+      {#if showReadMore && description.length > characterLimit}
+        <button
+          onclick={toggleDescription}
+          class={`${typography.label} text-left hover:underline text-brand-primary`}
+        >
+          {labels.showLess}
+        </button>
+      {/if}
+    {:else}
+      <p class={`${typography.sm} leading-relaxed whitespace-pre-line`}>
+        {description.slice(0, characterLimit)}...
+      </p>
+      <button
+        onclick={toggleDescription}
+        class={`${typography.label} text-left hover:underline text-brand-primary`}
+      >
+        {labels.showMore}
+      </button>
+    {/if}
+  {/if}
+
+  {#if validPerformers.length > 0}
+    <div class="py-2">
+      {#if activePerformer !== null}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="fixed inset-0 z-40" onclick={closePerformer}></div>
+      {/if}
+
+      <div class="flex flex-wrap justify-start gap-4">
+        {#each validPerformers as performer, index}
+          {@const profile = performer.RosterPerformer?.User?.performerProfile}
+          {@const displayName = profile?.useStageName && profile?.stageName
+            ? profile.stageName
+            : `${profile?.firstName || ''} ${profile?.lastName || ''}`.trim()}
+          {@const firstName = profile?.firstName || displayName.split(' ')[0] || displayName}
+          <div class="relative">
+            {#if activePerformer === performer.ID && !performer.shouldBeHidden}
+              <!-- 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-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-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-muted-foreground hover:bg-bg-secondary"
+                  onclick={closePerformer}
+                  aria-label={labels.closePopover}
+                >
+                  <CloseOutline class="w-5 h-5" />
+                </button>
+
+                <p class="{typography.sm} leading-relaxed pr-6">
+                  {profile?.biography || ''}
+                </p>
+
+                {#if profile?.instagram || profile?.twitter}
+                  <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-brand-primary hover:opacity-70 transition-opacity"
+                        aria-label={labels.instagramProfile}
+                      >
+                        <LogoInstagram size={20} />
+                      </a>
+                    {/if}
+                    {#if profile?.twitter}
+                      <a
+                        href={profile.twitter}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        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">
+                          <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+                        </svg>
+                      </a>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
+            {/if}
+
+            <!-- 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-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-bg-secondary' : ''}"
+              />
+              <p class="{typography.xs} text-center leading-tight line-clamp-2">
+                {#if !performer.shouldBeHidden}
+                  {displayName}
+                {/if}
+              </p>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>

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');
       }
     });