This branch builds on #34273 for now to update our navbar components to use CSS variables. This comes with a few notable changes that I hope don't count as breaking changes. Here's the lowdown:
- Sets all
$navbar-*variables on the.navbarbase component, including those used by the sub-components like.navbar-brand. This is similar to our tables CSS variables usage. - Does away with the
.navbar-lightclass (we'll have to note it as a deprecation for now) as the defaults are set on.navbar. The "light navbar" is now the default. - These two changes allows us to only set a few variables on
.navbar-dark, effectively nullifying dozens lines of CSS and roughly two dozen selectors in the process. - Updates the Customize > CSS variables page to better articulate our approach to using CSS variables, including our prefix and how to customize it via Sass.
The motivation for this PR was largely due to the offcanvas support being added to the navbar. We'll want and need improved customization efforts here as we look to allow for more complex styling (e.g., light navbar with dark offcanvas, or vice versa). From here, I think we can push folks to use CSS variable overrides in media queries, or perhaps explore responsive navbar color modes with fewer lines now that we just have to override CSS variables.
@crftwrk This should eventually reduce the compiled output from your example once we ship this PR. Please take a look and let me know what you think!
Todo:
-
Deprecate notice for .navbar-light -
Update docs mentions of .navbar-light -
Reset navbar brand vars to not re-use CSS vars -
Tweak bundlewatch
/cc @twbs/css-review
Preview: https://deploy-preview-34443--twbs-bootstrap.netlify.app/docs/5.1/components/navbar/