@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/primitives/DarkModeToggle.stories.svelte

@@ -1,57 +1,57 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import DarkModeToggle from './DarkModeToggle.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/DarkModeToggle',
-    component: DarkModeToggle,
-    tags: ['autodocs'],
-  });
-
-</script>
-
-<script>
-  </script>
-
-<Story name="Default">
-  <div class="flex flex-col gap-4 p-4">
-    <h3 class="text-lg font-semibold">Theme Toggle (3-State)</h3>
-    <p class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
-      Cycles through: Auto → Light → Dark → Auto
-    </p>
-    <DarkModeToggle />
-    <p class="text-xs text-gray-500 dark:text-gray-400">
-      Click the toggle to cycle through theme modes. In auto mode, it follows system preferences.
-    </p>
-  </div>
-</Story>
-
-<Story name="In Header">
-  <div class="bg-white dark:bg-gray-900 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-lg">
-    <div class="flex items-center justify-between">
-      <h2 class="text-xl font-bold text-gray-900 dark:text-white dark:text-white">Application Header</h2>
-      <DarkModeToggle />
-    </div>
-  </div>
-</Story>
-
-<Story name="Theme States Demo">
-  <div class="space-y-4 p-4">
-    <div class="bg-white dark:bg-gray-900 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
-      <h3 class="text-lg font-semibold text-gray-900 dark:text-white dark:text-white mb-2">
-        Current Theme Demo
-      </h3>
-      <p class="text-gray-500 dark:text-gray-400 dark:text-gray-300 mb-4">
-        This content changes appearance based on the selected theme mode.
-      </p>
-      <DarkModeToggle />
-    </div>
-
-    <div class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
-      <p><strong>Auto Mode:</strong> Follows system preferences</p>
-      <p><strong>Light Mode:</strong> Forces light theme</p>
-      <p><strong>Dark Mode:</strong> Forces dark theme</p>
-    </div>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import DarkModeToggle from './DarkModeToggle.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/DarkModeToggle',
+    component: DarkModeToggle,
+    tags: ['autodocs'],
+  });
+
+</script>
+
+<script>
+  </script>
+
+<Story name="Default">
+  <div class="flex flex-col gap-4 p-4">
+    <h3 class="text-lg font-semibold">Theme Toggle (3-State)</h3>
+    <p class="text-sm text-muted-foreground">
+      Cycles through: Auto → Light → Dark → Auto
+    </p>
+    <DarkModeToggle />
+    <p class="text-xs text-muted-foreground">
+      Click the toggle to cycle through theme modes. In auto mode, it follows system preferences.
+    </p>
+  </div>
+</Story>
+
+<Story name="In Header">
+  <div class="bg-card border border-border p-4 rounded-lg">
+    <div class="flex items-center justify-between">
+      <h2 class="text-xl font-bold text-text-primary">Application Header</h2>
+      <DarkModeToggle />
+    </div>
+  </div>
+</Story>
+
+<Story name="Theme States Demo">
+  <div class="space-y-4 p-4">
+    <div class="bg-card p-6 rounded-lg border border-border">
+      <h3 class="text-lg font-semibold text-text-primary mb-2">
+        Current Theme Demo
+      </h3>
+      <p class="text-muted-foreground mb-4">
+        This content changes appearance based on the selected theme mode.
+      </p>
+      <DarkModeToggle />
+    </div>
+
+    <div class="text-sm text-muted-foreground">
+      <p><strong>Auto Mode:</strong> Follows system preferences</p>
+      <p><strong>Light Mode:</strong> Forces light theme</p>
+      <p><strong>Dark Mode:</strong> Forces dark theme</p>
+    </div>
+  </div>
+</Story>

package/dist/primitives/DarkModeToggle.svelte

