fix(a11y): improve chart tooltip contrast in light mode#700
Closed
JarvisInvestInsight wants to merge 7 commits intonpmx-dev:mainfrom
Closed
fix(a11y): improve chart tooltip contrast in light mode#700JarvisInvestInsight wants to merge 7 commits intonpmx-dev:mainfrom
JarvisInvestInsight wants to merge 7 commits intonpmx-dev:mainfrom
Conversation
- Increase focus ring opacity from 10% to 50% in focus-ring shortcut - Add ring-offset-bg for consistent offset coloring - Update input-base focus states (border-fg/50, ring-fg/30) for better visibility - Change link focus outline from var(--border) to var(--fg-muted) for WCAG compliance Fixes npmx-dev#647
- Settings Toggle: add focus-visible ring styles to switch button - CollapsibleSection: add focus styles to anchor link heading - tag shortcut: add focus-visible styles for interactive tags/badges
Match the search page input styling with focus-visible:ring-2
- Remove inconsistent ring-accent/50 styles, use ring-fg/50 everywhere - Add ring-offset for proper spacing on inputs - Use focus-ring shortcut consistently for buttons/links - Fix header nav links, search inputs, mobile menu, modals
Was using undefined 'ring-ring' color, now uses consistent focus-ring shortcut
- Change sidebar container from overflow-hidden to overflow-clip to prevent focus ring clipping - Add full focus rings to section header anchor links (#keywords, #compatibility, #get-started, #readme)
Increases background opacity from 10% to 90% in light mode to ensure the download count is visible against the chart background. Fixes npmx-dev#633
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Contributor
Author
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 the download chart tooltip being invisible in light mode as reported in #633.
Problem
The tooltip background used \�g-[var(--bg)]/10\ (10% opacity) which works well in dark mode where the contrast comes from the backdrop blur, but in light mode the low opacity resulted in poor contrast against the light chart background.
Solution
Dynamically set the background opacity based on the color mode:
The change is inside the computed \config\ which already depends on \isDarkMode, so the tooltip will update correctly when the theme changes.
Fixes #633
Found this helpful? ☕ Buy me a coffee