[base] Update base CSS

sanity-io · Oct 6, 2020 · b528257 · b528257
1 parent 4ab6b96
commit b528257
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/packages/@sanity/base/src/styles/layout/positioning.css b/packages/@sanity/base/src/styles/layout/positioning.css
@@ -15,6 +15,7 @@
 
 .flexCenter {
   display: flex;
+  flex-direction: column;
   align-items: center;
   align-content: center;
   justify-content: center;

diff --git a/packages/@sanity/base/src/styles/shadows.css b/packages/@sanity/base/src/styles/shadows.css
@@ -9,159 +9,178 @@
 }
 
 .shadow-1dp {
-  box-shadow: 0 2px 2px 0 var(--shadow-color-umbra), 0 3px 1px -2px var(--shadow-color-penumbra),
-    0 1px 5px 0 var(--shadow-color-ambient);
+  box-shadow: 0 0 0 1px var(--hairline-color), 0 2px 2px 0 var(--shadow-color-umbra),
+    0 3px 1px -2px var(--shadow-color-penumbra), 0 1px 5px 0 var(--shadow-color-ambient);
 }
 
 /* .shadow-2dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 3px 1px -2px var(--shadow-color-umbra),
     0 2px 2px 0 var(--shadow-color-penumbra),
     0 1px 5px 0 var(--shadow-color-ambient);
 }
 
 .shadow-3dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 3px 3px -2px var(--shadow-color-umbra),
     0 3px 4px 0 var(--shadow-color-penumbra),
     0 1px 8px 0 var(--shadow-color-ambient);
 }
 
 .shadow-4dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 2px 4px -1px var(--shadow-color-umbra),
     0 4px 5px 0 var(--shadow-color-penumbra),
     0 1px 10px 0 var(--shadow-color-ambient);
 }
 
 .shadow-5dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 3px 5px -1px var(--shadow-color-umbra),
     0 5px 8px 0 var(--shadow-color-penumbra),
     0 1px 14px 0 var(--shadow-color-ambient);
 } */
 
 .shadow-6dp {
-  box-shadow: 0 3px 3px 0 var(--shadow-color-umbra), 0 1px 7px 0 var(--shadow-color-penumbra),
-    0 3px 1px -1px var(--shadow-color-ambient);
+  box-shadow: 0 0 0 1px var(--hairline-color), 0 3px 3px 0 var(--shadow-color-umbra),
+    0 1px 7px 0 var(--shadow-color-penumbra), 0 3px 1px -1px var(--shadow-color-ambient);
 }
 
 /* .shadow-7dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 4px 5px -2px var(--shadow-color-umbra),
     0 7px 10px 1px var(--shadow-color-penumbra),
     0 2px 16px 1px var(--shadow-color-ambient);
 }
 
 .shadow-8dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 5px 5px -3px var(--shadow-color-umbra),
     0 8px 10px 1px var(--shadow-color-penumbra),
     0 3px 14px 2px var(--shadow-color-ambient);
 }
 
 .shadow-9dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 5px 6px -3px var(--shadow-color-umbra),
     0 9px 12px 1px var(--shadow-color-penumbra),
     0 3px 16px 2px var(--shadow-color-ambient);
 }
 
 .shadow-10dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 6px 6px -3px var(--shadow-color-umbra),
     0 10px 14px 1px var(--shadow-color-penumbra),
     0 4px 18px 3px var(--shadow-color-ambient);
 }
 
 .shadow-11dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 6px 7px -4px var(--shadow-color-umbra),
     0 11px 15px 1px var(--shadow-color-penumbra),
     0 4px 20px 3px var(--shadow-color-ambient);
 } */
 
 .shadow-12dp {
-  box-shadow: 0 8px 17px 2px var(--shadow-color-umbra), 0 3px 14px 2px var(--shadow-color-penumbra),
-    0 5px 5px -3px var(--shadow-color-ambient);
+  box-shadow: 0 0 0 1px var(--hairline-color), 0 8px 17px 2px var(--shadow-color-umbra),
+    0 3px 14px 2px var(--shadow-color-penumbra), 0 5px 5px -3px var(--shadow-color-ambient);
 }
 
 /* .shadow-13dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 7px 8px -4px var(--shadow-color-umbra),
     0 13px 19px 2px var(--shadow-color-penumbra),
     0 5px 24px 4px var(--shadow-color-ambient);
 }
 
 .shadow-14dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 7px 9px -4px var(--shadow-color-umbra),
     0 14px 21px 2px var(--shadow-color-penumbra),
     0 5px 26px 4px var(--shadow-color-ambient);
 }
 
 .shadow-15dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 8px 9px -5px var(--shadow-color-umbra),
     0 15px 22px 2px var(--shadow-color-penumbra),
     0 6px 28px 5px var(--shadow-color-ambient);
 } */
 
 .shadow-16dp {
-  box-shadow: 0 16px 24px 2px var(--shadow-color-umbra), 0 6px 30px 5px var(--shadow-color-penumbra),
-    0 8px 10px -7px var(--shadow-color-ambient);
+  box-shadow: 0 0 0 1px var(--hairline-color), 0 16px 24px 2px var(--shadow-color-umbra),
+    0 6px 30px 5px var(--shadow-color-penumbra), 0 8px 10px -7px var(--shadow-color-ambient);
 }
 
 /* .shadow-17dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 8px 11px -5px var(--shadow-color-umbra),
     0 17px 26px 2px var(--shadow-color-penumbra),
     0 6px 32px 5px var(--shadow-color-ambient);
 }
 
 .shadow-18dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 9px 11px -5px var(--shadow-color-umbra),
     0 18px 28px 2px var(--shadow-color-penumbra),
     0 7px 34px 6px var(--shadow-color-ambient);
 }
 
 .shadow-19dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 9px 12px -6px var(--shadow-color-umbra),
     0 19px 29px 2px var(--shadow-color-penumbra),
     0 7px 36px 6px var(--shadow-color-ambient);
 }
 
 .shadow-20dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 10px 13px -6px var(--shadow-color-umbra),
     0 20px 31px 3px var(--shadow-color-penumbra),
     0 8px 38px 7px var(--shadow-color-ambient);
 }
 
 .shadow-21dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 10px 13px -6px var(--shadow-color-umbra),
     0 21px 33px 3px var(--shadow-color-penumbra),
     0 8px 40px 7px var(--shadow-color-ambient);
 }
 
 .shadow-22dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 10px 14px -6px var(--shadow-color-umbra),
     0 22px 35px 3px var(--shadow-color-penumbra),
     0 8px 42px 7px var(--shadow-color-ambient);
 }
 
 .shadow-23dp {
   box-shadow:
+    0 0 0 1px var(--hairline-color),
     0 11px 14px -7px var(--shadow-color-umbra),
     0 23px 36px 3px var(--shadow-color-penumbra),
     0 9px 44px 8px var(--shadow-color-ambient);
 } */
 
 .shadow-24dp {
-  box-shadow: 0 24px 38px 3px var(--shadow-color-umbra), 0 9px 46px 8px var(--shadow-color-penumbra),
-    0 11px 15px -7px var(--shadow-color-ambient);
+  box-shadow: 0 0 0 1px var(--hairline-color), 0 24px 38px 3px var(--shadow-color-umbra),
+    0 9px 46px 8px var(--shadow-color-penumbra), 0 11px 15px -7px var(--shadow-color-ambient);
 }
diff --git a/packages/@sanity/base/src/styles/variables/globals.css b/packages/@sanity/base/src/styles/variables/globals.css
@@ -7,7 +7,7 @@
   --preview-placeholder-color: var(--gray-lightest);
 
   /* Backdrop */
-  --backdrop-color: color(var(--brand-darkest) alpha(12%));
+  --backdrop-color: color(var(--gray) alpha(15%));
 
   /* Main navigation */
   --main-navigation-color: var(--gray-darkest);