Add new text-bg-color utilities

scss/_helpers.scss

@@ -1,4 +1,5 @@
 @import "helpers/clearfix";
+@import "helpers/color-bg";
 @import "helpers/colored-links";
 @import "helpers/ratio";
 @import "helpers/position";

scss/helpers/_color-bg.scss

@@ -0,0 +1,7 @@
+@each $color, $value in $theme-colors {
+  $color-rgb: to-rgb($value);
+  .text-bg-#{$color} {
+    color: color-contrast($value) !important; // stylelint-disable-line declaration-no-important
+    background-color: rgba($color-rgb, var(--#{$prefix}bg-opacity, 1)) !important; // stylelint-disable-line declaration-no-important
+  }
+}

site/content/docs/5.1/customize/color.md

@@ -102,11 +102,11 @@ Colors ending in `--rgb` provide the `red, green, blue` values for use in `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` |
-| **Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-primary);">Primary</div> | `--bs-primary`<br>`--bs-primary-rgb` |
-| **Success —** Theme color used for positive or successful actions and information. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-success);">Success</div> | `--bs-success`<br>`--bs-success-rgb` |
-| **Danger —** Theme color used for errors and dangerous actions. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-danger);">Danger</div> | `--bs-danger`<br>`--bs-danger-rgb` |
-| **Warning —** Theme color used for warning messages. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-warning);">Warning</div> | `--bs-warning`<br>`--bs-warning-rgb` |
-| **Info —** Theme color used for neutral and informative content. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-info);">Info</div> | `--bs-info`<br>`--bs-info-rgb` |
+| **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` |
+| **Warning —** Theme color used for warning messages. | <div class="p-3 text-bg-warning rounded-2">Warning</div> | `--bs-warning`<br>`--bs-warning-rgb` |
+| **Info —** Theme color used for neutral and informative content. | <div class="p-3 text-bg-info rounded-2">Info</div> | `--bs-info`<br>`--bs-info-rgb` |
 {{< /bs-table >}}
 
 ### Theme colors

site/content/docs/5.1/helpers/color-background.md

@@ -0,0 +1,41 @@
+---
+layout: docs
+title: Color & background
+description: Set a background color with contrasting foreground color.
+group: helpers
+toc: false
+---
+
+Color and background helpers combine the power of our [`.text-*` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`.
+
+{{< example >}}
+{{< text-bg.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<div class="text-bg-{{ .name }} p-3">{{ .name | title }} with contrasting color</div>
+{{- end -}}
+{{< /text-bg.inline >}}
+{{< /example >}}
+
+Use them in place of combined `.text-*` and `.bg-*` classes, like on badges:
+
+{{< example >}}
+<span class="badge text-bg-primary">Primary</span>
+<span class="badge text-bg-info">Info</span>
+{{< /example >}}
+
+Or on cards:
+
+{{< example >}}
+<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body">
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card text-bg-info mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body">
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+{{< /example >}}

site/data/sidebar.yml

@@ -100,6 +100,7 @@
   icon_color: orange
   pages:
     - title: Clearfix
+    - title: Color & background
     - title: Colored links
     - title: Ratio
     - title: Position