diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/customize')
| -rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.3/customize/color.md | 672 | ||||
| -rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md | 17 |
2 files changed, 349 insertions, 340 deletions
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 6a3c323b0..d42c63615 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 @@ -18,341 +18,343 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` **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);"> </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);"> </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);"> </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);"> </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);"> </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);"> </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);"> </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);"> </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 bg-primary"> </div> - </td> - <td> - {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-primary-text-emphasis`{{< /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 bg-success"> </div> - </td> - <td> - {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-success-text-emphasis`{{< /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 bg-danger"> </div> - </td> - <td> - {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-danger-text-emphasis`{{< /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 bg-warning"> </div> - </td> - <td> - {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-warning-text-emphasis`{{< /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 bg-info"> </div> - </td> - <td> - {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-info-text-emphasis`{{< /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 bg-light"> </div> - </td> - <td> - {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-light-text-emphasis`{{< /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 bg-dark"> </div> - </td> - <td> - {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}} - </td> - </tr> - </tbody> -</table> +<div class="table-responsive"> + <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);"> </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);"> </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);"> </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);"> </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);"> </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);"> </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);"> </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);"> </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 bg-primary"> </div> + </td> + <td> + {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-primary-text-emphasis`{{< /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 bg-success"> </div> + </td> + <td> + {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-success-text-emphasis`{{< /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 bg-danger"> </div> + </td> + <td> + {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-danger-text-emphasis`{{< /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 bg-warning"> </div> + </td> + <td> + {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-warning-text-emphasis`{{< /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 bg-info"> </div> + </td> + <td> + {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-info-text-emphasis`{{< /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 bg-light"> </div> + </td> + <td> + {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-light-text-emphasis`{{< /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 bg-dark"> </div> + </td> + <td> + {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}} + </td> + </tr> + </tbody> + </table> +</div> ### Using the new colors diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md index ceadf3a98..a2b2bb26c 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md @@ -244,6 +244,8 @@ Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we h You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect. +`shift-color()` combines these two functions by shading the color if the weight is positive and tinting the color if the weight is negative. + {{< scss-docs name="color-functions" file="scss/_functions.scss" >}} In practice, you'd call the function and pass in the color and weight parameters. @@ -256,6 +258,11 @@ In practice, you'd call the function and pass in the color and weight parameters .custom-element-2 { color: shade-color($danger, 30%); } + +.custom-element-3 { + color: shift-color($success, 40%); + background-color: shift-color($success, -60%); +} ``` ### Color contrast @@ -338,18 +345,18 @@ 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. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin. +A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light` and `dark` 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" >}} ```scss .custom-element { - @include color-scheme(dark) { - // Insert dark mode styles here + @include color-scheme(light) { + // Insert light mode styles here } - @include color-scheme(custom-named-scheme) { - // Insert custom color scheme styles here + @include color-scheme(dark) { + // Insert dark mode styles here } } ``` |