rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Add dark mode support (#35857)

Browse Source 
* 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>
This commit is contained in:
Mark Otto 2022-11-28 22:30:26 -08:00 committed by GitHub
parent a1a9895aac
commit fc3f4b67d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
91 changed files with 1974 additions and 422 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.bundlewatch.config.json
View File

@ -2,35 +2,35 @@
"files": [
{
"path": "./dist/css/bootstrap-grid.css",
"maxSize": "7.5 kB"
"maxSize": "8.25 kB"
},
{
"path": "./dist/css/bootstrap-grid.min.css",
"maxSize": "6.75 kB"
"maxSize": "7.5 kB"
},
{
"path": "./dist/css/bootstrap-reboot.css",
"maxSize": "2.75 kB"
"maxSize": "3.5 kB"
},
{
"path": "./dist/css/bootstrap-reboot.min.css",
"maxSize": "2.5 kB"
"maxSize": "3.25 kB"
},
{
"path": "./dist/css/bootstrap-utilities.css",
"maxSize": "9.75 kB"
"maxSize": "10.5 kB"
},
{
"path": "./dist/css/bootstrap-utilities.min.css",
"maxSize": "9.0 kB"
"maxSize": "9.75 kB"
},
{
"path": "./dist/css/bootstrap.css",
"maxSize": "30.25 kB"
"maxSize": "31.25 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
"maxSize": "28 kB"
"maxSize": "29.25 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",

9
scss/_accordion.scss
View File

@ -147,3 +147,12 @@
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.accordion-button::after {
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
}
}
}

19
scss/_alert.scss
View File

@ -12,6 +12,7 @@
--#{$prefix}alert-border-color: transparent;
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: #{$alert-border-radius};
--#{$prefix}alert-link-color: inherit;
// scss-docs-end alert-css-vars
position: relative;
@ -32,6 +33,7 @@
// Provide class for links that match alerts
.alert-link {
font-weight: $alert-link-font-weight;
color: var(--#{$prefix}alert-link-color);
}
@ -54,18 +56,13 @@
// scss-docs-start alert-modifiers
// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors {
$alert-background: shift-color($value, $alert-bg-scale);
$alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
}
// Generate contextual modifier classes for colorizing the alert
@each $state in map-keys($theme-colors) {
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color);
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text);
}
}
// scss-docs-end alert-modifiers

14
scss/_carousel.scss
View File

@ -210,7 +210,7 @@
// Dark mode carousel
.carousel-dark {
%carousel-dark {
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: $carousel-dark-control-icon-filter;
@ -224,3 +224,15 @@
color: $carousel-dark-caption-color;
}
}
.carousel-dark {
@extend %carousel-dark;
}
@if $enable-dark-mode {
@include color-mode(dark) {
.carousel {
@extend %carousel-dark;
}
}
}

14
scss/_close.scss
View File

