fix: update to button colors (#48)

* refactor: fill in all variables bootstrap offers

* fix: update to button colors and states

Author: abutterworth

package-lock.json

@@ -3,17 +3,22 @@
 // and adds a focus outline to all buttons on :focus
 //
 
-@mixin button-inverse-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+@mixin button-inverse-variant($color, $background: color-yiq($color), $active-background: $color, $active-border: $color) {
   color: $color;
   border-color: transparent;
-  background-color: #fff;
+  background-color: $background;
 
   @include hover {
     color: darken($color, 7.5%);
-    background-color: #eee;
+    background-color: darken($background, 7.5%);
     border-color: transparent;
   }
 
+  &:focus,
+  &.focus {
+    border-color: rgba($color, 0.5);
+  }
+
   &.disabled,
   &:disabled {
     color: $color;
@@ -36,39 +41,3 @@
     @include button-inverse-variant($value);
   }
 }
-
-
-// Add focus outlines to all of them. Box shadow focus is turned off in variables.
-
-@each $color, $value in $theme-colors {
-  .btn-#{$color} {
-    &.focus,
-    &:focus {
-      box-shadow: none;
-      outline: 1px dotted;
-      outline: 5px auto -webkit-focus-ring-color;
-    }
-  }
-}
-
-@each $color, $value in $theme-colors {
-  .btn-outline-#{$color} {
-    &.focus,
-    &:focus {
-      box-shadow: none;
-      outline: 1px dotted;
-      outline: 5px auto -webkit-focus-ring-color;
-    }
-  }
-}
-
-@each $color, $value in $theme-colors {
-  .btn-inverse-#{$color} {
-    &.focus,
-    &:focus {
-      box-shadow: none;
-      outline: 1px dotted;
-      outline: 5px auto -webkit-focus-ring-color;
-    }
-  }
-}

scss/core/extensions/_buttons.scss

@@ -0,0 +1,13 @@
+@function blend-transparent($foreground, $background, $fg-opacity, $bg-opacity: 1) {
+  // https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
+  // Adapted from: https://gist.github.com/jdudek/54c80e27510b9b13d4447f803869118f
+
+  $opacity: $fg-opacity + $bg-opacity * (1 - $fg-opacity);
+  $factor: $bg-opacity * (1 - $fg-opacity);
+
+  $red:   (red($foreground)   * $fg-opacity + red($background)   * $factor) / $opacity;
+  $green: (green($foreground) * $fg-opacity + green($background) * $factor) / $opacity;
+  $blue:  (blue($foreground)  * $fg-opacity + blue($background)  * $factor) / $opacity;
+
+  @return rgba($red, $green, $blue, $opacity);
+}