fix(site): readable active-state for Algolia DocSearch hits#3814
Merged
Conversation
The previous active-state rules broke for Page hits and recent-history hits in dark mode. The orange treatment only ever applied to .DocSearch-Hit--Result divs, but the title-color flip (--primary-foreground = navy-950) ran for ALL aria-selected hits, regardless of whether their <a> background actually became orange. Result: navy-950 text on navy-800 muted background → invisible. Switch to a uniform active treatment that works for every hit type: - Background: hsl(var(--accent)) (subtle accent panel) - Text: hsl(var(--foreground)) (kept readable, not flipped) - Visual cue: 3px primary-orange inset shadow on the left edge Same rules applied on .DocSearch-Hit > a (Page / RecentItem hits) and .DocSearch-Hit--Result (Result hits), so contrast is consistent regardless of whether the hit has the inner --Result wrapper. Also drop white SVG fill on the active hit-icon (intended to read on orange) and switch to primary-coloured stroke + border, matching the left accent bar. Same fix on the action-arrow stroke.
|
@jasonbahl is attempting to deploy a commit to the WPGraphql Team on Vercel. A member of the Team first needs to authorize it. |
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.
Summary
Fixes contrast for the active/hovered hit in the Algolia DocSearch modal. In dark mode, Page hits and recent-history hits were rendering with near-invisible text — navy-950 title on a navy-800 muted
background.
Why
The previous active-state rules only worked for .DocSearch-Hit--Result hits. They:
For Page and recent-history hits there's no inner .DocSearch-Hit--Result wrapper, so the orange background never rendered — but the title-color flip still ran. That left navy-950 text sitting on the
muted-bg (also dark navy), so the entry was unreadable as soon as you arrowed onto it.
What changed
src/styles/docsearch.css — replace the mixed treatment with one consistent active state that works for every hit type:
Applied uniformly to both .DocSearch-Hit > a (Page / RecentItem hits) and .DocSearch-Hit--Result (Result hits). Also updated the active state of .DocSearch-Hit-icon (orange stroke + border instead of a
white SVG meant for an orange surface) and .DocSearch-Hit-action path stroke.