From 06b0d03c3180be73029126125e7e55c259b88a39 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 3 Feb 2026 22:22:47 +0000
Subject: [PATCH] fix(ui): align stop button icon contrast

Use --text-inverted for stop button icon color in dark mode so it matches send button styling, with a safe fallback in CSS.
---
 packages/ui/src/styles/messaging/prompt-input.css | 2 +-
 packages/ui/src/styles/tokens.css                 | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css
index bd0f542d..4797c241 100644
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -167,7 +167,7 @@
 .stop-button {
   @apply w-10 h-10 rounded-md border-none cursor-pointer flex items-center justify-center transition-all flex-shrink-0;
   background-color: var(--button-danger-bg, rgba(239, 68, 68, 0.85));
-  color: var(--button-danger-text, #ffffff);
+  color: var(--button-danger-text, var(--text-inverted, #ffffff));
 }
 
 .stop-button:hover:not(:disabled) {
diff --git a/packages/ui/src/styles/tokens.css b/packages/ui/src/styles/tokens.css
index db1df788..41468de7 100644
--- a/packages/ui/src/styles/tokens.css
+++ b/packages/ui/src/styles/tokens.css
@@ -106,7 +106,7 @@
   --button-danger-bg: rgba(239, 68, 68, 0.85);
   --button-danger-hover-bg: rgba(239, 68, 68, 0.9);
   --button-danger-active-bg: rgba(239, 68, 68, 1);
-  --button-danger-text: #ffffff;
+  --button-danger-text: var(--text-inverted);
   --kbd-bg: var(--surface-secondary);
   --kbd-border: var(--border-base);
   --kbd-text: var(--text-primary);
@@ -258,7 +258,7 @@
   --timeline-segment-active-bg: #0f5b44;
   --timeline-segment-active-text: #ffffff;
   --timeline-segment-active-ring: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
-  --button-danger-text: #ffffff;
+  --button-danger-text: var(--text-inverted);
   --button-primary-bg: #3f3f46;
   --button-primary-hover-bg: #52525b;
   --button-primary-text: #f5f6f8;
@@ -425,7 +425,7 @@
   --timeline-segment-active-bg: #0f5b44;
   --timeline-segment-active-text: #ffffff;
   --timeline-segment-active-ring: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
-  --button-danger-text: #ffffff;
+  --button-danger-text: var(--text-inverted);
   --message-error-bg: rgba(244, 67, 54, 0.12);
   --message-error-bg-strong: rgba(244, 67, 54, 0.2);
   --danger-soft-bg: rgba(244, 67, 54, 0.16);