fix: Fix up color variables

Author: Adam Raider

packages/ray/lib/_base.scss

@@ -4,6 +4,7 @@ html {
 
 body {
   font-family: $font-stack-sans-serif;
+  color: $color-text-dark;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -12,7 +13,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   line-height: 1.6666666666666667;
-  color: $black70;
   font-weight: 400;
   font-size: 16px;
   line-height: 28px;
@@ -24,7 +24,7 @@ body {
 
 a {
   text-decoration: none;
-  color: $blue50;
+  color: $color-blue50;
 
   &:hover,
   &:focus {

packages/ray/lib/_buttons.scss

@@ -14,7 +14,7 @@ $font-size: 1rem !default;
   cursor: pointer;
   padding: 0.5625rem 1.5625rem;
   min-width: 120px;
-  color: $white;
+  color: $color-white;
   height: $field-height;
 
   &:hover,
@@ -26,16 +26,16 @@ $font-size: 1rem !default;
 
   &:disabled {
     cursor: not-allowed;
-    background-color: $gray50;
-    border-color: $gray50;
-    color: $white;
+    background-color: $color-gray50;
+    border-color: $color-gray50;
+    color: $color-white;
   }
 }
 
 .btn--primary {
-  @include btn($blue50, $blue60);
+  @include btn($color-blue50, $color-blue60);
 }
 
 .btn--secondary {
-  @include btn($yellow50, $yellow60);
+  @include btn($color-yellow50, $color-yellow60);
 }

packages/ray/lib/_card.scss

@@ -1,10 +1,10 @@
 $card-padding: 1rem;
-$card-border-color: $gray35;
+$card-border-color: $color-gray35;
 
 .card {
   width: 100%;
   border-radius: $border-radius;
-  background-color: $white;
+  background-color: $color-white;
   overflow: hidden;
   height: 100%;
   display: flex;

packages/ray/lib/_forms.scss

@@ -1,6 +1,6 @@
 .FormControl {
-  border: 1px solid $blue;
-  background-color: $white;
+  border: 1px solid $color-blue;
+  background-color: $color-white;
   border-radius: $border-radius;
   position: relative;
   height: $field-height;
@@ -22,7 +22,7 @@
     top: 15px;
     display: flex;
     align-items: center;
-    color: $gray80;
+    color: $color-text-medium;
     transition: all 0.125s ease;
     pointer-events: none;
   }
@@ -43,7 +43,7 @@
 
     &:focus,
     &:not(:placeholder-shown) {
-      border-color: $blue20;
+      border-color: $color-blue20;
 
       + label {
         font-size: 12px;
@@ -59,7 +59,7 @@
   &__hint {
     @extend .p4;
     display: block;
-    color: $gray80;
+    color: $color-text-light;
     font-weight: 400;
     margin-top: 0.25rem;
   }

packages/ray/lib/_image.scss

@@ -4,7 +4,7 @@
   height: auto;
   position: relative;
   overflow: hidden;
-  background-color: $gray35;
+  background-color: $color-gray35;
 
   img {
     position: absolute;
@@ -36,7 +36,7 @@
   display: block;
   width: 100%;
   height: auto;
-  background-color: $gray35;
+  background-color: $color-gray35;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

packages/ray/lib/_table.scss

@@ -4,21 +4,21 @@
 
   thead {
     tr {
-      border-bottom: 1px solid $black70;
+      border-bottom: 1px solid $color-black70;
     }
   }
 
   th {
     font-size: 12px;
     font-family: $font-stack-mono;
-    color: $gray70;
+    color: $color-gray70;
     text-align: left;
     text-transform: uppercase;
     padding: 1rem 0;
   }
 
   tr {
-    border-bottom: 1px solid $gray35;
+    border-bottom: 1px solid $color-gray35;
   }
 
   td {

packages/ray/lib/_variables.scss

@@ -9,49 +9,42 @@ $breakpoint-desktop-large-px: 1024px !default;
 
 $border-radius: 0.25rem !default;
 
-$black70: #000 !default;
-$black60: #0d0e0e !default;
-$black50: #252729 !default;
-$black40: #3d4144 !default;
-$black30: #555a5f !default;
-$black20: #6e7479 !default;
-$gray80: #747476 !default;
-$gray70: #8e8e8f !default;
-$gray60: #a7a7a9 !default;
-$gray50: #c1c1c2 !default;
-$gray40: #dbdbdb !default;
-$gray35: #e6e6e6 !default;
-$gray30: #f4f4f5 !default;
-$white: #fff !default;
+$color-black70: #000 !default;
+$color-black60: #0d0e0e !default;
+$color-black50: #252729 !default;
+$color-black40: #3d4144 !default;
+$color-black30: #555a5f !default;
+$color-black20: #6e7479 !default;
+$color-gray80: #747476 !default;
+$color-gray70: #8e8e8f !default;
+$color-gray60: #a7a7a9 !default;
+$color-gray50: #c1c1c2 !default;
+$color-gray40: #dbdbdb !default;
+$color-gray35: #e6e6e6 !default;
+$color-gray30: #f4f4f5 !default;
+$color-white: #fff !default;
 
-$yellow: #ffd500 !default;
-$yellow80: darken($yellow, 30%) !default;
-$yellow70: darken($yellow, 20%) !default;
-$yellow60: darken($yellow, 10%) !default;
-$yellow50: $yellow !default;
-$yellow40: lighten($yellow, 10%) !default;
-$yellow30: lighten($yellow, 20%) !default;
-$yellow20: lighten($yellow, 30%) !default;
+$color-yellow: #ffd500 !default;
+$color-yellow80: darken($color-yellow, 30%) !default;
+$color-yellow70: darken($color-yellow, 20%) !default;
+$color-yellow60: darken($color-yellow, 10%) !default;
+$color-yellow50: $color-yellow !default;
+$color-yellow40: lighten($color-yellow, 10%) !default;
+$color-yellow30: lighten($color-yellow, 20%) !default;
+$color-yellow20: lighten($color-yellow, 30%) !default;
 
-$blue: #0000ff !default;
-$blue80: darken($blue, 30%) !default;
-$blue70: darken($blue, 20%) !default;
-$blue60: darken($blue, 10%) !default;
-$blue50: $blue !default;
-$blue40: lighten($blue, 10%) !default;
-$blue30: lighten($blue, 20%) !default;
-$blue20: lighten($blue, 30%) !default;
+$color-blue: #0000ff !default;
+$color-blue60: darken($color-blue, 10%) !default;
+$color-blue50: $color-blue !default;
+$color-blue30: lighten($color-blue, 20%) !default;
+$color-blue20: lighten($color-blue, 30%) !default;
 
-$red80: #812020 !default;
-$red70: #aa2a2a !default;
-$red60: #ce3939 !default;
-$red50: #d86262 !default;
-$red40: #e28b8b !default;
-$red30: #ecb4b4 !default;
-$red20: #f6dddd !default;
+$color-text-light: #b0b0b0;
+$color-text-medium: #666666;
+$color-text-dark: #000000;
 
-$primary-color: $blue50 !default;
-$secondary-color: $yellow50 !default;
+$color-primary: $color-blue50 !default;
+$color-secondary: $color-yellow50 !default;
 
 $field-height: 54px !default;