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 to meet accessibility standards for contrast.
27
@function on($color, $type: text) {
28
$contrast-tone: if(tone($color) == "dark", "light", "dark");
29
@if not map-has-key(map-get($on-colors, $contrast-tone), $type) {
31
@error "Invalid type: '#{$type}'";
32
}
33
@return map-get(map-get($on-colors, $contrast-tone), $type);
35
}
36
$on-colors: (
38
dark: (
39
primary: #1A73E8,
40
error: #D93025,
41
text: rgba(black, .87),
42
text2: rgba(black, .6),
43
text-disabled: rgba(black, .38),
44
text2-disabled: rgba(black, .26),
45
stroke: rgba(black, .26),
46
stroke-disabled: rgba(black, .12),
47
divider: rgba(black, .12),
48
fill: rgba(black, .08),
49
entry-fill: rgba(black, .04)
50
),
51
light: (
52
primary: #8AB4F8,
53
error: #F28B82,
54
text: white,
55
text2: rgba(white, .7),
56
text-disabled: rgba(white, .5),
57
text2-disabled: rgba(white, .3),
58
stroke: rgba(white, .3),
59
stroke-disabled: rgba(white, .12),
60
divider: rgba(white, .12),
61
fill: rgba(white, .08),
62
entry-fill: rgba(white, .04)
63
)
64
);
65
// Determine the strength of highlight on top of given color.
67
@function highlight($color) {
68
@if lightness($color) >= 80% {
69
@return rgba(white, .4);
70
} @else if lightness($color) >= 40% {
71
@return rgba(white, .2);
72
} @else {
73
@return rgba(white, .1);
74
}
75
}
76
// Private variables for dark background colors
78
$-dark-background: #1F1F1F;
79
$-dark-surface-1dp: mix(white, $-dark-background, 5%);
80
$-dark-surface-4dp: mix(white, $-dark-background, 9%);
81
$-dark-surface-8dp: mix(white, $-dark-background, 12%);
82
$-dark-surface-switch: mix(white, $-dark-background, 60%);
83
//
85
// Main colors
86
//
87
$primary: if($variant == 'light', on(light, primary), on(dark, primary));
89
$background: if($variant == 'light', #F2F2F2, $-dark-background);
91
$surface: if($variant == 'light', #FFFFFF, $-dark-surface-8dp);
92
$switch-surface: if($variant == 'light', #FFFFFF, $-dark-surface-switch); // Special case for switches
93
$base: if($variant == 'light', #FFFFFF, $-dark-surface-1dp); // semi-surface with 1dp elevation
95
$base-alt: if($variant == 'light', #FAFAFA, $-dark-surface-1dp);
96
$error: if($variant == 'light', on(light, error), on(dark, error));
98
$warning: if($variant == 'light', #F4B400, #FDD633);
99
$success: if($variant == 'light', #0F9D58, #81C995);
100
$visited: if($variant == 'light', $purple-500, $purple-200);
101
$os-background: $-dark-background;
103
$tooltip: rgba(#616161, .9);
104
$scrim: rgba(black, .6);
105
$scrim-alt: rgba(black, .3);
106
$panel: if($topbar == 'dark', #1F1F1F, $scrim);
108
$panel-solid: if($topbar == 'dark', #1F1F1F, #CCCCCC); // for Unity panel which doesn't allow translucent colors
109
$titlebar: if($topbar == 'dark', $-dark-surface-4dp, #E0E0E0);
111
$titlebar-backdrop: if($topbar == 'dark', $-dark-surface-1dp, #D6D6D6);
112
$titlebar-indicator: if($topbar == 'dark', currentColor, $primary);
113
//
115
// Overlay state colors
116
//
117
$overlay-hover-opacity: .08;
119
$overlay-focus-opacity: .08;
120
$overlay-focus-hover-opacity: .16;
121
$overlay-active-opacity: .12;
122
$overlay-checked-opacity: .12;
123
$overlay-selected-opacity: .24;
124
$overlay-hover: gtkalpha(currentColor, .08);
126
$overlay-focus: gtkalpha(currentColor, .08);
127
$overlay-focus-hover: gtkalpha(currentColor, .16);
128
$overlay-active: gtkalpha(currentColor, .12);
129
$overlay-checked: gtkalpha(currentColor, .12);
130
$overlay-selected: rgba($primary, .24);
131
//
133
// “On” colors
134
//
135
$base-fg: if($variant == 'light', black, white);
137
$text: rgba($base-fg, .87);
139
$text2: rgba($base-fg, .6);
140
$text-disabled: rgba($base-fg, .38);
141
$text2-disabled: rgba($base-fg, .26);
142
$stroke: rgba($base-fg, .26);
143
$stroke-disabled: rgba($base-fg, .12);
144
$divider: rgba($base-fg, .12);
145
$fill: rgba($base-fg, .08);
146
$entry-fill: rgba($base-fg, .04);
147
$titlebar-base-fg: if($topbar == 'dark', white, black);
149
$titlebar-text: rgba($titlebar-base-fg, .87);
151
$titlebar-text2: rgba($titlebar-base-fg, .6);
152
$titlebar-text-disabled: rgba($titlebar-base-fg, .38);
153
$titlebar-text2-disabled: rgba($titlebar-base-fg, .26);
154
$titlebar-stroke: rgba($titlebar-base-fg, .26);
155
$titlebar-stroke-disabled: rgba($titlebar-base-fg, .12);
156
$titlebar-divider: rgba($titlebar-base-fg, .12);
157
$titlebar-fill: rgba($titlebar-base-fg, .08);
158
$titlebar-entry-fill: rgba($titlebar-base-fg, .04);
159
// workaround for GTK3 @placeholder_text_color which doesn't allow translucent colors
161
$placeholder_text_color: mix($base-fg, $base, percentage(.6));
162