Organize color variables (now they're without `color-` prefix

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

@@ -22,11 +22,11 @@
 // }
 
 .uppy-Root *:focus {
-  outline: $size-focus-outline solid $color-blue; /* no !important */
+  outline: $size-focus-outline solid $blue; /* no !important */
   outline-offset: $size-focus-offset; /* no !important */
 
   // outline: none;
-  // box-shadow: inset 0 0 0 2px rgba($color-blue, 0.5);
+  // box-shadow: inset 0 0 0 2px rgba($blue, 0.5);
 }
 
 .uppy-Root [hidden] {
@@ -115,7 +115,7 @@
   font-size: 14px;
   line-height: 1.5;
   padding: 6px 8px;
-  background-color: $color-white;
+  background-color: $white;
 }
 
   .uppy-size--md .uppy-c-textInput {
@@ -123,7 +123,7 @@
   }
 
   .uppy-c-textInput:focus {
-    border-color: $color-blue;
+    border-color: $blue;
     outline: none;
   }
 
@@ -150,8 +150,8 @@
   font-size: 14px;
   padding: 10px 18px;
   border-radius: 4px;
-  background-color: $color-blue;
-  color: $color-white;
+  background-color: $blue;
+  color: $white;
 }
 
   .uppy-size--md .uppy-c-btn-primary {
@@ -159,12 +159,12 @@
   }
 
   .uppy-c-btn-primary:hover {
-    background-color: darken($color-blue, 10%);
+    background-color: darken($blue, 10%);
   }
 
   .uppy-c-btn-primary:focus {
     outline: none;
-    box-shadow: 0 0 0 3px rgba($color-blue, 0.5);
+    box-shadow: 0 0 0 3px rgba($blue, 0.5);
   }
 
 .uppy-c-btn-link {
@@ -186,7 +186,7 @@
 
   .uppy-c-btn-link:focus {
     outline: none;
-    box-shadow: 0 0 0 0.2rem rgba($color-blue, 0.5);
+    box-shadow: 0 0 0 0.2rem rgba($blue, 0.5);
   }
 
 .uppy-c-btn--small {

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

@@ -3,32 +3,27 @@ $font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Ari
 
 // Colors
 
-$color-black: #000 !default;
-// $color-gray: #939393 !default;
-// $color-asphalt-gray: #525252 !default;
-// $color-lightgray: #eaeaea !default;
-// $color-almost-white: #fafafa !default;
-$color-white: #fff !default;
-$color-red: #d32f2f !default;
-$color-orange: #f6a623 !default;
-$color-yellow: #ffd600 !default;
-$color-green: #1bb240 !default;
-$color-blue: #2275d7 !default;
-
-// Shades of gray
-// @todo: replace all current grays with them
-$gray-50: #fafafa;
-$gray-100: #f4f4f4;
-$gray-200: #eaeaea;
-$gray-300: #cfcfcf;
-$gray-400: #bbb;
-$gray-500: #939393;
-$gray-600: #757575;
-$gray-700: #525252;
-$gray-800: #333;
-$gray-900: #1f1f1f;
-
-$color-uppy-pink: #eb2177;
+$white: #fff !default;
+$black: #000 !default;
+$red: #d32f2f !default;
+$orange: #f6a623 !default;
+$yellow: #ffd600 !default;
+$green: #1bb240 !default;
+$blue: #2275d7 !default;
+
+$gray-50: #fafafa !default;
+$gray-100: #f4f4f4 !default;
+$gray-200: #eaeaea !default;
+$gray-300: #cfcfcf !default;
+$gray-400: #bbb !default;
+$gray-500: #939393 !default;
+$gray-600: #757575 !default;
+$gray-700: #525252 !default;
+$gray-800: #333 !default;
+$gray-900: #1f1f1f !default;
+
+
+$uppy-pink: #eb2177;
 
 // Sizes
 

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

@@ -106,7 +106,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba($color-black, 0.5);
+  background-color: rgba($black, 0.5);
   z-index: $zIndex-2;
 }
 
@@ -162,7 +162,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    box-shadow: 0 5px 15px 4px rgba($color-black, 0.15);
+    box-shadow: 0 5px 15px 4px rgba($black, 0.15);
   }
 }
 
