ASCII text
1
// When color definition differs for dark and light variant,
2
// it gets @if ed depending on $variant
3
@import 'color-palette';
5
@function gtkalpha($c, $a) {
7
@return unquote("alpha(#{$c}, #{$a})");
8
}
9
@function highlight($color) {
11
@if (lightness($color) > 80%) { @return rgba(white, 0.4); }
12
@else if (lightness($color) > 40%) { @return rgba(white, 0.2); }
13
@else { @return rgba(white, 0.1); }
14
}
15
//
17
// Basic colors
18
//
19
$blue: #4285F4;
21
$green: #34A853;
22
$yellow: #FBBC05;
23
$red: #EA4335;
24
$primary: $blue;
26
$primary-alt: #7BAAF7;
27
$background: if($variant == 'light', #F2F2F2, #282828);
29
$surface: if($variant == 'light', #FFFFFF, #424242);
30
$base: if($variant == 'light', #FFFFFF, #303030);
31
$base-alt: if($variant == 'light', #FAFAFA, #2C2C2C);
32
$os-background: #303030;
34
$tooltip: rgba(#616161, 0.9);
35
$scrim: rgba(black, 0.6);
36
$scrim-alt: rgba(black, 0.3);
37
$scrim-inverse: rgba(white, 0.1);
38
$titlebar: if($topbar == 'dark', #383838, #E0E0E0);
39
$panel: if($topbar == 'dark', #212121, $scrim);
40
$panel-solid: if($topbar == 'dark', #212121, #CBCBCB); // for Unity panel which cannot use translucent colors
41
//
43
// Misc colors
44
//
45
$link: $primary;
47
$link-visited: $purple-a200;
48
$warning: $yellow;
50
$error: $red;
51
$success: $green;
52
$suggested: $primary;
54
$destructive: $red;
55
$infobar-info: $green;
57
$infobar-question: $blue;
58
$infobar-warning: $yellow;
59
$infobar-error: $red;
60
$border: if($variant == 'light', rgba(black, 0.12), rgba(black, 0.26));
62
$border-alt: rgba(black, 0.26); // for non-native GTK+ apps (e.g. Firefox and Chrome)
63
$titlebar-indicator: if($topbar == 'dark', currentColor, $primary);
64
//
66
// Overlay state colors
67
//
68
$overlay-hover: gtkalpha(currentColor, 0.08);
70
$overlay-focus: gtkalpha(currentColor, 0.12);
71
$overlay-focus-hover: gtkalpha(currentColor, 0.16);
72
$overlay-active: gtkalpha(currentColor, 0.12);
73
$overlay-checked: gtkalpha(currentColor, 0.24);
74
$overlay-selected: rgba($primary, 0.32);
75
//
77
// Text and derivative colors
78
//
79
$text-on-light: rgba(black, 0.87);
81
$text-on-dark: white;
82
$tooltip-text: white;
83
$text: if($variant == 'light', rgba(black, 0.87), white);
85
$text-secondary: if($variant == 'light', rgba(black, 0.54), rgba(white, 0.7));
86
$text-disabled: if($variant == 'light', rgba(black, 0.38), rgba(white, 0.5));
87
$text-secondary-disabled: if($variant == 'light', rgba(black, 0.26), rgba(white, 0.3));
88
$track: if($variant == 'light', rgba(black, 0.26), rgba(white, 0.3));
89
$divider: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
90
$fill: if($variant == 'light', rgba(black, 0.04), rgba(white, 0.04));
91
$titlebar-text: if($topbar == 'light', rgba(black, 0.87), white);
93
$titlebar-text-secondary: if($topbar == 'light', rgba(black, 0.54), rgba(white, 0.7));
94
$titlebar-text-disabled: if($topbar == 'light', rgba(black, 0.38), rgba(white, 0.5));
95
$titlebar-text-secondary-disabled: if($topbar == 'light', rgba(black, 0.26), rgba(white, 0.3));
96
$titlebar-track: if($topbar == 'light', rgba(black, 0.26), rgba(white, 0.3));
97
$titlebar-divider: if($topbar == 'light', rgba(black, 0.12), rgba(white, 0.12));
98
$titlebar-fill: if($topbar == 'light', rgba(black, 0.04), rgba(white, 0.04));
99
$inverse-text: white;
101
$inverse-text-secondary: rgba(white, 0.7);
102
$inverse-text-disabled: rgba(white, 0.5);
103
$inverse-text-secondary-disabled: rgba(white, 0.3);
104
$inverse-track: rgba(white, 0.3);
105
$inverse-divider: rgba(white, 0.12);
106
$inverse-fill: rgba(white, 0.04);
107
// FIXME: Electron/Atom menu does not allow translucent colors
109
$solid-text: if($variant == 'light', $grey-900, $white);
110
$solid-text-secondary: if($variant == 'light', $grey-600, mix($white, $surface, percentage(0.7)));
111
$solid-text-disabled: if($variant == 'light', $grey-500, mix($white, $surface, percentage(0.5)));
112
$solid-divider: if($variant == 'light', $grey-300, mix($white, $surface, percentage(0.12)));
113
// FIXME: gtk @placeholder_text_color does not allow translucent colors
115
$placeholder_text_color: if($variant == 'light', $grey-600, mix($white, $base, percentage(0.7)));
116