From 3693fb36a0f018cf0a8068e1725e333440819345 Mon Sep 17 00:00:00 2001
From: "Kevin P. Kucharczyk" <kevinkucharczyk@gmail.com>
Date: Sat, 5 Mar 2016 13:04:16 +0100
Subject: [PATCH] Add variables for controlling button active/hover darken
 amount

fixes #19353
---
 scss/_variables.scss      |  5 +++++
 scss/mixins/_buttons.scss | 12 ++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 82ef6f96309c..8b05f5999172 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -263,6 +263,11 @@ $btn-font-weight:                normal !default;
 $btn-box-shadow:                 inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
 $btn-active-box-shadow:          inset 0 3px 5px rgba(0,0,0,.125) !default;
 
+$btn-active-bg-darken:           10%;
+$btn-active-border-darken:       12%;
+$btn-active-hover-bg-darken:     17%;
+$btn-active-hover-border-darken: 25%;
+
 $btn-primary-color:              #fff !default;
 $btn-primary-bg:                 $brand-primary !default;
 $btn-primary-border:             $btn-primary-bg !default;
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 5196ab65e196..f853f6b05963 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -4,8 +4,8 @@
 // and disabled options for all buttons
 
 @mixin button-variant($color, $background, $border) {
-  $active-background: darken($background, 10%);
-  $active-border: darken($border, 12%);
+  $active-background: darken($background, $btn-active-bg-darken);
+  $active-border: darken($border, $btn-active-border-darken);
 
   color: $color;
   background-color: $background;
@@ -39,8 +39,8 @@
     &:focus,
     &.focus {
       color: $color;
-      background-color: darken($background, 17%);
-          border-color: darken($border, 25%);
+      background-color: darken($background, $btn-active-hover-bg-darken);
+          border-color: darken($border, $btn-active-hover-border-darken);
     }
   }
 
@@ -88,8 +88,8 @@
     &:focus,
     &.focus {
       color: #fff;
-      background-color: darken($color, 17%);
-          border-color: darken($color, 25%);
+      background-color: darken($color, $btn-active-hover-bg-darken);
+          border-color: darken($color, $btn-active-hover-border-darken);
     }
   }