@getmicdrop/svelte-components 5.21.0 → 5.21.1

package/dist/primitives/Skeleton/ImagePlaceholder.spec.js

@@ -87,7 +87,7 @@ describe('ImagePlaceholder ShowText', () => {
   test('showText is false by default', () => {
     const { container } = render(ImagePlaceholder);
     // Count placeholder text bars - should only have the sr-only one
-    const textBars = container.querySelectorAll('.rounded-full.bg-gray-200');
+    const textBars = container.querySelectorAll('.rounded-full.bg-bg-tertiary');
     expect(textBars.length).toBe(0);
   });
 
@@ -103,7 +103,7 @@ describe('ImagePlaceholder Styling', () => {
   test('image container has gray background', () => {
     const { container } = render(ImagePlaceholder);
     const imageContainer = container.querySelector('.flex.items-center.justify-center');
-    expect(imageContainer).toHaveClass('bg-gray-300');
+    expect(imageContainer).toHaveClass('bg-bg-quaternary');
   });
 
   test('image container has rounded corners', () => {

package/dist/primitives/Skeleton/ImagePlaceholder.svelte

@@ -1,68 +1,68 @@
-<script lang="ts">
-  const defaultLabels = {
-    loadingImage: 'Loading image',
-    loading: 'Loading...',
-  };
-
-  interface Props {
-    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    animate?: boolean;
-    showText?: boolean;
-    class?: string;
-    labels?: Partial<typeof defaultLabels>;
-    [key: string]: unknown;
-  }
-
-  let {
-    size = 'md',
-    animate = true,
-    showText = false,
-    class: className = '',
-    labels: userLabels = {},
-    ...restProps
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  const imageSizeClasses = {
-    sm: 'h-32',
-    md: 'h-48',
-    lg: 'h-64',
-    xl: 'h-80',
-    '2xl': 'h-96'
-  };
-
-  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
-  let animateClass = $derived(animate ? 'animate-pulse' : '');
-</script>
-
-<div
-  role="status"
-  class="{animateClass} {className}"
-  aria-label={labels.loadingImage}
-  {...restProps}
->
-  <div class="flex items-center justify-center w-full {imageHeightClass} bg-gray-300 rounded-lg dark:bg-gray-700">
-    <svg
-      class="w-10 h-10 text-gray-200 dark:text-gray-600"
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      viewBox="0 0 20 18"
-    >
-      <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
-    </svg>
-  </div>
-
-  {#if showText}
-    <div class="mt-4">
-      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-lg mb-2.5"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md mb-2.5"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md"></div>
-    </div>
-  {/if}
-
-  <span class="sr-only">{labels.loading}</span>
-</div>
+<script lang="ts">
+  const defaultLabels = {
+    loadingImage: 'Loading image',
+    loading: 'Loading...',
+  };
+
+  interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    animate?: boolean;
+    showText?: boolean;
+    class?: string;
+    labels?: Partial<typeof defaultLabels>;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    animate = true,
+    showText = false,
+    class: className = '',
+    labels: userLabels = {},
+    ...restProps
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  const imageSizeClasses = {
+    sm: 'h-32',
+    md: 'h-48',
+    lg: 'h-64',
+    xl: 'h-80',
+    '2xl': 'h-96'
+  };
+
+  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
+  let animateClass = $derived(animate ? 'animate-pulse' : '');
+</script>
+
+<div
+  role="status"
+  class="{animateClass} {className}"
+  aria-label={labels.loadingImage}
+  {...restProps}
+>
+  <div class="flex items-center justify-center w-full {imageHeightClass} bg-bg-quaternary rounded-lg">
+    <svg
+      class="w-10 h-10 text-text-tertiary"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 20 18"
+    >
+      <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
+    </svg>
+  </div>
+
+  {#if showText}
+    <div class="mt-4">
+      <div class="h-2.5 bg-bg-tertiary rounded-full w-48 mb-4"></div>
+      <div class="h-2 bg-bg-tertiary rounded-full max-w-lg mb-2.5"></div>
+      <div class="h-2 bg-bg-tertiary rounded-full mb-2.5"></div>
+      <div class="h-2 bg-bg-tertiary rounded-full max-w-md mb-2.5"></div>
+      <div class="h-2 bg-bg-tertiary rounded-full max-w-md"></div>
+    </div>
+  {/if}
+
+  <span class="sr-only">{labels.loading}</span>
+</div>

package/dist/primitives/Skeleton/ListPlaceholder.spec.js

@@ -168,14 +168,14 @@ describe('ListPlaceholder Styling', () => {
     const { container } = render(ListPlaceholder);
     const wrapper = container.querySelector('[role="status"]');
     expect(wrapper).toHaveClass('border');
-    expect(wrapper).toHaveClass('border-gray-200');
+    expect(wrapper).toHaveClass('border-border');
   });
 
   test('has dividers between items', () => {
     const { container } = render(ListPlaceholder);
     const wrapper = container.querySelector('[role="status"]');
     expect(wrapper).toHaveClass('divide-y');
-    expect(wrapper).toHaveClass('divide-gray-200');
+    expect(wrapper).toHaveClass('divide-border');
   });
 
   test('has rounded corners', () => {

package/dist/primitives/Skeleton/ListPlaceholder.svelte

@@ -1,85 +1,85 @@
-<script lang="ts">
-  const defaultLabels = {
-    loadingList: 'Loading list',
-    loading: 'Loading...',
-  };
-
-  interface Props {
-    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    items?: number;
-    animate?: boolean;
-    showIcon?: boolean;
-    showAction?: boolean;
-    class?: string;
-    labels?: Partial<typeof defaultLabels>;
-    [key: string]: unknown;
-  }
-
-  let {
-    size = 'md',
-    items = 5,
-    animate = true,
-    showIcon = true,
-    showAction = true,
-    class: className = '',
-    labels: userLabels = {},
-    ...restProps
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  const containerSizeClasses = {
-    sm: 'max-w-xs',
-    md: 'max-w-sm',
-    lg: 'max-w-md',
-    xl: 'max-w-lg',
-    '2xl': 'max-w-xl'
-  };
-
-  const iconSizeClasses = {
-    sm: 'w-8 h-8',
-    md: 'w-10 h-10',
-    lg: 'w-12 h-12',
-    xl: 'w-14 h-14',
-    '2xl': 'w-16 h-16'
-  };
-
-  let containerWidthClass = $derived(containerSizeClasses[size] || containerSizeClasses.md);
-  let iconSizeClass = $derived(iconSizeClasses[size] || iconSizeClasses.md);
-  let animateClass = $derived(animate ? 'animate-pulse' : '');
-</script>
-
-<div
-  role="status"
-  class="{containerWidthClass} p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded-lg shadow dark:divide-gray-700 dark:border-gray-700 {animateClass} {className}"
-  aria-label={labels.loadingList}
-  {...restProps}
->
-  {#each Array(items) as _, i}
-    <div class="flex items-center justify-between {i > 0 ? 'pt-4' : ''}">
-      <div class="flex items-center">
-        {#if showIcon}
-          <svg
-            class="{iconSizeClass} text-gray-200 dark:text-gray-700 me-3"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-          >
-            <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
-          </svg>
-        {/if}
-        <div>
-          <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-          <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-32"></div>
-        </div>
-      </div>
-
-      {#if showAction}
-        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-      {/if}
-    </div>
-  {/each}
-
-  <span class="sr-only">{labels.loading}</span>
-</div>
+<script lang="ts">
+  const defaultLabels = {
+    loadingList: 'Loading list',
+    loading: 'Loading...',
+  };
+
+  interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    items?: number;
+    animate?: boolean;
+    showIcon?: boolean;
+    showAction?: boolean;
+    class?: string;
+    labels?: Partial<typeof defaultLabels>;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    items = 5,
+    animate = true,
+    showIcon = true,
+    showAction = true,
+    class: className = '',
+    labels: userLabels = {},
+    ...restProps
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  const containerSizeClasses = {
+    sm: 'max-w-xs',
+    md: 'max-w-sm',
+    lg: 'max-w-md',
+    xl: 'max-w-lg',
+    '2xl': 'max-w-xl'
+  };
+
+  const iconSizeClasses = {
+    sm: 'w-8 h-8',
+    md: 'w-10 h-10',
+    lg: 'w-12 h-12',
+    xl: 'w-14 h-14',
+    '2xl': 'w-16 h-16'
+  };
+
+  let containerWidthClass = $derived(containerSizeClasses[size] || containerSizeClasses.md);
+  let iconSizeClass = $derived(iconSizeClasses[size] || iconSizeClasses.md);
+  let animateClass = $derived(animate ? 'animate-pulse' : '');
+</script>
+
+<div
+  role="status"
+  class="{containerWidthClass} p-4 space-y-4 border border-border divide-y divide-border rounded-lg shadow {animateClass} {className}"
+  aria-label={labels.loadingList}
+  {...restProps}
+>
+  {#each Array(items) as _, i}
+    <div class="flex items-center justify-between {i > 0 ? 'pt-4' : ''}">
+      <div class="flex items-center">
+        {#if showIcon}
+          <svg
+            class="{iconSizeClass} text-text-tertiary me-3"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
+          </svg>
+        {/if}
+        <div>
+          <div class="h-2.5 bg-bg-quaternary rounded-full w-24 mb-2.5"></div>
+          <div class="h-2 bg-bg-tertiary rounded-full w-32"></div>
+        </div>
+      </div>
+
+      {#if showAction}
+        <div class="h-2.5 bg-bg-quaternary rounded-full w-12"></div>
+      {/if}
+    </div>
+  {/each}
+
+  <span class="sr-only">{labels.loading}</span>
+</div>

package/dist/primitives/Skeleton/Skeleton.spec.js

@@ -35,19 +35,19 @@ describe('Skeleton Component', () => {
 describe('Skeleton Lines', () => {
   test('defaults to 3 lines', () => {
     const { container } = render(Skeleton);
-    const lines = container.querySelectorAll('.rounded-full.bg-gray-200');
+    const lines = container.querySelectorAll('.rounded-full.bg-bg-tertiary');
     expect(lines.length).toBe(3);
   });
 
   test('renders custom number of lines', () => {
     const { container } = render(Skeleton, { props: { lines: 5 } });
-    const lineElements = container.querySelectorAll('.rounded-full.bg-gray-200');
+    const lineElements = container.querySelectorAll('.rounded-full.bg-bg-tertiary');
     expect(lineElements.length).toBe(5);
   });
 
   test('renders 1 line when lines=1', () => {
     const { container } = render(Skeleton, { props: { lines: 1 } });
-    const lineElements = container.querySelectorAll('.rounded-full.bg-gray-200');
+    const lineElements = container.querySelectorAll('.rounded-full.bg-bg-tertiary');
     expect(lineElements.length).toBe(1);
   });
 
@@ -59,19 +59,19 @@ describe('Skeleton Lines', () => {
     });
   });
 
-  test('lines have bg-gray-200 background', () => {
+  test('lines have bg-bg-tertiary background', () => {
     const { container } = render(Skeleton);
     const lines = container.querySelectorAll('[role="status"] > div');
     lines.forEach(line => {
-      expect(line).toHaveClass('bg-gray-200');
+      expect(line).toHaveClass('bg-bg-tertiary');
     });
   });
 
-  test('lines have dark mode background', () => {
+  test('lines have token-based background', () => {
     const { container } = render(Skeleton);
     const lines = container.querySelectorAll('[role="status"] > div');
     lines.forEach(line => {
-      expect(line).toHaveClass('dark:bg-gray-700');
+      expect(line).toHaveClass('bg-bg-tertiary');
     });
   });