@@ -172,7 +172,7 @@
   top: -33px;
   right: -2px;
   cursor: pointer;
-  color: rgba($color-white, 0.9);
+  color: rgba($white, 0.9);
   font-size: 27px;
   z-index: $zIndex-5;
 
@@ -237,7 +237,7 @@
 .uppy-Dashboard-browse {
   @include reset-button;
   cursor: pointer;
-  color: rgba($color-blue, 0.9);
+  color: rgba($blue, 0.9);
 
   &:hover {
     text-decoration: underline;
@@ -246,7 +246,7 @@
 
   .uppy-Dashboard-browse:focus {
     outline: none;
-    border-bottom: 2px solid $color-blue;
+    border-bottom: 2px solid $blue;
   }
 
 .uppy-DashboardTabs-list {
@@ -308,7 +308,7 @@
 }
 
   .uppy-DashboardTab-btn:hover {
-    color: $color-blue;
+    color: $blue;
   }
 
   .uppy-DashboardTab-btn:focus {
@@ -412,10 +412,10 @@
   font-size: 12px;
   font-weight: 400;
   cursor: pointer;
-  color: $color-blue;
+  color: $blue;
 
   &:hover {
-    color: darken($color-blue, 10%)
+    color: darken($blue, 10%)
   }
 
   .uppy-size--md & {
@@ -427,13 +427,13 @@
   @include reset-button;
   font-weight: 500;
   cursor: pointer;
-  color: $color-blue;
+  color: $blue;
   width: 24px;
   height: 24px;
   padding: 5px;
 
   &:hover {
-    color: darken($color-blue, 10%)
+    color: darken($blue, 10%)
   }
 }
 
@@ -447,7 +447,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: darken($color-white, 4%);
+  background-color: darken($white, 4%);
   overflow: hidden;
   z-index: $zIndex-5;
   border-radius: 5px;
@@ -464,7 +464,7 @@
   right: 0;
   background: $gray-50;
   background: linear-gradient(0deg, $gray-50 35%, rgba($gray-50, 0.85) 100%);
-  box-shadow: 0 0 10px 5px rgba($color-black, 0.15);
+  box-shadow: 0 0 10px 5px rgba($black, 0.15);
   overflow: hidden;
   z-index: $zIndex-5;
   border-radius: 5px;
@@ -508,7 +508,7 @@
 //   border: 0;
 //   z-index: $zIndex-3;
 //   transition: background-color 0.5s;
-//   color: $color-white;
+//   color: $white;
 //   font-family: inherit;
 //   font-size: 14px;
 //   line-height: 1;
@@ -520,10 +520,10 @@
 
 // .uppy-Dashboard-next.is-active {
 //   cursor: pointer;
-//   background-color: $color-blue;
+//   background-color: $blue;
 
 //   &:hover {
-//     background-color: darken($color-blue, 20%);
+//     background-color: darken($blue, 20%);
 //   }
 // }
 
@@ -708,11 +708,11 @@ a.uppy-Dashboard-poweredBy {
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  box-shadow: 0 0 2px 0 rgba($color-black, 0.4);
+  box-shadow: 0 0 2px 0 rgba($black, 0.4);
   border-radius: 3px;
 
   .uppy-size--md & {
-    box-shadow: 0 1px 3px rgba($color-black, 0.2);
+    box-shadow: 0 1px 3px rgba($black, 0.2);
   }
 }
 
@@ -723,7 +723,7 @@ a.uppy-Dashboard-poweredBy {
     bottom: 0;
     left: 0;
     right: 0;
-    background-color: rgba($color-black, 0.65) /* no !important */;
+    background-color: rgba($black, 0.65) /* no !important */;
     display: none;
     z-index: $zIndex-2;
   }
@@ -745,7 +745,7 @@ a.uppy-Dashboard-poweredBy {
 .uppy-DashboardItem-previewIconBg {
   width: 100%;
   height: 100%;
-  filter: drop-shadow(rgba($color-black, 0.1) 0px 0px 1px);
+  filter: drop-shadow(rgba($black, 0.1) 0px 0px 1px);
 }
 
 .uppy-DashboardItem-previewIcon {
@@ -893,7 +893,7 @@ a.uppy-Dashboard-poweredBy {
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: $zIndex-3;
-  color: $color-white;
+  color: $white;
   text-align: center;
   width: 120px;
   display: none;
@@ -963,7 +963,7 @@ a.uppy-Dashboard-poweredBy {
   bottom: -10px;
   left: 0;
   width: 100%;
-  text-shadow: 0 1px 0 rgba($color-black, 0.3);
+  text-shadow: 0 1px 0 rgba($black, 0.3);
 
   .uppy-size--md & {
     display: block;
@@ -976,40 +976,40 @@ a.uppy-Dashboard-poweredBy {
 }
 
 .uppy-DashboardItem .bg {
-  stroke: rgba($color-white, 0.4);
+  stroke: rgba($white, 0.4);
   opacity: 0;
 }
 
 .uppy-DashboardItem .progress {
-  stroke: $color-white;
+  stroke: $white;
   transition: stroke-dashoffset .5s ease-out;
   opacity: 0;
 }
 
 .uppy-DashboardItem .play {
-  stroke: $color-white;
-  fill: $color-white;
+  stroke: $white;
+  fill: $white;
   opacity: 0;
   transition: all 0.2s;
   display: none;
 }
 
 .uppy-DashboardItem .cancel {
-  fill: $color-white;
+  fill: $white;
   opacity: 0;
   transition: all 0.2s;
 }
 
 .uppy-DashboardItem .pause {
-  stroke: $color-white;
-  fill: $color-white;
+  stroke: $white;
+  fill: $white;
   opacity: 0;
   transition: all 0.2s;
   display: none;
 }
 
 .uppy-DashboardItem.is-error .retry {
-  fill: $color-white;
+  fill: $white;
 }
 
 .uppy-DashboardItem.is-resumable {
@@ -1019,7 +1019,7 @@ a.uppy-Dashboard-poweredBy {
 
 .UppyIcon-progressCircle .check {
   opacity: 0;
-  fill: $color-white;
+  fill: $white;
   transition: all 0.2s;
 }
 
@@ -1058,8 +1058,8 @@ a.uppy-Dashboard-poweredBy {
   }
 
   .progress {
-    stroke: $color-green;
-    fill: $color-green;
+    stroke: $green;
+    fill: $green;
     opacity: 1;
   }
 
@@ -1075,7 +1075,7 @@ a.uppy-Dashboard-poweredBy {
 
 .uppy-DashboardItem-progressInner {
   height: 15px;
-  background-color: $color-blue;
+  background-color: $blue;
   position: absolute;
   top: 0;
   left: 0;
@@ -1124,8 +1124,8 @@ a.uppy-Dashboard-poweredBy {
   position: absolute;
   top: -12px;
   right: -12px;
-  background-color: $color-green;
-  color: $color-white;
+  background-color: $green;
+  color: $white;
   border-radius: 50%;
   width: 16px;
   height: 16px;
@@ -1155,8 +1155,8 @@ a.uppy-Dashboard-poweredBy {
   right: 0;
   bottom: 0;
   z-index: $zIndex-5;
-  box-shadow: 0px 0px 10px 4px rgba($color-black, 0.1);
-  background-color: $color-white;
+  box-shadow: 0px 0px 10px 4px rgba($black, 0.1);
+  background-color: $white;
   display: flex;
   flex-direction: column;
 }
@@ -1183,7 +1183,7 @@ a.uppy-Dashboard-poweredBy {
 }
 
 .uppy-DashboardFileCard-preview img {
-  box-shadow: 0px 3px 20px rgba($color-black, 0.15);
+  box-shadow: 0px 3px 20px rgba($black, 0.15);
   max-width: 90%;
   max-height: 90%;
   object-fit: cover;

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

@@ -47,7 +47,7 @@
   font-weight: 400;
   padding: 6px 15px;
   background-color: $gray-600; /* no !important */
-  color: $color-white;
+  color: $white;
   border-radius: 18px;
   max-width: 90%;
 
@@ -66,7 +66,7 @@
   display: inline-block;
   vertical-align: middle;
   color: $gray-700;
-  background-color: $color-white;
+  background-color: $white;
   border-radius: 50%;
   position: relative;
   top: -1px;

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

@@ -141,7 +141,7 @@
 
 .uppy-ProviderBrowser-search {
   width: 100%;
-  background-color: $color-white;
+  background-color: $white;
   position: relative;
   height: 30px;
   margin-top: 10px;
@@ -202,7 +202,7 @@
 .uppy-ProviderBrowser-userLogout {
   cursor: pointer;
   line-height: inherit;
-  color: $color-blue;
+  color: $blue;
 
   &:hover {
     text-decoration: underline;
@@ -220,7 +220,7 @@
   display: block;
   width: 100%;
   height: 100%;
-  background-color: $color-white;
+  background-color: $white;
   border-spacing: 0;
   overflow-x: hidden;
   overflow-y: auto;
@@ -246,7 +246,7 @@
 // ***
 
 .uppy-ProviderBrowser-viewType--list {
-  background-color: $color-white;
+  background-color: $white;
 
   .uppy-ProviderBrowserItem {
     display: flex;
@@ -263,7 +263,7 @@
     }
 
     .uppy-ProviderBrowserItem-checkbox input:checked + label:before {
-      border-color: $color-blue;
+      border-color: $blue;
     }
 
   .uppy-ProviderBrowserItem-inner {
@@ -317,12 +317,12 @@
     }
 
     // .uppy-ProviderBrowserItem--selected {
-    //   border-color: $color-blue;
+    //   border-color: $blue;
     //   outline: none;
     // }
 
     // .uppy-ProviderBrowserItem--selected .uppy-ProviderBrowserItem-inner {
-    //   box-shadow: 0 0 0 3px rgba(darken($color-blue, 10%), 0.9);
+    //   box-shadow: 0 0 0 3px rgba(darken($blue, 10%), 0.9);
     // }
 
   .uppy-ProviderBrowserItem-inner {
@@ -339,7 +339,7 @@
 
   .uppy-ProviderBrowserItem-inner:focus {
     outline: none;
-    box-shadow: 0 0 0 3px rgba($color-blue, 0.9);
+    box-shadow: 0 0 0 3px rgba($blue, 0.9);
   }
 
   .uppy-ProviderBrowserItem img,
@@ -362,7 +362,7 @@
   }
 
   .uppy-ProviderBrowserItem--noPreview svg {
-    fill: rgba($color-black, 0.7);
+    fill: rgba($black, 0.7);
     width: 30%;
     height: 30%;
   }
@@ -377,7 +377,7 @@
   }
 
   .uppy-ProviderBrowserItem-checkbox label:before {
-    background-color: $color-blue;
+    background-color: $blue;
     border-radius: 50%;
     width: 26px;
     height: 26px;
@@ -438,8 +438,8 @@
   height: 17px;
   width: 17px;
   top: 2px;
-  border: 1px solid $color-blue;
-  background-color: $color-white;
+  border: 1px solid $blue;
+  background-color: $white;
   border-radius: 3px;
 }
 
@@ -451,8 +451,8 @@
   width: 9px;
   left: 4px;
   top: 7px;
-  border-left: 2px solid $color-white;
-  border-bottom: 2px solid $color-white;
+  border-left: 2px solid $white;
+  border-bottom: 2px solid $white;
   transform: rotate(-45deg);
 }
 
@@ -467,7 +467,7 @@
 }
 
 .uppy-ProviderBrowserItem-checkbox input:checked + label::before {
-  background-color: $color-blue;
+  background-color: $blue;
 }
 
 // Adding focus styles on the outer-box of the fake checkbox*/
@@ -478,7 +478,7 @@
 .uppy-ProviderBrowser-footer {
   display: flex;
   align-items: center;
-  background: $color-white;
+  background: $white;
   height: 65px;
   border-top: 1px solid $gray-200;
   padding: 0 15px;

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

@@ -9,8 +9,8 @@
   line-height: 40px;
   font-size: 12px;
   font-weight: 400;
-  color: $color-white;
-  background-color: $color-white;
+  color: $white;
+  background-color: $white;
   z-index: $zIndex-2;
   transition: height .2s;
 }
@@ -37,26 +37,26 @@
 }
 
 .uppy-StatusBar.is-complete .uppy-StatusBar-progress {
-  background-color: $color-green;
+  background-color: $green;
 }
 
 .uppy-StatusBar.is-error .uppy-StatusBar-progress {
-  background-color: $color-red;
+  background-color: $red;
 }
 
 .uppy-StatusBar.is-complete .uppy-StatusBar-statusIndicator {
   cursor: default;
-  color: $color-green;
+  color: $green;
 }
 
 .uppy-StatusBar:not([aria-hidden=true]).is-waiting {
-  background-color: $color-white;
+  background-color: $white;
   height: 65px;
   border-top: 1px solid $gray-200;
 }
 
 .uppy-StatusBar-progress {
-  background-color: $color-blue;
+  background-color: $blue;
   height: 2px;
   position: absolute;
   z-index: $zIndex-2;
@@ -77,7 +77,7 @@
 
   .uppy-StatusBar.is-preprocessing .uppy-StatusBar-progress,
   .uppy-StatusBar.is-postprocessing .uppy-StatusBar-progress {
-    background-color: $color-orange;
+    background-color: $orange;
   }
 
 .uppy-StatusBar.is-waiting .uppy-StatusBar-progress {
@@ -195,7 +195,7 @@
   // width: 20px;
   // height: 20px;
   // border-radius: 50%;
-  // color: rgba($color-black, 0.6);
+  // color: rgba($black, 0.6);
   // background-color: rgba($gray-500, 0.3);
   // text-align: center;
 
@@ -205,7 +205,7 @@
 }
 
   .uppy-StatusBar-actionCircleBtn:focus {
-    outline: 2px solid $color-blue;
+    outline: 2px solid $blue;
     outline-offset: 0;
   }
 
@@ -230,7 +230,7 @@
   font-size: 10px;
   // margin-left: 6px;
   // margin-right: 6px;
-  color: $color-blue;
+  color: $blue;
 
   .uppy-size--md & {
     font-size: 11px;
@@ -245,12 +245,12 @@
     font-size: 14px;
     width: 100%;
     padding: 15px 10px;
-    color: $color-white;
-    background-color: $color-green;
+    color: $white;
+    background-color: $green;
   }
 
     .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload:hover {
-      background-color: darken($color-green, 10%);
+      background-color: darken($green, 10%);
     }
 
     .uppy-size--md .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {
@@ -264,8 +264,8 @@
 
   .uppy-StatusBar:not(.is-waiting) .uppy-StatusBar-actionBtn--upload {
     background-color: transparent;
-    // border: 1px solid $color-white;
-    color: $color-blue;
+    // border: 1px solid $white;
+    color: $blue;
   }
 
 .uppy-StatusBar-details {
@@ -274,7 +274,7 @@
   height: 13px;
   display: inline-block;
   vertical-align: middle;
-  color: $color-white;
+  color: $white;
   background-color: $gray-700;
   border-radius: 50%;
   position: relative;
@@ -296,12 +296,12 @@
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   margin-right: 10px;
-  fill: $color-blue;
+  fill: $blue;
 }
 
   .uppy-StatusBar.is-preprocessing .uppy-StatusBar-spinner,
   .uppy-StatusBar.is-postprocessing .uppy-StatusBar-spinner {
-    fill: $color-orange;
+    fill: $orange;
   }
 
 

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

@@ -55,8 +55,8 @@
   width: 45px;
   height: 45px;
   border-radius: 50%;
-  background-color: $color-red;
-  color: $color-white;
+  background-color: $red;
+  color: $white;
   cursor: pointer;
   transition: all 0.3s;
 }
@@ -78,12 +78,12 @@
   }
 
   .uppy-Webcam-button:hover {
-    background-color: darken($color-red, 5%);
+    background-color: darken($red, 5%);
   }
 
   .uppy-Webcam-button:focus {
     outline: none;
-    box-shadow: 0 0 0 0.2rem rgba($color-blue, 0.5);
+    box-shadow: 0 0 0 0.2rem rgba($blue, 0.5);
   }
 
 .uppy-Webcam-button--picture {