_colors.scss
ASCII text
1
// When color definition differs for dark and light variant,
2
// it gets @if ed depending on $variant
3
4
$higher_opacity: 0.9;
5
$middle_opacity: 0.6;
6
$lower_opacity: 0.3;
7
8
$enabled_opacity: 0.75;
9
$hint_opacity: 0.6;
10
$disabled_opacity: 0.4;
11
12
@function scale-alpha($c, $a) {
13
@return scale-color($c, $alpha: percentage(-1 + $a));
14
}
15
16
// Foreground colors
17
$fg_color: if($variant == 'light', scale-alpha(#000000, 0.8), #FFFFFF);
18
$secondary_fg_color: scale-alpha($fg_color, $enabled_opacity);
19
$tertiary_fg_color: scale-alpha($fg_color, $hint_opacity);
20
21
$selected_fg_color: #FFFFFF;
22
$secondary_selected_fg_color: scale-alpha($selected_fg_color, $enabled_opacity);
23
$tertiary_selected_fg_color: scale-alpha($selected_fg_color, $hint_opacity);
24
25
$insensitive_fg_color: scale-alpha($fg_color, $disabled_opacity);
26
$insensitive_secondary_fg_color: scale-alpha($secondary_fg_color, $disabled_opacity);
27
$insensitive_tertiary_fg_color: scale-alpha($tertiary_fg_color, $disabled_opacity);
28
29
$insensitive_selected_fg_color: scale-alpha($selected_fg_color, $disabled_opacity);
30
$insensitive_secondary_selected_fg_color: scale-alpha($secondary_selected_fg_color, $disabled_opacity);
31
$insensitive_tertiary_selected_fg_color: scale-alpha($tertiary_selected_fg_color, $disabled_opacity);
32
33
// Background colors
34
$base_color: scale-alpha(if($variant == 'light', #FFFFFF, #455A64), $higher_opacity + 0.05);
35
$secondary_base_color: scale-alpha($fg_color, 0.05);
36
$bg_color: scale-alpha(#000000, $middle_opacity);
37
$osd_bg_color: scale-alpha(#000000, $lower_opacity);
38
$overview_bg_color: scale-alpha(#FFFFFF, 0.1);
39
40
$selected_bg_color: #42A5F5;
41
$secondary_selected_bg_color: #40C4FF;
42
$accent_bg_color: #FF4081;
43
44
// Misc colors
45
$track_color: scale-alpha($fg_color, $lower_opacity);
46
$semi_track_color: scale-alpha($fg_color, $lower_opacity / 2);
47
$insensitive_track_color: scale-alpha($insensitive_fg_color, $lower_opacity);
48
49
$selected_track_color: scale-alpha($selected_fg_color, $lower_opacity);
50
$selected_semi_track_color: scale-alpha($selected_fg_color, $lower_opacity / 2);
51
$selected_insensitive_track_color: scale-alpha($insensitive_selected_fg_color, $lower_opacity);
52
53
$borders_color: if($variant == 'light', scale-alpha(#000000, 0.1), scale-alpha(#000000, 0.2));
54
$highlight_color: if($variant == 'light', scale-alpha(#FFFFFF, 0.4), scale-alpha(#FFFFFF, 0.1));
55
$secondary_highlight_color: scale-alpha(#FFFFFF, 0.2);
56
57
$link_color: $selected_bg_color;
58
$link_visited_color: #E040FB;
59
60
$warning_color: #FF6D00;
61
$error_color: #DD2C00;
62
$success_color: #00C853;
63
64
$suggested_color: $accent_bg_color;
65
$destructive_color: #FF5252;
66
67
$info_bg_color: #66BB6A;
68
$question_bg_color: #42A5F5;
69
$warning_bg_color: #FFA726;
70
$error_bg_color: #EF5350;
71
72