Mirrors/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-12-28 05:33:57 +00:00
Code Issues Actions 23 Packages Projects Releases Wiki Activity

Fix badge theme variable fallback order (#41920)
Some checks failed
BrowserStack / browserstack (push) Has been cancelled
Details
Bundlewatch / bundlewatch (push) Has been cancelled
Details
CodeQL / Analyze (push) Has been cancelled
Details
cspell / cspell (push) Has been cancelled
Details
CSS / css (push) Has been cancelled
Details
Docs / docs (push) Has been cancelled
Details
JS Tests / JS Tests (push) Has been cancelled
Details
Lint / lint (push) Has been cancelled
Details
Release notes / update_release_draft (push) Has been cancelled
Details
Scorecard supply-chain security / Scorecard analysis (push) Has been cancelled
Details

Browse Source 
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.
This commit is contained in:
Mark Otto 2025-12-11 15:46:27 -08:00 committed by GitHub
parent 94bfbe5528
commit 353324bd94
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
scss/_badge.scss
View File

@ -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));
}
}

6
site/src/content/docs/components/badge.mdx
View File

@ -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>