From 8018290fba85580a93a1c63d99b6a3b80d7d1c18 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 30 Jan 2026 22:22:27 +0800
Subject: [PATCH] fix(ui): add semantic colors to sonner toast icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

success → emerald-500, info → blue-500, warning → amber-500,
error → red-500, loading → muted-foreground.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 packages/ui/src/components/chat-input.tsx |  4 ++--
 packages/ui/src/components/ui/sonner.tsx  | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/chat-input.tsx b/packages/ui/src/components/chat-input.tsx
index 3559a532..ae9d2610 100644
--- a/packages/ui/src/components/chat-input.tsx
+++ b/packages/ui/src/components/chat-input.tsx
@@ -35,8 +35,8 @@ export function ChatInput() {
         className="w-full resize-none bg-transparent px-1 py-1 text-sm text-foreground outline-none placeholder:text-muted-foreground"
       />
       <div className="flex items-center justify-end pt-2">
-        <Button size="icon-sm" onClick={handleSubmit}>
-          <HugeiconsIcon icon={ArrowUpIcon} />
+        <Button size="icon" onClick={handleSubmit}>
+          <HugeiconsIcon strokeWidth={2.5} icon={ArrowUpIcon} />
         </Button>
       </div>
     </div>
diff --git a/packages/ui/src/components/ui/sonner.tsx b/packages/ui/src/components/ui/sonner.tsx
index 9b080962..8aa1ce36 100644
--- a/packages/ui/src/components/ui/sonner.tsx
+++ b/packages/ui/src/components/ui/sonner.tsx
@@ -14,19 +14,19 @@ const Toaster = ({ ...props }: ToasterProps) => {
       className="toaster group"
       icons={{
         success: (
-          <HugeiconsIcon icon={CheckmarkCircle02Icon} strokeWidth={2} className="size-4" />
+          <HugeiconsIcon icon={CheckmarkCircle02Icon} strokeWidth={2} className="size-4 text-emerald-500" />
         ),
         info: (
-          <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={2} className="size-4" />
+          <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={2} className="size-4 text-blue-500" />
         ),
         warning: (
-          <HugeiconsIcon icon={Alert02Icon} strokeWidth={2} className="size-4" />
+          <HugeiconsIcon icon={Alert02Icon} strokeWidth={2} className="size-4 text-amber-500" />
         ),
         error: (
-          <HugeiconsIcon icon={MultiplicationSignCircleIcon} strokeWidth={2} className="size-4" />
+          <HugeiconsIcon icon={MultiplicationSignCircleIcon} strokeWidth={2} className="size-4 text-red-500" />
         ),
         loading: (
-          <HugeiconsIcon icon={Loading03Icon} strokeWidth={2} className="size-4 animate-spin" />
+          <HugeiconsIcon icon={Loading03Icon} strokeWidth={2} className="size-4 text-muted-foreground animate-spin" />
         ),
       }}
       style={