Skip to content

Fix ghost button hover contrast - #2428

Merged
ejsmith merged 1 commit into
mainfrom
issue/dark-mode-ghost-hover-contrast
Jul 31, 2026
Merged

Fix ghost button hover contrast#2428
ejsmith merged 1 commit into
mainfrom
issue/dark-mode-ghost-hover-contrast

Conversation

@niemyjski

@niemyjski niemyjski commented Jul 30, 2026

Copy link
Copy Markdown
Member

Summary

  • Fixes the shared ghost Button hover state using the existing semantic accent theme tokens.
  • Overrides the Button base's intentional border-transparent only on ghost hover with accent-foreground/40.
  • Keeps the change limited to variant="ghost"; the transparent resting state and every other Button variant remain unchanged.

Root cause

The pagination Next control is a shared Button with variant="ghost". It does not have a Next-specific transparency class:

  • Every Button starts with border border-transparent so filled, link, and ghost variants do not gain an unintended resting border.
  • The old ghost hover used dark:hover:bg-muted/50 and left that border transparent.
  • On the dark page background, that half-opacity fill did not provide a clear hover boundary.

The fix belongs in the shared ghost hover variant: it uses the theme's accent hover surface and overrides the transparent border while hovered. Changing the base transparency would incorrectly add borders to unrelated Button variants.

Screenshots

Before — dark-mode Next hovered

Before: dark-mode Next pagination button hovered with no clear boundary

After — dark-mode Next hovered

After: dark-mode Next pagination button hovered with a visible accent surface and border

Verification

  • Authenticated local /next/stack capture at 1280×577 with the real Next pagination button confirmed in :hover.
  • Confirmed the real Next button is a BUTTON using variant="ghost": at rest its background and border both compute to transparent; on hover the shared variant overrides both.
  • Rendered hover state: fill rgb(26, 31, 36), border rgb(91, 94, 99), foreground rgb(230, 237, 243).
  • The rendered border has 3.14:1 contrast against the dark page background (rgb(2, 5, 10)).
  • Audited all shared Button variants and ghost Button call sites; no other Button variant's hover styling changes.
  • npm run validate

@niemyjski niemyjski self-assigned this Jul 30, 2026
@niemyjski
niemyjski force-pushed the issue/dark-mode-ghost-hover-contrast branch from 43d0ece to 5581656 Compare July 30, 2026 22:00
@github-actions

Copy link
Copy Markdown

Code Coverage

Package Line Rate Branch Rate Complexity Health
Exceptionless.Core 74% 66% 9634
Exceptionless.AppHost 38% 40% 139
Exceptionless.Insulation 37% 35% 286
Exceptionless.Web 84% 68% 6949
Summary 77% (22991 / 29857) 66% (10588 / 16090) 17008

@ejsmith
ejsmith merged commit 231a7cf into main Jul 31, 2026
12 checks passed
@ejsmith
ejsmith deleted the issue/dark-mode-ghost-hover-contrast branch July 31, 2026 01:08
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.

2 participants