diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index ef4eaafb0..3a79f29b3 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -1,3 +1,5 @@ +// stylelint-disable custom-property-empty-line-before + // The dropdown wrapper (`
`) .dropup, .dropend, @@ -23,7 +25,7 @@ --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y}; --#{$prefix}dropdown-spacer: #{$dropdown-spacer}; @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size); - --#{$prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before + --#{$prefix}dropdown-color: #{$dropdown-color}; --#{$prefix}dropdown-bg: #{$dropdown-bg}; --#{$prefix}dropdown-border-color: #{$dropdown-border-color}; --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius}; @@ -171,6 +173,7 @@ white-space: nowrap; // prevent links from randomly breaking onto new lines background-color: transparent; // For ` + +
+ +
+ + +
+{{< /example >}} + +## Custom color modes + +While the primary use case for color modes is light and dark mode, custom color modes can easily be added. Create your own `data-theme` selector with a custom value as the name of your color mode, then modify the CSS variables as needed. + +For example, you can create a blue theme with the selector `data-theme="blue"`. + +{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}} + +
+
Example blue theme
+

Some paragraph text to show how the blue theme might look with written copy.

+ +
+ +
+ + +
+
+ +```html +
+ ... +
+``` + +## New theme colors + +Added in v5.2.0 + +Bootstrap's color palette has continued to expand and become more nuanced in v5.2.0 with the addition of new `secondary` and `tertiary` colors. Our new colors are available through Sass and CSS variables (but not our color maps), with the express goal of making it easier to customize across multiple colors modes like light and dark. + +Colors ending in `--rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`. + +{{< callout warning>}} +**Heads up!** There's some potentially confusing things regarding new secondary and tertiary colors, and our secondary theme color. +{{< /callout >}} + +{{< bs-table "table text-start table-swatches" >}} +| Description | Swatch | Variables | +| --- | --- | --- | +| **Body —** Default foreground (color) and background, including components. |
 
 
| `--bs-body-color`
`--bs-body-color-rgb`
`--bs-body-bg`
`--bs-body-bg-rgb` | +| **Secondary —** For disabled states, dividers, and lighter text. |
 
 
| `--bs-secondary-color`
`--bs-secondary-color-rgb`
`--bs-secondary-bg`
`--bs-secondary-bg-rgb` | +| **Tertiary —** For hovers, accents, wells, and text. |
 
 
| `--bs-tertiary-color`
`--bs-tertiary-color-rgb`
`--bs-tertiary-bg`
`--bs-tertiary-bg-rgb` | +| **Border —** For component borders, dividers, and rules. Blends with background colors thanks to `rgba()` values. |
Border color
| `--bs-border-color` | +| **Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states. |
Primary
| `--bs-primary`
`--bs-primary-rgb` | +| **Success —** Theme color used for positive or successful actions and information. |
Success
| `--bs-success`
`--bs-success-rgb` | +| **Danger —** Theme color used for errors and dangerous actions. |
Danger
| `--bs-danger`
`--bs-danger-rgb` | +| **Warning —** Theme color used for warning messages. |
Warning
| `--bs-warning`
`--bs-warning-rgb` | +| **Info —** Theme color used for neutral and informative content. |
Info
| `--bs-info`
`--bs-info-rgb` | +{{< /bs-table >}} + ## Theme colors We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file. diff --git a/site/content/docs/5.1/customize/css-variables.md b/site/content/docs/5.1/customize/css-variables.md index 13142f6ad..5116df555 100644 --- a/site/content/docs/5.1/customize/css-variables.md +++ b/site/content/docs/5.1/customize/css-variables.md @@ -46,7 +46,7 @@ Customize the prefix via the `$prefix` Sass variable. By default, it's set to `b CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables. -```css +```scss body { font: 1rem/1.5 var(--bs-font-sans-serif); } diff --git a/site/content/docs/5.1/utilities/position.md b/site/content/docs/5.1/utilities/position.md index 177464fa0..7bb1e0c16 100644 --- a/site/content/docs/5.1/utilities/position.md +++ b/site/content/docs/5.1/utilities/position.md @@ -94,7 +94,7 @@ Here are some real life examples of these classes: + +
  • + +
    • +
  • + +
    • + + diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index dd234c387..482a7c0d9 100644 --- a/site/layouts/partials/docs-versions.html +++ b/site/layouts/partials/docs-versions.html @@ -8,7 +8,12 @@