@getmicdrop/svelte-components 5.20.2 → 5.21.1

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

@@ -83,7 +83,7 @@
   <div class="max-w-md space-y-6">
     <div>
       <h3 class="text-lg font-semibold mb-2">Enter Verification Code</h3>
-      <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
+      <p class="text-sm text-muted-foreground mb-4">
         Enter the 6-digit code sent to your phone
       </p>
       <OTPInput
@@ -95,8 +95,8 @@
     </div>
 
     {#if completedCode}
-      <div class="p-4 bg-green-50 border border-green-200 rounded">
-        <p class="text-sm font-medium text-green-800">
+      <div class="p-4 bg-status-success-bg border border-status-success-border rounded">
+        <p class="text-sm font-medium text-status-success-text">
           Code entered: {completedCode}
         </p>
       </div>
@@ -104,13 +104,13 @@
 
     <div class="flex gap-2">
       <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={() => otpRef?.focus()}
       >
         Focus First Input
       </button>
       <button
-        class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
+        class="px-4 py-2 bg-muted-foreground text-white rounded hover:bg-bg-tertiary"
         onclick={() => {
           otpRef?.clear();
           completedCode = '';
@@ -123,10 +123,10 @@
 </Story>
 
 <Story name="Verification Flow">
-  <div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
+  <div class="max-w-md mx-auto p-6 bg-card rounded-lg shadow-lg">
     <div class="text-center mb-6">
       <h2 class="text-2xl font-bold mb-2">Verify Your Phone</h2>
-      <p class="text-gray-500 dark:text-gray-400">
+      <p class="text-muted-foreground">
         We've sent a 4-digit code to<br />
         <span class="font-medium">+1 (555) 123-4567</span>
       </p>
@@ -140,7 +140,7 @@
       />
     </div>
 
-    <p class="text-center text-sm text-gray-500 dark:text-gray-400">
+    <p class="text-center text-sm text-muted-foreground">
       Didn't receive a code?
       <button class="text-primary hover:underline">Resend</button>
     </p>
@@ -149,7 +149,7 @@
 
 <Story name="With Auto-Submit">
   <div class="max-w-md">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
+    <p class="text-sm text-muted-foreground mb-4">
       Code will auto-submit when all digits are entered
     </p>
     <OTPInput

package/dist/recipes/inputs/OTPInput.svelte

@@ -119,7 +119,7 @@
       {disabled}
       aria-label={labels.digitLabel(index, length)}
       aria-describedby="otp-instructions"
-      class="h-12 w-12 border-2 border-gray-300 bg-gray-50 p-0 text-center text-xl font-semibold leading-none text-gray-900 transition-colors focus:border-blue-500 focus:outline-hidden focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500 dark:disabled:bg-gray-600 md:h-14 md:w-14 md:text-2xl rounded-lg"
+      class="h-12 w-12 border-2 border-stroke-primary bg-bg-secondary p-0 text-center text-xl font-semibold leading-none text-text-primary transition-colors focus:border-interactive-border focus:outline-hidden focus:ring-focus-ring disabled:cursor-not-allowed disabled:bg-bg-tertiary:bg-bg-tertiary md:h-14 md:w-14 md:text-2xl rounded-lg"
       oninput={(e) => handleInput(index, e)}
       onkeydown={(e) => handleKeyDown(index, e)}
       onpaste={handlePaste}

package/dist/recipes/inputs/PasswordInput.spec.js

@@ -59,7 +59,7 @@ describe('PasswordInput Required Field', () => {
     });
     const asterisk = screen.getByText('*');
     expect(asterisk).toBeInTheDocument();
-    expect(asterisk).toHaveClass('text-red-500');
+    expect(asterisk).toHaveClass('text-accent-danger');
   });
 
   test('does not show asterisk when required is false', () => {
@@ -69,7 +69,7 @@ describe('PasswordInput Required Field', () => {
         required: false
       }
     });
-    const asterisk = container.querySelector('.text-red-500');
+    const asterisk = container.querySelector('.text-accent-danger');
     expect(asterisk).not.toBeInTheDocument();
   });
 

