merged master in

CHANGELOG.md

@@ -19,11 +19,9 @@ last Friday of every new month.
 Ideas that will be planned and find their way into a release at one point.
 PRs are welcome! Please do open an issue to discuss first if it's a big feature, priorities may have changed after something was added here.
 
-- [ ] core: Decouple rendering from the Plugin base class?
 - [ ] core: Make sure Uppy works well in VR
 - [ ] test: Human should check http://www.webpagetest.org and https://developers.google.com/web/tools/lighthouse/, use it sometimes to test website and Uppy. Will show response/loading times and other issues
 - [ ] test: Human should test with real screen reader to identify accessibility problems
-- [ ] test: setup an HTML page with all sorts of crazy styles, resets & bootstrap to see what brakes Uppy (@arturi)
 - [ ] dependencies: es6-promise --> lie https://github.com/calvinmetcalf/lie ?
 - [ ] core: accessibility research: https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb, http://khan.github.io/tota11y/
 - [ ] core: consider adding presets, see https://github.com/cssinjs/jss-preset-default/blob/master/src/index.js (@arturi)
@@ -89,6 +87,11 @@ PRs are welcome! Please do open an issue to discuss first if it's a big feature,
 - [ ] dragdrop: allow customizing arrow icon https://github.com/transloadit/uppy/pull/374#issuecomment-334116208 (@arturi)
 - [ ] show thumbnails when connecting with Google Drive #1162 (@ifedapoolarewaju)
 
