Use contrast-switch function for buttons

Bourbon comes with a `contrast-switch` function which switches between
two colors based on the contrast to another color. In this case, we
check the contrast of the button's background color and output either
black or white for the text color. It helps to ensure button text is
accessible.

No visual difference with the button's look-and-feel occurs by using
`contrast-switch`, as we were already within the acceptable contrast
ratio range.

This change also DRYs up the use of `$action-color` and creates a better
system to add further variations of button colors in the future.
Meaning, you can easily add something like
`$_button-secondary-background-color` when the time comes.

Finally, this closely mimics the variables we have set up in the
`_forms` partial, as well.

CHANGELOG.md

@@ -13,6 +13,9 @@ project adheres to [Semantic Versioning](http://semver.org).
   borders being set on the `tr`s. ([#288])
 - The value of `$base-spacing` is no longer derived from `$base-line-height`.
   ([#292])
+- The color of button text is now set using Bourbon's
+  [`contrast-switch`][contrast-switch] function, to automatically ensure
+  sufficient contrast against the button's background color. ([#294])
 
 ### Removed
 
@@ -23,6 +26,8 @@ project adheres to [Semantic Versioning](http://semver.org).
 [#285]: https://github.com/thoughtbot/bitters/pull/285
 [#288]: https://github.com/thoughtbot/bitters/pull/288
 [#292]: https://github.com/thoughtbot/bitters/pull/292
+[#294]: https://github.com/thoughtbot/bitters/pull/294
+[contrast-switch]: http://bourbon.netlify.com/docs/latest/#contrast-switch
 
 ## [1.6.0] - 2017-05-12
 

core/_buttons.scss

@@ -1,9 +1,12 @@
+$_button-background-color: $action-color;
+$_button-background-color-hover: shade($action-color, 20%);
+
 #{$all-buttons} {
   appearance: none;
-  background-color: $action-color;
+  background-color: $_button-background-color;
   border: 0;
   border-radius: $base-border-radius;
-  color: #fff;
+  color: contrast-switch($_button-background-color);
   cursor: pointer;
   display: inline-block;
   font-family: $base-font-family;
@@ -20,8 +23,8 @@
   white-space: nowrap;
 
   &:hover {
-    background-color: shade($action-color, 20%);
-    color: #fff;
+    background-color: $_button-background-color-hover;
+    color: contrast-switch($_button-background-color-hover);
   }
 
   &:focus {
@@ -34,7 +37,7 @@
     opacity: 0.5;
 
     &:hover {
-      background-color: $action-color;
+      background-color: $_button-background-color;
     }
   }
 }