package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.spec.js

@@ -55,7 +55,7 @@ describe('PasswordStrengthIndicator Component - Strength Calculation', () => {
       props: { password: 'VeryStrongPass123!' }
     });
     expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
-    const greenBars = container.querySelectorAll('.bg-green-600');
+    const greenBars = container.querySelectorAll('.bg-accent-success');
     expect(greenBars.length).toBeGreaterThan(0);
   });
 
@@ -72,7 +72,7 @@ describe('PasswordStrengthIndicator Component - Visual Indicators', () => {
     const { container } = render(TestWrapper, {
       props: { password: 'ab' }
     });
-    const filledBars = container.querySelectorAll('.bg-red-600');
+    const filledBars = container.querySelectorAll('.bg-accent-danger');
     expect(filledBars.length).toBeGreaterThanOrEqual(1);
   });
 
@@ -98,7 +98,7 @@ describe('PasswordStrengthIndicator Component - Visual Indicators', () => {
     });
     const indicator = container.querySelector('.pt-2.space-y-2');
     expect(indicator).toBeInTheDocument();
-    const greenBars = container.querySelectorAll('.bg-green-600');
+    const greenBars = container.querySelectorAll('.bg-accent-success');
     expect(greenBars.length).toBe(3);
   });
 
@@ -106,7 +106,7 @@ describe('PasswordStrengthIndicator Component - Visual Indicators', () => {
     const { container } = render(TestWrapper, {
       props: { password: 'ab' }
     });
-    const grayBars = container.querySelectorAll('.bg-gray-200');
+    const grayBars = container.querySelectorAll('.bg-bg-tertiary');
     expect(grayBars.length).toBeGreaterThan(0);
   });
 
@@ -132,7 +132,7 @@ describe('PasswordStrengthIndicator Component - Color Coding', () => {
     const { container } = render(TestWrapper, {
       props: { password: 'ab' }
     });
-    const redBars = container.querySelectorAll('.bg-red-600');
+    const redBars = container.querySelectorAll('.bg-accent-danger');
     expect(redBars.length).toBeGreaterThan(0);
   });
 
@@ -141,7 +141,7 @@ describe('PasswordStrengthIndicator Component - Color Coding', () => {
       props: { password: 'test12' }
     });
     expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
-    const redBars = container.querySelectorAll('.bg-red-600');
+    const redBars = container.querySelectorAll('.bg-accent-danger');
     expect(redBars.length).toBeGreaterThan(0);
   });
 
@@ -150,7 +150,7 @@ describe('PasswordStrengthIndicator Component - Color Coding', () => {
       props: { password: 'Test1234' }
     });
     expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
-    const greenBars = container.querySelectorAll('.bg-green-600');
+    const greenBars = container.querySelectorAll('.bg-accent-success');
     expect(greenBars.length).toBeGreaterThan(0);
   });
 
@@ -158,7 +158,7 @@ describe('PasswordStrengthIndicator Component - Color Coding', () => {
     const { container } = render(TestWrapper, {
       props: { password: 'VeryStrongPass123!' }
     });
-    const greenBars = container.querySelectorAll('.bg-green-600');
+    const greenBars = container.querySelectorAll('.bg-accent-success');
     expect(greenBars.length).toBeGreaterThan(0);
   });
 });
@@ -179,7 +179,7 @@ describe('PasswordStrengthIndicator Component - Edge Cases', () => {
       props: { password: longPassword }
     });
     expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
-    const greenBars = container.querySelectorAll('.bg-green-600');
+    const greenBars = container.querySelectorAll('.bg-accent-success');
     expect(greenBars.length).toBe(3);
   });
 
