diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 41b7068224f9..da6d87916dd8 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -68,11 +68,7 @@ fieldset:disabled a.btn {
 
 @each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
-    @if $color == "light" {
-      @include button-outline-variant($value, $gray-900);
-    } @else {
-      @include button-outline-variant($value, $white);
-    }
+    @include button-outline-variant($value);
   }
 }
 
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 1cbe671221d9..06ad6772fa4b 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -54,14 +54,14 @@
   }
 }
 
-@mixin button-outline-variant($color, $color-hover: #fff, $active-background: $color, $active-border: $color) {
+@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
   color: $color;
   background-color: transparent;
   background-image: none;
   border-color: $color;
 
   &:hover {
-    color: color-yiq($color);
+    color: $color-hover;
     background-color: $active-background;
     border-color: $active-border;
   }