* Add global variables for box-shadow focus rings
* Update instances of -btn-focus-box-shadow to use -ring-box-shadow, unless it's for buttons or inputs
* fix variable name
* Add CSS variables for global focus styling, document it
* Move to CSS vars section
* Update scss/_nav.scss
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
* Helper and utils
* Fix bundlewatch
* Change 'Focus ring' in sidebar so that the page can be visible
* Minor typo fix
* fix merge
* Revamp some more, improve docs
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
* Fix Sass compilation when `$color-mode-type` is set to `media-query`
* Update mixin names, fix docs color modes for using media queries by using mixin
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Add dark mode to docs
* Minor fix: missing space indentation
* Minor fix: revert utilities/z-index added-in modification
* Remove prev: and next: from doc because extracted to another PR
* Use .bg-body-tertiary in all Utilities > Overflow examples
* fix example
* Fix up spacing examples
* Update box-shadow Sass variables and utilities to auto-adjust to color modes
* Remove unused docs class
* Refactor form styles to use CSS variable for background images on .form-check and .form-switch
* Fix docs selector
* Rename shortcut for clarity
* Heading consistency
* Reintroduce missing 4th grid item in Utilities > Spacing example
* Fix bundlewatch
* .bd-callout* rendering is OK so removing comments in the code
* Update scss/_utilities.scss
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Fix gutters example styling
* Fix text colors on background utils docs
* redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken
* fix some color utils examples
* Deprecate mixin notice
* Deprecate notice for list-group-item-variant() mixin
* Revamp new link CSS vars
* Use map-keys in some each Sass files
* Remove list-group-item-variant mixin ref in sass loop desc
* Display CSS vars scoped to our built-in dark mode
* Revert previous commit
* Fix list group variant link
* Fix typo
* Remove imports of alert/list-group mixins in scss/_mixins.scss
* Small formatting + comments removal in scss/_content.scss
* Fix alert links colors
* fix dropdown border-radius mixin
* fix link color and underline again, this time using CSS var override for color var and fallback value for the underline
* fix colors on docs navbar for dark mode
* remove two changes
* missing ref
* another link underline fix, just use sass vars for link decoration for now
* missing color bg docs, plus move dropdown override to scss
* more changes from review
* fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin
* Few fixes around type
- Restored CSS variable for color on headings, this time with a fallback value
- In conjunction, restored and wrapped the default CSS var with a null value check
- Split headings and paragraphs docs in Reboot, elaborated on them
* Restyle custom details > summary element in docs
* Rewrite some migration docs
* fix form checks
* Fix up some navbar styling, tweak docs callout
* Fix select images, mostly for validation styling
* Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs
* Update site/content/docs/5.2/components/scrollspy.md
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Apply suggestions from code review
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* mention form control css vars in migration guide
* Tweak grid and flex docs background examples
* clarify some docs
* fix some more things
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Remove `--bs-border-opacity: 1` from `.border-*` utilities
We set `--bs-border-opacity: 1` globally at the `:root` level, so redeclaring it on every `.border-*` utility doesn't make much sense. I think we can drop this.
* Remove global border-opacity var, restore on .border-color classes, move .border-color utils down the list to fix some specificity issues
* Add some demos of border utils to the docs
* Revert `border-color` change
* Add new border-color-translucent for when we want optional alpha-transparency in our border-color
Apply to drodpowns, modals, offcanvas, popovers, and toasts
* bundlewatch
* 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
- Updates the utilities mixin to check for specific CSS variable names via `css-variable`
- Bonus fix: we now prevent local variables for `0` value utilities (e.g., `.border-top-0` no longer sets `--bs-border-opacity: 1`
- Adds new `.border-opacity-*` classes
- Adds new root variables: `--bs-border-color`, `--bs-border-style`, `--bs-border-width`
- Documents the new variable changes
- Adds grayscale colors
- Adds root and body variables
Note that some Sass variables default to `null`, so as we generate and use the CSS variable, we'll be potentially adding some lines of code.
- Adds new functions to generate additional Sass maps
- Adds new root variables for rgb() versions of our theme colors, plus a few extras
- Adds ability to change the alpha transparency of text color and background color utilities with new utilities, inline styles, or local CSS var
- Updates documentation for color and background-color utilities pages
- Deprecates .text-black-50 and .text-white-50 since those (and additional transparency levels) can be generated on the fly
Change approach slightly to prevent cascade
- Use a semitransparent gradient from light to dark which works on any background-color
- Store the gradient as a custom property (--bs-gradient)
- Remove `.bg-gradient-*` variants in favour of `.bg-gradient` which works even when `$enable-gradients` are enabled
- Add gradients to navbar, active page links and badges when gradients are enabled
Media queries do not support CSS custom properties (CSS variables), so we've had some useless variables lying around since shipping v4. This finally removes them and the associated documentation content that explained the situation.
Fixes#29012.