@@ -195,7 +195,7 @@ describe('PasswordStrengthIndicator Component - Edge Cases', () => {
       props: { password: 'TestPass12345' }
     });
     expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
-    const greenBars = container.querySelectorAll('.bg-green-600');
+    const greenBars = container.querySelectorAll('.bg-accent-success');
     expect(greenBars.length).toBe(3);
   });
 
@@ -214,12 +214,12 @@ describe('PasswordStrengthIndicator Component - Edge Cases', () => {
   });
 });
 
-describe('PasswordStrengthIndicator Component - Dark Mode Support', () => {
-  test('unfilled bars have dark mode class', () => {
+describe('PasswordStrengthIndicator Component - Token-Based Styling', () => {
+  test('unfilled bars have token-based background class', () => {
     const { container } = render(TestWrapper, {
       props: { password: 'abc' }
     });
-    const bars = container.querySelectorAll('.dark\\:bg-gray-700');
+    const bars = container.querySelectorAll('.bg-bg-tertiary');
     expect(bars.length).toBeGreaterThan(0);
   });
 });
@@ -232,7 +232,7 @@ describe('PasswordStrengthIndicator Component - Bar Filling', () => {
     const allBars = container.querySelectorAll('.h-1.flex-1.rounded-full');
     expect(allBars).toHaveLength(3);
 
-    const filledBars = container.querySelectorAll('.bg-red-600, .bg-green-600');
+    const filledBars = container.querySelectorAll('.bg-accent-danger, .bg-accent-success');
     expect(filledBars.length).toBeGreaterThan(0);
   });
 

package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte

@@ -99,7 +99,7 @@
         computedScore === 3 ? labels.strong : ""
     );
 
-    let computedTextColor = $derived(computedScore <= 1 ? "text-red-600" : "text-green-600");
+    let computedTextColor = $derived(computedScore <= 1 ? "text-accent-danger" : "text-accent-success");
 
     $effect(() => {
         const newText = computedStrengthText;
@@ -108,7 +108,7 @@
         }
     });
 
-    let strengthColor = $derived(computedScore <= 1 ? "bg-red-600" : "bg-green-600");
+    let strengthColor = $derived(computedScore <= 1 ? "bg-accent-danger" : "bg-accent-success");
 
     $effect(() => {
         const newColor = computedTextColor;
@@ -133,7 +133,7 @@
                     class="h-1 flex-1 rounded-full transition-colors duration-300 {barIndex <
                     filledBars
                         ? strengthColor
-                        : 'bg-gray-200 dark:bg-gray-700'}"
+                        : 'bg-bg-tertiary'}"
                 ></div>
             {/each}
         </div>

package/dist/recipes/inputs/PasswordStrengthIndicator/TestWrapper.svelte

@@ -47,7 +47,7 @@
     // Compute score based on password length and strength
     let score = $derived(password.length > 12 ? 3 : (strength?.id ?? -1));
 
-    let strengthColor = $derived(score <= 1 ? "bg-red-600" : "bg-green-600");
+    let strengthColor = $derived(score <= 1 ? "bg-accent-danger" : "bg-accent-success");
 
     // Calculate how many bars to fill (1-3)
     let filledBars = $derived(score === 0 ? 1 : score === 1 ? 2 : score >= 2 ? 3 : 0);
@@ -62,7 +62,7 @@
                     class="h-1 flex-1 rounded-full transition-colors duration-300 {barIndex <
                     filledBars
                         ? strengthColor
-                        : 'bg-gray-200 dark:bg-gray-700'}"
+                        : 'bg-bg-tertiary'}"
                 ></div>
             {/each}
         </div>

package/dist/recipes/inputs/PhoneInput.svelte

