Heavily WIP still, but this begins the process of implementing dark mode for our docs and across the project itself.
- Color modes are toggled in the docs navbar with a custom toggler, which stores the select color mode in local storage.
- Color modes can also be set via data attribute thanks to `data-theme` (with light or dark options available currently).
- Docs are heavily WIP for demonstrating the dark mode.
- In order to best implement color modes, I've spiked out a number of new Sass and CSS variables (e.g., `--bs-secondary-bg` and `--bs-tertiary-bg`). In addition, I've added new global CSS variables like `--bs-border-color` and more. So, in addition to general color modes and theming support, we get greater real-time customization, too.
Todos and open questions:
- [ ] Do we refer to these as themes or color modes?
- [ ] Do we provide a color mode toggler JS plugin?
- [ ] Update all components to better utilize global CSS variables so they can be more easily themed (e.g., see `$dropdown-*` Sass variable changes in the diff).
* Add additional root variables, rename $variable-prefix to $prefix
- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout
* Bundlewatch
* Split CSS vars for padding values
Make these few components consistent with where we're heading with other components. Had to add some new Sass variables to handle the dropdown-header element, but not a huge deal. This ensures we can drop the combined variable in v6 when we're ready.
* Update scss/_dropdown.scss
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Deprecate dropdown-header-padding var
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Create the popper instance first
Make sure that popper instance has been created first and then apply the
styling on the dropdown(menu)
* Use `data-bs-popper` attibute to check popper
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- Removes the &[style] selector that was used for resetting Popper styles
- Separate Popper-based alignment from static alignment with `data-bs-popover` attribute that separates the --bs-position and custom right/left properties
Co-Authored-By: Rohit Sharma <rohit2sharma95@gmail.com>
* Remove the margin from dropdown in favor of Popper
- Set the default margin to 0 for dropdowns (To remove the Popper's warning)
- Set the required offset in dropdown's defaults
* Remove the margin from the popover component
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
The RTL cheatsheet's dropdowns aren't positioned correctly because of RTLCSS transforming `right: auto` to `left:auto` (which conflicts with Popper positioning).
* Add .dropdown-menu-dark
* Match background color to navbar dark
* Update docs to include a navbar example
* Update dropdowns.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Previously deprecated in v4.x, this clears out the now unused Sass option and removes some unused mixins. Arguably we could remove more, but I like the hover-focus mixin and we make extensive use of it across the project.
* Add variable for dropdown-divider-margin-y
For us to reassign the nav-divider-margin-y variable here, we have to rearrange some of the variables.
Fixes#26660.
* bump bundlesize
Mark Otto