@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/primitives/Icons/IconGallery.stories.svelte

@@ -78,15 +78,15 @@
 <Story name="All Icons">
   <div class="p-8">
     <h1 class="text-3xl font-bold mb-6">Icon Gallery</h1>
-    <p class="text-gray-500 dark:text-gray-400 mb-8">All available icons in the component library</p>
+    <p class="text-muted-foreground mb-8">All available icons in the component library</p>
 
     <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
       {#each icons as { name, component }}
-        <div class="flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+        <div class="flex flex-col items-center p-4 border rounded-lg hover:bg-bg-secondary transition-colors">
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <svelte:component this={component} />
           </div>
-          <span class="text-sm text-center text-gray-500 dark:text-gray-400 font-medium">{name}</span>
+          <span class="text-sm text-center text-muted-foreground font-medium">{name}</span>
         </div>
       {/each}
     </div>
@@ -102,25 +102,25 @@
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <Home />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Home</span>
+          <span class="text-xs text-muted-foreground">Home</span>
         </div>
         <div class="text-center">
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <Shows />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Shows</span>
+          <span class="text-xs text-muted-foreground">Shows</span>
         </div>
         <div class="text-center">
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <Availability />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Availability</span>
+          <span class="text-xs text-muted-foreground">Availability</span>
         </div>
         <div class="text-center">
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <Profile />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Profile</span>
+          <span class="text-xs text-muted-foreground">Profile</span>
         </div>
       </div>
     </div>
@@ -129,28 +129,28 @@
       <h2 class="text-2xl font-bold mb-4">Status Icons</h2>
       <div class="flex gap-6 items-end">
         <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-green-600 dark:text-green-400">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-accent-success">
             <CheckCircle />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Success</span>
+          <span class="text-xs text-muted-foreground">Success</span>
         </div>
         <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-red-600 dark:text-red-400">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-accent-danger">
             <ErrorCircle />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Error</span>
+          <span class="text-xs text-muted-foreground">Error</span>
         </div>
         <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-amber-500 dark:text-amber-400">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-accent-warning">
             <WarningIcon />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Warning</span>
+          <span class="text-xs text-muted-foreground">Warning</span>
         </div>
         <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-blue-500">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-brand-primary">
             <Info />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Info</span>
+          <span class="text-xs text-muted-foreground">Info</span>
         </div>
       </div>
     </div>
@@ -162,25 +162,25 @@
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <FacebookIcon />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Facebook</span>
+          <span class="text-xs text-muted-foreground">Facebook</span>
         </div>
         <div class="text-center">
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <InstagramIcon />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Instagram</span>
+          <span class="text-xs text-muted-foreground">Instagram</span>
         </div>
         <div class="text-center">
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <TwitterIcon />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Twitter</span>
+          <span class="text-xs text-muted-foreground">Twitter</span>
         </div>
         <div class="text-center">
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <TiktokIcon />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">TikTok</span>
+          <span class="text-xs text-muted-foreground">TikTok</span>
         </div>
       </div>
     </div>
@@ -192,25 +192,25 @@
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <Copy />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Copy</span>
+          <span class="text-xs text-muted-foreground">Copy</span>
         </div>
         <div class="text-center">
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <Reload />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Reload</span>
+          <span class="text-xs text-muted-foreground">Reload</span>
         </div>
         <div class="text-center">
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <Cross />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Close</span>
+          <span class="text-xs text-muted-foreground">Close</span>
         </div>
         <div class="text-center">
           <div class="w-12 h-12 flex items-center justify-center mb-2">
             <More />
           </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">More</span>
+          <span class="text-xs text-muted-foreground">More</span>
         </div>
       </div>
     </div>
@@ -218,16 +218,16 @@
 </Story>
 
 <Story name="Dark Mode Icons">
-  <div class="bg-gray-900 p-8">
+  <div class="bg-bg-primary p-8">
     <h1 class="text-3xl font-bold mb-6 text-white">Icons in Dark Mode</h1>
 
     <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
       {#each icons.slice(0, 12) as { name, component }}
-        <div class="flex flex-col items-center p-4 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors">
+        <div class="flex flex-col items-center p-4 border border-stroke-primary rounded-lg hover:bg-bg-secondary transition-colors">
           <div class="w-12 h-12 flex items-center justify-center mb-2 text-white">
             <svelte:component this={component} />
           </div>
-          <span class="text-sm text-center text-gray-300 font-medium">{name}</span>
+          <span class="text-sm text-center text-muted-foreground font-medium">{name}</span>
         </div>
       {/each}
     </div>

package/dist/primitives/Icons/Icons.spec.js

@@ -199,18 +199,18 @@ function testIcon(name, config) {
         });
         it('accepts custom color prop', () => {
             const { container } = render(IconComponent, {
-                props: { color: '#ff0000' },
+                props: { color: 'hsl(var(--accent-danger))' },
             });
             if (colorAttribute === 'stroke' || colorAttribute === 'both') {
                 const strokeElements = container.querySelectorAll('[stroke]');
-                const hasCustomStroke = Array.from(strokeElements).some((el) => el.getAttribute('stroke') === '#ff0000');
+                const hasCustomStroke = Array.from(strokeElements).some((el) => el.getAttribute('stroke') === 'hsl(var(--accent-danger))');
                 if (strokeElements.length > 0) {
                     expect(hasCustomStroke).toBe(true);
                 }
             }
             if (colorAttribute === 'fill' || colorAttribute === 'both') {
                 const fillElements = container.querySelectorAll('[fill]:not([fill="none"])');
-                const hasCustomFill = Array.from(fillElements).some((el) => el.getAttribute('fill') === '#ff0000');
+                const hasCustomFill = Array.from(fillElements).some((el) => el.getAttribute('fill') === 'hsl(var(--accent-danger))');
                 if (fillElements.length > 0) {
                     expect(hasCustomFill).toBe(true);
                 }

package/dist/primitives/Input/Input.spec.js

@@ -492,7 +492,7 @@ describe("Input States", () => {
     });
     const statusText = screen.getByText("(verified)");
     expect(statusText).toBeInTheDocument();
-    expect(statusText).toHaveClass("text-green-600");
+    expect(statusText).toHaveClass("text-accent-success");
   });
 
   test("Shows status text with error type", () => {
@@ -505,7 +505,7 @@ describe("Input States", () => {
     });
     const statusText = screen.getByText("(unverified)");
     expect(statusText).toBeInTheDocument();
-    expect(statusText).toHaveClass("text-red-500");
+    expect(statusText).toHaveClass("text-accent-danger");
   });
 
   test("Applies animate focus class when enabled", () => {
@@ -767,13 +767,13 @@ describe("Content Float Variants", () => {
 });
 
 describe("Error State via color prop", () => {
-  test("Applies border-red-500 when color is red", () => {
+  test("Applies border-status-error-border when color is red", () => {
     setupTest({
       type: "text",
       id: "red-color-input",
       color: "red",
     });
-    expect(screen.getByRole("textbox")).toHaveClass("border-red-500");
+    expect(screen.getByRole("textbox")).toHaveClass("border-status-error-border");
   });
 
   test("Applies normal border when color is base", () => {
@@ -782,16 +782,16 @@ describe("Error State via color prop", () => {
       id: "base-color-input",
       color: "base",
     });
-    expect(screen.getByRole("textbox")).toHaveClass("border-gray-300");
+    expect(screen.getByRole("textbox")).toHaveClass("border-stroke-primary");
   });
 
-  test("Textarea applies border-red-500 when color is red", () => {
+  test("Textarea applies border-status-error-border when color is red", () => {
     setupTest({
       type: "textarea",
       id: "red-textarea",
       color: "red",
     });
-    expect(screen.getByRole("textbox")).toHaveClass("border-red-500");
+    expect(screen.getByRole("textbox")).toHaveClass("border-status-error-border");
   });
 });
 
@@ -1151,8 +1151,8 @@ describe("Status Text Variants", () => {
     });
     const statusEl = screen.getByText("(pending)");
     expect(statusEl).toBeInTheDocument();
-    expect(statusEl).not.toHaveClass("text-green-600");
-    expect(statusEl).not.toHaveClass("text-red-500");
+    expect(statusEl).not.toHaveClass("text-accent-success");
+    expect(statusEl).not.toHaveClass("text-accent-danger");
   });
 });
 

package/dist/primitives/Input/Input.svelte

@@ -282,10 +282,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>
@@ -304,7 +304,7 @@
         onfocus={handleFocus}
         {maxlength}
         {minlength}
-        class="{typography.sm} w-full px-3 py-2 bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 resize-y {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {getContentFloatClass()} {getTextareaSizeClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''}"
+        class="{typography.sm} w-full px-3 py-2 bg-bg-secondary border rounded-lg font-medium placeholder-muted-foreground transition-all focus:outline-none focus:ring-4 focus:ring-focus-ring resize-y {hasError ? 'border-status-error-border' : 'border-stroke-primary hover:border-interactive-border focus:border-interactive-border'} {getContentFloatClass()} {getTextareaSizeClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''}"
         required={false}
         {disabled}
         {readonly}
@@ -312,7 +312,7 @@
         aria-required={required}
       ></textarea>
     {:else if type === "password" && showPasswordToggle}
-      <div class="flex items-center w-full bg-gray-50 dark:bg-gray-800 border rounded-lg transition-all outline-none focus-within:ring-4 focus-within:ring-blue-300 dark:focus-within:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus-within:border-blue-500'} {shouldAnimate ? 'focus-within:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}">
+      <div class="flex items-center w-full bg-bg-secondary border rounded-lg transition-all outline-none focus-within:ring-4 focus-within:ring-focus-ring {hasError ? 'border-status-error-border' : 'border-stroke-primary hover:border-interactive-border focus-within:border-interactive-border'} {shouldAnimate ? 'focus-within:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}">
         <!-- svelte-ignore a11y_autofocus -->
         <input
           bind:this={inputElement}
@@ -327,7 +327,7 @@
           onfocus={handleFocus}
           {maxlength}
           {minlength}
-          class="password-input-inner {typography.sm} flex-1 w-full {sizeClass} bg-transparent border-0 font-medium placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 {getContentFloatClass()}"
+          class="password-input-inner {typography.sm} flex-1 w-full {sizeClass} bg-transparent border-0 font-medium placeholder-muted-foreground focus:outline-none focus:ring-0 {getContentFloatClass()}"
           required={false}
           {disabled}
           {readonly}
@@ -339,7 +339,7 @@
         <button
           type="button"
           onclick={togglePasswordVisibility}
-          class="flex items-center justify-center px-3 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none"
+          class="flex items-center justify-center px-3 text-muted-foreground hover:text-text-secondary focus:outline-none"
           tabindex="-1"
           aria-label={isPasswordVisible ? labels.hidePassword : labels.showPassword}
         >
@@ -353,7 +353,7 @@
     {:else}
       <div class="relative flex items-center w-full">
         {#if leftIcon}
-          <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10 pointer-events-none">
+          <div class="absolute left-3 inset-y-0 flex items-center text-muted-foreground z-10 pointer-events-none">
             {@render leftIcon()}
           </div>
         {/if}
@@ -372,7 +372,7 @@
           onkeydown={handleSearchKeyDown}
           {maxlength}
           {minlength}
-          class="{typography.body} w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {icon || (showClearButton && inputValue) ? 'pr-10' : ''} {leftIcon ? 'pl-10' : ''} {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+          class="{typography.body} w-full {sizeClass} bg-bg-secondary border rounded-lg font-medium placeholder-muted-foreground transition-all focus:outline-none focus:ring-4 focus:ring-focus-ring {hasError ? 'border-status-error-border' : 'border-stroke-primary hover:border-interactive-border focus:border-interactive-border'} {icon || (showClearButton && inputValue) ? 'pr-10' : ''} {leftIcon ? 'pl-10' : ''} {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
           required={false}
           {disabled}
           {readonly}
@@ -385,7 +385,7 @@
           <button
             type="button"
             onclick={clearInput}
-            class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+            class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center p-1 text-muted-foreground hover:text-text-secondary"
             aria-label={labels.clearInput}
             tabindex="-1"
           >
@@ -396,7 +396,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 || hintText || 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 || hintText || errorText ? 'mb-7' : ''}"
           >
             {#if buttonIcon}
               <img src={buttonIcon} alt={labels.buttonIconAlt} class="w-5 h-5" />
@@ -414,7 +414,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 || hintText}

package/dist/primitives/Input/Select.spec.js

@@ -173,7 +173,7 @@ describe("Select Component Tests", () => {
     const { user } = setupTest();
     const trigger = screen.getByRole("button");
     expect(trigger).toHaveClass("focus:ring-4");
-    expect(trigger).toHaveClass("focus:ring-blue-300");
+    expect(trigger).toHaveClass("focus:ring-focus-ring");
   });
 
   test("Closes dropdown when clicking outside", async () => {
@@ -362,13 +362,13 @@ describe("Select - error border styling", () => {
   test("Trigger has error border when error is set", () => {
     setupTest({ error: "Required" });
     const trigger = screen.getByRole("button");
-    expect(trigger).toHaveClass("border-red-500");
+    expect(trigger).toHaveClass("border-status-error-border");
   });
 
   test("Trigger has normal border when no error", () => {
     setupTest({ error: "" });
     const trigger = screen.getByRole("button");
-    expect(trigger).toHaveClass("border-gray-300");
+    expect(trigger).toHaveClass("border-stroke-primary");
   });
 });
 
@@ -435,7 +435,7 @@ describe("Select - option hover highlight", () => {
     await fireEvent.mouseEnter(options[2]);
 
     // The hovered option should have the focused styling
-    expect(options[2]).toHaveClass("bg-gray-100");
+    expect(options[2]).toHaveClass("bg-muted");
   });
 });
 
@@ -468,8 +468,8 @@ describe("Select - opening focuses current selected value", () => {
     await user.click(trigger);
     const options = screen.getAllByRole("option");
 
-    // opt2 is at index 1, so the focused option should have bg-gray-100
-    expect(options[1]).toHaveClass("bg-gray-100");
+    // opt2 is at index 1, so the focused option should have bg-muted
+    expect(options[1]).toHaveClass("bg-muted");
   });
 });
 
@@ -551,7 +551,7 @@ describe("Select - no error text", () => {
     setupTest({ error: "" });
     // The trigger should be present with normal border
     const trigger = screen.getByRole("button");
-    expect(trigger).toHaveClass("border-gray-300");
+    expect(trigger).toHaveClass("border-stroke-primary");
     // There should be no error paragraph element
     const errorParagraph = document.querySelector('p');
     expect(errorParagraph).not.toBeInTheDocument();

package/dist/primitives/Input/Select.stories.svelte

@@ -47,7 +47,7 @@
         <option value="md">Medium</option>
         <option value="lg">Large</option>
       </Select>
-      <p class="text-sm text-gray-500 mt-2">Selected: {value || 'none'}</p>
+      <p class="text-sm text-muted-foreground mt-2">Selected: {value || 'none'}</p>
     </div>
   {/snippet}
 </Story>

package/dist/primitives/Input/Select.svelte

@@ -170,7 +170,7 @@
   {#if label}
     <div class="flex justify-start items-center gap-1">
       <label for={id || name} class={typography.label}>
-        {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}
@@ -181,7 +181,7 @@
       bind:this={triggerElement}
       {id}
       {name}
-      class="flex items-center justify-between w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer transition-colors text-left 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'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {!selectedItem ? `${typography.textMuted}` : `${typography.body}`}"
+      class="flex items-center justify-between w-full {sizeClass} bg-bg-secondary border rounded-lg cursor-pointer transition-colors text-left focus:outline-hidden focus:ring-4 focus:ring-focus-ring {error ? 'border-status-error-border' : 'border-stroke-primary hover:border-interactive-border'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {!selectedItem ? `${typography.textMuted}` : `${typography.body}`}"
       {disabled}
       aria-haspopup="listbox"
       aria-expanded={isOpen}
@@ -196,7 +196,7 @@
       <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
       <ul
         bind:this={dropdownElement}
-        class="absolute top-full left-0 right-0 z-50 mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
+        class="absolute top-full left-0 right-0 z-50 mt-1 bg-card border border-stroke-primary rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
         role="listbox"
         tabindex="-1"
         transition:bloom={{ origin: "top left" }}
@@ -205,7 +205,7 @@
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
             id="{id || name}-option-{index}"
-            class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
+            class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-muted' : 'hover:bg-muted'}`}
             role="option"
             aria-selected={item.value === value}
             onclick={() => selectItem(item)}
@@ -229,7 +229,7 @@
   <ul
     bind:this={dropdownElement}
     use:portalAction
-    class="fixed z-[100] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
+    class="fixed z-[100] bg-card border border-stroke-primary rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
     style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
     role="listbox"
     tabindex="-1"
@@ -239,7 +239,7 @@
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <li
         id="{id || name}-option-{index}"
-        class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
+        class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-muted' : 'hover:bg-muted'}`}
         role="option"
         aria-selected={item.value === value}
         onclick={() => selectItem(item)}

package/dist/primitives/Input/Textarea.spec.js

@@ -109,7 +109,7 @@ describe('Textarea Label', () => {
 
   test('label shows asterisk when required', () => {
     const { container } = render(Textarea, { props: { label: 'Description', required: true } });
-    expect(container.querySelector('.text-red-500')).toBeInTheDocument();
+    expect(container.querySelector('.text-accent-danger')).toBeInTheDocument();
     expect(screen.getByText('*')).toBeInTheDocument();
   });
 
@@ -125,10 +125,10 @@ describe('Textarea Error State', () => {
     expect(screen.getByText('This field is required')).toBeInTheDocument();
   });
 
-  test('has border-red-500 when error is present', () => {
+  test('has border-status-error-border when error is present', () => {
     const { container } = render(Textarea, { props: { error: 'Error' } });
     const textarea = container.querySelector('textarea');
-    expect(textarea).toHaveClass('border-red-500');
+    expect(textarea).toHaveClass('border-status-error-border');
   });
 
   test('aria-invalid is true when error is present', () => {
@@ -171,16 +171,16 @@ describe('Textarea Styling', () => {
     expect(textarea).toHaveClass('p-2.5');
   });
 
-  test('has bg-gray-50 background', () => {
+  test('has bg-bg-secondary background', () => {
     const { container } = render(Textarea);
     const textarea = container.querySelector('textarea');
-    expect(textarea).toHaveClass('bg-gray-50');
+    expect(textarea).toHaveClass('bg-bg-secondary');
   });
 
-  test('has dark mode background', () => {
+  test('has token-based background', () => {
     const { container } = render(Textarea);
     const textarea = container.querySelector('textarea');
-    expect(textarea).toHaveClass('dark:bg-gray-800');
+    expect(textarea).toHaveClass('bg-bg-secondary');
   });
 
   test('has rounded-lg border radius', () => {
@@ -199,7 +199,7 @@ describe('Textarea Styling', () => {
     const { container } = render(Textarea);
     const textarea = container.querySelector('textarea');
     expect(textarea).toHaveClass('focus:ring-4');
-    expect(textarea).toHaveClass('focus:ring-blue-300');
+    expect(textarea).toHaveClass('focus:ring-focus-ring');
   });
 
   test('has opacity-50 and cursor-not-allowed when disabled', () => {

package/dist/primitives/Input/Textarea.stories.svelte

@@ -46,7 +46,7 @@
         placeholder="Tell us about yourself..."
         bind:value={value}
       />
-      <p class="text-sm text-gray-500 mt-2">{value.length} characters</p>
+      <p class="text-sm text-muted-foreground mt-2">{value.length} characters</p>
     </div>
   {/snippet}
 </Story>

package/dist/primitives/Input/Textarea.svelte

@@ -72,7 +72,7 @@
 <div class="flex flex-col gap-2 w-full">
   {#if label}
     <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>
   {/if}
 
@@ -85,7 +85,7 @@
     {readonly}
     {maxlength}
     {minlength}
-    class="{typography.sm} w-full p-2.5 bg-gray-50 dark:bg-gray-800 leading-normal border rounded-lg resize-y transition-colors focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
+    class="{typography.sm} w-full p-2.5 bg-bg-secondary leading-normal border rounded-lg resize-y transition-colors focus:outline-hidden focus:ring-4 focus:ring-focus-ring placeholder-muted-foreground {error ? 'border-status-error-border' : 'border-stroke-primary hover:border-interactive-border focus:border-interactive-border'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
     bind:value
     oninput={handleInput}
     onchange={handleChange}