Add new emphasis-color, document it, tweak other docs, add utilities for it

5 files changed, 17 insertions, 7 deletions

diff --git a/scss/_root.scss b/scss/_root.scss
index 9617d49418..18e85c4256 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -48,6 +48,9 @@
   // --#{$prefix}body-accent-color: #{$body-accent-color};
 
   // todo: replace body-accent-color with secondary-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};
@@ -120,13 +123,16 @@
   --#{$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-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-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)};
 
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 5545a6eb91..4f1c4c6166 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -563,6 +563,7 @@ $utilities: map-merge(
           "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,
         )
       )
@@ -591,6 +592,7 @@ $utilities: map-merge(
           "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)),
         )
       )
     ),
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 1fa41e362b..cfdf378e2f 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -4,6 +4,7 @@
 
 $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;
@@ -14,7 +15,7 @@ $accent-color-dark:                 color-contrast($accent-bg-dark) !default;
 $accent-border-dark:                $blue-400 !default;
 $border-color-dark:                 $gray-700 !default;
 $border-color-translucent-dark:     rgba($white, .15) !default;
-$headings-color-dark:             #fff !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;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index bfe0b37f8e..0eb1e21fbd 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -403,6 +403,8 @@ $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;
 
diff --git a/site/content/docs/5.2/customize/color.md b/site/content/docs/5.2/customize/color.md
index bdbb081363..a7c299532b 100644
--- a/site/content/docs/5.2/customize/color.md
+++ b/site/content/docs/5.2/customize/color.md
@@ -14,7 +14,7 @@ toc: true
 
 **Bootstrap now supports color modes, starting with dark mode!** After upgrading to v5.3.0, you'll be able to 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. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.
 
-For example, to change the toggle 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 as intended.
+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 as intended.
 
 {{< example class="d-flex justify-content-between" >}}
 <div class="dropdown" data-bs-theme="light">
@@ -111,8 +111,6 @@ Use `data-bs-theme` on a nested element to change the color mode for a group of
 </div>
 {{< /example >}}
 
-
-
 ### 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.
@@ -168,7 +166,8 @@ Colors ending in `--rgb` provide the `red, green, blue` values for use in `rgb()
 | **Body —** Default foreground (color) and background, including components. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div> <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div> | `--bs-body-color`<br>`--bs-body-color-rgb`<br>`--bs-body-bg`<br>`--bs-body-bg-rgb` |
 | **Secondary —** For disabled states, dividers, and lighter text. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div> <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-bg);">&nbsp;</div> | `--bs-secondary-color`<br>`--bs-secondary-color-rgb`<br>`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb` |
 | **Tertiary —** For hovers, accents, wells, and text. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div> <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div> | `--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`<br>`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb` |
-| **Border —** For component borders, dividers, and rules. Blends with background colors thanks to `rgba()` values. | <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">Border color</div> | `--bs-border-color` |
+| **Emphasis —** For higher contrast text. Not applicable for backgrounds. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div> | `--bs-emphasis-color`<br>`--bs-emphasis-color-rgb` |
+| **Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value. | <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">Border color</div> | `--bs-border-color`<br>`--bs-border-color-translucent` |
 | **Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states. | <div class="p-3 text-bg-primary rounded-2">Primary</div> | `--bs-primary`<br>`--bs-primary-rgb` |
 | **Success —** Theme color used for positive or successful actions and information. | <div class="p-3 text-bg-success rounded-2">Success</div> | `--bs-success`<br>`--bs-success-rgb` |
 | **Danger —** Theme color used for errors and dangerous actions. | <div class="p-3 text-bg-danger rounded-2">Danger</div> | `--bs-danger`<br>`--bs-danger-rgb` |