From db4883e0a7c75e3bd7b1d2a117e791ef43d7b01f Mon Sep 17 00:00:00 2001
From: senke <okin.tcs@gmail.com>
Date: Mon, 9 Feb 2026 00:12:29 +0100
Subject: [PATCH] ui(tokens): migrate Toast component to semantic design system
 tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace legacy color tokens in Toast component:
- border-kodo-lime → border-success
- border-kodo-red → border-destructive
- text-kodo-lime → text-success
- text-kodo-red → text-destructive
- text-kodo-steel → text-muted-foreground
- text-white → text-foreground
- bg-kodo-ink/90 → bg-card/90
- hover:text-white → hover:text-foreground

Toast now adapts correctly to light/dark theme.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/src/components/ui/Toast.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/ui/Toast.tsx b/apps/web/src/components/ui/Toast.tsx
index a2610590c..099635c93 100644
--- a/apps/web/src/components/ui/Toast.tsx
+++ b/apps/web/src/components/ui/Toast.tsx
@@ -81,15 +81,15 @@ export const Toast: React.FC<ToastProps> = ({ id, type, message, onClose }) => {
   }, [id, onClose]);
 
   const styles = {
-    success: 'border-kodo-lime text-white bg-kodo-ink/90',
-    error: 'border-kodo-red text-white bg-kodo-ink/90',
-    info: 'border-border text-white bg-kodo-ink/90',
+    success: 'border-success text-foreground bg-card/90',
+    error: 'border-destructive text-foreground bg-card/90',
+    info: 'border-border text-foreground bg-card/90',
   };
 
   const icons = {
-    success: <CheckCircle className="w-5 h-5 text-kodo-lime" />,
-    error: <AlertCircle className="w-5 h-5 text-kodo-red" />,
-    info: <Info className="w-5 h-5 text-kodo-steel" />,
+    success: <CheckCircle className="w-5 h-5 text-success" />,
+    error: <AlertCircle className="w-5 h-5 text-destructive" />,
+    info: <Info className="w-5 h-5 text-muted-foreground" />,
   };
 
   return (
@@ -101,7 +101,7 @@ export const Toast: React.FC<ToastProps> = ({ id, type, message, onClose }) => {
       <p className="flex-1 text-sm font-medium">{message}</p>
       <button
         onClick={() => onClose(id)}
-        className="text-muted-foreground hover:text-white transition-colors"
+        className="text-muted-foreground hover:text-foreground transition-colors"
       >
         <X className="w-4 h-4" />
       </button>