ASCII text
1
// When color definition differs for dark and light variant,
2
// it gets @if ed depending on $variant
3
$higher_opacity: 0.9;
5
$middle_opacity: 0.6;
6
$lower_opacity: 0.3;
7
$enabled_opacity: 0.75;
9
$hint_opacity: 0.6;
10
$disabled_opacity: 0.4;
11
@function gtkalpha($c, $a) {
13
@return unquote("alpha(#{$c}, #{$a})");
14
}
15
@function scale-alpha($c, $a) {
17
@return scale-color($c, $alpha: percentage(-1 + $a));
18
}
19
// based color palette:
21
// https://material.google.com/style/color.html#color-color-palette
22
// based border and highlight values:
23
// https://material.google.com/style/icons.html#icons-product-icons
24
// Foreground colors
26
$light_contrast_color: scale-alpha(#000000, 0.8);
27
$dark_contrast_color: #FFFFFF;
28
$fg_color: if($variant == 'light', $light_contrast_color, $dark_contrast_color);
30
$secondary_fg_color: scale-alpha($fg_color, $enabled_opacity);
31
$tertiary_fg_color: scale-alpha($fg_color, $hint_opacity);
32
$inversed_fg_color: $dark_contrast_color;
34
$secondary_inversed_fg_color: scale-alpha($inversed_fg_color, $enabled_opacity);
35
$tertiary_inversed_fg_color: scale-alpha($inversed_fg_color, $hint_opacity);
36
$topbar_fg_color: if($light == 'true', $fg_color, $inversed_fg_color);
38
$secondary_topbar_fg_color: if($light == 'true', $secondary_fg_color, $secondary_inversed_fg_color);
39
$tertiary_topbar_fg_color: if($light == 'true', $tertiary_fg_color, $tertiary_inversed_fg_color);
40
$disabled_fg_color: scale-alpha($fg_color, $disabled_opacity);
42
$disabled_secondary_fg_color: scale-alpha($secondary_fg_color, $disabled_opacity);
43
$disabled_tertiary_fg_color: scale-alpha($tertiary_fg_color, $disabled_opacity);
44
$disabled_inversed_fg_color: scale-alpha($inversed_fg_color, $disabled_opacity);
46
$disabled_secondary_inversed_fg_color: scale-alpha($secondary_inversed_fg_color, $disabled_opacity);
47
$disabled_tertiary_inversed_fg_color: scale-alpha($tertiary_inversed_fg_color, $disabled_opacity);
48
$disabled_topbar_fg_color: if($light == 'true', $disabled_fg_color, $disabled_inversed_fg_color);
50
$disabled_secondary_topbar_fg_color: if($light == 'true', $disabled_secondary_fg_color, $disabled_secondary_inversed_fg_color);
51
$disabled_tertiary_topbar_fg_color: if($light == 'true', $disabled_tertiary_fg_color, $disabled_tertiary_inversed_fg_color);
52
// Background colors
54
$bg_color: if($variant == 'light', #F5F5F5, #455A64);
55
$base_color: if($variant == 'light', #FFFFFF, #546E7A);
56
$alt_base_color: mix($base_color, $bg_color, 50%);
57
$lighter_bg_color: if($variant == 'light', #FAFAFA, #607D8B);
58
$darker_bg_color: if($variant == 'light', #EEEEEE, #263238);
59
$headerbar_color: if($variant == 'light', if($light == 'true', #E0E0E0, #455A64), #37474F);
60
$secondary_titlebar_color: if($light == 'true', #BDBDBD, #37474F);
61
$topbar_color: if($light == 'true', #BDBDBD, #263238);
62
$primary_color: #42A5F5;
64
$alt_primary_color: #40C4FF;
65
$accent_color: #FF4081;
66
// Misc colors
68
$track_color: gtkalpha(currentColor, $lower_opacity);
69
$semi_track_color: gtkalpha(currentColor, $lower_opacity / 2);
70
$row_track_color: gtkalpha(currentColor, 0.05);
71
$borders_color: if($variant == 'light', scale-alpha(#000000, 0.1), scale-alpha(#000000, 0.2));
72
$highlight_color: if($variant == 'light', scale-alpha(#FFFFFF, 0.4), scale-alpha(#FFFFFF, 0.1));
73
$secondary_highlight_color: scale-alpha(#FFFFFF, 0.2);
74
$topbar_highlight_color: if($light == 'true', $highlight_color, $secondary_highlight_color);
75
$topbar_indicator_color: if($light == 'true', $primary_color, currentColor);
76
$placeholder_text_color: mix($fg_color, $base_color, percentage($hint_opacity));
78
$link_color: $primary_color;
80
$link_visited_color: #E040FB;
81
$warning_color: #FF6D00;
83
$error_color: #DD2C00;
84
$success_color: #00C853;
85
$suggested_color: $accent_color;
87
$destructive_color: #FF5252;
88
$info_bg_color: #66BB6A;
90
$question_bg_color: #42A5F5;
91
$warning_bg_color: #FFA726;
92
$error_bg_color: #EF5350;
93