Update badges, cards, and toasts to use new helpers

diff --git a/site/content/docs/5.1/components/badge.md b/site/content/docs/5.1/components/badge.md
index e00b21a12b91ffe2f8db401be520a49cf06c51d5..55b1ffb851182ff8b36cb12ae7c3b61994cf3ba8 100644 (file)
--- a/site/content/docs/5.1/components/badge.md
+++ b/site/content/docs/5.1/components/badge.md
@@ -27,7 +27,7 @@ Badges can be used as part of links or buttons to provide a counter.
 
 {{< example >}}
 <button type="button" class="btn btn-primary">
-  Notifications <span class="badge bg-secondary">4</span>
+  Notifications <span class="badge text-bg-secondary">4</span>
 </button>
 {{< /example >}}
 
@@ -62,12 +62,14 @@ You can also replace the `.badge` class with a few more utilities without a coun
 
 ## Background colors
 
-Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap's default `.bg-light`, you'll likely need a text color utility like `.text-dark` for proper styling. This is because background utilities do not set anything but `background-color`.
+{{< added-in "5.2.0" >}}
+
+Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer.
 
 {{< example >}}
 {{< badge.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<span class="badge bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}}
+<span class="badge text-bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
 {{< /badge.inline >}}
 {{< /example >}}
 
@@ -82,7 +84,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 {{< example >}}
 {{< badge.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<span class="badge rounded-pill bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}}
+<span class="badge rounded-pill text-bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
 {{< /badge.inline >}}
 {{< /example >}}
 

diff --git a/site/content/docs/5.1/components/card.md b/site/content/docs/5.1/components/card.md
index 22b413325ca9c0a67d0603cbe56112cb5f4929f2..9e395cd5ecaa2a324096db1eb7b798d16f0c1323 100644 (file)
--- a/site/content/docs/5.1/components/card.md
+++ b/site/content/docs/5.1/components/card.md
@@ -417,12 +417,14 @@ Cards include various options for customizing their backgrounds, borders, and co
 
 ### Background and color
 
-Use [text color]({{< docsref "/utilities/colors" >}}) and [background utilities]({{< docsref "/utilities/background" >}}) to change the appearance of a card.
+{{< added-in "5.2.0" >}}
+
+Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer.
 
 {{< example >}}
 {{< card.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<div class="card{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }} bg-{{ .name }} mb-3" style="max-width: 18rem;">
+<div class="card text-bg-{{ .name }} mb-3" style="max-width: 18rem;">
   <div class="card-header">Header</div>
   <div class="card-body">
     <h5 class="card-title">{{ .name | title }} card title</h5>

diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md
index 02fdff2d327cd1126d9a9146f98471a68fe53d61..e0750d5342f65b15363b572412760e5dcfd6ec70 100644 (file)
--- a/site/content/docs/5.1/components/toasts.md
+++ b/site/content/docs/5.1/components/toasts.md
@@ -180,10 +180,10 @@ Alternatively, you can also add additional controls and components to toasts.
 
 ### Color schemes
 
-Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
+Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
 
 {{< example class="bg-light" >}}
-<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="d-flex">
     <div class="toast-body">
       Hello, world! This is a toast message.