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 dark.
19
@function _is-dark($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
@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 saturation($color) > 50% or 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 lightness($color) >= 80% {
44
@return rgba(white, .4);
45
} @else if 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 mix(change-color($color, $alpha: 1), $on, alpha($color) * 100%);
55
}
56
$state-overlay-opacities: (
58
"hover": .08,
59
"hover-alt": .04,
60
"focus": .08,
61
"pressed": .12,
62
"dragged": .08,
63
"activated": .12,
64
"selected": .24,
65
);
66
// Determine the overlay color depending on the given state and color.
68
@function overlay($state, $color, $on: transparent, $opacity-modifier: 0) {
69
@if not map-has-key($state-overlay-opacities, $state) {
70
@error "Invalid state: '#{$state}'. Choose one of: #{map-keys($state-overlay-opacities)}";
71
}
72
@if saturation($color) > 50% or saturation($on) > 50% {
74
$opacity-modifier: .04;
75
}
76
$opacity: map-get($state-overlay-opacities, $state) + $opacity-modifier;
78
@return mix(rgba($color, 1), $on, $opacity * 100%);
80
}
81
//
83
// Main colors
84
//
85
$surface-z0: %BG%;
87
$surface-z1: %MATERIA_VIEW%;
88
$surface-z8: %MATERIA_SURFACE%;
89
$surface-switch-thumb: %MATERIA_SURFACE%;
90
$on-surface: %FG%;
91
$primary-on-light: %SEL_BG%;
93
$primary-on-dark: %SEL_BG%;
94
$primary: $primary-on-light;
95
$on-primary: on($primary);
96
$error-on-light: %TERMINAL_COLOR9%;
98
$error-on-dark: %TERMINAL_COLOR9%;
99
$error: $error-on-light;
100
$on-error: on($error);
101
$warning-on-light: %TERMINAL_COLOR11%;
103
$warning-on-dark: %TERMINAL_COLOR11%;
104
$warning: $warning-on-light;
105
$on-warning: on($warning);
106
$success-on-light: %TERMINAL_COLOR10%;
108
$success-on-dark: %TERMINAL_COLOR10%;
109
$success: $success-on-light;
110
$on-success: on($success);
111
$visited-on-light: %TERMINAL_COLOR5%;
113
$visited-on-dark: %TERMINAL_COLOR5%;
114
$visited: $visited-on-light;
115
$on-visited: on($visited);
116
$system: %HDR_BG3%;
118
$on-system: %HDR_FG%;
119
$tooltip: rgba(%HDR_BG%, .9);
121
$on-tooltip: %HDR_FG%;
122
$scrim: rgba(black, %MATERIA_PANEL_OPACITY%);
124
$on-scrim: on($scrim);
125
$scrim-alt: rgba(black, .3);
127
$on-scrim-alt: on($scrim-alt);
128
$panel: %HDR_BG3%;
130
$on-panel: %HDR_FG%;
131
// for Unity panel which doesn't allow translucent colors
133
$panel-solid: %HDR_BG3%;
134
$on-panel-solid: %HDR_FG%;
135
$titlebar: %HDR_BG%;
137
$titlebar-backdrop: %HDR_BG2%;
138
$on-titlebar: %HDR_FG%;
139
$titlebar-indicator: currentcolor;
141
@if $dark-theme {
143
$surface-z0: if(_is-dark(%BG%), %BG%, %FG%);
144
$surface-z1: if(_is-dark(%BG%), %MATERIA_VIEW%, mix(white, $surface-z0, 5%));
145
$surface-z8: if(_is-dark(%BG%), %MATERIA_SURFACE%, mix(white, $surface-z0, 12%));
146
$surface-switch-thumb: if(_is-dark(%BG%), %MATERIA_SURFACE%, mix(white, $surface-z0, 60%));
147
$on-surface: if(_is-dark(%BG%), %FG%, on($surface-z0));
148
$primary: $primary-on-dark;
150
$on-primary: on($primary);
151
$error: $error-on-dark;
153
$on-error: on($error);
154
$warning: $warning-on-dark;
156
$on-warning: on($warning);
157
$success: $success-on-dark;
159
$on-success: on($success);
160
$visited: $visited-on-dark;
162
$on-visited: on($visited);
163
$titlebar: if(_is-dark(%BG%), %HDR_BG%, mix(white, $surface-z0, 9%));
165
$titlebar-backdrop: if(_is-dark(%BG%), %HDR_BG2%, $surface-z1);
166
$on-titlebar: if(_is-dark(%BG%), %HDR_FG%, on($titlebar));
167
}
168
@if $light-topbar {
170
$panel: $scrim;
171
$on-panel: on($panel);
172
$titlebar-indicator: $primary;
174
}
175
//
177
// Overlay state colors
178
//
179
$overlay-selected: rgba($primary, %MATERIA_SELECTION_OPACITY%);
181
//
183
// For “on” colors
184
//
185
@function primary($color) {
187
@return if(_is-dark($color), $primary-on-light, $primary-on-dark);
188
}
189
@function error($color) {
191
@return if(_is-dark($color), $error-on-light, $error-on-dark);
192
}
193
@function hint($color) {
195
@return if(_has-alpha($color), rgba($color, .6), rgba($color, .7));
196
}
197
@function disabled($color) {
199
@return if(_has-alpha($color), rgba($color, .38), rgba($color, .5));
200
}
201
@function disabled-hint($color) {
203
@return if(_has-alpha($color), rgba($color, .26), rgba($color, .3));
204
}
205
@function stroke($color) {
207
@return if(_has-alpha($color), rgba($color, .26), rgba($color, .3));
208
}
209
@function disabled-stroke($color) {
211
@return if(_has-alpha($color), rgba($color, .12), rgba($color, .2));
212
}
213
@function divider($color) {
215
@return if(_has-alpha($color), rgba($color, .12), rgba($color, .2));
216
}
217
@function fill($color) {
219
@return if(_has-alpha($color), rgba($color, .08), rgba($color, .08));
220
}
221
@function entry-fill($color) {
223
@return if(_has-alpha($color), rgba($color, .04), rgba($color, .04));
224
}
225
@function scrollbar-thumb($color, $state: null) {
227
@if $state == null {
228
@return if(_has-alpha($color), rgba($color, .38), rgba($color, .5));
229
} @else if $state == "hover" {
230
@return if(_has-alpha($color), rgba($color, .48), rgba($color, .6));
231
} @else if $state == "pressed" {
232
@return if(_has-alpha($color), rgba($color, .6), rgba($color, .7));
233
} @else if $state == "disabled" {
234
@return if(_has-alpha($color), rgba($color, .26), rgba($color, .3));
235
} @else {
236
@error "Invalid type: '#{$state}'";
237
}
238
}
239