themes/whitey/gtk-3.0/_colors.scss (view raw)
1//
2// When color definition differs for dark and light variant,
3// it gets @if ed depending on $variant
4//
5
6@function gtkalpha($c, $a) {
7 @return unquote("alpha(#{$c}, #{$a})");
8}
9
10@function gtkopacity($c, $a) {
11 @return scale-color($c, $alpha: percentage(-1 + $a));
12}
13
14
15//
16// A Color palette
17//
18// Adapta uses google's palette:
19// [https://www.google.com/design/spec/style/color.html#color-color-palette]
20//
21
22
23//
24// Foreground colors
25//
26
27$fg_color: if($variant == 'light', #263238, // = BluGry900
28 #ECEFF1); // = BluGry50
29$secondary_fg_color: gtkopacity($fg_color, 0.75);
30$tertiary_fg_color: gtkopacity($fg_color, 0.5);
31
32$selected_fg_color: #FFFFFF; // = White
33$secondary_selected_fg_color: gtkopacity($selected_fg_color, 0.85);
34$tertiary_selected_fg_color: gtkopacity($selected_fg_color, 0.7);
35
36$insensitive_fg_color: gtkopacity($fg_color, 0.3);
37$insensitive_secondary_fg_color: gtkopacity($secondary_fg_color, 0.3);
38$insensitive_tertiary_fg_color: gtkopacity($tertiary_fg_color, 0.3);
39
40$insensitive_selected_fg_color: gtkopacity($selected_fg_color, 0.4);
41$insensitive_secondary_selected_fg_color: gtkopacity($secondary_selected_fg_color, 0.4);
42$insensitive_tertiary_selected_fg_color: gtkopacity($tertiary_selected_fg_color, 0.4);
43
44// preview text on empty GtkEntry
45$placeholder_text_color: if($variant == 'light', #CFD8DC, // = BluGry100
46 #607D8B); // = BluGry500
47
48
49//
50// Inverted foreground colors
51//
52
53$inverted_fg_color: #ECEFF1; // = BluGry50
54$inverted_secondary_fg_color: gtkopacity($inverted_fg_color, 0.75);
55$inverted_tertiary_fg_color: gtkopacity($inverted_fg_color, 0.5);
56
57$insensitive_inverted_fg_color: gtkopacity($inverted_fg_color, 0.3);
58$insensitive_inverted_secondary_fg_color: gtkopacity($inverted_secondary_fg_color, 0.3);
59
60$fixed_fg_color: #263238; // = BluGry900
61$secondary_fixed_fg_color: gtkopacity($fixed_fg_color, 0.75);
62$insensitive_fixed_fg_color: gtkopacity($fixed_fg_color, 0.3);
63
64
65//
66// Background colors
67//
68
69$bg_color: if($variant == 'light', mix(#FFFFFF, #ECEFF1, 75%), // = W _ 50
70 mix(#455A64, #37474F, 50%)); // = 700 _ 800
71$base_color: if($variant == 'light', #FFFFFF, // = White
72 #455A64); // = BluGry700
73$secondary_base_color: mix($base_color, $bg_color, 50%); // = W _ 50
74$light_color: if($variant == 'light', $base_color, // = White
75 #546E7A); // = BluGry600
76$dark_color: if($variant == 'light',
77 mix(#ECEFF1, #CFD8DC, 75%), // = 50 _ 100
78 mix(#263238, #37474F, 75%)); // = 900 _ 800
79$secondary_dark_color: if($variant == 'light',
80 mix(#FFFFFF, #ECEFF1, 60%), // = W _ 50
81 mix(#455A64, #37474F, 25%)); // = 700 _ 800
82
83
84//
85// Dark background colors on light variant
86//
87
88$inverted_bg_color: mix(#455A64, #37474F, 50%); // = 700 _ 800
89$inverted_base_color: #455A64; // = BluGry700
90$inverted_dark_color: mix(#263238, #37474F, 75%); // = 900 _ 800
91
92
93//
94// Selection (primary) colors
95//
96
97$selected_bg_color: #00BCD4; // = Cyan500
98$secondary_selected_bg_color: #4DD0E1; // = Cyan300
99
100
101//
102// Accent (secondary) colors
103//
104
105$accent_color: #4DB6AC; // = Teal300
106$secondary_accent_color: gtkopacity($accent_color, 0.9);
107$accent_fill_color: gtkopacity($inverted_fg_color, 0.1);
108
109
110//
111// Tracker colors
112//
113
114$track_color: gtkalpha(currentColor, 0.2);
115
116
117//
118// Edge colors
119//
120
121$borders_color: if($variant == 'light', gtkopacity(#000000, 0.09),
122 gtkopacity(#000000, 0.11));
123$solid_light_borders_color: if($variant == 'light', #E5E9EC, #37474F);
124$solid_dark_borders_color: #242F35;
125$top_edge_border_color: #37474F;
126
127$highlight_color: gtkopacity(#FFFFFF, 0.07);
128
129
130//
131// Misc colors
132//
133
134$link_color: #03A9F4; // = LtBlu500
135$link_visited_color: #9C27B0; // = Purple500
136
137$warning_color: #FF9800; // = Orange500
138$error_color: #F44336; // = Red500
139$success_color: #00E676; // = GreenA400
140
141$suggested_color: #009688; // = Teal500
142$destructive_color: #FF5252; // = RedA200
143$selection_color: #80DEEA; // = Cyan200
144
145$info_bg_color: #00E5FF; // = CyanA400
146$question_bg_color: #FFEA00; // = YellwA400
147$warning_bg_color: #FF9100; // = OrangA400
148$error_bg_color: #FF1744; // = RedA400
149
150
151//
152// Solid panel color
153//
154
155$panel_bg_color: mix(#263238, #000000, 50%); // = BluGry900
156