Update some badge stuff (#41955)

diff --git a/scss/_badge.scss b/scss/_badge.scss
index 67c96d3ee7408b7191c6c4f526fcf62b04553c90..62dd972b3e9852b360e69c1892693aa46d2f530a 100644 (file)
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -6,12 +6,12 @@
 @use "mixins/gradients" as *;
 
 // scss-docs-start badge-variables
-$badge-font-size:                   .75em !default;
-$badge-font-weight:                 $font-weight-bold !default;
+$badge-font-size:                   clamp(12px, .75em, .75em) !default;
+$badge-font-weight:                 $font-weight-semibold !default;
 $badge-color:                       inherit !default;
-$badge-padding-y:                   .35em !default;
-$badge-padding-x:                   .5em !default;
-$badge-border-radius:               var(--border-radius) !default;
+$badge-padding-y:                   .25em !default;
+$badge-padding-x:                   .625em !default;
+$badge-border-radius:               var(--border-radius-lg) !default;
 // scss-docs-end badge-variables
 
 // scss-docs-start badge-variants
@@ -43,7 +43,10 @@ $badge-variants: (
     --badge-border-radius: #{$badge-border-radius};
     // scss-docs-end badge-css-vars
 
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 1.375rem;
     padding: var(--badge-padding-y) var(--badge-padding-x);
     font-size: var(--badge-font-size);
     font-weight: var(--badge-font-weight);

diff --git a/site/src/content/docs/components/badge.mdx b/site/src/content/docs/components/badge.mdx
index 9ab7b654269037c7b77d9f8cf0e8a20042dfb3ef..3d1dab19efbdfc9f189f64b254fcdfc0cbbfeadb 100644 (file)
--- a/site/src/content/docs/components/badge.mdx
+++ b/site/src/content/docs/components/badge.mdx
@@ -6,20 +6,18 @@ toc: true
 
 import { getData } from '@libs/data'
 
-## Examples
+## Example
 
-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.
+Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. Badges come in three variants: solid (default), subtle, and outline.
 
-### Base badge
-
-<Example code={`<span class="badge theme-primary">New</span>`} />
-
-<Example code={`<span class="badge badge-subtle theme-primary">New</span>`} />
-
-<Example code={`<span class="badge badge-outline theme-primary">New</span>`} />
+<Example code={`<span class="badge theme-primary">New</span>
+  <span class="badge badge-subtle theme-primary">New</span>
+  <span class="badge badge-outline theme-primary">New</span>`} />
 
 ### Headings
 
+Badges adapt to the `font-size` of the parent element.
+
 <Example code={`<h1>Example heading <span class="badge">New</span></h1>
 <h2>Example heading <span class="badge">New</span></h2>
 <h3>Example heading <span class="badge">New</span></h3>
@@ -45,7 +43,7 @@ Use utilities to modify a `.badge` and position it in the corner of a link or bu
 
 <Example code={`<button type="button" class="btn btn-primary position-relative">
     Inbox
-    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill theme-danger">
+    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill border border-bg theme-danger">
       99+
       <span class="visually-hidden">unread messages</span>
     </span>
@@ -55,26 +53,21 @@ You can also replace the `.badge` class with a few more utilities without a coun
 
 <Example code={`<button type="button" class="btn btn-primary position-relative">
     Profile
-    <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
+    <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-bg rounded-circle">
       <span class="visually-hidden">New alerts</span>
     </span>
   </button>`} />
 
-## Background colors
+## Variants
 
-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.
+Use the contextual `.theme-{color}` classes to apply a semantic theme color to badges.
 
 <Example code={getData('theme-colors').map((themeColor) => `<span class="badge theme-${themeColor.name}">${themeColor.title}</span>`)} />
 <Example code={getData('theme-colors').map((themeColor) => `<span class="badge badge-subtle theme-${themeColor.name}">${themeColor.title}</span>`)} />
+<Example code={getData('theme-colors').map((themeColor) => `<span class="badge badge-outline theme-${themeColor.name}">${themeColor.title}</span>`)} />
 
 <Details name="warning-color-assistive-technologies" />
 
-## Pill badges
-
-Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.
-
-<Example code={getData('theme-colors').map((themeColor) => `<span class="badge rounded-pill theme-${themeColor.name}">${themeColor.title}</span>`)} />
-
 ## CSS
 
 ### Variables