Fix inconsistent hover effects on dark-background elements#9383
Fix inconsistent hover effects on dark-background elements#9383SanskaarUndale21 wants to merge 2 commits into
Conversation
…#8886) Several elements sit on permanently-dark surfaces (site header, footer, home banner, nav popup) but inherited the global link hover rule that applies brightness(80%) in light mode, dimming already-bright text and reducing readability. Override those specific contexts to use brightness(120%) so hovering always increases visibility regardless of the active color theme. Also replace the opacity: 0.8 dimming on .nav-button hover with a brightness filter to stay consistent with the rest of the header. Finally, suppress the brightness filter on anchor elements that directly wrap a .pub-monochrome-icon, since those icons already have their own opacity-based hover feedback and applying both mechanisms produced an unintended compounded visual effect. Fixes dart-lang#8886
|
@SanskaarUndale21: thanks for filing this. I've tested the change locally, and while the top-left logo update was better, the other changes were not noticeable or were worse (e.g. hovering on footer links not stand out). I think we may need to define a semantic CSS class that says "this has a dark background" regardless of the theme, and apply these rules on it. Would you be interested in splitting the PR and/or creating the above CSS class? (no worries if not, I can do the refactor). |
|
Ok sure we can work on tht semantic CSS class And i dont mind splitting the PR |
|
I will start working on the semantic CSS class |
Replaces per-element light-theme overrides scattered across _site_header.scss, _footer.scss, and _home.scss with a single .pub-dark-bg rule in _base.scss. Applies the class to site-header, site-footer, and _banner-bg in the Dart templates.
|
Done just pushed the refactor. Created a .light-theme .pub-dark-bg a:hover {
filter: brightness(120%);
}Applied the class to the three always-dark surfaces in the Dart templates:
Removed all the scattered The let me know if i have went wrong and what is needed to be improved if there are any mistakes |
|
if there are some mistakes do tell me and if possible give me some photos of what exactly am i suppose to change |
2 participants
Summary
Fixes #8886
Several elements on pub.dev sit on permanently-dark surfaces (site header, footer, home banner, nav dropdown popup) but inherited the global
ahover rule that appliesbrightness(80%)in light mode. This dimmed already-bright text on those dark backgrounds, reducing readability and producing an inconsistent experience across color themes.brightness(120%)so the logo brightens (matching the desired dark-mode behavior) instead of dimming on the always-dark header background..nav-button(My pub.dev / Help buttons): replacesopacity: 0.8dimming on hover withfilter: brightness(120%)to be consistent with how other header elements respond to hover..nav-link): overrides light-mode hover tobrightness(120%)-- the popup always has a dark background regardless of theme.brightness(120%)-- the footer always has a dark background.brightness(120%)-- the banner always has a dark background.:has()rule that suppresses thebrightnessfilter on any<a>that directly wraps a.pub-monochrome-icon. Those icons already have their ownopacity-based hover feedback (via.pub-monochrome-icon-hoverable); applying both mechanisms together produced a compounded, unintended visual effect.Test plan
brightness(120%)or no filter)..pub-monochrome-icon, no brightness filter applied on top.brightness-on-hoverstill applies).