From 9adbeea0351b2620c3e569c8e9f8a49c6f769434 Mon Sep 17 00:00:00 2001
From: alejandrobailo <alejandrobailo94@gmail.com>
Date: Tue, 24 Feb 2026 12:04:42 +0100
Subject: [PATCH] fix(ui): use design tokens in wizard stepper

---
 ui/components/providers/wizard/wizard-stepper.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/components/providers/wizard/wizard-stepper.tsx b/ui/components/providers/wizard/wizard-stepper.tsx
index 2ae67291ee..44039becec 100644
--- a/ui/components/providers/wizard/wizard-stepper.tsx
+++ b/ui/components/providers/wizard/wizard-stepper.tsx
@@ -76,14 +76,14 @@ export function WizardStepper({
               <span
                 className={cn(
                   "text-lg leading-7 font-normal",
-                  isActive && "text-[#f4f4f5]",
-                  isComplete && "text-[#f4f4f5]",
-                  isInactive && "text-[#f4f4f5]/60",
+                  isActive && "text-text-neutral-primary",
+                  isComplete && "text-text-neutral-primary",
+                  isInactive && "text-text-neutral-tertiary",
                 )}
               >
                 {step.label}
               </span>
-              <p className="text-xs leading-5 text-[#d4d4d8]">
+              <p className="text-text-neutral-secondary text-xs leading-5">
                 {step.description}
               </p>
             </div>
@@ -111,15 +111,15 @@ function StepCircle({ isComplete, isActive, icon: Icon }: StepCircleProps) {
 
   if (isActive) {
     return (
-      <div className="border-border-input-primary-pressed flex size-[44px] shrink-0 items-center justify-center rounded-full border bg-[#121110]">
+      <div className="border-border-input-primary-pressed bg-bg-neutral-secondary flex size-[44px] shrink-0 items-center justify-center rounded-full border">
         <StepIcon icon={Icon} className="text-border-input-primary-pressed" />
       </div>
     );
   }
 
   return (
-    <div className="flex size-[44px] shrink-0 items-center justify-center rounded-full border border-[#202020] bg-[#121110]">
-      <StepIcon icon={Icon} className="text-[#525252]" />
+    <div className="border-border-neutral-secondary bg-bg-neutral-secondary flex size-[44px] shrink-0 items-center justify-center rounded-full border">
+      <StepIcon icon={Icon} className="text-text-neutral-tertiary" />
     </div>
   );
 }