more buttons, new emphasis variant

diff --git a/scss/_theme.scss b/scss/_theme.scss
index a3b83e2d37f49c1eef1c66b7ab2ab50b7b461e96..22ceac745a5a08af20a1cc3b11ecd3a780e5e618 100644 (file)
--- 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 6be1a9ef1d8c5cbad8464999611d514d09a3c995..8cab8efdf233a599bda62cb0356fcb80f18571b2 100644 (file)
--- 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 c5a7a6fa02105a1b666bad6bd58cf6b3366efe42..8eb96d94522509c27c3206a2c95cb9687c53f57c 100644 (file)
--- 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 62f88ed24634ea41782141f2213ffcba354431cb..b22fb640eb1a6cccfa82270f02162d663be09f47 100644 (file)
--- 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 03f47c84bd98e58e79a3bb0c69797d6b387f021f..9e64d07d176a8dd75d81c4527ab92ab022d31e3e 100644 (file)
--- 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>