Merge pull request #1442 from nqst/design-facelift

Design facelift

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

@@ -10,24 +10,13 @@
   -moz-osx-font-smoothing: grayscale;
   text-align: left;
   position: relative;
+  color: $gray-800;
 }
 
 .uppy-Root *, .uppy-Root *:before, .uppy-Root *:after {
   box-sizing: inherit;
 }
 
-// .uppy-Root *:focus:not(.focus-visible) {
-//   outline: 0;
-// }
-
-.uppy-Root *:focus {
-  outline: $size-focus-outline solid $color-cornflower-blue; /* no !important */
-  outline-offset: $size-focus-offset; /* no !important */
-
-  // outline: none;
-  // box-shadow: inset 0 0 0 2px rgba($color-cornflower-blue, 0.5);
-}
-
 .uppy-Root [hidden] {
   display: none;
 }
@@ -109,24 +98,22 @@
 // Inputs
 
 .uppy-c-textInput {
-  border: 1px solid rgba($color-gray, 0.5);
+  border: 1px solid #ddd;
   border-radius: 4px;
-  font-size: 13px;
+  font-size: 14px;
   line-height: 1.5;
   padding: 6px 8px;
-  background-color: $color-white;
+  background-color: $white;
 }
 
   .uppy-size--md .uppy-c-textInput {
-    font-size: 15px;
-    line-height: 1.8;
-    padding: 8px 12px;
+    padding: 8px 10px;
   }
 
   .uppy-c-textInput:focus {
-    border-color: $color-cornflower-blue;
+    border-color: rgba($blue, 0.6);
     outline: none;
-    box-shadow: 0 0 1px 1px rgba($color-cornflower-blue, 0.5);
+    box-shadow: 0 0 0 3px rgba($blue, 0.15);
   }
 
 // Buttons
@@ -148,41 +135,42 @@
     cursor: pointer;
   }
 
