ASCII text
1
// When color definition differs for dark and light variant,
2
// it gets @if ed depending on $variant
3
@function gtkalpha($c, $a) {
5
@return unquote("alpha(#{$c}, #{$a})");
6
}
7
@function scale-alpha($c, $a) {
9
@return scale-color($c, $alpha: percentage(-1 + $a));
10
}
11
@import 'color-palette';
13
// based border and highlight values:
15
// https://material.google.com/style/icons.html#icons-product-icons
16
// Foreground colors
18
$light_contrast_color: scale-alpha($black, 0.8);
19
$dark_contrast_color: $white;
20
$fg_color: if($variant == 'light', $light_contrast_color, $dark_contrast_color);
22
$secondary_fg_color: scale-alpha($fg_color, $enabled_opacity);
23
$tertiary_fg_color: scale-alpha($fg_color, $hint_opacity);
24
$inversed_fg_color: $dark_contrast_color;
26
$secondary_inversed_fg_color: scale-alpha($inversed_fg_color, $enabled_opacity);
27
$tertiary_inversed_fg_color: scale-alpha($inversed_fg_color, $hint_opacity);
28
$topbar_fg_color: if($light == 'true', $fg_color, $inversed_fg_color);
30
$secondary_topbar_fg_color: if($light == 'true', $secondary_fg_color, $secondary_inversed_fg_color);
31
$tertiary_topbar_fg_color: if($light == 'true', $tertiary_fg_color, $tertiary_inversed_fg_color);
32
$disabled_fg_color: scale-alpha($fg_color, $disabled_opacity);
34
$disabled_secondary_fg_color: scale-alpha($secondary_fg_color, $disabled_opacity);
35
$disabled_tertiary_fg_color: scale-alpha($tertiary_fg_color, $disabled_opacity);
36
$disabled_inversed_fg_color: scale-alpha($inversed_fg_color, $disabled_opacity);
38
$disabled_secondary_inversed_fg_color: scale-alpha($secondary_inversed_fg_color, $disabled_opacity);
39
$disabled_tertiary_inversed_fg_color: scale-alpha($tertiary_inversed_fg_color, $disabled_opacity);
40
$disabled_topbar_fg_color: if($light == 'true', $disabled_fg_color, $disabled_inversed_fg_color);
42
$disabled_secondary_topbar_fg_color: if($light == 'true', $disabled_secondary_fg_color, $disabled_secondary_inversed_fg_color);
43
$disabled_tertiary_topbar_fg_color: if($light == 'true', $disabled_tertiary_fg_color, $disabled_tertiary_inversed_fg_color);
44
// Background colors
46
$bg_color: if($variant == 'light', $grey-100, $blue-grey-700);
47
$base_color: if($variant == 'light', $white, $blue-grey-600);
48
$alt_base_color: mix($base_color, $bg_color, 50%);
49
$lighter_bg_color: if($variant == 'light', $grey-50, $blue-grey-500);
50
$darker_bg_color: if($variant == 'light', $grey-200, $blue-grey-900);
51
$headerbar_color: if($variant == 'light', if($light == 'true', $grey-300, $blue-grey-700), $blue-grey-800);
52
$secondary_titlebar_color: if($light == 'true', $grey-400, $blue-grey-800);
53
$topbar_color: if($light == 'true', $grey-400, $blue-grey-900);
54
$primary_color: $blue-400;
56
$alt_primary_color: $light-blue-A200;
57
$accent_color: $pink-A200;
58
// Misc colors
60
$track_color: gtkalpha(currentColor, $lower_opacity);
61
$semi_track_color: gtkalpha(currentColor, $lower_opacity / 2);
62
$row_track_color: gtkalpha(currentColor, 0.05);
63
$borders_color: if($variant == 'light', scale-alpha($black, 0.1), scale-alpha($black, 0.2));
64
$highlight_color: if($variant == 'light', scale-alpha($white, 0.4), scale-alpha($white, 0.1));
65
$secondary_highlight_color: scale-alpha($white, 0.2);
66
$topbar_highlight_color: if($light == 'true', $highlight_color, $secondary_highlight_color);
67
$topbar_indicator_color: if($light == 'true', $primary_color, currentColor);
68
$placeholder_text_color: mix($fg_color, $base_color, percentage($hint_opacity));
70
$link_color: $primary_color;
72
$link_visited_color: $purple-A200;
73
$warning_color: $orange-A700;
75
$error_color: $deep-orange-A700;
76
$success_color: $green-A700;
77
$suggested_color: $accent_color;
79
$destructive_color: $red-A200;
80
$info_bg_color: $green-400;
82
$question_bg_color: $blue-400;
83
$warning_bg_color: $orange-400;
84
$error_bg_color: $red-400;
85