diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/customize')
5 files changed, 78 insertions, 116 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color-modes.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color-modes.md index 55d06ee97..c6f9bef20 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color-modes.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color-modes.md @@ -11,7 +11,7 @@ added: "5.3" **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. +Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#building-with-sass). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below. ## Example @@ -62,73 +62,6 @@ For example, to change the color mode of a dropdown menu, add `data-bs-theme="li - 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 @@ -159,14 +92,14 @@ Our new dark mode option is available to use for all users of Bootstrap, but it' 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. +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 its compiled CSS output. ```scss $color-mode-type: data; @include color-mode(dark) { .element { - color: var(--bs-primary-text); + color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); } } @@ -176,7 +109,7 @@ Outputs to: ```css [data-bs-theme=dark] .element { - color: var(--bs-primary-text); + color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); } ``` @@ -188,7 +121,7 @@ $color-mode-type: media-query; @include color-mode(dark) { .element { - color: var(--bs-primary-text); + color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); } } @@ -199,7 +132,7 @@ Outputs to: ```css @media (prefers-color-scheme: dark) { .element { - color: var(--bs-primary-text); + color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); } } @@ -256,7 +189,7 @@ Here's a look at the JavaScript that powers it. Feel free to inspect our own doc ### 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. +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](#building-with-sass) 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" >}} @@ -268,6 +201,6 @@ CSS variables for our dark color mode are partially generated from dark mode spe ### 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. +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](#building-with-sass) for more details. {{< scss-docs name="color-mode-mixin" file="scss/mixins/_color-mode.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color.md index fd4a7f37a..6a3c323b0 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color.md @@ -10,7 +10,7 @@ toc: true {{< 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. +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-emphasis` 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)`. @@ -111,7 +111,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< 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> + <div class="p-3 rounded-2 bg-primary"> </div> </td> <td> {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}} @@ -119,7 +119,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}} @@ -127,7 +127,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}} @@ -135,10 +135,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-primary-text`{{< /markdown >}} + {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}} </td> </tr> <tr> @@ -146,7 +146,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< 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> + <div class="p-3 rounded-2 bg-success"> </div> </td> <td> {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}} @@ -154,7 +154,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}} @@ -162,7 +162,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}} @@ -170,10 +170,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-success-text`{{< /markdown >}} + {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}} </td> </tr> <tr> @@ -181,7 +181,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< 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> + <div class="p-3 rounded-2 bg-danger"> </div> </td> <td> {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}} @@ -189,7 +189,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}} @@ -197,7 +197,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}} @@ -205,10 +205,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-danger-text`{{< /markdown >}} + {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}} </td> </tr> <tr> @@ -216,7 +216,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< 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> + <div class="p-3 rounded-2 bg-warning"> </div> </td> <td> {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}} @@ -224,7 +224,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}} @@ -232,7 +232,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}} @@ -240,10 +240,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-warning-text`{{< /markdown >}} + {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}} </td> </tr> <tr> @@ -251,7 +251,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< 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> + <div class="p-3 rounded-2 bg-info"> </div> </td> <td> {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}} @@ -259,7 +259,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}} @@ -267,7 +267,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}} @@ -275,10 +275,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-info-text`{{< /markdown >}} + {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}} </td> </tr> <tr> @@ -286,7 +286,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< 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> + <div class="p-3 rounded-2 bg-light"> </div> </td> <td> {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}} @@ -294,7 +294,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}} @@ -302,7 +302,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}} @@ -310,10 +310,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-light-text`{{< /markdown >}} + {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}} </td> </tr> <tr> @@ -321,7 +321,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< 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> + <div class="p-3 rounded-2 bg-dark"> </div> </td> <td> {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}} @@ -329,7 +329,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}} @@ -337,7 +337,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}} @@ -345,10 +345,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </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> + <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-dark-text`{{< /markdown >}} + {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}} </td> </tr> </tbody> @@ -480,6 +480,7 @@ Here's an example that generates text color utilities (e.g., `.text-purple-500`) ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/css-variables.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/css-variables.md index 05c77df57..ffb40c0c4 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/css-variables.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/css-variables.md @@ -21,7 +21,7 @@ These CSS variables are available everywhere, regardless of color mode. ```css {{< root.inline >}} {{- $css := readFile "dist/css/bootstrap.css" -}} -{{- $match := findRE ":root {([^}]*)}" $css 1 -}} +{{- $match := findRE `:root,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}} {{- if (eq (len $match) 0) -}} {{- errorf "Got no matches for :root in %q!" $.Page.Path -}} @@ -32,6 +32,21 @@ These CSS variables are available everywhere, regardless of color mode. {{< /root.inline >}} ``` +### Dark mode + +These variables are scoped to our built-in dark mode. + +```css +{{< root.inline >}} +{{- $css := readFile "dist/css/bootstrap.css" -}} +{{- $match := findRE `\[data-bs-theme=dark\] {([^}]*)}` $css 1 -}} +{{- if (eq (len $match) 0) -}} +{{- errorf "Got no matches for [data-bs-theme=dark] in %q!" $.Page.Path -}} +{{- end -}} +{{- index $match 0 -}} +{{< /root.inline >}} +``` + ## Component variables Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation. @@ -59,6 +74,20 @@ a { } ``` +## Focus variables + +{{< added-in "5.3.0" >}} + +Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles. + +In our Sass, we set default values that can be customized before compiling. + +{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}} + +Those variables are then reassigned to `:root` level CSS variables that can be customized in real-time, including with options for `x` and `y` offsets (which default to their fallback value of `0`). + +{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}} + ## Grid breakpoints While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/optimize.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/optimize.md index e618ce23a..2622f88db 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/optimize.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/optimize.md @@ -42,14 +42,11 @@ import 'bootstrap/js/dist/modal'; This way, you're not including any JavaScript you don't intend to use for components like buttons, carousels, and tooltips. If you're importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your `package.json` file. {{< callout info >}} -### Default Exports - -Files in `bootstrap/js/dist` use the **default export**, so if you want to use one of them you have to do the following: +**Heads up!** Files in `bootstrap/js/dist` use the **default export**. To use them, do the following: <!-- eslint-skip --> ```js import Modal from 'bootstrap/js/dist/modal' - const modal = new Modal(document.getElementById('myModal')) ``` {{< /callout >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/overview.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/overview.md index 25c31bdb6..ed890acd0 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/overview.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/overview.md @@ -12,6 +12,8 @@ sections: description: Customize Bootstrap with built-in variables to easily toggle global CSS preferences. - title: Color description: Learn about and customize the color systems that support the entire toolkit. + - title: Color modes + description: Explore our default light mode and the new dark mode, or create custom color modes yourself. - title: Components description: Learn how we build nearly all our components responsively and with base and modifier classes. - title: CSS variables |