+.uppy-c-btn::-moz-focus-inner {
+   border: 0;
+}
+
 .uppy-c-btn-primary {
-  font-size: 13px;
+  font-size: 14px;
   padding: 10px 18px;
   border-radius: 4px;
-  background-color: $color-cornflower-blue;
-  color: $color-white;
+  background-color: $blue;
+  color: $white;
 }
 
   .uppy-size--md .uppy-c-btn-primary {
-    font-size: 15px;
     padding: 13px 22px;
   }
 
   .uppy-c-btn-primary:hover {
-    background-color: darken($color-cornflower-blue, 10%);
+    background-color: darken($blue, 10%);
   }
 
   .uppy-c-btn-primary:focus {
     outline: none;
-    box-shadow: 0 0 0 3px rgba($color-cornflower-blue, 0.5);
+    box-shadow: 0 0 0 3px rgba($blue, 0.4);
   }
 
 .uppy-c-btn-link {
-  font-size: 13px;
+  font-size: 14px;
   line-height: 1;
-  padding: 10px 18px;
+  padding: 10px 15px;
   border-radius: 4px;
   background-color: transparent;
-  color: $color-black;
+  color: $gray-800;
 }
 
   .uppy-size--md .uppy-c-btn-link {
-    font-size: 15px;
-    padding: 13px 28px;
-    // border-radius: 4px;
+    padding: 13px 18px;
   }
 
   .uppy-c-btn-link:hover {
@@ -191,7 +179,7 @@
 
   .uppy-c-btn-link:focus {
     outline: none;
-    box-shadow: 0 0 0 0.2rem rgba($color-cornflower-blue, 0.5);
+    box-shadow: 0 0 0 3px rgba($blue, 0.25);
   }
 
 .uppy-c-btn--small {

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

@@ -1,21 +1,30 @@
 // Fonts
-$font-family-base: system-ui, -apple-system, BLinkMacSystemFont, Segoe UI, Roboto,
-                   Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif !default;
+$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
 
 // Colors
 
-$color-black: #000 !default;
-$color-gray: #939393 !default;
-$color-red: #D32F2F !default;
-$color-green: #1BB240 !default;
-$color-orange: #F6A623 !default;
-$color-yellow: #FFD600 !default;
-$color-white: #fff !default;
-$color-almost-white: #FAFAFA !default;
-$color-cornflower-blue: #2275D7 !default;
-$color-asphalt-gray: #525252 !default;
-
-$color-uppy-pink: #EB2177;
+$white: #fff !default;
+$black: #000 !default;
+$red: #e32437 !default;
+$pomegranate: #ff4b23 !default;
+$orange: #f6a623 !default;
+$yellow: #ffd600 !default;
+$green: #1bb240 !default;
+$blue: #2275d7 !default;
+
+$gray-50: #fafafa !default;
+$gray-100: #f4f4f4 !default;
+$gray-100--highlighted: #f1f3f6;
+$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/components/AddFiles.js

@@ -3,7 +3,7 @@ const { localIcon } = require('./icons')
 const { h, Component } = require('preact')
 
 const poweredByUppy = (props) => {
-  return <a tabindex="-1" href="https://uppy.io" rel="noreferrer noopener" target="_blank" class="uppy-Dashboard-poweredBy">Powered by <svg aria-hidden="true" class="UppyIcon uppy-Dashboard-poweredByIcon" width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+  return <a tabindex="-1" href="https://uppy.io" rel="noreferrer noopener" target="_blank" class="uppy-Dashboard-poweredBy">Powered by <svg aria-hidden="true" class="UppyIcon uppy-Dashboard-poweredByIcon" width="11" height="11" viewBox="0 0 11 11">
     <path d="M7.365 10.5l-.01-4.045h2.612L5.5.806l-4.467 5.65h2.604l.01 4.044h3.718z" fill-rule="evenodd" />
   </svg><span class="uppy-Dashboard-poweredByUppy">Uppy</span></a>
 }

packages/@uppy/dashboard/src/components/FileItem.js

@@ -180,7 +180,7 @@ module.exports = function fileItem (props) {
           aria-label={props.i18n('removeFile')}
           title={props.i18n('removeFile')}
           onclick={() => props.removeFile(file.id)}>
-          <svg aria-hidden="true" class="UppyIcon" width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
+          <svg aria-hidden="true" class="UppyIcon" width="60" height="60" viewBox="0 0 60 60">
             <path stroke="#FFF" stroke-width="1" fill-rule="nonzero" vector-effect="non-scaling-stroke" d="M30 1C14 1 1 14 1 30s13 29 29 29 29-13 29-29S46 1 30 1z" />
             <path fill="#FFF" vector-effect="non-scaling-stroke" d="M42 39.667L39.667 42 30 32.333 20.333 42 18 39.667 27.667 30 18 20.333 20.333 18 30 27.667 39.667 18 42 20.333 32.333 30z" />
           </svg>

packages/@uppy/dashboard/src/components/PickerPanelTopBar.js

@@ -94,8 +94,8 @@ function PanelTopBar (props) {
           aria-label={props.i18n('addMoreFiles')}
           title={props.i18n('addMoreFiles')}
           onclick={() => props.toggleAddFilesPanel(true)}>
-          <svg class="UppyIcon" width="15" height="15" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg">
-            <path d="M7,6 L13,6 L13,7 L7,7 L7,13 L6,13 L6,7 L0,7 L0,6 L6,6 L6,0 L7,0 L7,6 Z" />
+          <svg class="UppyIcon" width="15" height="15" viewBox="0 0 15 15">
+            <path d="M8 6.5h6a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H8v6a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V8h-6a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h6v-6A.5.5 0 0 1 7 0h.5a.5.5 0 0 1 .5.5v6z" />
           </svg>
         </button>
       }

packages/@uppy/dashboard/src/components/icons.js

@@ -38,7 +38,7 @@ function localIcon () {
 }
 
 function iconRetry () {
-  return <svg aria-hidden="true" class="UppyIcon retry" width="28" height="31" viewBox="0 0 16 19" xmlns="http://www.w3.org/2000/svg">
+  return <svg aria-hidden="true" class="UppyIcon retry" width="28" height="31" viewBox="0 0 16 19">
     <path d="M16 11a8 8 0 1 1-8-8v2a6 6 0 1 0 6 6h2z" />
     <path d="M7.9 3H10v2H7.9z" />
     <path d="M8.536.5l3.535 3.536-1.414 1.414L7.12 1.914z" />
@@ -77,8 +77,8 @@ function iconFile () {
 }
 
 function iconText () {
-  return <svg aria-hidden="true" class="UppyIcon" width="62" height="62" viewBox="0 0 62 62" xmlns="http://www.w3.org/2000/svg">
-    <path fill="#cbcbcb" d="M4.309 4.309h24.912v53.382h-6.525v3.559h16.608v-3.559h-6.525V4.309h24.912v10.676h3.559V.75H.75v14.235h3.559z" fill-rule="nonzero" />
+  return <svg aria-hidden="true" class="UppyIcon" width="62" height="62" viewBox="0 0 62 62">
+    <path d="M4.309 4.309h24.912v53.382h-6.525v3.559h16.608v-3.559h-6.525V4.309h24.912v10.676h3.559V.75H.75v14.235h3.559z" fill-rule="nonzero" fill="#525252" />
   </svg>
 }
 

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

@@ -106,20 +106,20 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba($color-black, 0.5);
+  background-color: rgba($black, 0.5);
   z-index: $zIndex-2;
 }
 
 .uppy-Dashboard-inner {
   position: relative;
-  background-color: $color-almost-white;
+  background-color: $gray-50;
   max-width: 100%; /* no !important */
   max-height: 100%; /* no !important */
   // min-width: 290px;
   // min-height: 450px is required for everything to fit on mobile
   min-height: 450px;
   outline: none;
-  border: 1px solid rgba($color-gray, 0.2);
+  border: 1px solid $gray-200;
   border-radius: 5px;
 
   .uppy-size--md & {
@@ -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;
 
@@ -206,16 +206,16 @@
 }
 
 .uppy-DashboardTabs-title {
-  font-size: 15px;
+  font-size: 14px;
   line-height: 30px;
   font-weight: 400;
   margin: 0;
   padding: 0;
   text-align: center;
-  color: $color-asphalt-gray;
+  color: $gray-700;
 
   .uppy-size--md & {
-    font-size: 17px;
+    font-size: 16px;
     line-height: 40px;
   }
 }
@@ -237,12 +237,16 @@
 .uppy-Dashboard-browse {
   @include reset-button;
   cursor: pointer;
-  color: rgba($color-cornflower-blue, 0.9);
+  color: rgba($blue, 0.9);
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
   .uppy-Dashboard-browse:focus {
     outline: none;
-    border-bottom: 2px solid $color-cornflower-blue;
+    border-bottom: 2px solid $blue;
   }
 
 .uppy-DashboardTabs-list {
@@ -260,7 +264,7 @@
     justify-content: center;
     max-width: 600px;
     overflow-x: initial;
-    margin-top: 30px;
+    margin-top: 15px;
     padding-top: 0;
   }
 }
@@ -269,13 +273,13 @@
   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 & {
     width: initial;
     margin-bottom: 20px;
-    border-bottom: initial;
+    border-bottom: none;
     padding: 0;
   }
 }
@@ -288,30 +292,35 @@
   background-color: transparent;
   -webkit-appearance: none;
   appearance: none;
-  color: darken($color-gray, 25%);
+  color: $gray-700;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 12px 20px;
   line-height: 1;
+  text-align: center;
 
   .uppy-size--md & {
-    width: 80px;
-    margin: 0 5px;
+    width: 86px;
+    margin-right: 1px;
     flex-direction: column;
-    padding: 0;
+    padding: 10px 3px;
+    border-radius: 5px;
   }
 }
 
+  .uppy-DashboardTab-btn::-moz-focus-inner {
+    border: 0;
+  }
+
   .uppy-DashboardTab-btn:hover {
-    color: $color-cornflower-blue;
+    background-color: $gray-100--highlighted;
   }
 
+  .uppy-DashboardTab-btn:active,
   .uppy-DashboardTab-btn:focus {
-    outline-offset: 0;
-    .uppy-size--md & {
-      outline-offset: $size-focus-offset;
-    }
+    background-color: darken($gray-100--highlighted, 2%);
+    outline: none;
   }
 
   .uppy-DashboardTab-btn svg {
@@ -331,10 +340,6 @@
     transition: transform ease-in-out .15s;
   }
 
-  .uppy-DashboardTab-btn:hover svg {
-    transform: translateZ(0) scale(1.1, 1.1);
-  }
-
 .uppy-DashboardTab-name {
   font-size: 14px;
   font-weight: 500;
@@ -374,9 +379,9 @@
   justify-content: space-between;
   height: 40px;
   width: 100%;
-  border-bottom: 1px solid rgba($color-gray, 0.3);
+  border-bottom: 1px solid $gray-200;
   z-index: $zIndex-4;
-  background-color: $color-almost-white;
+  background-color: $gray-50;
   padding: 0 10px;
 
   .uppy-size--md & {
@@ -393,7 +398,7 @@
   text-align: center;
   font-size: 12px;
   line-height: 40px;
-  font-weight: normal;
+  font-weight: 500;
   max-width: 170px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -409,29 +414,38 @@
 
 .uppy-DashboardContent-back {
   @include reset-button;
-  font-size: 13px;
-  font-weight: 500;
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 400;
   cursor: pointer;
-  color: $color-cornflower-blue;
+  color: $blue;
+  padding: 7px 6px;
+  margin-left: -6px;
+  border-radius: 3px;
+
+  &:hover {
+    color: darken($blue, 12%);
+  }
 
   .uppy-size--md & {
-    font-size: 15px;
+    font-size: 14px;
   }
 }
 
 .uppy-DashboardContent-addMore {
   @include reset-button;
+  display: inline-block;
   font-weight: 500;
   cursor: pointer;
-  color: $color-cornflower-blue;
-  stroke: $color-cornflower-blue;
-  stroke-width: 0.7px;
-  width: 13px;
-  height: 13px;
+  color: $blue;
+  width: 27px;
+  height: 27px;
+  padding: 6px;
+  margin-right: -6px;
+  border-radius: 3px;
 
-  .uppy-size--md & {
-    width: 15px;
-    height: 15px;
+  &:hover {
+    color: darken($blue, 12%)
   }
 }
 
@@ -445,7 +459,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;
@@ -460,9 +474,9 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background: $color-almost-white;
-  background: linear-gradient(0deg, $color-almost-white 35%, rgba($color-almost-white, 0.85) 100%);
-  box-shadow: 0 0 10px 5px rgba($color-black, 0.15);
+  background: $gray-50;
+  background: linear-gradient(0deg, $gray-50 35%, rgba($gray-50, 0.85) 100%);
+  box-shadow: 0 0 10px 5px rgba($black, 0.15);
   overflow: hidden;
   z-index: $zIndex-5;
   border-radius: 5px;
@@ -493,37 +507,37 @@
   height: 100%;
 }
 
-.uppy-Dashboard-next {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: none;
-  background-color: rgba($color-gray, 0.7);
-  -webkit-appearance: none;
-  appearance: none;
-  border: 0;
-  z-index: $zIndex-3;
-  transition: background-color 0.5s;
-  color: $color-white;
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 1;
-  padding: 0;
-  margin: 0;
-  outline: none;
-  cursor: not-allowed;
-}
-
-.uppy-Dashboard-next.is-active {
-  cursor: pointer;
-  background-color: $color-cornflower-blue;
-
-  &:hover {
-    background-color: darken($color-cornflower-blue, 20%);
-  }
-}
+// .uppy-Dashboard-next {
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+//   width: 100%;
+//   height: 100%;
+//   background: none;
+//   background-color: rgba($gray-500, 0.7);
+//   -webkit-appearance: none;
+//   appearance: none;
+//   border: 0;
+//   z-index: $zIndex-3;
+//   transition: background-color 0.5s;
+//   color: $white;
+//   font-family: inherit;
+//   font-size: 14px;
+//   line-height: 1;
+//   padding: 0;
+//   margin: 0;
+//   outline: none;
+//   cursor: not-allowed;
+// }
+
+// .uppy-Dashboard-next.is-active {
+//   cursor: pointer;
+//   background-color: $blue;
+
+//   &:hover {
+//     background-color: darken($blue, 20%);
+//   }
+// }
 
 .uppy-Dashboard-filesContainer {
   @include clearfix;
@@ -546,15 +560,15 @@
   }
 
 .uppy-Dashboard.drag .uppy-Dashboard-innerWrap {
-  background-color: darken($color-almost-white, 25%)
+  background-color: darken($gray-50, 25%)
 }
 
 .uppy-Dashboard.drag .uppy-Dashboard-AddFilesPanel {
-  background: darken($color-almost-white, 20%)
+  background: darken($gray-50, 20%)
 }
 
 .uppy-Dashboard.drag .uppy-Dashboard-files--noFiles {
-  border-color: darken($color-almost-white, 20%);
+  border-color: darken($gray-50, 20%);
 }
 
 .uppy-Dashboard-dropFilesTitle {
@@ -563,7 +577,7 @@
   font-size: 16px;
   line-height: 1.45;
   font-weight: 400;
-  color: $color-asphalt-gray;
+  color: $gray-700;
   margin: auto;
   padding: 0 15px;
   padding-top: 20px;
@@ -575,10 +589,10 @@
 }
 
 .uppy-Dashboard-note {
-  font-size: 13px;
+  font-size: 14px;
   line-height: 1.25;
   text-align: center;
-  color: rgba($color-asphalt-gray, 0.8);
+  color: $gray-600;
   max-width: 350px;
   margin: auto;
   padding: 0 15px;
@@ -594,13 +608,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;
@@ -616,7 +630,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;
 
@@ -681,10 +695,8 @@ a.uppy-Dashboard-poweredBy {
 
 .uppy-DashboardItem-sourceIcon {
   display: inline-block;
-  vertical-align: middle;
-  width: 11px;
-  height: 11px;
-  color: rgba($color-gray, 0.85);
+  vertical-align: bottom;
+  color: $gray-500;
 }
 
 .uppy-DashboardItem-sourceIcon svg,
@@ -692,9 +704,11 @@ a.uppy-Dashboard-poweredBy {
   max-width: 100%;
   max-height: 100%;
   display: inline-block;
-  vertical-align: text-top;
+  vertical-align: text-bottom;
   overflow: hidden;
   fill: currentColor;
+  width: 11px;
+  height: 11px;
 }
 
 .uppy-DashboardItem-previewInnerWrap {
@@ -706,11 +720,11 @@ 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($black, 0.4);
   border-radius: 3px;
 
   .uppy-size--md & {
-    box-shadow: 0 1px 3px rgba($color-black,.2);
+    box-shadow: 0 1px 3px rgba($black, 0.2);
   }
 }
 
@@ -721,7 +735,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;
   }
@@ -743,7 +757,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 {
@@ -769,7 +783,7 @@ a.uppy-Dashboard-poweredBy {
   text-transform: uppercase;
   font-size: 9px;
   letter-spacing: 1px;
-  color: $color-asphalt-gray;
+  color: $gray-700;
   z-index: $zIndex-1;
   user-select: none;
 }
@@ -783,18 +797,17 @@ a.uppy-Dashboard-poweredBy {
     width: 100%;
     max-width: 100%;
     flex: 1;
-    padding: 8px 3px 0 3px;
+    padding: 8px 0 0;
     border-top: 0;
   }
 }
 
 .uppy-DashboardItem-name {
-  font-size: 11px;
-  line-height: 1.35;
+  font-size: 12px;
+  line-height: 1.3;
   font-weight: 500;
   margin: 0;
   padding: 0;
-  max-height: 28px;
   margin-bottom: 5px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -808,15 +821,15 @@ a.uppy-Dashboard-poweredBy {
 }
 
 .uppy-DashboardItem-name a {
-  text-decoration: underline;
-  color: $color-black;
+  text-decoration: none;
+  color: $gray-800;
 }
 
 .uppy-DashboardItem-status {
   font-size: 11px;
-  line-height: 11px;
+  line-height: 1.3;
   font-weight: normal;
-  color: darken($color-gray, 15%);
+  color: $gray-600;
   margin-bottom: 4px;
 }
 
@@ -833,8 +846,12 @@ a.uppy-Dashboard-poweredBy {
   cursor: pointer;
   font-family: inherit;
   font-size: inherit;
-  line-height: 1;
+  line-height: inherit;
   color: inherit;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .uppy-DashboardItem-edit:not(:first-child),
@@ -849,8 +866,7 @@ a.uppy-Dashboard-poweredBy {
     position: absolute;
     top: 0;
     left: -9px;
-    color: $color-gray;
-    font-weight: 700;
+    color: $gray-600;
   }
 }
 
@@ -869,10 +885,10 @@ a.uppy-Dashboard-poweredBy {
 .uppy-DashboardItem-remove {
   @include reset-button;
   cursor: pointer;
-  color: $color-black;
-  width: 16px;
-  height: 16px;
-  opacity: 0.75;
+  color: #111;
+  width: 18px;
+  height: 18px;
+  opacity: 0.9;
 
   .uppy-size--md & {
     width: 20px;
@@ -891,7 +907,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;
@@ -918,7 +934,6 @@ a.uppy-Dashboard-poweredBy {
   width: 38px;
   height: 38px;
   opacity: 0.9;
-  transition: all .35s ease;
 
   .uppy-size--md & {
     width: 55px;
@@ -946,8 +961,8 @@ a.uppy-Dashboard-poweredBy {
     opacity: 1;
 
     .uppy-size--md & {
-      width: 25px;
-      height: 25px;
+      width: 22px;
+      height: 22px;
     }
   }
 
@@ -961,7 +976,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;
@@ -974,40 +989,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 {
@@ -1017,7 +1032,7 @@ a.uppy-Dashboard-poweredBy {
 
 .UppyIcon-progressCircle .check {
   opacity: 0;
-  fill: $color-white;
+  fill: $white;
   transition: all 0.2s;
 }
 
@@ -1056,8 +1071,8 @@ a.uppy-Dashboard-poweredBy {
   }
 
   .progress {
-    stroke: $color-green;
-    fill: $color-green;
+    stroke: $green;
+    fill: $green;
     opacity: 1;
   }
 
@@ -1073,7 +1088,7 @@ a.uppy-Dashboard-poweredBy {
 
 .uppy-DashboardItem-progressInner {
   height: 15px;
-  background-color: $color-cornflower-blue;
+  background-color: $blue;
   position: absolute;
   top: 0;
   left: 0;
@@ -1081,11 +1096,11 @@ a.uppy-Dashboard-poweredBy {
 
 .uppy-Dashboard-actions {
   height: 55px;
-  border-top: 1px solid rgba($color-gray, 0.3);
+  border-top: 1px solid $gray-200;
   display: flex;
   align-items: center;
   padding: 0 15px;
-  background-color: $color-almost-white;
+  background-color: $gray-50;
 }
 
   .uppy-size--md .uppy-Dashboard-actions {
@@ -1122,8 +1137,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;
@@ -1153,8 +1168,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;
 }
@@ -1175,13 +1190,13 @@ a.uppy-Dashboard-poweredBy {
   align-items: center;
   justify-content: center;
   flex-grow: 1;
-  border-bottom: 1px solid rgba($color-gray, 0.3);
-  background-color: lighten($color-gray, 40%); /* no !important */
+  border-bottom: 1px solid $gray-200;
+  background-color: $gray-50; /* no !important */
   position: relative;
 }
 
 .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;
@@ -1211,10 +1226,10 @@ a.uppy-Dashboard-poweredBy {
   vertical-align: middle;
   width: 22%;
   font-size: 12px;
-  color: $color-asphalt-gray;
+  color: $gray-700;
 
   .uppy-size--md & {
-    font-size: 13px;
+    font-size: 14px;
   }
 }
 

packages/@uppy/drag-drop/src/index.js

@@ -131,7 +131,7 @@ module.exports = class DragDrop extends Plugin {
     return (
       <div class={DragDropClass} style={DragDropStyle}>
         <div class="uppy-DragDrop-inner">
-          <svg aria-hidden="true" class="UppyIcon uppy-DragDrop-arrow" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <svg aria-hidden="true" class="UppyIcon uppy-DragDrop-arrow" width="16" height="16" viewBox="0 0 16 16">
             <path d="M11 10V0H5v10H2l6 6 6-6h-3zm0 0" fill-rule="evenodd" />
           </svg>
           <label class="uppy-DragDrop-label">

packages/@uppy/drag-drop/src/style.scss

@@ -6,7 +6,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 7px;
-  background-color: $color-white;
+  background-color: $white;
   // cursor: pointer;
 }
 
@@ -20,13 +20,13 @@
 .uppy-DragDrop-arrow {
   width: 60px;
   height: 60px;
-  fill: lighten($color-gray, 30%);
+  fill: lighten($gray-500, 30%);
   margin-bottom: 17px;
 }
 
   .uppy-DragDrop--is-dragdrop-supported {
     border: 2px dashed;
-    border-color: lighten($color-gray, 10%);
+    border-color: lighten($gray-500, 10%);
   }
 
   // .uppy-DragDrop-container.is-dragdrop-supported .uppy-DragDrop-dragText {
@@ -34,12 +34,12 @@
   // }
 
   .uppy-DragDrop-container.drag {
-    border-color: $color-gray;
-    background-color: darken($color-white, 10%);
+    border-color: $gray-500;
+    background-color: darken($white, 10%);
   }
 
   .uppy-DragDrop-container.drag .uppy-DragDrop-arrow {
-    fill: $color-gray;
+    fill: $gray-500;
   }
 
 .uppy-DragDrop-label {
@@ -51,9 +51,9 @@
 
 .uppy-DragDrop-note {
   font-size: 1em;
-  color: lighten($color-gray, 10%);
+  color: lighten($gray-500, 10%);
 }
 
 .uppy-DragDrop-dragText {
-  color: $color-cornflower-blue;
+  color: $blue;
 }

packages/@uppy/dropbox/src/index.js

@@ -10,10 +10,8 @@ module.exports = class Dropbox extends Plugin {
     Provider.initPlugin(this, opts)
     this.title = this.opts.title || 'Dropbox'
     this.icon = () => (
-      <svg aria-hidden="true" fill="#0060ff" width="128" height="118" viewBox="0 0 128 118">
-        <path d="M38.145.777L1.108 24.96l25.608 20.507 37.344-23.06z" />
-        <path d="M1.108 65.975l37.037 24.183L64.06 68.525l-37.343-23.06zM64.06 68.525l25.917 21.633 37.036-24.183-25.61-20.51z" />
-        <path d="M127.014 24.96L89.977.776 64.06 22.407l37.345 23.06zM64.136 73.18l-25.99 21.567-11.122-7.262v8.142l37.112 22.256 37.114-22.256v-8.142l-11.12 7.262z" />
+      <svg aria-hidden="true" width="128" height="128" viewBox="0 0 128 128">
+        <path d="M31.997 11L64 31.825 31.997 52.651 0 31.825 31.997 11zM96 11l32 20.825-32 20.826-32-20.826L96 11zM0 73.476l31.997-20.825L64 73.476 31.997 94.302 0 73.476zm96-20.825l32 20.825-32 20.826-32-20.826 32-20.825zm-64.508 48.254l32.003-20.826 31.997 20.826-31.997 20.825-32.003-20.825z" fill="#0260FF" fill-rule="nonzero" />
       </svg>
     )
 

packages/@uppy/file-input/src/style.scss

@@ -12,13 +12,13 @@
   font-size: 0.85em;
   // text-transform: uppercase;
   padding: 10px 15px;
-  color: darken($color-cornflower-blue, 20%);
-  border: 1px solid darken($color-cornflower-blue, 20%);
+  color: darken($blue, 20%);
+  border: 1px solid darken($blue, 20%);
   border-radius: 8px;
   cursor: pointer;
 
   &:hover {
-    background-color: darken($color-cornflower-blue, 20%);
-    color: $color-white;
+    background-color: darken($blue, 20%);
+    color: $white;
   }
 }

packages/@uppy/google-drive/src/index.js

@@ -11,7 +11,7 @@ module.exports = class GoogleDrive extends Plugin {
     Provider.initPlugin(this, opts)
     this.title = this.opts.title || 'Google Drive'
     this.icon = () => (
-      <svg aria-hidden="true" width="18px" height="16px" viewBox="0 0 18 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <svg aria-hidden="true" width="18px" height="16px" viewBox="0 0 18 16" version="1.1">
         <g fill-rule="evenodd">
           <polygon fill="#3089FC" points="6.32475 10.2 18 10.2 14.999625 15.3 3.324375 15.3" />
           <polygon fill="#00A85D" points="3.000375 15.3 0 10.2 5.83875 0.275974026 8.838 5.37597403 5.999625 10.2" />

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

@@ -46,8 +46,8 @@
   line-height: 1.4;
   font-weight: 400;
   padding: 6px 15px;
-  background-color: rgba($color-asphalt-gray, 0.8); /* no !important */
-  color: $color-white;
+  background-color: $gray-600; /* no !important */
+  color: $white;
   border-radius: 18px;
   max-width: 90%;
 
@@ -65,8 +65,8 @@
   height: 13px;
   display: inline-block;
   vertical-align: middle;
-  color: $color-asphalt-gray;
-  background-color: $color-white;
+  color: $gray-700;
+  background-color: $white;
   border-radius: 50%;
   position: relative;
   top: -1px;

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

@@ -19,8 +19,8 @@
 
 .uppy-ProgressBar-inner {
   /* no important */
-  background-color: $color-cornflower-blue;
-  box-shadow: 0 0 10px rgba($color-cornflower-blue, 0.7);
+  background-color: $blue;
+  box-shadow: 0 0 10px rgba($blue, 0.7);
   height: 100%;
   width: 0;
   transition: width 0.4s ease;
@@ -34,5 +34,5 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: $color-white;
+  color: $white;
 }

packages/@uppy/provider-views/src/Filter.js

@@ -17,9 +17,6 @@ module.exports = class Filter extends Component {
 
   render () {
     return <div class="uppy-ProviderBrowser-search">
-      <svg aria-hidden="true" class="UppyIcon uppy-ProviderBrowser-searchIcon" viewBox="0 0 100 100">
-        <path d="M87.533 80.03L62.942 55.439c3.324-4.587 5.312-10.207 5.312-16.295 0-.312-.043-.611-.092-.908.05-.301.093-.605.093-.922 0-15.36-12.497-27.857-27.857-27.857-.273 0-.536.043-.799.08-.265-.037-.526-.08-.799-.08-15.361 0-27.858 12.497-27.858 27.857 0 .312.042.611.092.909a5.466 5.466 0 0 0-.093.921c0 15.36 12.496 27.858 27.857 27.858.273 0 .535-.043.8-.081.263.038.524.081.798.081 5.208 0 10.071-1.464 14.245-3.963L79.582 87.98a5.603 5.603 0 0 0 3.976 1.647 5.621 5.621 0 0 0 3.975-9.597zM39.598 55.838c-.265-.038-.526-.081-.8-.081-9.16 0-16.612-7.452-16.612-16.612 0-.312-.042-.611-.092-.908.051-.301.093-.605.093-.922 0-9.16 7.453-16.612 16.613-16.612.272 0 .534-.042.799-.079.263.037.525.079.799.079 9.16 0 16.612 7.452 16.612 16.612 0 .312.043.611.092.909-.05.301-.094.604-.094.921 0 9.16-7.452 16.612-16.612 16.612-.274 0-.536.043-.798.081z" />
-      </svg>
       <input
         class="uppy-u-reset uppy-ProviderBrowser-searchInput"
         type="text"
@@ -30,6 +27,9 @@ module.exports = class Filter extends Component {
         onkeypress={this.handleKeyPress}
         value={this.props.filterInput}
         ref={(input) => { this.input = input }} />
+      <svg aria-hidden="true" class="UppyIcon uppy-ProviderBrowser-searchIcon" width="12" height="12" viewBox="0 0 12 12">
+        <path d="M8.638 7.99l3.172 3.172a.492.492 0 1 1-.697.697L7.91 8.656a4.977 4.977 0 0 1-2.983.983C2.206 9.639 0 7.481 0 4.819 0 2.158 2.206 0 4.927 0c2.721 0 4.927 2.158 4.927 4.82a4.74 4.74 0 0 1-1.216 3.17zm-3.71.685c2.176 0 3.94-1.726 3.94-3.856 0-2.129-1.764-3.855-3.94-3.855C2.75.964.984 2.69.984 4.819c0 2.13 1.765 3.856 3.942 3.856z" />
+      </svg>
       { this.props.filterInput &&
         <button
           class="uppy-u-reset uppy-ProviderBrowser-searchClose"

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

@@ -17,6 +17,11 @@
   justify-content: center;
   flex-flow: column wrap;
   flex: 1;
+  color: $gray-500;
+}
+
+.uppy-Provider-empty {
+  color: $gray-500;
 }
 
 .uppy-Provider-authIcon svg {
@@ -33,6 +38,7 @@
   padding: 0 15px;
   max-width: 500px;
   text-align: center;
+  color: $gray-600;
 
   .uppy-size--md & {
     font-size: 20px;
@@ -40,11 +46,9 @@
 }
 
 .uppy-Provider-breadcrumbs {
-  display: inline-block;
   flex: 1;
-  color: darken($color-gray, 25%);
+  color: $gray-700;
   font-size: 12px;
-  line-height: 1;
   margin-bottom: 10px;
   text-align: left;
 
@@ -54,9 +58,9 @@
 }
 
 .uppy-Provider-breadcrumbsIcon {
-  display: inline;
-  color: darken($color-gray, 25%);
-  vertical-align: text-bottom;
+  display: inline-block;
+  color: $gray-700;
+  vertical-align: bottom;
   margin-right: 8px;
   line-height: 1;
 }
@@ -64,12 +68,13 @@
   .uppy-Provider-breadcrumbsIcon svg {
     width: 13px;
     height: 13px;
-    fill: darken($color-gray, 25%);
+    fill: $gray-700;
   }
 
 .uppy-Provider-breadcrumbs button {
   display: inline-block;
-  font-size: 14px;
+  line-height: inherit;
+  // font-size: 14px;
 }
 
 .uppy-Provider-breadcrumbs button:hover {
@@ -81,34 +86,38 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 400;
   height: 100%;
 }
 
 .uppy-ProviderBrowser-user {
   margin: 0 8px 0 0;
-  line-height: 1;
+  font-weight: 500;
+  color: $gray-800;
 }
 
   .uppy-ProviderBrowser-user:after {
     content: '\00B7';
     position: relative;
     left: 4px;
+    color: $gray-500;
+    font-weight: normal;
   }
 
 .uppy-ProviderBrowser-header {
   z-index: $zIndex-2;
-  border-bottom: 1px solid rgba($color-gray, 0.3);
+  border-bottom: 1px solid $gray-200;
   position: relative;
 }
 
 .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%);
-  line-height: 1;
+  color: $gray-600;
+  line-height: 1.4;
+  font-size: 12px;
 
   .uppy-size--md & {
     display: flex;
@@ -133,22 +142,22 @@
 
 .uppy-ProviderBrowser-search {
   width: 100%;
-  background-color: $color-white;
+  background-color: $white;
   position: relative;
   height: 30px;
-  margin-top: 5px;
+  margin-top: 10px;
   margin-bottom: 5px;
   display: flex;
   align-items: center;
 }
 
 .uppy-ProviderBrowser-searchIcon {
-  width: 16px;
-  height: 16px;
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  left: 16px;
   z-index: $zIndex-3;
-  color: rgba($color-gray, 0.6);
-  margin-left: 16px;
-  margin-right: 7px;
+  color: $gray-400;
 }
 
 .uppy-ProviderBrowser-searchInput {
@@ -157,27 +166,29 @@
   background-color: transparent;
   outline: 0;
   font-family: $font-family-base;
-  font-size: 13px;
-  line-height: 30px;
+  font-size: 12px;
+  line-height: 1.4;
   border: 0;
-  margin: 0 16px 0 0;
+  margin: 0 8px;
+  padding-left: 27px;
   z-index: $zIndex-2;
-  border-bottom: 1px solid transparent;
+  border-radius: 4px;
 }
 
   .uppy-ProviderBrowser-searchInput:focus {
     outline: 0;
-    border-bottom: 1px solid $color-cornflower-blue;
+    background-color: $gray-100;
   }
 
 .uppy-ProviderBrowser-searchClose {
-  width: 12px;
-  height: 12px;
   position: absolute;
-  right: 16px;
-  top: 8px;
+  width: 16px;
+  height: 16px;
+  padding: 3px;
+  right: 15px;
+  top: 7px;
   z-index: $zIndex-3;
-  color: $color-gray;
+  color: $gray-500;
   cursor: pointer;
 }
 
@@ -185,16 +196,15 @@
     vertical-align: text-top;
   }
 
-.uppy-ProviderBrowser-searchInput::placeholder,
-.uppy-ProviderBrowser-searchInput::-webkit-input-placeholder,
-.uppy-ProviderBrowser-searchInput::-moz-placeholder,
-.uppy-ProviderBrowser-searchInput::-ms-input-placeholder {
-  color: rgba($color-gray, 0.85);
-  letter-spacing: 1px;
+.uppy-ProviderBrowser-searchInput::placeholder {
+  color: $gray-500;
+  opacity: 1;
 }
 
 .uppy-ProviderBrowser-userLogout {
   cursor: pointer;
+  line-height: inherit;
+  color: $blue;
 
   &:hover {
     text-decoration: underline;
@@ -212,7 +222,7 @@
   display: block;
   width: 100%;
   height: 100%;
-  background-color: $color-white;
+  background-color: $white;
   border-spacing: 0;
   overflow-x: hidden;
   overflow-y: auto;
@@ -229,7 +239,8 @@
 
 .uppy-ProviderBrowserItem-inner {
   cursor: pointer;
-  font-weight: 600;
+  font-weight: 500;
+  font-size: 13px;
 }
 
 // ***
@@ -237,11 +248,11 @@
 // ***
 
 .uppy-ProviderBrowser-viewType--list {
-  background-color: $color-white;
+  background-color: $white;
 
   .uppy-ProviderBrowserItem {
     display: flex;
-    padding: 10px 15px;
+    padding: 7px 15px;
     margin: 0;
   }
 
@@ -250,11 +261,11 @@
   }
 
     .uppy-ProviderBrowserItem-checkbox label:before {
-      border-color: rgba($color-asphalt-gray, 0.4);
+      border-color: $gray-300;
     }
 
     .uppy-ProviderBrowserItem-checkbox input:checked + label:before {
-      border-color: $color-cornflower-blue;
+      border-color: $blue;
     }
 
   .uppy-ProviderBrowserItem-inner {
@@ -308,12 +319,12 @@
     }
 
     // .uppy-ProviderBrowserItem--selected {
-    //   border-color: $color-cornflower-blue;
+    //   border-color: $blue;
     //   outline: none;
     // }
 
     // .uppy-ProviderBrowserItem--selected .uppy-ProviderBrowserItem-inner {
-    //   box-shadow: 0 0 0 3px rgba(darken($color-cornflower-blue, 10%), 0.9);
+    //   box-shadow: 0 0 0 3px rgba(darken($blue, 10%), 0.9);
     // }
 
   .uppy-ProviderBrowserItem-inner {
@@ -325,42 +336,50 @@
     right: 7px;
     bottom: 7px;
     text-align: center;
+
   }
 
   .uppy-ProviderBrowserItem-inner:focus {
     outline: none;
-    box-shadow: 0 0 0 3px rgba($color-cornflower-blue, 0.9);
+    box-shadow: 0 0 0 3px rgba($blue, 0.9);
   }
 
   .uppy-ProviderBrowserItem img,
   .uppy-ProviderBrowserItem svg {
     width: 100%;
     height: 100%;
-    vertical-align: middle;
     object-fit: cover;
+    border-radius: 4px;
+  }
+
+  .uppy-ProviderBrowserItem--selected img,
+  .uppy-ProviderBrowserItem--selected svg {
+    opacity: 0.85;
   }
 
   .uppy-ProviderBrowserItem--noPreview .uppy-ProviderBrowserItem-inner {
-    background-color: rgba($color-gray, 0.3);
+    background-color: rgba($gray-500, 0.3);
   }
 
   .uppy-ProviderBrowserItem--noPreview svg {
-    fill: rgba($color-black, 0.7);
+    fill: rgba($black, 0.7);
     width: 30%;
     height: 30%;
   }
 
   .uppy-ProviderBrowserItem-checkbox {
     position: absolute;
-    top: 13px;
-    right: 22px;
+    width: 26px;
+    height: 26px;
+    top: 16px;
+    right: 16px;
+    display: block;
     margin-right: 0;
-    opacity: 0.95;
     z-index: $zIndex-3;
   }
 
   .uppy-ProviderBrowserItem-checkbox label:before {
-    background-color: $color-cornflower-blue;
+    background-color: $blue;
     border-radius: 50%;
     width: 26px;
     height: 26px;
@@ -370,7 +389,7 @@
     width: 12px;
     height: 7px;
     left: 7px;
-    top: 10px;
+    top: 8px;
   }
 
   // Hide checkbox when unchecked in grid view
@@ -418,12 +437,12 @@
 .uppy-ProviderBrowserItem-checkbox label:before {
   content: "";
   display: inline-block;
-  height: 18px;
-  width: 18px;
-  top: 2px;
-  border: 1px solid $color-cornflower-blue;
-  background-color: $color-white;
-  border-radius: 2px;
+  height: 17px;
+  width: 17px;
+  top: 0;
+  border: 1px solid $blue;
+  background-color: $white;
+  border-radius: 3px;
 }
 
 // Inner checkbox
@@ -431,11 +450,11 @@
   content: '';
   display: inline-block;
   height: 5px;
-  width: 8px;
-  left: 5px;
-  top: 8px;
-  border-left: 2px solid $color-white;
-  border-bottom: 2px solid $color-white;
+  width: 9px;
+  left: 4px;
+  top: 7px;
+  border-left: 2px solid $white;
+  border-bottom: 2px solid $white;
   transform: rotate(-45deg);
 }
 
@@ -450,7 +469,7 @@
 }
 
 .uppy-ProviderBrowserItem-checkbox input:checked + label::before {
-  background-color: $color-cornflower-blue;
+  background-color: $blue;
 }
 
 // Adding focus styles on the outer-box of the fake checkbox*/
@@ -461,12 +480,12 @@
 .uppy-ProviderBrowser-footer {
   display: flex;
   align-items: center;
-  background: $color-white;
+  background: $white;
   height: 65px;
-  border-top: 1px solid rgba($color-gray, 0.3);
+  border-top: 1px solid $gray-200;
   padding: 0 15px;
 
   & button {
-    margin-right: 10px;
+    margin-right: 8px;
   }
 }

packages/@uppy/status-bar/src/StatusBar.js

@@ -158,10 +158,15 @@ const UploadBtn = (props) => {
 }
 
 const RetryBtn = (props) => {
-  return <button type="button"
-    class="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--retry"
-    aria-label={props.i18n('retryUpload')}
-    onclick={props.retryAll}>{props.i18n('retry')}</button>
+  return (
+    <button type="button"
+      class="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--retry" aria-label={props.i18n('retryUpload')} onclick={props.retryAll}>
+      <svg aria-hidden="true" class="UppyIcon" width="8" height="10" viewBox="0 0 8 10">
+        <path d="M4 2.408a2.75 2.75 0 1 0 2.75 2.75.626.626 0 0 1 1.25.018v.023a4 4 0 1 1-4-4.041V.25a.25.25 0 0 1 .389-.208l2.299 1.533a.25.25 0 0 1 0 .416l-2.3 1.533A.25.25 0 0 1 4 3.316v-.908z" />
+      </svg>
+      {props.i18n('retry')}
+    </button>
+  )
 }
 
 const CancelBtn = (props) => {
@@ -171,8 +176,11 @@ const CancelBtn = (props) => {
     title={props.i18n('cancel')}
     aria-label={props.i18n('cancel')}
     onclick={props.cancelAll}>
-    <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-      <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm1.414-8l2.122-2.121-1.415-1.415L8 6.586 5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8z" fill="#949494" fill-rule="evenodd" />
+    <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16">
+      <g fill="none" fill-rule="evenodd">
+        <circle fill="#888" cx="8" cy="8" r="8" />
+        <path fill="#FFF" d="M9.283 8l2.567 2.567-1.283 1.283L8 9.283 5.433 11.85 4.15 10.567 6.717 8 4.15 5.433 5.433 4.15 8 6.717l2.567-2.567 1.283 1.283z" />
+      </g>
     </svg>
   </button>
 }
@@ -188,18 +196,24 @@ const PauseResumeButton = (props) => {
     type="button"
     onclick={() => togglePauseResume(props)}>
     {isAllPaused
-      ? <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM6 5v6l5-3-5-3z" fill="#949494" fill-rule="evenodd" />
+      ? <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16">
+        <g fill="none" fill-rule="evenodd">
+          <circle fill="#888" cx="8" cy="8" r="8" />
+          <path fill="#FFF" d="M6 4.25L11.5 8 6 11.75z" />
+        </g>
       </svg>
-      : <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM5 5v6h2V5H5zm4 0v6h2V5H9z" fill="#949494" fill-rule="evenodd" />
+      : <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16">
+        <g fill="none" fill-rule="evenodd">
+          <circle fill="#888" cx="8" cy="8" r="8" />
+          <path d="M5 4.5h2v7H5v-7zm4 0h2v7H9v-7z" fill="#FFF" />
+        </g>
       </svg>
     }
   </button>
 }
 
 const LoadingSpinner = (props) => {
-  return <svg class="uppy-StatusBar-spinner" width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+  return <svg class="uppy-StatusBar-spinner" width="14" height="14">
     <path d="M13.983 6.547c-.12-2.509-1.64-4.893-3.939-5.936-2.48-1.127-5.488-.656-7.556 1.094C.524 3.367-.398 6.048.162 8.562c.556 2.495 2.46 4.52 4.94 5.183 2.932.784 5.61-.602 7.256-3.015-1.493 1.993-3.745 3.309-6.298 2.868-2.514-.434-4.578-2.349-5.153-4.84a6.226 6.226 0 0 1 2.98-6.778C6.34.586 9.74 1.1 11.373 3.493c.407.596.693 1.282.842 1.988.127.598.073 1.197.161 1.794.078.525.543 1.257 1.15.864.525-.341.49-1.05.456-1.592-.007-.15.02.3 0 0" fill-rule="evenodd" />
   </svg>
 }
@@ -281,18 +295,29 @@ const ProgressBarUploading = (props) => {
 const ProgressBarComplete = ({ totalProgress, i18n }) => {
   return (
     <div class="uppy-StatusBar-content" role="status" title={i18n('complete')}>
-      <svg aria-hidden="true" class="uppy-StatusBar-statusIndicator UppyIcon" width="18" height="17" viewBox="0 0 23 17">
-        <path d="M8.944 17L0 7.865l2.555-2.61 6.39 6.525L20.41 0 23 2.645z" />
-      </svg>
-      {i18n('complete')}
+      <div class="uppy-StatusBar-status">
+        <div class="uppy-StatusBar-statusPrimary">
+          <svg aria-hidden="true" class="uppy-StatusBar-statusIndicator UppyIcon" width="15" height="11" viewBox="0 0 15 11">
+            <path d="M.414 5.843L1.627 4.63l3.472 3.472L13.202 0l1.212 1.213L5.1 10.528z" />
+          </svg>
+          {i18n('complete')}
+        </div>
+      </div>
     </div>
   )
 }
 
 const ProgressBarError = ({ error, retryAll, hideRetryButton, i18n }) => {
   return (
-    <div class="uppy-StatusBar-content" role="alert">
-      <span class="uppy-StatusBar-contentPadding">{i18n('uploadFailed')}.</span>
+    <div class="uppy-StatusBar-content" role="alert" title={i18n('uploadFailed')}>
+      <div class="uppy-StatusBar-status">
+        <div class="uppy-StatusBar-statusPrimary">
+          <svg aria-hidden="true" class="uppy-StatusBar-statusIndicator UppyIcon" width="11" height="11" viewBox="0 0 11 11">
+            <path d="M4.278 5.5L0 1.222 1.222 0 5.5 4.278 9.778 0 11 1.222 6.722 5.5 11 9.778 9.778 11 5.5 6.722 1.222 11 0 9.778z" />
+          </svg>
+          {i18n('uploadFailed')}
+        </div>
+      </div>
       {/* {!hideRetryButton &&
         <span class="uppy-StatusBar-contentPadding">{i18n('pleasePressRetry')}</span>
       } */}

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

@@ -9,15 +9,14 @@
   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;
 }
 
   .uppy-size--md .uppy-StatusBar {
     height: 46px;
-    font-size: 14px;
   }
 
   .uppy-StatusBar:before {
@@ -29,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] {
@@ -38,26 +37,29 @@
 }
 
 .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.is-error .uppy-StatusBar-statusIndicator {
+  color: $red;
 }
 
 .uppy-StatusBar:not([aria-hidden=true]).is-waiting {
-  background-color: $color-white;
+  background-color: $white;
   height: 65px;
-  border-top: 1px solid rgba($color-gray, 0.3);
+  border-top: 1px solid $gray-200;
 }
 
 .uppy-StatusBar-progress {
-  background-color: $color-cornflower-blue;
+  background-color: $blue;
   height: 2px;
   position: absolute;
   z-index: $zIndex-2;
@@ -78,7 +80,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 {
@@ -93,7 +95,7 @@
   padding-left: 10px;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: $color-black;
+  color: $gray-800;
   height: 100%;
 
   .uppy-size--md & {
@@ -101,10 +103,6 @@
   }
 }
 
-.uppy-StatusBar-contentPadding {
-  margin-right: 0.5ch; // ½ the size of a 0, roughly the size of a space usually
-}
-
 .uppy-StatusBar-status {
   line-height: 1.4;
   font-weight: normal;
@@ -113,36 +111,27 @@
   justify-content: center;
   max-width: 170px;
   overflow-x: hidden;
+  padding-right: 0.3em;
 
   .uppy-size--md & {
-    line-height: 1.5;
     max-width: 400px;
   }
 }
 
 .uppy-StatusBar-statusPrimary {
-  font-size: 12px;
-  font-weight: 400;
-
-  .uppy-size--md & {
-    font-size: 13px;
-  }
+  font-weight: 500;
 }
 
 .uppy-StatusBar-statusSecondary {
-  font-size: 10px;
-  // line-height: 1;
+  margin-top: 1px;
+  font-size: 11px;
+  line-height: 1.2;
   display: inline-block;
-  color: rgba($color-asphalt-gray, 0.8);
+  color: $gray-600;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow-x: hidden;
   // max-width: 170px;
-
-  .uppy-size--md & {
-    font-size: 11px;
-    // max-width: 500px;
-  }
 }
 
   .uppy-StatusBar-statusSecondaryHint {
@@ -161,23 +150,15 @@
   // }
 
 .uppy-StatusBar-statusIndicator {
-  color: $color-asphalt-gray;
-  margin-right: 10px;
-  cursor: pointer;
-
-  .uppy-size--md & {
-    margin-right: 12px;
-  }
-}
+  position: relative;
+  top: 1px;
+  color: $gray-700;
+  margin-right: 7px;
 
-  .uppy-StatusBar-statusIndicator svg {
+  svg {
     vertical-align: text-bottom;
   }
-
-  .uppy-StatusBar.is-complete .uppy-StatusBar-statusIndicator  {
-    width: 15px;
-    margin-right: 7px;
-  }
+}
 
 .uppy-StatusBar-actions {
   display: flex;
@@ -193,28 +174,28 @@
   width: 100%;
   position: static;
   padding: 0 15px;
-  background-color: $color-almost-white;
+  background-color: $gray-50;
 }
 
 .uppy-StatusBar-actionCircleBtn {
   line-height: 1;
   cursor: pointer;
-  padding: 4px;
+  padding: 3px;
+  opacity: 0.9;
   // display: flex;
   // align-items: center;
   // justify-content: center;
   // width: 20px;
   // height: 20px;
   // border-radius: 50%;
-  // color: rgba($color-black, 0.6);
-  // background-color: rgba($color-gray, 0.3);
+  // color: rgba($black, 0.6);
+  // background-color: rgba($gray-500, 0.3);
   // text-align: center;
-}
 
-  .uppy-StatusBar-actionCircleBtn:focus {
-    outline: 2px solid $color-cornflower-blue;
-    outline-offset: 0;
+  &:hover {
+    opacity: 1;
   }
+}
 
   // .uppy-StatusBar-actionCircleBtn:not(:last-child) {
   //   margin-right: 2px;
@@ -235,9 +216,8 @@
   display: inline-block;
   vertical-align: middle;
   font-size: 10px;
-  // margin-left: 6px;
-  // margin-right: 6px;
-  color: $color-cornflower-blue;
+  line-height: inherit;
+  color: $blue;
 
   .uppy-size--md & {
     font-size: 11px;
@@ -248,31 +228,49 @@
   //   padding: 2px 4px;
   // }
 
+  .uppy-StatusBar-actionBtn--retry {
+    height: 16px;
+    border-radius: 8px;
+    margin-right: 6px;
+    background-color: $pomegranate;
+    line-height: 1;
+    color: #fff;
+    padding: 1px 6px 3px 18px;
+    position: relative;
+
+    &:hover {
+      background-color: darken($pomegranate, 8%);
+    }
+
+    svg {
+      position: absolute;
+      top: 3px;
+      left: 6px;
+    }
+  }
+
   .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {
     font-size: 14px;
     width: 100%;
     padding: 15px 10px;
-    color: $color-white;
-    background-color: $color-green;
+    color: $white;
+    background-color: $green;
+    line-height: 1;
   }
 
     .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 {
-      padding: 16px 22px;
+      padding: 13px 22px;
       width: auto;
     }
 
-  .uppy-StatusBar-actionBtn:not(:last-child) {
-    margin-right: 10px;
-  }
-
   .uppy-StatusBar:not(.is-waiting) .uppy-StatusBar-actionBtn--upload {
     background-color: transparent;
-    // border: 1px solid $color-white;
-    color: $color-cornflower-blue;
+    // border: 1px solid $white;
+    color: $blue;
   }
 
 .uppy-StatusBar-details {
@@ -281,13 +279,14 @@
   height: 13px;
   display: inline-block;
   vertical-align: middle;
-  color: $color-white;
-  background-color: $color-asphalt-gray;
+  color: $white;
+  background-color: $gray-500;
   border-radius: 50%;
   position: relative;
   top: 0;
   left: 2px;
   font-size: 10px;
+  font-weight: 600;
   text-align: center;
   cursor: help;
 }
@@ -303,12 +302,12 @@
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   margin-right: 10px;
-  fill: $color-cornflower-blue;
+  fill: $blue;
 }
 
   .uppy-StatusBar.is-preprocessing .uppy-StatusBar-spinner,
   .uppy-StatusBar.is-postprocessing .uppy-StatusBar-spinner {
-    fill: $color-orange;
+    fill: $orange;
   }
 
 

packages/@uppy/url/src/index.js

@@ -15,7 +15,7 @@ module.exports = class Url extends Plugin {
     this.id = this.opts.id || 'Url'
     this.title = this.opts.title || 'Link'
     this.type = 'acquirer'
-    this.icon = () => <svg aria-hidden="true" width="23" height="23" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg">
+    this.icon = () => <svg aria-hidden="true" width="23" height="23" viewBox="0 0 23 23">
       <path d="M20.485 11.236l-2.748 2.737c-.184.182-.367.365-.642.547-1.007.73-2.107 1.095-3.298 1.095-1.65 0-3.298-.73-4.398-2.19-.275-.365-.183-1.003.183-1.277.367-.273 1.008-.182 1.283.183 1.191 1.642 3.482 1.915 5.13.73a.714.714 0 0 0 .367-.365l2.75-2.737c1.373-1.46 1.373-3.74-.093-5.108a3.72 3.72 0 0 0-5.13 0L12.33 6.4a.888.888 0 0 1-1.283 0 .88.88 0 0 1 0-1.277l1.558-1.55a5.38 5.38 0 0 1 7.605 0c2.29 2.006 2.382 5.564.274 7.662zm-8.979 6.294L9.95 19.081a3.72 3.72 0 0 1-5.13 0c-1.467-1.368-1.467-3.74-.093-5.108l2.75-2.737.366-.365c.824-.547 1.74-.82 2.748-.73 1.008.183 1.833.639 2.382 1.46.275.365.917.456 1.283.182.367-.273.458-.912.183-1.277-.916-1.186-2.199-1.915-3.573-2.098-1.374-.273-2.84.091-4.031 1.004l-.55.547-2.749 2.737c-2.107 2.189-2.015 5.655.092 7.753C4.727 21.453 6.101 22 7.475 22c1.374 0 2.749-.547 3.848-1.55l1.558-1.551a.88.88 0 0 0 0-1.278c-.367-.364-1.008-.456-1.375-.09z" fill="#FF814F" fill-rule="nonzero" />
     </svg>
 

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

@@ -18,7 +18,7 @@
 }
 
   .uppy-size--md .uppy-Url-input  {
-    margin-bottom: 30px;
+    margin-bottom: 20px;
   }
 
 .uppy-Url-importButton {
@@ -26,5 +26,5 @@
 }
 
   .uppy-size--md .uppy-Url-importButton {
-    padding: 13px 35px;
+    padding: 13px 30px;
   }

packages/@uppy/webcam/src/CameraIcon.js

@@ -1,7 +1,7 @@
 const { h } = require('preact')
 
 module.exports = (props) => {
-  return <svg aria-hidden="true" fill="#0097DC" width="66" height="55" viewBox="0 0 66 55" xmlns="http://www.w3.org/2000/svg">
+  return <svg aria-hidden="true" fill="#0097DC" width="66" height="55" viewBox="0 0 66 55">
     <path d="M57.3 8.433c4.59 0 8.1 3.51 8.1 8.1v29.7c0 4.59-3.51 8.1-8.1 8.1H8.7c-4.59 0-8.1-3.51-8.1-8.1v-29.7c0-4.59 3.51-8.1 8.1-8.1h9.45l4.59-7.02c.54-.54 1.35-1.08 2.16-1.08h16.2c.81 0 1.62.54 2.16 1.08l4.59 7.02h9.45zM33 14.64c-8.62 0-15.393 6.773-15.393 15.393 0 8.62 6.773 15.393 15.393 15.393 8.62 0 15.393-6.773 15.393-15.393 0-8.62-6.773-15.393-15.393-15.393zM33 40c-5.648 0-9.966-4.319-9.966-9.967 0-5.647 4.318-9.966 9.966-9.966s9.966 4.319 9.966 9.966C42.966 35.681 38.648 40 33 40z" fill-rule="evenodd" />
   </svg>
 }

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

@@ -15,7 +15,7 @@
   flex: 1;
   flex-grow: 1;
   overflow: hidden;
-  background-color: $color-black;
+  background-color: $gray-800;
   text-align: center;
   position: relative;
 }
@@ -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;
@@ -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, 10%);
+    background-color: darken($red, 5%);
   }
 
   .uppy-Webcam-button:focus {
     outline: none;
-    box-shadow: 0 0 0 0.2rem rgba($color-cornflower-blue, 0.5);
+    box-shadow: 0 0 0 0.2rem rgba($blue, 0.5);
   }
 
 .uppy-Webcam-button--picture {
@@ -110,23 +110,23 @@
   line-height: 1.35;
   font-weight: 400;
   margin: 0;
-  margin-bottom: 15px;
+  margin-bottom: 5px;
   padding: 0 15px;
   max-width: 500px;
   text-align: center;
-  color: $color-black;
+  color: $gray-800;
 }
 
 .uppy-Webcam-permissons p {
   text-align: center;
   line-height: 1.45;
-  color: $color-gray;
+  color: $gray-500;
   margin: 0;
 }
 
 .uppy-Webcam-permissonsIcon svg {
   width: 100px;
   height: 75px;
-  color: lighten($color-gray, 15%);
+  color: $gray-400;
   margin-bottom: 30px;
 }