From: Mark Otto <markdotto@gmail.com>
Date: Wed, 1 Oct 2025 06:38:12 +0000 (-0700)
Subject: more buttons, new emphasis variant
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=277997e1f71b5d7e42712d574c35d42355fb589b;p=thirdparty%2Fbootstrap.git

more buttons, new emphasis variant
---

diff --git a/scss/_theme.scss b/scss/_theme.scss
index a3b83e2d37..22ceac745a 100644
--- a/scss/_theme.scss
+++ b/scss/_theme.scss
@@ -90,6 +90,16 @@ $new-theme-colors: (
     "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-300)) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}gray-900)
   ),
+  "emphasis": (
+    "base": var(--#{$prefix}gray-900),
+    "text": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
+    "bg": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
+    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-950)),
+    "bg-muted": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
+    "border": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)) 50%, var(--#{$prefix}bg)),
+    "contrast": light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900))
+  ),
   "secondary": (
     "base": var(--#{$prefix}gray-300),
     "text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
diff --git a/scss/buttons/_button.scss b/scss/buttons/_button.scss
index 6be1a9ef1d..8cab8efdf2 100644
--- a/scss/buttons/_button.scss
+++ b/scss/buttons/_button.scss
@@ -281,26 +281,6 @@ $button-variants: (
     }
   }
 
-
-  //
-  // Alternate buttons
-  //
-
-  // scss-docs-start btn-variant-loops
-  @each $color, $value in $theme-colors {
-    .btn-#{$color} {
-      @include button-variant($color, "solid");
-    }
-  }
-
-  @each $color, $value in $theme-colors {
-    .btn-outline-#{$color} {
-      @include button-variant($color, "outline");
-    }
-  }
-  // scss-docs-end btn-variant-loops
-
-
   //
   // Link buttons
   //
diff --git a/site/data/theme-colors.yml b/site/data/theme-colors.yml
index c5a7a6fa02..8eb96d9452 100644
--- a/site/data/theme-colors.yml
+++ b/site/data/theme-colors.yml
@@ -4,4 +4,5 @@
 - name: danger
 - name: warning
 - name: info
+- name: emphasis
 - name: secondary
diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx
index 62f88ed246..b22fb640eb 100644
--- a/site/src/content/docs/components/buttons.mdx
+++ b/site/src/content/docs/components/buttons.mdx
@@ -300,4 +300,4 @@ There are three mixins for buttons: button and button outline variant mixins (bo
 
 Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`.
 
-<ScssDocs name="btn-variant-loops" file="scss/buttons/_button.scss" />
+{/* <ScssDocs name="btn-variant-loops" file="scss/buttons/_button.scss" /> */}
diff --git a/site/src/content/docs/customize/theme.mdx b/site/src/content/docs/customize/theme.mdx
index 03f47c84bd..9e64d07d17 100644
--- a/site/src/content/docs/customize/theme.mdx
+++ b/site/src/content/docs/customize/theme.mdx
@@ -54,6 +54,7 @@ Theme colors include the following semantic colors:
 | `danger` | <Swatch size="inline" bg="red-500" /> `var(--bs-red-500)` | Destructive actions and error states |
 | `warning` | <Swatch size="inline" bg="yellow-500" /> `var(--bs-yellow-500)` | Cautionary messages and warning states |
 | `info` | <Swatch size="inline" bg="cyan-500" /> `var(--bs-cyan-500)` | Informational messages and neutral states |
+| `emphasis` | <Swatch size="inline" bg="gray-900" /> `var(--bs-gray-900)` | High contrast text on a dark background |
 | `secondary` | <Swatch size="inline" bg="gray-300" /> `var(--bs-gray-300)` | Less prominent secondary actions |
 </BsTable>