@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/primitives/Toggle.stories.svelte

@@ -65,26 +65,26 @@
 
 <Story name="Settings List">
   <div class="max-w-md space-y-4">
-    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
+    <div class="flex items-center justify-between p-4 bg-card rounded-lg border">
       <div>
         <div class="font-medium">Email Notifications</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Receive updates via email</div>
+        <div class="text-sm text-muted-foreground">Receive updates via email</div>
       </div>
       <Toggle bind:checked={toggleState} />
     </div>
 
-    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
+    <div class="flex items-center justify-between p-4 bg-card rounded-lg border">
       <div>
         <div class="font-medium">Dark Mode</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Use dark color scheme</div>
+        <div class="text-sm text-muted-foreground">Use dark color scheme</div>
       </div>
       <Toggle checked={false} />
     </div>
 
-    <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border">
+    <div class="flex items-center justify-between p-4 bg-bg-secondary rounded-lg border">
       <div>
-        <div class="font-medium text-gray-500 dark:text-gray-400">Premium Feature</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Requires subscription</div>
+        <div class="font-medium text-muted-foreground">Premium Feature</div>
+        <div class="text-sm text-muted-foreground">Requires subscription</div>
       </div>
       <Toggle disabled={true} checked={false} />
     </div>

package/dist/primitives/Toggle.svelte

@@ -51,12 +51,12 @@
     class="sr-only peer"
   />
   <div
