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($c, $a) {
7
@return unquote("alpha(#{$c}, #{$a})");
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, .1);
50
}
51
}
52
// Make translucent color opaque by blending with the background color.
54
@function opacify($color, $bg) {
55
@return mix(change-color($color, $alpha: 1), $bg, alpha($color) * 100%);
56
}
57
// Set the accessible opacity for the overlay depending on the given color.
59
@function overlay($state, $color, $background: transparent, $opacity-modifier: 0) {
60
@if saturation($color) > 50% or saturation($background) > 50% {
61
$opacity-modifier: .04;
62
}
63
$opacity: ();
65
@if $state == "hover" {
67
$opacity: .08 + $opacity-modifier;
68
} @else if $state == "hover-alt" {
69
$opacity: .04 + $opacity-modifier;
70
} @else if $state == "focus" {
71
$opacity: .08 + $opacity-modifier;
72
} @else if $state == "pressed" {
73
$opacity: .12 + $opacity-modifier;
74
} @else if $state == "activated" {
75
$opacity: .12 + $opacity-modifier;
76
} @else if $state == "selected" {
77
@return rgba($color, .24);
78
} @else {
79
@error "Invalid type: '#{$state}'";
80
}
81
@return mix(rgba($color, 1), $background, $opacity * 100%);
83
}
84
// Private variables for dark background colors
86
$-dark-background: #181818;
87
$-dark-surface-1dp: mix(white, $-dark-background, 5%);
88
$-dark-surface-4dp: mix(white, $-dark-background, 9%);
89
$-dark-surface-8dp: mix(white, $-dark-background, 12%);
90
$-dark-surface-switch: mix(white, $-dark-background, 60%);
91
//
93
// Main colors
94
//
95
$background: if($variant == 'light', #f2f2f2, $-dark-background);
97
$surface: if($variant == 'light', #ffffff, $-dark-surface-8dp);
98
$switch-surface: if($variant == 'light', #ffffff, $-dark-surface-switch); // Special case for switches
99
$base: if($variant == 'light', #ffffff, $-dark-surface-1dp); // semi-surface with 1dp elevation
100
$base-alt: if($variant == 'light', #fafafa, $-dark-surface-1dp);
101
$on-surface: on($surface);
102
$primary-on-light: #1a73e8;
104
$primary-on-dark: #8ab4f8;
105
$primary: if($variant == 'light', $primary-on-light, $primary-on-dark);
106
$on-primary: on($primary);
107
$error-on-light: #d93025;
109
$error-on-dark: #f28b82;
110
$error: if($variant == 'light', $error-on-light, $error-on-dark);
111
$on-error: on($error);
112
$warning: if($variant == 'light', #f4b400, #fdd633);
114
$on-warning: on($warning);
115
$success: if($variant == 'light', #0f9d58, #81c995);
117
$on-success: on($success);
118
$visited: if($variant == 'light', $purple-500, $purple-200);
120
$on-visited: on($visited);
121
$os-background: $-dark-background;
123
$on-os-background: on($os-background);
124
$tooltip: rgba(#616161, .9);
126
$on-tooltip: on($tooltip);
127
$scrim: rgba(black, .6);
129
$on-scrim: on($scrim);
130
$scrim-alt: rgba(black, .3);
132
$on-scrim-alt: on($scrim-alt);
133
$panel: if($topbar == 'dark', #1f1f1f, $scrim);
135
$on-panel: on($panel);
136
$panel-solid: if($topbar == 'dark', #1f1f1f, #cccccc); // for Unity panel which doesn't allow translucent colors
138
$on-panel-solid: on($panel-solid);
139
$titlebar: if($topbar == 'dark', if($variant == 'light', #383838, $-dark-surface-4dp), #e0e0e0);
141
$titlebar-backdrop: if($topbar == 'dark', if($variant == 'light', #303030, $-dark-surface-1dp), #d6d6d6);
142
$titlebar-indicator: if($topbar == 'dark', currentcolor, $primary);
143
$on-titlebar: on($titlebar);
144
//
146
// Overlay state colors
147
//
148
$overlay-selected: rgba($primary, .24);
150
//
152
// For “on” colors
153
//
154
@function primary($color) {
156
@return if(tone($color) == "dark", $primary-on-light, $primary-on-dark);
157
}
158
@function error($color) {
160
@return if(tone($color) == "dark", $error-on-light, $error-on-dark);
161
}
162
@function hint($color) {
164
@return rgba($color, if(has-alpha($color), .6, .7));
165
}
166
@function disabled($color) {
168
@return rgba($color, if(has-alpha($color), .38, .5));
169
}
170
@function disabled-hint($color) {
172
@return rgba($color, if(has-alpha($color), .26, .3));
173
}
174
@function stroke($color) {
176
@return rgba($color, if(has-alpha($color), .26, .3));
177
}
178
@function disabled-stroke($color) {
180
@return rgba($color, if(has-alpha($color), .12, .2));
181
}
182
@function divider($color) {
184
@return rgba($color, if(has-alpha($color), .12, .2));
185
}
186
@function fill($color) {
188
@return rgba($color, if(has-alpha($color), .08, .08));
189
}
190
@function entry-fill($color) {
192
@return rgba($color, if(has-alpha($color), .04, .04));
193
}
194