ASCII text
1
$asset_suffix: if($variant == 'dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
// opacities
5
$higher_opacity: 0.9;
6
$middle_opacity: 0.6;
7
$lower_opacity: 0.3;
8
$secondary_opacity: 0.75;
10
$tertiary_opacity: 0.6;
11
$disabled_opacity: 0.4;
12
// sizes
14
$small_size: if($compact == 'false', 24px, 20px);
15
$medium_size: if($compact == 'false', 36px, 32px);
16
$large_size: if($compact == 'false', 48px, 44px);
17
$container_padding: 6px;
19
$bar_size: 4px;
21
$menuitem_size: 28px;
22
// radiuses
24
$material_radius: 2px;
25
$circular_radius: 9999px;
26
// durations
28
$shorter_duration: 0.2s;
29
$longer_duration: 0.3s;
30
$ripple_duration: 0.5s;
31
// timing functions
33
$standard_curve: cubic-bezier(0.4, 0.0, 0.2, 1);
34
$deceleration_curve: cubic-bezier(0.0, 0.0, 0.2, 1);
35
$acceleration_curve: cubic-bezier(0.4, 0.0, 1, 1);
36
$sharp_curve: cubic-bezier(0.4, 0.0, 0.6, 1);
37
// transition shorthands
39
$shorter_transition: all $shorter_duration $deceleration_curve;
40
$longer_transition: all $longer_duration $deceleration_curve;
41
$shadow_transition: box-shadow $shorter_duration $deceleration_curve;
42
// shadows
44
// based shadow values:
45
// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png
46
// box-shadow 1px blur doesn't draw correctly, see
48
// https://bugzilla.gnome.org/show_bug.cgi?id=738484
49
// $shadow_1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
50
$shadow_1: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
51
$shadow_2: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
52
$shadow_3: 0 10px 10px rgba(0, 0, 0, 0.19), 0 6px 3px rgba(0, 0, 0, 0.23);
53
$shadow_4: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
54
$shadow_5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
55