@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/recipes/SuperLogin/SuperLogin.svelte

@@ -701,7 +701,7 @@
 
   <div class="w-full flex justify-center px-4">
     <div
-      class="login-card bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden {shake
+      class="login-card bg-card rounded-xl shadow-xl overflow-hidden {shake
         ? 'shake'
         : ''} {isViewTransitioning ? 'transition-height' : ''} {cardVisible ? 'card-visible' : 'card-hidden'}"
       style="height: {contentHeight ? contentHeight + 'px' : 'auto'}"
@@ -710,7 +710,7 @@
         {#if isCheckingEligibility}
           <div class="flex justify-center py-12">
             <div
-              class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"
+              class="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-primary"
             ></div>
           </div>
         {:else if view === "login"}
@@ -729,7 +729,7 @@
                 <h2 class={typography.h1}>
                   {typeof labels.welcomeBackTitle === 'function' ? labels.welcomeBackTitle(rememberedUser.firstName) : labels.welcomeBackTitle}
                 </h2>
-                <Button variant="link" class="text-gray-500 hover:text-blue-600" onclick={handleNotMe}>
+                <Button variant="link" class="text-muted-foreground hover:text-brand-primary" onclick={handleNotMe}>
                   {typeof labels.notYouButton === 'function' ? labels.notYouButton(rememberedUser.firstName) : labels.notYouButton}
                 </Button>
               {:else}
@@ -766,7 +766,7 @@
                   {#if errors.email && showErrors}
                     <div
                       transition:safeSlide={{ duration: 300, easing: cubicOut }}
-                      class="flex items-center gap-1.5 text-red-500"
+                      class="flex items-center gap-1.5 text-accent-danger"
                       role="alert"
                     >
                       <WarningIcon class="shrink-0" />
@@ -807,7 +807,7 @@
                   {#if errors.password && showErrors}
                     <div
                       transition:safeSlide={{ duration: 300, easing: cubicOut }}
-                      class="flex items-center gap-1.5 text-red-500"
+                      class="flex items-center gap-1.5 text-accent-danger"
                       role="alert"
                     >
                       <WarningIcon class="shrink-0" />
@@ -841,11 +841,11 @@
                 <div class="relative">
                   <div class="absolute inset-0 flex items-center">
                     <div
-                      class="w-full border-t border-gray-300 dark:border-gray-600"
+                      class="w-full border-t border-stroke-primary"
                     ></div>
                   </div>
                   <div class="relative flex justify-center text-sm">
-                    <span class={`px-2 bg-white dark:bg-gray-800 ${typography.textMuted}`}
+                    <span class={`px-2 bg-card ${typography.textMuted}`}
                       >{labels.or}</span
                     >
                   </div>
@@ -884,7 +884,7 @@
                   onclick={() => handleAccountSelectInternal(account)}
                 >
                   <div
-                    class="h-10 w-10 rounded-md bg-gray-200 shrink-0 overflow-hidden mr-4"
+                    class="h-10 w-10 rounded-md bg-bg-tertiary shrink-0 overflow-hidden mr-4"
                   >
                     {#if account.performerProfile?.profileImage}
                       <img
@@ -894,7 +894,7 @@
                       />
                     {:else}
                       <div
-                        class="h-full w-full flex items-center justify-center bg-blue-100 text-blue-600 font-medium"
+                        class="h-full w-full flex items-center justify-center bg-status-info-bg text-brand-primary font-medium"
                       >
                         {account.organizationName
                           ? account.organizationName[0].toUpperCase()
@@ -911,7 +911,7 @@
                     </p>
                   </div>
                   <div
-                    class="text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
+                    class="text-muted-foreground group-hover:text-text-secondary transition-colors"
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -930,8 +930,8 @@
               {/each}
             </div>
 
-            <div class="pt-4 border-t border-gray-300 dark:border-gray-600">
-              <Button variant="ghost" size="full" class="text-gray-500 dark:text-gray-400" onclick={handleReturnToSignIn}>
+            <div class="pt-4 border-t border-stroke-primary">
+              <Button variant="ghost" size="full" class="text-muted-foreground" onclick={handleReturnToSignIn}>
                 {labels.loginDifferentEmail}
               </Button>
             </div>
@@ -982,7 +982,7 @@
                       {#if errors.password && showErrors}
                         <div
                           transition:safeSlide={{ duration: 600, easing: cubicOut }}
-                          class="flex items-start gap-1.5 text-red-500"
+                          class="flex items-start gap-1.5 text-accent-danger"
                           role="alert"
                         >
                           <WarningIcon class="shrink-0 mt-1" />
@@ -1012,7 +1012,7 @@
                       href={tosUrl}
                       target="_blank"
                       rel="noopener noreferrer"
-                      class="text-blue-600 hover:underline dark:text-blue-400">{labels.termsOfService}</a
+                      class="text-brand-primary hover:underline">{labels.termsOfService}</a
                     >.
                   </p>
                 </div>
@@ -1052,7 +1052,7 @@
                     {#if errors.email && showErrors}
                       <div
                         transition:safeSlide={{ duration: 300, easing: cubicOut }}
-                        class="flex items-center gap-1.5 text-red-500"
+                        class="flex items-center gap-1.5 text-accent-danger"
                         role="alert"
                       >
                         <WarningIcon class="shrink-0" />
@@ -1116,7 +1116,7 @@
                     {#if errors.email && showErrors}
                       <div
                         transition:safeSlide={{ duration: 300, easing: cubicOut }}
-                        class="flex items-center gap-1.5 text-red-500"
+                        class="flex items-center gap-1.5 text-accent-danger"
                         role="alert"
                       >
                         <WarningIcon class="shrink-0" />
@@ -1133,8 +1133,8 @@
                 <p
                   class="{typography.smMuted} {loginLinkMessage.includes('sent') ||
                   loginLinkMessage.includes('check your email')
-                    ? 'text-green-600 bg-green-50'
-                    : 'text-red-600 bg-red-50'} p-3 rounded-md"
+                    ? 'text-accent-success bg-status-success-bg'
+                    : 'text-accent-danger bg-status-error-bg'} p-3 rounded-md"
                   role="alert"
                 >
                   {loginLinkMessage}
@@ -1208,17 +1208,17 @@
 
 <style>
   .superlogin-container :global(body) {
-    background-color: #f8fafc;
+    background-color: hsl(var(--bg-secondary));
   }
 
   .animated-gradient {
     background: linear-gradient(
       -45deg,
-      #c084fc,
-      #f9a8d4,
-      #93c5fd,
-      #a78bfa,
-      #f0abfc
+      hsl(270 95% 75%),
+      hsl(330 90% 82%),
+      hsl(213 96% 78%),
+      hsl(256 93% 76%),
+      hsl(290 93% 83%)
     );
     background-size: 400% 400%;
     animation: gradientShift 15s ease infinite;

package/dist/recipes/Toaster/Toaster.stories.svelte

@@ -1,62 +1,62 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import { Toaster } from "svelte-sonner";
-  import { showToast } from "../../stores/toaster";
-
-  const { Story } = defineMeta({
-    title: "Components/Toaster",
-  });
-
-  function showSuccessToast() {
-    showToast("Action completed successfully!", "success");
-  }
-
-  function showErrorToast() {
-    showToast("An error occurred. Please try again.", "error");
-  }
-</script>
-
-<Story name="Trigger Success Toast">
-  <div class="p-8">
-    <Toaster
-      position="bottom-right"
-      toastOptions={{
-        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
-        classes: {
-          error: "text-red-600 dark:text-red-400",
-          success: "text-green-600 dark:text-green-400",
-        },
-      }}
-    />
-    <button
-      onclick={showSuccessToast}
-      class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
-    >
-      Show Success Toast
-    </button>
-    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see a success toast notification</p>
-  </div>
-</Story>
-
-<Story name="Trigger Error Toast">
-  <div class="p-8">
-    <Toaster
-      position="bottom-right"
-      toastOptions={{
-        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
-        classes: {
-          error: "text-red-600 dark:text-red-400",
-          success: "text-green-600 dark:text-green-400",
-        },
-      }}
-    />
-    <button
-      onclick={showErrorToast}
-      class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
-    >
-      Show Error Toast
-    </button>
-    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see an error toast notification</p>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import { Toaster } from "svelte-sonner";
+  import { showToast } from "../../stores/toaster";
+
+  const { Story } = defineMeta({
+    title: "Components/Toaster",
+  });
+
+  function showSuccessToast() {
+    showToast("Action completed successfully!", "success");
+  }
+
+  function showErrorToast() {
+    showToast("An error occurred. Please try again.", "error");
+  }
+</script>
+
+<Story name="Trigger Success Toast">
+  <div class="p-8">
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        class: "text-sm bg-card border border-border",
+        classes: {
+          error: "text-accent-danger",
+          success: "text-accent-success",
+        },
+      }}
+    />
+    <button
+      onclick={showSuccessToast}
+      class="px-4 py-2 bg-accent-success text-white rounded-lg hover:bg-accent-success"
+    >
+      Show Success Toast
+    </button>
+    <p class="mt-4 text-sm text-muted-foreground">Click the button to see a success toast notification</p>
+  </div>
+</Story>
+
+<Story name="Trigger Error Toast">
+  <div class="p-8">
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        class: "text-sm bg-card border border-border",
+        classes: {
+          error: "text-accent-danger",
+          success: "text-accent-success",
+        },
+      }}
+    />
+    <button
+      onclick={showErrorToast}
+      class="px-4 py-2 bg-accent-danger text-white rounded-lg hover:bg-accent-danger"
+    >
+      Show Error Toast
+    </button>
+    <p class="mt-4 text-sm text-muted-foreground">Click the button to see an error toast notification</p>
+  </div>
+</Story>

package/dist/recipes/feedback/EmptyState/EmptyState.svelte

@@ -1,75 +1,75 @@
-<script lang="ts">
-  import type { Component, Snippet } from 'svelte';
-  import { typography } from '../../../tokens/typography';
-
-  const defaultLabels = {
-    noResultsFound: 'No results found',
-  };
-
-  interface Props {
-    /** Title text (alias for message) */
-    title?: string;
-    /** Main message to display */
-    message?: string;
-    /** Description text (alias for subtext) */
-    description?: string;
-    /** Secondary descriptive text */
-    subtext?: string;
-    /** Icon component (when iconType='component') */
-    icon?: Component<any> | null;
-    /** Image path (when iconType='image') */
-    imageSrc?: string;
-    /** Type of icon provided */
-    iconType?: 'component' | 'image';
-    /** Size classes for the icon */
-    iconSize?: string;
-    /** Additional CSS classes */
-    class?: string;
-    /** Optional action content (buttons, links, etc.) */
-    children?: Snippet;
-    /** Override user-visible strings */
-    labels?: Partial<typeof defaultLabels>;
-  }
-
-  let {
-    title = '',
-    message = '',
-    description = '',
-    subtext = '',
-    icon = null,
-    imageSrc = '',
-    iconType = 'component',
-    iconSize = 'w-20 h-20',
-    class: className = '',
-    children,
-    labels: userLabels = {},
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  // Support both naming conventions
-  let displayTitle = $derived(title || message || labels.noResultsFound);
-  let displaySubtext = $derived(description || subtext);
-</script>
-
-<div class="flex flex-col items-center justify-center px-6 py-10 text-center {className}">
-  {#if icon || imageSrc}
-    {#if iconType === 'component' && icon}
-      {@const IconComponent = icon}
-      <IconComponent class="mb-3 text-gray-400 dark:text-gray-500 {iconSize}" />
-    {:else if iconType === 'image' && imageSrc}
-      <img src={imageSrc} alt="" class="mb-3 {iconSize}" />
-    {/if}
-  {/if}
-
-  <h3 class={typography.h3}>{displayTitle}</h3>
-  {#if displaySubtext}
-    <p class={`${typography.smMuted} mt-1`}>{displaySubtext}</p>
-  {/if}
-  
-  {#if children}
-    <div class="mt-4">
-      {@render children()}
-    </div>
-  {/if}
-</div>
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+  import { typography } from '../../../tokens/typography';
+
+  const defaultLabels = {
+    noResultsFound: 'No results found',
+  };
+
+  interface Props {
+    /** Title text (alias for message) */
+    title?: string;
+    /** Main message to display */
+    message?: string;
+    /** Description text (alias for subtext) */
+    description?: string;
+    /** Secondary descriptive text */
+    subtext?: string;
+    /** Icon component (when iconType='component') */
+    icon?: Component<any> | null;
+    /** Image path (when iconType='image') */
+    imageSrc?: string;
+    /** Type of icon provided */
+    iconType?: 'component' | 'image';
+    /** Size classes for the icon */
+    iconSize?: string;
+    /** Additional CSS classes */
+    class?: string;
+    /** Optional action content (buttons, links, etc.) */
+    children?: Snippet;
+    /** Override user-visible strings */
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  let {
+    title = '',
+    message = '',
+    description = '',
+    subtext = '',
+    icon = null,
+    imageSrc = '',
+    iconType = 'component',
+    iconSize = 'w-20 h-20',
+    class: className = '',
+    children,
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  // Support both naming conventions
+  let displayTitle = $derived(title || message || labels.noResultsFound);
+  let displaySubtext = $derived(description || subtext);
+</script>
+
+<div class="flex flex-col items-center justify-center px-6 py-10 text-center {className}">
+  {#if icon || imageSrc}
+    {#if iconType === 'component' && icon}
+      {@const IconComponent = icon}
+      <IconComponent class="mb-3 text-muted-foreground {iconSize}" />
+    {:else if iconType === 'image' && imageSrc}
+      <img src={imageSrc} alt="" class="mb-3 {iconSize}" />
+    {/if}
+  {/if}
+
+  <h3 class={typography.h3}>{displayTitle}</h3>
+  {#if displaySubtext}
+    <p class={`${typography.smMuted} mt-1`}>{displaySubtext}</p>
+  {/if}
+  
+  {#if children}
+    <div class="mt-4">
+      {@render children()}
+    </div>
+  {/if}
+</div>

package/dist/recipes/feedback/ErrorDisplay.spec.js

@@ -1,69 +1,69 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import ErrorDisplay from "./ErrorDisplay.svelte";
-
-describe("ErrorDisplay Component Tests", () => {
-  test("Shows error message when error and show are true", () => {
-    render(ErrorDisplay, { props: { error: "Invalid input", show: true } });
-    expect(screen.getByText("Invalid input")).toBeInTheDocument();
-  });
-
-  test("Does not show when error is empty", () => {
-    render(ErrorDisplay, { props: { error: "", show: true } });
-    expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
-  });
-
-  test("Does not show when show is false", () => {
-    render(ErrorDisplay, { props: { error: "Error message", show: false } });
-    expect(screen.queryByText("Error message")).not.toBeInTheDocument();
-  });
-
-  test("Has error text color", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const icon = container.querySelector("svg");
-    expect(icon).toHaveClass("text-red-600");
-  });
-
-  test("Has shake class when shake is true", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, shake: true },
-    });
-    const wrapper = container.querySelector("div.flex");
-    expect(wrapper).toHaveClass("animate-shake");
-  });
-
-  test("Does not have shake class when shake is false", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, shake: false },
-    });
-    const wrapper = container.querySelector("div.flex");
-    expect(wrapper).not.toHaveClass("animate-shake");
-  });
-
-  test("Contains icon element", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Has flex layout", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const wrapper = container.querySelector("div.flex");
-    expect(wrapper).toHaveClass("flex");
-    expect(wrapper).toHaveClass("items-center");
-  });
-
-  test("Applies custom className", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, className: "mt-2" },
-    });
-    const wrapper = container.querySelector("div.flex");
-    expect(wrapper).toHaveClass("mt-2");
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import ErrorDisplay from "./ErrorDisplay.svelte";
+
+describe("ErrorDisplay Component Tests", () => {
+  test("Shows error message when error and show are true", () => {
+    render(ErrorDisplay, { props: { error: "Invalid input", show: true } });
+    expect(screen.getByText("Invalid input")).toBeInTheDocument();
+  });
+
+  test("Does not show when error is empty", () => {
+    render(ErrorDisplay, { props: { error: "", show: true } });
+    expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
+  });
+
+  test("Does not show when show is false", () => {
+    render(ErrorDisplay, { props: { error: "Error message", show: false } });
+    expect(screen.queryByText("Error message")).not.toBeInTheDocument();
+  });
+
+  test("Has error text color", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const icon = container.querySelector("svg");
+    expect(icon).toHaveClass("text-accent-danger");
+  });
+
+  test("Has shake class when shake is true", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: true },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).toHaveClass("animate-shake");
+  });
+
+  test("Does not have shake class when shake is false", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: false },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).not.toHaveClass("animate-shake");
+  });
+
+  test("Contains icon element", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Has flex layout", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).toHaveClass("flex");
+    expect(wrapper).toHaveClass("items-center");
+  });
+
+  test("Applies custom className", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, className: "mt-2" },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).toHaveClass("mt-2");
+  });
+});