Get rid of $color-gray

packages/@uppy/core/src/_variables.scss

@@ -4,7 +4,7 @@ $font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Ari
 // Colors
 
 $color-black: #000 !default;
-$color-gray: #939393 !default;
+// $color-gray: #939393 !default;
 // $color-asphalt-gray: #525252 !default;
 // $color-lightgray: #eaeaea !default;
 // $color-almost-white: #fafafa !default;

packages/@uppy/dashboard/src/style.scss

@@ -273,7 +273,7 @@
   width: 100%;
   display: inline-block;
   text-align: center;
-  border-bottom: 1px solid rgba($color-gray, 0.2);
+  border-bottom: 1px solid $gray-200;
   padding: 0px 2px;
 
   .uppy-size--md & {
@@ -292,7 +292,7 @@
   background-color: transparent;
   -webkit-appearance: none;
   appearance: none;
-  color: darken($color-gray, 25%);
+  color: $gray-700;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -502,7 +502,7 @@
   width: 100%;
   height: 100%;
   background: none;
-  background-color: rgba($color-gray, 0.7);
+  background-color: rgba($gray-500, 0.7);
   -webkit-appearance: none;
   appearance: none;
   border: 0;
@@ -596,13 +596,13 @@ a.uppy-Dashboard-poweredBy {
   display: inline-block;
   text-align: center;
   font-size: 11px;
-  color: $color-gray;
+  color: $gray-500;
   text-decoration: none;
   margin-top: 8px;
 }
 
 .uppy-Dashboard-poweredByIcon {
-  stroke: $color-gray;
+  stroke: $gray-500;
   fill: none;
   margin-left: 1px;
   margin-right: 1px;
@@ -618,7 +618,7 @@ a.uppy-Dashboard-poweredBy {
   position: relative;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid lighten($color-gray, 35%);
+  border-bottom: 1px solid $gray-200;
   padding-bottom: 10px;
   padding-left: 10px;
 
@@ -686,7 +686,7 @@ a.uppy-Dashboard-poweredBy {
   vertical-align: middle;
   width: 11px;
   height: 11px;
-  color: rgba($color-gray, 0.85);
+  color: $gray-500;
 }
 
 .uppy-DashboardItem-sourceIcon svg,
@@ -708,7 +708,7 @@ a.uppy-Dashboard-poweredBy {
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  box-shadow: 0 0 2px 0 rgba($color-gray, 0.7);
+  box-shadow: 0 0 2px 0 rgba($color-black, 0.4);
   border-radius: 3px;
 
   .uppy-size--md & {
@@ -818,7 +818,7 @@ a.uppy-Dashboard-poweredBy {
   font-size: 11px;
   line-height: 11px;
   font-weight: normal;
-  color: darken($color-gray, 15%);
+  color: $gray-600;
   margin-bottom: 4px;
 }
 
@@ -851,7 +851,7 @@ a.uppy-Dashboard-poweredBy {
     position: absolute;
     top: 0;
     left: -9px;
-    color: $color-gray;
+    color: $gray-600;
     font-weight: 700;
   }
 }
@@ -1178,7 +1178,7 @@ a.uppy-Dashboard-poweredBy {
   justify-content: center;
   flex-grow: 1;
   border-bottom: 1px solid $gray-200;
-  background-color: lighten($color-gray, 40%); /* no !important */
+  background-color: $gray-50; /* no !important */
   position: relative;
 }
 

packages/@uppy/provider-views/src/style.scss

@@ -17,11 +17,11 @@
   justify-content: center;
   flex-flow: column wrap;
   flex: 1;
-  color: $color-gray;
+  color: $gray-500;
 }
 
 .uppy-Provider-empty {
-  color: $color-gray;
+  color: $gray-500;
 }
 
 .uppy-Provider-authIcon svg {
@@ -46,7 +46,7 @@
 
 .uppy-Provider-breadcrumbs {
   flex: 1;
-  color: darken($color-gray, 25%);
+  color: $gray-700;
   font-size: 12px;
   margin-bottom: 10px;
   text-align: left;
@@ -58,7 +58,7 @@
 
 .uppy-Provider-breadcrumbsIcon {
   display: inline-block;
-  color: darken($color-gray, 25%);
+  color: $gray-700;
   vertical-align: bottom;
   margin-right: 8px;
   line-height: 1;
@@ -67,7 +67,7 @@
   .uppy-Provider-breadcrumbsIcon svg {
     width: 13px;
     height: 13px;
-    fill: darken($color-gray, 25%);
+    fill: $gray-700;
   }
 
 .uppy-Provider-breadcrumbs button {
@@ -100,7 +100,7 @@
     content: '\00B7';
     position: relative;
     left: 4px;
-    color: darken($color-gray, 20%);
+    color: $gray-500;
     font-weight: normal;
   }
 
@@ -112,9 +112,9 @@
 
 .uppy-ProviderBrowser-headerBar {
   padding: 12px 15px;
-  background-color: lighten($color-gray, 40%);
+  background-color: $gray-50;
   z-index: $zIndex-2;
-  color: darken($color-gray, 20%);
+  color: $gray-600;
   line-height: 1.4;
   font-size: 12px;
 
@@ -156,7 +156,7 @@
   height: 12px;
   left: 16px;
   z-index: $zIndex-3;
-  color: rgba($color-gray, 0.6);
+  color: $gray-400;
 }
 
 .uppy-ProviderBrowser-searchInput {
@@ -177,10 +177,6 @@
   .uppy-ProviderBrowser-searchInput:focus {
     outline: 0;
     background-color: $gray-100;
-
-    & + .uppy-ProviderBrowser-searchIcon {
-      color: rgba($color-gray, 0.8);
-    }
   }
 
 .uppy-ProviderBrowser-searchClose {
@@ -191,7 +187,7 @@
   right: 15px;
   top: 7px;
   z-index: $zIndex-3;
-  color: $color-gray;
+  color: $gray-500;
   cursor: pointer;
 }
 
@@ -200,7 +196,7 @@
   }
 
 .uppy-ProviderBrowser-searchInput::placeholder {
-  color: $color-gray;
+  color: $gray-500;
 }
 
 .uppy-ProviderBrowser-userLogout {
@@ -362,7 +358,7 @@
   }
 
   .uppy-ProviderBrowserItem--noPreview .uppy-ProviderBrowserItem-inner {
-    background-color: rgba($color-gray, 0.3);
+    background-color: rgba($gray-500, 0.3);
   }
 
   .uppy-ProviderBrowserItem--noPreview svg {

packages/@uppy/status-bar/src/style.scss

@@ -28,7 +28,7 @@
     bottom: 0;
     width: 100%;
     height: 2px;
-    background-color: rgba($color-gray, 0.25);
+    background-color: $gray-200;
   }
 
 .uppy-StatusBar[aria-hidden=true] {
@@ -196,7 +196,7 @@
   // height: 20px;
   // border-radius: 50%;
   // color: rgba($color-black, 0.6);
-  // background-color: rgba($color-gray, 0.3);
+  // background-color: rgba($gray-500, 0.3);
   // text-align: center;
 
   &:hover {

packages/@uppy/webcam/src/style.scss

@@ -44,7 +44,7 @@
 .uppy-Webcam-buttonContainer {
   width: 100%;
   height: 75px;
-  border-top: 1px solid rgba($color-gray, 0.2);
+  border-top: 1px solid $gray-200;
   display: flex;
   align-items: center;
   justify-content: center;