Update elevation shadow styles

Author: ggdouglas

packages/core/src/common/_variables.scss

@@ -99,39 +99,51 @@ $pt-dark-border-shadow-opacity: $pt-border-shadow-opacity * 2 !default;
 $pt-dark-drop-shadow-opacity: $pt-drop-shadow-opacity * 2 !default;
 
 // Elevations
-$pt-elevation-shadow-0: 0 0 0 1px $pt-divider-black !default;
+$pt-elevation-shadow-0:
+  0 0 0 1px rgba($black, 0.15),
+  0 0 5px 0 rgba(0, 0, 0, 0.02) !default;
 $pt-elevation-shadow-1:
-  border-shadow($pt-border-shadow-opacity),
-  0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
+  0 0 0 1px rgba($black, 0.1),
+  0 1px 3px 0 rgba(0, 0, 0, 0.1),
+  0 1px 2px -1px rgba(0, 0, 0, 0.1) !default;
 $pt-elevation-shadow-2:
-  border-shadow($pt-border-shadow-opacity),
-  0 1px 1px rgba($black, $pt-drop-shadow-opacity),
-  0 2px 6px rgba($black, $pt-drop-shadow-opacity) !default;
+  0 0 0 1px rgba($black, 0.1),
+  0 4px 6px -4px rgba(0, 0, 0, 0.1),
+  0 10px 15px -3px rgba(0, 0, 0, 0.1) !default;
 $pt-elevation-shadow-3:
-  border-shadow($pt-border-shadow-opacity),
-  0 2px 4px rgba($black, $pt-drop-shadow-opacity),
-  0 8px 24px rgba($black, $pt-drop-shadow-opacity) !default;
+  0 0 0 1px rgba($black, 0.1),
+  0 20px 25px -5px rgba(0, 0, 0, 0.1),
+  0 10px 15px -3px rgba(0, 0, 0, 0.1) !default;
 $pt-elevation-shadow-4:
-  border-shadow($pt-border-shadow-opacity),
-  0 4px 8px rgba($black, $pt-drop-shadow-opacity),
-  0 18px 46px 6px rgba($black, $pt-drop-shadow-opacity) !default;
+  0 0 0 1px rgba($black, 0.1),
+  0 25px 50px -12px rgba(0, 0, 0, 0.3) !default;
 
-$pt-dark-elevation-shadow-0: inset 0 0 0 1px rgba($white, 0.2) !default;
+$pt-dark-elevation-shadow-0:
+  inset 0 0 0 1px rgba($white, 0.2),
+  0 0 10px 0 rgba(0, 0, 0, 0.2) !default;
 $pt-dark-elevation-shadow-1:
   inset 0 0 0 1px rgba($white, 0.2),
-  0 1px 1px 0 rgba($black, $pt-dark-drop-shadow-opacity) !default;
+  0 1px 10px 0 rgba(0, 0, 0, 0.2),
+  inset 0 0 0.5px 0 rgba($white, 0.3),
+  inset 0 0.5px 0 0 rgba($white, 0.08),
+  0 1px 10px -1px rgba(0, 0, 0, 0.2) !default;
 $pt-dark-elevation-shadow-2:
   inset 0 0 0 1px rgba($white, 0.2),
-  0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity),
-  0 2px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;
+  0 4px 6px -4px rgba(0, 0, 0, 0.5),
+  inset 0 0 0.5px 0 rgba($white, 0.3),
+  inset 0 0.5px 0 0 rgba($white, 0.08),
+  0 10px 30px -5px rgba(0, 0, 0, 0.5) !default;
 $pt-dark-elevation-shadow-3:
   inset 0 0 0 1px rgba($white, 0.2),
-  0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity),
-  0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity) !default;
+  0 20px 25px -5px rgba(0, 0, 0, 0.3),
+  inset 0 0 0.5px 0 rgba($white, 0.3),
+  inset 0 0.5px 0 0 rgba($white, 0.08),
+  0 10px 30px -5px rgba(0, 0, 0, 0.3) !default;
 $pt-dark-elevation-shadow-4:
   inset 0 0 0 1px rgba($white, 0.2),
-  0 4px 8px rgba($black, $pt-dark-drop-shadow-opacity),
-  0 18px 46px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;
+  0 25px 60px -12px rgba(0, 0, 0, 0.85),
+  inset 0 0 0.5px 0 rgba($white, 0.3),
+  inset 0 0.5px 0 0 rgba($white, 0.08) !default;
 
 // Transitions
 $pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9) !default;