feat: apply themes to Loader and LoaderOverlay (#342)

dequelabs · Sep 20, 2021 · 52d4a1a · 52d4a1a
1 parent 5aade53
commit 52d4a1a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/packages/styles/base.css b/packages/styles/base.css
@@ -2,6 +2,10 @@
   --workspace-background-color: #f0f2f5;
 }
 
+.cauldron--theme-dark {
+  --workspace-background-color: var(--dark-workspace-color);
+}
+
 html {
   box-sizing: border-box;
 }

diff --git a/packages/styles/loader.css b/packages/styles/loader.css
@@ -1,5 +1,5 @@
 .Loader__overlay {
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--workspace-background-color);
   position: absolute;
   display: inline-flex;
   flex-direction: column;
@@ -17,14 +17,22 @@
   z-index: var(--z-index-loader);
 }
 
+.cauldron--theme-dark .Loader__overlay {
+  border: 2px solid var(--white);
+}
+
 .Loader {
   font-size: 10px;
   margin: 50px auto;
   width: 7em;
   height: 7em;
   border-radius: 50%;
-  background: #666;
-  background: linear-gradient(to right, #666 10%, rgba(255, 255, 255, 0) 42%);
+  background: var(--gray-60);
+  background: linear-gradient(
+    to right,
+    var(--gray-60) 10%,
+    rgba(255, 255, 255, 0) 42%
+  );
   transform: translateZ(0);
   position: relative;
   animation: load 1.4s linear infinite;
@@ -33,7 +41,7 @@
 .Loader:before {
   width: 50%;
   height: 50%;
-  background: #666;
+  background: var(--gray-60);
   border-radius: 100% 0 0 0;
   position: absolute;
   top: 0;
@@ -55,6 +63,18 @@
   right: 0;
 }
 
+.cauldron--theme-dark .Loader {
+  background: linear-gradient(
+    to right,
+    var(--white) 10%,
+    var(--workspace-background-color) 45%
+  );
+}
+
+.cauldron--theme-dark .Loader:before {
+  background: var(--white);
+}
+
 @-webkit-keyframes load {
   0% {
     transform: rotate(0deg);