fix(web): make hover states visible in the Solarized dark theme - #51
Merged
Conversation
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) <noreply@anthropic.com>
github-actions
Bot
added
vouch:trusted
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Hovering a project in the sidebar's project picker produced no visible highlight — only the currently-scoped project showed a tint (its
data-checkedbackground), so the menu read as inert.Root cause
Solarized ships only two dark background tones (base03/base02), and the scheme block assigned
--card,--popover,--secondary,--mutedand--accentthe same literal#073642. Every hover surface therefore repainted its host surface in its host surface's own color:data-highlighted:bg-accent— all menu/dropdown items (apps/web/src/components/ui/menu.tsx:161)hover:bg-accent— 52 call sites, including the per-project…action buttonhover:bg-muted— 19 call sites across settings, right-panel tabs, git controls, toastsSidebar rows were unaffected because
--sidebar-row-hoveris already an alpha overlay, which is why the breakage looked specific to the menu.Fix
Express
--secondary/--muted/--accentas translucent lifts of the Solarized foreground, mirroring what the default dark theme already does (--accent: white/4%), and darken--accent-foregroundto#eee8d5so text lifts along with the surface.Composited over the app background
#002b36, 7–8% of#93a1a1lands on ~rgb(10-12, 54, 65)— within a point or two of the old#073642— so flat panels and muted surfaces are visually unchanged. Over cards and glass popovers they now sit a step brighter.--accentat 12% stays clearly above the project picker's checked background (foreground/8%), so hovered and selected rows remain distinguishable.Testing
Traced statically; not verified in a browser (per-request, the spare-port test deploy was skipped). Solarized light is untouched.
🤖 Generated with Claude Code