From 2e69b309a85c419c852b4ed4a52c664be42726a8 Mon Sep 17 00:00:00 2001
From: Joe Workman <joe@workmanmail.com>
Date: Fri, 14 Mar 2014 17:35:00 -0700
Subject: [PATCH] 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.
---
 scss/foundation/components/_top-bar.scss | 33 ++++++------------------
 1 file changed, 8 insertions(+), 25 deletions(-)

diff --git a/scss/foundation/components/_top-bar.scss b/scss/foundation/components/_top-bar.scss
index 79c322fa8..d7e101c6b 100644
--- 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
-- 
2.47.2