ASCII text
1
// When color definition differs for dark and light variant,
2
// it gets @if ed depending on $variant
3
@function scale-alpha($c, $a) {
5
@return scale-color($c, $alpha: percentage(-1 + $a));
6
}
7
@import 'color-palette';
9
// based border and highlight values:
11
// https://material.google.com/style/icons.html#icons-product-icons
12
// Foreground colors
14
$dark_fg_color: scale-alpha($black, 0.8);
15
$light_fg_color: $white;
16
$fg_color: if($variant == 'light', $dark_fg_color, $light_fg_color);
18
$secondary_fg_color: scale-alpha($fg_color, $secondary_opacity);
19
$tertiary_fg_color: scale-alpha($fg_color, $tertiary_opacity);
20
$inverse_fg_color: $light_fg_color;
22
$secondary_inverse_fg_color: scale-alpha($inverse_fg_color, $secondary_opacity);
23
$tertiary_inverse_fg_color: scale-alpha($inverse_fg_color, $tertiary_opacity);
24
$disabled_fg_color: scale-alpha($fg_color, $disabled_opacity);
26
$disabled_secondary_fg_color: scale-alpha($secondary_fg_color, $disabled_opacity);
27
$disabled_tertiary_fg_color: scale-alpha($tertiary_fg_color, $disabled_opacity);
28
$disabled_inverse_fg_color: scale-alpha($inverse_fg_color, $disabled_opacity);
30
$disabled_secondary_inverse_fg_color: scale-alpha($secondary_inverse_fg_color, $disabled_opacity);
31
$disabled_tertiary_inverse_fg_color: scale-alpha($tertiary_inverse_fg_color, $disabled_opacity);
32
// Background colors
34
$base_color: if($variant == 'light', $grey_50, $blue_grey_500);
35
$alt_base_color: if($variant == 'light', $grey_200, $blue_grey_900);
36
$bg_color: scale-alpha($black, $middle_opacity);
38
$alt_bg_color: scale-alpha($black, $lower_opacity);
39
$inverse_bg_color: scale-alpha($inverse_fg_color, 0.1);
40
$panel_bg_color: if($titlebar == 'dark', $blue_grey_900, $bg_color);
41
$fill_color: scale-alpha($fg_color, $lower_opacity);
43
$semi_fill_color: scale-alpha($fg_color, $lower_opacity / 2);
44
$disabled_fill_color: scale-alpha($disabled_fg_color, $lower_opacity);
45
$inverse_fill_color: scale-alpha($inverse_fg_color, $lower_opacity);
47
$semi_inverse_fill_color: scale-alpha($inverse_fg_color, $lower_opacity / 2);
48
$disabled_inverse_fill_color: scale-alpha($disabled_inverse_fg_color, $lower_opacity);
49
// Misc colors
51
$primary_color: $blue_400;
52
$alt_primary_color: $light_blue_A200;
53
$accent_color: $pink_A200;
54
$link_color: $primary_color;
56
$visited_link_color: $purple_A200;
57
$warning_color: $orange_A700;
59
$error_color: $deep_orange_A700;
60
$success_color: $green_A700;
61
$suggested_color: $accent_color;
63
$destructive_color: $red_A200;
64
$info_bg_color: $green_400;
66
$question_bg_color: $blue_400;
67
$warning_bg_color: $orange_400;
68
$error_bg_color: $red_400;
69
$border_color: if($variant == 'light', scale-alpha($black, 0.1), scale-alpha($black, 0.2));
71
$highlight_color: if($variant == 'light', scale-alpha($white, 0.4), scale-alpha($white, 0.1));
72
$alt_highlight_color: scale-alpha($white, 0.2);
73