ASCII text
1
$dark-theme: false !default;
2
$light-topbar: false !default;
3
$compact: false !default;
4
$toolkit: "none" !default;
5
$asset-suffix: if($dark-theme, "-dark", "");
7
//
9
// Sizes
10
//
11
$container-padding: 6px;
13
$small-size: 24px;
14
$medium-size: 36px;
15
$large-size: 48px;
16
@if $compact {
18
$container-padding: 4px;
19
$small-size: 24px;
20
$medium-size: 32px;
21
$large-size: 40px;
22
}
23
$menu-item-height: 32px;
25
$menu-item-dense-height: 28px;
26
@if $compact {
28
$menu-item-height: 28px;
29
}
30
//
32
// Radii
33
//
34
$corner-radius: 4px;
36
$circular-radius: 9999px;
37
//
39
// Durations
40
//
41
$state-duration: 75ms;
43
$ripple-duration: 225ms;
44
$ripple-fade-out-duration: 300ms;
45
$ripple-opacity-fade-out-duration: 1200ms;
46
@if $toolkit == "st" {
48
// Tweak transition durations since St does not support transition-timing-function
49
$state-duration: 100ms;
50
$ripple-duration: 200ms;
51
}
52
//
54
// Timing functions
55
//
56
$ease: cubic-bezier(.4, 0, .2, 1);
58
$ease-out: cubic-bezier(0, 0, .2, 1);
59
$ease-in: cubic-bezier(.4, 0, 1, 1);
60
$ease-in-out: cubic-bezier(.4, 0, .6, 1);
61
//
63
// Transition shorthands
64
//
65
$transition: all $state-duration $ease-out;
67
$transition-shadow: box-shadow $state-duration $ease-out;
68
//
70
// Shadows
71
//
72
// Values are based on:
74
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-elevation/_elevation-theme.scss
75
$shadow-z0:
77
0 0 0 0 rgba(black, .2),
78
0 0 0 0 rgba(black, .14),
79
0 0 0 0 rgba(black, .12);
80
$shadow-z1:
81
0 2px 1px -1px rgba(black, .2),
82
0 1px 1px 0 rgba(black, .14),
83
0 1px 3px 0 rgba(black, .12);
84
$shadow-z2:
85
0 3px 1px -2px rgba(black, .2),
86
0 2px 2px 0 rgba(black, .14),
87
0 1px 5px 0 rgba(black, .12);
88
$shadow-z3:
89
0 3px 3px -2px rgba(black, .2),
90
0 3px 4px 0 rgba(black, .14),
91
0 1px 8px 0 rgba(black, .12);
92
$shadow-z4:
93
0 2px 4px -1px rgba(black, .2),
94
0 4px 5px 0 rgba(black, .14),
95
0 1px 10px 0 rgba(black, .12);
96
$shadow-z6:
97
0 3px 5px -1px rgba(black, .2),
98
0 6px 10px 0 rgba(black, .14),
99
0 1px 18px 0 rgba(black, .12);
100
$shadow-z8:
101
0 5px 5px -3px rgba(black, .2),
102
0 8px 10px 1px rgba(black, .14),
103
0 3px 14px 2px rgba(black, .12);
104
$shadow-z12:
105
0 7px 8px -4px rgba(black, .2),
106
0 12px 17px 2px rgba(black, .14),
107
0 5px 22px 4px rgba(black, .12);
108
$shadow-z16:
109
0 8px 10px -5px rgba(black, .2),
110
0 16px 24px 2px rgba(black, .14),
111
0 6px 30px 5px rgba(black, .12);
112
$shadow-z24:
113
0 11px 15px -7px rgba(black, .2),
114
0 24px 38px 3px rgba(black, .14),
115
0 9px 46px 8px rgba(black, .12);
116
$text-shadow:
118
0 1px 1px rgba(black, .2),
119
0 1px 2px rgba(black, .14),
120
0 1px 3px rgba(black, .12);
121
// workaround for selection-mode checkboxes
123
$icon-shadow-z2:
124
0 1px 1px rgba(black, .2),
125
0 2px 2px rgba(black, .14),
126
0 1px 5px rgba(black, .12);
127
$icon-shadow-z4:
128
0 2px 3px rgba(black, .2),
129
0 4px 5px rgba(black, .14),
130
0 1px 10px rgba(black, .12);
131
// Note that GTK 3 does not support blur below 2px,
133
// and its blur is huge compared to web rendering.
134
// See: https://gitlab.gnome.org/GNOME/gtk/issues/511
135
@if $toolkit == "gtk3" {
136
$shadow-z0:
137
0 0 0 0 rgba(black, .2),
138
0 0 0 0 rgba(black, .14),
139
0 0 0 0 rgba(black, .12);
140
$shadow-z1:
141
0 2px 2px -2px rgba(black, .3),
142
0 1px 2px -1px rgba(black, .24),
143
0 1px 2px -.6px rgba(black, .17);
144
$shadow-z2:
145
0 3px 2px -3px rgba(black, .3),
146
0 2px 2px -1px rgba(black, .24),
147
0 1px (5px * .6) 0 rgba(black, .12);
148
$shadow-z3:
149
0 3px 2px -2px rgba(black, .2),
150
0 3px (4px * .6) 0 rgba(black, .14),
151
0 1px (8px * .6) 0 rgba(black, .12);
152
$shadow-z4:
153
0 2px (4px * .6) -1px rgba(black, .2),
154
0 4px (5px * .6) 0 rgba(black, .14),
155
0 1px (10px * .6) 0 rgba(black, .12);
156
$shadow-z6:
157
0 3px (5px * .6) -1px rgba(black, .2),
158
0 6px (10px * .6) 0 rgba(black, .14),
159
0 1px (18px * .6) 0 rgba(black, .12);
160
$shadow-z8:
161
0 5px (5px * .6) -3px rgba(black, .2),
162
0 8px (10px * .6) 1px rgba(black, .14),
163
0 3px (14px * .6) 2px rgba(black, .12);
164
$shadow-z12:
165
0 7px (8px * .6) -4px rgba(black, .2),
166
0 12px (17px * .6) 2px rgba(black, .14),
167
0 5px (22px * .6) 4px rgba(black, .12);
168
$shadow-z16:
169
0 8px (10px * .6) -5px rgba(black, .2),
170
0 16px (24px * .6) 2px rgba(black, .14),
171
0 6px (30px * .6) 5px rgba(black, .12);
172
$shadow-z24:
173
0 11px (15px * .6) -7px rgba(black, .2),
174
0 24px (38px * .6) 3px rgba(black, .14),
175
0 9px (46px * .6) 8px rgba(black, .12);
176
$text-shadow:
178
0 1px 1px rgba(black, .2),
179
0 1px 2px rgba(black, .14),
180
0 1px 3px rgba(black, .12);
181
$icon-shadow-z2:
183
0 1px 1px rgba(black, .2),
184
0 2px 2px rgba(black, .14),
185
0 1px (5px * .6) rgba(black, .12);
186
$icon-shadow-z4:
187
0 2px 2px rgba(black, .2),
188
0 4px (5px * .6) rgba(black, .14),
189
0 1px (10px * .6) rgba(black, .12);
190
}
191
@if $toolkit == "st" {
193
// This should be none, but it's creating some issues with borders, so to
194
// workaround it for now, use inset wich goes through a different code path.
195
// see https://bugzilla.gnome.org/show_bug.cgi?id=752934
196
$shadow-z0: 0 0 transparent;
197
$shadow-z1: 0 1px 1px rgba(black, .36);
199
$shadow-z2: 0 1px 2px rgba(black, .4);
200
$shadow-z4: 0 2px 8px rgba(black, .44);
201
$shadow-z8: 0 5px 16px rgba(black, .5);
202
$shadow-z16: 0 8px 24px rgba(black, .68); // TODO
203
}
204