+## 1.1
+
+- [ ] dashboard: optional alert `onbeforeunload` while upload is in progress, safeguarding from accidentaly navigating away from a page with an ongoing upload
+- [ ] dashboard: Bring back "Drop Here" screen for dragged URLs without introducing flickering (tricky! see PR #1400)
+
 ## 1.0 Goals
 
 What we need to do to release Uppy 1.0
@@ -106,8 +109,7 @@ What we need to do to release Uppy 1.0
 - [ ] website: design polish
 - [ ] companion: rename `serverUrl` and `serverPattern` to `companionUrl` and `companionAllowedHosts` (@ifedapoolarewaju)
 - [ ] transloadit: add error reporting, see https://github.com/transloadit/jquery-sdk/blob/891e99b08dd8142d8d8adc0553e6511967635ad7/js/lib/Modal.js#L122-L136 (@goto-bus-stop, @arturi)
-- [ ] transloadit: should adhere cancel event and abort assembly (@arturi, @goto-bus-stop)
-- [ ] dashboard: optional alert `onbeforeunload` while upload is in progress, safeguarding from accidentaly navigating away from a page with an ongoing upload
+- [ ] transloadit: should adhere cancel event and abort assembly (@goto-bus-stop)
 - [x] chore: remove the not-working npm scripts (@kvz, @arturi)
 - [x] build: (BREAKING) `npm run dev` no longer starts Companion by default, use `npm run dev:with-companion` for that (@arturi)
 - [x] core: uppy should not crash or be slow for many files. Specifically: be able to drop 5 files (or 7mb) without the upload button to take 2 seconds to appear

package-lock.json

@@ -2126,7 +2126,7 @@
 		},
 		"acorn-jsx": {
 			"version": "3.0.1",
-			"resolved": "http://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
+			"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
 			"integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=",
 			"dev": true,
 			"requires": {
@@ -2135,7 +2135,7 @@
 			"dependencies": {
 				"acorn": {
 					"version": "3.3.0",
-					"resolved": "http://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
+					"resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
 					"integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
 					"dev": true
 				}
@@ -2890,7 +2890,7 @@
 				},
 				"chalk": {
 					"version": "1.1.3",
-					"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+					"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
 					"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
 					"dev": true,
 					"requires": {
@@ -3362,7 +3362,7 @@
 		},
 		"babel-plugin-istanbul": {
 			"version": "4.1.6",
-			"resolved": "http://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
+			"resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
 			"integrity": "sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==",
 			"dev": true,
 			"requires": {
@@ -3391,25 +3391,25 @@
 		},
 		"babel-plugin-syntax-async-functions": {
 			"version": "6.13.0",
-			"resolved": "http://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
+			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
 			"integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=",
 			"dev": true
 		},
 		"babel-plugin-syntax-exponentiation-operator": {
 			"version": "6.13.0",
-			"resolved": "http://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz",
+			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz",
 			"integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=",
 			"dev": true
 		},
 		"babel-plugin-syntax-jsx": {
 			"version": "6.18.0",
-			"resolved": "http://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
 			"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
 			"dev": true
 		},
 		"babel-plugin-syntax-object-rest-spread": {
 			"version": "6.13.0",
-			"resolved": "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
 			"integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
 			"dev": true
 		},
@@ -8495,7 +8495,7 @@
 				},
 				"chalk": {
 					"version": "1.1.3",
-					"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+					"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
 					"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
 					"dev": true,
 					"requires": {
@@ -8667,7 +8667,7 @@
 				},
 				"eslint": {
 					"version": "4.19.1",
-					"resolved": "http://registry.npmjs.org/eslint/-/eslint-4.19.1.tgz",
+					"resolved": "https://registry.npmjs.org/eslint/-/eslint-4.19.1.tgz",
 					"integrity": "sha512-bT3/1x1EbZB7phzYu7vCr1v3ONuzDtX8WjuM9c0iYxe+cq+pwcKEoQjl7zd3RpC6YOLgnSy3cTN58M2jcoPDIQ==",
 					"dev": true,
 					"requires": {
@@ -9106,7 +9106,7 @@
 			"dependencies": {
 				"semver": {
 					"version": "5.3.0",
-					"resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+					"resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
 					"integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
 					"dev": true
 				}
@@ -12157,7 +12157,7 @@
 		},
 		"inquirer": {
 			"version": "0.12.0",
-			"resolved": "http://registry.npmjs.org/inquirer/-/inquirer-0.12.0.tgz",
+			"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-0.12.0.tgz",
 			"integrity": "sha1-HvK/1jUE3wvHV4X/+MLEHfEvB34=",
 			"dev": true,
 			"requires": {
@@ -12184,7 +12184,7 @@
 				},
 				"chalk": {
 					"version": "1.1.3",
-					"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+					"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
 					"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
 					"dev": true,
 					"requires": {
@@ -12964,7 +12964,7 @@
 				},
 				"yargs": {
 					"version": "11.1.0",
-					"resolved": "http://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
+					"resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
 					"integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==",
 					"dev": true,
 					"requires": {
@@ -13078,7 +13078,7 @@
 		},
 		"jest-get-type": {
 			"version": "22.4.3",
-			"resolved": "http://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
+			"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
 			"integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==",
 			"dev": true
 		},
@@ -13316,7 +13316,7 @@
 				},
 				"yargs": {
 					"version": "11.1.0",
-					"resolved": "http://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
+					"resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
 					"integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==",
 					"dev": true,
 					"requires": {
@@ -13720,7 +13720,7 @@
 		},
 		"json5": {
 			"version": "0.5.1",
-			"resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+			"resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
 			"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
 			"dev": true
 		},
@@ -20408,7 +20408,7 @@
 		},
 		"progress": {
 			"version": "1.1.8",
-			"resolved": "http://registry.npmjs.org/progress/-/progress-1.1.8.tgz",
+			"resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz",
 			"integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=",
 			"dev": true
 		},
@@ -20470,6 +20470,15 @@
 			"integrity": "sha1-AMLa7t2iDofjeCs0Stuhzd1q1wk=",
 			"dev": true
 		},
+		"proper-lockfile": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-2.0.1.tgz",
+			"integrity": "sha1-FZ+wYZPTIAP0s2kd0uwaY0qoDR0=",
+			"requires": {
+				"graceful-fs": "^4.1.2",
+				"retry": "^0.10.0"
+			}
+		},
 		"proto-list": {
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -21136,7 +21145,7 @@
 		},
 		"regexpp": {
 			"version": "1.1.0",
-			"resolved": "http://registry.npmjs.org/regexpp/-/regexpp-1.1.0.tgz",
+			"resolved": "https://registry.npmjs.org/regexpp/-/regexpp-1.1.0.tgz",
 			"integrity": "sha512-LOPw8FpgdQF9etWMaAfG/WRthIdXJGYp4mJ2Jgn/2lpkbod9jPn0t9UqN7AxBOKNfzRbYyVfgc7Vk4t/MpnXgw==",
 			"dev": true
 		},
@@ -21170,7 +21179,7 @@
 		},
 		"regjsgen": {
 			"version": "0.2.0",
-			"resolved": "http://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
+			"resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
 			"integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=",
 			"dev": true
 		},
@@ -21564,8 +21573,7 @@
 		"retry": {
 			"version": "0.10.1",
 			"resolved": "https://registry.npmjs.org/retry/-/retry-0.10.1.tgz",
-			"integrity": "sha1-52OI0heZLCUnUCQdPTlW/tmNj/Q=",
-			"dev": true
+			"integrity": "sha1-52OI0heZLCUnUCQdPTlW/tmNj/Q="
 		},
 		"rgb2hex": {
 			"version": "0.1.9",
@@ -23153,7 +23161,7 @@
 			"dependencies": {
 				"minimist": {
 					"version": "1.2.0",
-					"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+					"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
 					"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
 					"dev": true
 				}
@@ -23296,7 +23304,7 @@
 		},
 		"table": {
 			"version": "3.8.3",
-			"resolved": "http://registry.npmjs.org/table/-/table-3.8.3.tgz",
+			"resolved": "https://registry.npmjs.org/table/-/table-3.8.3.tgz",
 			"integrity": "sha1-K7xULw/amGGnVdOUf+/Ys/UThV8=",
 			"dev": true,
 			"requires": {
@@ -23322,7 +23330,7 @@
 				},
 				"chalk": {
 					"version": "1.1.3",
-					"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+					"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
 					"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
 					"dev": true,
 					"requires": {
@@ -23897,14 +23905,14 @@
 			}
 		},
 		"tus-js-client": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/tus-js-client/-/tus-js-client-1.6.0.tgz",
-			"integrity": "sha512-8y3A/pq5SKHZPJPU2LZ0KC+TNaol7TDNplprS5PEsfnjOcqHU2pJ7E6oTEXsA32tZkWHs+4JguAfXZd4XV0Jlg==",
+			"version": "github:ifedapoolarewaju/tus-js-client#d63fcf08ee43080a0e1cc968ad5986ace788c2d4",
+			"from": "github:ifedapoolarewaju/tus-js-client#d63fcf08ee43080a0e1cc968ad5986ace788c2d4",
 			"requires": {
 				"buffer-from": "^0.1.1",
 				"extend": "^3.0.0",
 				"js-base64": "^2.4.9",
 				"lodash.throttle": "^4.1.1",
+				"proper-lockfile": "^2.0.1",
 				"url-parse": "^1.4.3"
 			},
 			"dependencies": {
@@ -24333,9 +24341,9 @@
 			}
 		},
 		"url-parse": {
-			"version": "1.4.4",
-			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.4.tgz",
-			"integrity": "sha512-/92DTTorg4JjktLNLe6GPS2/RvAd/RGr6LuktmWSMLEOa6rjnlrFXNgSbSmkNvCoL2T028A0a1JaJLzRMlFoHg==",
+			"version": "1.4.6",
+			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.6.tgz",
+			"integrity": "sha512-/B8AD9iQ01seoXmXf9z/MjLZQIdOoYl/+gvsQF6+mpnxaTfG9P7srYaiqaDMyKkR36XMXfhqSHss5MyFAO8lew==",
 			"requires": {
 				"querystringify": "^2.0.0",
 				"requires-port": "^1.0.0"

packages/@uppy/companion/package.json

@@ -55,7 +55,7 @@
     "redis": "2.8.0",
     "request": "2.85.0",
     "serialize-error": "^2.1.0",
-    "tus-js-client": "github:ifedapoolarewaju/tus-js-client#888bcf73b66698a165f086f7bbe61951597f5c1b",
+    "tus-js-client": "github:ifedapoolarewaju/tus-js-client#d63fcf08ee43080a0e1cc968ad5986ace788c2d4",
     "uuid": "2.0.2",
     "validator": "^9.0.0",
     "ws": "1.1.5"

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/core/src/index.js

@@ -454,6 +454,7 @@ class Uppy {
     try {
       this._checkRestrictions(newFile)
     } catch (err) {
+      this.emit('restriction-failed', newFile, err)
       onError(err)
     }
 

packages/@uppy/core/src/index.test.js

@@ -1,5 +1,6 @@
 const fs = require('fs')
 const path = require('path')
+const prettyBytes = require('prettier-bytes')
 const Core = require('./index')
 const Plugin = require('./Plugin')
 const AcquirerPlugin1 = require('../../../../test/mocks/acquirerPlugin1')
@@ -1270,6 +1271,29 @@ describe('src/Core', () => {
         expect(core.getState().info.message).toEqual('This file exceeds maximum allowed size of 1.2 KB')
       }
     })
+
+    it('should emit `restriction-failed` event when some rule is violated', () => {
+      const maxFileSize = 100
+      const core = new Core({
+        restrictions: {
+          maxFileSize
+        }
+      })
+      const restrictionsViolatedEventMock = jest.fn()
+      const file = {
+        name: 'test.jpg',
+        data: new Blob([Buffer.alloc(2 * maxFileSize)])
+      }
+      const errorMessage = `${core.i18n('exceedsSize')} ${prettyBytes(maxFileSize)}`
+      try {
+        core.on('restriction-failed', restrictionsViolatedEventMock)
+        core.addFile(file)
+      } catch (err) {}
+
+      expect(restrictionsViolatedEventMock.mock.calls.length).toEqual(1)
+      expect(restrictionsViolatedEventMock.mock.calls[0][0].name).toEqual(file.name)
+      expect(restrictionsViolatedEventMock.mock.calls[0][1].message).toEqual(errorMessage)
+    })
   })
 
   describe('actions', () => {

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" />
@@ -54,19 +54,19 @@ function checkIcon () {
 
 function iconAudio () {
   return <svg aria-hidden="true" class="UppyIcon" width="55" height="55" viewBox="0 0 55 55">
-    <path d="M52.66.25c-.216-.19-.5-.276-.79-.242l-31 4.01a1 1 0 0 0-.87.992V40.622C18.174 38.428 15.273 37 12 37c-5.514 0-10 4.037-10 9s4.486 9 10 9 10-4.037 10-9c0-.232-.02-.46-.04-.687.014-.065.04-.124.04-.192V16.12l29-3.753v18.257C49.174 28.428 46.273 27 43 27c-5.514 0-10 4.037-10 9s4.486 9 10 9c5.464 0 9.913-3.966 9.993-8.867 0-.013.007-.024.007-.037V1a.998.998 0 0 0-.34-.75zM12 53c-4.41 0-8-3.14-8-7s3.59-7 8-7 8 3.14 8 7-3.59 7-8 7zm31-10c-4.41 0-8-3.14-8-7s3.59-7 8-7 8 3.14 8 7-3.59 7-8 7zM22 14.1V5.89l29-3.753v8.21l-29 3.754z" />
+    <path fill="#1abc9c" d="M52.66.25c-.216-.19-.5-.276-.79-.242l-31 4.01a1 1 0 0 0-.87.992V40.622C18.174 38.428 15.273 37 12 37c-5.514 0-10 4.037-10 9s4.486 9 10 9 10-4.037 10-9c0-.232-.02-.46-.04-.687.014-.065.04-.124.04-.192V16.12l29-3.753v18.257C49.174 28.428 46.273 27 43 27c-5.514 0-10 4.037-10 9s4.486 9 10 9c5.464 0 9.913-3.966 9.993-8.867 0-.013.007-.024.007-.037V1a.998.998 0 0 0-.34-.75zM12 53c-4.41 0-8-3.14-8-7s3.59-7 8-7 8 3.14 8 7-3.59 7-8 7zm31-10c-4.41 0-8-3.14-8-7s3.59-7 8-7 8 3.14 8 7-3.59 7-8 7zM22 14.1V5.89l29-3.753v8.21l-29 3.754z" />
   </svg>
 }
 
 function iconVideo () {
   return <svg aria-hidden="true" class="UppyIcon" viewBox="0 0 58 58">
-    <path d="M36.537 28.156l-11-7a1.005 1.005 0 0 0-1.02-.033C24.2 21.3 24 21.635 24 22v14a1 1 0 0 0 1.537.844l11-7a1.002 1.002 0 0 0 0-1.688zM26 34.18V23.82L34.137 29 26 34.18z" /><path d="M57 6H1a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h56a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zM10 28H2v-9h8v9zm-8 2h8v9H2v-9zm10 10V8h34v42H12V40zm44-12h-8v-9h8v9zm-8 2h8v9h-8v-9zm8-22v9h-8V8h8zM2 8h8v9H2V8zm0 42v-9h8v9H2zm54 0h-8v-9h8v9z" />
+    <path fill="#2980b9" d="M36.537 28.156l-11-7a1.005 1.005 0 0 0-1.02-.033C24.2 21.3 24 21.635 24 22v14a1 1 0 0 0 1.537.844l11-7a1.002 1.002 0 0 0 0-1.688zM26 34.18V23.82L34.137 29 26 34.18z" /><path d="M57 6H1a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h56a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zM10 28H2v-9h8v9zm-8 2h8v9H2v-9zm10 10V8h34v42H12V40zm44-12h-8v-9h8v9zm-8 2h8v9h-8v-9zm8-22v9h-8V8h8zM2 8h8v9H2V8zm0 42v-9h8v9H2zm54 0h-8v-9h8v9z" />
   </svg>
 }
 
 function iconPDF () {
   return <svg aria-hidden="true" class="UppyIcon" viewBox="0 0 342 335">
-    <path d="M329.337 227.84c-2.1 1.3-8.1 2.1-11.9 2.1-12.4 0-27.6-5.7-49.1-14.9 8.3-.6 15.8-.9 22.6-.9 12.4 0 16 0 28.2 3.1 12.1 3 12.2 9.3 10.2 10.6zm-215.1 1.9c4.8-8.4 9.7-17.3 14.7-26.8 12.2-23.1 20-41.3 25.7-56.2 11.5 20.9 25.8 38.6 42.5 52.8 2.1 1.8 4.3 3.5 6.7 5.3-34.1 6.8-63.6 15-89.6 24.9zm39.8-218.9c6.8 0 10.7 17.06 11 33.16.3 16-3.4 27.2-8.1 35.6-3.9-12.4-5.7-31.8-5.7-44.5 0 0-.3-24.26 2.8-24.26zm-133.4 307.2c3.9-10.5 19.1-31.3 41.6-49.8 1.4-1.1 4.9-4.4 8.1-7.4-23.5 37.6-39.3 52.5-49.7 57.2zm315.2-112.3c-6.8-6.7-22-10.2-45-10.5-15.6-.2-34.3 1.2-54.1 3.9-8.8-5.1-17.9-10.6-25.1-17.3-19.2-18-35.2-42.9-45.2-70.3.6-2.6 1.2-4.8 1.7-7.1 0 0 10.8-61.5 7.9-82.3-.4-2.9-.6-3.7-1.4-5.9l-.9-2.5c-2.9-6.76-8.7-13.96-17.8-13.57l-5.3-.17h-.1c-10.1 0-18.4 5.17-20.5 12.84-6.6 24.3.2 60.5 12.5 107.4l-3.2 7.7c-8.8 21.4-19.8 43-29.5 62l-1.3 2.5c-10.2 20-19.5 37-27.9 51.4l-8.7 4.6c-.6.4-15.5 8.2-19 10.3-29.6 17.7-49.28 37.8-52.54 53.8-1.04 5-.26 11.5 5.01 14.6l8.4 4.2c3.63 1.8 7.53 2.7 11.43 2.7 21.1 0 45.6-26.2 79.3-85.1 39-12.7 83.4-23.3 122.3-29.1 29.6 16.7 66 28.3 89 28.3 4.1 0 7.6-.4 10.5-1.2 4.4-1.1 8.1-3.6 10.4-7.1 4.4-6.7 5.4-15.9 4.1-25.4-.3-2.8-2.6-6.3-5-8.7z" />
+    <path fill="#e74c3c" d="M329.337 227.84c-2.1 1.3-8.1 2.1-11.9 2.1-12.4 0-27.6-5.7-49.1-14.9 8.3-.6 15.8-.9 22.6-.9 12.4 0 16 0 28.2 3.1 12.1 3 12.2 9.3 10.2 10.6zm-215.1 1.9c4.8-8.4 9.7-17.3 14.7-26.8 12.2-23.1 20-41.3 25.7-56.2 11.5 20.9 25.8 38.6 42.5 52.8 2.1 1.8 4.3 3.5 6.7 5.3-34.1 6.8-63.6 15-89.6 24.9zm39.8-218.9c6.8 0 10.7 17.06 11 33.16.3 16-3.4 27.2-8.1 35.6-3.9-12.4-5.7-31.8-5.7-44.5 0 0-.3-24.26 2.8-24.26zm-133.4 307.2c3.9-10.5 19.1-31.3 41.6-49.8 1.4-1.1 4.9-4.4 8.1-7.4-23.5 37.6-39.3 52.5-49.7 57.2zm315.2-112.3c-6.8-6.7-22-10.2-45-10.5-15.6-.2-34.3 1.2-54.1 3.9-8.8-5.1-17.9-10.6-25.1-17.3-19.2-18-35.2-42.9-45.2-70.3.6-2.6 1.2-4.8 1.7-7.1 0 0 10.8-61.5 7.9-82.3-.4-2.9-.6-3.7-1.4-5.9l-.9-2.5c-2.9-6.76-8.7-13.96-17.8-13.57l-5.3-.17h-.1c-10.1 0-18.4 5.17-20.5 12.84-6.6 24.3.2 60.5 12.5 107.4l-3.2 7.7c-8.8 21.4-19.8 43-29.5 62l-1.3 2.5c-10.2 20-19.5 37-27.9 51.4l-8.7 4.6c-.6.4-15.5 8.2-19 10.3-29.6 17.7-49.28 37.8-52.54 53.8-1.04 5-.26 11.5 5.01 14.6l8.4 4.2c3.63 1.8 7.53 2.7 11.43 2.7 21.1 0 45.6-26.2 79.3-85.1 39-12.7 83.4-23.3 122.3-29.1 29.6 16.7 66 28.3 89 28.3 4.1 0 7.6-.4 10.5-1.2 4.4-1.1 8.1-3.6 10.4-7.1 4.4-6.7 5.4-15.9 4.1-25.4-.3-2.8-2.6-6.3-5-8.7z" />
   </svg>
 }
 
@@ -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 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="#000" />
+  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;
@@ -375,9 +380,8 @@
   height: 40px;
   width: 100%;
   border-bottom: 1px solid #eaeaea;
-
   z-index: $zIndex-4;
-  background-color: $color-almost-white;
+  background-color: $gray-50;
   padding: 0 10px;
 
   .uppy-size--md & {
@@ -394,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;
@@ -410,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%)
   }
 }
 
@@ -446,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;
@@ -461,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;
@@ -494,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;
@@ -557,7 +570,7 @@
   bottom: 3px;
   left: 3px;
   padding-top: 90px;
-  border: 2px dashed $color-cornflower-blue;
+  border: 2px dashed rgb(34, 117, 215);
   border-radius: 4px;
   z-index: 2000;
   text-align: center;
@@ -588,7 +601,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;
@@ -600,10 +613,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;
@@ -619,13 +632,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;
@@ -641,7 +654,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;
 
@@ -706,10 +719,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,
@@ -717,9 +728,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 {
@@ -731,11 +744,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);
   }
 }
 
@@ -746,7 +759,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;
   }
@@ -768,7 +781,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 {
@@ -794,7 +807,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;
 }
@@ -808,18 +821,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;
@@ -833,15 +845,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;
 }
 
@@ -858,8 +870,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),
@@ -874,8 +890,7 @@ a.uppy-Dashboard-poweredBy {
     position: absolute;
     top: 0;
     left: -9px;
-    color: $color-gray;
-    font-weight: 700;
+    color: $gray-600;
   }
 }
 
@@ -894,10 +909,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;
@@ -916,7 +931,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;
@@ -943,7 +958,6 @@ a.uppy-Dashboard-poweredBy {
   width: 38px;
   height: 38px;
   opacity: 0.9;
-  transition: all .35s ease;
 
   .uppy-size--md & {
     width: 55px;
@@ -971,8 +985,8 @@ a.uppy-Dashboard-poweredBy {
     opacity: 1;
 
     .uppy-size--md & {
-      width: 25px;
-      height: 25px;
+      width: 22px;
+      height: 22px;
     }
   }
 
@@ -986,7 +1000,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;
@@ -999,40 +1013,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 {
@@ -1042,7 +1056,7 @@ a.uppy-Dashboard-poweredBy {
 
 .UppyIcon-progressCircle .check {
   opacity: 0;
-  fill: $color-white;
+  fill: $white;
   transition: all 0.2s;
 }
 
@@ -1081,8 +1095,8 @@ a.uppy-Dashboard-poweredBy {
   }
 
   .progress {
-    stroke: $color-green;
-    fill: $color-green;
+    stroke: $green;
+    fill: $green;
     opacity: 1;
   }
 
@@ -1098,7 +1112,7 @@ a.uppy-Dashboard-poweredBy {
 
 .uppy-DashboardItem-progressInner {
   height: 15px;
-  background-color: $color-cornflower-blue;
+  background-color: $blue;
   position: absolute;
   top: 0;
   left: 0;
@@ -1106,11 +1120,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 {
@@ -1147,8 +1161,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;
@@ -1178,8 +1192,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;
 }
@@ -1200,13 +1214,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;
@@ -1236,10 +1250,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 #eaeaea;
 }
 
 .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/tus/package.json

@@ -24,7 +24,7 @@
   "dependencies": {
     "@uppy/companion-client": "0.28.4",
     "@uppy/utils": "0.30.4",
-    "tus-js-client": "github:ifedapoolarewaju/tus-js-client#888bcf73b66698a165f086f7bbe61951597f5c1b"
+    "tus-js-client": "github:ifedapoolarewaju/tus-js-client#d63fcf08ee43080a0e1cc968ad5986ace788c2d4"
   },
   "devDependencies": {
     "@uppy/core": "0.30.4"

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;
 }

website/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "hexo": {
-    "version": "3.7.1"
+    "version": "3.8.0"
   },
   "dependencies": {
     "autoprefixer": "^7.2.6",
@@ -44,4 +44,4 @@
     "node-notifier": "^5.2.1",
     "watchify": "^3.11.0"
   }
-}
+}

website/src/_posts/2019-04-liftoff-14.md

@@ -39,4 +39,4 @@ While there are still things to be implemented, such as picking files from Insta
 
 - The whole team will again do a call this afternoon to reassess our roadmap and see where all we stand. Some new tasks were added on [Friday](/blog/2019/04/liftoff-11/), so we'll also have to see about getting those into gear.
 
-That's it for Day 14. Tomorrow, it will be Samuel's turn again to update you on our board and progress. Subscribe via [Twitter](https://twitter.com/uppy_io) or [RSS](https://uppy.io/atom.xml) and don't miss out on Day 15! :dog:
+That's it for Day 14. Tomorrow, it will be Samuel's turn again to update you on our board and progress. Subscribe via [Twitter](https://twitter.com/uppy_io) or [RSS](https://uppy.io/atom.xml) and don't miss out on [Day 15](/blog/2019/04/liftoff-15/)! :dog:

website/src/_posts/2019-04-liftoff-15.md

@@ -0,0 +1,45 @@
+---
+title: "Day 15"
+date: 2019-04-09
+author: samuel
+image: "https://uppy.io/images/blog/30daystoliftoff/rockdog.jpg"
+series: 30 Days to Liftoff
+seriesSuffix: 'of 30'
+---
+
+:musical_note: Woah, we're halfway there! Take our paw, we'll make it we swear! :notes: That's fifteen down and fifteen more to go. Great to have you along for the ride as we move ever closer towards **launching Uppy 1.0 on April 25**. 
+
+Let's see what is Uppy today!
+
+<center><br /><img width="400" src="/images/blog/30daystoliftoff/rockdog.jpg"><br /></center>
+
+<!--more-->
+
+## Weekly project board update
+
+We had our weekly call yesterday, during which we re-evaluated the Uppy 1.0 project board. We were able to move a few tasks to the _Done_ lane and got some new tasks _In Progress_. One of the features we're ready to start working on - which I am particularly interested in - is language pack support. Uppy 1.0 might be coming out in your local language! While we only have the capacity within our team to take care of a select few languages (English, French, Russian, Ukrainian, German, and Dutch) we will support as many as possible and hope that the community will add many more. 
+
+Here is a view of what our Asana board looks like this week:
+
+<center><br /><img src="/images/blog/30daystoliftoff/2019-04-09-asana-board.png"><br /></center>
+
+
+## Done
+
+- [Evgenia](https://github.com/lakesare) investigated an [issue](https://github.com/transloadit/uppy/pull/1400#issuecomment-481039845) concerning a bug in Webkit browsers that resulted in the window blinking frequently.
+
+- [Samuel](https://github.com/samuelayo) added another [example](https://github.com/transloadit/uppy/pull/1389) for using Uppy with XHR uploads to a PHP backend.
+
+
+## In Progress
+
+- [Renée](https://github.com/goto-bus-stop) is working on the Robodog Dashboard, so that it can also be depicted right inside the webpage, instead of showing as a modal popup window.
+
+- Evgenia is focused on improving accessibility together with [Alex](https://github.com/nqst), who found many issues that we still need to fix in this area.
+
+- [Artur](https://github.com/arturi) is currently working on a React Native example UI. We will update you once it is ready! 
+
+- Alex is also still actively working on making design improvements for Uppy. You can follow his progress [here](https://github.com/nqst/uppy/commits/design-facelift).
+
+
+And that's Day 15! Tyler will be here again [tomorrow](/blog/2019/04/liftoff-16/) to give you more updates on our launch preparations. Subscribe via [Twitter](https://twitter.com/uppy_io) or [RSS](https://uppy.io/atom.xml), so you'll never miss out!

website/src/_posts/2019-04-liftoff-16.md

@@ -0,0 +1,39 @@
+---
+title: "Day 16"
+date: 2019-04-10
+author: tyler
+image: "https://uppy.io/images/blog/30daystoliftoff/day16.gif"
+series: 30 Days to Liftoff
+seriesSuffix: 'of 30'
+---
+
+Two weeks left in our '30 Days to Liftoff'! We're starting to home in on **Uppy 1.0's release on April 25**. Being in the middle of the week gives us a great opportunity to see how hard the team is working. Let's take a look at the new features, bug fixes and milestones that have been completed! :dog:
+
+<center><br /><img width="400" src="/images/blog/30daystoliftoff/day16.gif"><br /><br /></center>
+
+Reminder: you can keep up with our [CHANGELOG](https://github.com/transloadit/uppy/blob/master/CHANGELOG.md) to see everything else we intend to complete for the official Uppy 1.0 release.
+
+<!--more-->
+
+## Done
+
+- [Evgenia](https://github.com/lakesare) continues working on the [peculiar flickering issue](https://github.com/transloadit/uppy/pull/1400#issuecomment-481039845) in our Dashboard example. While it was tricky at first, a (temporary) hotfix has now been applied. A more in-depth update is coming after 1.0 :smile:
+
+- The [first contribution](https://github.com/transloadit/uppy/pull/1436) in our sprint coming from outside the Uppy team was added by [Zeqiu](https://github.com/allenfantasy). It concerns events being fired when an uploaded file fails a restriction check. With this feature, it will be a lot easier to know which file has been restricted from upload and why. 
+
+- And the [second outside contribution](https://github.com/transloadit/uppy/pull/1429) comes from [Andreas](https://github.com/ap--), who fixed an issue involving the use of both tus and the limit parameter to set a maximum number of parallel uploads. 
+
+Big shout out to both!
+
+## In Progress
+
+- The React Native team has their pairing session at 14:00 today, during which they will work on [React Native support](https://github.com/transloadit/uppy/pull/988) for Uppy, [tus-js-client](https://github.com/tus/tus-js-client) and [Companion](https://github.com/transloadit/uppy/tree/master/packages/@uppy/companion).
+    - [Artur](https://github.com/arturi) will be working on tweaking the React Native UI and dealing with file preview icons for non-image files. He has also been working on refactoring some of the code to make things much tidier.
+    - [Ife](https://github.com/ifedapoolarewaju) will be integrating fingerprinting and hash code support [into tus-js-client](https://github.com/tus/tus-js-client/pull/73).
+    - If the team has the time, they will also look into large file support, upload and download reporting for Companion XHR uploads, and an issue concerning XHR uploads with the [Transloadit API](https://transloadit.com/docs/api/).
+
+- [Alex](https://github.com/nqst) continues [improving Uppy's UI](https://github.com/transloadit/uppy/compare/master...nqst:design-facelift) and has recently been refactoring CSS code, while Evgenia keeps charging at the [many accessibility issues](https://github.com/transloadit/uppy/issues/created_by/nqst) that are still open.
+
+In addition to getting Uppy 1.0 out of the dog house, I mentioned that the team is already talking about features and fixes to tackle after 1.0. If you look at our [CHANGELOG](https://github.com/transloadit/uppy/blob/master/CHANGELOG.md), you'll notice some 1.1 todos in there. There's always room for improvement, so now you have something to look forward to after Uppy 1.0 hits the web! :wink:
+
+That's all from me today. Stay in the loop with us on [Twitter](https://twitter.com/uppy_io) or [RSS](https://uppy.io/atom.xml) for more Uppy updates. [Day 17](/blog/2019/04/liftoff-17/)  is coming up next!

website/src/_posts/2019-04-liftoff-17.md

@@ -0,0 +1,43 @@
+---
+title: "Day 17"
+date: 2019-04-11
+author: samuel
+image: "https://uppy.io/images/blog/30daystoliftoff/day17.jpg"
+series: 30 Days to Liftoff
+seriesSuffix: 'of 30'
+---
+
+It's day 17 already of our '30 Days to Liftoff' blog post challenge and the **launch of Uppy 1.0 on April 25** is coming closer by the day. The Uppy team is dealing with the big tasks now, so the updates might seem a little scant!
+
+<center><br /><img width="400" src="/images/blog/30daystoliftoff/day17.jpg"><br /><br /></center>
+
+<!--more-->
+
+## Done
+
+- [Artur](https://github.com/arturi) updated the [React Native](https://github.com/transloadit/uppy/pull/988) UI example. This is what the new UI looks like:
+
+<center><img width="400" src="/images/blog/30daystoliftoff/2019-04-11-react-native-ui-1.png"></center>
+<center><img width="400" src="/images/blog/30daystoliftoff/2019-04-11-react-native-ui-2.png"></center>
+<center><img width="400" src="/images/blog/30daystoliftoff/2019-04-11-react-native-ui-3.png"></center>
+
+- [Alex](https://github.com/nqst) updated the focus styles on the Uppy Dashboard, making it look quite a bit sleeker than it did before. Here's a before and after view of the Dashboard focus styles:
+
+Before:<br />
+<center><img width="400" src="/images/blog/30daystoliftoff/2019-04-11-before-focus.gif"></center>
+After:<br />
+<center><img width="400" src="/images/blog/30daystoliftoff/2019-04-11-after-focus.gif"></center>
+
+
+## In Progress
+
+- Artur is reviewing PRs, reporting errors and testing Uppy in response to the team’s feedback. 
+
+- Alex continues [improving Uppy's UI](https://github.com/transloadit/uppy/compare/master...nqst:design-facelift) and has recently been refactoring CSS code, while [Evgenia](https://github.com/lakesare) keeps charging at the [many accessibility issues](https://github.com/transloadit/uppy/issues/created_by/nqst) that are still open.
+
+- Evgenia is also working on the new drag/drop implementation, which will include a new _Drop Here_ placeholder and not experience any flickering. And as if that weren't enough, she is having a go at `drop folder` support for cross-browser compatibility as well, so that it won’t be relying on DOM manipulation in our Preact components.
+
+- [Ife](https://github.com/ifedapoolarewaju) is updating this [PR](https://github.com/tus/tus-js-client/pull/73), which deals with supporting resumability for Node.js environments.
+
+
+That's all from us today. As I mentioned, we are now focusing on the big tasks and as a result, our daily list of updates might sometimes be a little shorter than usual. Remember to keep tabs on our [Twitter](https://twitter.com/uppy_io) or [RSS](https://uppy.io/atom.xml) for more Uppy updates. [Day 18](/blog/2019/04/liftoff-18/) is coming up next!

website/src/_posts/2019-04-liftoff-18.md

@@ -0,0 +1,28 @@
+---
+title: "Day 18"
+date: 2019-04-12
+author: kvz
+image: "https://uppy.io/images/blog/30daystoliftoff/day18.jpg"
+series: 30 Days to Liftoff
+seriesSuffix: 'of 30'
+---
+
+Hi! You're reading our '30 Days to Liftoff' blog post challenge about the **launch of Uppy 1.0 on April 25**. Here's what we've been up to since yesterday's progress update.  
+
+<center><br /><img width="400" src="/images/blog/30daystoliftoff/day18.jpg"><br /><br /></center>
+
+<!--more-->
+
+- [Ife](https://github.com/ifedapoolarewaju) addressed all of [Marius'](https://github.com/Acconut) feedback towards [having React-Native-compatible fingerprinting](https://github.com/tus/tus-js-client/pull/73) in tus-js-client.
+
+- [Artur](https://github.com/arturi) and [Alex](https://github.com/nqst) had a call where they discussed Alex’s design improvements, and Alex's [Design Facelift PR](https://github.com/transloadit/uppy/pull/1442) is now ready to be reviewed and merged :tada:
+
+- Artur iterated on [Samuel's](https://github.com/samuelayo) [XHR backend examples](https://github.com/transloadit/uppy/pull/1389).
+
+- Ife, Artur, Alex and Marius are chasing down an issue where appending form fields is [causing 423 responses from tusd](https://github.com/tus/tusd/issues/259). Marius already pushed out a number of fixes as a result and released a new version of tus-js-client (1.7.1).
+
+- Artur and [Kevin](https://github.com/tim-kos) paired up to create a new structure for [Locale Packs](https://github.com/transloadit/uppy/pull/1443). The `en_US` locale is now generated from whatever strings where used in Uppy's plugins, so other languages can use it as a reference. There will also be reporting on unused strings.
+
+- [Evgenia](https://github.com/lakesare) continues to charge at fixing Drag & Drop issues, and [Renée](https://github.com/goto-bus-stop) is working on making the Robodog Dashboard work inline (as well as a popup).
+
+Hope you'll have a great weekend and see you on Monday for another real update on the 1.0 launch preparations! We'll of course also have a few more light-hearted posts in the meantime for you, so be sure to check those out as well :slightly_smiling_face: Keep tabs on [@uppy_io](https://twitter.com/uppy_io) or [RSS](https://uppy.io/atom.xml) for more Uppy updates!

website/src/_posts/2019-04-liftoff-19.md

@@ -0,0 +1,16 @@
+---
+title: "Day 19"
+date: 2019-04-13
+author: aj
+image: "https://uppy.io/images/blog/30daystoliftoff/dogdj.jpg"
+series: 30 Days to Liftoff
+seriesSuffix: 'of 30'
+---
+
+Hey DJ, turn the music Uppy! We're taking a few well-deserved days off from chasing tasks and issues (and cats, of course) to get our feet up on the dance floor and enjoy a drink or two. We hope you are doing the same! Here's a record-breaking Wiener to get you in the mood:
+
+<!--more-->
+
+<center><img width="400" src="https://media.giphy.com/media/rdAeOA3mfXomQ/giphy.gif"><br/><br/></center>
+
+That means no news today or tomorrow, but you can expect us to be back at the 1.0 grindstone on Monday! Have an awesome Saturday! And see you tomorrow for another little tidbit in our 30 Days to Liftoff!

website/src/_posts/2019-04-liftoff-20.md

@@ -0,0 +1,17 @@
+---
+title: "Day 20"
+date: 2019-04-14
+author: aj
+image: "https://uppy.io/images/blog/30daystoliftoff/coffeedog.jpg"
+series: 30 Days to Liftoff
+seriesSuffix: 'of 30'
+---
+
+And on the seventh day, Uppy rested :angel: We, too, will be spending this day in quiet contemplation (and most certainly not by sleeping off yesterday's escapades). So if there isn't anything else you need us for, we'll be grabbing our blankets and heading back to bed:
+
+<!--more-->
+
+<center><img width="400"  src="https://media.giphy.com/media/xC5LOq3LMQmqs/giphy.gif"><br/><br/></center>
+
+Feel free to hit that snooze button a few more times yourself, before enjoying the remainder of your weekend. We'll see you back tomorrow on Day 21, when we'll have some more real news to share as we head into the final stretch of our 30 Days to Liftoff!
+

website/src/_posts/2019-04-liftoff-21.md

@@ -0,0 +1,34 @@
+---
+title: "Day 21"
+date: 2019-04-15
+author: tyler
+image: "https://uppy.io/images/blog/30daystoliftoff/day21.jpg"
+series: 30 Days to Liftoff
+seriesSuffix: 'of 30'
+---
+
+We're reaching the final stretch of our '30 Days to Liftoff' blog post challenge. After a refreshing weekend the entire team is ready to give it their all over the next 10 days to ensure that **Uppy 1.0 reaches its April 25** release date.
+
+<center><br /><img width="400" src="/images/blog/30daystoliftoff/day21.jpg"><br /><br /></center>
+
+Since we're starting the week strong and prepared let's take a quick glance at how our Uppy dashboard is looking.
+
+<!--more-->
+
+<center><img width="" src="/images/blog/30daystoliftoff/15-dashboard.png"><br/><br/></center>
+
+There still a few unique, and possibly daunting, tasks left for the remainder of the development cycle but the team is taking each issue in stride and adding features with ease.
+
+- [Ife](https://github.com/ifedapoolarewaju) [fixed a bug](https://github.com/transloadit/uppy/commit/9f02d749b9aa4095e5871713ea2f25a716a21539) on the React Native side of things to get rid of an error that was present on one of our Android examples. Additionally, he also made some name changes in a number of files - changing `serverUrl` to `companionUrl` and `serverPattern` to `companionAllowedHosts`.
+
+- [Artur](https://github.com/arturi) and [Kevin](https://github.com/kvz) will continue pairing on [language packs](https://github.com/transloadit/uppy/pull/1443) throughout today.
+
+- Ife is also still tackling the [large file size upload issue](https://github.com/tus/tus-js-client/issues/146) we're also having with React Native. He managed to find the source of the issue but Both Ife and [Marius](https://github.com/Acconut) will be investigating how best to move on to here.
+
+- [Renée](https://github.com/goto-bus-stop) continues working on making Robodog work with an inline dashboard. He plans to have a demo and documentation up and running sometime today.
+
+- The [drag and drop improvements](https://github.com/transloadit/uppy/pull/1440) being made by [Evgenia](https://github.com/lakesare) will also continue today, with some of her current improvements being the removal of the flickering issue and improving the background design while using the feature.
+
+- [Alex](https://github.com/nqst) [discovered an issue](https://github.com/transloadit/uppy/issues/1447) with the filter field when using Google Drive on the Dashboard.
+
+Our goal is in sight so we're starting to get pretty excited! Keep us in your thoughts by giving us a follow on [Twitter](https://twitter.com/uppy_io) or subscribing to regular updates on [RSS](https://uppy.io/atom.xml). Day 22 is up next so look forward to another lovely post from Kevin!

website/src/docs/contributing.md

@@ -1,8 +1,8 @@
 ---
 title: "Contributing"
 type: docs
-order: 5
-category: 'Docs'
+order: 0
+category: 'Contributing'
 ---
 
 <!-- md contributing.md -->

website/src/docs/plugin-common-options.md

@@ -0,0 +1,61 @@
+---
+title: "Common Plugin Options"
+type: docs
+permalink: docs/plugins/
+order: 4
+category: 'Docs'
+---
+
+Each plugin can have any number of options (please see specific plugins for details), but these are shared between some:
+
+### `id`
+
+A unique string identifying the plugin. By default, the plugin's name is used, so usually it does not need to be configured manually. Use this if you need to add multiple plugins of the same type.
+
+### `target`
+
+Can be a `string` CSS selector, a DOM element, or a Plugin class. Consider the following example, where `DragDrop` plugin will be rendered into a `body` element:
+
+```js
+const Uppy = require('@uppy/core')
+const DragDrop = require('@uppy/drag-drop')
+const uppy = Uppy()
+uppy.use(DragDrop, { target: 'body' })
+// or: uppy.use(DragDrop, { target: document.body })
+```
+
+While in this one, we are using the `@uppy/dashboard` plugin, which can act as a host target for other plugins:
+
+```js
+const Uppy = require('@uppy/core')
+const Dashboard = require('@uppy/dashboard')
+const GoogleDrive = require('@uppy/google-drive')
+const uppy = Uppy()
+uppy.use(Dashboard, {
+  trigger: '#uppyModalOpener'
+})
+uppy.use(GoogleDrive, {target: Dashboard})
+```
+
+In the example above, the `Dashboard` gets rendered into an element with ID `uppy`, while `GoogleDrive` is rendered into the `Dashboard` itself.
+
+### `locale: {}`
+
+Same as with Uppy.Core’s setting above, this allows you to override plugin’s locale string, so that instead of `Select files` in English, your users will see `Выберите файлы` in Russian. Example:
+
+```js
+.use(FileInput, {
+  target: 'body',
+  locale: {
+    strings: { selectToUpload: 'Выберите файл для загрузки' }
+  }
+})
+```
+
+See plugin documentation pages for other plugin-specific options.
+
+<!-- Keep this heading, it is here to avoid breaking existing URLs -->
+<!-- Previously the content that is now at /docs/providers was here -->
+## Provider Plugins
+
+See the [Provider Plugins](/docs/providers) documentation page for information on provider plugins.

website/src/docs/plugins.md

@@ -1,9 +1,9 @@
 ---
-title: "List & Common Options"
+title: "List of Plugins"
 type: docs
 permalink: docs/plugins/
-order: 0
-category: 'Plugins'
+order: 3
+category: 'Docs'
 ---
 
 Plugins are what makes Uppy useful: they help select, manipulate and upload files.
@@ -34,59 +34,3 @@ Plugins are what makes Uppy useful: they help select, manipulate and upload file
   <!-- TODO document? -->
   - @uppy/thumbnail-generator — generate preview thumbnails for images to be uploaded [documentation not yet available]
   - [@uppy/golden-retriever](/docs/golden-retriever) — restore files and continue uploading after a page refresh or a browser crash
-
-## Common options
-
-Each plugin can have any number of options (please see specific plugins for details), but these are shared between some:
-
-### `id`
-
-A unique string identifying the plugin. By default, the plugin's name is used, so usually it does not need to be configured manually. Use this if you need to add multiple plugins of the same type.
-
-### `target`
-
-Can be a `string` CSS selector, a DOM element, or a Plugin class. Consider the following example, where `DragDrop` plugin will be rendered into a `body` element:
-
-```js
-const Uppy = require('@uppy/core')
-const DragDrop = require('@uppy/drag-drop')
-const uppy = Uppy()
-uppy.use(DragDrop, { target: 'body' })
-// or: uppy.use(DragDrop, { target: document.body })
-```
-
-While in this one, we are using the `@uppy/dashboard` plugin, which can act as a host target for other plugins:
-
-```js
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
-const GoogleDrive = require('@uppy/google-drive')
-const uppy = Uppy()
-uppy.use(Dashboard, {
-  trigger: '#uppyModalOpener'
-})
-uppy.use(GoogleDrive, {target: Dashboard})
-```
-
-In the example above, the `Dashboard` gets rendered into an element with ID `uppy`, while `GoogleDrive` is rendered into the `Dashboard` itself.
-
-### `locale: {}`
-
-Same as with Uppy.Core’s setting above, this allows you to override plugin’s locale string, so that instead of `Select files` in English, your users will see `Выберите файлы` in Russian. Example:
-
-```js
-.use(FileInput, {
-  target: 'body',
-  locale: {
-    strings: { selectToUpload: 'Выберите файл для загрузки' }
-  }
-})
-```
-
-See plugin documentation pages for other plugin-specific options.
-
-<!-- Keep this heading, it is here to avoid breaking existing URLs -->
-<!-- Previously the content that is now at /docs/providers was here -->
-## Provider Plugins
-
-See the [Provider Plugins](/docs/providers) documentation page for information on provider plugins.

website/src/docs/stores.md

@@ -1,6 +1,6 @@
 ---
 type: docs
-order: 3
+order: 5
 title: "Custom Stores"
 permalink: docs/stores/
 category: 'Docs'

website/src/docs/uppy.md

@@ -642,3 +642,13 @@ Fired when “info” message should be hidden in the UI. See [`info-visible`](#
 ### `cancel-all`
 
 Fired when [`uppy.cancelAll()`]() is called, all uploads are canceled, files removed and progress is reset.
+
+### `restriction-failed`
+
+Fired when a file violates certain restrictions when added. This event is just providing another choice for those who want to customize the behavior of file upload restrictions.
+
+```javascript
+uppy.on('restriction-failed', (file, error) => {
+  // do some customized logic like showing system notice to users
+})
+```

website/src/docs/writing-plugins.md

@@ -2,8 +2,8 @@
 type: docs
 title: "Writing Plugins"
 permalink: docs/writing-plugins/
-order: 1
-category: 'Plugins'
+order: 8
+category: 'Contributing'
 ---
 
 There are already a few useful Uppy plugins out there, but there might come a time when you will want to build your own. Plugins can hook into the upload process or render a custom UI, typically to:

website/src/examples/markdown-snippets/app.es6

@@ -111,6 +111,7 @@ class MarkdownTextarea {
         template_id: TRANSLOADIT_EXAMPLE_TEMPLATE
       }
     }).then((result) => {
+      if (result === null) return
       this.insertAttachments(
         this.matchFilesAndThumbs(result.results)
       )
@@ -135,6 +136,7 @@ class MarkdownTextarea {
         'dropbox'
       ]
     }).then((result) => {
+      if (result === null) return
       this.insertAttachments(
         this.matchFilesAndThumbs(result.results)
       )

website/src/stats.ejs

@@ -2,10 +2,10 @@
 title: Stats
 type: docs
 layout: stats
-category: 'Docs'
+category: 'Contributing'
 permalink: docs/stats/
 alias:
   - guide/stats/
   - stats/
-order: 6
+order: 9
 ---

website/themes/uppy/layout/partials/frontpage-code-sample.html

@@ -15,7 +15,7 @@
     serverUrl<span class="token punctuation">:</span> <span class="token string">&apos;https://companion.uppy.io&apos;</span>
   <span class="token punctuation">}</span><span class="token punctuation">)</span>
   <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Tus<span class="token punctuation">,</span> <span class="token punctuation">{</span> endpoint<span class="token punctuation">:</span> <span class="token string">&apos;https://master.tus.io/files/&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&apos;complete&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>result<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&apos;complete&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&apos;Upload result:&apos;</span><span class="token punctuation">,</span> result<span class="token punctuation">)</span>
   <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr></tbody></table></figure>
 <script>

website/themes/uppy/layout/partials/sidebar.ejs

@@ -4,13 +4,13 @@ var categories = []
 if (page.type === 'docs') {
   categories = [
     { category: 'Docs', path: 'docs/', link: true, hidden: true },
-    { category: 'Plugins', path: 'docs/plugins/', link: true },
     { category: 'UI Elements', path: 'docs/dashboard/', link: false },
     { category: 'Sources', path: 'docs/drag-drop/', link: false },
     { category: 'Destinations', path: 'docs/tus/', link: false },
     { category: 'File Processing', path: 'docs/robodog/', link: true },
     { category: 'Miscellaneous', path: 'docs/form/', link: false },
     { category: 'React', path: 'docs/react/', link: true },
+    { category: 'Contributing', path: 'docs/contributing/', link: true },
     ]
   } else if (page.type === 'examples') {
     categories = [