1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
|
// When color definition differs for dark and light variant
// it gets @if ed depending on $variant
//
@function gtkalpha($color, $opacity) {
@if $color=="currentColor" {
@return unquote("alpha(#{$color}, #{$opacity})");
} @else {
@return rgba($color, $opacity);
}
}
@function gtkmix($color1, $color2, $multiplier) {
$alpha: blend(alpha($color1), alpha($color2), $multiplier);
@if $alpha<=0 {
@return rgba(0, 0, 0, $alpha);
} @else {
$red: blend(red($color1) * alpha($color1), red($color2) * alpha($color2), $multiplier) / $alpha;
$green: blend(green($color1) * alpha($color1), green($color2) * alpha($color2), $multiplier) / $alpha;
$blue: blend(blue($color1) * alpha($color1), blue($color2) * alpha($color2), $multiplier) / $alpha;
@return rgba($red, $green, $blue, $alpha);
}
}
@function gtkshade($color, $multiplier) {
$new: hsla(hue($color), saturation($color) * $multiplier, lightness($color) * $multiplier, alpha($color));
@return $new;
}
//
@import 'palette';
$base_color: #ffffff;
$text_color: #1a1a1a;
$bg_color: #edeceb;
$fg_color: #000000;
$selected_fg_color: #ffffff;
$selected_bg_color: #86abd9;
$selected_borders_color: #86abd9;
$borders_color: gtkshade($core_color_b, 0.67);
$alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 8%));
$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
$link_color: #0000ee;
$link_visited_color: #551a8b;
$top_hilight: $borders_edge;
$dark_fill: mix($borders_color, $bg_color, 50%);
$headerbar_bg_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
$menu_color: if($variant == 'light', $bg_color, $base_color);
$menu_selected_color: if($variant == 'light', darken($bg_color, 6%), darken($bg_color, 8%));
$popover_bg_color: #f5f5b5;
$popover_hover_color: #000000;
$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%));
$scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));
$warning_color: $yellow;
$error_color: $red;
$success_color: lighten($green, 5%);
$destructive_color: if($variant == 'light', $red, darken($red, 10%));
$osd_fg_color: #eeeeec;
$osd_text_color: white;
$osd_bg_color: transparentize(lighten($jet, 2%),0.025);
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
$osd_borders_color: transparentize(black, 0.3);
$sidebar_bg_color: mix($bg_color, $base_color, 50%);
$tooltip_borders_color: transparentize(white, 0.9);
$shadow_color: transparentize(black, 0.9);
$drop_target_color: $success_color;
//insensitive state derived colors
$insensitive_fg_color: gtkshade($core_color_b, 0.70);
$insensitive_bg_color: $bg_color;
$insensitive_borders_color: gtkshade($core_color_b, 0.79);
//colors for the backdrop state, derived from the main colors.
$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 3%));
$backdrop_text_color: if($variant == 'light', transparentize($text_color, 0.31), transparentize(white, 0.45));
$backdrop_bg_color: if($variant == 'light', $bg_color, lighten($bg_color, 3%));
$backdrop_fg_color: if($variant == 'light', mix($fg_color, $backdrop_bg_color, 80%), transparentize(white, 0.35));
$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
$backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color);
$backdrop_borders_color: mix($borders_color, $bg_color, 80%);
$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
//special cased widget colors
$suggested_bg_color: if($variant == 'light', lighten($green, 5%), darken($green, 5%));
$suggested_border_color: if($variant=='light', darken($suggested_bg_color, 5%), darken($suggested_bg_color, 10%));
$progress_bg_color: if($variant== 'light', lighten($secondary_accent_bg_color, 10%), lighten($secondary_accent_bg_color, 5%));
$progress_border_color: $progress_bg_color;
$spinner_color: $tertiary_accent_fg_color;
$checkradio_bg_color: darken($core_color_a , 20%);;
$checkradio_fg_color: $borders_color;
$checkradio_borders_color: $borders_color;
$focus_border_color: $borders_color;
$alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7));
$switch_bg_color: if($variant=='light', lighten($secondary_accent_bg_color, 5%), $secondary_accent_bg_color);
$switch_borders_color: if($variant == 'light', darken($checkradio_bg_color, 10%), darken($checkradio_bg_color,40%));
$dim_label_opacity: 0.55;
// Headerbar bg colors for the "mixed" theme
$headerbar_bg_color: #323030;
$headerbar_fg_color: $fg_color;
$headerbar_border_color: $borders_color;
$headerbar_text_color: $silk;
$headerbar_insensitive_color: mix($headerbar_fg_color, $headerbar_bg_color, 50%);
$backdrop_headerbar_bg_color: lighten($headerbar_bg_color, 5%);
$backdrop_headerbar_fg_color: mix($headerbar_fg_color, $headerbar_bg_color, 70%);
$backdrop_headerbar_text_color: mix($headerbar_text_color, $backdrop_headerbar_bg_color, 70%);
$backdrop_headerbar_insensitive_color: mix($headerbar_fg_color, $backdrop_headerbar_bg_color, 70%);
//
// button
//
$button_gradient_a: gtkshade($core_color_b, 1.07);
$button_gradient_b: gtkshade($core_color_b, 1.06);
$button_gradient_c: gtkshade($core_color_b, 1.04);
$button_gradient_d: gtkshade($core_color_b, 0.98);
$button_default_border_color: #6699CC;
$button_default_box_shadow_color: #336699;
/* hover */
$button_hover_gradient_a: $base_color;
$button_hover_gradient_b: gtkshade($core_color_b, 1.05);
$button_hover_gradient_c: $core_color_b;
/* active */
$button_active_text_color: $fg_color;
$button_active_gradient_a: gtkshade($core_color_b, 0.85);
$button_active_gradient_b: gtkshade($core_color_b, 0.90);
$button_active_gradient_c: gtkshade($core_color_b, 0.91);
$button_active_gradient_d: gtkshade($core_color_b, 0.86);
$button_active_gradient_e: gtkshade($core_color_b, 0.84);
$button_active_gradient_f: gtkshade($core_color_b, 0.80);
/* insensitive */
$button_insensitive_inner_border_color: gtkshade($core_color_b, 1.05);
$button_insensitive_gradient_a: gtkshade($core_color_b, 1.04);
$button_insensitive_gradient_b: gtkshade($core_color_b, 1.01);
$button_insensitive_gradient_c: gtkshade($core_color_b, 0.99);
$button_insensitive_gradient_d: gtkshade($core_color_b, 0.96);
/* active insensitive */
$button_active_insensitive_gradient_a: gtkshade($core_color_b, 0.98);
$button_active_insensitive_gradient_b: gtkshade($core_color_b, 1.02);
$button_active_insensitive_gradient_c: gtkshade($core_color_b, 1.03);
$button_active_insensitive_gradient_d: gtkshade($core_color_b, 1.01);
$button_active_insensitive_gradient_e: gtkshade($core_color_b, 0.99);
$button_active_insensitive_gradient_f: gtkshade($core_color_b, 0.96);
/* primary toolbar focus */
$pt_button_focus_gradient_a: mix(#fafafa, gtkshade($core_color_a, 1.09), 0.3);
$pt_button_focus_gradient_b: mix(#ededed, gtkshade($core_color_a, 1.05), 0.3);
$pt_button_focus_gradient_c: mix(#e8e8e8, gtkshade($core_color_a, 1.01), 0.25);
$pt_button_focus_gradient_d: mix(#e8e8e8, gtkshade($core_color_a, 0.96), 0.3);
/* primary toolbar focus hover */
$pt_button_focus_hover_gradient_a: mix(#fcfcfc, gtkshade($core_color_a, 1.09), 0.15);
$pt_button_focus_hover_gradient_b: mix(#fcfcfc, gtkshade($core_color_a, 1.05), 0.15);
$pt_button_focus_hover_gradient_c: mix(#fcfcfc, gtkshade($core_color_a, 1.01), 0.2);
$pt_button_focus_hover_gradient_d: mix(#e8e8e8, gtkshade($core_color_a, 0.96), 0.2);
//
// entry
//
$entry_text_color: $text_color;
$entry_inner_border_color: gtkshade($core_color_b, 0.96);
$entry_bg_color: $base_color;
//
// menu
//
$menu_color: $base_color;
$menu_bg_color: gtkshade($bg_color, 1.04);
$menu_fg_color: $fg_color;
$menu_border_color: gtkshade($core_color_b, 0.72);
//
// menubar
//
$menubar_gradient_a: gtkshade($core_color_b, 0.99);
$menubar_gradient_b: gtkshade($core_color_b, 0.98);
$menubar_gradient_c: gtkshade($core_color_b, 0.96);
$menubar_menuitem_hover_color: $selected_fg_color;
$menubar_menuitem_hover_border_color: gtkshade($core_color_a, 0.58);
$menubar_menuitem_hover_gradient_a: $core_color_a;
$menubar_menuitem_hover_gradient_b: gtkshade($core_color_a, 0.95);
$menubar_menuitem_hover_gradient_c: gtkshade($core_color_a, 0.93);
$menubar_menuitem_hover_gradient_d: gtkshade($core_color_a, 0.88);
//
// progressbar
//
$progressbar_border_color: mix(#6a6a6a, gtkshade($core_color_a, 0.75), 0.80);
$progressbar_pattern_color: $progressbar_border_color;
$progressbar_bg_color: $core_color_a;
$progressbar_gradient_a: $progressbar_bg_color;
$progressbar_gradient_b: $menubar_menuitem_hover_gradient_b;
$progressbar_gradient_c: $menubar_menuitem_hover_gradient_c;
$progressbar_gradient_d: $menubar_menuitem_hover_gradient_d;
//
// toolbar
//
$toolbar_gradient_a: gtkshade($core_color_b, 1.04);
$toolbar_gradient_b: gtkshade($core_color_b, 1.01);
$toolbar_gradient_c: $core_color_b;
$toolbar_gradient_d: gtkshade($core_color_b, 0.97);
$toolbar_border_top_color: gtkshade($core_color_b, 0.82);
$toolbar_border_bottom_color: $toolbar_border_top_color;
|
