fix(ui): improve selected and hover contrast across the app#140
Open
cashcon57 wants to merge 6 commits into
Open
fix(ui): improve selected and hover contrast across the app#140cashcon57 wants to merge 6 commits into
cashcon57 wants to merge 6 commits into
Conversation
3 tasks
ff3c603 to
9509040
Compare
They were variant="secondary" on a bg-secondary row, so the button was the same shade as its surface and the hover (secondary/80) faded it further. Switch to the ghost variant so they pick up the shared hover:bg-foreground/10 overlay and read on the row.
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
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.
Describe Your Changes
A pass over the app's low-contrast selected/hover states. Several used an absolute
bg-secondary/bg-accentoverlay, which collapses against light backgrounds(both ≈
0.97in light, nearly identical to the surfaces they sit on) — so thestate was hard to see, especially in light mode, and in places hover read as strong
as (or stronger than) the selection.
Everything moves to a background-relative
foregroundoverlay so it stayslegible on any surface in both themes, with hover (
/10) a clear step belowselected (
/20).Design decisions
bg-secondary/bg-accentare ≈0.97in light — the same lightness as the surfaces behind them, so they vanish. A
foregroundoverlay is a fixed delta from whatever is behind it, so it holds upon any surface and flips correctly between themes.
/10hover,/20selected. Two fixed steps keep hover clearly below selected;before, several menus had them equal (or hover stronger).
ghostbutton variant and thebase dropdown-menu item states are each changed once, so every ghost button (~80)
and every dropdown inherits it rather than being patched per call site.
outlinevariant left alone — it has a border, so its hover already reads fine.Selected states →
bg-foreground/20DropdownModelProvider), search dialog (SearchDialog), HermesAgent / Claude Code model rows, dropdown control (
DropdownControl), assistantswitcher (
SamplerPopover). The search dialog's selected row was previouslylighter than its hover — now clearly stronger.
hub/index) and default-assistant picker (settings/assistant)— the selected item used
bg-secondary(0.97), the exact same lightness as themenu hover, so selected and hovered items were indistinguishable.
Hover states →
bg-foreground/10ghostbutton variant (components/ui/button.tsx) —hover:bg-accentwas thefaint hover on every ghost button (message copy/edit/delete/regenerate, header
icons, menus, …). Shared design-system change — affects all
variant="ghost"buttons app-wide (~80 usages).
outlineis left as-is (it has a border).components/ui/dropdown-menu.tsx) — the basefocus:bg-accent/data-[state=open]:bg-accentstates. Also a shareddesign-system change — affects every dropdown menu app-wide, and makes menu
items hover consistently with ghost buttons.
SettingsMenu) — category links usedhover:bg-secondarywhileprovider rows used
hover:bg-secondary/60(mismatched and faint in light); unified.EditModel,DeleteModel) — these had nohover feedback at all; added.
DownloadManegement) — these werevariant="secondary"on abg-secondaryrow, so the button was the same shade asits surface and
hover:bg-secondary/80only faded it further. Switched toghostso they share the hover overlay and read on the row.
hover:bg-{muted,secondary}at assorted opacities): hub model variant rows (
HubModelCard), project file rows(
ProjectFiles), security config rows (SecurityConfigDialog), assistant cards,and the small utility icon buttons in
AddEditMCPServer,AddEditCustomCliDialog,AudioPlayer,Capabilities,ApiKeyInput,AttachmentChip,hermes-agent.These had drifted across several ad-hoc values; they now share the one hover overlay.
Companion to #106 (sidebar/nav/settings selected states, already merged).
Styling-only — no logic, no new dependencies — verified in a local dev build.
Before / After
Light mode (where the change is most visible) — stock
v1.1.119vs. this branch:Model selector — row hover
Hub sort dropdown — selected vs. hover (were the same shade before)
Model edit button — hover (no hover before)
Search (⌘K) — highlighted result
Settings menu — hover vs. selected
Fixes Issues
Self Checklist