From 25e6cd38b653fb7a274b13acc3487652b5ab0670 Mon Sep 17 00:00:00 2001
From: Val Alexander <68980965+BunsDev@users.noreply.github.com>
Date: Tue, 17 Mar 2026 21:56:50 -0500
Subject: [PATCH] UI: mute sidebar and chat input accent colors (#49390)

* Refactor CSS styles: replace hardcoded colors with CSS variables for accent colors and optimize spacing rules in layout files.

* Update CSS styles: streamline selectors, enhance hover effects, and adjust focus states for chat components and layout elements.

* Enhance focus styles for chat components: update border colors and box-shadow effects for improved accessibility and visual consistency.
---
 ui/src/styles/chat/layout.css   | 22 +++++++++++-----------
 ui/src/styles/components.css    | 31 +++++++++++++++++++++----------
 ui/src/styles/layout.css        | 22 ++++++++++------------
 ui/src/styles/layout.mobile.css |  4 ++--
 4 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
index 2726d7041f6..ee8cfaf2850 100644
--- a/ui/src/styles/chat/layout.css
+++ b/ui/src/styles/chat/layout.css
@@ -63,7 +63,7 @@
   background: transparent;
 }
 
-.chat-thread-inner > :first-child {
+.chat-thread-inner> :first-child {
   margin-top: 0 !important;
 }
 
@@ -320,7 +320,7 @@
 }
 
 /* Hide the "Message" label - keep textarea only */
-.chat-compose__field > span {
+.chat-compose__field>span {
   display: none;
 }
 
@@ -380,8 +380,8 @@
 }
 
 .agent-chat__input:focus-within {
-  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 8%, transparent);
+  border-color: var(--border-strong);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--border-strong) 24%, transparent);
 }
 
 @supports (backdrop-filter: blur(1px)) {
@@ -391,7 +391,7 @@
   }
 }
 
