ASCII text
1
// Based on:
2
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-elevation/_elevation-theme.scss
3
@use "sass:color";
5
@use "theme";
6
$_umbra-color: rgba(black, .2);
8
$_penumbra-color: rgba(black, .14);
9
$_ambient-color: rgba(black, .12);
10
$z0:
12
0 0 0 0 $_umbra-color,
13
0 0 0 0 $_penumbra-color,
14
0 0 0 0 $_ambient-color;
15
$z1:
16
0 2px 1px -1px $_umbra-color,
17
0 1px 1px 0 $_penumbra-color,
18
0 1px 3px 0 $_ambient-color;
19
$z2:
20
0 3px 1px -2px $_umbra-color,
21
0 2px 2px 0 $_penumbra-color,
22
0 1px 5px 0 $_ambient-color;
23
$z3:
24
0 3px 3px -2px $_umbra-color,
25
0 3px 4px 0 $_penumbra-color,
26
0 1px 8px 0 $_ambient-color;
27
$z4:
28
0 2px 4px -1px $_umbra-color,
29
0 4px 5px 0 $_penumbra-color,
30
0 1px 10px 0 $_ambient-color;
31
$z6:
32
0 3px 5px -1px $_umbra-color,
33
0 6px 10px 0 $_penumbra-color,
34
0 1px 18px 0 $_ambient-color;
35
$z8:
36
0 5px 5px -3px $_umbra-color,
37
0 8px 10px 1px $_penumbra-color,
38
0 3px 14px 2px $_ambient-color;
39
$z12:
40
0 7px 8px -4px $_umbra-color,
41
0 12px 17px 2px $_penumbra-color,
42
0 5px 22px 4px $_ambient-color;
43
$z16:
44
0 8px 10px -5px $_umbra-color,
45
0 16px 24px 2px $_penumbra-color,
46
0 6px 30px 5px $_ambient-color;
47
$z24:
48
0 11px 15px -7px $_umbra-color,
49
0 24px 38px 3px $_penumbra-color,
50
0 9px 46px 8px $_ambient-color;
51
$text-shadow:
53
0 1px 1px $_umbra-color,
54
0 1px 2px $_penumbra-color,
55
0 1px 3px $_ambient-color;
56
// workaround for selection-mode checkboxes
58
$icon-shadow-z2:
59
0 1px 1px $_umbra-color,
60
0 2px 2px $_penumbra-color,
61
0 1px 5px $_ambient-color;
62
$icon-shadow-z4:
63
0 2px 3px $_umbra-color,
64
0 4px 5px $_penumbra-color,
65
0 1px 10px $_ambient-color;
66
// Note that GTK 3 does not support blur below 2px,
68
// and its blur is huge compared to web rendering.
69
// See: https://gitlab.gnome.org/GNOME/gtk/issues/511
70
@if theme.$toolkit == "gtk3" {
71
$z1:
72
0 2px 2px -2px color.adjust($_umbra-color, $alpha: .1),
73
0 1px 2px -1px color.adjust($_penumbra-color, $alpha: .1),
74
0 1px 2px -.6px color.adjust($_ambient-color, $alpha: .05);
75
$z2:
76
0 3px 2px -3px color.adjust($_umbra-color, $alpha: .1),
77
0 2px 2px -1px color.adjust($_penumbra-color, $alpha: .1),
78
0 1px (5px * .6) 0 $_ambient-color;
79
$z3:
80
0 3px 2px -2px $_umbra-color,
81
0 3px (4px * .6) 0 $_penumbra-color,
82
0 1px (8px * .6) 0 $_ambient-color;
83
$z4:
84
0 2px (4px * .6) -1px $_umbra-color,
85
0 4px (5px * .6) 0 $_penumbra-color,
86
0 1px (10px * .6) 0 $_ambient-color;
87
$z6:
88
0 3px (5px * .6) -1px $_umbra-color,
89
0 6px (10px * .6) 0 $_penumbra-color,
90
0 1px (18px * .6) 0 $_ambient-color;
91
$z8:
92
0 5px (5px * .6) -3px $_umbra-color,
93
0 8px (10px * .6) 1px $_penumbra-color,
94
0 3px (14px * .6) 2px $_ambient-color;
95
$z12:
96
0 7px (8px * .6) -4px $_umbra-color,
97
0 12px (17px * .6) 2px $_penumbra-color,
98
0 5px (22px * .6) 4px $_ambient-color;
99
$z16:
100
0 8px (10px * .6) -5px $_umbra-color,
101
0 16px (24px * .6) 2px $_penumbra-color,
102
0 6px (30px * .6) 5px $_ambient-color;
103
$z24:
104
0 11px (15px * .6) -7px $_umbra-color,
105
0 24px (38px * .6) 3px $_penumbra-color,
106
0 9px (46px * .6) 8px $_ambient-color;
107
$text-shadow:
109
0 1px 1px $_umbra-color,
110
0 1px 2px $_penumbra-color,
111
0 1px 3px $_ambient-color;
112
$icon-shadow-z2:
114
0 1px 1px $_umbra-color,
115
0 2px 2px $_penumbra-color,
116
0 1px (5px * .6) $_ambient-color;
117
$icon-shadow-z4:
118
0 2px 2px $_umbra-color,
119
0 4px (5px * .6) $_penumbra-color,
120
0 1px (10px * .6) $_ambient-color;
121
}
122
// Note that St does not support multiple box shadows.
124
@if theme.$toolkit == "st" {
125
// This should be none, but it's creating some issues with borders, so to
126
// workaround it for now, use inset wich goes through a different code path.
127
// see https://bugzilla.gnome.org/show_bug.cgi?id=752934
128
$z0: 0 0 transparent;
129
$z1: 0 1px 1px rgba(black, .36);
131
$z2: 0 1px 2px rgba(black, .4);
132
$z4: 0 2px 8px rgba(black, .44);
133
$z8: 0 5px 16px rgba(black, .5);
134
$z16: 0 8px 24px rgba(black, .68); // TODO
135
}
136