more buttons, new emphasis variant

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)),

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

site/data/theme-colors.yml

@@ -4,4 +4,5 @@
 - name: danger
 - name: warning
 - name: info
+- name: emphasis
 - name: secondary

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" /> */}

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>