Generate badge variants (#41942)

* Generate badge variants

* Docs example

diff --git a/scss/_badge.scss b/scss/_badge.scss
index ddab1a59467a6f592e0d3d205dfc99b23ab71221..b306bc752857636047ddb326b015d61b2670cfd8 100644 (file)
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "config" as *;
 @use "colors" as *;
 @use "variables" as *;
@@ -14,6 +15,21 @@ $badge-padding-x:                   .5em !default;
 $badge-border-radius:               var(--#{$prefix}border-radius) !default;
 // scss-docs-end badge-variables
 
+// scss-docs-start badge-variants
+$badge-variants: (
+  "subtle": (
+    "color": "text",
+    "bg": "bg-subtle",
+    "border-color": "transparent"
+  ),
+  "outline": (
+    "color": "text",
+    "bg": "transparent",
+    "border-color": "border"
+  )
+) !default;
+// scss-docs-end badge-variants
+
 @layer components {
   .badge {
     // scss-docs-start badge-css-vars
@@ -23,6 +39,8 @@ $badge-border-radius:               var(--#{$prefix}border-radius) !default;
     --#{$prefix}badge-font-weight: #{$badge-font-weight};
     --#{$prefix}badge-color: #{$badge-color};
     --#{$prefix}badge-bg: var(--#{$prefix}bg-2);
+    --#{$prefix}badge-border-width: #{$border-width};
+    --#{$prefix}badge-border-color: transparent;
     --#{$prefix}badge-border-radius: #{$badge-border-radius};
     // scss-docs-end badge-css-vars
 
@@ -36,6 +54,7 @@ $badge-border-radius:               var(--#{$prefix}border-radius) !default;
     white-space: nowrap;
     vertical-align: baseline;
     background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}badge-bg));
+    border: var(--#{$prefix}badge-border-width) solid var(--#{$prefix}badge-border-color);
     @include border-radius(var(--#{$prefix}badge-border-radius));
     @include gradient-bg();
 
@@ -51,8 +70,21 @@ $badge-border-radius:               var(--#{$prefix}border-radius) !default;
     top: -1px;
   }
 
-  .badge-subtle {
-    color: var(--#{$prefix}theme-text, var(--#{$prefix}badge-color));
-    background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}badge-bg));
+  // scss-docs-start badge-variant-loop
+  @each $variant, $properties in $badge-variants {
+    .badge-#{$variant} {
+      @each $property, $value in $properties {
+        @if $value == "transparent" {
+          --#{$prefix}badge-#{$property}: transparent;
+        } @else {
+          --#{$prefix}badge-#{$property}: var(--#{$prefix}theme-#{$value});
+        }
+      }
+
+      color: var(--#{$prefix}badge-color);
+      background-color: var(--#{$prefix}badge-bg);
+      border-color: var(--#{$prefix}badge-border-color);
+    }
   }
+  // scss-docs-end badge-variant-loop
 }

diff --git a/site/src/content/docs/components/badge.mdx b/site/src/content/docs/components/badge.mdx
index 07d09be3f3ba5dc3facca8db8f4cd9e53ba048df..9ab7b654269037c7b77d9f8cf0e8a20042dfb3ef 100644 (file)
--- a/site/src/content/docs/components/badge.mdx
+++ b/site/src/content/docs/components/badge.mdx
@@ -16,6 +16,8 @@ Badges scale to match the size of the immediate parent element by using relative
 
 <Example code={`<span class="badge badge-subtle theme-primary">New</span>`} />
 
+<Example code={`<span class="badge badge-outline theme-primary">New</span>`} />
+
 ### Headings
 
 <Example code={`<h1>Example heading <span class="badge">New</span></h1>