From 3d14a7bb5e9fe2b5eef97202d5f8fd775ef9aa13 Mon Sep 17 00:00:00 2001
From: Tyson Gach <tyson@tysongach.com>
Date: Tue, 27 Jun 2017 15:02:58 -0400
Subject: [PATCH] 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       |  5 +++++
 core/_buttons.scss | 13 ++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 929f1185..f12618d0 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/core/_buttons.scss b/core/_buttons.scss
index 89d6b34f..09f93283 100644
--- a/core/_buttons.scss
+++ b/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;
     }
   }
 }