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