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
$oomox-dark: if(tone(%FG%) == dark, %FG%, %BG%); // BG should be the darkest background-color in MD theory.
39
$oomox-light: if(tone(%FG%) == light, %FG%, %MATERIA_SURFACE%); // MATERIA_SURFACE should be the lightest background-color in MD theory.
40
$on-colors: (
42
dark: (
43
primary: %SEL_BG%,
44
error: %TERMINAL_COLOR9%,
45
text: $oomox-dark,
46
text2: rgba($oomox-dark, .7),
47
text-disabled: rgba($oomox-dark, .5),
48
text2-disabled: rgba($oomox-dark, .3),
49
stroke: rgba($oomox-dark, .3),
50
stroke-disabled: rgba($oomox-dark, .12),
51
divider: rgba($oomox-dark, .12),
52
fill: rgba($oomox-dark, .08),
53
entry-fill: rgba($oomox-dark, .04)
54
),
55
light: (
56
primary: %SEL_BG%,
57
error: %TERMINAL_COLOR9%,
58
text: $oomox-light,
59
text2: rgba($oomox-light, .7),
60
text-disabled: rgba($oomox-light, .5),
61
text2-disabled: rgba($oomox-light, .3),
62
stroke: rgba($oomox-light, .3),
63
stroke-disabled: rgba($oomox-light, .12),
64
divider: rgba($oomox-light, .12),
65
fill: rgba($oomox-light, .08),
66
entry-fill: rgba($oomox-light, .04)
67
)
68
);
69
// Determine the strength of highlight on top of given color.
71
@function highlight($color) {
72
@if lightness($color) >= 80% {
73
@return rgba(white, .4);
74
} @else if lightness($color) >= 40% {
75
@return rgba(white, .2);
76
} @else {
77
@return rgba(white, .1);
78
}
79
}
80
// Make translucent color opaque by blending with the background color.
82
@function opacify($color, $bg) {
83
@return mix(change-color($color, $alpha: 1), $bg, alpha($color) * 100%);
84
}
85
// Private variables for dark background colors
87
$-dark-background: $oomox-dark;
88
$-dark-surface-1dp: mix(white, $-dark-background, 5%);
89
$-dark-surface-4dp: mix(white, $-dark-background, 9%);
90
$-dark-surface-8dp: mix(white, $-dark-background, 12%);
91
$-dark-surface-switch: mix(white, $-dark-background, 60%);
92
//
94
// Main colors
95
//
96
$primary: if($variant == 'light', on(light, primary), on(dark, primary));
98
$background: %BG%;
100
$surface: %MATERIA_SURFACE%;
101
$switch-surface: %MATERIA_SURFACE%; // Special case for switches
102
$base: %MATERIA_VIEW%;
104
$base-alt: %INACTIVE_MATERIA_VIEW%;
105
$error: if($variant == 'light', on(light, error), on(dark, error));
107
$warning: %TERMINAL_COLOR11%;
108
$success: %TERMINAL_COLOR10%;
109
$visited: %TERMINAL_COLOR5%;
110
$os-background: %HDR_BG3%;
112
$tooltip: rgba(%HDR_BG%, 0.9);
113
$scrim: rgba(black, %MATERIA_PANEL_OPACITY%);
114
$scrim-alt: rgba(black, 0.3);
115
$panel: if($topbar == 'dark', %HDR_BG3%, $scrim);
117
$panel-solid: %HDR_BG3%; // for Unity panel which doesn't allow translucent colors
118
$titlebar: %HDR_BG%;
120
$titlebar-backdrop: %HDR_BG2%;
121
$titlebar-indicator: if($topbar == 'dark', currentColor, $primary);
122
//
124
// Overlay state colors
125
//
126
$overlay-hover-opacity: .08;
128
$overlay-focus-opacity: .08;
129
$overlay-active-opacity: .12;
130
$overlay-checked-opacity: .12;
131
$overlay-selected-opacity: .24;
132
$overlay-hover: gtkalpha(currentColor, 0.08);
134
$overlay-focus: gtkalpha(currentColor, 0.08);
135
$overlay-focus-hover: gtkalpha(currentColor, 0.16);
136
$overlay-active: gtkalpha(currentColor, 0.12);
137
$overlay-checked: gtkalpha(currentColor, 0.12);
138
$overlay-selected: rgba($primary, %MATERIA_SELECTION_OPACITY%);
139
//
141
// “On” colors
142
//
143
$text: %FG%;
145
$text2: rgba(%FG%, 0.7);
146
$text-disabled: rgba(%FG%, 0.5);
147
$text2-disabled: rgba(%FG%, 0.3);
148
$stroke: rgba(%FG%, 0.3);
149
$stroke-disabled: rgba(%FG%, 0.12);
150
$divider: rgba(%FG%, 0.12);
151
$fill: rgba(%FG%, 0.08);
152
$entry-fill: rgba(%FG%, 0.04);
153
$titlebar-text: %HDR_FG%;
155
$titlebar-text2: rgba(%HDR_FG%, 0.7);
156
$titlebar-text-disabled: rgba(%HDR_FG%, 0.5);
157
$titlebar-text2-disabled: rgba(%HDR_FG%, 0.3);
158
$titlebar-stroke: rgba(%HDR_FG%, 0.3);
159
$titlebar-stroke-disabled: rgba(%HDR_FG%, 0.12);
160
$titlebar-divider: rgba(%HDR_FG%, 0.12);
161
$titlebar-fill: rgba(%HDR_FG%, 0.08);
162
$titlebar-entry-fill: rgba(%HDR_FG%, 0.04);
163