Convert .badge to CSS variables

diff --git a/scss/_badge.scss b/scss/_badge.scss
index 08df1b84a7e625d4f0995d111ff179da692df20a..c097535b1deb1a4756d154ef9eed342b45e04b08 100644 (file)
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -1,19 +1,29 @@
+// stylelint-disable custom-property-empty-line-before
+
 // Base class
 //
 // Requires one of the contextual, color modifier classes for `color` and
 // `background-color`.
 
 .badge {
+  // scss-docs-start badge-css-vars
+  --#{$variable-prefix}badge-padding: #{$badge-padding-y $badge-padding-x};
+  @include rfs($badge-font-size, --#{$variable-prefix}badge-font-size);
+  --#{$variable-prefix}badge-font-weight: #{$badge-font-weight};
+  --#{$variable-prefix}badge-color: #{$badge-color};
+  --#{$variable-prefix}badge-border-radius: #{$badge-border-radius};
+  // scss-docs-end badge-css-vars
+
   display: inline-block;
-  padding: $badge-padding-y $badge-padding-x;
-  @include font-size($badge-font-size);
-  font-weight: $badge-font-weight;
+  padding: var(--#{$variable-prefix}badge-padding);
+  font-size: var(--#{$variable-prefix}badge-font-size);
+  font-weight: var(--#{$variable-prefix}badge-font-weight);
   line-height: 1;
-  color: $badge-color;
+  color: var(--#{$variable-prefix}badge-color);
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  @include border-radius($badge-border-radius);
+  border-radius: var(--#{$variable-prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list
   @include gradient-bg();
 
   // Empty badges collapse automatically

diff --git a/site/content/docs/5.1/components/badge.md b/site/content/docs/5.1/components/badge.md
index de80d3b27a59cbde392250644308742829587d6c..751871bea2f4822ed993762c0de829455a28c203 100644 (file)
--- a/site/content/docs/5.1/components/badge.md
+++ b/site/content/docs/5.1/components/badge.md
@@ -86,8 +86,16 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 {{< /badge.inline >}}
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.3.0</small>
+
+As part of Bootstrap's evolving CSS variables approach, buttons now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="badge-css-vars" file="scss/_badge.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="badge-variables" file="scss/_variables.scss" >}}