@@ -186,10 +186,10 @@
   {#if label}
     <div class="flex justify-start items-center gap-1">
       <label for={id} class={`${typography.label} leading-tight sm:leading-none`}>
-        {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>
       {#if statusText}
-        <span class="text-sm font-medium {statusType === 'success' ? 'text-green-600' : statusType === 'error' ? 'text-red-500' : ''}">({statusText})</span>
+        <span class="text-sm font-medium {statusType === 'success' ? 'text-accent-success' : statusType === 'error' ? 'text-accent-danger' : ''}">({statusText})</span>
       {/if}
       {#if optional}
         <span class={typography.smMuted}>{labels.optional}</span>
@@ -221,7 +221,7 @@
           oninput={handleInput}
           inputmode="tel"
           autocomplete="tel"
-          class="{typography.body} w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border border-l-0 rounded-r-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-300 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {controlled && (buttonText) ? 'pr-20' : ''} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+          class="{typography.body} w-full {sizeClass} bg-bg-secondary border border-l-0 rounded-r-lg font-medium placeholder-muted-foreground transition-all focus:outline-hidden focus:ring-4 focus:ring-focus-ring {hasError ? 'border-status-error-border' : 'border-stroke-primary hover:border-interactive-border focus:border-interactive-border'} {controlled && (buttonText) ? 'pr-20' : ''} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
           required={false}
           {disabled}
           aria-required={required}
@@ -232,7 +232,7 @@
             type="button"
             onclick={handleButtonClick}
             disabled={buttonDisabled}
-            class="absolute inset-y-0 right-0 gap-1 flex items-center justify-center px-4 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed {helperText || errorText ? 'mb-7' : ''}"
+            class="absolute inset-y-0 right-0 gap-1 flex items-center justify-center px-4 text-brand-primary hover:text-brand-primary disabled:opacity-50 disabled:cursor-not-allowed {helperText || errorText ? 'mb-7' : ''}"
           >
             <span class="text-sm font-medium">{buttonText}</span>
           </button>
@@ -242,7 +242,7 @@
 
     {#if errorText}
       <div transition:safeSlide={{ duration: 300, easing: cubicOut }} class="flex items-start gap-1.5 mt-2" role="alert" aria-live="assertive">
-        <ExclamationCircleOutline class="w-4 h-4 shrink-0 text-red-500 mt-0.5" />
+        <ExclamationCircleOutline class="w-4 h-4 shrink-0 text-accent-danger mt-0.5" />
         <p class={typography.error}>{errorText}</p>
       </div>
     {:else if helperText}

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.spec.js

@@ -367,7 +367,7 @@ describe('PlaceAutocomplete Component', () => {
       await fireEvent.keyDown(input, { key: 'ArrowDown' });
 
       await waitFor(() => {
-        const highlighted = container.querySelector('.bg-gray-100');
+        const highlighted = container.querySelector('.bg-muted');
         expect(highlighted).toBeInTheDocument();
       });
     });
@@ -390,7 +390,7 @@ describe('PlaceAutocomplete Component', () => {
       // Should cycle back to first
       await fireEvent.keyDown(input, { key: 'ArrowDown' });
 
-      const highlighted = container.querySelectorAll('.bg-gray-100');
+      const highlighted = container.querySelectorAll('.bg-muted');
       expect(highlighted.length).toBeGreaterThan(0);
     });
 
@@ -406,7 +406,7 @@ describe('PlaceAutocomplete Component', () => {
 
       await fireEvent.keyDown(input, { key: 'ArrowUp' });
 
-      const highlighted = container.querySelector('.bg-gray-100');
+      const highlighted = container.querySelector('.bg-muted');
       expect(highlighted).toBeInTheDocument();
     });
 
@@ -427,7 +427,7 @@ describe('PlaceAutocomplete Component', () => {
 
       // Should be on first suggestion - check the li element
       await waitFor(() => {
-        const highlighted = container.querySelector('li.bg-gray-100');
+        const highlighted = container.querySelector('li.bg-muted');
         expect(highlighted).toBeInTheDocument();
       });
     });
@@ -931,22 +931,22 @@ describe('PlaceAutocomplete Component', () => {
       expect(input).toHaveClass('block');
       expect(input).toHaveClass('w-full');
       expect(input).toHaveClass('rounded-lg');
-      expect(input).toHaveClass('bg-gray-50');
+      expect(input).toHaveClass('bg-bg-secondary');
       expect(input).toHaveClass('border');
-      expect(input).toHaveClass('border-gray-300');
+      expect(input).toHaveClass('border-stroke-primary');
     });
 
     test('has focus styles', () => {
       setupTest();
       const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('focus:ring-blue-500');
-      expect(input).toHaveClass('focus:border-blue-500');
+      expect(input).toHaveClass('focus:ring-focus-ring');
+      expect(input).toHaveClass('focus:border-interactive-border');
     });
 
     test('has hover styles', () => {
       setupTest();
       const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('hover:border-blue-500');
+      expect(input).toHaveClass('hover:border-interactive-border');
     });
 
     test('icon has correct positioning', () => {
@@ -984,7 +984,7 @@ describe('PlaceAutocomplete Component', () => {
         expect(list).toHaveClass('top-full');
         expect(list).toHaveClass('rounded-lg');
         expect(list).toHaveClass('shadow-lg');
-        expect(list).toHaveClass('bg-white');
+        expect(list).toHaveClass('bg-card');
       });
     });
 

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

@@ -79,19 +79,19 @@
     <h2 class="text-2xl font-bold mb-6">Event Location</h2>
     <div class="space-y-4">
       <div>
-        <label for="venue-name" class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+        <label for="venue-name" class="block text-sm font-medium text-muted-foreground mb-2">
           Venue Name
         </label>
         <input
           id="venue-name"
           type="text"
           placeholder="Enter venue name"
-          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+          class="w-full px-3 py-2 border border-stroke-primary rounded-lg focus:ring-2 focus:ring-focus-ring"
         />
       </div>
       <div>
         <!-- svelte-ignore a11y_label_has_associated_control -->
-        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+        <label class="block text-sm font-medium text-muted-foreground mb-2">
           Venue Location
         </label>
         <PlaceAutocomplete
@@ -111,10 +111,10 @@
 <Story name="Performer Location">
   <div style="max-width: 500px; margin: 0 auto;">
     <!-- svelte-ignore a11y_label_has_associated_control -->
-    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+    <label class="block text-sm font-medium text-muted-foreground mb-2">
       Your Home Base
     </label>
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">
+    <p class="text-sm text-muted-foreground mb-3">
       Let venues know where you're based
     </p>
     <PlaceAutocomplete
@@ -132,7 +132,7 @@
     <div class="space-y-6">
       <div>
         <!-- svelte-ignore a11y_label_has_associated_control -->
-        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+        <label class="block text-sm font-medium text-muted-foreground mb-2">
           Starting City
         </label>
         <PlaceAutocomplete
@@ -144,7 +144,7 @@
       </div>
       <div>
         <!-- svelte-ignore a11y_label_has_associated_control -->
-        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+        <label class="block text-sm font-medium text-muted-foreground mb-2">
           Destination City
         </label>
         <PlaceAutocomplete

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte

@@ -296,14 +296,11 @@
       bind:this={inputRef}
       type="text"
       name="location"
-      class="block w-full h-10 pl-10 pr-2.5 py-2.5 bg-gray-50 border border-gray-300 rounded-lg {typography.label}
-             focus:ring-blue-500 focus:border-blue-500 focus:outline-hidden
-             hover:border-blue-500
+      class="block w-full h-10 pl-10 pr-2.5 py-2.5 bg-bg-secondary border border-stroke-primary rounded-lg {typography.label}
+             focus:ring-focus-ring focus:border-interactive-border focus:outline-hidden
+             hover:border-interactive-border
              disabled:opacity-50 disabled:cursor-not-allowed
-             placeholder:text-gray-500
-             dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
-             dark:focus:ring-blue-500 dark:focus:border-blue-500
-             dark:hover:border-blue-500"
+             placeholder:text-muted-foreground"
       {placeholder}
       autocomplete={autocomplete as 'off' | 'on'}
       {disabled}
@@ -315,27 +312,27 @@
 
     {#if results.length > 0}
       <div class="absolute inset-y-0 right-0 hidden md:flex items-center p-1.5 gap-1">
-        <kbd class="inline-flex items-center justify-center px-1 border border-gray-300 rounded {typography.xsMuted} bg-white dark:bg-gray-800 dark:border-gray-600">Esc</kbd>
-        <kbd class="inline-flex items-center justify-center w-6 border border-gray-300 rounded {typography.xsMuted} bg-white dark:bg-gray-800 dark:border-gray-600">&uArr;</kbd>
-        <kbd class="inline-flex items-center justify-center w-6 border border-gray-300 rounded {typography.xsMuted} bg-white dark:bg-gray-800 dark:border-gray-600">&dArr;</kbd>
+        <kbd class="inline-flex items-center justify-center px-1 border border-stroke-primary rounded {typography.xsMuted} bg-card">Esc</kbd>
+        <kbd class="inline-flex items-center justify-center w-6 border border-stroke-primary rounded {typography.xsMuted} bg-card">&uArr;</kbd>
+        <kbd class="inline-flex items-center justify-center w-6 border border-stroke-primary rounded {typography.xsMuted} bg-card">&dArr;</kbd>
       </div>
 
       <ul
-        class="absolute top-full left-0 right-0 z-50 mt-1 py-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto
-               dark:bg-gray-800 dark:border-gray-600"
+        class="absolute top-full left-0 right-0 z-50 mt-1 py-1 bg-card border border-border rounded-lg shadow-lg max-h-60 overflow-y-auto
+"
         id="options"
         transition:bloom={{ origin: "top left" }}
       >
         {#each results as place, i}
           <li
             class="cursor-pointer transition-colors duration-100 {typography.body}
-                   {i === currentSuggestion ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-100 dark:hover:bg-gray-700'}"
+                   {i === currentSuggestion ? 'bg-muted' : 'hover:bg-muted'}"
             id="option-{i + 1}"
           >
             <button
               type="button"
               class="block w-full text-left px-4 py-3 bg-transparent border-none cursor-pointer {typography.sm}
-                     focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-700"
+                     focus:outline-hidden focus:bg-muted"
               tabindex={i + 1}
               onclick={() => onPlaceSelected(place.to_place, place.text)}
             >

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AA8UA,QAAA,MAAM,iBAAiB;kBAnTL,MAAM,EAAE;kBACR,MAAM;eACT,MAAM;aACR,MAAM;mBACA,MAAM;mBACN,MAAM;iBACR,CAAC,IAAI;;2BATkM,MAAM;4BAAyB;sBAArK,MAAM;uBAAgB,MAAM;mBAAY,MAAM,EAAE;WAAuI;eAAY,MAAM;KAS1P,KAAK,IAAI;cAC5B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;WAC1B,MAAM,GAAG,WAAW;mBACZ,OAAO;eACX,OAAO;aACT,OAAO;;;;;;;MAAsB;qBAwSqB,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AA2UA,QAAA,MAAM,iBAAiB;kBAhTL,MAAM,EAAE;kBACR,MAAM;eACT,MAAM;aACR,MAAM;mBACA,MAAM;mBACN,MAAM;iBACR,CAAC,IAAI;;2BATkM,MAAM;4BAAyB;sBAArK,MAAM;uBAAgB,MAAM;mBAAY,MAAM,EAAE;WAAuI;eAAY,MAAM;KAS1P,KAAK,IAAI;cAC5B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;WAC1B,MAAM,GAAG,WAAW;mBACZ,OAAO;eACX,OAAO;aACT,OAAO;;;;;;;MAAsB;qBAqSqB,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/recipes/inputs/Search.spec.js

@@ -109,7 +109,7 @@ describe('Search Input Styling', () => {
   test('has gray background', () => {
     const { container } = render(Search);
     const input = container.querySelector('input');
-    expect(input).toHaveClass('bg-gray-50');
+    expect(input).toHaveClass('bg-bg-secondary');
   });
 
   test('has rounded corners', () => {
@@ -122,14 +122,14 @@ describe('Search Input Styling', () => {
     const { container } = render(Search);
     const input = container.querySelector('input');
     expect(input).toHaveClass('border');
-    expect(input).toHaveClass('border-gray-300');
+    expect(input).toHaveClass('border-stroke-primary');
   });
 
   test('has focus ring', () => {
     const { container } = render(Search);
     const input = container.querySelector('input');
     expect(input).toHaveClass('focus:ring-4');
-    expect(input).toHaveClass('focus:ring-blue-300');
+    expect(input).toHaveClass('focus:ring-focus-ring');
   });
 });
 

package/dist/recipes/inputs/Search.svelte

@@ -92,7 +92,7 @@
     {name}
     placeholder={placeholder ?? labels.placeholder}
     {disabled}
-    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    class="w-full pr-3 bg-bg-secondary font-medium border border-stroke-primary rounded-lg transition-colors focus:outline-hidden focus:ring-4 focus:ring-focus-ring focus:border-interactive-border hover:border-interactive-border placeholder-muted-foreground [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
     bind:value
     oninput={handleInput}
     onchange={handleChange}

package/dist/recipes/inputs/phoneInput/CountrySelector.svelte

@@ -177,7 +177,7 @@
   <button
     type="button"
     bind:this={triggerElement}
-    class="flex items-center {sizeClass} bg-gray-50 dark:bg-gray-800 border border-r-0 rounded-l-lg cursor-pointer transition-colors text-left focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    class="flex items-center {sizeClass} bg-bg-secondary border border-r-0 rounded-l-lg cursor-pointer transition-colors text-left focus:outline-hidden focus:ring-4 focus:ring-focus-ring border-stroke-primary hover:border-interactive-border {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
     {disabled}
     aria-haspopup="listbox"
     aria-expanded={isOpen}
@@ -194,7 +194,7 @@
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
     <div
       bind:this={dropdownElement}
-      class="fixed z-[100] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg overflow-hidden"
+      class="fixed z-[100] bg-card border border-stroke-primary rounded-lg shadow-lg overflow-hidden"
       style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
       role="listbox"
       tabindex="-1"
@@ -202,11 +202,11 @@
       transition:bloom={{ origin: "top left" }}
     >
       <!-- Search -->
-      <div class="p-2 border-b border-gray-200 dark:border-gray-600">
+      <div class="p-2 border-b border-border">
         <input
           bind:this={searchInputElement}
           type="text"
-          class="w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white focus:outline-hidden focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-400 dark:placeholder-gray-500"
+          class="w-full px-3 py-2 text-sm bg-bg-secondary border border-stroke-primary rounded-lg text-text-primary focus:outline-hidden focus:ring-2 focus:ring-focus-ring placeholder-muted-foreground"
           placeholder={labels.searchPlaceholder}
           bind:value={searchQuery}
           onkeydown={handleKeydown}
@@ -218,7 +218,7 @@
         {#each filteredCountries as c, idx}
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
-            class={`flex items-center gap-3 px-3 py-2 cursor-pointer ${typography.sm} transition-colors ${c.code === country.code ? '' : typography.textMuted} ${idx === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
+            class={`flex items-center gap-3 px-3 py-2 cursor-pointer ${typography.sm} transition-colors ${c.code === country.code ? '' : typography.textMuted} ${idx === focusedIndex ? 'bg-muted' : 'hover:bg-muted'}`}
             role="option"
             aria-selected={c.code === country.code}
             data-index={idx}