-    class="toggle-track toggle-{size} relative bg-gray-200 peer-focus:outline-hidden peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:bg-blue-600"
+    class="toggle-track toggle-{size} relative bg-bg-tertiary peer-focus:outline-hidden peer-focus:ring-4 peer-focus:ring-focus-ring rounded-full peer peer-checked:bg-brand-primary"
     role="switch"
     aria-checked={checked}
   ></div>
   {#if children}
-    <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+    <span class="ms-3 text-sm font-medium text-text-primary">
       {#if typeof children === 'function'}{@render children()}{:else}{children}{/if}
     </span>
   {/if}
@@ -88,8 +88,8 @@
   .toggle-track::after {
     content: '';
     position: absolute;
-    background-color: white;
-    border: 1px solid #d1d5db; /* gray-300 */
+    background-color: hsl(var(--bg-primary));
+    border: 1px solid hsl(var(--stroke-primary));
     border-radius: 9999px;
     transition: all 150ms;
   }
@@ -117,15 +117,15 @@
   /* Checked state - move thumb to the right */
   :global(input.peer:checked) + .toggle-sm::after {
     transform: translateX(1rem); /* 16px */
-    border-color: white;
+    border-color: hsl(var(--bg-primary));
   }
   :global(input.peer:checked) + .toggle-md::after {
     transform: translateX(1.25rem); /* 20px */
-    border-color: white;
+    border-color: hsl(var(--bg-primary));
   }
   :global(input.peer:checked) + .toggle-lg::after {
     transform: translateX(1.5rem); /* 24px */
-    border-color: white;
+    border-color: hsl(var(--bg-primary));
   }
 
   /* RTL support - translate in opposite direction */

package/dist/primitives/Tooltip/Tooltip.svelte

@@ -37,10 +37,10 @@
 
   // Arrow placement classes
   const arrowClasses: Record<string, string> = {
-    top: 'top-full left-1/2 -translate-x-1/2 border-t-gray-900 dark:border-t-gray-700 border-l-transparent border-r-transparent border-b-transparent',
-    bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-gray-900 dark:border-b-gray-700 border-l-transparent border-r-transparent border-t-transparent',
-    left: 'left-full top-1/2 -translate-y-1/2 border-l-gray-900 dark:border-l-gray-700 border-t-transparent border-b-transparent border-r-transparent',
-    right: 'right-full top-1/2 -translate-y-1/2 border-r-gray-900 dark:border-r-gray-700 border-t-transparent border-b-transparent border-l-transparent'
+    top: 'top-full left-1/2 -translate-x-1/2 border-t-text-primary border-l-transparent border-r-transparent border-b-transparent',
+    bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-text-primary border-l-transparent border-r-transparent border-t-transparent',
+    left: 'left-full top-1/2 -translate-y-1/2 border-l-text-primary border-t-transparent border-b-transparent border-r-transparent',
+    right: 'right-full top-1/2 -translate-y-1/2 border-r-text-primary border-t-transparent border-b-transparent border-l-transparent'
   };
 
   function handleMouseEnter() {
@@ -72,7 +72,7 @@
 
   {#if visible && content}
     <div
-      class="absolute z-50 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow whitespace-nowrap pointer-events-none dark:bg-gray-700 {placementClasses[placement]} {className}"
+      class="absolute z-50 px-3 py-2 text-sm text-white bg-bg-primary rounded-lg shadow whitespace-nowrap pointer-events-none {placementClasses[placement]} {className}"
       transition:fly={{ y: placement === 'top' ? 5 : placement === 'bottom' ? -5 : 0, x: placement === 'left' ? 5 : placement === 'right' ? -5 : 0, duration: 150 }}
     >
       {content}

package/dist/primitives/ValidationError.spec.js

@@ -39,7 +39,7 @@ describe('ValidationError Component', () => {
       props: { error: 'Error message' },
     });
     const alert = container.querySelector('[role="alert"]');
-    expect(alert.classList.contains('text-red-600')).toBe(true);
+    expect(alert.classList.contains('text-accent-danger')).toBe(true);
   });
 
   it('renders WarningIcon', () => {

package/dist/primitives/ValidationError.stories.svelte

@@ -50,7 +50,7 @@
     <input
       id="email-field"
       type="email"
-      class="w-full px-3 py-2 border border-red-300 rounded"
+      class="w-full px-3 py-2 border border-status-error-border rounded"
       value="invalid-email"
     />
     <ValidationError error="Please enter a valid email address" show={true} />
@@ -61,19 +61,19 @@
   <div class="max-w-md space-y-4">
     <div>
       <label for="username-field" class="block text-sm font-medium mb-1">Username</label>
-      <input id="username-field" type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
+      <input id="username-field" type="text" class="w-full px-3 py-2 border border-status-error-border rounded" />
       <ValidationError error="Username is required" show={true} />
     </div>
 
     <div>
       <label for="multi-email" class="block text-sm font-medium mb-1">Email</label>
-      <input id="multi-email" type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
+      <input id="multi-email" type="email" class="w-full px-3 py-2 border border-status-error-border rounded" />
       <ValidationError error="Invalid email format" show={true} />
     </div>
 
     <div>
       <label for="password-field" class="block text-sm font-medium mb-1">Password</label>
-      <input id="password-field" type="password" class="w-full px-3 py-2 border border-red-300 rounded" />
+      <input id="password-field" type="password" class="w-full px-3 py-2 border border-status-error-border rounded" />
       <ValidationError error="Password must contain at least one number" show={true} />
     </div>
   </div>
@@ -82,9 +82,9 @@
 <Story name="Hidden State">
   <div class="max-w-md">
     <label for="hidden-email" class="block text-sm font-medium mb-1">Email</label>
-    <input id="hidden-email" type="email" class="w-full px-3 py-2 border border-gray-300 rounded" />
+    <input id="hidden-email" type="email" class="w-full px-3 py-2 border border-stroke-primary rounded" />
     <ValidationError error="This error is hidden" show={false} />
-    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Validation error is hidden until field is touched</p>
+    <p class="text-sm text-muted-foreground mt-2">Validation error is hidden until field is touched</p>
   </div>
 </Story>
 
@@ -96,7 +96,7 @@
       type="email"
       aria-describedby="email-error"
       aria-invalid="true"
-      class="w-full px-3 py-2 border border-red-300 rounded focus:ring-red-500 focus:border-red-500"
+      class="w-full px-3 py-2 border border-status-error-border rounded focus:ring-accent-danger focus:border-status-error-border"
       value="invalid-email"
     />
     <ValidationError
@@ -104,7 +104,7 @@
       error="Please enter a valid email address"
       show={true}
     />
-    <p class="text-sm text-gray-500 mt-4">
+    <p class="text-sm text-muted-foreground mt-4">
       This example shows proper accessibility: the input references the error via aria-describedby,
       and the error has aria-live="assertive" for screen reader announcements.
     </p>

package/dist/primitives/ValidationError.svelte

@@ -18,7 +18,7 @@
 {#if error && show}
   <div
     transition:safeSlide={{ duration: 300, easing: cubicOut }}
-    class="flex items-start gap-1.5 text-red-600 dark:text-red-500 mt-2"
+    class="flex items-start gap-1.5 text-accent-danger mt-2"
     role="alert"
     aria-live="assertive"
     {id}

package/dist/recipes/CropImage/CropImage.stories.svelte

@@ -41,7 +41,7 @@
   <div>
     <button
       onclick={() => (showModal = true)}
-      class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+      class="px-4 py-2 bg-brand-primary text-white rounded hover:bg-brand-primary"
     >
       Crop Microphone Image
     </button>
@@ -54,7 +54,7 @@
     />
 
     {#if croppedImage}
-      <div class="mt-4 p-4 bg-gray-100 rounded">
+      <div class="mt-4 p-4 bg-muted rounded">
         <p class="font-semibold mb-2">Cropped Result:</p>
         <img src={URL.createObjectURL(croppedImage)} alt="Cropped result" class="max-w-sm border shadow" />
       </div>
@@ -65,10 +65,10 @@
 <Story name="Interactive Demo">
   <div class="p-6">
     <h3 class="text-lg font-bold mb-4">Image Cropping Demo</h3>
-    <p class="mb-2 text-gray-600">
+    <p class="mb-2 text-text-secondary">
       Click the button below to open the crop modal. You can:
     </p>
-    <ul class="list-disc ml-6 mt-2 mb-4 text-gray-600">
+    <ul class="list-disc ml-6 mt-2 mb-4 text-text-secondary">
       <li>Drag the crop box to reposition it</li>
       <li>Drag corner handles to resize the crop area (maintains square aspect)</li>
       <li>Use zoom slider or +/- buttons to zoom in/out</li>
@@ -78,7 +78,7 @@
 
     <button
       onclick={() => (showModal = true)}
-      class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium"
+      class="px-6 py-3 bg-brand-primary text-white rounded-lg hover:bg-brand-primary font-medium"
     >
       Start Cropping
     </button>
@@ -91,12 +91,12 @@
     />
 
     {#if croppedImage}
-      <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
-        <p class="font-semibold text-green-800 mb-3">Successfully Cropped!</p>
+      <div class="mt-6 p-4 bg-status-success-bg border border-status-success-border rounded-lg">
+        <p class="font-semibold text-status-success-text mb-3">Successfully Cropped!</p>
         <img
           src={URL.createObjectURL(croppedImage)}
           alt="Cropped result"
-          class="max-w-xs border-2 border-green-300 rounded shadow-lg"
+          class="max-w-xs border-2 border-status-success-border rounded shadow-lg"
         />
       </div>
     {/if}

package/dist/recipes/CropImage/CropImage.svelte

@@ -135,12 +135,12 @@
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-gray-900/50 dark:bg-gray-900/80 p-4"
+    class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-bg-primary/50 p-4"
     onclick={(e) => { if (e.target === e.currentTarget) closeModal(); }}
   >
     <div class="relative w-full max-w-lg max-h-full">
-      <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-800">
-        <div class="flex items-center justify-between p-4 border-b border-gray-200 rounded-t-lg dark:border-gray-600">
+      <div class="relative bg-card rounded-lg shadow-xl">
+        <div class="flex items-center justify-between p-4 border-b border-border rounded-t-lg">
           <h3 class={typography.h2}>
             {labels.cropImageTitle}
           </h3>
@@ -155,9 +155,9 @@
         </div>
 
         <div class="p-4 md:p-6 space-y-4">
-          <div class="relative w-full aspect-square sm:aspect-[4/3] max-h-80 sm:max-h-96 bg-gray-800 rounded-lg overflow-hidden">
+          <div class="relative w-full aspect-square sm:aspect-[4/3] max-h-80 sm:max-h-96 bg-bg-secondary rounded-lg overflow-hidden">
             {#if isLoading}
-              <div class="absolute inset-0 flex items-center justify-center bg-gray-200 dark:bg-gray-700 z-10">
+              <div class="absolute inset-0 flex items-center justify-center bg-bg-tertiary z-10">
                 <span class={typography.smMuted}>{labels.loading}</span>
               </div>
             {/if}
@@ -194,7 +194,7 @@
               max="3"
               step="0.1"
               bind:value={zoom}
-              class="flex-1 w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-blue-600"
+              class="flex-1 w-full h-2 bg-bg-tertiary rounded-lg appearance-none cursor-pointer accent-primary"
               aria-label={labels.zoomLevel}
             />
 
@@ -210,7 +210,7 @@
           </div>
         </div>
 
-        <div class="flex items-center justify-end gap-3 p-4 border-t border-gray-200 rounded-b-lg dark:border-gray-600">
+        <div class="flex items-center justify-end gap-3 p-4 border-t border-border rounded-b-lg">
           <Button
             type="button"
             variant="alternative"

package/dist/recipes/ImageUploader/ImageUploader.spec.js

@@ -1107,7 +1107,7 @@ describe('ImageUploader', () => {
       });
 
       // Click inside modal content
-      const modalContent = screen.getByText('Upload photo').closest('.bg-white, .dark\\:bg-gray-800');
+      const modalContent = screen.getByText('Upload photo').closest('.bg-card, .dark\\:bg-bg-secondary');
       await user.click(modalContent);
 
       // Modal should still be open

package/dist/recipes/ImageUploader/ImageUploader.svelte

@@ -254,12 +254,12 @@
     dropOnElement: true,
     labelIdle: `
       <div class="filepond-custom-label">
-        <svg class="w-8 h-8 mb-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="w-8 h-8 mb-5 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
         </svg>
-        <span class="text-sm font-medium text-gray-600 dark:text-gray-300">${resolvedEmptyLabel}</span>
-        <span class="text-[11px] text-gray-400 dark:text-gray-500 mt-2 block">${labels.fileTypes}</span>
-        ${constraintsText ? `<span class="text-[10px] text-gray-400/50 dark:text-gray-500/50 mt-1 block">${constraintsText}</span>` : ''}
+        <span class="text-sm font-medium text-text-secondary">${resolvedEmptyLabel}</span>
+        <span class="text-[11px] text-muted-foreground mt-2 block">${labels.fileTypes}</span>
+        ${constraintsText ? `<span class="text-[10px] text-muted-foreground/50 mt-1 block">${constraintsText}</span>` : ''}
       </div>
     `,
     credits: false,
@@ -612,14 +612,14 @@
   <div class="image-uploader-single {className}">
     {#if imageArray.length > 0}
       <!-- Show existing image with remove option -->
-      <div class="relative {shapeAspects[shape]} bg-gray-100 dark:bg-gray-800 rounded-xl overflow-hidden group">
+      <div class="relative {shapeAspects[shape]} bg-muted rounded-xl overflow-hidden group">
         <img
           src={imageArray[0]}
           alt={labels.uploadedAlt}
           class="w-full h-full object-contain"
         />
         {#if !disabled}
-          <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
+          <div class="absolute inset-0 bg-overlay-bg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
             <Button
               variant="default"
               size="sm"
@@ -673,7 +673,7 @@
     {/if}
 
     {#if error}
-      <p class={`${typography.smMuted} text-red-500 mt-2`}>{error}</p>
+      <p class={`${typography.smMuted} text-accent-danger mt-2`}>{error}</p>
     {/if}
   </div>
 
@@ -697,7 +697,7 @@
               <!-- svelte-ignore a11y_click_events_have_key_events -->
               <!-- svelte-ignore a11y_no_static_element_interactions -->
               <div
-                class="relative w-full h-full bg-gray-100 dark:bg-gray-800 group"
+                class="relative w-full h-full bg-muted group"
                 class:cursor-pointer={onSetMain && index !== 0 && !disabled}
                 onclick={() => {
                   if (onSetMain && index !== 0 && !disabled) {
@@ -719,11 +719,11 @@
                 {#if !disabled}
                   <button
                     type="button"
-                    class="remove-btn absolute top-1 right-1 {currentSizeConfig.removeSize} bg-white/90 dark:bg-gray-900/90 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-white dark:hover:bg-gray-900"
+                    class="remove-btn absolute top-1 right-1 {currentSizeConfig.removeSize} bg-card/90 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-card"
                     onclick={(e) => { e.stopPropagation(); handleRemoveImage(index); }}
                     aria-label={labels.removePhoto}
                   >
-                    <CloseOutline class="w-3 h-3 text-gray-700 dark:text-gray-300" />
+                    <CloseOutline class="w-3 h-3 text-text-secondary" />
                   </button>
                 {/if}
               </div>
@@ -733,8 +733,8 @@
               <div
                 class="w-full h-full border-2 border-dashed rounded-lg transition-colors flex items-center justify-center cursor-pointer
                   {isDropzoneDragOver
-                    ? 'border-blue-500 bg-blue-100 dark:bg-blue-900/40'
-                    : 'border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 hover:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20'}"
+                    ? 'border-interactive-border bg-status-info-bg'
+                    : 'border-stroke-primary bg-bg-secondary hover:border-brand-primary hover:bg-status-info-bg'}"
                 role="button"
                 tabindex="0"
                 onclick={() => openUploadModal(index)}
@@ -745,7 +745,7 @@
                 ondrop={(e) => handleDropzoneDrop(e, index)}
                 aria-label={labels.addPhotoAria}
               >
-                <PlusOutline class={currentSizeConfig.iconClass + ' text-gray-400 dark:text-gray-500'} />
+                <PlusOutline class={currentSizeConfig.iconClass + ' text-muted-foreground'} />
               </div>
             {/if}
           </div>
@@ -758,7 +758,7 @@
     {/if}
 
     {#if error}
-      <p class={`${typography.smMuted} text-red-500 mt-2`}>{error}</p>
+      <p class={`${typography.smMuted} text-accent-danger mt-2`}>{error}</p>
     {/if}
   </div>
 
@@ -767,7 +767,7 @@
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
-      class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 dark:bg-gray-900/80 p-4"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-bg-primary/50 p-4"
       onclick={() => (showFilePondModal = false)}
       ondragover={(e) => e.preventDefault()}
       ondrop={(e) => e.preventDefault()}
@@ -775,14 +775,14 @@
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
-        class="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-md overflow-hidden"
+        class="bg-card rounded-xl shadow-xl w-full max-w-md overflow-hidden"
         onclick={(e) => e.stopPropagation()}
       >
-        <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+        <div class="flex items-center justify-between p-4 border-b border-border">
           <h3 class={typography.h3}>{labels.uploadPhotoTitle}</h3>
           <button
             type="button"
-            class="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+            class="p-1.5 text-muted-foreground hover:text-text-secondary transition-colors"
             onclick={() => (showFilePondModal = false)}
             aria-label={labels.closeModal}
           >
@@ -794,8 +794,8 @@
           <div
             class="dropzone-native border-2 border-dashed rounded-lg transition-all duration-200 min-h-[200px] flex flex-col items-center justify-center cursor-pointer
               {isModalDragOver
-                ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
-                : 'border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 hover:border-blue-400 hover:bg-blue-50/50 dark:hover:bg-blue-900/20'}"
+                ? 'border-interactive-border bg-status-info-bg'
+                : 'border-stroke-primary bg-bg-secondary hover:border-brand-primary hover:bg-status-info-bg/50'}"
             role="button"
             tabindex="0"
             onclick={() => modalFileInput?.click()}
@@ -805,7 +805,7 @@
             ondragleave={(e) => { e.preventDefault(); e.stopPropagation(); isModalDragOver = false; }}
             ondrop={(e) => handleModalDrop(e)}
           >
-            <PlusOutline class="w-8 h-8 mb-2 text-gray-400" />
+            <PlusOutline class="w-8 h-8 mb-2 text-muted-foreground" />
             <span class={typography.smMuted}>{resolvedEmptyLabel}</span>
             <span class={`${typography.xsMuted} mt-1`}>{labels.fileTypes}</span>
           </div>
@@ -874,58 +874,40 @@
 
   /* FilePond drag hover state */
   :global(.filepond-wrapper .filepond--root[data-hopper-state="drag-over"]) {
-    border-color: rgb(59 130 246); /* blue-500 */
-    background-color: rgb(239 246 255); /* blue-50 */
-  }
-
-  :global(.dark .filepond-wrapper .filepond--root[data-hopper-state="drag-over"]) {
-    background-color: rgba(30, 58, 138, 0.3); /* blue-900/30 */
+    border-color: hsl(var(--brand-primary));
+    background-color: hsl(var(--status-info-bg));
   }
 
   :global(.filepond-wrapper .filepond--root[data-hopper-state="drag-over"] .filepond--panel-root) {
-    border-color: rgb(59 130 246); /* blue-500 */
+    border-color: hsl(var(--brand-primary));
   }
 
   /* Modal FilePond styling */
   :global(.filepond-wrapper) {
-    border: 2px dashed rgb(209 213 219); /* gray-300 */
+    border: 2px dashed hsl(var(--stroke-primary));
     border-radius: 0.5rem; /* rounded-lg */
-    background-color: rgb(249 250 251); /* gray-50 */
+    background-color: hsl(var(--bg-secondary));
     transition-property: color, background-color, border-color;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
 
-  :global(.dark .filepond-wrapper) {
-    border-color: rgb(75 85 99); /* gray-600 */
-    background-color: rgb(31 41 55); /* gray-800 */
-  }
-
   :global(.filepond-wrapper:hover) {
-    border-color: rgb(96 165 250); /* blue-400 */
+    border-color: hsl(var(--brand-primary));
   }
 
   /* Single mode dropzone styling */
   .filepond-wrapper-single {
-    border: 2px dashed rgb(209 213 219); /* gray-300 */
-    background-color: rgb(249 250 251); /* gray-50 */
+    border: 2px dashed hsl(var(--stroke-primary));
+    background-color: hsl(var(--bg-secondary));
     transition-property: color, background-color, border-color;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
 
-  :global(.dark) .filepond-wrapper-single {
-    border-color: rgb(75 85 99); /* gray-600 */
-    background-color: rgb(31 41 55); /* gray-800 */
-  }
-
   .filepond-wrapper-single:hover {
-    border-color: rgb(96 165 250); /* blue-400 */
-    background-color: rgb(239 246 255); /* blue-50 */
-  }
-
-  :global(.dark) .filepond-wrapper-single:hover {
-    background-color: rgba(30, 58, 138, 0.2); /* blue-900/20 */
+    border-color: hsl(var(--brand-primary));
+    background-color: hsl(var(--status-info-bg));
   }
 
   .filepond-wrapper-single :global(.filepond--root) {
@@ -954,12 +936,8 @@
 
   /* Direct drag-over state for dropzone */
   .dropzone-drag-over {
-    border-color: rgb(59 130 246); /* blue-500 */
-    background-color: rgb(219 234 254); /* blue-100 */
-  }
-
-  :global(.dark) .dropzone-drag-over {
-    background-color: rgba(30, 58, 138, 0.4); /* blue-900/40 */
+    border-color: hsl(var(--brand-primary));
+    background-color: hsl(var(--status-info-bg));
   }
 
   /* Custom label styling inside FilePond */
@@ -985,7 +963,7 @@
   }
 
   :global(.sortable-chosen) {
-    box-shadow: 0 0 0 2px rgb(59 130 246); /* ring-2 ring-blue-500 */
+    box-shadow: 0 0 0 2px hsl(var(--focus-ring));
   }
 
   :global(.sortable-drag) {