Skip to content

Commit 88bc88e

Browse files
committed
Update elevation shadow styles
1 parent 8e55261 commit 88bc88e

File tree

1 file changed

+32
-20
lines changed

1 file changed

+32
-20
lines changed

packages/core/src/common/_variables.scss

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -99,39 +99,51 @@ $pt-dark-border-shadow-opacity: $pt-border-shadow-opacity * 2 !default;
9999
$pt-dark-drop-shadow-opacity: $pt-drop-shadow-opacity * 2 !default;
100100

101101
// Elevations
102-
$pt-elevation-shadow-0: 0 0 0 1px $pt-divider-black !default;
102+
$pt-elevation-shadow-0:
103+
0 0 0 1px rgba($black, 0.15),
104+
0 0 5px 0 rgba(0, 0, 0, 0.02) !default;
103105
$pt-elevation-shadow-1:
104-
border-shadow($pt-border-shadow-opacity),
105-
0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
106+
0 0 0 1px rgba($black, 0.1),
107+
0 1px 3px 0 rgba(0, 0, 0, 0.1),
108+
0 1px 2px -1px rgba(0, 0, 0, 0.1) !default;
106109
$pt-elevation-shadow-2:
107-
border-shadow($pt-border-shadow-opacity),
108-
0 1px 1px rgba($black, $pt-drop-shadow-opacity),
109-
0 2px 6px rgba($black, $pt-drop-shadow-opacity) !default;
110+
0 0 0 1px rgba($black, 0.1),
111+
0 4px 6px -4px rgba(0, 0, 0, 0.1),
112+
0 10px 15px -3px rgba(0, 0, 0, 0.1) !default;
110113
$pt-elevation-shadow-3:
111-
border-shadow($pt-border-shadow-opacity),
112-
0 2px 4px rgba($black, $pt-drop-shadow-opacity),
113-
0 8px 24px rgba($black, $pt-drop-shadow-opacity) !default;
114+
0 0 0 1px rgba($black, 0.1),
115+
0 20px 25px -5px rgba(0, 0, 0, 0.1),
116+
0 10px 15px -3px rgba(0, 0, 0, 0.1) !default;
114117
$pt-elevation-shadow-4:
115-
border-shadow($pt-border-shadow-opacity),
116-
0 4px 8px rgba($black, $pt-drop-shadow-opacity),
117-
0 18px 46px 6px rgba($black, $pt-drop-shadow-opacity) !default;
118+
0 0 0 1px rgba($black, 0.1),
119+
0 25px 50px -12px rgba(0, 0, 0, 0.3) !default;
118120

119-
$pt-dark-elevation-shadow-0: inset 0 0 0 1px rgba($white, 0.2) !default;
121+
$pt-dark-elevation-shadow-0:
122+
inset 0 0 0 1px rgba($white, 0.2),
123+
0 0 10px 0 rgba(0, 0, 0, 0.2) !default;
120124
$pt-dark-elevation-shadow-1:
121125
inset 0 0 0 1px rgba($white, 0.2),
122-
0 1px 1px 0 rgba($black, $pt-dark-drop-shadow-opacity) !default;
126+
0 1px 10px 0 rgba(0, 0, 0, 0.2),
127+
inset 0 0 0.5px 0 rgba($white, 0.3),
128+
inset 0 0.5px 0 0 rgba($white, 0.08),
129+
0 1px 10px -1px rgba(0, 0, 0, 0.2) !default;
123130
$pt-dark-elevation-shadow-2:
124131
inset 0 0 0 1px rgba($white, 0.2),
125-
0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity),
126-
0 2px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;
132+
0 4px 6px -4px rgba(0, 0, 0, 0.5),
133+
inset 0 0 0.5px 0 rgba($white, 0.3),
134+
inset 0 0.5px 0 0 rgba($white, 0.08),
135+
0 10px 30px -5px rgba(0, 0, 0, 0.5) !default;
127136
$pt-dark-elevation-shadow-3:
128137
inset 0 0 0 1px rgba($white, 0.2),
129-
0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity),
130-
0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity) !default;
138+
0 20px 25px -5px rgba(0, 0, 0, 0.3),
139+
inset 0 0 0.5px 0 rgba($white, 0.3),
140+
inset 0 0.5px 0 0 rgba($white, 0.08),
141+
0 10px 30px -5px rgba(0, 0, 0, 0.3) !default;
131142
$pt-dark-elevation-shadow-4:
132143
inset 0 0 0 1px rgba($white, 0.2),
133-
0 4px 8px rgba($black, $pt-dark-drop-shadow-opacity),
134-
0 18px 46px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;
144+
0 25px 60px -12px rgba(0, 0, 0, 0.85),
145+
inset 0 0 0.5px 0 rgba($white, 0.3),
146+
inset 0 0.5px 0 0 rgba($white, 0.08) !default;
135147

136148
// Transitions
137149
$pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9) !default;

0 commit comments

Comments
 (0)