@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/recipes/modals/AlertModal.spec.js

@@ -127,98 +127,98 @@ describe("AlertModal Component Tests", () => {
   test("Renders success variant with correct icon", () => {
     setupTest({ variant: "success" });
     // CheckOutline icon should be present
-    const iconContainer = document.querySelector(".bg-green-100");
+    const iconContainer = document.querySelector(".bg-status-success-bg");
     expect(iconContainer).toBeInTheDocument();
-    const icon = iconContainer?.querySelector(".text-green-600");
+    const icon = iconContainer?.querySelector(".text-accent-success");
     expect(icon).toBeInTheDocument();
   });
 
   test("Success variant has green styling", () => {
     setupTest({ variant: "success" });
-    const iconContainer = document.querySelector(".bg-green-100");
-    expect(iconContainer).toHaveClass("bg-green-100");
+    const iconContainer = document.querySelector(".bg-status-success-bg");
+    expect(iconContainer).toHaveClass("bg-status-success-bg");
   });
 
   test("Success variant button uses default variant", () => {
     setupTest({ variant: "success" });
     const button = screen.getAllByText("OK")[0].closest("button");
     // Default variant has primary/blue styling
-    expect(button).toHaveClass("bg-blue-700");
+    expect(button).toHaveClass("bg-brand-primary");
   });
 
   // Variant tests - Error
   test("Renders error variant with correct icon", () => {
     setupTest({ variant: "error" });
     // CloseOutline icon should be present
-    const iconContainer = document.querySelector(".bg-red-100");
+    const iconContainer = document.querySelector(".bg-status-error-bg");
     expect(iconContainer).toBeInTheDocument();
-    const icon = iconContainer?.querySelector(".text-red-600");
+    const icon = iconContainer?.querySelector(".text-accent-danger");
     expect(icon).toBeInTheDocument();
   });
 
   test("Error variant has red styling", () => {
     setupTest({ variant: "error" });
-    const iconContainer = document.querySelector(".bg-red-100");
-    expect(iconContainer).toHaveClass("bg-red-100");
+    const iconContainer = document.querySelector(".bg-status-error-bg");
+    expect(iconContainer).toHaveClass("bg-status-error-bg");
   });
 
   test("Error variant button uses red variant", () => {
     setupTest({ variant: "error" });
     const button = screen.getAllByText("OK")[0].closest("button");
     // Red variant has red styling
-    expect(button).toHaveClass("bg-red-700");
+    expect(button).toHaveClass("bg-accent-danger");
   });
 
   // Variant tests - Warning
   test("Renders warning variant with correct icon", () => {
     setupTest({ variant: "warning" });
     // ExclamationTriangleOutline icon should be present
-    const iconContainer = document.querySelector(".bg-amber-100");
+    const iconContainer = document.querySelector(".bg-status-warning-bg");
     expect(iconContainer).toBeInTheDocument();
-    const icon = iconContainer?.querySelector(".text-amber-600");
+    const icon = iconContainer?.querySelector(".text-accent-warning");
     expect(icon).toBeInTheDocument();
   });
 
   test("Warning variant has amber styling", () => {
     setupTest({ variant: "warning" });
-    const iconContainer = document.querySelector(".bg-amber-100");
-    expect(iconContainer).toHaveClass("bg-amber-100");
+    const iconContainer = document.querySelector(".bg-status-warning-bg");
+    expect(iconContainer).toHaveClass("bg-status-warning-bg");
   });
 
   test("Warning variant button uses default variant", () => {
     setupTest({ variant: "warning" });
     const button = screen.getAllByText("OK")[0].closest("button");
     // Default variant has primary/blue styling
-    expect(button).toHaveClass("bg-blue-700");
+    expect(button).toHaveClass("bg-brand-primary");
   });
 
   // Variant tests - Info
   test("Renders info variant with correct icon", () => {
     setupTest({ variant: "info" });
     // InfoCircleOutline icon should be present
-    const iconContainer = document.querySelector(".bg-blue-100");
+    const iconContainer = document.querySelector(".bg-status-info-bg");
     expect(iconContainer).toBeInTheDocument();
-    const icon = iconContainer?.querySelector(".text-blue-600");
+    const icon = iconContainer?.querySelector(".text-brand-primary");
     expect(icon).toBeInTheDocument();
   });
 
   test("Info variant has blue styling", () => {
     setupTest({ variant: "info" });
-    const iconContainer = document.querySelector(".bg-blue-100");
-    expect(iconContainer).toHaveClass("bg-blue-100");
+    const iconContainer = document.querySelector(".bg-status-info-bg");
+    expect(iconContainer).toHaveClass("bg-status-info-bg");
   });
 
   test("Info variant button uses default variant", () => {
     setupTest({ variant: "info" });
     const button = screen.getAllByText("OK")[0].closest("button");
     // Default variant has primary/blue styling
-    expect(button).toHaveClass("bg-blue-700");
+    expect(button).toHaveClass("bg-brand-primary");
   });
 
   test("Defaults to info variant when invalid variant provided", () => {
     setupTest({ variant: "invalid" });
     // Should fall back to info variant
-    const iconContainer = document.querySelector(".bg-blue-100");
+    const iconContainer = document.querySelector(".bg-status-info-bg");
     expect(iconContainer).toBeInTheDocument();
   });
 
@@ -337,29 +337,29 @@ describe("AlertModal Component Tests", () => {
     expect(header).toBeInTheDocument();
   });
 
-  // Dark mode styling tests
-  test("Success variant has dark mode classes", () => {
+  // Token-based styling tests
+  test("Success variant uses token-based classes", () => {
     setupTest({ variant: "success" });
-    const iconContainer = document.querySelector(".bg-green-100");
-    expect(iconContainer).toHaveClass("dark:bg-green-900/30");
+    const iconContainer = document.querySelector(".bg-status-success-bg");
+    expect(iconContainer).toBeInTheDocument();
   });
 
-  test("Error variant has dark mode classes", () => {
+  test("Error variant uses token-based classes", () => {
     setupTest({ variant: "error" });
-    const iconContainer = document.querySelector(".bg-red-100");
-    expect(iconContainer).toHaveClass("dark:bg-red-900/30");
+    const iconContainer = document.querySelector(".bg-status-error-bg");
+    expect(iconContainer).toBeInTheDocument();
   });
 
-  test("Warning variant has dark mode classes", () => {
+  test("Warning variant uses token-based classes", () => {
     setupTest({ variant: "warning" });
-    const iconContainer = document.querySelector(".bg-amber-100");
-    expect(iconContainer).toHaveClass("dark:bg-amber-900/30");
+    const iconContainer = document.querySelector(".bg-status-warning-bg");
+    expect(iconContainer).toBeInTheDocument();
   });
 
-  test("Info variant has dark mode classes", () => {
+  test("Info variant uses token-based classes", () => {
     setupTest({ variant: "info" });
-    const iconContainer = document.querySelector(".bg-blue-100");
-    expect(iconContainer).toHaveClass("dark:bg-blue-900/30");
+    const iconContainer = document.querySelector(".bg-status-info-bg");
+    expect(iconContainer).toBeInTheDocument();
   });
 
   // Integration tests
@@ -384,7 +384,7 @@ describe("AlertModal Component Tests", () => {
     expect(screen.getAllByText("Great").length).toBeGreaterThan(0);
 
     // Verify success styling
-    expect(document.querySelector(".bg-green-100")).toBeInTheDocument();
+    expect(document.querySelector(".bg-status-success-bg")).toBeInTheDocument();
 
     // Click button
     const button = screen.getAllByText("Great")[0];
@@ -416,7 +416,7 @@ describe("AlertModal Component Tests", () => {
       ).toBeGreaterThan(0);
 
       // Verify error styling
-      expect(document.querySelector(".bg-red-100")).toBeInTheDocument();
+      expect(document.querySelector(".bg-status-error-bg")).toBeInTheDocument();
 
       // Advance time to trigger auto-close
       await vi.advanceTimersByTimeAsync(2000);

package/dist/recipes/modals/AlertModal.svelte

@@ -51,23 +51,23 @@
   // Variant styles
   const variantStyles = {
     success: {
-      bg: 'bg-green-100 dark:bg-green-900/30',
-      icon: 'text-green-600 dark:text-green-400',
+      bg: 'bg-status-success-bg',
+      icon: 'text-accent-success',
       button: 'default'
     },
     error: {
-      bg: 'bg-red-100 dark:bg-red-900/30',
-      icon: 'text-red-600 dark:text-red-400',
+      bg: 'bg-status-error-bg',
+      icon: 'text-accent-danger',
       button: 'red'
     },
     warning: {
-      bg: 'bg-amber-100 dark:bg-amber-900/30',
-      icon: 'text-amber-600 dark:text-amber-400',
+      bg: 'bg-status-warning-bg',
+      icon: 'text-accent-warning',
       button: 'default'
     },
     info: {
-      bg: 'bg-blue-100 dark:bg-blue-900/30',
-      icon: 'text-blue-600 dark:text-blue-400',
+      bg: 'bg-status-info-bg',
+      icon: 'text-brand-primary',
       button: 'default'
     }
   };

package/dist/recipes/modals/ConfirmationModal.spec.js

@@ -67,7 +67,7 @@ describe("ConfirmationModal Component Tests", () => {
   test("Warning text has danger styling", () => {
     setupTest({ warningText: "Warning!" });
     const warning = screen.getAllByText("Warning!")[0];
-    expect(warning).toHaveClass("text-red-600");
+    expect(warning).toHaveClass("text-accent-danger");
     expect(warning).toHaveClass("font-medium");
   });
 
@@ -136,7 +136,7 @@ describe("ConfirmationModal Component Tests", () => {
     setupTest({ actions });
     const button = screen.getAllByText("Delete")[0].closest("button");
     // Button applies Tailwind classes for red variant
-    expect(button).toHaveClass("bg-red-700");
+    expect(button).toHaveClass("bg-accent-danger");
     expect(button).toHaveClass("text-white");
   });
 
@@ -147,9 +147,9 @@ describe("ConfirmationModal Component Tests", () => {
     setupTest({ actions });
     const button = screen.getAllByText("Remove")[0].closest("button, a");
     // Button applies Tailwind classes for red-outline variant
-    expect(button).toHaveClass("text-red-700");
+    expect(button).toHaveClass("text-status-error-text");
     expect(button).toHaveClass("bg-transparent");
-    expect(button).toHaveClass("border-red-700");
+    expect(button).toHaveClass("border-accent-danger");
   });
 
   test("Maps strokebtn + deemphasized to alternative variant", async () => {
@@ -159,9 +159,9 @@ describe("ConfirmationModal Component Tests", () => {
     setupTest({ actions });
     const button = screen.getAllByText("Cancel")[0].closest("button, a");
     // Button applies Tailwind classes for alternative variant
-    expect(button).toHaveClass("text-gray-900");
-    expect(button).toHaveClass("bg-white");
-    expect(button).toHaveClass("border-gray-200");
+    expect(button).toHaveClass("text-text-primary");
+    expect(button).toHaveClass("bg-card");
+    expect(button).toHaveClass("border-border");
   });
 
   test("Maps textBtn + danger to ghost-red variant", async () => {
@@ -171,7 +171,7 @@ describe("ConfirmationModal Component Tests", () => {
     setupTest({ actions });
     const button = screen.getAllByText("Delete Text")[0].closest("button, a");
     // Button applies Tailwind classes for ghost-red variant
-    expect(button).toHaveClass("text-red-700");
+    expect(button).toHaveClass("text-status-error-text");
     expect(button).toHaveClass("bg-transparent");
     expect(button).toHaveClass("border-transparent");
   });
@@ -183,9 +183,9 @@ describe("ConfirmationModal Component Tests", () => {
     setupTest({ actions });
     const button = screen.getAllByText("Custom")[0].closest("button, a");
     // Button applies Tailwind classes for outline variant
-    expect(button).toHaveClass("text-blue-700");
+    expect(button).toHaveClass("text-brand-primary");
     expect(button).toHaveClass("bg-transparent");
-    expect(button).toHaveClass("border-blue-700");
+    expect(button).toHaveClass("border-brand-primary");
   });
 
   test("Auto-maps Delete label to red variant", async () => {
@@ -193,7 +193,7 @@ describe("ConfirmationModal Component Tests", () => {
     setupTest({ actions });
     const button = screen.getAllByText("Delete")[0].closest("button, a");
     // Button applies Tailwind classes for red variant (auto-detected from "Delete" label)
-    expect(button).toHaveClass("bg-red-700");
+    expect(button).toHaveClass("bg-accent-danger");
     expect(button).toHaveClass("text-white");
   });
 
@@ -207,7 +207,7 @@ describe("ConfirmationModal Component Tests", () => {
   test("Description has proper styling", () => {
     setupTest({ description: "Description text" });
     const desc = screen.getAllByText("Description text")[0];
-    expect(desc).toHaveClass("text-gray-500");
+    expect(desc).toHaveClass("text-muted-foreground");
     expect(desc).toHaveClass("text-sm");
   });
 
@@ -310,16 +310,16 @@ describe("ConfirmationModal Component Tests", () => {
     const actions = [{ label: "Outline", onClick: vi.fn(), strokebtn: true }];
     setupTest({ actions });
     const button = screen.getAllByText("Outline")[0].closest("button, a");
-    expect(button).toHaveClass("text-blue-700");
+    expect(button).toHaveClass("text-brand-primary");
     expect(button).toHaveClass("bg-transparent");
-    expect(button).toHaveClass("border-blue-700");
+    expect(button).toHaveClass("border-brand-primary");
   });
 
   test("Maps btnDanger to red variant", () => {
     const actions = [{ label: "Danger", onClick: vi.fn(), btnDanger: true }];
     setupTest({ actions });
     const button = screen.getAllByText("Danger")[0].closest("button, a");
-    expect(button).toHaveClass("bg-red-700");
+    expect(button).toHaveClass("bg-accent-danger");
     expect(button).toHaveClass("text-white");
   });
 
@@ -327,9 +327,9 @@ describe("ConfirmationModal Component Tests", () => {
     const actions = [{ label: "OutlineDanger", onClick: vi.fn(), btnDanger: true, strokebtn: true }];
     setupTest({ actions });
     const button = screen.getAllByText("OutlineDanger")[0].closest("button, a");
-    expect(button).toHaveClass("text-red-700");
+    expect(button).toHaveClass("text-status-error-text");
     expect(button).toHaveClass("bg-transparent");
-    expect(button).toHaveClass("border-red-700");
+    expect(button).toHaveClass("border-accent-danger");
   });
 
   test("Builds actions from primaryButtonText and secondaryButtonText props", async () => {
@@ -378,19 +378,19 @@ describe("ConfirmationModal Component Tests", () => {
       variant: "danger"
     });
     const button = screen.getAllByText("Delete")[0].closest("button, a");
-    expect(button).toHaveClass("bg-red-700");
+    expect(button).toHaveClass("bg-accent-danger");
   });
 
   test("Does not render description when empty", () => {
     setupTest({ description: "" });
     // No <p> with muted style should exist in the body area for description
-    const bodyArea = document.querySelectorAll('p.text-gray-500');
+    const bodyArea = document.querySelectorAll('p.text-muted-foreground');
     expect(bodyArea.length).toBe(0);
   });
 
   test("Does not render warningText when empty", () => {
     setupTest({ warningText: "" });
-    const warnings = document.querySelectorAll('.text-red-600');
+    const warnings = document.querySelectorAll('.text-accent-danger');
     expect(warnings.length).toBe(0);
   });
 });

package/dist/recipes/modals/ConfirmationModal.svelte

@@ -143,7 +143,7 @@
         </p>
       {/if}
       {#if warningText}
-        <p class={`${typography.label} text-red-600 dark:text-red-400 mt-3`}>
+        <p class={`${typography.label} text-accent-danger mt-3`}>
           {warningText}
         </p>
       {/if}

package/dist/recipes/modals/FeedbackModal.svelte

@@ -117,9 +117,9 @@
           {labels.successMessage}
         </p>
         {#if successReferenceId}
-          <div class="bg-gray-50 dark:bg-gray-700 rounded-lg px-4 py-3">
-            <p class="text-sm text-gray-500 dark:text-gray-400">{labels.successReference}</p>
-            <p class="text-lg font-mono font-semibold text-gray-900 dark:text-white">{successReferenceId}</p>
+          <div class="bg-bg-secondary rounded-lg px-4 py-3">
+            <p class="text-sm text-muted-foreground">{labels.successReference}</p>
+            <p class="text-lg font-mono font-semibold text-text-primary">{successReferenceId}</p>
           </div>
         {/if}
       </div>
@@ -133,8 +133,8 @@
               type="button"
               class="px-3 py-1.5 text-sm rounded-full border transition-colors
                 {feedbackType === option.value
-                  ? 'bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 font-medium'
-                  : 'border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-gray-400 dark:hover:border-gray-500'}"
+                  ? 'bg-status-info-bg border-brand-primary text-brand-primary font-medium'
+                  : 'border-stroke-primary text-text-secondary hover:border-stroke-primary'}"
               onclick={() => feedbackType = option.value}
               disabled={loading}
             >
@@ -153,7 +153,7 @@
             bind:value={description}
             placeholder={placeholder}
             rows={4}
-            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 {typography.body} rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+            class="w-full px-3 py-2 border border-stroke-primary bg-bg-secondary {typography.body} rounded-lg focus:outline-hidden focus:ring-2 focus:ring-focus-ring focus:border-transparent resize-none"
             disabled={loading}
           ></textarea>
         </div>
@@ -167,7 +167,7 @@
             id="feedback-email"
             type="email"
             bind:value={contactEmail}
-            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg {typography.body} bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50"
+            class="w-full px-3 py-2 border border-stroke-primary rounded-lg {typography.body} bg-card focus:ring-2 focus:ring-focus-ring focus:border-transparent disabled:opacity-50"
             disabled={loading}
           />
         </div>

package/dist/recipes/modals/InputModal.spec.js

@@ -222,7 +222,7 @@ describe("InputModal Component Tests", () => {
       errorMessage: "Error"
     });
     const input = document.querySelector("input");
-    expect(input).toHaveClass("border-red-500");
+    expect(input).toHaveClass("border-status-error-border");
   });
 
   test("Textarea has error border when error is shown", () => {
@@ -232,7 +232,7 @@ describe("InputModal Component Tests", () => {
       errorMessage: "Error"
     });
     const textarea = document.querySelector("textarea");
-    expect(textarea).toHaveClass("border-red-500");
+    expect(textarea).toHaveClass("border-status-error-border");
   });
 
   test("Email error takes precedence over custom error message", async () => {
@@ -311,21 +311,21 @@ describe("InputModal Component Tests", () => {
     setupTest();
     const buttons = screen.getAllByText("Confirm");
     const primaryButton = buttons[0].closest("button");
-    expect(primaryButton).toHaveClass("bg-blue-700");
+    expect(primaryButton).toHaveClass("bg-brand-primary");
   });
 
   test("Primary button uses red-solid variant", () => {
     setupTest({ primaryButtonVariant: "red-solid" });
     const buttons = screen.getAllByText("Confirm");
     const primaryButton = buttons[0].closest("button");
-    expect(primaryButton).toHaveClass("bg-red-700");
+    expect(primaryButton).toHaveClass("bg-accent-danger");
   });
 
   test("Secondary button uses alternative variant", () => {
     setupTest();
     const buttons = screen.getAllByText("Cancel");
     const secondaryButton = buttons[0].closest("button");
-    expect(secondaryButton).toHaveClass("border-gray-200");
+    expect(secondaryButton).toHaveClass("border-border");
   });
 
   // Disabled state tests
@@ -589,7 +589,7 @@ describe("InputModal Component Tests", () => {
     setupTest();
     const input = document.querySelector("input");
     expect(input).toHaveClass("focus:ring-2");
-    expect(input).toHaveClass("focus:ring-blue-500");
+    expect(input).toHaveClass("focus:ring-focus-ring");
     expect(input).toHaveClass("focus:border-transparent");
   });
 
@@ -597,7 +597,7 @@ describe("InputModal Component Tests", () => {
     setupTest({ inputType: "textarea" });
     const textarea = document.querySelector("textarea");
     expect(textarea).toHaveClass("focus:ring-2");
-    expect(textarea).toHaveClass("focus:ring-blue-500");
+    expect(textarea).toHaveClass("focus:ring-focus-ring");
     expect(textarea).toHaveClass("focus:border-transparent");
   });
 
@@ -613,33 +613,33 @@ describe("InputModal Component Tests", () => {
     expect(label).toHaveClass("mb-2");
   });
 
-  // Dark mode styling tests
-  test("Input has dark mode classes", () => {
+  // Token-based styling tests
+  test("Input has token-based classes", () => {
     setupTest();
     const input = document.querySelector("input");
-    expect(input).toHaveClass("dark:bg-gray-700");
+    expect(input).toHaveClass("border");
   });
 
-  test("Textarea has dark mode classes", () => {
+  test("Textarea has token-based classes", () => {
     setupTest({ inputType: "textarea" });
     const textarea = document.querySelector("textarea");
-    expect(textarea).toHaveClass("dark:bg-gray-700");
-    expect(textarea).toHaveClass("dark:border-gray-600");
+    expect(textarea).toHaveClass("border");
+    expect(textarea).toHaveClass("resize-none");
   });
 
-  test("Input has dark mode border classes", () => {
+  test("Input has border classes", () => {
     setupTest();
     const input = document.querySelector("input");
-    expect(input).toHaveClass("dark:bg-gray-700");
+    expect(input).toHaveClass("border");
   });
 
-  test("Error message has dark mode classes", () => {
+  test("Error message has text styling", () => {
     setupTest({
       showError: true,
       errorMessage: "Test error"
     });
     const errorText = screen.getAllByText("Test error")[0];
-    expect(errorText).toHaveClass("dark:text-red-400");
+    expect(errorText).toBeInTheDocument();
   });
 
   // Integration tests

package/dist/recipes/modals/InputModal.svelte

@@ -130,7 +130,7 @@
             bind:value={inputValue}
             placeholder={inputPlaceholder}
             rows={inputRows}
-            class="w-full px-3 py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 {typography.body} rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+            class="w-full px-3 py-2 border {hasError ? 'border-status-error-border' : 'border-stroke-primary'} bg-bg-secondary {typography.body} rounded-lg focus:outline-hidden focus:ring-2 focus:ring-focus-ring focus:border-transparent resize-none"
             disabled={disabled || loading}
           ></textarea>
         {:else}
@@ -148,13 +148,13 @@
               placeholder={inputPlaceholder}
               required={inputRequired}
               disabled={disabled || loading}
-              class="w-full {inputIcon ? 'pl-10' : 'px-3'} py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-lg {typography.body} bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+              class="w-full {inputIcon ? 'pl-10' : 'px-3'} py-2 border {hasError ? 'border-status-error-border' : 'border-stroke-primary'} rounded-lg {typography.body} bg-card focus:ring-2 focus:ring-focus-ring focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
             />
           </div>
         {/if}
 
         {#if hasError && (errorMessage || emailError)}
-          <p class={`${typography.label} text-red-600 dark:text-red-400 mt-2 flex items-center gap-1`}>
+          <p class={`${typography.label} text-accent-danger mt-2 flex items-center gap-1`}>
             <ExclamationTriangleOutline class="w-4 h-4" />
             {emailError ? labels.invalidEmail : errorMessage}
           </p>

package/dist/recipes/modals/ModalStateManager.spec.js

@@ -83,7 +83,7 @@ describe("ModalStateManager Component Tests", () => {
     const { container } = render(ModalStateManager, {
       props: { isProcessing: true, isSuccess: false },
     });
-    const spinnerBg = container.querySelector(".bg-orange-300");
+    const spinnerBg = container.querySelector(".bg-accent-warning");
     expect(spinnerBg).toBeInTheDocument();
   });
 

package/dist/recipes/modals/ModalStateManager.svelte

@@ -40,8 +40,8 @@
     processingMessage = "Processing your request",
     successButtonText = "Continue",
     onSuccessClose = () => {},
-    successIconColor = "text-green-600",
-    processingIconBgColor = "bg-orange-300",
+    successIconColor = "text-accent-success",
+    processingIconBgColor = "bg-accent-warning",
     children
   }: Props = $props();
 </script>

package/dist/recipes/modals/StatusModal.spec.js

@@ -71,31 +71,31 @@ describe("StatusModal Component Tests", () => {
     test("Renders success icon by default", () => {
       setupTest();
       // Success icon should be present
-      const container = document.querySelector(".bg-green-100");
+      const container = document.querySelector(".bg-status-success-bg");
       expect(container).toBeInTheDocument();
     });
 
     test("Renders success icon when iconType is success", () => {
       setupTest({ iconType: "success" });
-      const container = document.querySelector(".bg-green-100");
+      const container = document.querySelector(".bg-status-success-bg");
       expect(container).toBeInTheDocument();
     });
 
     test("Renders error icon when iconType is error", () => {
       setupTest({ iconType: "error" });
-      const container = document.querySelector(".bg-red-100");
+      const container = document.querySelector(".bg-status-error-bg");
       expect(container).toBeInTheDocument();
     });
 
     test("Renders warning icon when iconType is warning", () => {
       setupTest({ iconType: "warning" });
-      const container = document.querySelector(".bg-amber-100");
+      const container = document.querySelector(".bg-status-warning-bg");
       expect(container).toBeInTheDocument();
     });
 
     test("Renders info icon when iconType is info", () => {
       setupTest({ iconType: "info" });
-      const container = document.querySelector(".bg-blue-100");
+      const container = document.querySelector(".bg-status-info-bg");
       expect(container).toBeInTheDocument();
     });
 
@@ -507,13 +507,13 @@ describe("StatusModal Component Tests", () => {
   describe("Variant Override", () => {
     test("Uses variant prop over iconType when both provided", () => {
       setupTest({ iconType: "success", variant: "error" });
-      const container = document.querySelector(".bg-red-100");
+      const container = document.querySelector(".bg-status-error-bg");
       expect(container).toBeInTheDocument();
     });
 
     test("Falls back to iconType when variant not provided", () => {
       setupTest({ iconType: "warning" });
-      const container = document.querySelector(".bg-amber-100");
+      const container = document.querySelector(".bg-status-warning-bg");
       expect(container).toBeInTheDocument();
     });
   });

package/dist/recipes/modals/StatusModal.svelte

@@ -80,28 +80,28 @@
     switch (type) {
       case "success":
         return {
-          bg: "bg-green-100 dark:bg-green-900/30",
-          icon: "text-green-600 dark:text-green-400",
+          bg: "bg-status-success-bg",
+          icon: "text-accent-success",
         };
       case "error":
         return {
-          bg: "bg-red-100 dark:bg-red-900/30",
-          icon: "text-red-600 dark:text-red-400",
+          bg: "bg-status-error-bg",
+          icon: "text-accent-danger",
         };
       case "warning":
         return {
-          bg: "bg-amber-100 dark:bg-amber-900/30",
-          icon: "text-amber-600 dark:text-amber-400",
+          bg: "bg-status-warning-bg",
+          icon: "text-accent-warning",
         };
       case "info":
         return {
-          bg: "bg-blue-100 dark:bg-blue-900/30",
-          icon: "text-blue-600 dark:text-blue-400",
+          bg: "bg-status-info-bg",
+          icon: "text-brand-primary",
         };
       default:
         return {
-          bg: "bg-green-100 dark:bg-green-900/30",
-          icon: "text-green-600 dark:text-green-400",
+          bg: "bg-status-success-bg",
+          icon: "text-accent-success",
         };
     }
   };