From 11234de8207f32f8ec741dd4bedfb0e610f39d5a Mon Sep 17 00:00:00 2001
From: zerone0x <hi@trine.dev>
Date: Mon, 12 Jan 2026 18:19:12 +0800
Subject: [PATCH] fix(ui): use explicit light text colors for toast on dark
 float surface

The toast component uses --surface-float-base which is a dark surface in
both light and dark modes. However, it was using --text-invert-* variables
for text colors, which don't properly resolve to light colors in light mode
due to the neutralAlpha calculation in the theme resolver.

This causes toast text to be unreadable (dark text on dark background)
in light mode.

Fix by using explicit --smoke-dark-* colors which are always light colors
suitable for dark backgrounds:
- Title/icon: --smoke-dark-12 (#f1ecec, near-white)
- Description/base: --smoke-dark-11 (#b7b1b1, light gray)
- Action weak: --smoke-dark-9 (#716c6b, medium gray)

Fixes #7833

Co-Authored-By: Claude <noreply@anthropic.com>
---
 packages/ui/src/components/toast.css | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/toast.css b/packages/ui/src/components/toast.css
index 1459bb18903..77c03c4c7d4 100644
--- a/packages/ui/src/components/toast.css
+++ b/packages/ui/src/components/toast.css
@@ -31,7 +31,7 @@
   border-radius: var(--radius-lg);
   border: 1px solid var(--border-weak-base);
   background: var(--surface-float-base);
-  color: var(--text-invert-base);
+  color: var(--smoke-dark-11);
   box-shadow: var(--shadow-md);
 
   [data-slot="toast-inner"] {
@@ -80,8 +80,7 @@
     justify-content: center;
 
     [data-component="icon"] {
-      color: var(--text-invert-stronger);
-      /* color: var(--icon-invert-base); */
+      color: var(--smoke-dark-12);
     }
   }
 
@@ -94,7 +93,7 @@
   }
 
   [data-slot="toast-title"] {
-    color: var(--text-invert-strong);
+    color: var(--smoke-dark-12);
 
     /* text-14-medium */
     font-family: var(--font-family-sans);
@@ -108,7 +107,7 @@
   }
 
   [data-slot="toast-description"] {
-    color: var(--text-invert-base);
+    color: var(--smoke-dark-11);
     text-wrap-style: pretty;
 
     /* text-14-regular */
@@ -134,7 +133,7 @@
     padding: 0;
     cursor: pointer;
 
-    color: var(--text-invert-weak);
+    color: var(--smoke-dark-9);
     font-family: var(--font-family-sans);
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
@@ -146,7 +145,7 @@
     }
 
     &:first-child {
-      color: var(--text-invert-strong);
+      color: var(--smoke-dark-12);
     }
   }