Skip to content

fix(ui): improve selected and hover contrast across the app#140

Open
cashcon57 wants to merge 6 commits into
AtomicBot-ai:mainfrom
cashcon57:fix/selected-state-contrast
Open

fix(ui): improve selected and hover contrast across the app#140
cashcon57 wants to merge 6 commits into
AtomicBot-ai:mainfrom
cashcon57:fix/selected-state-contrast

Conversation

@cashcon57

@cashcon57 cashcon57 commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Describe Your Changes

A pass over the app's low-contrast selected/hover states. Several used an absolute
bg-secondary / bg-accent overlay, which collapses against light backgrounds
(both ≈0.97 in light, nearly identical to the surfaces they sit on) — so the
state 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 foreground overlay so it stays
legible on any surface in both themes, with hover (/10) a clear step below
selected (/20)
.

Design decisions

  • Relative overlay, not an absolute token. bg-secondary/bg-accent are ≈0.97
    in light — the same lightness as the surfaces behind them, so they vanish. A
    foreground overlay is a fixed delta from whatever is behind it, so it holds up
    on any surface and flips correctly between themes.
  • /10 hover, /20 selected. Two fixed steps keep hover clearly below selected;
    before, several menus had them equal (or hover stronger).
  • Fixed at the source for shared components. The ghost button variant and the
    base 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.
  • outline variant left alone — it has a border, so its hover already reads fine.
  • Styling only — no logic, state, or dependency changes.

Selected states → bg-foreground/20

  • Model selector (DropdownModelProvider), search dialog (SearchDialog), Hermes
    Agent / Claude Code model rows, dropdown control (DropdownControl), assistant
    switcher (SamplerPopover). The search dialog's selected row was previously
    lighter than its hover — now clearly stronger.
  • Hub sort dropdown (hub/index) and default-assistant picker (settings/assistant)
    — the selected item used bg-secondary (0.97), the exact same lightness as the
    menu hover, so selected and hovered items were indistinguishable.

Hover states → bg-foreground/10

  • ghost button variant (components/ui/button.tsx) — hover:bg-accent was the
    faint 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).
    outline is left as-is (it has a border).
  • Menu item highlight (components/ui/dropdown-menu.tsx) — the base
    focus:bg-accent / data-[state=open]:bg-accent states. Also a shared
    design-system change — affects every dropdown menu app-wide
    , and makes menu
    items hover consistently with ghost buttons.
  • Settings menu (SettingsMenu) — category links used hover:bg-secondary while
    provider rows used hover:bg-secondary/60 (mismatched and faint in light); unified.
  • Model edit / delete trigger icons (EditModel, DeleteModel) — these had no
    hover feedback at all
    ; added.
  • Download panel pause / resume / cancel controls (DownloadManegement) — these were
    variant="secondary" on a bg-secondary row, so the button was the same shade as
    its surface and hover:bg-secondary/80 only faded it further. Switched to ghost
    so they share the hover overlay and read on the row.
  • A final sweep of the remaining faint row/icon hovers (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.119 vs. this branch:

atomic-contrast-01b

Model selector — row hover

atomic-contrast-02

Hub sort dropdown — selected vs. hover (were the same shade before)

atomic-contrast-04

Model edit button — hover (no hover before)

atomic-contrast-05

Search (⌘K) — highlighted result

atomic-contrast-03

Settings menu — hover vs. selected

Fixes Issues

Self Checklist

  • Added relevant comments, esp in complex areas — n/a (CSS-class-only change)
  • Updated docs (for bug fixes / features) — n/a
  • Created issues for follow-up changes or refactoring needed — n/a

@cashcon57 cashcon57 changed the title fix(ui): improve contrast of selected items in dropdowns and dialogs fix(ui): improve selected and hover contrast across the app Jun 30, 2026
@cashcon57 cashcon57 force-pushed the fix/selected-state-contrast branch from ff3c603 to 9509040 Compare June 30, 2026 19:23
@cashcon57 cashcon57 marked this pull request as ready for review July 7, 2026 18:45
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: low-contrast selected/highlighted states (most visible in light mode)

1 participant