Add variables for modifying button state colours. (#32317)

Add some variables to allow users to modify how much a button gets
lighter or darker on :hover and :active.

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 5af668659188df8fbddee541f5eeae42da078315..62fbc0d4d6f299ee87df616c7192ac54ca0ac162 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -612,6 +612,15 @@ $btn-border-radius-lg:        $border-radius-lg !default;
 
 $btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
+$btn-hover-bg-shade-amount:       15% !default;
+$btn-hover-bg-tint-amount:        15% !default;
+$btn-hover-border-shade-amount:   20% !default;
+$btn-hover-border-tint-amount:    10% !default;
+$btn-active-bg-shade-amount:      20% !default;
+$btn-active-bg-tint-amount:       20% !default;
+$btn-active-border-shade-amount:  25% !default;
+$btn-active-border-tint-amount:   10% !default;
+
 
 // Forms
 

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 3aabd896c62d05b6ce8222f057610787f3bb473f..3fbd7089696ae304034543534c108ef6540de04e 100644 (file)
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -7,11 +7,11 @@
   $background,
   $border,
   $color: color-contrast($background),
-  $hover-background: if($color == $color-contrast-light, shade-color($background, 15%), tint-color($background, 15%)),
-  $hover-border: if($color == $color-contrast-light, shade-color($border, 20%), tint-color($border, 10%)),
+  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
   $hover-color: color-contrast($hover-background),
-  $active-background: if($color == $color-contrast-light, shade-color($background, 20%), tint-color($background, 20%)),
-  $active-border: if($color == $color-contrast-light, shade-color($border, 25%), tint-color($border, 10%)),
+  $active-background: if($color == $color-contrast-light, shade-color($background,$btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
   $active-color: color-contrast($active-background),
   $disabled-background: $background,
   $disabled-border: $border,