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 "light" or "dark".
16
@function tone($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
@if $brightness >= 128 {
21
@return "light";
22
} @else {
23
@return "dark";
24
}
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(tone($color) == "dark", $on-dark, $on-light);
34
@if saturation($color) > 50% or 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 lightness($color) >= 80% {
45
@return rgba(white, .4);
46
} @else if 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 mix(change-color($color, $alpha: 1), $on, alpha($color) * 100%);
56
}
57
$state-overlay-opacities: (
59
"hover": .08,
60
"hover-alt": .04,
61
"focus": .08,
62
"pressed": .12,
63
"dragged": .08,
64
"activated": .12,
65
"selected": .24,
66
);
67
// Determine the overlay color depending on the given state and color.
69
@function overlay($state, $color, $on: transparent, $opacity-modifier: 0) {
70
@if not map-has-key($state-overlay-opacities, $state) {
71
@error "Invalid state: '#{$state}'. Choose one of: #{map-keys($state-overlay-opacities)}";
72
}
73
@if saturation($color) > 50% or saturation($on) > 50% {
75
$opacity-modifier: .04;
76
}
77
$opacity: map-get($state-overlay-opacities, $state) + $opacity-modifier;
79
@return mix(rgba($color, 1), $on, $opacity * 100%);
81
}
82
// Private variables for dark background colors
84
$-dark-background: if(tone(%BG%) == "dark", %BG%, %FG%);
85
$-dark-surface-1dp: mix(white, $-dark-background, 5%);
86
$-dark-surface-4dp: mix(white, $-dark-background, 9%);
87
$-dark-surface-8dp: mix(white, $-dark-background, 12%);
88
$-dark-surface-switch: mix(white, $-dark-background, 60%);
89
//
91
// Main colors
92
//
93
$background: %BG%;
95
$base: %MATERIA_VIEW%; // for views
96
$surface: %MATERIA_SURFACE%;
97
$switch-surface: %MATERIA_SURFACE%; // Special case for switches
98
$on-surface: %FG%;
99
$primary-on-light: %SEL_BG%;
101
$primary-on-dark: %SEL_BG%;
102
$primary: $primary-on-light;
103
$on-primary: on($primary);
104
$error-on-light: %TERMINAL_COLOR9%;
106
$error-on-dark: %TERMINAL_COLOR9%;
107
$error: $error-on-light;
108
$on-error: on($error);
109
$warning-on-light: %TERMINAL_COLOR11%;
111
$warning-on-dark: %TERMINAL_COLOR11%;
112
$warning: $warning-on-light;
113
$on-warning: on($warning);
114
$success-on-light: %TERMINAL_COLOR10%;
116
$success-on-dark: %TERMINAL_COLOR10%;
117
$success: $success-on-light;
118
$on-success: on($success);
119
$visited-on-light: %TERMINAL_COLOR5%;
121
$visited-on-dark: %TERMINAL_COLOR5%;
122
$visited: $visited-on-light;
123
$on-visited: on($visited);
124
$os-background: %HDR_BG3%;
126
$on-os-background: %HDR_FG%;
127
$tooltip: rgba(%HDR_BG%, .9);
129
$on-tooltip: %HDR_FG%;
130
$scrim: rgba(black, %MATERIA_PANEL_OPACITY%);
132
$on-scrim: on($scrim);
133
$scrim-alt: rgba(black, .3);
135
$on-scrim-alt: on($scrim-alt);
136
$panel: %HDR_BG3%;
138
$on-panel: %HDR_FG%;
139
// for Unity panel which doesn't allow translucent colors
141
$panel-solid: %HDR_BG3%;
142
$on-panel-solid: %HDR_FG%;
143
$titlebar: %HDR_BG%;
145
$titlebar-backdrop: %HDR_BG2%;
146
$on-titlebar: %HDR_FG%;
147
$titlebar-indicator: currentcolor;
149
@if $variant == "dark" {
151
$background: if(tone(%BG%) == "dark", %BG%, $-dark-background);
152
$base: if(tone(%BG%) == "dark", %MATERIA_VIEW%, $-dark-surface-1dp);
153
$surface: if(tone(%BG%) == "dark", %MATERIA_SURFACE%, $-dark-surface-8dp);
154
$switch-surface: if(tone(%BG%) == "dark", %MATERIA_SURFACE%, $-dark-surface-switch);
155
$on-surface: if(tone(%BG%) == "dark", %FG%, on($surface));
156
$primary: $primary-on-dark;
158
$on-primary: on($primary);
159
$error: $error-on-dark;
161
$on-error: on($error);
162
$warning: $warning-on-dark;
164
$on-warning: on($warning);
165
$success: $success-on-dark;
167
$on-success: on($success);
168
$visited: $visited-on-dark;
170
$on-visited: on($visited);
171
$titlebar: if(tone(%BG%) == "dark", %HDR_BG%, $-dark-surface-4dp);
173
$titlebar-backdrop: if(tone(%BG%) == "dark", %HDR_BG2%, $-dark-surface-1dp);
174
$on-titlebar: if(tone(%BG%) == "dark", %HDR_FG%, on($titlebar));
175
}
176
@if $topbar == "light" {
178
$panel: $scrim;
179
$on-panel: on($panel);
180
$titlebar-indicator: $primary;
182
}
183
//
185
// Overlay state colors
186
//
187
$overlay-selected: rgba($primary, %MATERIA_SELECTION_OPACITY%);
189
//
191
// For “on” colors
192
//
193
@function primary($color) {
195
@return if(tone($color) == "dark", $primary-on-light, $primary-on-dark);
196
}
197
@function error($color) {
199
@return if(tone($color) == "dark", $error-on-light, $error-on-dark);
200
}
201
@function hint($color) {
203
@return rgba($color, if(has-alpha($color), .6, .7));
204
}
205
@function disabled($color) {
207
@return rgba($color, if(has-alpha($color), .38, .5));
208
}
209
@function disabled-hint($color) {
211
@return rgba($color, if(has-alpha($color), .26, .3));
212
}
213
@function stroke($color) {
215
@return rgba($color, if(has-alpha($color), .26, .3));
216
}
217
@function disabled-stroke($color) {
219
@return rgba($color, if(has-alpha($color), .12, .2));
220
}
221
@function divider($color) {
223
@return rgba($color, if(has-alpha($color), .12, .2));
224
}
225
@function fill($color) {
227
@return rgba($color, if(has-alpha($color), .08, .08));
228
}
229
@function entry-fill($color) {
231
@return rgba($color, if(has-alpha($color), .04, .04));
232
}
233
@function scrollbar-thumb($color, $state: null) {
235
@if $state == null {
236
@return rgba($color, if(has-alpha($color), .38, .5));
237
} @else if $state == "hover" {
238
@return rgba($color, if(has-alpha($color), .48, .6));
239
} @else if $state == "pressed" {
240
@return rgba($color, if(has-alpha($color), .6, .7));
241
} @else if $state == "disabled" {
242
@return rgba($color, if(has-alpha($color), .26, .3));
243
} @else {
244
@error "Invalid type: '#{$state}'";
245
}
246
}
247