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
$bar-size: 4px;
25
$menuitem-size: 28px;
26
//
28
// Radii
29
//
30
$corner-radius: 4px;
32
$circular-radius: 9999px;
33
//
35
// Durations
36
//
37
$duration: 75ms;
39
$ripple-fade-in-duration: 225ms;
40
$ripple-fade-out-duration: 300ms;
41
$ripple-fade-out-opacity-duration: 1200ms;
42
//
44
// Timing functions
45
//
46
$ease: cubic-bezier(.4, 0, .2, 1);
48
$ease-out: cubic-bezier(0, 0, .2, 1);
49
$ease-in: cubic-bezier(.4, 0, 1, 1);
50
$ease-in-out: cubic-bezier(.4, 0, .6, 1);
51
//
53
// Transition shorthands
54
//
55
$transition: all $duration $ease-out;
57
$transition-shadow: box-shadow $duration $ease-out;
58
//
60
// Shadows
61
//
62
// Values are based on:
64
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-elevation/_elevation-theme.scss
65
$shadow-z1:
67
0 2px 1px -1px rgba(black, .2),
68
0 1px 1px 0 rgba(black, .14),
69
0 1px 3px 0 rgba(black, .12);
70
$shadow-z2:
71
0 3px 1px -2px rgba(black, .2),
72
0 2px 2px 0 rgba(black, .14),
73
0 1px 5px 0 rgba(black, .12);
74
$shadow-z3:
75
0 3px 3px -2px rgba(black, .2),
76
0 3px 4px 0 rgba(black, .14),
77
0 1px 8px 0 rgba(black, .12);
78
$shadow-z4:
79
0 2px 4px -1px rgba(black, .2),
80
0 4px 5px 0 rgba(black, .14),
81
0 1px 10px 0 rgba(black, .12);
82
$shadow-z6:
83
0 3px 5px -1px rgba(black, .2),
84
0 6px 10px 0 rgba(black, .14),
85
0 1px 18px 0 rgba(black, .12);
86
$shadow-z8:
87
0 5px 5px -3px rgba(black, .2),
88
0 8px 10px 1px rgba(black, .14),
89
0 3px 14px 2px rgba(black, .12);
90
$shadow-z12:
91
0 7px 8px -4px rgba(black, .2),
92
0 12px 17px 2px rgba(black, .14),
93
0 5px 22px 4px rgba(black, .12);
94
$shadow-z16:
95
0 8px 10px -5px rgba(black, .2),
96
0 16px 24px 2px rgba(black, .14),
97
0 6px 30px 5px rgba(black, .12);
98
$shadow-z24:
99
0 11px 15px -7px rgba(black, .2),
100
0 24px 38px 3px rgba(black, .14),
101
0 9px 46px 8px rgba(black, .12);
102
$text-shadow:
104
0 1px 1px rgba(black, .2),
105
0 1px 2px rgba(black, .14),
106
0 1px 3px rgba(black, .12);
107
// workaround for selection-mode checkboxes
109
$icon-shadow-z2:
110
0 1px 1px rgba(black, .2),
111
0 2px 2px rgba(black, .14),
112
0 1px 5px rgba(black, .12);
113
$icon-shadow-z4:
114
0 2px 3px rgba(black, .2),
115
0 4px 5px rgba(black, .14),
116
0 1px 10px rgba(black, .12);
117
// Note that GTK 3 does not support blur below 2px,
119
// and its blur is huge compared to web rendering.
120
// See: https://gitlab.gnome.org/GNOME/gtk/issues/511
121
@if $toolkit == "gtk3" {
122
$shadow-z1:
123
0 2px 2px -2px rgba(black, .3),
124
0 1px 2px -1px rgba(black, .24),
125
0 1px 2px -.6px rgba(black, .17);
126
$shadow-z2:
127
0 3px 2px -3px rgba(black, .3),
128
0 2px 2px -1px rgba(black, .24),
129
0 1px (5px * .6) 0 rgba(black, .12);
130
$shadow-z3:
131
0 3px 2px -2px rgba(black, .2),
132
0 3px (4px * .6) 0 rgba(black, .14),
133
0 1px (8px * .6) 0 rgba(black, .12);
134
$shadow-z4:
135
0 2px (4px * .6) -1px rgba(black, .2),
136
0 4px (5px * .6) 0 rgba(black, .14),
137
0 1px (10px * .6) 0 rgba(black, .12);
138
$shadow-z6:
139
0 3px (5px * .6) -1px rgba(black, .2),
140
0 6px (10px * .6) 0 rgba(black, .14),
141
0 1px (18px * .6) 0 rgba(black, .12);
142
$shadow-z8:
143
0 5px (5px * .6) -3px rgba(black, .2),
144
0 8px (10px * .6) 1px rgba(black, .14),
145
0 3px (14px * .6) 2px rgba(black, .12);
146
$shadow-z12:
147
0 7px (8px * .6) -4px rgba(black, .2),
148
0 12px (17px * .6) 2px rgba(black, .14),
149
0 5px (22px * .6) 4px rgba(black, .12);
150
$shadow-z16:
151
0 8px (10px * .6) -5px rgba(black, .2),
152
0 16px (24px * .6) 2px rgba(black, .14),
153
0 6px (30px * .6) 5px rgba(black, .12);
154
$shadow-z24:
155
0 11px (15px * .6) -7px rgba(black, .2),
156
0 24px (38px * .6) 3px rgba(black, .14),
157
0 9px (46px * .6) 8px rgba(black, .12);
158
$text-shadow:
160
0 1px 1px rgba(black, .2),
161
0 1px 2px rgba(black, .14),
162
0 1px 3px rgba(black, .12);
163
$icon-shadow-z2:
165
0 1px 1px rgba(black, .2),
166
0 2px 2px rgba(black, .14),
167
0 1px (5px * .6) rgba(black, .12);
168
$icon-shadow-z4:
169
0 2px 2px rgba(black, .2),
170
0 4px (5px * .6) rgba(black, .14),
171
0 1px (10px * .6) rgba(black, .12);
172
}
173
@if $toolkit == "st" {
175
$shadow-z1: 0 1px 1px rgba(black, .36);
176
$shadow-z2: 0 1px 2px rgba(black, .4);
177
$shadow-z4: 0 2px 8px rgba(black, .44);
178
$shadow-z8: 0 5px 16px rgba(black, .5);
179
$shadow-z16: 0 8px 24px rgba(black, .68); // TODO
180
}
181