Update Uppy's blue color to meet WCAG contrast requirements (#4777)

* Use a darker shade of blue for `$blue` * Remove transparency from the browse button * Improve contrast of the `buttonImport`
transloadit · Nov 9, 2023 · b6f34b2 · b6f34b2
1 parent 1431d52
commit b6f34b2
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/packages/@uppy/core/src/_variables.scss b/packages/@uppy/core/src/_variables.scss
@@ -16,7 +16,7 @@ $orange: #f6a623 !default;
 $yellow: #ffd600 !default;
 $green: #1bb240 !default;
 $darkgreen: #1c8b37 !default;
-$blue: #2275d7 !default;
+$blue: #1269cf !default;
 $lightblue: #aae1ff !default;
 $beige: #edd4b9 !default;
 

diff --git a/packages/@uppy/dashboard/src/style.scss b/packages/@uppy/dashboard/src/style.scss
@@ -381,7 +381,7 @@
 .uppy-Dashboard-browse {
   @include clear-focus;
 
-  color: rgba($blue, 0.9);
+  color: $blue;
   cursor: pointer;
 
   &:hover,
@@ -837,7 +837,7 @@
   color: $gray-600;
   font-size: 16px;
   text-align: center;
-  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 1v1C11.85 2 2 11.85 2 24s9.85 22 22 22 22-9.85 22-22S36.15 2 24 2V1zm0 0V0c13.254 0 24 10.746 24 24S37.254 48 24 48 0 37.254 0 24 10.746 0 24 0v1zm7.707 19.293a.999.999 0 1 1-1.414 1.414L25 16.414V34a1 1 0 1 1-2 0V16.414l-5.293 5.293a.999.999 0 1 1-1.414-1.414l7-7a.999.999 0 0 1 1.414 0l7 7z' fill='%232275D7' fill-rule='nonzero'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 1v1C11.85 2 2 11.85 2 24s9.85 22 22 22 22-9.85 22-22S36.15 2 24 2V1zm0 0V0c13.254 0 24 10.746 24 24S37.254 48 24 48 0 37.254 0 24 10.746 0 24 0v1zm7.707 19.293a.999.999 0 1 1-1.414 1.414L25 16.414V34a1 1 0 1 1-2 0V16.414l-5.293 5.293a.999.999 0 1 1-1.414-1.414l7-7a.999.999 0 0 1 1.414 0l7 7z' fill='%231269CF' fill-rule='nonzero'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: 50% 50%;
   border: 1px dashed $blue;

diff --git a/packages/@uppy/react-native/file-picker/url.js b/packages/@uppy/react-native/file-picker/url.js
@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
   },
   buttonImport: {
     alignItems: 'center',
-    backgroundColor: '#2275d7',
+    backgroundColor: '#1269cf',
     paddingHorizontal: 25,
     paddingVertical: 8,
     borderRadius: 5,