@@ -1,147 +1,147 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-  import SunIcon from "./Icons/SunIcon.svelte";
-  import MoonIcon from "./Icons/MoonIcon.svelte";
-  import Button from "./Button/Button.svelte";
-
-  const defaultLabels = {
-    toggleTheme: 'Toggle theme',
-    autoThemeClickForLight: 'Auto theme (following device) - click for light mode',
-    lightModeClickForDark: 'Light mode - click for dark mode',
-    darkModeClickForAuto: 'Dark mode - click for auto',
-  };
-
-  interface Props {
-    /** Container selector for applying dark class */
-    containerSelector?: string;
-    /** Override user-visible strings */
-    labels?: Partial<typeof defaultLabels>;
-  }
-
-  let { containerSelector = ".performer-portal", labels: userLabels = {} }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let themeMode = $state<"auto" | "light" | "dark">("auto");
-  let isDark = $state(false);
-
-  function setMicdropDarkClass(enable: boolean) {
-    const container = document.querySelector(containerSelector);
-    if (enable) {
-      if (container) container.classList.add("dark");
-      document.documentElement.classList.add("dark");
-    } else {
-      if (container) container.classList.remove("dark");
-      document.documentElement.classList.remove("dark");
-    }
-  }
-
-  function getSystemPreference() {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  }
-
-  function applyTheme() {
-    if (themeMode === "auto") {
-      isDark = getSystemPreference();
-    } else {
-      isDark = themeMode === "dark";
-    }
-    setMicdropDarkClass(isDark);
-  }
-
-  onMount(() => {
-    const savedTheme = localStorage.getItem("theme");
-
-    if (savedTheme === "dark" || savedTheme === "light") {
-      themeMode = savedTheme;
-    } else {
-      themeMode = "auto";
-    }
-
-    applyTheme();
-
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => {
-      if (themeMode === "auto") {
-        applyTheme();
-      }
-    };
-    mediaQuery.addEventListener("change", handleChange);
-
-    return () => {
-      mediaQuery.removeEventListener("change", handleChange);
-    };
-  });
-
-  function toggleTheme(event: MouseEvent) {
-    if (themeMode === "auto") {
-      themeMode = "light";
-      localStorage.setItem("theme", "light");
-    } else if (themeMode === "light") {
-      themeMode = "dark";
-      localStorage.setItem("theme", "dark");
-    } else {
-      themeMode = "auto";
-      localStorage.removeItem("theme");
-    }
-
-    applyTheme();
-
-    if (event?.currentTarget) {
-      (event.currentTarget as HTMLElement).blur();
-    }
-  }
-
-  let titleText = $derived(
-    themeMode === "auto"
-      ? labels.autoThemeClickForLight
-      : themeMode === "light"
-        ? labels.lightModeClickForDark
-        : labels.darkModeClickForAuto
-  );
-</script>
-
-<Button
-  variant="alternative"
-  onclick={toggleTheme}
-  class="relative h-10 w-10 overflow-hidden p-0"
-  aria-label={labels.toggleTheme}
-  title={titleText}
->
-  <span
-    class="text-amber-500 transition-all duration-300 {themeMode === 'light'
-      ? 'scale-100 rotate-0 opacity-100'
-      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
-  >
-    <SunIcon size="20" />
-  </span>
-
-  <span
-    class="transition-all duration-300 {themeMode === 'dark'
-      ? 'scale-100 rotate-0 opacity-100'
-      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
-  >
-    <MoonIcon size="20" color="white" />
-  </span>
-
-  {#if themeMode === "auto"}
-    <div class="absolute inset-0 overflow-hidden rounded-lg">
-      <div
-        class="absolute flex h-full w-full items-center justify-center bg-white"
-        style="clip-path: polygon(0 0, 100% 0, 0 100%)"
-      >
-        <span class="-translate-x-1 -translate-y-1 text-amber-500">
-          <SunIcon size="12" />
-        </span>
-      </div>
-      <div
-        class="absolute flex h-full w-full items-center justify-center bg-gray-800"
-        style="clip-path: polygon(100% 0, 100% 100%, 0 100%)"
-      >
-        <span class="translate-x-1 translate-y-1">
-          <MoonIcon size="12" color="white" />
-        </span>
-      </div>
-    </div>
-  {/if}
-</Button>
+<script lang="ts">
+  import { onMount } from "svelte";
+  import SunIcon from "./Icons/SunIcon.svelte";
+  import MoonIcon from "./Icons/MoonIcon.svelte";
+  import Button from "./Button/Button.svelte";
+
+  const defaultLabels = {
+    toggleTheme: 'Toggle theme',
+    autoThemeClickForLight: 'Auto theme (following device) - click for light mode',
+    lightModeClickForDark: 'Light mode - click for dark mode',
+    darkModeClickForAuto: 'Dark mode - click for auto',
+  };
+
+  interface Props {
+    /** Container selector for applying dark class */
+    containerSelector?: string;
+    /** Override user-visible strings */
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  let { containerSelector = ".performer-portal", labels: userLabels = {} }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let themeMode = $state<"auto" | "light" | "dark">("auto");
+  let isDark = $state(false);
+
+  function setMicdropDarkClass(enable: boolean) {
+    const container = document.querySelector(containerSelector);
+    if (enable) {
+      if (container) container.classList.add("dark");
+      document.documentElement.classList.add("dark");
+    } else {
+      if (container) container.classList.remove("dark");
+      document.documentElement.classList.remove("dark");
+    }
+  }
+
+  function getSystemPreference() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+
+  function applyTheme() {
+    if (themeMode === "auto") {
+      isDark = getSystemPreference();
+    } else {
+      isDark = themeMode === "dark";
+    }
+    setMicdropDarkClass(isDark);
+  }
+
+  onMount(() => {
+    const savedTheme = localStorage.getItem("theme");
+
+    if (savedTheme === "dark" || savedTheme === "light") {
+      themeMode = savedTheme;
+    } else {
+      themeMode = "auto";
+    }
+
+    applyTheme();
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      if (themeMode === "auto") {
+        applyTheme();
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  });
+
+  function toggleTheme(event: MouseEvent) {
+    if (themeMode === "auto") {
+      themeMode = "light";
+      localStorage.setItem("theme", "light");
+    } else if (themeMode === "light") {
+      themeMode = "dark";
+      localStorage.setItem("theme", "dark");
+    } else {
+      themeMode = "auto";
+      localStorage.removeItem("theme");
+    }
+
+    applyTheme();
+
+    if (event?.currentTarget) {
+      (event.currentTarget as HTMLElement).blur();
+    }
+  }
+
+  let titleText = $derived(
+    themeMode === "auto"
+      ? labels.autoThemeClickForLight
+      : themeMode === "light"
+        ? labels.lightModeClickForDark
+        : labels.darkModeClickForAuto
+  );
+</script>
+
+<Button
+  variant="alternative"
+  onclick={toggleTheme}
+  class="relative h-10 w-10 overflow-hidden p-0"
+  aria-label={labels.toggleTheme}
+  title={titleText}
+>
+  <span
+    class="text-accent-warning transition-all duration-300 {themeMode === 'light'
+      ? 'scale-100 rotate-0 opacity-100'
+      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
+  >
+    <SunIcon size="20" />
+  </span>
+
+  <span
+    class="transition-all duration-300 {themeMode === 'dark'
+      ? 'scale-100 rotate-0 opacity-100'
+      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
+  >
+    <MoonIcon size="20" color="white" />
+  </span>
+
+  {#if themeMode === "auto"}
+    <div class="absolute inset-0 overflow-hidden rounded-lg">
+      <div
+        class="absolute flex h-full w-full items-center justify-center bg-card"
+        style="clip-path: polygon(0 0, 100% 0, 0 100%)"
+      >
+        <span class="-translate-x-1 -translate-y-1 text-accent-warning">
+          <SunIcon size="12" />
+        </span>
+      </div>
+      <div
+        class="absolute flex h-full w-full items-center justify-center bg-bg-secondary"
+        style="clip-path: polygon(100% 0, 100% 100%, 0 100%)"
+      >
+        <span class="translate-x-1 translate-y-1">
+          <MoonIcon size="12" color="white" />
+        </span>
+      </div>
+    </div>
+  {/if}
+</Button>

package/dist/primitives/Drawer/Drawer.spec.js

@@ -152,16 +152,16 @@ describe('Drawer Styling', () => {
     expect(dialog).toHaveClass('flex-col');
   });
 
-  test('has bg-white background', () => {
+  test('has bg-card background', () => {
     const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
-    expect(dialog).toHaveClass('bg-white');
+    expect(dialog).toHaveClass('bg-card');
   });
 
-  test('has dark mode background', () => {
+  test('has token-based background', () => {
     const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
-    expect(dialog).toHaveClass('dark:bg-gray-800');
+    expect(dialog).toHaveClass('bg-card');
   });
 });
 

package/dist/primitives/Drawer/Drawer.stories.svelte

@@ -1,100 +1,100 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Drawer from './Drawer.svelte';
-  import Button from '../Button/Button.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Drawer',
-    component: Drawer,
-    tags: ['autodocs'],
-    argTypes: {
-      position: {
-        control: 'select',
-        options: ['left', 'right'],
-      },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Sliding panel overlay that appears from the side of the screen.',
-        },
-      },
-    },
-  });
-
-  let openLeft = $state(false);
-  let openRight = $state(false);
-</script>
-
-<Story name="Right (Default)">
-  {#snippet template()}
-    <div>
-      <Button onclick={() => openRight = true}>Open Right Drawer</Button>
-      <Drawer bind:open={openRight} position="right">
-        <div class="p-6">
-          <h2 class="text-xl font-semibold mb-4">Drawer Title</h2>
-          <p class="text-gray-600 mb-4">
-            This drawer slides in from the right side. Click outside or use the close button to dismiss.
-          </p>
-          <div class="space-y-4">
-            <p class="text-sm text-gray-500">Some content here...</p>
-            <Button onclick={() => openRight = false}>Close</Button>
-          </div>
-        </div>
-      </Drawer>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Left">
-  {#snippet template()}
-    <div>
-      <Button onclick={() => openLeft = true}>Open Left Drawer</Button>
-      <Drawer bind:open={openLeft} position="left">
-        <div class="p-6">
-          <h2 class="text-xl font-semibold mb-4">Navigation</h2>
-          <nav class="space-y-2">
-            <a href="/dashboard" class="block px-3 py-2 rounded hover:bg-gray-100">Dashboard</a>
-            <a href="/shows" class="block px-3 py-2 rounded hover:bg-gray-100">Shows</a>
-            <a href="/performers" class="block px-3 py-2 rounded hover:bg-gray-100">Performers</a>
-            <a href="/settings" class="block px-3 py-2 rounded hover:bg-gray-100">Settings</a>
-          </nav>
-          <div class="mt-6">
-            <Button variant="ghost" onclick={() => openLeft = false}>Close</Button>
-          </div>
-        </div>
-      </Drawer>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Form">
-  {#snippet template()}
-    <div>
-      <Button onclick={() => openRight = true}>Edit Profile</Button>
-      <Drawer bind:open={openRight} position="right">
-        <div class="p-6">
-          <h2 class="text-xl font-semibold mb-6">Edit Profile</h2>
-          <form class="space-y-4">
-            <div>
-              <label for="drawer-name" class="block text-sm font-medium mb-1">Name</label>
-              <input id="drawer-name" type="text" class="w-full border rounded px-3 py-2" placeholder="John Doe" />
-            </div>
-            <div>
-              <label for="drawer-email" class="block text-sm font-medium mb-1">Email</label>
-              <input id="drawer-email" type="email" class="w-full border rounded px-3 py-2" placeholder="john@example.com" />
-            </div>
-            <div>
-              <label for="drawer-bio" class="block text-sm font-medium mb-1">Bio</label>
-              <textarea id="drawer-bio" class="w-full border rounded px-3 py-2" rows="3" placeholder="Tell us about yourself"></textarea>
-            </div>
-          </form>
-          <div class="flex gap-2 mt-6">
-            <Button variant="ghost" onclick={() => openRight = false}>Cancel</Button>
-            <Button onclick={() => openRight = false}>Save Changes</Button>
-          </div>
-        </div>
-      </Drawer>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Drawer from './Drawer.svelte';
+  import Button from '../Button/Button.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Drawer',
+    component: Drawer,
+    tags: ['autodocs'],
+    argTypes: {
+      position: {
+        control: 'select',
+        options: ['left', 'right'],
+      },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Sliding panel overlay that appears from the side of the screen.',
+        },
+      },
+    },
+  });
+
+  let openLeft = $state(false);
+  let openRight = $state(false);
+</script>
+
+<Story name="Right (Default)">
+  {#snippet template()}
+    <div>
+      <Button onclick={() => openRight = true}>Open Right Drawer</Button>
+      <Drawer bind:open={openRight} position="right">
+        <div class="p-6">
+          <h2 class="text-xl font-semibold mb-4">Drawer Title</h2>
+          <p class="text-text-secondary mb-4">
+            This drawer slides in from the right side. Click outside or use the close button to dismiss.
+          </p>
+          <div class="space-y-4">
+            <p class="text-sm text-muted-foreground">Some content here...</p>
+            <Button onclick={() => openRight = false}>Close</Button>
+          </div>
+        </div>
+      </Drawer>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Left">
+  {#snippet template()}
+    <div>
+      <Button onclick={() => openLeft = true}>Open Left Drawer</Button>
+      <Drawer bind:open={openLeft} position="left">
+        <div class="p-6">
+          <h2 class="text-xl font-semibold mb-4">Navigation</h2>
+          <nav class="space-y-2">
+            <a href="/dashboard" class="block px-3 py-2 rounded hover:bg-muted">Dashboard</a>
+            <a href="/shows" class="block px-3 py-2 rounded hover:bg-muted">Shows</a>
+            <a href="/performers" class="block px-3 py-2 rounded hover:bg-muted">Performers</a>
+            <a href="/settings" class="block px-3 py-2 rounded hover:bg-muted">Settings</a>
+          </nav>
+          <div class="mt-6">
+            <Button variant="ghost" onclick={() => openLeft = false}>Close</Button>
+          </div>
+        </div>
+      </Drawer>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Form">
+  {#snippet template()}
+    <div>
+      <Button onclick={() => openRight = true}>Edit Profile</Button>
+      <Drawer bind:open={openRight} position="right">
+        <div class="p-6">
+          <h2 class="text-xl font-semibold mb-6">Edit Profile</h2>
+          <form class="space-y-4">
+            <div>
+              <label for="drawer-name" class="block text-sm font-medium mb-1">Name</label>
+              <input id="drawer-name" type="text" class="w-full border rounded px-3 py-2" placeholder="John Doe" />
+            </div>
+            <div>
+              <label for="drawer-email" class="block text-sm font-medium mb-1">Email</label>
+              <input id="drawer-email" type="email" class="w-full border rounded px-3 py-2" placeholder="john@example.com" />
+            </div>
+            <div>
+              <label for="drawer-bio" class="block text-sm font-medium mb-1">Bio</label>
+              <textarea id="drawer-bio" class="w-full border rounded px-3 py-2" rows="3" placeholder="Tell us about yourself"></textarea>
+            </div>
+          </form>
+          <div class="flex gap-2 mt-6">
+            <Button variant="ghost" onclick={() => openRight = false}>Cancel</Button>
+            <Button onclick={() => openRight = false}>Save Changes</Button>
+          </div>
+        </div>
+      </Drawer>
+    </div>
+  {/snippet}
+</Story>