Fix text color for buttons in Top Bar

When a button is used inside Top Bar, the text color was always getting set to the link color. However, a better default would be to use the button-style mixin from buttons.scss in order to determine what the best text color would be.

diff --git a/scss/foundation/components/_top-bar.scss b/scss/foundation/components/_top-bar.scss
index 79c322fa89e8266c0d1260a51566f79eda771da5..d7e101c6b0a2b84a810486e2c23dad474369b8f7 100644 (file)
--- a/scss/foundation/components/_top-bar.scss
+++ b/scss/foundation/components/_top-bar.scss
@@ -4,6 +4,7 @@
 
 @import "global";
 @import "grid";
+@import "buttons";
 
 //
 // Top Bar Variables
@@ -318,34 +319,16 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           text-transform: $topbar-link-text-transform;
           background: $topbar-dropdown-bg;
 
+
           &.button {
-            background: $primary-color;
             font-size: $topbar-link-font-size;
-             padding-#{$opposite-direction}: $topbar-link-padding;
-             padding-#{$default-float}: $topbar-link-padding;
-            &:hover {
-              background: scale-color($primary-color, $lightness: -27%);
-            }
+            padding-#{$opposite-direction}: $topbar-link-padding;
+            padding-#{$default-float}: $topbar-link-padding;
+            @include button-style($bg:$primary-color);
           }
-          &.button.secondary {
-            background: $secondary-color;
-            &:hover {
-              background: scale-color($secondary-color, $lightness: -11%);
-            }
-          }
-          &.button.success {
-            background: $success-color;
-            &:hover {
-              background: scale-color($success-color, $lightness: -21%);
-            }
-          }
-          &.button.alert {
-            background: $alert-color;
-            &:hover {
-              background: scale-color($alert-color, $lightness: -18%);
-            }
-          }
-
+          &.button.secondary { @include button-style($bg:$secondary-color); }
+          &.button.success   { @include button-style($bg:$success-color); }
+          &.button.alert     { @include button-style($bg:$alert-color); }
         }
 
         // Apply the hover link color when it has that class