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
@function gtkalpha($color, $alpha) {
10
@return string.unquote("alpha(#{$color}, #{$alpha})");
11
}
12
// Determine whether the color has alpha.
14
@function _has-alpha($color) {
15
@return if(color.alpha($color) < 1, true, false);
16
}
17
// Determine whether the color is dark.
19
@function _is-dark($color) {
20
// Calculate color brightness as per https://www.w3.org/TR/AERT/#color-contrast
21
$brightness: (color.red($color) * 299 + color.green($color) * 587 + color.blue($color) * 114) / 1000;
22
@return if($brightness < 128, true, false);
24
}
25
$on-light: #000;
27
$on-dark: #fff;
28
// Determine whether to use dark or light color on top of given color
30
// to meet accessibility standards for contrast.
31
@function on($color) {
32
$contrast-color: if(_is-dark($color), $on-dark, $on-light);
33
@if color.saturation($color) > 50% or color.alpha($color) < 1 {
35
@return $contrast-color;
36
} @else {
37
@return rgba($contrast-color, .87);
38
}
39
}
40
// Determine the strength of highlight on top of given color.
42
@function highlight($color) {
43
@if color.lightness($color) >= 80% {
44
@return rgba(white, .4);
45
} @else if color.lightness($color) >= 40% {
46
@return rgba(white, .2);
47
} @else {
48
@return rgba(white, .05);
49
}
50
}
51
// Make translucent color opaque by blending with the background color.
53
@function opacify($color, $on) {
54
@return color.mix(color.change($color, $alpha: 1), $on, color.alpha($color) * 100%);
55
}
56
//
58
// Main colors
59
//
60
$surface-z0: %BG%;
62
$surface-z1: %MATERIA_VIEW%;
63
$surface-z8: %MATERIA_SURFACE%;
64
$surface-switch-thumb: %MATERIA_SURFACE%;
65
$on-surface: %FG%;
66
$primary-on-light: %SEL_BG%;
68
$primary-on-dark: %SEL_BG%;
69
$primary: $primary-on-light;
70
$on-primary: on($primary);
71
$error-on-light: %TERMINAL_COLOR9%;
73
$error-on-dark: %TERMINAL_COLOR9%;
74
$error: $error-on-light;
75
$on-error: on($error);
76
$warning-on-light: %TERMINAL_COLOR11%;
78
$warning-on-dark: %TERMINAL_COLOR11%;
79
$warning: $warning-on-light;
80
$on-warning: on($warning);
81
$success-on-light: %TERMINAL_COLOR10%;
83
$success-on-dark: %TERMINAL_COLOR10%;
84
$success: $success-on-light;
85
$on-success: on($success);
86
$visited-on-light: %TERMINAL_COLOR5%;
88
$visited-on-dark: %TERMINAL_COLOR5%;
89
$visited: $visited-on-light;
90
$on-visited: on($visited);
91
$system: %HDR_BG3%;
93
$on-system: %HDR_FG%;
94
$tooltip: rgba(%HDR_BG%, .9);
96
$on-tooltip: %HDR_FG%;
97
$scrim: rgba(black, %MATERIA_PANEL_OPACITY%);
99
$on-scrim: on($scrim);
100
$scrim-alt: rgba(black, .3);
102
$on-scrim-alt: on($scrim-alt);
103
$panel: %HDR_BG3%;
105
$on-panel: %HDR_FG%;
106
// for Unity panel which doesn't allow translucent colors
108
$panel-solid: %HDR_BG3%;
109
$on-panel-solid: %HDR_FG%;
110
$titlebar: %HDR_BG%;
112
$titlebar-backdrop: %HDR_BG2%;
113
$on-titlebar: %HDR_FG%;
114
$titlebar-indicator: currentcolor;
116
@if theme.$dark-theme {
118
$surface-z0: if(_is-dark(%BG%), %BG%, %FG%);
119
$surface-z1: if(_is-dark(%BG%), %MATERIA_VIEW%, color.mix(white, $surface-z0, 5%));
120
$surface-z8: if(_is-dark(%BG%), %MATERIA_SURFACE%, color.mix(white, $surface-z0, 12%));
121
$surface-switch-thumb: if(_is-dark(%BG%), %MATERIA_SURFACE%, color.mix(white, $surface-z0, 60%));
122
$on-surface: if(_is-dark(%BG%), %FG%, on($surface-z0));
123
$primary: $primary-on-dark;
125
$on-primary: on($primary);
126
$error: $error-on-dark;
128
$on-error: on($error);
129
$warning: $warning-on-dark;
131
$on-warning: on($warning);
132
$success: $success-on-dark;
134
$on-success: on($success);
135
$visited: $visited-on-dark;
137
$on-visited: on($visited);
138
$titlebar: if(_is-dark(%BG%), %HDR_BG%, color.mix(white, $surface-z0, 9%));
140
$titlebar-backdrop: if(_is-dark(%BG%), %HDR_BG2%, $surface-z1);
141
$on-titlebar: if(_is-dark(%BG%), %HDR_FG%, on($titlebar));
142
}
143
@if theme.$light-topbar {
145
$panel: $scrim;
146
$on-panel: on($panel);
147
$titlebar-indicator: $primary;
149
}
150
//
152
// Overlay state colors
153
//
154
// Determine the overlay color depending on the given color and opacity.
156
@function _overlay($color, $opacity, $on) {
157
$opacity-modifier: 0;
158
@if color.saturation($color) > 50% or color.saturation($on) > 50% {
160
$opacity-modifier: .04;
161
}
162
@return color.mix(rgba($color, 1), $on, math.percentage($opacity + $opacity-modifier));
164
}
165
@function hover-overlay($color, $opacity-modifier: 0, $on: transparent, $alt: false) {
167
$opacity: .08;
168
@if $alt {
170
$opacity: .04;
171
}
172
@return _overlay($color: $color, $opacity: $opacity + $opacity-modifier, $on: $on);
174
}
175
@function focus-overlay($color, $opacity-modifier: 0, $on: transparent) {
177
$opacity: .08;
178
@return _overlay($color: $color, $opacity: $opacity + $opacity-modifier, $on: $on);
180
}
181
@function pressed-overlay($color, $opacity-modifier: 0, $on: transparent) {
183
$opacity: .12;
184
@return _overlay($color: $color, $opacity: $opacity + $opacity-modifier, $on: $on);
186
}
187
@function dragged-overlay($color, $opacity-modifier: 0, $on: transparent) {
189
$opacity: .08;
190
@return _overlay($color: $color, $opacity: $opacity + $opacity-modifier, $on: $on);
192
}
193
@function activated-overlay($color, $opacity-modifier: 0, $on: transparent) {
195
$opacity: .12;
196
@return _overlay($color: $color, $opacity: $opacity + $opacity-modifier, $on: $on);
198
}
199
@function selected-overlay($color, $opacity-modifier: 0) {
201
$opacity: %MATERIA_SELECTION_OPACITY%;
202
@if $color == $on-surface {
204
$color: $primary;
205
}
206
@return rgba($color, $opacity + $opacity-modifier);
208
}
209
$selected-overlay: selected-overlay($on-surface);
211
//
213
// For “on” colors
214
//
215
@function primary($color) {
217
@return if(_is-dark($color), $primary-on-light, $primary-on-dark);
218
}
219
@function error($color) {
221
@return if(_is-dark($color), $error-on-light, $error-on-dark);
222
}
223
@function hint($color) {
225
@return if(_has-alpha($color), rgba($color, .6), rgba($color, .7));
226
}
227
@function disabled($color) {
229
@return if(_has-alpha($color), rgba($color, .38), rgba($color, .5));
230
}
231
@function disabled-hint($color) {
233
@return if(_has-alpha($color), rgba($color, .26), rgba($color, .3));
234
}
235
@function stroke($color) {
237
@return if(_has-alpha($color), rgba($color, .26), rgba($color, .3));
238
}
239
@function disabled-stroke($color) {
241
@return if(_has-alpha($color), rgba($color, .12), rgba($color, .2));
242
}
243
@function divider($color) {
245
@return if(_has-alpha($color), rgba($color, .12), rgba($color, .2));
246
}
247
@function fill($color) {
249
@return if(_has-alpha($color), rgba($color, .08), rgba($color, .08));
250
}
251
@function entry-fill($color) {
253
@return if(_has-alpha($color), rgba($color, .04), rgba($color, .04));
254
}
255
@function scrollbar-thumb($color, $state: null) {
257
@if $state == null {
258
@return if(_has-alpha($color), rgba($color, .38), rgba($color, .5));
259
} @else if $state == "hover" {
260
@return if(_has-alpha($color), rgba($color, .48), rgba($color, .6));
261
} @else if $state == "pressed" {
262
@return if(_has-alpha($color), rgba($color, .6), rgba($color, .7));
263
} @else if $state == "disabled" {
264
@return if(_has-alpha($color), rgba($color, .26), rgba($color, .3));
265
} @else {
266
@error "Invalid type: '#{$state}'";
267
}
268
}
269