Unicode text, UTF-8 text
1
// When color definition differs for dark and light variant,
2
// it gets @if ed depending on $variant
3
@use "sass:color";
5
@use "sass:math";
6
@use "sass:string";
7
@use "theme";
8
@use "color-palette";
9
@function gtkalpha($color, $alpha) {
11
@return string.unquote("alpha(#{$color}, #{$alpha})");
12
}
13
// Determine whether the color has alpha.
15
@function _has-alpha($color) {
16
@return if(color.alpha($color) < 1, true, false);
17
}
18
// Determine whether the color is dark.
20
@function _is-dark($color) {
21
// Calculate color brightness as per https://www.w3.org/TR/AERT/#color-contrast
22
$brightness: (color.red($color) * 299 + color.green($color) * 587 + color.blue($color) * 114) / 1000;
23
@return if($brightness < 128, true, false);
25
}
26
$on-light: #000;
28
$on-dark: #fff;
29
// Determine whether to use dark or light color on top of given color
31
// to meet accessibility standards for contrast.
32
@function on($color) {
33
$contrast-color: if(_is-dark($color), $on-dark, $on-light);
34
@if color.saturation($color) > 50% or color.alpha($color) < 1 {
36
@return $contrast-color;
37
} @else {
38
@return rgba($contrast-color, .87);
39
}
40
}
41
// Determine the strength of highlight on top of given color.
43
@function highlight($color) {
44
@if color.lightness($color) >= 80% {
45
@return rgba(white, .4);
46
} @else if color.lightness($color) >= 40% {
47
@return rgba(white, .2);
48
} @else {
49
@return rgba(white, .05);
50
}
51
}
52
// Make translucent color opaque by blending with the background color.
54
@function opacify($color, $on) {
55
@return color.mix(color.change($color, $alpha: 1), $on, color.alpha($color) * 100%);
56
}
57
//
59
// Main colors
60
//
61
$surface-z0: color-palette.$grey-50;
63
$surface-z1: #fff;
64
$surface-z8: #fff;
65
$surface-switch-thumb: #fff;
66
$on-surface: on($surface-z0);
67
$primary-on-light: color-palette.$teal-500;
69
$primary-on-dark: color-palette.$teal-300;
70
$primary: $primary-on-light;
71
$on-primary: on($primary);
72
$error-on-light: color-palette.$red-a700;
74
$error-on-dark: color-palette.$red-a200;
75
$error: $error-on-light;
76
$on-error: on($error);
77
$warning-on-light: color-palette.$amber-a700;
79
$warning-on-dark: color-palette.$amber-a200;
80
$warning: $warning-on-light;
81
$on-warning: on($warning);
82
$success-on-light: color-palette.$green-600;
84
$success-on-dark: color-palette.$green-300;
85
$success: $success-on-light;
86
$on-success: on($success);
87
$visited-on-light: color-palette.$purple-700;
89
$visited-on-dark: color-palette.$purple-300;
90
$visited: $visited-on-light;
91
$on-visited: on($visited);
92
$system: color-palette.$blue-grey-800;
94
$on-system: on($system);
95
$tooltip: color-palette.$blue-grey-600;
97
$on-tooltip: on($tooltip);
98
$scrim: rgba(black, .6);
100
$on-scrim: on($scrim);
101
$scrim-alt: rgba(black, .3);
103
$on-scrim-alt: on($scrim-alt);
104
$panel: color-palette.$blue-grey-900;
106
$on-panel: on($panel);
107
// for Unity panel which doesn't allow translucent colors
109
$panel-solid: $panel;
110
$on-panel-solid: on($panel-solid);
111
$titlebar: color-palette.$blue-grey-600;
113
$titlebar-backdrop: color.mix(color-palette.$blue-grey-600, color-palette.$blue-grey-700, 50%);
114
$on-titlebar: on($titlebar);
115
$titlebar-indicator: currentcolor;
117
@if theme.$dark-theme {
119
$surface-z0: color-palette.$blue-grey-700;
120
$surface-z1: color.mix(color-palette.$blue-grey-600, color-palette.$blue-grey-700, 50%);
121
$surface-z8: color-palette.$blue-grey-600;
122
$surface-switch-thumb: color-palette.$blue-grey-300;
123
$on-surface: on($surface-z0);
124
$primary: $primary-on-dark;
126
$on-primary: on($primary);
127
$error: $error-on-dark;
129
$on-error: on($error);
130
$warning: $warning-on-dark;
132
$on-warning: on($warning);
133
$success: $success-on-dark;
135
$on-success: on($success);
136
$visited: $visited-on-dark;
138
$on-visited: on($visited);
139
$titlebar: color-palette.$blue-grey-600;
141
$titlebar-backdrop: $surface-z1;
142
$on-titlebar: on($titlebar);
143
}
144
@if theme.$light-topbar {
146
$panel: $scrim;
147
$on-panel: on($panel);
148
$panel-solid: color-palette.$grey-100;
150
$on-panel-solid: on($panel-solid);
151
$titlebar: color-palette.$grey-100;
153
$titlebar-backdrop: color-palette.$grey-50;
154
$on-titlebar: on($titlebar);
155
$titlebar-indicator: $primary;
157
}
158
//
160
// Overlay state colors
161
//
162
// Determine the overlay color depending on the given color and opacity.
164
@function _overlay($color, $opacity, $on) {
165
$opacity-modifier: 0;
166
@if color.saturation($color) > 50% or color.saturation($on) > 50% {
168
$opacity-modifier: .04;
169
}
170
@return color.mix(rgba($color, 1), $on, math.percentage($opacity + $opacity-modifier));
172
}
173
@function hover-overlay($color, $opacity-modifier: 0, $on: transparent, $alt: false) {
175
$opacity: .08;
176
@if $alt {
178
$opacity: .04;
179
}
180
@return _overlay($color: $color, $opacity: $opacity + $opacity-modifier, $on: $on);
182
}
183
@function focus-overlay($color, $opacity-modifier: 0, $on: transparent) {
185
$opacity: .08;
186
@return _overlay($color: $color, $opacity: $opacity + $opacity-modifier, $on: $on);
188
}
189
@function pressed-overlay($color, $opacity-modifier: 0, $on: transparent) {
191
$opacity: .12;
192
@return _overlay($color: $color, $opacity: $opacity + $opacity-modifier, $on: $on);
194
}
195
@function dragged-overlay($color, $opacity-modifier: 0, $on: transparent) {
197
$opacity: .08;
198
@return _overlay($color: $color, $opacity: $opacity + $opacity-modifier, $on: $on);
200
}
201
@function activated-overlay($color, $opacity-modifier: 0, $on: transparent) {
203
$opacity: .12;
204
@return _overlay($color: $color, $opacity: $opacity + $opacity-modifier, $on: $on);
206
}
207
@function selected-overlay($color, $opacity-modifier: 0) {
209
$opacity: .24;
210
@if $color == $on-surface {
212
$color: $primary;
213
}
214
@return rgba($color, $opacity + $opacity-modifier);
216
}
217
$selected-overlay: selected-overlay($on-surface);
219
//
221
// For “on” colors
222
//
223
@function primary($color) {
225
@return if(_is-dark($color), $primary-on-light, $primary-on-dark);
226
}
227
@function error($color) {
229
@return if(_is-dark($color), $error-on-light, $error-on-dark);
230
}
231
@function hint($color) {
233
@return if(_has-alpha($color), rgba($color, .6), rgba($color, .7));
234
}
235
@function disabled($color) {
237
@return if(_has-alpha($color), rgba($color, .38), rgba($color, .5));
238
}
239
@function disabled-hint($color) {
241
@return if(_has-alpha($color), rgba($color, .26), rgba($color, .3));
242
}
243
@function stroke($color) {
245
@return if(_has-alpha($color), rgba($color, .26), rgba($color, .3));
246
}
247
@function disabled-stroke($color) {
249
@return if(_has-alpha($color), rgba($color, .12), rgba($color, .2));
250
}
251
@function divider($color) {
253
@return if(_has-alpha($color), rgba($color, .12), rgba($color, .2));
254
}
255
@function fill($color) {
257
@return if(_has-alpha($color), rgba($color, .08), rgba($color, .08));
258
}
259
@function entry-fill($color) {
261
@return if(_has-alpha($color), rgba($color, .04), rgba($color, .04));
262
}
263
@function scrollbar-thumb($color, $state: null) {
265
@if $state == null {
266
@return if(_has-alpha($color), rgba($color, .38), rgba($color, .5));
267
} @else if $state == "hover" {
268
@return if(_has-alpha($color), rgba($color, .48), rgba($color, .6));
269
} @else if $state == "pressed" {
270
@return if(_has-alpha($color), rgba($color, .6), rgba($color, .7));
271
} @else if $state == "disabled" {
272
@return if(_has-alpha($color), rgba($color, .26), rgba($color, .3));
273
} @else {
274
@error "Invalid type: '#{$state}'";
275
}
276
}
277