-
Notifications
You must be signed in to change notification settings - Fork 55
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dark mode: Local navigation #2276
Dark mode: Local navigation #2276
Conversation
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
# Conflicts: # site/content/docs/5.3/components/navbar.md # site/layouts/shortcodes/callout-deprecated-dark-variants.html
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…test page: remove alerts local bg + add new vars visualisation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm fine as-is, maybe some talks about the variables if we keep them as-is.
🚀
// ******* Additions for dark-mode | ||
--#{$prefix}hover-color: #{$body-color}; | ||
--#{$prefix}active-bg: #{$gray-400}; | ||
--#{$prefix}disabled-color: #{$gray-500}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As a first step, I'd be fine fine defining those right there, but IMHO, they should have their own Sass variables somewhere.
Fine for now but if we keep them, I like the naming though it's a bit too evasive maybe.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, variables names and way to do it are te be discussed... but for now useful and simple 😄
Description
Local navigation in dark mode, by using existing css vars:
$local-nav-hover-bg
= --bs-secondary-bg // from - `gray300 to gray900 under lg point$local-nav-active-color
= --bs-link-hover-color // from accessible-orange to brand-orange$local-nav-border-color
= --bs-border-color-translucent // from gray-500 to gray-700--bs-hover-color
to switch$local-nav-hover-color
from black to brand-orange--bs-active-bg
to switch$local-nav-active-bg
from gray-400 to gray-700--bs-disabled-color
to switch$form-star-rating-disabled-color
,$nav-link-disabled-color
and$navbar-light-disabled-color
from gray-500 to gray-700 =>Links