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 is "light" or "dark".
11
@function tone($color) {
12
@if $color == "dark" or $color == "light" {
13
@return $color;
14
}
15
// Calculate color brightness as per https://www.w3.org/TR/AERT/#color-contrast
17
$brightness: (red($color) * 299 + green($color) * 587 + blue($color) * 114) / 1000;
18
@if $brightness >= 128 {
20
@return "light";
21
} @else {
22
@return "dark";
23
}
24
}
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, $type: text) {
29
$contrast-tone: if(tone($color) == "dark", "light", "dark");
30
@if not map-has-key(map-get($on-colors, $contrast-tone), $type) {
32
@error "Invalid type: '#{$type}'";
33
}
34
@return map-get(map-get($on-colors, $contrast-tone), $type);
36
}
37
$on-colors: (
39
dark: (
40
primary: #1a73e8,
41
error: #d93025,
42
text: rgba(black, .87),
43
text2: rgba(black, .6),
44
text-disabled: rgba(black, .38),
45
text2-disabled: rgba(black, .26),
46
stroke: rgba(black, .26),
47
stroke-disabled: rgba(black, .12),
48
divider: rgba(black, .12),
49
fill: rgba(black, .08),
50
entry-fill: rgba(black, .04)
51
),
52
light: (
53
primary: #8ab4f8,
54
error: #f28b82,
55
text: white,
56
text2: rgba(white, .7),
57
text-disabled: rgba(white, .5),
58
text2-disabled: rgba(white, .3),
59
stroke: rgba(white, .3),
60
stroke-disabled: rgba(white, .12),
61
divider: rgba(white, .12),
62
fill: rgba(white, .08),
63
entry-fill: rgba(white, .04)
64
)
65
);
66
// Determine the strength of highlight on top of given color.
68
@function highlight($color) {
69
@if lightness($color) >= 80% {
70
@return rgba(white, .4);
71
} @else if lightness($color) >= 40% {
72
@return rgba(white, .2);
73
} @else {
74
@return rgba(white, .1);
75
}
76
}
77
// Make translucent color opaque by blending with the background color.
79
@function opacify($color, $bg) {
80
@return mix(change-color($color, $alpha: 1), $bg, alpha($color) * 100%);
81
}
82
// Set the accessible opacity for the overlay depending on the given color.
84
@function overlay($state, $color, $background: transparent, $opacity-modifier: 0) {
85
@if saturation($color) > 50% or saturation($background) > 50% {
86
$opacity-modifier: .04;
87
}
88
$opacity: ();
90
@if $state == "hover" {
92
$opacity: .08 + $opacity-modifier;
93
} @else if $state == "hover-alt" {
94
$opacity: .04 + $opacity-modifier;
95
} @else if $state == "focus" {
96
$opacity: .08 + $opacity-modifier;
97
} @else if $state == "pressed" {
98
$opacity: .12 + $opacity-modifier;
99
} @else if $state == "activated" {
100
$opacity: .12 + $opacity-modifier;
101
} @else if $state == "selected" {
102
@return rgba($color, .24);
103
} @else {
104
@error "Invalid type: '#{$state}'";
105
}
106
@return mix(rgba($color, 1), $background, $opacity * 100%);
108
}
109
// Private variables for dark background colors
111
$-dark-background: #181818;
112
$-dark-surface-1dp: mix(white, $-dark-background, 5%);
113
$-dark-surface-4dp: mix(white, $-dark-background, 9%);
114
$-dark-surface-8dp: mix(white, $-dark-background, 12%);
115
$-dark-surface-switch: mix(white, $-dark-background, 60%);
116
//
118
// Main colors
119
//
120
$primary: if($variant == 'light', on(light, primary), on(dark, primary));
122
$background: if($variant == 'light', #f2f2f2, $-dark-background);
124
$surface: if($variant == 'light', #ffffff, $-dark-surface-8dp);
125
$switch-surface: if($variant == 'light', #ffffff, $-dark-surface-switch); // Special case for switches
126
$base: if($variant == 'light', #ffffff, $-dark-surface-1dp); // semi-surface with 1dp elevation
128
$base-alt: if($variant == 'light', #fafafa, $-dark-surface-1dp);
129
$error: if($variant == 'light', on(light, error), on(dark, error));
131
$warning: if($variant == 'light', #f4b400, #fdd633);
132
$success: if($variant == 'light', #0f9d58, #81c995);
133
$visited: if($variant == 'light', $purple-500, $purple-200);
134
$os-background: $-dark-background;
136
$tooltip: rgba(#616161, .9);
137
$scrim: rgba(black, .6);
138
$scrim-alt: rgba(black, .3);
139
$panel: if($topbar == 'dark', #1f1f1f, $scrim);
141
$panel-solid: if($topbar == 'dark', #1f1f1f, #cccccc); // for Unity panel which doesn't allow translucent colors
142
$titlebar: if($topbar == 'dark', if($variant == 'light', #383838, $-dark-surface-4dp), #e0e0e0);
144
$titlebar-backdrop: if($topbar == 'dark', if($variant == 'light', #303030, $-dark-surface-1dp), #d6d6d6);
145
$titlebar-indicator: if($topbar == 'dark', currentcolor, $primary);
146
//
148
// Overlay state colors
149
//
150
$overlay-selected: rgba($primary, .24);
152
//
154
// “On” colors
155
//
156
$base-fg: if($variant == 'light', black, white);
158
$text: rgba($base-fg, .87);
160
$text2: rgba($base-fg, .6);
161
$text-disabled: rgba($base-fg, .38);
162
$text2-disabled: rgba($base-fg, .26);
163
$stroke: rgba($base-fg, .26);
164
$stroke-disabled: rgba($base-fg, .12);
165
$divider: rgba($base-fg, .12);
166
$fill: rgba($base-fg, .08);
167
$entry-fill: rgba($base-fg, .04);
168
$titlebar-base-fg: if($topbar == 'dark', white, black);
170
$titlebar-text: rgba($titlebar-base-fg, .87);
172
$titlebar-text2: rgba($titlebar-base-fg, .6);
173
$titlebar-text-disabled: rgba($titlebar-base-fg, .38);
174
$titlebar-text2-disabled: rgba($titlebar-base-fg, .26);
175
$titlebar-stroke: rgba($titlebar-base-fg, .26);
176
$titlebar-stroke-disabled: rgba($titlebar-base-fg, .12);
177
$titlebar-divider: rgba($titlebar-base-fg, .12);
178
$titlebar-fill: rgba($titlebar-base-fg, .08);
179
$titlebar-entry-fill: rgba($titlebar-base-fg, .04);
180