From 9d5a31d559b20c460bbb9554dd0014dd527c8c13 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Wed, 6 May 2026 11:15:29 -0700
Subject: [PATCH] fix(ui): use tokenized status colors

---
 packages/ui/src/components/Badge.tsx         | 21 +++++++++++---------
 packages/ui/src/components/ConfirmDialog.tsx |  4 ++--
 packages/ui/src/components/Toast.tsx         |  8 ++++----
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/ui/src/components/Badge.tsx b/packages/ui/src/components/Badge.tsx
index e3582b32..e06ac456 100644
--- a/packages/ui/src/components/Badge.tsx
+++ b/packages/ui/src/components/Badge.tsx
@@ -8,20 +8,23 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 
 const variantStyles: Record<string, string> = {
-  success: 'bg-green-500/10 text-green-400 border-green-500/20',
-  warning: 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20',
-  error: 'bg-red-500/10 text-red-400 border-red-500/20',
-  info: 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+  success:
+    'bg-[var(--bl-success-muted,var(--bl-surface-muted))] text-[var(--bl-success)] border-[var(--bl-success-border,var(--bl-success))]',
+  warning:
+    'bg-[var(--bl-warning-muted,var(--bl-surface-muted))] text-[var(--bl-warning)] border-[var(--bl-warning-border,var(--bl-warning))]',
+  error:
+    'bg-[var(--bl-danger-muted,var(--bl-surface-muted))] text-[var(--bl-danger)] border-[var(--bl-danger-border,var(--bl-danger))]',
+  info: 'bg-[var(--bl-info-muted,var(--bl-surface-muted))] text-[var(--bl-info,var(--bl-accent))] border-[var(--bl-info-border,var(--bl-info,var(--bl-accent)))]',
   neutral:
     'bg-[var(--bl-surface-muted,#252540)] text-[var(--bl-text-secondary,#a0a0b0)] border-[var(--bl-border,#2a2a4a)]',
 };
 
 const dotColors: Record<string, string> = {
-  success: 'bg-green-400',
-  error: 'bg-red-400',
-  warning: 'bg-yellow-400',
-  info: 'bg-blue-400',
-  neutral: 'bg-gray-400',
+  success: 'bg-[var(--bl-success)]',
+  error: 'bg-[var(--bl-danger)]',
+  warning: 'bg-[var(--bl-warning)]',
+  info: 'bg-[var(--bl-info,var(--bl-accent))]',
+  neutral: 'bg-[var(--bl-text-tertiary,var(--bl-text-secondary))]',
 };
 
 export function Badge({
diff --git a/packages/ui/src/components/ConfirmDialog.tsx b/packages/ui/src/components/ConfirmDialog.tsx
index abedb317..929ad1a0 100644
--- a/packages/ui/src/components/ConfirmDialog.tsx
+++ b/packages/ui/src/components/ConfirmDialog.tsx
@@ -46,8 +46,8 @@ export function ConfirmDialog({
               className={clsx(
                 'mt-0.5 rounded-full p-2',
                 variant === 'destructive'
-                  ? 'bg-red-500/10 text-red-400'
-                  : 'bg-yellow-500/10 text-yellow-400'
+                  ? 'bg-[var(--bl-danger-muted,var(--bl-surface-muted))] text-[var(--bl-danger)]'
+                  : 'bg-[var(--bl-warning-muted,var(--bl-surface-muted))] text-[var(--bl-warning)]'
               )}
             >
               <AlertTriangle className="h-5 w-5" />
diff --git a/packages/ui/src/components/Toast.tsx b/packages/ui/src/components/Toast.tsx
index 8a912749..e0152ddb 100644
--- a/packages/ui/src/components/Toast.tsx
+++ b/packages/ui/src/components/Toast.tsx
@@ -37,10 +37,10 @@ export function useToast() {
 }
 
 const icons: Record<string, React.ReactNode> = {
-  success: <CheckCircle className="h-5 w-5 text-green-400" />,
-  error: <AlertCircle className="h-5 w-5 text-red-400" />,
-  warning: <AlertTriangle className="h-5 w-5 text-yellow-400" />,
-  info: <Info className="h-5 w-5 text-blue-400" />,
+  success: <CheckCircle className="h-5 w-5 text-[var(--bl-success)]" />,
+  error: <AlertCircle className="h-5 w-5 text-[var(--bl-danger)]" />,
+  warning: <AlertTriangle className="h-5 w-5 text-[var(--bl-warning)]" />,
+  info: <Info className="h-5 w-5 text-[var(--bl-info,var(--bl-accent))]" />,
 };
 
 export function Toast({ message, onDismiss }: { message: ToastMessage; onDismiss: () => void }) {