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