Fix badge theme variable fallback order (#41920)

Move --bs-theme-* variable usage from CSS variable definitions to property
declarations. This ensures the fallback works correctly:
- color: var(--bs-theme-contrast, var(--bs-badge-color))
- background-color: var(--bs-theme-bg, var(--bs-badge-bg))

Also fixes .badge-subtle variant to use same pattern.

diff --git a/scss/_badge.scss b/scss/_badge.scss
index 1fd147979c5fa7853cb7bfbad4a87c0ab72c19b7..1de19055d3978c897380dfa78f486e0dca90341a 100644 (file)
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -22,8 +22,8 @@ $badge-border-radius:               var(--#{$prefix}border-radius) !default;
     --#{$prefix}badge-padding-y: #{$badge-padding-y};
     @include rfs($badge-font-size, --#{$prefix}badge-font-size);
     --#{$prefix}badge-font-weight: #{$badge-font-weight};
-    --#{$prefix}badge-color: var(--#{$prefix}theme-contrast, #{$badge-color});
-    --#{$prefix}badge-bg: var(--#{$prefix}theme-bg, var(--#{$prefix}bg-2));
+    --#{$prefix}badge-color: #{$badge-color};
+    --#{$prefix}badge-bg: var(--#{$prefix}bg-2);
     --#{$prefix}badge-border-radius: #{$badge-border-radius};
     // scss-docs-end badge-css-vars
 
@@ -32,11 +32,11 @@ $badge-border-radius:               var(--#{$prefix}border-radius) !default;
     @include font-size(var(--#{$prefix}badge-font-size));
     font-weight: var(--#{$prefix}badge-font-weight);
     line-height: 1;
-    color: var(--#{$prefix}badge-color);
+    color: var(--#{$prefix}theme-contrast, var(--#{$prefix}badge-color));
     text-align: center;
     white-space: nowrap;
     vertical-align: baseline;
-    background-color: var(--#{$prefix}badge-bg);
+    background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}badge-bg));
     @include border-radius(var(--#{$prefix}badge-border-radius));
     @include gradient-bg();
 
@@ -53,7 +53,7 @@ $badge-border-radius:               var(--#{$prefix}border-radius) !default;
   }
 
   .badge-subtle {
-    --#{$prefix}badge-color: var(--#{$prefix}theme-text);
-    --#{$prefix}badge-bg: var(--#{$prefix}theme-bg-subtle);
+    color: var(--#{$prefix}theme-text, var(--#{$prefix}badge-color));
+    background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}badge-bg));
   }
 }

diff --git a/site/src/content/docs/components/badge.mdx b/site/src/content/docs/components/badge.mdx
index 9850f4daacfd23ebfffd4aeaba816133cb17ddf4..07d09be3f3ba5dc3facca8db8f4cd9e53ba048df 100644 (file)
--- a/site/src/content/docs/components/badge.mdx
+++ b/site/src/content/docs/components/badge.mdx
@@ -10,6 +10,12 @@ import { getData } from '@libs/data'
 
 Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links.
 
+### Base badge
+
+<Example code={`<span class="badge theme-primary">New</span>`} />
+
+<Example code={`<span class="badge badge-subtle theme-primary">New</span>`} />
+
 ### Headings
 
 <Example code={`<h1>Example heading <span class="badge">New</span></h1>