Merge pull request #2222 from transloadit/dark-mode-fixes

Dashboard Dark Mode: move from white to off-white

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

@@ -113,7 +113,7 @@
   [data-uppy-theme="dark"] & {
     background-color: $gray-800;
     border-color: $gray-800;
-    color: $white;
+    color: $gray-200;
   }
 
   [data-uppy-theme="dark"] &:focus {
@@ -165,6 +165,10 @@
     padding: 13px 22px;
   }
 
+  [data-uppy-theme="dark"] & {
+    color: $gray-200;
+  }
+
   [data-uppy-theme="dark"] &:focus {
     box-shadow: 0 0 0 3px rgba($blue, 0.6);
   }

packages/@uppy/dashboard/src/components/FileCard/index.scss

@@ -78,7 +78,7 @@
       -webkit-overflow-scrolling: touch;
 
       [data-uppy-theme="dark"] & {
-        background-color: $black;
+        background-color: $gray-900;
       }
     }
 
@@ -102,7 +102,7 @@
           }
 
           [data-uppy-theme="dark"] & {
-            color: $white;
+            color: $gray-200;
           }
         }
         .uppy-Dashboard-FileCard-input {

packages/@uppy/dashboard/src/components/FileItem/Buttons/index.scss

@@ -14,7 +14,7 @@
   }
 
   [data-uppy-theme="dark"] &:hover {
-    color: $white;
+    color: $gray-200;
   }  
 }
 

packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss

@@ -13,7 +13,7 @@
     word-wrap: anywhere;
 
     [data-uppy-theme="dark"] & {
-      color: $white;
+      color: $gray-200;
     }
   }
 

packages/@uppy/dashboard/src/components/FileItem/FilePreviewAndLink/index.scss

@@ -22,7 +22,7 @@
     position: absolute;
     left: 0; right: 0;
     top: 0; bottom: 0;
-    background-color: rgba($black, 0.65) /* no !important */;
+    background-color: rgba($black, 0.65);
     display: none;
     z-index: $zIndex-2;
   }

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

@@ -137,7 +137,7 @@
   }
 
   [data-uppy-theme="dark"] & {
-    background-color: $black;
+    background-color: $gray-900;
   }
 }
 
@@ -348,7 +348,7 @@
   }
 
   [data-uppy-theme="dark"] & {
-    color: $white;
+    color: $gray-200;
   }
 }
 

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

@@ -12,7 +12,7 @@
   flex: 1;
 
   [data-uppy-theme="dark"] & {
-    background-color: $black;
+    background-color: $gray-900;
   }
 }
 
@@ -69,7 +69,7 @@
   }
 
   [data-uppy-theme="dark"] & {
-    color: $white;
+    color: $gray-200;
   }
 }
   .uppy-Provider-breadcrumbsIcon {
@@ -115,7 +115,7 @@
   color: $gray-800;
 
   [data-uppy-theme="dark"] & {
-    color: $white;
+    color: $gray-200;
   }
 }
 
@@ -178,7 +178,7 @@
   align-items: center;
 
   [data-uppy-theme="dark"] & {
-    background-color: $black;
+    background-color: $gray-900;
   }
 }
 
@@ -206,8 +206,8 @@
   border-radius: 4px;
 
   [data-uppy-theme="dark"] & {
-    background-color: $black;
-    color: $white;
+    background-color: $gray-900;
+    color: $gray-200;
   }
 }
 
@@ -259,7 +259,7 @@
   }
 
   [data-uppy-theme="dark"] & {
-    color: $white;
+    color: $gray-200;
   }
 }
 
@@ -289,7 +289,7 @@
   padding: 0;
 
   [data-uppy-theme="dark"] & {
-    background-color: $black;
+    background-color: $gray-900;
   }
 }
 

packages/@uppy/provider-views/src/style/uppy-ProviderBrowser-viewType--list.scss

@@ -6,7 +6,7 @@
   background-color: $white;
 
   [data-uppy-theme="dark"] & {
-    background-color: $black;
+    background-color: $gray-900;
   }
 
   li.uppy-ProviderBrowserItem {
@@ -16,7 +16,7 @@
     margin: 0;
 
     [data-uppy-theme="dark"] & {
-      color: $white;
+      color: $gray-200;
     }
   }
 

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

@@ -8,8 +8,8 @@
     content: '';
     position: absolute;
     cursor: pointer;
-    border-left: 2px solid $white;
-    border-bottom: 2px solid $white;
+    border-left: 2px solid $gray-200;
+    border-bottom: 2px solid $gray-200;
     transform: rotate(-45deg);
   }
 

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

@@ -116,7 +116,7 @@
   }
 
   [data-uppy-theme="dark"] & {
-    color: $white;
+    color: $gray-200;
   }
 }
 
@@ -139,7 +139,7 @@
   line-height: 1;
 
   [data-uppy-theme="dark"] & {
-    color: $white;
+    color: $gray-200;
   }
 }
 

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

@@ -11,7 +11,7 @@
   flex: 1;
 
   [data-uppy-theme="dark"] & {
-    background-color: $black;
+    background-color: $gray-900;
   }
 }
 

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

@@ -129,6 +129,6 @@
   color: $gray-800;
 
   [data-uppy-theme="dark"] & {
-    color: $white;
+    color: $gray-200;
   }
 }