@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/recipes/SuperLogin/SuperLogin.svelte

@@ -405,7 +405,7 @@
         }
 
         // Call the success callback and wait for it to complete
-        // (it sets session cookies and fetches user contexts needed by onNavigate)
+        // (consumers may fetch contexts/user data needed for routing)
         await onLoginSuccess({
           token: data.token,
           refreshToken: data.refreshToken || data.refreshtoken,
@@ -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

@@ -22,20 +22,20 @@
     <Toaster
       position="bottom-right"
       toastOptions={{
-        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
+        class: "text-sm bg-card border border-border",
         classes: {
-          error: "text-red-600 dark:text-red-400",
-          success: "text-green-600 dark:text-green-400",
+          error: "text-accent-danger",
+          success: "text-accent-success",
         },
       }}
     />
     <button
       onclick={showSuccessToast}
-      class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
+      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-gray-500 dark:text-gray-400">Click the button to see a success toast notification</p>
+    <p class="mt-4 text-sm text-muted-foreground">Click the button to see a success toast notification</p>
   </div>
 </Story>
 
@@ -44,19 +44,19 @@
     <Toaster
       position="bottom-right"
       toastOptions={{
-        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
+        class: "text-sm bg-card border border-border",
         classes: {
-          error: "text-red-600 dark:text-red-400",
-          success: "text-green-600 dark:text-green-400",
+          error: "text-accent-danger",
+          success: "text-accent-success",
         },
       }}
     />
     <button
       onclick={showErrorToast}
-      class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
+      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-gray-500 dark:text-gray-400">Click the button to see an error toast notification</p>
+    <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

@@ -56,7 +56,7 @@
   {#if icon || imageSrc}
     {#if iconType === 'component' && icon}
       {@const IconComponent = icon}
-      <IconComponent class="mb-3 text-gray-400 dark:text-gray-500 {iconSize}" />
+      <IconComponent class="mb-3 text-muted-foreground {iconSize}" />
     {:else if iconType === 'image' && imageSrc}
       <img src={imageSrc} alt="" class="mb-3 {iconSize}" />
     {/if}

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

@@ -23,7 +23,7 @@ describe("ErrorDisplay Component Tests", () => {
       props: { error: "Error", show: true },
     });
     const icon = container.querySelector("svg");
-    expect(icon).toHaveClass("text-red-600");
+    expect(icon).toHaveClass("text-accent-danger");
   });
 
   test("Has shake class when shake is true", () => {

package/dist/recipes/feedback/ErrorDisplay.stories.svelte

@@ -64,7 +64,7 @@
 <Story name="Interactive Shake">
   <div class="space-y-4">
     <button
-      class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-primary"
+      class="px-4 py-2 bg-brand-primary text-white rounded hover:bg-primary"
       onclick={triggerShake}
     >
       Trigger Error Shake
@@ -95,7 +95,7 @@
     <input
       id="error-display-email"
       type="email"
-      class="w-full px-3 py-2 border border-red-500 rounded"
+      class="w-full px-3 py-2 border border-status-error-border rounded"
       value="invalid-email"
     />
     <div class="mt-1">

package/dist/recipes/feedback/ErrorDisplay.svelte

@@ -46,8 +46,8 @@
   <div
     class="flex flex-col items-center justify-center px-6 py-10 text-center {shake ? 'animate-shake' : ''} {className}"
   >
-    <div class="w-14 h-14 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-4">
-      <Icon name={icon} size="28" class="text-red-600 dark:text-red-400" />
+    <div class="w-14 h-14 rounded-full bg-status-error-bg flex items-center justify-center mb-4">
+      <Icon name={icon} size="28" class="text-accent-danger" />
     </div>
     
     {#if title}

package/dist/recipes/feedback/StatusIndicator/StatusIndicator.svelte

@@ -26,7 +26,7 @@
     <div class="spinner" style="width: {size}px; height: {size}px;">
       <svg viewBox="0 0 50 50">
         <circle
-          class="stroke-gray-200 dark:stroke-gray-600"
+          class="stroke-gray-200"
           cx="25"
           cy="25"
           r="20"
@@ -34,7 +34,7 @@
           stroke-width="4"
         />
         <circle
-          class="spinner-head stroke-blue-700 dark:stroke-blue-500"
+          class="spinner-head stroke-blue-700"
           cx="25"
           cy="25"
           r="20"
@@ -47,7 +47,7 @@
     <div class="success-circle" style="width: {size}px; height: {size}px;">
       <svg viewBox="0 0 50 50">
         <circle
-          class="stroke-green-600 fill-green-50 dark:fill-green-900/20"
+          class="stroke-accent-success fill-status-success-bg"
           cx="25"
           cy="25"
           r="23"
@@ -55,7 +55,7 @@
           stroke-width="2"
         />
         <polyline
-          class="checkmark stroke-green-600"
+          class="checkmark stroke-accent-success"
           points="15,26 22,33 35,18"
           fill="none"
           stroke-width="3"
@@ -68,7 +68,7 @@
     <div class="error-circle" style="width: {size}px; height: {size}px;">
       <svg viewBox="0 0 50 50">
         <circle
-          class="stroke-red-600 fill-red-50 dark:fill-red-900/20"
+          class="stroke-accent-danger fill-status-error-bg"
           cx="25"
           cy="25"
           r="23"
@@ -76,13 +76,13 @@
           stroke-width="2"
         />
         <line
-          class="error-x stroke-red-600"
+          class="error-x stroke-accent-danger"
           x1="17" y1="17" x2="33" y2="33"
           stroke-width="3"
           stroke-linecap="round"
         />
         <line
-          class="error-x error-x-2 stroke-red-600"
+          class="error-x error-x-2 stroke-accent-danger"
           x1="33" y1="17" x2="17" y2="33"
           stroke-width="3"
           stroke-linecap="round"

package/dist/recipes/fields/CheckboxField.spec.js

@@ -39,7 +39,7 @@ describe('CheckboxField Label', () => {
   test('error state applies error styling to label', () => {
     const { container } = render(CheckboxField, { props: { label: 'Test', error: 'Required' } });
     const labelSpan = container.querySelector('span');
-    expect(labelSpan).toHaveClass('text-red-500');
+    expect(labelSpan).toHaveClass('text-accent-danger');
   });
 });
 
@@ -65,7 +65,7 @@ describe('CheckboxField Description', () => {
 describe('CheckboxField Error', () => {
   test('no error shows no validation message', () => {
     const { container } = render(CheckboxField);
-    const errorDiv = container.querySelector('.text-red-600');
+    const errorDiv = container.querySelector('.text-accent-danger');
     expect(errorDiv).not.toBeInTheDocument();
   });
 

package/dist/recipes/fields/CheckboxField.svelte

@@ -70,8 +70,8 @@
     {#if label || description}
       <div class="flex flex-col">
         {#if label}
-          <span class={`${typography.label} ${error ? 'text-red-500' : ''}`}>
-            {label}{#if required}<span class="text-red-500 ml-0.5">*</span>{/if}
+          <span class={`${typography.label} ${error ? 'text-accent-danger' : ''}`}>
+            {label}{#if required}<span class="text-accent-danger ml-0.5">*</span>{/if}
           </span>
         {/if}
         {#if description}

package/dist/recipes/fields/FormField.spec.js

@@ -45,20 +45,20 @@ describe('FormField Label', () => {
 
   test('required asterisk has red color', () => {
     const { container } = render(FormField, { props: { label: 'Name', required: true } });
-    const asterisk = container.querySelector('.text-red-500');
+    const asterisk = container.querySelector('.text-accent-danger');
     expect(asterisk).toHaveTextContent('*');
   });
 
   test('error changes label color to red', () => {
     const { container } = render(FormField, { props: { label: 'Email', error: 'Invalid' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-red-700');
+    expect(label).toHaveClass('text-status-error-text');
   });
 
   test('no error keeps label gray', () => {
     const { container } = render(FormField, { props: { label: 'Email' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-gray-900');
+    expect(label).toHaveClass('text-text-primary');
   });
 });
 
@@ -100,7 +100,7 @@ describe('FormField Error', () => {
 
   test('error message uses ValidationError component', () => {
     const { container } = render(FormField, { props: { error: 'Invalid input' } });
-    const errorDiv = container.querySelector('.text-red-600');
+    const errorDiv = container.querySelector('.text-accent-danger');
     expect(errorDiv).toBeInTheDocument();
   });
 });

package/dist/recipes/fields/FormField.svelte

@@ -40,7 +40,7 @@
 <div class="space-y-1 {className}">
   {#if label}
     <Label for={id} color={labelColor}>
-      {label}{#if required}<span class="text-red-500 ml-0.5">*</span>{/if}
+      {label}{#if required}<span class="text-accent-danger ml-0.5">*</span>{/if}
     </Label>
   {/if}
 

package/dist/recipes/fields/RadioGroup.spec.js

@@ -58,7 +58,7 @@ describe('RadioGroup Label', () => {
   test('error state applies red text to legend', () => {
     const { container } = render(RadioGroup, { props: { label: 'Test', error: 'Required' } });
     const legend = container.querySelector('legend');
-    expect(legend).toHaveClass('text-red-500');
+    expect(legend).toHaveClass('text-accent-danger');
   });
 });
 

package/dist/recipes/fields/RadioGroup.svelte

@@ -63,8 +63,8 @@
 
 <fieldset class={className}>
   {#if label}
-    <legend class={`${typography.label} mb-2 ${error ? 'text-red-500' : ''}`}>
-      {label}{#if required}<span class="text-red-500 ml-0.5">*</span>{/if}
+    <legend class={`${typography.label} mb-2 ${error ? 'text-accent-danger' : ''}`}>
+      {label}{#if required}<span class="text-accent-danger ml-0.5">*</span>{/if}
     </legend>
   {/if}
 

package/dist/recipes/fields/SelectField.spec.js

@@ -101,13 +101,13 @@ describe('SelectField Error', () => {
   test('error applies error border to button', () => {
     const { container } = render(SelectField, { props: { error: 'Required' } });
     const button = container.querySelector('button[aria-haspopup="listbox"]');
-    expect(button).toHaveClass('border-red-500');
+    expect(button).toHaveClass('border-status-error-border');
   });
 
   test('no error means no error border', () => {
     const { container } = render(SelectField);
     const button = container.querySelector('button[aria-haspopup="listbox"]');
-    expect(button).not.toHaveClass('border-red-500');
+    expect(button).not.toHaveClass('border-status-error-border');
   });
 });
 

package/dist/recipes/fields/TextareaField.spec.js

@@ -92,7 +92,7 @@ describe('TextareaField Error', () => {
   test('no error shows no validation styling', () => {
     const { container } = render(TextareaField);
     const textarea = container.querySelector('textarea');
-    expect(textarea).not.toHaveClass('border-red-500');
+    expect(textarea).not.toHaveClass('border-status-error-border');
   });
 
   test('error prop shows validation message', () => {
@@ -103,7 +103,7 @@ describe('TextareaField Error', () => {
   test('error applies error border to textarea', () => {
     const { container } = render(TextareaField, { props: { error: 'Required' } });
     const textarea = container.querySelector('textarea');
-    expect(textarea).toHaveClass('border-red-500');
+    expect(textarea).toHaveClass('border-status-error-border');
   });
 });
 

package/dist/recipes/fields/ToggleField.spec.js

@@ -35,7 +35,7 @@ describe('ToggleField Label', () => {
   test('error state applies error styling to label', () => {
     const { container } = render(ToggleField, { props: { label: 'Test', error: 'Required' } });
     const labelSpan = container.querySelector('span');
-    expect(labelSpan).toHaveClass('text-red-500');
+    expect(labelSpan).toHaveClass('text-accent-danger');
   });
 });
 
@@ -61,7 +61,7 @@ describe('ToggleField Description', () => {
 describe('ToggleField Error', () => {
   test('no error shows no validation message', () => {
     const { container } = render(ToggleField);
-    const errorDiv = container.querySelector('.text-red-600');
+    const errorDiv = container.querySelector('.text-accent-danger');
     expect(errorDiv).not.toBeInTheDocument();
   });
 

package/dist/recipes/fields/ToggleField.svelte

@@ -39,7 +39,7 @@
     {#if label || description}
       <div class="flex flex-col">
         {#if label}
-          <span class={`${typography.label} ${error ? 'text-red-500' : ''}`}>
+          <span class={`${typography.label} ${error ? 'text-accent-danger' : ''}`}>
             {label}
           </span>
         {/if}

package/dist/recipes/inputs/MultiSelect.stories.svelte

@@ -98,7 +98,7 @@
       onchange={(e) => console.log('Selected:', e.value)}
     />
 
-    <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded">
+    <div class="p-4 bg-muted rounded">
       <p class="text-sm font-medium">Selected: {selectedFruits.join(', ') || 'None'}</p>
     </div>
   </div>
@@ -125,7 +125,7 @@
 
     <button
       type="submit"
-      class="w-full px-4 py-2 bg-blue-500 text-white rounded hover:bg-primary"
+      class="w-full px-4 py-2 bg-brand-primary text-white rounded hover:bg-primary"
     >
       Submit
     </button>

package/dist/recipes/inputs/MultiSelect.svelte

@@ -182,7 +182,7 @@
   {#if label}
     <div class="flex justify-start items-center gap-1">
       <label for={id || name} class={`${typography.label} leading-tight`}>
-        {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
+        {label}{#if required}<span class="text-accent-danger font-medium text-sm ml-0.5">*</span>{/if}
       </label>
     </div>
   {/if}
@@ -192,8 +192,8 @@
     <div
       bind:this={triggerElement}
       {id}
-      class="flex items-center justify-between gap-2 w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer text-left transition-all focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
-        {error ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500 focus:border-blue-500 dark:focus:border-blue-500'}
+      class="flex items-center justify-between gap-2 w-full {sizeClass} bg-bg-secondary border rounded-lg cursor-pointer text-left transition-all focus:outline-hidden focus:ring-4 focus:ring-focus-ring
+        {error ? 'border-status-error-border' : 'border-stroke-primary hover:border-interactive-border focus:border-interactive-border'}
         {disabled ? 'opacity-50 cursor-not-allowed' : ''}
         {animateFocus ? 'multiselect-animate-focus' : ''}"
       role="combobox"
@@ -211,11 +211,11 @@
         {#if hasSelection}
           <div class="flex flex-wrap gap-1.5">
             {#each selectedItems as item}
-              <span class="inline-flex items-center px-2 py-1 bg-blue-100 rounded dark:bg-blue-900">
+              <span class="inline-flex items-center px-2 py-1 bg-status-info-bg rounded">
                 <span class={`${typography.sm} overflow-hidden text-ellipsis whitespace-nowrap`} style="color-scheme: light dark;">{item.name}</span>
                 <button
                   type="button"
-                  class="inline-flex items-center p-0.5 ms-1.5 text-sm text-blue-400 bg-transparent rounded-xs hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300"
+                  class="inline-flex items-center p-0.5 ms-1.5 text-sm text-brand-primary bg-transparent rounded-xs hover:bg-status-info-bg/80 hover:text-brand-primary"
                   onclick={(e) => removeItem(item, e)}
                   aria-label={typeof labels.removeItem === 'function' ? labels.removeItem(item.name) : `Remove ${item.name}`}
                 >
@@ -233,7 +233,7 @@
         {#if hasSelection && !hideClear}
           <button
             type="button"
-            class="flex items-center justify-center w-5 h-5 p-0 bg-transparent border-none cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 rounded"
+            class="flex items-center justify-center w-5 h-5 p-0 bg-transparent border-none cursor-pointer text-muted-foreground hover:text-text-secondary rounded"
             onclick={clearAll}
             aria-label={labels.clearAll}
           >
@@ -249,7 +249,7 @@
       <ul
         bind:this={dropdownElement}
         id="{id || name}-listbox"
-        class="absolute top-full left-0 right-0 z-50 mt-1 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto list-none m-0 py-1"
+        class="absolute top-full left-0 right-0 z-50 mt-1 bg-card border border-border rounded-lg shadow-lg max-h-60 overflow-y-auto list-none m-0 py-1"
         role="listbox"
         tabindex="-1"
         aria-multiselectable="true"
@@ -263,7 +263,7 @@
           <li
             id="{id || name}-option-{index}"
             class="flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors {typography.sm}
-              {index === focusedIndex || value.includes(item.value) ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}"
+              {index === focusedIndex || value.includes(item.value) ? 'bg-muted' : 'hover:bg-muted'}"
             role="option"
             aria-selected={value.includes(item.value)}
             onclick={() => toggleItem(item)}
@@ -273,7 +273,7 @@
               <input
                 type="checkbox"
                 checked={value.includes(item.value)}
-                class="multiselect-checkbox w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500 {value.includes(item.value) ? 'multiselect-checkbox-checked' : ''}"
+                class="multiselect-checkbox w-4 h-4 text-brand-primary bg-muted border-stroke-primary rounded focus:ring-focus-ring focus:ring-2 {value.includes(item.value) ? 'multiselect-checkbox-checked' : ''}"
                 tabindex="-1"
                 onclick={(e) => { e.stopPropagation(); toggleItem(item); }}
               />
@@ -286,6 +286,6 @@
   </div>
 
   {#if error}
-    <p class={`${typography.sm} text-red-500 dark:text-red-400`}>{error}</p>
+    <p class={`${typography.sm} text-accent-danger`}>{error}</p>
   {/if}
 </div>