From a050f9f506f048cb9d24156f500c89b6c7bef4cc Mon Sep 17 00:00:00 2001 From: Daniel Gordon Date: Wed, 19 Aug 2026 17:22:15 +0000 Subject: [PATCH] fix(web): make hover states visible in the Solarized dark theme The Solarized dark block assigned --card, --popover, --secondary, --muted and --accent the same literal #073642, so every hover surface repainted its host surface in its own color. Menu items (data-highlighted:bg-accent), row action buttons (hover:bg-accent) and the hover:bg-muted rows across settings, tabs and git controls had no visible hover at all -- most noticeably the project picker, where only the checked row was tinted. Express secondary/muted/accent as translucent lifts of the Solarized foreground instead, mirroring what the default dark theme already does. Composited over the app background these land within a point or two of the old #073642, so flat panels are unchanged; over cards and glass popovers they now lift. --accent at 12% also stays clear of the project picker's checked background (foreground/8%). Co-Authored-By: Claude Opus 5 (1M context) --- apps/web/src/index.css | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 21b42494350c..dc7f845aff07 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -946,12 +946,18 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil --popover-foreground: #93a1a1; --primary: #268bd2; --primary-foreground: #fdf6e3; - --secondary: #073642; + /* Solarized only ships two dark background tones (base03/base02), so a + literal #073642 here would equal --card/--popover and every hover state + (hover:bg-accent, hover:bg-muted, data-highlighted:bg-accent) would + repaint a surface its own color -- invisible. Mirror the default dark + theme and express these as translucent lifts so they read on top of + whatever surface they land on, glass popovers included. */ + --secondary: color-mix(in srgb, #93a1a1 7%, transparent); --secondary-foreground: #93a1a1; - --muted: #073642; + --muted: color-mix(in srgb, #93a1a1 8%, transparent); --muted-foreground: #657b83; - --accent: #073642; - --accent-foreground: #93a1a1; + --accent: color-mix(in srgb, #93a1a1 12%, transparent); + --accent-foreground: #eee8d5; --destructive: #dc322f; --destructive-foreground: #e56b68; --border: #0a3d49;