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
// Private variables for dark background colors
84
$-dark-background: #181818;
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
$primary: if($variant == 'light', on(light, primary), on(dark, primary));
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
101
$base-alt: if($variant == 'light', #fafafa, $-dark-surface-1dp);
102
$error: if($variant == 'light', on(light, error), on(dark, error));
104
$warning: if($variant == 'light', #f4b400, #fdd633);
105
$success: if($variant == 'light', #0f9d58, #81c995);
106
$visited: if($variant == 'light', $purple-500, $purple-200);
107
$os-background: $-dark-background;
109
$tooltip: rgba(#616161, .9);
110
$scrim: rgba(black, .6);
111
$scrim-alt: rgba(black, .3);
112
$panel: if($topbar == 'dark', #1f1f1f, $scrim);
114
$panel-solid: if($topbar == 'dark', #1f1f1f, #cccccc); // for Unity panel which doesn't allow translucent colors
115
$titlebar: if($topbar == 'dark', if($variant == 'light', #383838, $-dark-surface-4dp), #e0e0e0);
117
$titlebar-backdrop: if($topbar == 'dark', if($variant == 'light', #303030, $-dark-surface-1dp), #d6d6d6);
118
$titlebar-indicator: if($topbar == 'dark', currentcolor, $primary);
119
//
121
// Overlay state colors
122
//
123
$overlay-hover-opacity: .08;
125
$overlay-focus-opacity: .08;
126
$overlay-active-opacity: .12;
127
$overlay-checked-opacity: .12;
128
$overlay-selected-opacity: .24;
129
$overlay-hover: gtkalpha(currentcolor, .08);
131
$overlay-focus: gtkalpha(currentcolor, .08);
132
$overlay-focus-hover: gtkalpha(currentcolor, .16);
133
$overlay-active: gtkalpha(currentcolor, .12);
134
$overlay-checked: gtkalpha(currentcolor, .12);
135
$overlay-selected: rgba($primary, .24);
136
//
138
// “On” colors
139
//
140
$base-fg: if($variant == 'light', black, white);
142
$text: rgba($base-fg, .87);
144
$text2: rgba($base-fg, .6);
145
$text-disabled: rgba($base-fg, .38);
146
$text2-disabled: rgba($base-fg, .26);
147
$stroke: rgba($base-fg, .26);
148
$stroke-disabled: rgba($base-fg, .12);
149
$divider: rgba($base-fg, .12);
150
$fill: rgba($base-fg, .08);
151
$entry-fill: rgba($base-fg, .04);
152
$titlebar-base-fg: if($topbar == 'dark', white, black);
154
$titlebar-text: rgba($titlebar-base-fg, .87);
156
$titlebar-text2: rgba($titlebar-base-fg, .6);
157
$titlebar-text-disabled: rgba($titlebar-base-fg, .38);
158
$titlebar-text2-disabled: rgba($titlebar-base-fg, .26);
159
$titlebar-stroke: rgba($titlebar-base-fg, .26);
160
$titlebar-stroke-disabled: rgba($titlebar-base-fg, .12);
161
$titlebar-divider: rgba($titlebar-base-fg, .12);
162
$titlebar-fill: rgba($titlebar-base-fg, .08);
163
$titlebar-entry-fill: rgba($titlebar-base-fg, .04);
164