Easier disabled state customization for button variants (#30639)

* feat(buttons): easier disabled state customization

* docs(migration): mention new arguments for disabled state in button-variant()

* Update migration.md

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 09ef0cb38c671c8bd1d36a78bae8aa0f621ad8ae..b72836fad2c58d731055c5e9749cfd0fdb9b113c 100644 (file)
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -12,7 +12,10 @@
   $hover-color: color-contrast($hover-background),
   $active-background: darken($background, 10%),
   $active-border: darken($border, 12.5%),
-  $active-color: color-contrast($active-background)
+  $active-color: color-contrast($active-background),
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: color-contrast($disabled-background)
 ) {
   color: $color;
   @include gradient-bg($background);
@@ -61,11 +64,11 @@
 
   &:disabled,
   &.disabled {
-    color: $color;
-    background-color: $background;
+    color: $disabled-color;
+    background-color: $disabled-background;
     // Remove CSS gradients if they're enabled
     background-image: if($enable-gradients, none, null);
-    border-color: $border;
+    border-color: $disabled-border;
   }
 }
 

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 7525fc57f6fc4b32836f04a75aa4e6e55a44f646..093e998195ed0940aef55438c05f0d6713a4dbcd 100644 (file)
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -16,6 +16,10 @@ toc: true
 
 ### Components
 
+#### Buttons
+
+- Disabled states of buttons are easier to customize thanks to additional arguments in the `button-variant()` mixin. [See #30639.](https://github.com/twbs/bootstrap/pull/30639)
+
 #### Popovers
 
 - Renamed `whiteList` option to `allowList`