Unicode text, UTF-8 text
1
// When color definition differs for dark and light variant,
2
// it gets @if ed depending on $variant
3
@import 'color-palette';
5
$dark-theme: false !default;
7
$light-topbar: false !default;
8
@function gtkalpha($color, $alpha) {
10
@return unquote("alpha(#{$color}, #{$alpha})");
11
}
12
// Determine whether the color has alpha.
14
@function has-alpha($color) {
15
@return if(alpha($color) < 1, true, false);
16
}
17
// Determine whether the color is "light" or "dark".
19
@function tone($color) {
20
// Calculate color brightness as per https://www.w3.org/TR/AERT/#color-contrast
21
$brightness: (red($color) * 299 + green($color) * 587 + blue($color) * 114) / 1000;
22
@if $brightness >= 128 {
24
@return "light";
25
} @else {
26
@return "dark";
27
}
28
}
29
$on-light: #000;
31
$on-dark: #fff;
32
// Determine whether to use dark or light color on top of given color
34
// to meet accessibility standards for contrast.
35
@function on($color) {
36
$contrast-color: if(tone($color) == "dark", $on-dark, $on-light);
37
@if saturation($color) > 50% or alpha($color) < 1 {
39
@return $contrast-color;
40
} @else {
41
@return rgba($contrast-color, .87);
42
}
43
}
44
// Determine the strength of highlight on top of given color.
46
@function highlight($color) {
47
@if lightness($color) >= 80% {
48
@return rgba(white, .4);
49
} @else if lightness($color) >= 40% {
50
@return rgba(white, .2);
51
} @else {
52
@return rgba(white, .05);
53
}
54
}
55
// Make translucent color opaque by blending with the background color.
57
@function opacify($color, $on) {
58
@return mix(change-color($color, $alpha: 1), $on, alpha($color) * 100%);
59
}
60
$state-overlay-opacities: (
62
"hover": .08,
63
"hover-alt": .04,
64
"focus": .08,
65
"pressed": .12,
66
"dragged": .08,
67
"activated": .12,
68
"selected": .24,
69
);
70
// Determine the overlay color depending on the given state and color.
72
@function overlay($state, $color, $on: transparent, $opacity-modifier: 0) {
73
@if not map-has-key($state-overlay-opacities, $state) {
74
@error "Invalid state: '#{$state}'. Choose one of: #{map-keys($state-overlay-opacities)}";
75
}
76
@if saturation($color) > 50% or saturation($on) > 50% {
78
$opacity-modifier: .04;
79
}
80
$opacity: map-get($state-overlay-opacities, $state) + $opacity-modifier;
82
@return mix(rgba($color, 1), $on, $opacity * 100%);
84
}
85
// Private variables for dark background colors
87
$-dark-surface-z0: if(tone(%BG%) == "dark", %BG%, %FG%);
88
$-dark-surface-z1: mix(white, $-dark-surface-z0, 5%);
89
$-dark-surface-z4: mix(white, $-dark-surface-z0, 9%);
90
$-dark-surface-z8: mix(white, $-dark-surface-z0, 12%);
91
$-dark-surface-switch-thumb: mix(white, $-dark-surface-z0, 60%);
92
//
94
// Main colors
95
//
96
$surface-z0: %BG%;
98
$surface-z1: %MATERIA_VIEW%;
99
$surface-z8: %MATERIA_SURFACE%;
100
$surface-switch-thumb: %MATERIA_SURFACE%;
101
$on-surface: %FG%;
102
$primary-on-light: %SEL_BG%;
104
$primary-on-dark: %SEL_BG%;
105
$primary: $primary-on-light;
106
$on-primary: on($primary);
107
$error-on-light: %TERMINAL_COLOR9%;
109
$error-on-dark: %TERMINAL_COLOR9%;
110
$error: $error-on-light;
111
$on-error: on($error);
112
$warning-on-light: %TERMINAL_COLOR11%;
114
$warning-on-dark: %TERMINAL_COLOR11%;
115
$warning: $warning-on-light;
116
$on-warning: on($warning);
117
$success-on-light: %TERMINAL_COLOR10%;
119
$success-on-dark: %TERMINAL_COLOR10%;
120
$success: $success-on-light;
121
$on-success: on($success);
122
$visited-on-light: %TERMINAL_COLOR5%;
124
$visited-on-dark: %TERMINAL_COLOR5%;
125
$visited: $visited-on-light;
126
$on-visited: on($visited);
127
$system: %HDR_BG3%;
129
$on-system: %HDR_FG%;
130
$tooltip: rgba(%HDR_BG%, .9);
132
$on-tooltip: %HDR_FG%;
133
$scrim: rgba(black, %MATERIA_PANEL_OPACITY%);
135
$on-scrim: on($scrim);
136
$scrim-alt: rgba(black, .3);
138
$on-scrim-alt: on($scrim-alt);
139
$panel: %HDR_BG3%;
141
$on-panel: %HDR_FG%;
142
// for Unity panel which doesn't allow translucent colors
144
$panel-solid: %HDR_BG3%;
145
$on-panel-solid: %HDR_FG%;
146
$titlebar: %HDR_BG%;
148
$titlebar-backdrop: %HDR_BG2%;
149
$on-titlebar: %HDR_FG%;
150
$titlebar-indicator: currentcolor;
152
@if $dark-theme {
154
$surface-z0: if(tone(%BG%) == "dark", %BG%, $-dark-surface-z0);
155
$surface-z1: if(tone(%BG%) == "dark", %MATERIA_VIEW%, $-dark-surface-z1);
156
$surface-z8: if(tone(%BG%) == "dark", %MATERIA_SURFACE%, $-dark-surface-z8);
157
$surface-switch-thumb: if(tone(%BG%) == "dark", %MATERIA_SURFACE%, $-dark-surface-switch-thumb);
158
$on-surface: if(tone(%BG%) == "dark", %FG%, on($surface-z0));
159
$primary: $primary-on-dark;
161
$on-primary: on($primary);
162
$error: $error-on-dark;
164
$on-error: on($error);
165
$warning: $warning-on-dark;
167
$on-warning: on($warning);
168
$success: $success-on-dark;
170
$on-success: on($success);
171
$visited: $visited-on-dark;
173
$on-visited: on($visited);
174
$titlebar: if(tone(%BG%) == "dark", %HDR_BG%, $-dark-surface-z4);
176
$titlebar-backdrop: if(tone(%BG%) == "dark", %HDR_BG2%, $-dark-surface-z1);
177
$on-titlebar: if(tone(%BG%) == "dark", %HDR_FG%, on($titlebar));
178
}
179
@if $light-topbar {
181
$panel: $scrim;
182
$on-panel: on($panel);
183
$titlebar-indicator: $primary;
185
}
186
//
188
// Overlay state colors
189
//
190
$overlay-selected: rgba($primary, %MATERIA_SELECTION_OPACITY%);
192
//
194
// For “on” colors
195
//
196
@function primary($color) {
198
@return if(tone($color) == "dark", $primary-on-light, $primary-on-dark);
199
}
200
@function error($color) {
202
@return if(tone($color) == "dark", $error-on-light, $error-on-dark);
203
}
204
@function hint($color) {
206
@return rgba($color, if(has-alpha($color), .6, .7));
207
}
208
@function disabled($color) {
210
@return rgba($color, if(has-alpha($color), .38, .5));
211
}
212
@function disabled-hint($color) {
214
@return rgba($color, if(has-alpha($color), .26, .3));
215
}
216
@function stroke($color) {
218
@return rgba($color, if(has-alpha($color), .26, .3));
219
}
220
@function disabled-stroke($color) {
222
@return rgba($color, if(has-alpha($color), .12, .2));
223
}
224
@function divider($color) {
226
@return rgba($color, if(has-alpha($color), .12, .2));
227
}
228
@function fill($color) {
230
@return rgba($color, if(has-alpha($color), .08, .08));
231
}
232
@function entry-fill($color) {
234
@return rgba($color, if(has-alpha($color), .04, .04));
235
}
236
@function scrollbar-thumb($color, $state: null) {
238
@if $state == null {
239
@return rgba($color, if(has-alpha($color), .38, .5));
240
} @else if $state == "hover" {
241
@return rgba($color, if(has-alpha($color), .48, .6));
242
} @else if $state == "pressed" {
243
@return rgba($color, if(has-alpha($color), .6, .7));
244
} @else if $state == "disabled" {
245
@return rgba($color, if(has-alpha($color), .26, .3));
246
} @else {
247
@error "Invalid type: '#{$state}'";
248
}
249
}
250