-.agent-chat__input > textarea {
+.agent-chat__input>textarea {
   width: 100%;
   min-height: 40px;
   max-height: 150px;
@@ -407,7 +407,7 @@
   box-sizing: border-box;
 }
 
-.agent-chat__input > textarea::placeholder {
+.agent-chat__input>textarea::placeholder {
   color: var(--muted);
 }
 
@@ -494,8 +494,8 @@
   height: 30px;
   border-radius: var(--radius-md);
   border: none;
-  background: var(--accent);
-  color: var(--accent-foreground);
+  background: var(--muted-strong);
+  color: var(--text-strong);
   cursor: pointer;
   flex-shrink: 0;
   transition:
@@ -515,8 +515,8 @@
 }
 
 .chat-send-btn:hover:not(:disabled) {
-  background: var(--accent-hover);
-  box-shadow: 0 2px 10px rgba(255, 92, 92, 0.25);
+  background: var(--muted);
+  box-shadow: none;
 }
 
 .chat-send-btn:disabled {
@@ -549,7 +549,7 @@
   scrollbar-width: thin;
 }
 
-.slash-menu-group + .slash-menu-group {
+.slash-menu-group+.slash-menu-group {
   margin-top: 4px;
   padding-top: 4px;
   border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index e1373744be3..95fbd539f36 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -173,9 +173,11 @@
   opacity: 0.7;
   transition: opacity 0.15s;
 }
+
 .update-banner__close:hover {
   opacity: 1;
 }
+
 .update-banner__close svg {
   width: 16px;
   height: 16px;
@@ -1017,11 +1019,11 @@
   position: relative;
 }
 
-.cron-filter-dropdown__details > summary {
+.cron-filter-dropdown__details>summary {
   list-style: none;
 }
 
-.cron-filter-dropdown__details > summary::-webkit-details-marker {
+.cron-filter-dropdown__details>summary::-webkit-details-marker {
   display: none;
 }
 
@@ -1643,6 +1645,7 @@
 }
 
 @media (max-width: 1100px) {
+
   .table-head,
   .table-row {
     grid-template-columns: 1fr;
@@ -1650,6 +1653,7 @@
 }
 
 @container (max-width: 1100px) {
+
   .table-head,
   .table-row {
     grid-template-columns: 1fr;
@@ -2302,10 +2306,12 @@
 }
 
 @keyframes chatStreamPulse {
+
   0%,
   100% {
     border-color: var(--border);
   }
+
   50% {
     border-color: var(--accent);
   }
@@ -2335,7 +2341,7 @@
   height: 12px;
 }
 
-.chat-reading-indicator__dots > span {
+.chat-reading-indicator__dots>span {
   display: inline-block;
   width: 6px;
   height: 6px;
@@ -2347,21 +2353,23 @@
   will-change: transform, opacity;
 }
 
-.chat-reading-indicator__dots > span:nth-child(2) {
+.chat-reading-indicator__dots>span:nth-child(2) {
   animation-delay: 0.15s;
 }
 
-.chat-reading-indicator__dots > span:nth-child(3) {
+.chat-reading-indicator__dots>span:nth-child(3) {
   animation-delay: 0.3s;
 }
 
 @keyframes chatReadingDot {
+
   0%,
   80%,
   100% {
     opacity: 0.4;
     transform: translateY(0);
   }
+
   40% {
     opacity: 1;
     transform: translateY(-3px);
@@ -2369,7 +2377,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .chat-reading-indicator__dots > span {
+  .chat-reading-indicator__dots>span {
     animation: none;
     opacity: 0.6;
   }
@@ -2603,8 +2611,8 @@
 }
 
 .chat-compose__field textarea:focus {
-  border-color: var(--ring);
-  box-shadow: var(--focus-ring);
+  border-color: var(--border-strong);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--border-strong) 24%, transparent);
 }
 
 .chat-compose__field textarea:disabled {
@@ -3055,7 +3063,7 @@
   min-width: 0;
 }
 
-.agent-kv > div {
+.agent-kv>div {
   min-width: 0;
   overflow-wrap: anywhere;
   word-break: break-word;
@@ -3310,7 +3318,7 @@
   gap: 8px;
 }
 
-.agent-skills-header > span:last-child {
+.agent-skills-header>span:last-child {
   margin-left: auto;
 }
 
@@ -3573,12 +3581,15 @@
 .ov-cards .ov-card:nth-child(1) {
   animation-delay: 0ms;
 }
+
 .ov-cards .ov-card:nth-child(2) {
   animation-delay: 50ms;
 }
+
 .ov-cards .ov-card:nth-child(3) {
   animation-delay: 100ms;
 }
+
 .ov-cards .ov-card:nth-child(4) {
   animation-delay: 150ms;
 }
diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css
index ac87e1b106c..559cb919098 100644
--- a/ui/src/styles/layout.css
+++ b/ui/src/styles/layout.css
@@ -70,7 +70,7 @@
   padding-top: 0;
 }
 
-.shell--chat-focus .content > * + * {
+.shell--chat-focus .content>*+* {
   margin-top: 0;
 }
 
@@ -682,18 +682,16 @@
   bottom: 10px;
   width: 3px;
   border-radius: 999px;
-  background: color-mix(in srgb, #2de3d1 86%, transparent);
-  box-shadow: 0 0 14px color-mix(in srgb, #2de3d1 34%, transparent);
+  background: color-mix(in srgb, var(--accent) 86%, transparent);
+  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 34%, transparent);
 }
 
 .sidebar--collapsed .nav-item.active,
 .sidebar--collapsed .nav-item--active {
-  background: linear-gradient(
-    180deg,
-    color-mix(in srgb, #0b2f34 84%, var(--bg-elevated) 16%) 0%,
-    color-mix(in srgb, #081f25 90%, var(--bg) 10%) 100%
-  );
-  border-color: color-mix(in srgb, #1ed2c2 18%, var(--border) 82%);
+  background: linear-gradient(180deg,
+      color-mix(in srgb, var(--accent) 14%, var(--bg-elevated) 86%) 0%,
+      color-mix(in srgb, var(--accent) 8%, var(--bg) 92%) 100%);
+  border-color: color-mix(in srgb, var(--accent) 18%, var(--border) 82%);
   box-shadow:
     inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
     0 10px 20px color-mix(in srgb, black 18%, transparent);
@@ -855,7 +853,7 @@
   overflow-x: hidden;
 }
 
-.content > * + * {
+.content>*+* {
   margin-top: 20px;
 }
 
@@ -871,7 +869,7 @@
   padding-bottom: 0;
 }
 
-.content--chat > * + * {
+.content--chat>*+* {
   margin-top: 0;
 }
 
@@ -930,7 +928,7 @@
   padding-bottom: 0;
 }
 
-.content--chat .content-header > div:first-child {
+.content--chat .content-header>div:first-child {
   text-align: left;
 }
 
diff --git a/ui/src/styles/layout.mobile.css b/ui/src/styles/layout.mobile.css
index cb5818190bd..d9fc3768603 100644
--- a/ui/src/styles/layout.mobile.css
+++ b/ui/src/styles/layout.mobile.css
@@ -191,8 +191,8 @@
     bottom: 10px;
     width: 3px;
     border-radius: 999px;
-    background: color-mix(in srgb, #2de3d1 86%, transparent);
-    box-shadow: 0 0 14px color-mix(in srgb, #2de3d1 34%, transparent);
+    background: color-mix(in srgb, var(--accent) 86%, transparent);
+    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 34%, transparent);
   }
 
   .sidebar--collapsed .sidebar-shell__footer {