Fix button styles

Author: moyus

scss/_components.button.scss

@@ -72,13 +72,42 @@ $btn-height-computed: $btn-font-size-md * $btn-line-height + 2 * nth($btn-paddin
 
 }
 
+.btn.btn--text {
+  text-decoration: underline;
+  @include btn-variant(
+    $background: transparent,
+    $border: transparent,
+    $color: $grey-dark,
+    $hover-background: $grey-light,
+    $hover-border: $grey-light,
+    $hover-color: $grey-dark,
+    $active-background: shade-color($grey-light, 1),
+    $active-border: shade-color($grey-light, 1),
+    $active-color: $grey-dark
+  );
+}
+
+.btn.btn--black {
+  @include btn-variant($black);
+  &.btn--outline {
+    @include btn-outline-variant($black);
+  }
+}
+
 .btn.btn--dark {
   @include btn-variant($grey-dark);
   &.btn--outline {
     @include btn-outline-variant($grey-dark);
   }
 }
 
+.btn.btn--light {
+  @include btn-variant($grey-light);
+  &.btn--outline {
+    @include btn-outline-variant($grey-light);
+  }
+}
+
 .btn.btn--white {
   @include btn-variant($white);
   &.btn--outline {

scss/mixins/_button.scss

@@ -109,8 +109,8 @@
   $color,
   $border: $color,
   $hover-color: invert-color($color),
-  $hover-border: shade-color($color, 1),
-  $hover-background: shade-color($color, 1),
+  $hover-border: $color,
+  $hover-background: $color,
   $active-color: invert-color($color),
   $active-border: shade-color($color, 2),
   $active-background: shade-color($color, 2),