@ -44,6 +44,18 @@
}
}
.btn-close-white {
%btn-close-white {
filter: var(--#{$prefix}btn-close-white-filter);
}
.btn-close-white {
@extend %btn-close-white;
}
@if $enable-dark-mode {
@include color-mode(dark) {
.btn-close {
@extend %btn-close-white;
}
}
}

1
scss/_dropdown.scss
View File

@ -184,6 +184,7 @@
white-space: nowrap; // prevent links from randomly breaking onto new lines
background-color: transparent; // For `<button>`s
border: 0; // For `<button>`s
@include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
&:hover,
&:focus {

24
scss/_list-group.scss
View File

@ -180,13 +180,25 @@
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
@each $state in map-keys($theme-colors) {
.list-group-item-#{$state} {
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text);
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
&.list-group-item-action {
&:hover,
&:focus {
--#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
--#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
&:active {
--#{$prefix}list-group-active-color: var(--#{$prefix}emphasis-color);
--#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text);
--#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text);
}
}
}
}
// scss-docs-end list-group-modifiers

67
scss/_maps.scss
View File

@ -6,6 +6,39 @@
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb
$theme-colors-text: (
"primary": $primary-text,
"secondary": $secondary-text,
"success": $success-text,
"info": $info-text,
"warning": $warning-text,
"danger": $danger-text,
"light": $light-text,
"dark": $dark-text,
) !default;
$theme-colors-bg-subtle: (
"primary": $primary-bg-subtle,
"secondary": $secondary-bg-subtle,
"success": $success-bg-subtle,
"info": $info-bg-subtle,
"warning": $warning-bg-subtle,
"danger": $danger-bg-subtle,
"light": $light-bg-subtle,
"dark": $dark-bg-subtle,
) !default;
$theme-colors-border-subtle: (
"primary": $primary-border-subtle,
"secondary": $secondary-border-subtle,
"success": $success-border-subtle,
"info": $info-border-subtle,
"warning": $warning-border-subtle,
"danger": $danger-border-subtle,
"light": $light-border-subtle,
"dark": $dark-border-subtle,
) !default;
// Utilities maps
//
// Extends the default `$theme-colors` maps to help create our utilities.
@ -25,6 +58,17 @@ $utilities-text: map-merge(
)
) !default;
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
$utilities-text-emphasis-colors: (
"primary-emphasis": var(--#{$prefix}primary-text),
"secondary-emphasis": var(--#{$prefix}secondary-text),
"success-emphasis": var(--#{$prefix}success-text),
"info-emphasis": var(--#{$prefix}info-text),
"warning-emphasis": var(--#{$prefix}warning-text),
"danger-emphasis": var(--#{$prefix}danger-text),
"light-emphasis": var(--#{$prefix}light-text),
"dark-emphasis": var(--#{$prefix}dark-text)
) !default;
// scss-docs-end utilities-text-colors
// scss-docs-start utilities-bg-colors
@ -37,6 +81,18 @@ $utilities-bg: map-merge(
)
) !default;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
$utilities-bg-subtle: (
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
"secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
"success-subtle": var(--#{$prefix}success-bg-subtle),
"info-subtle": var(--#{$prefix}info-bg-subtle),
"warning-subtle": var(--#{$prefix}warning-bg-subtle),
"danger-subtle": var(--#{$prefix}danger-bg-subtle),
"light-subtle": var(--#{$prefix}light-bg-subtle),
"dark-subtle": var(--#{$prefix}dark-bg-subtle)
) !default;
// $utilities-bg-subtle-colors: map-loop($utilities-bg-subtle, rgba-css-var, "$key", "bg") !default;
// scss-docs-end utilities-bg-colors
// scss-docs-start utilities-border-colors
@ -47,6 +103,17 @@ $utilities-border: map-merge(
)
) !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
$utilities-border-subtle: (
"primary-subtle": var(--#{$prefix}primary-border-subtle),
"secondary-subtle": var(--#{$prefix}secondary-border-subtle),
"success-subtle": var(--#{$prefix}success-border-subtle),
"info-subtle": var(--#{$prefix}info-border-subtle),
"warning-subtle": var(--#{$prefix}warning-border-subtle),
"danger-subtle": var(--#{$prefix}danger-border-subtle),
"light-subtle": var(--#{$prefix}light-border-subtle),
"dark-subtle": var(--#{$prefix}dark-border-subtle)
) !default;
// scss-docs-end utilities-border-colors
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;

3
scss/_mixins.scss
View File

@ -10,6 +10,7 @@
// Helpers
@import "mixins/breakpoints";
@import "mixins/color-mode";
@import "mixins/color-scheme";
@import "mixins/image";
@import "mixins/resize";
@ -21,13 +22,11 @@
@import "mixins/utilities";
// Components
@import "mixins/alert";
@import "mixins/backdrop";
@import "mixins/buttons";
@import "mixins/caret";
@import "mixins/pagination";
@import "mixins/lists";
@import "mixins/list-group";
@import "mixins/forms";
@import "mixins/table-variants";

8
scss/_navbar.scss
View File

@ -276,3 +276,11 @@
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
// scss-docs-end navbar-dark-css-vars
}
@if $enable-dark-mode {
@include color-mode(dark) {
.navbar {
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
}
}
}

2
scss/_pagination.scss
View File

@ -75,7 +75,7 @@
margin-left: $pagination-margin-start;
}
@if $pagination-margin-start == ($pagination-border-width * -1) {
@if $pagination-margin-start == calc($pagination-border-width * -1) {
&:first-child {
.page-link {
@include border-start-radius(var(--#{$prefix}pagination-border-radius));

6
scss/_reboot.scss
View File

@ -87,7 +87,7 @@ hr {
font-style: $headings-font-style;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
color: var(--#{$prefix}heading-color, inherit);
}
h1 {
@ -241,11 +241,11 @@ sup { top: -.5em; }
// Links
a {
color: var(--#{$prefix}link-color);
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
text-decoration: $link-decoration;
&:hover {
color: var(--#{$prefix}link-hover-color);
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
text-decoration: $link-hover-decoration;
}
}

126
scss/_root.scss
View File

@ -1,4 +1,5 @@
:root {
:root,
[data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`.
// Colors
@ -21,6 +22,18 @@
--#{$prefix}#{$color}-rgb: #{$value};
}
@each $color, $value in $theme-colors-text {
--#{$prefix}#{$color}-text: #{$value};
}
@each $color, $value in $theme-colors-bg-subtle {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
@each $color, $value in $theme-colors-border-subtle {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
--#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
@ -44,12 +57,45 @@
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
--#{$prefix}body-color: #{$body-color};
--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
@if $body-text-align != null {
--#{$prefix}body-text-align: #{$body-text-align};
}
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
// scss-docs-end root-body-variables
@if $headings-color != null {
--#{$prefix}heading-color: #{$headings-color};
}
--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
--#{$prefix}link-decoration: #{$link-decoration};
--#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
@if $link-hover-decoration != null {
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
}
--#{$prefix}code-color: #{$code-color};
--#{$prefix}highlight-bg: #{$mark-bg};
// scss-docs-start root-border-var
--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
@ -64,10 +110,17 @@
--#{$prefix}border-radius-pill: #{$border-radius-pill};
// scss-docs-end root-border-var
--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}box-shadow: #{$box-shadow};
--#{$prefix}box-shadow-sm: #{$box-shadow-sm};
--#{$prefix}box-shadow-lg: #{$box-shadow-lg};
--#{$prefix}box-shadow-inset: #{$box-shadow-inset};
--#{$prefix}code-color: #{$code-color};
--#{$prefix}emphasis-color: #{$emphasis-color};
// scss-docs-start form-control-vars
--#{$prefix}form-control-bg: var(--#{$prefix}body-bg);
--#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg);
// scss-docs-end form-control-vars
--#{$prefix}highlight-bg: #{$mark-bg};
@ -75,3 +128,68 @@
--#{$prefix}breakpoint-#{$name}: #{$value};
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
// scss-docs-start root-dark-mode-vars
--#{$prefix}body-color: #{$body-color-dark};
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
--#{$prefix}body-bg: #{$body-bg-dark};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
--#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
--#{$prefix}secondary-color: #{$body-secondary-color-dark};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
--#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
--#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
--#{$prefix}emphasis-color: #{$emphasis-color-dark};
--#{$prefix}primary-text: #{$primary-text-dark};
--#{$prefix}secondary-text: #{$secondary-text-dark};
--#{$prefix}success-text: #{$success-text-dark};
--#{$prefix}info-text: #{$info-text-dark};
--#{$prefix}warning-text: #{$warning-text-dark};
--#{$prefix}danger-text: #{$danger-text-dark};
--#{$prefix}light-text: #{$light-text-dark};
--#{$prefix}dark-text: #{$dark-text-dark};
--#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark};
--#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark};
--#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark};
--#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark};
--#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark};
--#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark};
--#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
--#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};
--#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark};
--#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark};
--#{$prefix}success-border-subtle: #{$success-border-subtle-dark};
--#{$prefix}info-border-subtle: #{$info-border-subtle-dark};
--#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark};
--#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark};
--#{$prefix}light-border-subtle: #{$light-border-subtle-dark};
--#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark};
--#{$prefix}heading-color: #{$headings-color-dark};
--#{$prefix}link-color: #{$link-color-dark};
--#{$prefix}link-hover-color: #{$link-hover-color-dark};
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
--#{$prefix}code-color: #{$code-color-dark};
--#{$prefix}border-color: #{$border-color-dark};
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
// scss-docs-end root-dark-mode-vars
}
}

25
scss/_utilities.scss
View File

@ -163,6 +163,11 @@ $utilities: map-merge(
),
values: $utilities-border-colors
),
"subtle-border-color": (
property: border-color,
class: border,
values: $utilities-border-subtle
),
"border-width": (
css-var: true,
css-variable-name: border-width,
@ -570,9 +575,12 @@ $utilities: map-merge(
values: map-merge(
$utilities-text-colors,
(
"muted": $text-muted,
"muted": $text-muted, // deprecated
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"body-secondary": var(--#{$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color),
"body-emphasis": var(--#{$prefix}emphasis-color),
"reset": inherit,
)
)
@ -587,6 +595,11 @@ $utilities: map-merge(
100: 1
)
),
"text-color": (
property: color,
class: text,
values: $utilities-text-emphasis-colors
),
// scss-docs-end utils-color
// scss-docs-start utils-bg-color
"background-color": (
@ -598,7 +611,10 @@ $utilities: map-merge(
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
"transparent": transparent,
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
"body-emphasis": rgba(var(--#{$prefix}emphasis-bg-rgb), var(--#{$prefix}bg-opacity)),
)
)
),
@ -613,6 +629,11 @@ $utilities: map-merge(
100: 1
)
),
"subtle-background-color": (
property: background-color,
class: bg,
values: $utilities-bg-subtle
),
// scss-docs-end utils-bg-color
"gradient": (
property: background-image,

70
scss/_variables-dark.scss Normal file
View File

@ -0,0 +1,70 @@
// Dark color mode variables
//
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
//
// Global colors
//
// scss-docs-start sass-dark-mode-vars
$primary-text-dark: $blue-300 !default;
$secondary-text-dark: $gray-300 !default;
$success-text-dark: $green-300 !default;
$info-text-dark: $cyan-300 !default;
$warning-text-dark: $yellow-300 !default;
$danger-text-dark: $red-300 !default;
$light-text-dark: $gray-100 !default;
$dark-text-dark: $gray-300 !default;
$primary-bg-subtle-dark: $blue-900 !default;
$secondary-bg-subtle-dark: $gray-900 !default;
$success-bg-subtle-dark: $green-900 !default;
$info-bg-subtle-dark: $cyan-900 !default;
$warning-bg-subtle-dark: $yellow-900 !default;
$danger-bg-subtle-dark: $red-900 !default;
$light-bg-subtle-dark: $gray-800 !default;
$dark-bg-subtle-dark: mix($gray-800, $black) !default;
$primary-border-subtle-dark: $blue-700 !default;
$secondary-border-subtle-dark: $gray-700 !default;
$success-border-subtle-dark: $green-700 !default;
$info-border-subtle-dark: $cyan-800 !default;
$warning-border-subtle-dark: $yellow-800 !default;
$danger-border-subtle-dark: $red-700 !default;
$light-border-subtle-dark: $gray-700 !default;
$dark-border-subtle-dark: $gray-800 !default;
$body-color-dark: $gray-500 !default;
$body-bg-dark: $gray-900 !default;
$body-emphasis-color-dark: $gray-100 !default;
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
$body-secondary-bg-dark: $gray-800 !default;
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
$emphasis-color-dark: $white !default;
$border-color-dark: $gray-700 !default;
$border-color-translucent-dark: rgba($white, .15) !default;
$headings-color-dark: #fff !default;
$link-color-dark: $blue-300 !default;
$link-hover-color-dark: $blue-200 !default;
$code-color-dark: $pink-300 !default;
//
// Forms
//
$form-select-indicator-color-dark: $body-color-dark !default;
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
$form-switch-color-dark: rgba($white, .25) !default;
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
//
// Accordion
//
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
// scss-docs-end sass-dark-mode-vars

266
scss/_variables.scss
View File

@ -321,6 +321,33 @@ $theme-colors: (
) !default;
// scss-docs-end theme-colors-map
$primary-text: $blue-600 !default;
$secondary-text: $gray-600 !default;
$success-text: $green-600 !default;
$info-text: $cyan-700 !default;
$warning-text: $yellow-700 !default;
$danger-text: $red-600 !default;
$light-text: $gray-600 !default;
$dark-text: $gray-700 !default;
$primary-bg-subtle: $blue-100 !default;
$secondary-bg-subtle: $gray-100 !default;
$success-bg-subtle: $green-100 !default;
$info-bg-subtle: $cyan-100 !default;
$warning-bg-subtle: $yellow-100 !default;
$danger-bg-subtle: $red-100 !default;
$light-bg-subtle: mix($gray-100, $white) !default;
$dark-bg-subtle: $gray-400 !default;
$primary-border-subtle: $blue-200 !default;
$secondary-border-subtle: $gray-200 !default;
$success-border-subtle: $green-200 !default;
$info-border-subtle: $cyan-200 !default;
$warning-border-subtle: $yellow-200 !default;
$danger-border-subtle: $red-200 !default;
$light-border-subtle: $gray-200 !default;
$dark-border-subtle: $gray-500 !default;
// Characters which are escaped by the escape-svg function
$escaped-characters: (
("<", "%3c"),
@ -351,6 +378,9 @@ $enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
$enable-dark-mode: true !default;
$color-mode-type: data !default;
// Prefix for :root CSS variables
$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
@ -398,9 +428,19 @@ $position-values: (
//
// Settings for the `<body>` element.
$body-bg: $white !default;
$body-color: $gray-900 !default;
$body-text-align: null !default;
$body-color: $gray-900 !default;
$body-bg: $white !default;
$body-emphasis-color: $black !default;
$body-secondary-color: rgba($body-color, .75) !default;
$body-secondary-bg: $gray-200 !default;
$body-tertiary-color: rgba($body-color, .5) !default;
$body-tertiary-bg: $gray-100 !default;
$emphasis-color: $black !default;
// Links
//
@ -485,7 +525,6 @@ $border-widths: (
4: 4px,
5: 5px
) !default;
$border-style: solid !default;
$border-color: $gray-300 !default;
$border-color-translucent: rgba($black, .175) !default;
@ -501,10 +540,10 @@ $border-radius-pill: 50rem !default;
// scss-docs-end border-radius-variables
// scss-docs-start box-shadow-variables
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
$box-shadow: 0 .5rem 1rem rgba(var(--#{$prefix}body-color-rgb), .15) !default;
$box-shadow-sm: 0 .125rem .25rem rgba(var(--#{$prefix}body-color-rgb), .075) !default;
$box-shadow-lg: 0 1rem 3rem rgba(var(--#{$prefix}body-color-rgb), .175) !default;
$box-shadow-inset: inset 0 1px 2px rgba(var(--#{$prefix}body-color-rgb), .075) !default;
// scss-docs-end box-shadow-variables
$component-active-color: $white !default;
@ -619,7 +658,7 @@ $small-font-size: .875em !default;
$sub-sup-font-size: .75em !default;
$text-muted: $gray-600 !default;
$text-muted: var(--#{$prefix}secondary-color) !default;
$initialism-font-size: $small-font-size !default;
@ -825,13 +864,13 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
$input-bg: $body-bg !default;
$input-bg: var(--#{$prefix}form-control-bg) !default;
$input-disabled-color: null !default;
$input-disabled-bg: $gray-200 !default;
$input-disabled-bg: var(--#{$prefix}form-control-disabled-bg) !default;
$input-disabled-border-color: null !default;
$input-color: $body-color !default;
$input-border-color: $gray-400 !default;
$input-color: var(--#{$prefix}body-color) !default;
$input-border-color: var(--#{$prefix}border-color) !default; //$gray-400
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: $box-shadow-inset !default;
@ -845,8 +884,8 @@ $input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: $gray-600 !default;
$input-plaintext-color: $body-color !default;
$input-placeholder-color: var(--#{$prefix}secondary-color) !default;
$input-plaintext-color: var(--#{$prefix}body-color) !default;
$input-height-border: calc($input-border-width * 2) !default; // stylelint-disable-line function-disallowed-list
@ -875,7 +914,7 @@ $form-check-transition: null !default;
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: $input-bg !default;
$form-check-input-border: 1px solid rgba($black, .25) !default;
$form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
@ -920,7 +959,7 @@ $input-group-addon-padding-y: $input-padding-y !default;
$input-group-addon-padding-x: $input-padding-x !default;
$input-group-addon-font-weight: $input-font-weight !default;
$input-group-addon-color: $input-color !default;
$input-group-addon-bg: $gray-200 !default;
$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
$input-group-addon-border-color: $input-border-color !default;
// scss-docs-end input-group-variables
@ -935,7 +974,7 @@ $form-select-line-height: $input-line-height !default;
$form-select-color: $input-color !default;
$form-select-bg: $input-bg !default;
$form-select-disabled-color: null !default;
$form-select-disabled-bg: $gray-200 !default;
$form-select-disabled-bg: $input-disabled-bg !default;
$form-select-disabled-border-color: $input-disabled-border-color !default;
$form-select-bg-position: right $form-select-padding-x center !default;
$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
@ -972,7 +1011,7 @@ $form-select-transition: $input-transition !default;
$form-range-track-width: 100% !default;
$form-range-track-height: .5rem !default;
$form-range-track-cursor: pointer !default;
$form-range-track-bg: $gray-300 !default;
$form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
$form-range-track-border-radius: 1rem !default;
$form-range-track-box-shadow: $box-shadow-inset !default;
@ -985,14 +1024,14 @@ $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !defa
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
$form-range-thumb-disabled-bg: $gray-500 !default;
$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// scss-docs-end form-range-variables
// scss-docs-start form-file-variables
$form-file-button-color: $input-color !default;
$form-file-button-bg: $input-group-addon-bg !default;
$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
// scss-docs-end form-file-variables
// scss-docs-start form-floating-variables
@ -1027,12 +1066,20 @@ $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://w
// scss-docs-start form-validation-states
$form-validation-states: (
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
"color": var(--#{$prefix}success-text),
"icon": $form-feedback-icon-valid,
"tooltip-color": #fff,
"tooltip-bg-color": var(--#{$prefix}success),
"focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
"border-color": var(--#{$prefix}success),
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
"color": var(--#{$prefix}danger-text),
"icon": $form-feedback-icon-invalid,
"tooltip-color": #fff,
"tooltip-bg-color": var(--#{$prefix}danger),
"focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
"border-color": var(--#{$prefix}danger),
)
) !default;
// scss-docs-end form-validation-states
@ -1076,15 +1123,15 @@ $nav-link-font-weight: null !default;
$nav-link-color: var(--#{$prefix}link-color) !default;
$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
$nav-link-disabled-color: $gray-600 !default;
$nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
$nav-tabs-border-color: $gray-300 !default;
$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-active-color: $gray-700 !default;
$nav-tabs-link-active-bg: $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-link-active-color: $component-active-color !default;
@ -1114,12 +1161,12 @@ $navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-focus-width: $btn-focus-width !default;
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
$navbar-light-color: rgba($black, .55) !default;
$navbar-light-hover-color: rgba($black, .7) !default;
$navbar-light-active-color: rgba($black, .9) !default;
$navbar-light-disabled-color: rgba($black, .3) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba($black, .1) !default;
$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{rgba($body-color, .75)}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
$navbar-light-brand-color: $navbar-light-active-color !default;
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
// scss-docs-end navbar-variables
@ -1146,8 +1193,8 @@ $dropdown-padding-x: 0 !default;
$dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !default;
$dropdown-font-size: $font-size-base !default;
$dropdown-color: $body-color !default;
$dropdown-bg: $white !default;
$dropdown-color: var(--#{$prefix}body-color) !default;
$dropdown-bg: var(--#{$prefix}body-bg) !default;
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: var(--#{$prefix}border-width) !default;
@ -1156,9 +1203,9 @@ $dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: $box-shadow !default;
$dropdown-link-color: $gray-900 !default;
$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
$dropdown-link-hover-bg: $gray-200 !default;
$dropdown-link-color: var(--#{$prefix}body-color) !default;
$dropdown-link-hover-color: $dropdown-link-color !default;
$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
@ -1205,28 +1252,28 @@ $pagination-padding-x-lg: 1.5rem !default;
$pagination-font-size: $font-size-base !default;
$pagination-color: var(--#{$prefix}link-color) !default;
$pagination-bg: $white !default;
$pagination-border-radius: $border-radius !default;
$pagination-border-width: $border-width !default;
$pagination-margin-start: ($pagination-border-width * -1) !default;
$pagination-border-color: $gray-300 !default;
$pagination-bg: var(--#{$prefix}body-bg) !default;
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
$pagination-border-width: var(--#{$prefix}border-width) !default;
$pagination-margin-start: calc($pagination-border-width * -1) !default; // stylelint-disable-line function-disallowed-list
$pagination-border-color: var(--#{$prefix}border-color) !default;
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
$pagination-focus-bg: $gray-200 !default;
$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;
$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;
$pagination-active-border-color: $component-active-bg !default;
$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;
$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
@ -1252,16 +1299,16 @@ $card-title-color: null !default;
$card-subtitle-color: null !default;
$card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
$card-border-radius: $border-radius !default;
$card-border-radius: var(--#{$prefix}border-radius) !default;
$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba($black, .03) !default;
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
$card-bg: $white !default;
$card-bg: var(--#{$prefix}body-bg) !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width * .5 !default;
// scss-docs-end card-variables
@ -1271,11 +1318,11 @@ $card-group-margin: $grid-gutter-width * .5 !default;
// scss-docs-start accordion-variables
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: $body-color !default; // Sass variable because of $accordion-button-icon
$accordion-bg: $body-bg !default;
$accordion-color: var(--#{$prefix}body-color) !default; // Sass variable because of $accordion-button-icon
$accordion-bg: var(--#{$prefix}body-bg) !default;
$accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-radius: $border-radius !default;
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
@ -1283,18 +1330,18 @@ $accordion-body-padding-x: $accordion-padding-x !default;
$accordion-button-padding-y: $accordion-padding-y !default;
$accordion-button-padding-x: $accordion-padding-x !default;
$accordion-button-color: $accordion-color !default;
$accordion-button-color: var(--#{$prefix}body-color) !default;
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
$accordion-transition: $btn-transition, border-radius .15s ease !default;
$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
$accordion-button-active-color: shade-color($primary, 10%) !default;
$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
$accordion-button-active-color: var(--#{$prefix}primary-text) !default;
$accordion-button-focus-border-color: $input-focus-border-color !default;
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
$accordion-icon-color: $accordion-button-color !default;
$accordion-icon-active-color: $accordion-button-active-color !default;
$accordion-icon-color: $body-color !default;
$accordion-icon-active-color: $primary-text !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default;
@ -1307,9 +1354,9 @@ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
// scss-docs-start tooltip-variables
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: $white !default;
$tooltip-bg: $black !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-color: var(--#{$prefix}body-bg) !default;
$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: $spacer * .25 !default;
$tooltip-padding-x: $spacer * .5 !default;
@ -1337,21 +1384,21 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
// scss-docs-start popover-variables
$popover-font-size: $font-size-sm !default;
$popover-bg: $white !default;
$popover-bg: var(--#{$prefix}body-bg) !default;
$popover-max-width: 276px !default;
$popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
$popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
$popover-inner-border-radius: calc($popover-border-radius - $popover-border-width) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow: $box-shadow !default;
$popover-header-font-size: $font-size-base !default;
$popover-header-bg: shade-color($popover-bg, 6%) !default;
$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: .5rem !default;
$popover-header-padding-x: $spacer !default;
$popover-body-color: $body-color !default;
$popover-body-color: var(--#{$prefix}body-color) !default;
$popover-body-padding-y: $spacer !default;
$popover-body-padding-x: $spacer !default;
@ -1374,16 +1421,16 @@ $toast-padding-x: .75rem !default;
$toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-background-color: rgba($white, .85) !default;
$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-border-width: var(--#{$prefix}border-width) !default;
$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
$toast-border-radius: $border-radius !default;
$toast-box-shadow: $box-shadow !default;
$toast-border-radius: var(--#{$prefix}border-radius) !default;
$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
$toast-spacing: $container-padding-x !default;
$toast-header-color: $gray-600 !default;
$toast-header-background-color: rgba($white, .85) !default;
$toast-header-border-color: rgba($black, .05) !default;
$toast-header-color: var(--#{$prefix}secondary-color) !default;
$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-header-border-color: $toast-border-color !default;
// scss-docs-end toast-variables
@ -1412,10 +1459,10 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default;
$modal-content-bg: $white !default;
$modal-content-bg: var(--#{$prefix}body-bg) !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: $box-shadow-sm !default;
$modal-content-box-shadow-sm-up: $box-shadow !default;
@ -1462,15 +1509,20 @@ $alert-color-scale: 40% !default;
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
// scss-docs-end alert-variables
// fusv-disable
$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
// fusv-enable
// Progress bars
// scss-docs-start progress-variables
$progress-height: 1rem !default;
$progress-font-size: $font-size-base * .75 !default;
$progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: $box-shadow-inset !default;
$progress-bg: var(--#{$prefix}secondary-bg) !default;
$progress-border-radius: var(--#{$prefix}border-radius) !default;
$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$progress-bar-color: $white !default;
$progress-bar-bg: $primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
@ -1481,30 +1533,32 @@ $progress-bar-transition: width .6s ease !default;
// List group
// scss-docs-start list-group-variables
$list-group-color: $gray-900 !default;
$list-group-bg: $white !default;
$list-group-border-color: rgba($black, .125) !default;
$list-group-border-width: var(--#{$prefix}border-width) !default;
$list-group-border-radius: $border-radius !default;
$list-group-color: var(--#{$prefix}body-color) !default;
$list-group-bg: var(--#{$prefix}body-bg) !default;
$list-group-border-color: var(--#{$prefix}border-color) !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: var(--#{$prefix}border-radius) !default;
$list-group-item-padding-y: $spacer * .5 !default;
$list-group-item-padding-x: $spacer !default;
$list-group-item-bg-scale: -80% !default;
$list-group-item-color-scale: 40% !default;
// fusv-disable
$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
// fusv-enable
$list-group-hover-bg: $gray-100 !default;
$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
$list-group-disabled-color: $gray-600 !default;
$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-action-color: $gray-700 !default;
$list-group-action-hover-color: $list-group-action-color !default;
$list-group-action-color: var(--#{$prefix}secondary-color) !default;
$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
$list-group-action-active-color: $body-color !default;
$list-group-action-active-bg: $gray-200 !default;
$list-group-action-active-color: var(--#{$prefix}body-color) !default;
$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
// scss-docs-end list-group-variables
@ -1512,11 +1566,11 @@ $list-group-action-active-bg: $gray-200 !default;
// scss-docs-start thumbnail-variables
$thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default;
$thumbnail-bg: var(--#{$prefix}body-bg) !default;
$thumbnail-border-width: var(--#{$prefix}border-width) !default;
$thumbnail-border-color: var(--#{$prefix}border-color) !default;
$thumbnail-border-radius: $border-radius !default;
$thumbnail-box-shadow: $box-shadow-sm !default;
$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
// scss-docs-end thumbnail-variables
@ -1524,7 +1578,7 @@ $thumbnail-box-shadow: $box-shadow-sm !default;
// scss-docs-start figure-variables
$figure-caption-font-size: $small-font-size !default;
$figure-caption-color: $gray-600 !default;
$figure-caption-color: var(--#{$prefix}secondary-color) !default;
// scss-docs-end figure-variables
@ -1537,8 +1591,8 @@ $breadcrumb-padding-x: 0 !default;
$breadcrumb-item-padding-x: .5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: null !default;
$breadcrumb-divider-color: $gray-600 !default;
$breadcrumb-active-color: $gray-600 !default;
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-divider: quote("/") !default;
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
$breadcrumb-border-radius: null !default;
@ -1627,8 +1681,8 @@ $offcanvas-transition-duration: .3s !default;
$offcanvas-border-color: $modal-content-border-color !default;
$offcanvas-border-width: $modal-content-border-width !default;
$offcanvas-title-line-height: $modal-title-line-height !default;
$offcanvas-bg-color: $modal-content-bg !default;
$offcanvas-color: $modal-content-color !default;
$offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
$offcanvas-color: var(--#{$prefix}body-color) !default;
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;

2
scss/bootstrap-grid.scss vendored
View File

@ -5,10 +5,12 @@ $include-column-box-sizing: true !default;
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins/lists";
@import "mixins/breakpoints";
@import "mixins/color-mode";
@import "mixins/container";
@import "mixins/grid";
@import "mixins/utilities";

1
scss/bootstrap-reboot.scss vendored
View File

@ -3,6 +3,7 @@
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "root";

1
scss/bootstrap-utilities.scss vendored
View File

@ -4,6 +4,7 @@
// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";

1
scss/bootstrap.scss vendored
View File

@ -6,6 +6,7 @@
// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";

35
scss/forms/_form-check.scss
View File

@ -27,11 +27,14 @@
}
.form-check-input {
--#{$prefix}form-check-bg: #{escape-svg($form-check-input-bg)};
width: $form-check-input-width;
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
vertical-align: top;
background-color: $form-check-input-bg;
background-color: var(--#{$prefix}form-check-bg);
background-image: var(--#{$prefix}form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
@ -65,17 +68,17 @@
&[type="checkbox"] {
@if $enable-gradients {
background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
background-image: escape-svg($form-check-input-checked-bg-image);
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
}
}
&[type="radio"] {
@if $enable-gradients {
background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
background-image: escape-svg($form-check-radio-checked-bg-image);
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
}
}
}
@ -85,9 +88,9 @@
border-color: $form-check-input-indeterminate-border-color;
@if $enable-gradients {
background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
} @else {
background-image: escape-svg($form-check-input-indeterminate-bg-image);
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
}
}
@ -121,24 +124,26 @@
padding-left: $form-switch-padding-start;
.form-check-input {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
width: $form-switch-width;
margin-left: $form-switch-padding-start * -1;
background-image: escape-svg($form-switch-bg-image);
background-image: var(--#{$prefix}form-switch-bg);
background-position: left center;
@include border-radius($form-switch-border-radius);
@include transition($form-switch-transition);
&:focus {
background-image: escape-svg($form-switch-focus-bg-image);
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
}
&:checked {
background-position: $form-switch-checked-bg-position;
@if $enable-gradients {
background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
background-image: escape-svg($form-switch-checked-bg-image);
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
}
}
}
@ -173,3 +178,11 @@
}
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.form-switch .form-check-input:not(:checked):not(:focus) {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
}
}
}

12
scss/forms/_form-select.scss
View File

@ -4,6 +4,8 @@
// https://primer.github.io/.
.form-select {
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
display: block;
width: 100%;
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
@ -14,7 +16,7 @@
line-height: $form-select-line-height;
color: $form-select-color;
background-color: $form-select-bg;
background-image: escape-svg($form-select-indicator);
background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: $form-select-bg-position;
background-size: $form-select-bg-size;
@ -69,3 +71,11 @@
@include font-size($form-select-font-size-lg);
@include border-radius($form-select-border-radius-lg);
}
@if $enable-dark-mode {
@include color-mode(dark) {
.form-select {
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
}
}
}

2
scss/mixins/_alert.scss
View File

@ -1,3 +1,5 @@
@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
// scss-docs-start alert-variant-mixin
@mixin alert-variant($background, $border, $color) {
--#{$prefix}alert-color: #{$color};

13
scss/mixins/_color-mode.scss Normal file
View File

@ -0,0 +1,13 @@
// scss-docs-start color-mode-mixin
@mixin color-mode($mode: light, $type: $color-mode-type) {
@if $type == "media-query" {
@media (prefers-color-scheme: $mode) {
@content;
}
} @else {
[data-bs-theme="#{$mode}"] {
@content;
}
}
}
// scss-docs-end color-mode-mixin

15
scss/mixins/_forms.scss
View File

@ -21,7 +21,8 @@
$icon,
$tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
$border-color: $color
) {
.#{$state}-feedback {
display: none;
@ -56,7 +57,7 @@
.form-control {
@include form-validation-state-selector($state) {
border-color: $color;
border-color: $border-color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
@ -67,7 +68,7 @@
}
&:focus {
border-color: $color;
border-color: $border-color;
box-shadow: $focus-box-shadow;
}
}
@ -85,20 +86,20 @@
.form-select {
@include form-validation-state-selector($state) {
border-color: $color;
border-color: $border-color;
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
--#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
padding-right: $form-select-feedback-icon-padding-end;
background-image: escape-svg($form-select-indicator), escape-svg($icon);
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
}
&:focus {
border-color: $color;
border-color: $border-color;
box-shadow: $focus-box-shadow;
}
}
@ -114,7 +115,7 @@
.form-check-input {
@include form-validation-state-selector($state) {
border-color: $color;
border-color: $border-color;
&:checked {
background-color: $color;

3
scss/mixins/_list-group.scss
View File

@ -1,3 +1,6 @@
@include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
// List Groups
// scss-docs-start list-group-mixin

62
site/assets/js/color-modes/index.js Normal file
View File

@ -0,0 +1,62 @@
/*!
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
*/
(() => {
'use strict'
const storedTheme = localStorage.getItem('theme')
const getPreferredTheme = () => {
if (storedTheme) {
return storedTheme
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
const setTheme = function (theme) {
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark')
} else {
document.documentElement.setAttribute('data-bs-theme', theme)
}
}
setTheme(getPreferredTheme())
const showActiveTheme = theme => {
const activeThemeIcon = document.querySelector('.theme-icon-active use')
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
element.classList.remove('active')
})
btnToActive.classList.add('active')
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
if (storedTheme !== 'light' || storedTheme !== 'dark') {
setTheme(getPreferredTheme())
}
})
window.addEventListener('load', () => {
showActiveTheme(getPreferredTheme())
document.querySelectorAll('[data-bs-theme-value]')
.forEach(toggle => {
toggle.addEventListener('click', () => {
const theme = toggle.getAttribute('data-bs-theme-value')
localStorage.setItem('theme', theme)
setTheme(theme)
showActiveTheme(theme)
})
})
})
})()

6
site/assets/scss/_ads.scss
View File

@ -14,10 +14,10 @@
@include font-size(.8125rem);
line-height: 1.4;
text-align: left;
background-color: $gray-100;
background-color: var(--bs-tertiary-bg);
a {
color: $gray-800;
color: var(--bs-body-color);
text-decoration: none;
}
@ -34,5 +34,5 @@
.carbon-poweredby {
display: block;
margin-top: .75rem;
color: $gray-700 !important;
color: var(--bs-body-color) !important;
}

4
site/assets/scss/_brand.scss
View File

@ -15,13 +15,13 @@
// Individual items
.bd-brand-item {
+ .bd-brand-item {
border-top: 1px solid $white;
border-top: 1px solid var(--#{$prefix}border-color);
}
@include media-breakpoint-up(md) {
+ .bd-brand-item {
border-top: 0;
border-left: 1px solid $white;
border-left: 1px solid var(--#{$prefix}border-color);
}
}
}

14
site/assets/scss/_buttons.scss
View File

@ -33,13 +33,15 @@
}
.btn-bd-light {
--btn-custom-color: #{mix($bd-violet, $white, 75%)};
--bs-btn-color: var(--bs-gray-600);
--bs-btn-border-color: var(--bs-gray-400);
--bs-btn-hover-color: var(--bd-violet);
--bs-btn-hover-border-color: var(--bd-violet);
--bs-btn-active-color: var(--bd-violet);
--bs-btn-border-color: var(--bs-border-color);
--bs-btn-hover-color: var(--btn-custom-color);
--bs-btn-hover-border-color: var(--btn-custom-color);
--bs-btn-active-color: var(--btn-custom-color);
--bs-btn-active-bg: var(--bs-white);
--bs-btn-active-border-color: var(--bd-violet);
--bs-btn-focus-border-color: var(--bd-violet);
--bs-btn-active-border-color: var(--btn-custom-color);
--bs-btn-focus-border-color: var(--btn-custom-color);
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
}

6
site/assets/scss/_callouts.scss
View File

@ -6,6 +6,7 @@
padding: 1.25rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
color: var(--bd-callout-color, inherit);
background-color: var(--bd-callout-bg, var(--bs-gray-100));
border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
@ -29,7 +30,8 @@
// Variations
@each $variant in $bd-callout-variants {
.bd-callout-#{$variant} {
--bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075);
--bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5);
--bd-callout-color: var(--bs-#{$variant}-text);
--bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
--bd-callout-border: var(--bs-#{$variant}-border-subtle);
}
}

6
site/assets/scss/_clipboard-js.scss
View File

@ -22,13 +22,13 @@
display: block;
padding: .5em;
line-height: 1;
color: $gray-900;
background-color: $gray-100;
color: var(--bs-body-color);
background-color: var(--bs-tertiary-bg);
border: 0;
@include border-radius(.25rem);
&:hover {
color: $primary;
color: var(--bs-link-color);
}
&:focus {

44
site/assets/scss/_component-examples.scss
View File

@ -3,7 +3,7 @@
//
.bd-example-snippet {
border: solid $border-color;
border: solid var(--bs-border-color);
border-width: 1px 0;
@include media-breakpoint-up(md) {
@ -17,7 +17,7 @@
position: relative;
padding: var(--bd-example-padding);
margin: 0 ($bd-gutter-x * -.5);
border: solid $border-color;
border: solid var(--bs-border-color);
border-width: 1px 0;
@include clearfix();
@ -32,7 +32,7 @@
+ .bd-code-snippet {
@include border-top-radius(0);
border: solid $border-color;
border: solid var(--bs-border-color);
border-width: 0 1px 1px;
}
@ -58,7 +58,8 @@
display: block;
}
> :last-child {
> :last-child,
> nav:last-child .breadcrumb {
margin-bottom: 0;
}
@ -115,11 +116,12 @@
//
.bd-example-row [class^="col"],
.bd-example-cssgrid .grid > * {
.bd-example-cols [class^="col"] > *,
.bd-example-cssgrid [class*="grid"] > * {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(var(--bd-violet-rgb), .1);
border: 1px solid rgba(var(--bd-violet-rgb), .25);
background-color: rgba(var(--bd-violet-rgb), .15);
border: 1px solid rgba(var(--bd-violet-rgb), .3);
}
.bd-example-row .row + .row,
@ -129,12 +131,12 @@
.bd-example-row-flex-cols .row {
min-height: 10rem;
background-color: rgba(255, 0, 0, .1);
background-color: rgba(var(--bd-violet-rgb), .15);
}
.bd-example-flex div {
background-color: rgba($bd-purple, .15);
border: 1px solid rgba($bd-purple, .15);
background-color: rgba(var(--bd-violet-rgb), .15);
border: 1px solid rgba(var(--bd-violet-rgb), .3);
}
// Grid mixins
@ -176,8 +178,8 @@
.ratio {
display: inline-block;
width: 10rem;
color: $gray-600;
background-color: $gray-100;
color: var(--bs-secondary-color);
background-color: var(--bs-tertiary-bg);
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
> div {
@ -259,7 +261,7 @@
width: 5rem;
height: 5rem;
margin: .25rem;
background-color: #f5f5f5;
background-color: var(--bs-tertiary-bg);
}
}
@ -275,13 +277,13 @@
.position-relative {
height: 200px;
background-color: #f5f5f5;
background-color: var(--bs-tertiary-bg);
}
.position-absolute {
width: 2rem;
height: 2rem;
background-color: $dark;
background-color: var(--bs-body-color);
@include border-radius();
}
}
@ -342,7 +344,7 @@
position: relative;
padding: .75rem ($bd-gutter-x * .5);
margin-bottom: 1rem;
background-color: var(--bs-gray-100);
background-color: var(--bs-tertiary-bg);
@include media-breakpoint-up(md) {
padding: .75rem 1.25rem;
@ -361,7 +363,7 @@
pre code {
@include font-size(inherit);
color: $gray-900; // Effectively the base text color
color: var(--bs-body-color); // Effectively the base text color
word-wrap: normal;
}
}
@ -386,6 +388,12 @@
}
.highlight-toolbar {
border: solid $border-color;
background-color: var(--bs-tertiary-bg);
border: solid var(--bs-border-color);
border-width: 1px 0;
.btn-clipboard {
margin-top: 0;
margin-right: 0;
}
}

65
site/assets/scss/_content.scss
View File

@ -32,6 +32,9 @@
// Override Bootstrap defaults
> .table,
> .table-responsive .table {
--bs-table-border-color: var(--bs-border-color);
max-width: 100%;
margin-bottom: 1.5rem;
@include font-size(.875rem);
@ -60,6 +63,14 @@
}
}
th {
color: var(--bs-emphasis-color);
}
strong {
color: var(--bs-emphasis-color);
}
// Prevent breaking of code
// stylelint-disable-next-line selector-max-compound-selectors
th,
@ -80,6 +91,16 @@
min-width: 280px;
}
.table-swatches {
th {
color: var(--bs-emphasis-color);
}
td code {
white-space: nowrap;
}
}
.bd-title {
@include font-size(3rem);
}
@ -89,13 +110,10 @@
font-weight: 300;
}
.bd-bg-violet {
background-color: $bd-violet;
}
.bi {
width: 1em;
height: 1em;
vertical-align: -.125em;
fill: currentcolor;
}
@ -121,6 +139,43 @@
.border-lg-start {
@include media-breakpoint-up(lg) {
border-left: $border-width solid $border-color;
border-left: var(--bs-border-width) solid var(--bs-border-color);
}
}
// stylelint-disable selector-no-qualifying-type
.bd-summary-link {
color: var(--bs-link-color);
&:hover,
details[open] > & {
color: var(--bs-link-hover-color);
}
}
// stylelint-enable selector-no-qualifying-type
// scss-docs-start custom-color-mode
[data-bs-theme="blue"] {
--bs-body-color: var(--bs-white);
--bs-body-color-rgb: #{to-rgb($white)};
--bs-body-bg: var(--bs-blue);
--bs-body-bg-rgb: #{to-rgb($blue)};
--bs-tertiary-bg: #{$blue-600};
.dropdown-menu {
--bs-dropdown-bg: #{mix($blue-500, $blue-600)};
--bs-dropdown-link-active-bg: #{$blue-700};
}
.btn-secondary {
--bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
--bs-btn-border-color: #{rgba($white, .25)};
--bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
--bs-btn-hover-border-color: #{rgba($white, .25)};
--bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
--bs-btn-active-border-color: #{rgba($white, .5)};
--bs-btn-focus-border-color: #{rgba($white, .5)};
--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
}
}
// scss-docs-end custom-color-mode

4
site/assets/scss/_footer.scss
View File

@ -4,12 +4,12 @@
.bd-footer {
a {
color: $gray-700;
color: var(--bs-body-color);
text-decoration: none;
&:hover,
&:focus {
color: $link-color;
color: var(--bs-link-hover-color);
text-decoration: underline;
}
}

16
site/assets/scss/_masthead.scss
View File

@ -11,13 +11,12 @@
h1 {
@include font-size(4rem);
line-height: 1;
}
.lead {
@include font-size(1rem);
font-weight: 400;
color: $gray-700;
color: var(--bs-secondary-color);
}
.bd-code-snippet {
@ -46,8 +45,7 @@
}
#carbonads { // stylelint-disable-line selector-max-id
margin-right: auto;
margin-left: auto;
margin-inline: auto;
}
@include media-breakpoint-up(md) {
@ -86,7 +84,7 @@
mix-blend-mode: darken;
svg {
filter: drop-shadow(0 1px 1px #fff);
filter: drop-shadow(0 1px 1px var(--bs-body-bg));
}
}
@ -104,3 +102,11 @@
transform: scale(1.1);
}
}
@if $enable-dark-mode {
[data-bs-theme="dark"] {
.masthead-followup-icon {
mix-blend-mode: lighten;
}
}
}

54
site/assets/scss/_navbar.scss
View File

@ -1,8 +1,16 @@
.bd-navbar {
padding: .75rem 0;
background-color: transparent;
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
&::after {
position: absolute;
inset: 0;
z-index: -1;
display: block;
content: "";
background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
}
.bd-navbar-toggle {
@include media-breakpoint-down(lg) {
@ -30,6 +38,7 @@
}
.navbar-brand {
color: $white;
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
&:hover {
@ -60,7 +69,7 @@
}
.offcanvas-lg {
background-color: var(--bd-violet);
background-color: var(--bd-violet-bg);
border-left: 0;
@include media-breakpoint-down(lg) {
@ -75,17 +84,42 @@
}
.dropdown-menu {
--#{$prefix}dropdown-min-width: 12rem;
--#{$prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
@include rfs(.875rem, --#{$prefix}dropdown-font-size);
--bs-dropdown-min-width: 12rem;
--bs-dropdown-padding-x: .25rem;
--bs-dropdown-padding-y: .25rem;
--bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
--bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
@include rfs(.875rem, --bs-dropdown-font-size);
@include font-size(.875rem);
@include border-radius(.5rem);
box-shadow: $dropdown-box-shadow;
li + li {
margin-top: .125rem;
}
.dropdown-item.current {
.dropdown-item {
@include border-radius(.25rem);
&:active {
.bi {
color: inherit !important; // stylelint-disable-line declaration-no-important
}
}
}
.active {
font-weight: 600;
background-image: escape-svg($dropdown-active-icon);
background-repeat: no-repeat;
background-position: right $dropdown-item-padding-x top .6rem;
background-size: .75rem .75rem;
.bi {
display: block !important; // stylelint-disable-line declaration-no-important
}
}
}
}
@include color-mode(dark) {
.bd-navbar {
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
}
}

19
site/assets/scss/_sidebar.scss
View File

@ -11,6 +11,17 @@
margin-left: -.25rem;
overflow-y: auto;
}
@include media-breakpoint-down(lg) {
.offcanvas-lg {
border-right-color: var(--bs-border-color);
box-shadow: $box-shadow-lg;
}
}
}
.bd-links-heading {
color: var(--bs-emphasis-color);
}
.bd-links-nav {
@ -35,16 +46,16 @@
.bd-links-link {
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: 1rem;
color: rgba($black, .65);
margin-left: 1.125rem;
color: var(--bs-body-color);
text-decoration: if($link-decoration == none, null, none);
&:hover,
&:focus,
&.active {
color: rgba($black, .85);
color: var(--bs-emphasis-color);
text-decoration: if($link-hover-decoration == underline, none, null);
background-color: rgba(var(--bd-violet-rgb), .1);
background-color: var(--bd-sidebar-link-bg);
}
&.active {

26
site/assets/scss/_syntax.scss
View File

@ -1,4 +1,5 @@
:root {
:root,
[data-bs-theme="light"] {
--base00: #fff;
--base01: #f5f5f5;
--base02: #c8c8fa;
@ -17,6 +18,25 @@
--base0F: #333;
}
[data-bs-theme="dark"] {
--base00: #282c34;
--base01: #353b45;
--base02: #3e4451;
--base03: #868e96;
--base04: #565c64;
--base05: #abb2bf;
--base06: #b6bdca;
--base07: #d19a66;
--base08: #e06c75;
--base09: #d19a66;
--base0A: #e5c07b;
--base0B: #98c379;
--base0C: #56b6c2;
--base0D: #61afef;
--base0E: #c678dd;
--base0F: #be5046;
}
.hl { background-color: var(--base02); }
.c { color: var(--base03); }
.err { color: var(--base08); }
@ -101,14 +121,14 @@
.language-bash,
.language-sh {
.line::before {
color: #777;
color: var(--base03);
content: "$ ";
user-select: none;
}
}
.language-powershell::before {
color: #009;
color: var(--base0C);
content: "PM> ";
user-select: none;
}

13
site/assets/scss/_toc.scss
View File

@ -52,15 +52,16 @@
}
@include media-breakpoint-down(md) {
border: 1px solid $border-color;
@include border-radius(.4rem);
color: var(--bs-body-color);
border: 1px solid var(--bs-border-color);
@include border-radius(var(--bs-border-radius));
&:hover,
&:focus,
&:active,
&[aria-expanded="true"] {
color: var(--bd-violet);
background-color: $white;
background-color: var(--bs-body-bg);
border-color: var(--bd-violet);
}
@ -75,9 +76,9 @@
@include media-breakpoint-down(md) {
nav {
padding: 1.25rem;
background-color: var(--bs-gray-100);
border: 1px solid $border-color;
@include border-radius(.25rem);
background-color: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
@include border-radius(var(--bs-border-radius));
}
}

13
site/assets/scss/_variables.scss
View File

@ -5,12 +5,12 @@ $bd-purple: #4c0bce;
$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
$bd-accent: #ffe484;
$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
$bd-gutter-x: 3rem;
$bd-callout-variants: info, warning, danger !default;
:root {
:root,
[data-bs-theme="light"] {
--bd-purple: #{$bd-purple};
--bd-violet: #{$bd-violet};
--bd-accent: #{$bd-accent};
@ -20,4 +20,13 @@ $bd-callout-variants: info, warning, danger !default;
--bd-teal-rgb: #{to-rgb($teal-500)};
--docsearch-primary-color: var(--bd-violet);
--docsearch-logo-color: var(--bd-violet);
--bd-violet-bg: var(--bd-violet);
--bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
}
[data-bs-theme="dark"] {
--bd-violet: #{mix($bd-violet, $white, 75%)};
--bd-violet-bg: #{$bd-violet};
--bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
}

6
site/content/docs/5.2/about/brand.md
View File

@ -12,13 +12,13 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline
When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects. **Do not use the Twitter name or logo** in association with Bootstrap.
<div class="bd-brand-item px-2 py-5 mb-3 bg-light rounded-lg">
<div class="bd-brand-item px-2 py-5 mb-3 border rounded-3">
<img class="d-block img-fluid mx-auto" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="256" height="204">
</div>
Our logo mark is also available in black and white. All rules for our primary logo apply to these as well.
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-3 overflow-hidden w-100 mb-3">
<div class="bd-brand-item w-100 px-2 py-5">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-black.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
</div>
@ -31,7 +31,7 @@ Our logo mark is also available in black and white. All rules for our primary lo
Bootstrap should always be referred to as just **Bootstrap**. No Twitter before it and no capital _s_.
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
<div class="bd-brand-logos d-sm-flex text-center border rounded-3 overflow-hidden w-100 mb-3">
<div class="bd-brand-item w-100 p-3">
<div class="h3">Bootstrap</div>
<strong class="text-success">Correct</strong>

2
site/content/docs/5.2/components/accordion.md
View File

@ -66,7 +66,7 @@ Click the accordions below to expand/collapse the accordion content.
Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
{{< example class="bg-light" >}}
{{< example class="bg-body-secondary" >}}
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">

6
site/content/docs/5.2/components/alerts.md
View File

@ -10,6 +10,10 @@ toc: true
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
{{< callout info >}}
**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [the Sass loop](#sass-loop).
{{< /callout >}}
{{< example >}}
{{< alerts.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
@ -177,6 +181,8 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS
### Sass mixin
{{< deprecated-in "5.3.0" >}}
Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.
{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}

4
site/content/docs/5.2/components/carousel.md
View File

@ -236,8 +236,12 @@ Carousels support swiping left/right on touchscreen devices to move between slid
## Dark variant
{{< deprecated-in "5.3.0" >}}
Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
{{< callout-deprecated-dark-variants "carousel" >}}
{{< example >}}
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">

14
site/content/docs/5.2/components/close-button.md
View File

@ -22,13 +22,19 @@ Disabled close buttons change their `opacity`. We've also applied `pointer-event
<button type="button" class="btn-close" disabled aria-label="Close"></button>
{{< /example >}}
## White variant
## Dark variant
Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `filter` property to invert the `background-image`.
{{< callout info >}}
**Heads up!** As of v5.3.0, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button.
{{< /callout >}}
Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value.
{{< example class="bg-dark" >}}
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
<div data-bs-theme="dark">
<button type="button" class="btn-close" aria-label="Close"></button>
<button type="button" class="btn-close" disabled aria-label="Close"></button>
</div>
{{< /example >}}
## Sass

10
site/content/docs/5.2/components/dropdowns.md
View File

@ -349,8 +349,12 @@ Button dropdowns work with buttons of all sizes, including default and split dro
## Dark dropdowns
{{< deprecated-in "5.3.0" >}}
Opt into darker dropdowns to match a dark navbar or custom style by adding `.dropdown-menu-dark` onto an existing `.dropdown-menu`. No changes are required to the dropdown items.
{{< callout-deprecated-dark-variants "dropdown-menu" >}}
{{< example >}}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
@ -998,6 +1002,12 @@ As part of Bootstrap's evolving CSS variables approach, dropdowns now use local
{{< scss-docs name="dropdown-css-vars" file="scss/_dropdown.scss" >}}
{{< callout info >}}
Dropdown items include at least one variable that is not set on `.dropdown`. This allows you to provide a new value while Bootstrap defaults to a fallback value.
- `--bs-dropdown-item-border-radius`
{{< /callout >}}
Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
{{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}}

18
site/content/docs/5.2/components/list-group.md
View File

@ -154,7 +154,11 @@ Add `.list-group-horizontal` to change the layout of list group items from verti
{{< /list-group.inline >}}
{{< /example >}}
## Contextual classes
## Variants
{{< callout info >}}
**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [the Sass loop](#sass-loop).
{{< /callout >}}
Use contextual classes to style list items with a stateful background and color.
@ -169,7 +173,9 @@ Use contextual classes to style list items with a stateful background and color.
</ul>
{{< /example >}}
Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
### For links and buttons
Contextual classes also work with `.list-group-item-action` for `<a>` and `<button>` elements. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
{{< example >}}
<div class="list-group">
@ -311,15 +317,15 @@ As part of Bootstrap's evolving CSS variables approach, list groups now use loca
{{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
### Mixins
### Sass mixins
Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s.
Used in combination with `$theme-colors` to generate the [contextual variant classes](#variants) for `.list-group-item`s.
{{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
### Loop
### Sass loop
Loop that generates the modifier classes with the `list-group-item-variant()` mixin.
Loop that generates the modifier classes with an overriding of CSS variables.
{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}

2
site/content/docs/5.2/components/modal.md
View File

@ -38,7 +38,7 @@ Keep reading for demos and usage guidelines.
Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
<div class="bd-example bg-light">
<div class="bd-example bg-body-tertiary">
<div class="modal position-static d-block" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">

72
site/content/docs/5.2/components/navbar.md
View File

@ -37,7 +37,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@ -75,7 +75,7 @@ Here's an example of all the sub-components included in a responsive light-theme
</nav>
{{< /example >}}
This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-body-tertiary`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
### Brand
@ -87,14 +87,14 @@ Add your text within an element with the `.navbar-brand` class.
{{< example >}}
<!-- As a link -->
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
@ -106,7 +106,7 @@ Add your text within an element with the `.navbar-brand` class.
You can replace the text within the `.navbar-brand` with an `<img>`.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
@ -120,7 +120,7 @@ You can replace the text within the `.navbar-brand` with an `<img>`.
You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
@ -139,7 +139,7 @@ Add the `.active` class on `.nav-link` to indicate the current page.
Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@ -168,7 +168,7 @@ Please note that you should also add the `aria-current` attribute on the active
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
@ -189,7 +189,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@ -227,7 +227,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
Place various form controls and components within a navbar:
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
@ -240,7 +240,7 @@ Place various form controls and components within a navbar:
Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
@ -254,7 +254,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
@ -267,7 +267,7 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
@ -280,7 +280,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
@ -292,7 +292,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
Mix and match with other components and utilities as needed.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
@ -321,13 +321,17 @@ Mix and match with other components and utilities as needed.
## Color schemes
{{< callout warning >}}
**New in v5.2.0:** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`.
**New dark navbars in v5.3.0 —** We've deprecated `.navbar-dark` in favor of the new `data-bs-theme="dark"`. Add `data-bs-theme="dark"` to the `.navbar` to enable a component-specific color mode. [Learn more about our color modes.]({{< docsref "/customize/color-modes" >}})
---
**New in v5.2.0 —** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`.
{{< /callout >}}
Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.
<div class="bd-example">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<nav class="navbar navbar-expand-lg bg-body-secondary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
@ -356,7 +360,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
@ -385,7 +389,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
</div>
</nav>
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;">
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
@ -416,11 +420,11 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
</div>
```html
<nav class="navbar navbar-dark bg-dark">
<nav class="navbar bg-dark" data-bs-theme="dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<nav class="navbar bg-primary" data-bs-theme="dark">
<!-- Navbar content -->
</nav>
@ -435,7 +439,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
{{< example >}}
<div class="container">
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
@ -446,7 +450,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
Use any of the responsive containers to change how wide the content in your navbar is presented.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
@ -460,7 +464,7 @@ Use our [position utilities]({{< docsref "/utilities/position" >}}) to place nav
Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
@ -468,7 +472,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
{{< /example >}}
{{< example >}}
<nav class="navbar fixed-top bg-light">
<nav class="navbar fixed-top bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
@ -476,7 +480,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
{{< /example >}}
{{< example >}}
<nav class="navbar fixed-bottom bg-light">
<nav class="navbar fixed-bottom bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
@ -484,7 +488,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
{{< /example >}}
{{< example >}}
<nav class="navbar sticky-top bg-light">
<nav class="navbar sticky-top bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
@ -492,7 +496,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
{{< /example >}}
{{< example >}}
<nav class="navbar sticky-bottom bg-light">
<nav class="navbar sticky-bottom bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky bottom</a>
</div>
@ -508,7 +512,7 @@ Please note that this behavior comes with a potential drawback of `overflow`—w
Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
@ -559,7 +563,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
With no `.navbar-brand` shown at the smallest breakpoint:
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -589,7 +593,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
With a brand name shown on the left and toggler on the right:
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@ -619,7 +623,7 @@ With a brand name shown on the left and toggler on the right:
With a toggler on the left and brand name on the right:
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -675,7 +679,7 @@ Transform your expanding and collapsing navbar into an offcanvas drawer with the
In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely.
{{< example >}}
<nav class="navbar bg-light fixed-top">
<nav class="navbar bg-body-tertiary fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
@ -721,7 +725,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`.
```html
<nav class="navbar navbar-expand-lg bg-light fixed-top">
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
<span class="navbar-toggler-icon"></span>

4
site/content/docs/5.2/components/offcanvas.md
View File

@ -27,7 +27,7 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr
Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
{{< example class="bd-example-offcanvas p-0 bg-body-tertiary overflow-hidden" >}}
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
@ -143,7 +143,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
{{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>

8
site/content/docs/5.2/components/scrollspy.md
View File

@ -25,7 +25,7 @@ Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the elemen
Scroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well.
<div class="bd-example">
<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3 rounded-2">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
@ -45,7 +45,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
</li>
</ul>
</nav>
<div class="scrollspy-example bg-light p-3 rounded-2" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
<div class="scrollspy-example bg-body-tertiary p-3 rounded-2" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading2">Second heading</h4>
@ -60,7 +60,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
</div>
```html
<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
@ -80,7 +80,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Second heading</h4>

18
site/content/docs/5.2/components/toasts.md
View File

@ -27,7 +27,7 @@ To encourage extensible and predictable toasts, we recommend a header and body.
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
@ -121,7 +121,7 @@ Toasts are slightly translucent to blend in with what's below them.
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast-container position-static">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
@ -153,7 +153,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
Customize your toasts by removing sub-components, tweaking them with [utilities]({{< docsref "/utilities/api" >}}), or by adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
@ -166,7 +166,7 @@ Customize your toasts by removing sub-components, tweaking them with [utilities]
Alternatively, you can also add additional controls and components to toasts.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
@ -182,7 +182,7 @@ Alternatively, you can also add additional controls and components to toasts.
Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
@ -215,7 +215,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div aria-live="polite" aria-atomic="true" class="bg-body-secondary position-relative bd-example-toasts rounded-3">
<div class="toast-container p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
@ -233,7 +233,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
For systems that generate more notifications, consider using a wrapping element so they can easily stack.
{{< example class="bg-dark bd-example-toasts p-0" >}}
{{< example class="bd-example-toasts p-0" >}}
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
@ -271,7 +271,7 @@ For systems that generate more notifications, consider using a wrapping element
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
{{< example class="bg-dark bd-example-toasts d-flex" >}}
{{< example class="bd-example-toasts d-flex" >}}
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
@ -308,7 +308,7 @@ As the content you're displaying changes, be sure to update the [`delay` timeout
When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
{{< example class="bg-light" >}}
{{< example >}}
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}

33
site/content/docs/5.2/content/reboot.md
View File

@ -80,9 +80,9 @@ Note that because the font stack includes emoji fonts, many common symbol/dingba
This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
## Headings and paragraphs
## Headings
All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
All heading elements—`<h1>`—`<h6>` have their `margin-top` removed, `margin-bottom: .5rem` set, and `line-height` tightened. While headings inherit their `color` by default, you can also override it via optional CSS variable, `--bs-heading-color`.
{{< bs-table "table" >}}
| Heading | Example |
@ -95,6 +95,35 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-
| `<h6></h6>` | <span class="h6">h6. Bootstrap heading</span> |
{{< /bs-table >}}
## Paragraphs
All `<p>` elements have their `margin-top` removed and `margin-bottom: 1rem` set for easy spacing.
{{< example >}}
<p>This is an example paragraph.</p>
{{< /example >}}
## Links
Links have a default `color` and underline applied. While links change on `:hover`, they don't change based on whether someone `:visited` the link. They also receive no special `:focus` styles.
{{< example >}}
<a href="#">This is an example link</a>
{{< /example >}}
As of v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the `--bs-link-opacity` CSS variable:
{{< example >}}
<a href="#" style="--bs-link-opacity: .5">This is an example link</a>
{{< /example >}}
Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values.
{{< example >}}
<a>This is a placeholder link</a>
{{< /example >}}
## Horizontal rules
The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.

4
site/content/docs/5.2/content/tables.md
View File

@ -18,6 +18,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
Use contextual classes to color tables, table rows or individual cells.
{{< callout info >}}
**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won't see color mode adaptive styling until v6.
{{< /callout >}}
<div class="bd-example">
<table class="table">
<thead>

273
site/content/docs/5.2/customize/color-modes.md Normal file
View File

@ -0,0 +1,273 @@
---
layout: docs
title: Color modes
description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
group: customize
toc: true
added: "5.3"
---
## Dark mode
**Bootstrap now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.
Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#sass-usage). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.
## Example
For example, to change the color mode of a dropdown menu, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value.
{{< example class="d-flex justify-content-between" >}}
<div class="dropdown" data-bs-theme="light">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="dropdown" data-bs-theme="dark">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
Dark dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
{{< /example >}}
## How it works
- As shown above, color mode styles are controlled by the `data-bs-theme` attribute. This attribute can be applied to the `<html>` element, or to any other element or Bootstrap component. If applied to the `<html>` element, it will apply to everything. If applied to a component or element, it will be scoped to that specific component or element.
- For each color mode you wish to support, you'll need to add new overrides for the shared global CSS variables. We do this already in our `_root.scss` stylesheet for dark mode, with light mode being the default values. In writing color mode specific styles, use the mixin:
```scss
// Color mode variables in _root.scss
@include color-mode(dark) {
// CSS variable overrides here...
}
```
- We use a custom `_variables-dark.scss` to power those shared global CSS variable overrides for dark mode. This file isn't required for your own custom color modes, but it's required for our dark mode for two reasons. First, it's better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more.
## Nesting color modes
Use `data-bs-theme` on a nested element to change the color mode for a group of elements or components. In the example below, we have an outer dark mode with a nested light mode. You'll notice components naturally adapt their appearance, but you may need to add some utilities along the way to utilize the styles specific to each color mode.
For example, despite using `data-bs-theme="dark"` on a random `<div>`, the `<div>` has no `background-color` as it's set on the `<body>`. As such, if you want the `color` and `background-color` to adapt, you'll need to add `.text-body` and `.bg-body`.
{{< example class="p-0" >}}
<div data-bs-theme="dark" class="p-3 text-body bg-body">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Color modes</a></li>
<li class="breadcrumb-item active" aria-current="page">Dark</li>
</ol>
</nav>
<p>This should be shown in a <strong>dark</strong> theme at all times.</p>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="dropdown mb-4">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2" data-bs-toggle="dropdown" aria-expanded="false">
Dark dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div data-bs-theme="light" class="p-3 text-body bg-body rounded">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Color modes</a></li>
<li class="breadcrumb-item"><a href="#">Dark</a></li>
<li class="breadcrumb-item active" aria-current="page">Light</li>
</ol>
</nav>
<p>This should be shown in a <strong>light</strong> theme at all times.</p>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight2" data-bs-toggle="dropdown" aria-expanded="false">
Light dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
{{< /example >}}
## Usage
### Enable dark mode
Enable the built in dark color mode across your entire project by adding the `data-bs-theme="dark"` attribute to the `<html>` element. This will apply the dark color mode to all components and elements, other than those with a specific `data-bs-theme` attribute applied. Building on the [quick start template]({{< docsref "/getting-started/introduction#quick-start" >}}):
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
</head>
<body data-bs-theme="dark">
<h1>Hello, world!</h1>
<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
</body>
</html>
```
Bootstrap does not yet ship with a built-in color mode picker, but you can use the one from our own documentation if you like. [Learn more in the JavaScript section.](#javascript)
### Building with Sass
Our new dark mode option is available to use for all users of Bootstrap, but it's controlled via data attributes instead of media queries and does not automatically toggle your project's color mode. You can disable our dark mode entirely via Sass by changing `@enable-dark-mode` to `false`.
We use a custom Sass mixin, `color-mode()`, to help you control _how_ color modes are applied. By default, we use a `data` attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark.
In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and it's compiled CSS output.
```scss
@color-mode-type: data !default;
@include color-mode(dark) {
.element {
color: var(--bs-primary-text);
background-color: var(--bs-primary-bg-subtle);
}
}
```
Outputs to:
```css
[data-bs-theme=dark] .element {
color: var(--bs-primary-text);
background-color: var(--bs-primary-bg-subtle);
}
```
And when setting to `media-query`:
```scss
@color-mode-type: media-query;
@include color-mode(dark) {
.element {
color: var(--bs-primary-text);
background-color: var(--bs-primary-bg-subtle);
}
}
```
Outputs to:
```css
@media (prefers-color-scheme: dark) {
.element {
color: var(--bs-primary-text);
background-color: var(--bs-primary-bg-subtle);
}
}
```
## Custom color modes
While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-bs-theme` selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate `_variables-dark.scss` stylesheet to house Bootstrap's dark mode specific Sass variables, but that's not required for you.
For example, you can create a "blue theme" with the selector `data-bs-theme="blue"`. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you're using Sass, you can also use Sass's functions within your CSS variable overrides.
{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}}
<div class="bd-example text-body bg-body" data-bs-theme="blue">
<div class="h4">Example blue theme</div>
<p>Some paragraph text to show how the blue theme might look with written copy.</p>
<hr class="my-4">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonCustom">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
```html
<div data-bs-theme="blue">
...
</div>
```
## JavaScript
To allow visitors or users to toggle color modes, you'll need to create a toggle element to control the `data-bs-theme` attribute on the root element, `<html>`. We've built a toggler in our documentation that initially defers to a user's current system color mode, but provides an option to override that and pick a specific color mode.
Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.
{{< example lang="js" show_preview="false" >}}
{{< js.inline >}}
{{- readFile (path.Join "site/assets/js/color-modes/index.js") -}}
{{< /js.inline >}}
{{< /example >}}
## CSS
### Variables
Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to `data-bs-theme` but [can be configured](#sass-usage) to use a `prefers-color-scheme` media query. Use these variables as a guideline for generating your own new color modes.
{{< scss-docs name="root-dark-mode-vars" file="scss/_root.scss" >}}
### Sass variables
CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in `_variables-dark.scss`. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.
{{< scss-docs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" >}}
### Sass mixin
Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#sass-usage) for more details.
{{< scss-docs name="color-mode-mixin" file="scss/mixins/_color-mode.scss" >}}

364
site/content/docs/5.2/customize/color.md
View File

@ -6,7 +6,365 @@ group: customize
toc: true
---
## Theme colors
## Colors
{{< added-in "5.3.0" >}}
Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
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 potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
{{< /callout >}}
<table class="table table-swatches">
<thead>
<tr>
<th style="width: 340px;">Description</th>
<th style="width: 200px;" class="ps-0">Swatch</th>
<th>Variables</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">
{{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="2">
{{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="2">
{{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
{{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
{{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-primary">Primary</div>
</td>
<td>
{{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-primary-bg-subtle); --bs-border-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text);">Background subtle</div>
</td>
<td>
{{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text);">Border subtle</div>
</td>
<td>
{{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-primary-text); color: var(--bs-body-bg);">Text</div>
</td>
<td>
{{< markdown >}}`--bs-primary-text`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-success">Success</div>
</td>
<td>
{{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-success-bg-subtle); --bs-border-color: var(--bs-success-border-subtle); color: var(--bs-success-text);">Background subtle</div>
</td>
<td>
{{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-success-border-subtle); color: var(--bs-success-text);">Border subtle</div>
</td>
<td>
{{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-success-text); color: var(--bs-body-bg);">Text</div>
</td>
<td>
{{< markdown >}}`--bs-success-text`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-danger">Danger</div>
</td>
<td>
{{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-danger-bg-subtle); --bs-border-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text);">Background subtle</div>
</td>
<td>
{{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text);">Border subtle</div>
</td>
<td>
{{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-danger-text); color: var(--bs-body-bg);">Text</div>
</td>
<td>
{{< markdown >}}`--bs-danger-text`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-warning">Warning</div>
</td>
<td>
{{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-warning-bg-subtle); --bs-border-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text);">Background subtle</div>
</td>
<td>
{{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text);">Border subtle</div>
</td>
<td>
{{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-warning-text); color: var(--bs-body-bg);">Text</div>
</td>
<td>
{{< markdown >}}`--bs-warning-text`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-info">Info</div>
</td>
<td>
{{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-info-bg-subtle); --bs-border-color: var(--bs-info-border-subtle); color: var(--bs-info-text);">Background subtle</div>
</td>
<td>
{{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-info-border-subtle); color: var(--bs-info-text);">Border subtle</div>
</td>
<td>
{{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-info-text); color: var(--bs-body-bg);">Text</div>
</td>
<td>
{{< markdown >}}`--bs-info-text`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-light border">Light</div>
</td>
<td>
{{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-light-bg-subtle); --bs-border-color: var(--bs-light-border-subtle); color: var(--bs-light-text);">Background subtle</div>
</td>
<td>
{{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-light-border-subtle); color: var(--bs-light-text);">Border subtle</div>
</td>
<td>
{{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-light-text); color: var(--bs-body-bg);">Text</div>
</td>
<td>
{{< markdown >}}`--bs-light-text`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-dark border">Dark</div>
</td>
<td>
{{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-dark-bg-subtle); --bs-border-color: var(--bs-dark-border-subtle); color: var(--bs-dark-text);">Background subtle</div>
</td>
<td>
{{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-dark-border-subtle); color: var(--bs-dark-text);">Border subtle</div>
</td>
<td>
{{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-dark-text); color: var(--bs-body-bg);">Text</div>
</td>
<td>
{{< markdown >}}`--bs-dark-text`{{< /markdown >}}
</td>
</tr>
</tbody>
</table>
### Using the new colors
These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color's associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
{{< example >}}
<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
Example element with utilities
</div>
{{< /example >}}
### 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.
@ -14,7 +372,7 @@ We use a subset of all colors to create a smaller color palette for generating c
{{< theme-colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="col-md-4">
<div class="p-3 mb-3 bg-{{ .name }} {{ if .contrast_color }}text-{{ .contrast_color }}{{ else }}text-white{{ end }}">{{ .name | title }}</div>
<div class="p-3 mb-3 text-bg-{{ .name }} rounded-3">{{ .name | title }}</div>
</div>
{{ end -}}
{{< /theme-colors.inline >}}
@ -26,7 +384,7 @@ All these colors are available as a Sass map, `$theme-colors`.
Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
## All colors
### All colors
All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).

4
site/content/docs/5.2/customize/css-variables.md
View File

@ -14,6 +14,10 @@ Bootstrap includes many [CSS custom properties (variables)](https://developer.mo
Here are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files.
### Default
These CSS variables are available everywhere, regardless of color mode.
```css
{{< root.inline >}}
{{- $css := readFile "dist/css/bootstrap.css" -}}

1
site/content/docs/5.2/customize/options.md
View File

@ -13,6 +13,7 @@ You can find and customize these variables for key global options in Bootstrap's
| Variable | Values | Description |
| ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- |
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). |
| `$enable-dark-mode` | `true` (default) or `false` | Enables built-in [dark mode support]({{< docsref "/customize/color-modes#dark-mode" >}}) across the project and its components. |
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
| `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. |
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |

7
site/content/docs/5.2/customize/sass.md
View File

@ -57,8 +57,9 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
// 4. Include any default map overrides here
@ -104,6 +105,7 @@ $body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
@ -166,6 +168,7 @@ To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aw
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
@ -294,7 +297,7 @@ Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap a
### Color schemes
A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes.
A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin.
{{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}}

10
site/content/docs/5.2/forms/form-control.md
View File

@ -8,6 +8,8 @@ toc: true
## Example
Form controls are styled with a mix of Sass and CSS variables, allowing them to adapt to color modes and support any customization method.
{{< example >}}
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
@ -133,10 +135,16 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
</datalist>
{{< /example >}}
## Sass
## CSS
### Variables
Form controls make use of a small amount of CSS variables to support custom styling across color modes.
{{< scss-docs name="form-control-vars" file="scss/_root.scss" >}}
### Sass variables
`$input-*` are shared across most of our form controls (and not buttons).
{{< scss-docs name="form-input-variables" file="scss/_variables.scss" >}}

2
site/content/docs/5.2/getting-started/introduction.md
View File

@ -87,7 +87,7 @@ You can also use the CDN to fetch any of our [additional builds listed in the Co
Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
<details>
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
<summary class="bd-summary-link mb-3">Show components requiring JavaScript</summary>
{{< markdown >}}
- Alerts for dismissing
- Buttons for toggling states and checkbox/radio functionality

24
site/content/docs/5.2/helpers/stacks.md
View File

@ -19,9 +19,9 @@ Use `.vstack` to create vertical layouts. Stacked items are full-width by defaul
{{< example >}}
<div class="vstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border">Second item</div>
<div class="bg-light border">Third item</div>
<div class="bg-body-tertiary border">First item</div>
<div class="bg-body-tertiary border">Second item</div>
<div class="bg-body-tertiary border">Third item</div>
</div>
{{< /example >}}
@ -31,9 +31,9 @@ Use `.hstack` for horizontal layouts. Stacked items are vertically centered by d
{{< example >}}
<div class="hstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border">Second item</div>
<div class="bg-light border">Third item</div>
<div class="bg-body-tertiary border">First item</div>
<div class="bg-body-tertiary border">Second item</div>
<div class="bg-body-tertiary border">Third item</div>
</div>
{{< /example >}}
@ -41,9 +41,9 @@ Using horizontal margin utilities like `.ms-auto` as spacers:
{{< example >}}
<div class="hstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border ms-auto">Second item</div>
<div class="bg-light border">Third item</div>
<div class="bg-body-tertiary border">First item</div>
<div class="bg-body-tertiary border ms-auto">Second item</div>
<div class="bg-body-tertiary border">Third item</div>
</div>
{{< /example >}}
@ -51,10 +51,10 @@ And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
{{< example >}}
<div class="hstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border ms-auto">Second item</div>
<div class="bg-body-tertiary border">First item</div>
<div class="bg-body-tertiary border ms-auto">Second item</div>
<div class="vr"></div>
<div class="bg-light border">Third item</div>
<div class="bg-body-tertiary border">Third item</div>
</div>
{{< /example >}}

2
site/content/docs/5.2/helpers/stretched-link.md
View File

@ -36,7 +36,7 @@ Most custom components do not have `position: relative` by default, so we need t
{{< /example >}}
{{< example >}}
<div class="row g-0 bg-light position-relative">
<div class="row g-0 bg-body-secondary position-relative">
<div class="col-md-6 mb-md-0 p-md-4">
{{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
</div>

6
site/content/docs/5.2/helpers/vertical-rule.md
View File

@ -37,9 +37,9 @@ They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
{{< example >}}
<div class="hstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border ms-auto">Second item</div>
<div class="bg-body-tertiary border">First item</div>
<div class="bg-body-tertiary border ms-auto">Second item</div>
<div class="vr"></div>
<div class="bg-light border">Third item</div>
<div class="bg-body-tertiary border">Third item</div>
</div>
{{< /example >}}

23
site/content/docs/5.2/layout/columns.md
View File

@ -24,6 +24,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
### Vertical alignment
Change the vertical alignment with any of the responsive `align-items-*` classes.
{{< example class="bd-example-row bd-example-row-flex-cols" >}}
<div class="container text-center">
<div class="row align-items-start">
@ -37,6 +39,11 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
One of three columns
</div>
</div>
</div>
{{< /example >}}
{{< example class="bd-example-row bd-example-row-flex-cols" >}}
<div class="container text-center">
<div class="row align-items-center">
<div class="col">
One of three columns
@ -48,6 +55,11 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
One of three columns
</div>
</div>
</div>
{{< /example >}}
{{< example class="bd-example-row bd-example-row-flex-cols" >}}
<div class="container text-center">
<div class="row align-items-end">
<div class="col">
One of three columns
@ -62,6 +74,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
</div>
{{< /example >}}
Or, change the alignment of each column individually with any of the responsive `.align-self-*` classes.
{{< example class="bd-example-row bd-example-row-flex-cols" >}}
<div class="container text-center">
<div class="row">
@ -187,7 +201,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
### Order classes
Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers.
Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers. If you need more `.order-*` classes, you can modify the default number via Sass variable.
{{< example class="bd-example-row" >}}
<div class="container text-center">
@ -287,11 +301,12 @@ With the move to flexbox in v4, you can use margin utilities like `.me-auto` to
The `.col-*` classes can also be used outside a `.row` to give an element a specific width. Whenever column classes are used as non-direct children of a row, the paddings are omitted.
{{< example >}}
<div class="col-3 bg-light p-3 border">
{{< example class="bd-example-row" >}}
<div class="col-3 p-3 mb-2">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
<div class="col-sm-9 p-3">
.col-sm-9: width of 75% above sm breakpoint
</div>
{{< /example >}}

54
site/content/docs/5.2/layout/gutters.md
View File

@ -18,14 +18,14 @@ toc: true
`.gx-*` classes can be used to control the horizontal gutter widths. The `.container` or `.container-fluid` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`:
{{< example >}}
{{< example class="bd-example-cols" >}}
<div class="container px-4 text-center">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
<div class="p-3">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
@ -33,14 +33,14 @@ toc: true
An alternative solution is to add a wrapper around the `.row` with the `.overflow-hidden` class:
{{< example >}}
{{< example class="bd-example-cols" >}}
<div class="container overflow-hidden text-center">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
<div class="p-3">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
@ -50,20 +50,20 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
`.gy-*` classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the `.row` at the end of a page. If this occurs, you add a wrapper around `.row` with the `.overflow-hidden` class:
{{< example >}}
{{< example class="bd-example-cols" >}}
<div class="container overflow-hidden text-center">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
@ -73,20 +73,20 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
`.g-*` classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class.
{{< example >}}
{{< example class="bd-example-cols" >}}
<div class="container text-center">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
@ -96,38 +96,38 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
Gutter classes can also be added to [row columns]({{< docsref "/layout/grid#row-columns" >}}). In the following example, we use responsive row columns and responsive gutter classes.
{{< example >}}
{{< example class="bd-example-cols" >}}
<div class="container text-center">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
<div class="p-3">Row column</div>
</div>
</div>
</div>

97
site/content/docs/5.2/migration.md
View File

@ -7,6 +7,103 @@ aliases: "/migration/"
toc: true
---
## v5.3.0
<hr class="mb-4">
### Color modes!
Learn more by reading the new [color modes documentation]({{< docsref "/customize/color-modes" >}}).
- **Global support for light (default) and dark color modes.** Set color mode globally on the `:root` element, on groups of elements and components with a wrapper class, or directly on components, with `data-bs-theme="light|dark"`. Also included is a new `color-mode()` mixin that can output a ruleset with the `data-bs-theme` selector or a media query, depending on your preference.
<span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> Color modes replace dark variants for components, so `.btn-close-white`, `.carousel-dark`, `.dropdown-menu-dark`, and `.navbar-dark` are deprecated.
- **New extended color system.** We've added new theme colors (but not in `$theme-colors)`) for a more nuanced, system-wide color palette with new secondary, tertiary, and emphasis colors for `color` and `background-color`. These new colors are available as Sass variables, CSS variables, and utilities.
- We've also expanded our theme color Sass variables, CSS variables, and utilities to include text emphasis, subtle background colors, and subtle border colors. These are available as Sass variables, CSS variables, and utilities.
- Adds new `_variables-dark.scss` stylesheet to house dark-mode specific overrides. This stylesheet should be imported immediately after the existing `_variables.scss` file in your import stack.
```diff
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 8f8296def..449d70487 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -6,6 +6,7 @@
// Configuration
@import "functions";
@import "variables";
+@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
```
### CSS variables
- Restores CSS variables for breakpoints, though we don't use them in our media queries as they're not supported. However, these can be useful in JS-specific contexts.
- Per the color modes update, we've added new utilities for new Sass CSS variables `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text` for our theme colors. These 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.
- Adds additional variables for alerts, `.btn-close`, and `.offcanvas`.
- The `--bs-heading-color` variable is back with an update and dark mode support. First, we now check for a `null` value on the associated Sass variable, `$headings-color`, before trying to output the CSS variable, so by default it's not present in our compiled CSS. Second, we use the CSS variable with a fallback value, `inherit`, allowing the original behavior to persist, but also allowing for overrides.
- Converts links to use CSS variables for styling `color`, but not `text-decoration`. Colors are now set with `--bs-link-color-rgb` and `--bs-link-opacity` as `rgba()` color, allowing you to customize the translucency with ease. The `a:hover` pseudo-class now overrides `--bs-link-color-rgb` instead of explicitly setting the `color` property.
- `--bs-border-width` is now being used in more components for greater control over default global styling.
- Adds new root CSS variables for our `box-shadow`s, including `--bs-box-shadow`, `--bs-box-shadow-sm`, `--bs-box-shadow-lg`, and `--bs-box-shadow-inset`.
### Components
#### Alert
- Alert variants are now styled via CSS variables.
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.alert-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/alerts#sass-loop" >}}) directly to modify the component's default CSS variables for each variant.
#### List group
- List group item variants are now styled via CSS variables.
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/list-group#sass-loop" >}}) directly to modify the component's default CSS variables for each variant.
#### Close button
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.btn-close-white` class has been deprecated and replaced with `data-bs-theme="dark"` on the close button or any parent element. [See the docs for an example.]({{< docsref "/components/close-button#dark-variant" >}})
#### Navbar
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.navbar-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the navbar or any parent element. [See the docs for updated examples.]({{< docsref "/components/navbar#color-schemes" >}})
### Forms
- `.form-control` is now styled with CSS variables to support color modes. This includes the addition of two new root CSS variables for the default and disabled form control backgrounds.
- `.form-check` and `.form-switch` components are now built with CSS variables for setting the `background-image`. The usage here differs from other components in that the various focus, active, etc states for each component aren't set on the base class. Instead, the states override one variable (e.g., `--bs-form-switch-bg`).
- Floating form labels now have a `background-color` to fix support for `<textarea>` elements. Additional changes have been made to also support disabled states and more.
- Fixed display of date and time inputs in WebKit based browsers.
### Utilities
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> `.text-muted` will be be replaced by `.text-body-secondary` in v6.
With the addition of the expanded theme colors and variables, the `.text-muted` variables and utility have been deprecated with v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
- Adds new `.overflow-x`, `.overflow-y`, and several `.object-fit-*` utilities. _The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container, giving us a responsive alternative to using `background-image` for a resizable fill/fit image._
- Adds new `.fw-medium` utility.
- Added new [`.z-*` utilities]({{< docsref "/utilities/z-index" >}}) for `z-index`.
- [Box shadow utilities]({{< docsref "/utilities/shadows" >}}) (and Sass variables) have been updated for dark mode. They now use `--bs-body-color-rgb` to generate the `rgba()` color values, allowing them to easily adapt to color modes based on the specified foreground color.
For a complete list of changes, [see the v5.3.0 project on GitHub](https://github.com/twbs/bootstrap/projects/).
## v5.2.0
<hr class="mb-4">

9
site/content/docs/5.2/utilities/background.md
View File

@ -14,11 +14,16 @@ Similar to the contextual text color classes, set the background of an element t
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
<div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div>
{{- end -}}
{{< /colors.inline >}}
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
<p class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p>
<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>
{{< /example >}}
## Background gradient

1
site/content/docs/5.2/utilities/borders.md
View File

@ -42,6 +42,7 @@ Change the border color using utilities built on our theme colors.
{{< border.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<span class="border border-{{ .name }}"></span>
<span class="border border-{{ .name }}-subtle"></span>
{{- end -}}
{{< /border.inline >}}
<span class="border border-white"></span>

12
site/content/docs/5.2/utilities/colors.md
View File

@ -14,12 +14,18 @@ Colorize text with color utilities. If you want to colorize links, you can use t
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<p class="text-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}</p>
<p class="text-{{ .name }}-emphasis">.text-{{ .name }}-emphasis</p>
{{- end -}}
{{< /colors.inline >}}
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
{{< /example >}}
@ -27,6 +33,10 @@ Colorize text with color utilities. If you want to colorize links, you can use t
**Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They'll be removed in v6.0.0.
{{< /callout >}}
{{< callout warning >}}
**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
{{< /callout >}}
{{< callout info >}}
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
{{< /callout >}}

24
site/content/docs/5.2/utilities/overflow.md
View File

@ -11,16 +11,16 @@ toc: true
Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
<div class="bd-example d-md-flex">
<div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
<div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
</div>
<div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
<div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
</div>
<div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
<div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.
</div>
<div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;">
<div class="overflow-scroll p-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions.
</div>
</div>
@ -37,19 +37,19 @@ Adjust the `overflow` property on the fly with four default values and classes.
Adjust the `overflow-x` property to affect the overflow of content horizontally.
<div class="bd-example d-md-flex">
<div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
<div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
<div><code>.overflow-x-auto</code> example on an element</div>
<div> with set width and height dimensions.</div>
</div>
<div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div><code>.overflow-x-hidden</code> example</div>
<div>on an element with set width and height dimensions.</div>
</div>
<div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div><code>.overflow-x-visible</code> example </div>
<div>on an element with set width and height dimensions.</div>
</div>
<div class="overflow-x-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div class="overflow-x-scroll p-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div><code>.overflow-x-scroll</code> example on an element</div>
<div> with set width and height dimensions.</div>
</div>
@ -67,16 +67,16 @@ Adjust the `overflow-x` property to affect the overflow of content horizontally.
Adjust the `overflow-y` property to affect the overflow of content vertically.
<div class="bd-example d-md-flex">
<div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
<div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-auto</code> example on an element with set width and height dimensions.
</div>
<div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
<div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-hidden</code> example on an element with set width and height dimensions.
</div>
<div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
<div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-visible</code> example on an element with set width and height dimensions.
</div>
<div class="overflow-y-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
<div class="overflow-y-scroll p-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-scroll</code> example on an element with set width and height dimensions.
</div>
</div>

8
site/content/docs/5.2/utilities/position.md
View File

@ -88,14 +88,14 @@ By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can b
Here are some real life examples of these classes:
{{< example class="bd-example-position-examples d-flex justify-content-around" >}}
{{< example class="bd-example-position-examples d-flex justify-content-around align-items-center" >}}
<button type="button" class="btn btn-primary position-relative">
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-dark position-relative">
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</button>
<div class="position-relative py-2 px-4 text-bg-dark border border-dark rounded-pill">
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-dark)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</div>
<button type="button" class="btn btn-primary position-relative">
Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>

10
site/content/docs/5.2/utilities/shadows.md
View File

@ -10,11 +10,11 @@ toc: true
While shadows on components are disabled by default in Bootstrap and can be enabled via `$enable-shadows`, you can also quickly add or remove a shadow with our `box-shadow` utility classes. Includes support for `.shadow-none` and three default sizes (which have associated variables to match).
{{< example >}}
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
{{< example class="overflow-hidden" >}}
<div class="shadow-none p-3 mb-5 bg-body-tertiary rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body-tertiary rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div>
{{< /example >}}
## Sass

12
site/content/docs/5.2/utilities/sizing.md
View File

@ -10,12 +10,12 @@ toc: true
Width and height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
{{< example >}}
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
{{< example class="bd-example-flex" >}}
<div class="w-25 p-3">Width 25%</div>
<div class="w-50 p-3">Width 50%</div>
<div class="w-75 p-3">Width 75%</div>
<div class="w-100 p-3">Width 100%</div>
<div class="w-auto p-3">Width auto</div>
{{< /example >}}
{{< example >}}

30
site/content/docs/5.2/utilities/spacing.md
View File

@ -102,12 +102,12 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
{{< example >}}
{{< example class="bd-example-cssgrid" >}}
<div class="grid gap-3">
<div class="p-2 bg-light border g-col-6">Grid item 1</div>
<div class="p-2 bg-light border g-col-6">Grid item 2</div>
<div class="p-2 bg-light border g-col-6">Grid item 3</div>
<div class="p-2 bg-light border g-col-6">Grid item 4</div>
<div class="p-2 g-col-6">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div>
</div>
{{< /example >}}
@ -117,12 +117,12 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
`row-gap` sets the vertical space between children items in the specified container.
{{< example >}}
{{< example class="bd-example-cssgrid" >}}
<div class="grid gap-0 row-gap-3">
<div class="p-2 bg-light border g-col-6">Grid item 1</div>
<div class="p-2 bg-light border g-col-6">Grid item 2</div>
<div class="p-2 bg-light border g-col-6">Grid item 3</div>
<div class="p-2 bg-light border g-col-6">Grid item 4</div>
<div class="p-2 g-col-6">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div>
</div>
{{< /example >}}
@ -130,12 +130,12 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
`column-gap` sets the horizontal space between children items in the specified container.
{{< example >}}
{{< example class="bd-example-cssgrid" >}}
<div class="grid gap-0 column-gap-3">
<div class="p-2 bg-light border g-col-6">Grid item 1</div>
<div class="p-2 bg-light border g-col-6">Grid item 2</div>
<div class="p-2 bg-light border g-col-6">Grid item 3</div>
<div class="p-2 bg-light border g-col-6">Grid item 4</div>
<div class="p-2 g-col-6">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div>
</div>
{{< /example >}}

2
site/content/docs/5.2/utilities/text.md
View File

@ -38,7 +38,7 @@ Wrap text with a `.text-wrap` class.
Prevent text from wrapping with a `.text-nowrap` class.
{{< example >}}
<div class="text-nowrap bg-light border" style="width: 8rem;">
<div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
This text should overflow the parent.
</div>
{{< /example >}}

1
site/data/sidebar.yml
View File

@ -26,6 +26,7 @@
- title: Sass
- title: Options
- title: Color
- title: Color modes
- title: Components
- title: CSS variables
- title: Optimize

1
site/data/theme-colors.yml
View File

@ -17,3 +17,4 @@
contrast_color: dark
- name: dark
hex: "#343a40"
contrast_color: white

2
site/layouts/_default/baseof.html
View File

@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" data-bs-theme="auto">
<head>
{{ partial "header" . }}
</head>

4
site/layouts/_default/docs.html
View File

@ -31,8 +31,8 @@
</div>
{{ if (eq .Page.Params.toc true) }}
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-body-secondary">
<button class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
</button>

47
site/layouts/partials/docs-navbar.html
View File

@ -1,4 +1,4 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<header class="navbar navbar-expand-lg bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
{{- if eq .Layout "docs" }}
<div class="bd-navbar-toggle">
@ -72,11 +72,52 @@
<small class="d-lg-none ms-2">Open Collective</small>
</a>
</li>
<li class="nav-item py-1 col-12 col-lg-auto">
<li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
<hr class="d-lg-none my-2 text-white-50">
</li>
{{ partial "docs-versions" . }}
<li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none my-2 text-white-50">
</li>
<li class="nav-item dropdown">
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
data-bs-display="static">
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
<span class="d-lg-none ms-2">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
</ul>
</li>
</ul>
</div>
</div>

3
site/layouts/partials/docs-versions.html
View File

@ -17,8 +17,9 @@
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">v5 releases</h6></li>
<li>
<a class="dropdown-item current" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
<a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
Latest ({{ .Site.Params.docs_version }}.x)
<svg class="bi"><use xlink:href="#check2"></use></svg>
</a>
</li>
<li>

8
site/layouts/partials/footer.html
View File

@ -1,12 +1,12 @@
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary">
<div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
<div class="row">
<div class="col-lg-3 mb-3">
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
<a class="d-inline-flex align-items-center mb-2 text-body-secondary text-decoration-none" href="/" aria-label="Bootstrap">
{{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }}
<span class="fs-5">Bootstrap</span>
</a>
<ul class="list-unstyled small text-muted">
<ul class="list-unstyled small">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</li>
<li class="mb-2">Code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
<li class="mb-2">Currently v{{ .Site.Params.current_version }}.</li>

3
site/layouts/partials/header.html
View File

@ -1,3 +1,6 @@
{{- $colorModeJS := resources.Get "js/color-modes/index.js" }}
<script src="{{ $colorModeJS.Permalink | relURL }}"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">

2
site/layouts/partials/home/masthead.html
View File

@ -6,7 +6,7 @@
<span class="text-muted">CSS variables, responsive offcanvas, new utilities, and more!</span>
</a>
<img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-block mx-auto mb-3">
<h1 class="mb-3 fw-semibold">Build fast, responsive sites with&nbsp;Bootstrap</h1>
<h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
<p class="lead mb-4">
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
</p>

10
site/layouts/partials/icons.html
View File

@ -21,6 +21,9 @@
<symbol id="chevron-expand" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
</symbol>
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</symbol>
<symbol id="clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
@ -50,6 +53,10 @@
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
</symbol>
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
</symbol>
<symbol id="palette2" viewBox="0 0 16 16">
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
@ -60,6 +67,9 @@
<symbol id="plus" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</symbol>
<symbol id="sun-fill" viewBox="0 0 16 16">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
</symbol>
<symbol id="three-dots" viewBox="0 0 16 16">
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
</symbol>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 13 KiB

2
site/layouts/shortcodes/added-in.html
View File

@ -2,4 +2,4 @@
{{- $version := .Get 0 -}}
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v{{ $version }}</small>
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2">Added in v{{ $version }}</small>

9
site/layouts/shortcodes/callout-deprecated-dark-variants.html Normal file
View File

@ -0,0 +1,9 @@
{{- /* Outputs message about dark mode component variants being deprecated in v5.3. */ -}}
{{- $component := .Get 0 -}}
<div class="bd-callout bd-callout-warning">
<p>
<strong>Heads up!</strong> Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of adding <code>.{{ $component }}-dark</code>, set <code>data-bs-theme="dark"</code> on the root element, a parent wrapper, or the component itself.
</p>
</div>

5
site/layouts/shortcodes/deprecated-in.html Normal file
View File

@ -0,0 +1,5 @@
{{- /* Outputs badge to identify the version something was deprecated */ -}}
{{- $version := .Get 0 -}}
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2">Deprecated in v{{ $version }}</small>

2
site/layouts/shortcodes/example.html
View File

@ -28,7 +28,7 @@
{{- if eq $show_markup true -}}
{{- if eq $show_preview true -}}
<div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small>
<div class="d-flex ms-auto">
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">