Make button text accessible

This commit adds a color variable that contrasts with the action color to always ensure legibility for buttons. Closes #339
thoughtbot · Oct 25, 2019 · e1a95eb · e1a95eb
1 parent 9646664
commit e1a95eb
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/core/_buttons.scss b/core/_buttons.scss
@@ -6,7 +6,7 @@ button,
   background-color: $action-color;
   border: 0;
   border-radius: var(--border-radius);
-  color: inherit;
+  color: $action-color--contrast;
   cursor: pointer;
   display: inline-block;
   font-family: var(--font-family-base);

diff --git a/core/_variables.scss b/core/_variables.scss
@@ -2,14 +2,16 @@
 $blue: #1565c0;
 $blue-light: #3b83d5;
 $gray: #333;
+$white: #fff;
 
 // Font Colors
 $font-color--base: $gray;
 $action-color: $blue;
 $action-color--alt: $blue-light;
+$action-color--contrast: $white;
 
 // Background Colors
-$viewport-background-color: #fff;
+$viewport-background-color: $white;
 
 :root {
   // Typography