@getmicdrop/svelte-components 5.21.0 → 5.21.2

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

@@ -1,164 +1,164 @@
-<script>
-  import { typography } from '../../tokens/typography';
-  import { formatEventDate as formatDateTz, formatEventTime } from '../../datetime/format';
-
-  const defaultLabels = {
-    onSale: 'On Sale',
-    pressEnterToViewDetails: 'Press Enter to view details.',
-  };
-
-  let {
-    events = [],
-    view = "row",
-    placeholderImage = null,
-    onEventClick,
-    locale = 'en-US',
-    labels: userLabels = {},
-  } = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let _isSmallScreen = $state(false);
-
-  const DEFAULT_PLACEHOLDER = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect fill='%23e5e7eb' width='100' height='100'/%3E%3Cpath d='M50 25c-8.3 0-15 6.7-15 15v5c0 8.3 6.7 15 15 15s15-6.7 15-15v-5c0-8.3-6.7-15-15-15zm0 45c-13.8 0-25 5.6-25 12.5V90h50v-7.5c0-6.9-11.2-12.5-25-12.5z' fill='%239ca3af'/%3E%3C/svg%3E";
-
-  let placeholder = $derived(placeholderImage || DEFAULT_PLACEHOLDER);
-
-  function handleResize() {
-    _isSmallScreen = window.innerWidth < 768;
-  }
-
-  $effect(() => {
-    _isSmallScreen = window.innerWidth < 768;
-    window.addEventListener("resize", handleResize);
-    return () => {
-      if (typeof window !== 'undefined') {
-        window.removeEventListener("resize", handleResize);
-      }
-    };
-  });
-
-  function handleEventClick(event) {
-    onEventClick?.(event);
-  }
-
-  function handleKeydown(e, event) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleEventClick(event);
-    }
-  }
-
-  function getStatusBadgeClass(status) {
-    switch (status) {
-      case 'Sold out':
-        return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
-      case 'Selling fast':
-        return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
-      case 'Almost sold out':
-        return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
-      default:
-        return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
-    }
-  }
-
-  function shouldShowBadge(status) {
-    return status === 'Sold out' || status === 'Selling fast' || status === 'Almost sold out';
-  }
-
-  function formatEventDate(event) {
-    // Prefer timezone-aware formatting via startDateTime + timeZone
-    if (event.startDateTime && event.timeZone) {
-      return formatDateTz(event.startDateTime, event.timeZone, { includeYear: false });
-    }
-    // Fallback for legacy event.date (YYYY-MM-DD)
-    if (!event.date) return '';
-    const [year, month, day] = event.date.split('-').map(Number);
-    const date = new Date(year, month - 1, day);
-    return date.toLocaleDateString(locale, { weekday: "short", month: "short", day: "numeric" });
-  }
-
-  function formatTime(event) {
-    if (event.startDateTime && event.timeZone) {
-      return formatEventTime(event.startDateTime, event.timeZone);
-    }
-    // Fallback for legacy event.timeline
-    if (event.timeline) return event.timeline.split("-")[0].trim();
-    return '';
-  }
-</script>
-
-{#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'
-      ? '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)}
-    onkeydown={(e) => handleKeydown(e, event)}
-    tabindex="0"
-    role="button"
-    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'
-        ? 'w-full aspect-[4/3] rounded-t-lg'
-        : 'w-24 h-24 sm:w-40 sm:h-32 rounded-lg shrink-0'}"
-    >
-      <img
-        src={event.image || placeholder}
-        alt={event.name}
-        class="object-contain w-full h-full"
-        loading="lazy"
-      />
-    </div>
-
-    <div
-      class="flex flex-col {view === 'col' ? 'p-3 gap-1' : 'gap-1.5 sm:gap-2 justify-center'}"
-    >
-      {#if view === "col" && event.status && shouldShowBadge(event.status)}
-        <span
-          class="inline-flex items-center w-fit px-2 py-0.5 text-xs font-semibold rounded absolute top-2 left-2 {getStatusBadgeClass(event.status)}"
-        >
-          {event.status}
-        </span>
-      {/if}
-
-      {#if view === "row" && event.status && shouldShowBadge(event.status)}
-        <span
-          class="inline-flex items-center w-fit px-2 py-0.5 text-xs font-semibold rounded {getStatusBadgeClass(event.status)}"
-        >
-          {event.status}
-        </span>
-      {/if}
-
-      <h4 class="{typography.h4} leading-tight line-clamp-2">
-        {event.name}
-      </h4>
-
-      <div
-        class="{typography.textMuted} {view === 'col' ? 'text-xs' : 'text-xs sm:text-sm'}"
-      >
-        <span class="font-medium">
-          {formatEventDate(event)}
-          {#if event.startDateTime || event.timeline}
-            <span class="text-gray-500 dark:text-gray-500">&#8226;</span>
-            {formatTime(event)}
-          {/if}
-        </span>
-      </div>
-
-      {#if view === "row" && event.description}
-        <p class="{typography.xsMuted} text-xs sm:text-sm line-clamp-2 mt-1">
-          {event.description}
-        </p>
-      {/if}
-
-      {#if event.doorsTimeline && view === "row"}
-        <div class="{typography.xsMuted} text-xs">
-          {event.doorsTimeline}
-        </div>
-      {/if}
-    </div>
-  </article>
-{/each}
+<script>
+  import { typography } from '../../tokens/typography';
+  import { formatEventDate as formatDateTz, formatEventTime } from '../../datetime/format';
+
+  const defaultLabels = {
+    onSale: 'On Sale',
+    pressEnterToViewDetails: 'Press Enter to view details.',
+  };
+
+  let {
+    events = [],
+    view = "row",
+    placeholderImage = null,
+    onEventClick,
+    locale = 'en-US',
+    labels: userLabels = {},
+  } = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let _isSmallScreen = $state(false);
+
+  const DEFAULT_PLACEHOLDER = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect fill='%23e5e7eb' width='100' height='100'/%3E%3Cpath d='M50 25c-8.3 0-15 6.7-15 15v5c0 8.3 6.7 15 15 15s15-6.7 15-15v-5c0-8.3-6.7-15-15-15zm0 45c-13.8 0-25 5.6-25 12.5V90h50v-7.5c0-6.9-11.2-12.5-25-12.5z' fill='%239ca3af'/%3E%3C/svg%3E";
+
+  let placeholder = $derived(placeholderImage || DEFAULT_PLACEHOLDER);
+
+  function handleResize() {
+    _isSmallScreen = window.innerWidth < 768;
+  }
+
+  $effect(() => {
+    _isSmallScreen = window.innerWidth < 768;
+    window.addEventListener("resize", handleResize);
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener("resize", handleResize);
+      }
+    };
+  });
+
+  function handleEventClick(event) {
+    onEventClick?.(event);
+  }
+
+  function handleKeydown(e, event) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleEventClick(event);
+    }
+  }
+
+  function getStatusBadgeClass(status) {
+    switch (status) {
+      case 'Sold out':
+        return 'bg-status-error-bg text-status-error-text';
+      case 'Selling fast':
+        return 'bg-status-warning-bg text-status-warning-text';
+      case 'Almost sold out':
+        return 'bg-status-error-bg text-status-error-text';
+      default:
+        return 'bg-muted text-text-secondary';
+    }
+  }
+
+  function shouldShowBadge(status) {
+    return status === 'Sold out' || status === 'Selling fast' || status === 'Almost sold out';
+  }
+
+  function formatEventDate(event) {
+    // Prefer timezone-aware formatting via startDateTime + timeZone
+    if (event.startDateTime && event.timeZone) {
+      return formatDateTz(event.startDateTime, event.timeZone, { includeYear: false });
+    }
+    // Fallback for legacy event.date (YYYY-MM-DD)
+    if (!event.date) return '';
+    const [year, month, day] = event.date.split('-').map(Number);
+    const date = new Date(year, month - 1, day);
+    return date.toLocaleDateString(locale, { weekday: "short", month: "short", day: "numeric" });
+  }
+
+  function formatTime(event) {
+    if (event.startDateTime && event.timeZone) {
+      return formatEventTime(event.startDateTime, event.timeZone);
+    }
+    // Fallback for legacy event.timeline
+    if (event.timeline) return event.timeline.split("-")[0].trim();
+    return '';
+  }
+</script>
+
+{#each events as event}
+  <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+  <article
+    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)}
+    onkeydown={(e) => handleKeydown(e, event)}
+    tabindex="0"
+    role="button"
+    aria-label={`${event.name}, ${event.status || labels.onSale}, ${formatEventDate(event)}. ${labels.pressEnterToViewDetails}`}
+  >
+    <div
+      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'}"
+    >
+      <img
+        src={event.image || placeholder}
+        alt={event.name}
+        class="object-contain w-full h-full"
+        loading="lazy"
+      />
+    </div>
+
+    <div
+      class="flex flex-col {view === 'col' ? 'p-3 gap-1' : 'gap-1.5 sm:gap-2 justify-center'}"
+    >
+      {#if view === "col" && event.status && shouldShowBadge(event.status)}
+        <span
+          class="inline-flex items-center w-fit px-2 py-0.5 text-xs font-semibold rounded absolute top-2 left-2 {getStatusBadgeClass(event.status)}"
+        >
+          {event.status}
+        </span>
+      {/if}
+
+      {#if view === "row" && event.status && shouldShowBadge(event.status)}
+        <span
+          class="inline-flex items-center w-fit px-2 py-0.5 text-xs font-semibold rounded {getStatusBadgeClass(event.status)}"
+        >
+          {event.status}
+        </span>
+      {/if}
+
+      <h4 class="{typography.h4} leading-tight line-clamp-2">
+        {event.name}
+      </h4>
+
+      <div
+        class="{typography.textMuted} {view === 'col' ? 'text-xs' : 'text-xs sm:text-sm'}"
+      >
+        <span class="font-medium">
+          {formatEventDate(event)}
+          {#if event.startDateTime || event.timeline}
+            <span class="text-muted-foreground">&#8226;</span>
+            {formatTime(event)}
+          {/if}
+        </span>
+      </div>
+
+      {#if view === "row" && event.description}
+        <p class="{typography.xsMuted} text-xs sm:text-sm line-clamp-2 mt-1">
+          {event.description}
+        </p>
+      {/if}
+
+      {#if event.doorsTimeline && view === "row"}
+        <div class="{typography.xsMuted} text-xs">
+          {event.doorsTimeline}
+        </div>
+      {/if}
+    </div>
+  </article>
+{/each}

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