diff --git a/scss/_maps.scss b/scss/_maps.scss index c6b55823cf..68ee421c2b 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -8,14 +8,14 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default; // scss-docs-start theme-text-map $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, + "primary": $primary-text-emphasis, + "secondary": $secondary-text-emphasis, + "success": $success-text-emphasis, + "info": $info-text-emphasis, + "warning": $warning-text-emphasis, + "danger": $danger-text-emphasis, + "light": $light-text-emphasis, + "dark": $dark-text-emphasis, ) !default; // scss-docs-end theme-text-map @@ -52,14 +52,14 @@ $theme-colors-border-subtle-dark: null !default; @if $enable-dark-mode { // scss-docs-start theme-text-dark-map $theme-colors-text-dark: ( - "primary": $primary-text-dark, - "secondary": $secondary-text-dark, - "success": $success-text-dark, - "info": $info-text-dark, - "warning": $warning-text-dark, - "danger": $danger-text-dark, - "light": $light-text-dark, - "dark": $dark-text-dark, + "primary": $primary-text-emphasis-dark, + "secondary": $secondary-text-emphasis-dark, + "success": $success-text-emphasis-dark, + "info": $info-text-emphasis-dark, + "warning": $warning-text-emphasis-dark, + "danger": $danger-text-emphasis-dark, + "light": $light-text-emphasis-dark, + "dark": $dark-text-emphasis-dark, ) !default; // scss-docs-end theme-text-dark-map @@ -111,14 +111,14 @@ $utilities-text: map-merge( $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) + "primary-emphasis": var(--#{$prefix}primary-text-emphasis), + "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis), + "success-emphasis": var(--#{$prefix}success-text-emphasis), + "info-emphasis": var(--#{$prefix}info-text-emphasis), + "warning-emphasis": var(--#{$prefix}warning-text-emphasis), + "danger-emphasis": var(--#{$prefix}danger-text-emphasis), + "light-emphasis": var(--#{$prefix}light-text-emphasis), + "dark-emphasis": var(--#{$prefix}dark-text-emphasis) ) !default; // scss-docs-end utilities-text-colors diff --git a/scss/_root.scss b/scss/_root.scss index 7841a153eb..b82759a210 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -23,7 +23,7 @@ } @each $color, $value in $theme-colors-text { - --#{$prefix}#{$color}-text: #{$value}; + --#{$prefix}#{$color}-text-emphasis: #{$value}; } @each $color, $value in $theme-colors-bg-subtle { @@ -149,7 +149,7 @@ --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)}; @each $color, $value in $theme-colors-text-dark { - --#{$prefix}#{$color}-text: #{$value}; + --#{$prefix}#{$color}-text-emphasis: #{$value}; } @each $color, $value in $theme-colors-bg-subtle-dark { diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index 88256a1c3a..80e522ca06 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -8,14 +8,14 @@ // scss-docs-start sass-dark-mode-vars // scss-docs-start theme-text-dark-variables -$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-text-emphasis-dark: $blue-300 !default; +$secondary-text-emphasis-dark: $gray-300 !default; +$success-text-emphasis-dark: $green-300 !default; +$info-text-emphasis-dark: $cyan-300 !default; +$warning-text-emphasis-dark: $yellow-300 !default; +$danger-text-emphasis-dark: $red-300 !default; +$light-text-emphasis-dark: $gray-100 !default; +$dark-text-emphasis-dark: $gray-300 !default; // scss-docs-end theme-text-dark-variables // scss-docs-start theme-bg-subtle-dark-variables @@ -70,6 +70,6 @@ $form-switch-bg-image-dark: url("data:image/svg+xml,") !default; -$accordion-button-active-icon-dark: url("data:image/svg+xml,") !default; +$accordion-button-icon-dark: url("data:image/svg+xml,") !default; +$accordion-button-active-icon-dark: url("data:image/svg+xml,") !default; // scss-docs-end sass-dark-mode-vars diff --git a/scss/_variables.scss b/scss/_variables.scss index ddd7e5c38a..35446421f9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -322,14 +322,14 @@ $theme-colors: ( // scss-docs-end theme-colors-map // scss-docs-start theme-text-variables -$primary-text: $blue-700 !default; -$secondary-text: $gray-700 !default; -$success-text: $green-700 !default; -$info-text: $cyan-800 !default; -$warning-text: $yellow-800 !default; -$danger-text: $red-700 !default; -$light-text: $gray-700 !default; -$dark-text: $gray-700 !default; +$primary-text-emphasis: $blue-700 !default; +$secondary-text-emphasis: $gray-700 !default; +$success-text-emphasis: $green-700 !default; +$info-text-emphasis: $cyan-800 !default; +$warning-text-emphasis: $yellow-800 !default; +$danger-text-emphasis: $red-700 !default; +$light-text-emphasis: $gray-700 !default; +$dark-text-emphasis: $gray-700 !default; // scss-docs-end theme-text-variables // scss-docs-start theme-bg-subtle-variables @@ -1365,7 +1365,7 @@ $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default; $accordion-icon-width: 1.25rem !default; $accordion-icon-color: $body-color !default; -$accordion-icon-active-color: $primary-text !default; +$accordion-icon-active-color: $primary-text-emphasis !default; $accordion-icon-transition: transform .2s ease-in-out !default; $accordion-icon-transform: rotate(-180deg) !default; diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md index 964170a3cf..3aedfd2588 100644 --- a/site/content/docs/5.3/customize/color-modes.md +++ b/site/content/docs/5.3/customize/color-modes.md @@ -166,7 +166,7 @@ $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 +176,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 +188,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 +199,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); } } diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md index 93d102199a..6a3c323b0c 100644 --- a/site/content/docs/5.3/customize/color.md +++ b/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)`. @@ -135,10 +135,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` -
Text
+
Text
- {{< markdown >}}`--bs-primary-text`{{< /markdown >}} + {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}} @@ -170,10 +170,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` -
Text
+
Text
- {{< markdown >}}`--bs-success-text`{{< /markdown >}} + {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}} @@ -205,10 +205,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` -
Text
+
Text
- {{< markdown >}}`--bs-danger-text`{{< /markdown >}} + {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}} @@ -240,10 +240,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` -
Text
+
Text
- {{< markdown >}}`--bs-warning-text`{{< /markdown >}} + {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}} @@ -275,10 +275,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` -
Text
+
Text
- {{< markdown >}}`--bs-info-text`{{< /markdown >}} + {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}} @@ -310,10 +310,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` -
Text
+
Text
- {{< markdown >}}`--bs-light-text`{{< /markdown >}} + {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}} @@ -345,10 +345,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` -
Text
+
Text
- {{< markdown >}}`--bs-dark-text`{{< /markdown >}} + {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}} diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index a5030d781b..9541d284f1 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -44,7 +44,7 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - 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. +- 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-emphasis` 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`.