_colors.scss
ASCII text
1
// When color definition differs for dark and light variant,
2
// it gets @if ed depending on $variant
3
4
@import 'color-palette';
5
6
@function gtkalpha($c, $a) {
7
@return unquote("alpha(#{$c}, #{$a})");
8
}
9
10
@function on($color, $state: 'primary') {
11
@if ($color == 'light') { $color: white; }
12
@if ($color == 'dark') { $color: black; }
13
14
// Calculate color brightness according to https://www.w3.org/TR/AERT/#color-contrast
15
$brightness: (red($color) * 299 + green($color) * 587 + blue($color) * 114) / 1000;
16
17
@if ($brightness >= 128) {
18
@if ($state == 'primary') { @return rgba(black, 0.87); }
19
@if ($state == 'secondary') { @return rgba(black, 0.54); }
20
@if ($state == 'disabled') { @return rgba(black, 0.38); }
21
@if ($state == 'secondary-disabled') { @return rgba(black, 0.26); }
22
@if ($state == 'track') { @return rgba(black, 0.26); }
23
@if ($state == 'track-disabled') { @return rgba(black, 0.12); }
24
@if ($state == 'divider') { @return rgba(black, 0.12); }
25
@if ($state == 'fill') { @return rgba(black, 0.04); }
26
} @else {
27
@if ($state == 'primary') { @return white; }
28
@if ($state == 'secondary') { @return rgba(white, 0.7); }
29
@if ($state == 'disabled') { @return rgba(white, 0.5); }
30
@if ($state == 'secondary-disabled') { @return rgba(white, 0.3); }
31
@if ($state == 'track') { @return rgba(white, 0.3); }
32
@if ($state == 'track-disabled') { @return rgba(white, 0.12); }
33
@if ($state == 'divider') { @return rgba(white, 0.12); }
34
@if ($state == 'fill') { @return rgba(white, 0.04); }
35
}
36
}
37
38
@function highlight($color) {
39
@if (lightness($color) > 80%) { @return rgba(white, 0.4); }
40
@else if (lightness($color) > 40%) { @return rgba(white, 0.2); }
41
@else { @return rgba(white, 0.1); }
42
}
43
44
//
45
// Basic colors
46
//
47
48
$blue: #4285F4;
49
$green: #34A853;
50
$yellow: #FBBC05;
51
$red: #EA4335;
52
53
$primary: $blue;
54
$primary-alt: #7BAAF7;
55
56
$background: if($variant == 'light', #F2F2F2, #282828);
57
$surface: if($variant == 'light', #FFFFFF, #424242);
58
$base: if($variant == 'light', #FFFFFF, #303030); // semi-surface with no elevation
59
$base-alt: if($variant == 'light', #FAFAFA, #2C2C2C);
60
61
$os-background: #303030;
62
$tooltip: rgba(#616161, 0.9);
63
$scrim: rgba(black, 0.6);
64
$scrim-alt: rgba(black, 0.3);
65
$scrim-inverse: rgba(white, 0.1);
66
$titlebar: if($topbar == 'dark', #383838, #E0E0E0);
67
$panel: if($topbar == 'dark', #212121, $scrim);
68
$panel-solid: if($topbar == 'dark', #212121, #CBCBCB); // for Unity panel which doesn't allow translucent colors
69
70
//
71
// Misc colors
72
//
73
74
$link: $primary;
75
$link-visited: $purple-a200;
76
77
$warning: $yellow;
78
$error: $red;
79
$success: $green;
80
81
$suggested: $primary;
82
$destructive: $error;
83
84
$infobar-info: $green;
85
$infobar-question: $blue;
86
$infobar-warning: $warning;
87
$infobar-error: $error;
88
89
$frame: if($variant == 'light', rgba(black, 0.12), rgba(black, 0.26)); // instead of shadows
90
$border-alt: rgba(black, 0.26); // darker border color for Chrome and Firefox
91
$titlebar-indicator: if($topbar == 'dark', currentColor, $primary);
92
93
//
94
// Overlay state colors
95
//
96
97
$overlay-hover: gtkalpha(currentColor, 0.08);
98
$overlay-focus: gtkalpha(currentColor, 0.12);
99
$overlay-focus-hover: gtkalpha(currentColor, 0.16);
100
$overlay-active: gtkalpha(currentColor, 0.12);
101
$overlay-checked: gtkalpha(currentColor, 0.12);
102
$overlay-selected: rgba($primary, 0.32);
103
104
//
105
// Text and derivative colors
106
//
107
108
$text: on($background);
109
$text-secondary: on($background, secondary);
110
$text-disabled: on($background, disabled);
111
$text-secondary-disabled: on($background, secondary-disabled);
112
$track: on($background, track);
113
$track-disabled: on($background, track-disabled);
114
$divider: on($background, divider);
115
$fill: on($background, fill);
116
117
$titlebar-text: on($titlebar);
118
$titlebar-text-secondary: on($titlebar, secondary);
119
$titlebar-text-disabled: on($titlebar, disabled);
120
$titlebar-text-secondary-disabled: on($titlebar, secondary-disabled);
121
$titlebar-track: on($titlebar, track);
122
$titlebar-track-disabled: on($titlebar, track-disabled);
123
$titlebar-divider: on($titlebar, divider);
124
$titlebar-fill: on($titlebar, fill);
125
126
// workaround for GTK3 @placeholder_text_color which doesn't allow translucent colors
127
$placeholder_text_color: if($variant == 'light', $grey-600, mix($white, $base, percentage(0.7)));
128