Changeset View
Changeset View
Standalone View
Standalone View
src/_functions.scss
1 | @charset "UTF-8"; | 1 | @charset "UTF-8"; | ||
---|---|---|---|---|---|
2 | 2 | | |||
3 | // GTK functions | ||||
4 | | ||||
5 | // escape string entirely | ||||
6 | @function gtk ($str) { | ||||
7 | @return unquote($str); | ||||
8 | } | ||||
9 | | ||||
10 | // alpha function | ||||
11 | @function gtkalpha($c,$a) { | ||||
12 | @return unquote("alpha(#{$c},#{$a})"); | ||||
13 | } | ||||
14 | | ||||
15 | // shade function | ||||
16 | @function gtkshade($c, $a) { | ||||
17 | @return unquote("shade(#{$c},#{$a})"); | ||||
18 | } | ||||
19 | | ||||
20 | // mix function | ||||
21 | @function gtkmix($c1, $c2, $m) { | ||||
22 | @return unquote("mix(#{$c1},#{$c2},#{$m})"); | ||||
23 | } | ||||
24 | | ||||
3 | // | 25 | // | ||
4 | // Theme color functions | 26 | // Theme color functions | ||
5 | // | 27 | // | ||
6 | 28 | | |||
7 | | ||||
8 | // Button Color | 29 | // Button Color | ||
9 | @function b_color($c: normal) { | 30 | @function internal_b_color($c: normal) { | ||
10 | @if $c == normal { | 31 | @if $c == normal { | ||
11 | @return $ButtonBackgroundNormal; | 32 | @return $ButtonBackgroundNormal; | ||
12 | } | 33 | } | ||
13 | @if $c == hover { | 34 | @if $c == hover { | ||
14 | @return $ButtonDecorationHover; | 35 | @return $ButtonDecorationHover; | ||
15 | } | 36 | } | ||
16 | @if $c == active { | 37 | @if $c == active { | ||
17 | @return $ButtonDecorationFocus; | 38 | @return $ButtonDecorationFocus; | ||
18 | } | 39 | } | ||
19 | @if $c == text { | 40 | @if $c == text { | ||
20 | @return $ButtonForegroundNormal; | 41 | @return $ButtonForegroundNormal; | ||
21 | } | 42 | } | ||
22 | @if $c == active-text { | 43 | @if $c == active-text { | ||
23 | @return $SelectionForegroundNormal; | 44 | @return $SelectionForegroundNormal; | ||
24 | } | 45 | } | ||
25 | } | 46 | } | ||
26 | 47 | | |||
27 | // Selection Color | 48 | // Selection Color | ||
28 | @function s_color($c: normal) { | 49 | @function internal_s_color($c: normal) { | ||
29 | @if $c == normal { | 50 | @if $c == normal { | ||
30 | @return $SelectionBackgroundNormal; | 51 | @return $SelectionBackgroundNormal; | ||
31 | } | 52 | } | ||
32 | @if $c == hover { | 53 | @if $c == hover { | ||
33 | @return $SelectionDecorationHover; | 54 | @return $SelectionDecorationHover; | ||
34 | } | 55 | } | ||
35 | @if $c == text { | 56 | @if $c == text { | ||
36 | @return $SelectionForegroundNormal; | 57 | @return $SelectionForegroundNormal; | ||
37 | } | 58 | } | ||
38 | @if $c == backdrop { | 59 | @if $c == backdrop { | ||
39 | @return transparentize($SelectionBackgroundNormal,0.5); | 60 | @return transparentize($SelectionBackgroundNormal,0.5); | ||
40 | } | 61 | } | ||
41 | } | 62 | } | ||
42 | 63 | | |||
43 | // View Color | 64 | // View Color | ||
44 | @function v_color($c: normal) { | 65 | @function internal_v_color($c: normal) { | ||
45 | @if $c == normal { | 66 | @if $c == normal { | ||
46 | @return $ViewBackgroundNormal; | 67 | @return $ViewBackgroundNormal; | ||
47 | } | 68 | } | ||
48 | @if $c == hover { | 69 | @if $c == hover { | ||
49 | @return $ViewDecorationHover; | 70 | @return $ViewDecorationHover; | ||
50 | } | 71 | } | ||
51 | @if $c == active { | 72 | @if $c == active { | ||
52 | @return $ViewDecorationFocus; | 73 | @return $ViewDecorationFocus; | ||
53 | } | 74 | } | ||
54 | @if $c == text { | 75 | @if $c == text { | ||
55 | @return $ViewForegroundNormal; | 76 | @return $ViewForegroundNormal; | ||
56 | } | 77 | } | ||
57 | } | 78 | } | ||
58 | 79 | | |||
59 | // Window Color | 80 | // Window Color | ||
60 | @function w_color($c: normal) { | 81 | @function internal_w_color($c: normal) { | ||
61 | @if $c == normal { | 82 | @if $c == normal { | ||
62 | @return $WindowBackgroundNormal; | 83 | @return $WindowBackgroundNormal; | ||
63 | } | 84 | } | ||
64 | @if $c == text { | 85 | @if $c == text { | ||
65 | @return $WindowForegroundNormal; | 86 | @return $WindowForegroundNormal; | ||
66 | } | 87 | } | ||
67 | } | 88 | } | ||
68 | 89 | | |||
69 | // Titlebar color | 90 | // Titlebar color | ||
70 | @function t_color($c: text) { | 91 | @function internal_t_color($c: text) { | ||
71 | @if $c == text { | 92 | @if $c == text { | ||
72 | @return $WMactiveForeground; | 93 | @return $WMactiveForeground; | ||
73 | } | 94 | } | ||
74 | @if $c == background { | 95 | @if $c == background { | ||
75 | @return $WMactiveBackground; | 96 | @return $WMactiveBackground; | ||
76 | } | 97 | } | ||
77 | @if $c == background-light { | 98 | @if $c == background-light { | ||
78 | @return $WindowBackgroundNormal; | 99 | @return $WindowBackgroundNormal; | ||
79 | } | 100 | } | ||
80 | @if $c == backdrop-text { | 101 | @if $c == backdrop-text { | ||
81 | @return $WMinactiveForeground; | 102 | @return $WMinactiveForeground; | ||
82 | } | 103 | } | ||
83 | @if $c == backdrop-background { | 104 | @if $c == backdrop-background { | ||
84 | @return $WMinactiveBackground; | 105 | @return $WMinactiveBackground; | ||
85 | } | 106 | } | ||
86 | } | 107 | } | ||
87 | 108 | | |||
88 | @function tooltip($c: text) { | 109 | @function internal_tooltip($c: text) { | ||
89 | @if $c == text { | 110 | @if $c == text { | ||
90 | @return $TooltipForegroundNormal; | 111 | @return $TooltipForegroundNormal; | ||
91 | } | 112 | } | ||
92 | @if $c == background { | 113 | @if $c == background { | ||
93 | @return $TooltipBackgroundNormal; | 114 | @return $TooltipBackgroundNormal; | ||
94 | } | 115 | } | ||
95 | @if $c == border { | 116 | @if $c == border { | ||
96 | @return mix($TooltipForegroundNormal, $TooltipBackgroundNormal, 25%); | 117 | @return mix($TooltipForegroundNormal, $TooltipBackgroundNormal, 25%); | ||
97 | } | 118 | } | ||
98 | } | 119 | } | ||
99 | 120 | | |||
100 | @function button_gradient($c, $state: normal) { | 121 | @function internal_button_gradient($c, $state: normal) { | ||
101 | @if $state == normal { | 122 | @if $state == normal { | ||
102 | @return linear-gradient(to bottom, change-color($c, $lightness: min(lightness($c)*1.01,100%)), change-color($c, $lightness:min(lightness($c)/1.03,100%))); | 123 | @return linear-gradient(to bottom, change-color($c, $lightness: min(lightness($c)*1.01,100%)), change-color($c, $lightness:min(lightness($c)/1.03,100%))); | ||
103 | } | 124 | } | ||
104 | @else { | 125 | @else { | ||
105 | @return linear-gradient(to bottom, change-color($c, $lightness: min(lightness($c)*1.03,100%)), change-color($c, $lightness:min(lightness($c)/1.10,100%))); | 126 | @return linear-gradient(to bottom, change-color($c, $lightness: min(lightness($c)*1.03,100%)), change-color($c, $lightness:min(lightness($c)/1.10,100%))); | ||
106 | } | 127 | } | ||
107 | } | 128 | } | ||
108 | 129 | | |||
109 | $border_color: mix($WindowBackgroundNormal,$WindowForegroundNormal, 75%); | 130 | $border_color: mix($WindowBackgroundNormal,$WindowForegroundNormal, 75%); | ||
110 | $menu_color: w_color(normal); | 131 | $menu_color: internal_w_color(normal); | ||
111 | $link_color: $ViewForegroundLink; | 132 | $link_color: $ViewForegroundLink; | ||
112 | $link_visited_color: $ViewForegroundVisited; | 133 | $link_visited_color: $ViewForegroundVisited; | ||
113 | 134 | | |||
114 | $warning_color: $ViewForegroundNeutral; | 135 | $warning_color: $ViewForegroundNeutral; | ||
115 | $error_color: $ViewForegroundNegative; | 136 | $error_color: $ViewForegroundNegative; | ||
116 | $success_color: $ViewForegroundPositive; | 137 | $success_color: $ViewForegroundPositive; | ||
117 | $destructive_color: $error_color; | 138 | $destructive_color: $error_color; | ||
118 | 139 | | |||
119 | $trough_color: mix(w_color(normal),w_color(text),70%); | 140 | $trough_color: gtkmix(gtk("@theme_bg_color"),gtk("@theme_fg_color"),0.7); | ||
120 | $scrollbar_color: mix($trough_color,v_color(text),50%); | 141 | $trough_color_backdrop: gtkmix(gtk("@theme_unfocused_bg_color"),gtk("@theme_unfocused_fg_color"),0.7); | ||
142 | $trough_color_insensitive: gtkmix(gtk("@insensitive_bg_color"),gtk("@insensitive_fg_color"),0.7); | ||||
143 | $trough_color_backdrop_insensitive: gtkmix(gtk("@insensitive_unfocused_bg_color"),gtk("@insensitive_unfocused_fg_color"),0.7); | ||||
144 | | ||||
145 | $scrollbar_color: gtkmix($trough_color,gtk("@theme_text_color"),0.5); | ||||
146 | $scrollbar_color_backdrop: gtkmix($trough_color_backdrop,gtk("@theme_unfocused_text_color"),0.5); | ||||
147 | | ||||
121 | // | 148 | // | ||
122 | // Color effects | 149 | // Color effects | ||
123 | // | 150 | // | ||
124 | // | 151 | // | ||
125 | // Color maps for color effect functions | 152 | // Color maps for color effect functions | ||
126 | // | 153 | // | ||
127 | $Color: ( | 154 | $Color: ( | ||
128 | Disabled: $DisabledColor, | 155 | Disabled: $DisabledColor, | ||
Show All 21 Lines | 174 | $IntensityAmount: ( | |||
150 | ); | 177 | ); | ||
151 | $IntensityEffect: ( | 178 | $IntensityEffect: ( | ||
152 | Disabled: $DisabledIntensityEffect, | 179 | Disabled: $DisabledIntensityEffect, | ||
153 | Inactive: $InactiveIntensityEffect | 180 | Inactive: $InactiveIntensityEffect | ||
154 | ); | 181 | ); | ||
155 | 182 | | |||
156 | $r: 3px; // standard radius | 183 | $r: 3px; // standard radius | ||
157 | 184 | | |||
158 | @function insensitive($c) { | 185 | @function internal_insensitive($c) { | ||
159 | @return Color(Intensity(Contrast($c, Disabled), Disabled), Disabled); | 186 | @return internal_Color(internal_Intensity(internal_Contrast($c, Disabled), Disabled), Disabled); | ||
160 | } | 187 | } | ||
161 | 188 | | |||
162 | @function backdrop($c) { | 189 | @function internal_backdrop($c) { | ||
163 | @if $InactiveEnable == true { | 190 | @if $InactiveEnable == true { | ||
164 | @return Color(Intensity(Contrast($c, Inactive), Inactive), Inactive); | 191 | @return internal_Color(internal_Intensity(internal_Contrast($c, Inactive), Inactive), Inactive); | ||
165 | } | 192 | } | ||
166 | @else { | 193 | @else { | ||
167 | @return $c; | 194 | @return $c; | ||
168 | } | 195 | } | ||
169 | } | 196 | } | ||
170 | 197 | | |||
171 | @function Contrast($c, $state) { | 198 | @function internal_Contrast($c, $state) { | ||
172 | 199 | | |||
173 | @if map-get($ContrastEffect, $state) == 0 { | 200 | @if map-get($ContrastEffect, $state) == 0 { | ||
174 | @return $c; | 201 | @return $c; | ||
175 | } | 202 | } | ||
176 | 203 | | |||
177 | @if map-get($ContrastEffect, $state) == 1 { | 204 | @if map-get($ContrastEffect, $state) == 1 { | ||
178 | @if lightness(w_color()) > lightness(w_color(text)) { | 205 | @if lightness(internal_w_color()) > lightness(internal_w_color(text)) { | ||
179 | @if lightness($c) < lightness(w_color()) or ($c == t_color(text) and lightness(t_color(background)) <= lightness(t_color(text))) { | 206 | @if lightness($c) < lightness(internal_w_color()) or ($c == internal_t_color(text) and lightness(internal_t_color(background)) <= lightness(internal_t_color(text))) { | ||
180 | @return transparentize($c, map-get($ContrastAmount, $state)); | 207 | @return transparentize($c, map-get($ContrastAmount, $state)); | ||
181 | } | 208 | } | ||
182 | @else { @return $c; } | 209 | @else { @return $c; } | ||
183 | } | 210 | } | ||
184 | @if lightness(w_color()) <= lightness(w_color(text)) { | 211 | @if lightness(internal_w_color()) <= lightness(internal_w_color(text)) { | ||
185 | @if lightness($c) > lightness(w_color()) or ($c == t_color(text) and lightness(t_color(background)) > lightness(t_color(text))) { | 212 | @if lightness($c) > lightness(internal_w_color()) or ($c == internal_t_color(text) and lightness(internal_t_color(background)) > lightness(internal_t_color(text))) { | ||
186 | @return transparentize($c, map-get($ContrastAmount, $state)); | 213 | @return transparentize($c, map-get($ContrastAmount, $state)); | ||
187 | } | 214 | } | ||
188 | @else { @return $c; } | 215 | @else { @return $c; } | ||
189 | } | 216 | } | ||
190 | } | 217 | } | ||
191 | 218 | | |||
192 | @if map-get($ContrastEffect, $state) == 2 { | 219 | @if map-get($ContrastEffect, $state) == 2 { | ||
193 | @if lightness(w_color()) > lightness(w_color(text)) { // don't know what a reasonable lightness treshhold is for Contrast | 220 | @if lightness(internal_w_color()) > lightness(internal_w_color(text)) { // don't know what a reasonable lightness treshhold is for Contrast | ||
194 | @if lightness($c) < lightness(w_color()) or ($c == t_color(text) and lightness(t_color(background)) <= lightness(t_color(text))) { | 221 | @if lightness($c) < lightness(internal_w_color()) or ($c == internal_t_color(text) and lightness(internal_t_color(background)) <= lightness(internal_t_color(text))) { | ||
195 | @return transparentize($c, map-get($ContrastAmount, $state)); | 222 | @return transparentize($c, map-get($ContrastAmount, $state)); | ||
196 | } | 223 | } | ||
197 | @else { @return $c; } | 224 | @else { @return $c; } | ||
198 | } | 225 | } | ||
199 | @if lightness(w_color()) <= lightness(w_color(text)) { | 226 | @if lightness(internal_w_color()) <= lightness(internal_w_color(text)) { | ||
200 | @if lightness($c) > lightness(w_color()) or ($c == t_color(text) and lightness(t_color(background)) > lightness(t_color(text))){ | 227 | @if lightness($c) > lightness(internal_w_color()) or ($c == internal_t_color(text) and lightness(internal_t_color(background)) > lightness(internal_t_color(text))){ | ||
201 | @return transparentize($c, map-get($ContrastAmount, $state)); | 228 | @return transparentize($c, map-get($ContrastAmount, $state)); | ||
202 | } | 229 | } | ||
203 | @else { @return $c; } | 230 | @else { @return $c; } | ||
204 | } | 231 | } | ||
205 | } | 232 | } | ||
206 | } | 233 | } | ||
207 | 234 | | |||
208 | @function Color($c, $state) { | 235 | @function internal_Color($c, $state) { | ||
209 | 236 | | |||
210 | @if map-get($ColorEffect, $state) ==0 { | 237 | @if map-get($ColorEffect, $state) ==0 { | ||
211 | @return $c; | 238 | @return $c; | ||
212 | } | 239 | } | ||
213 | 240 | | |||
214 | @if map-get($ColorEffect, $state) ==1 { | 241 | @if map-get($ColorEffect, $state) ==1 { | ||
215 | @if map-get($ColorAmount, $state) >=0 { | 242 | @if map-get($ColorAmount, $state) >=0 { | ||
216 | @return desaturate($c, percentage(map-get($ColorAmount, $state))); | 243 | @return desaturate($c, percentage(map-get($ColorAmount, $state))); | ||
217 | } | 244 | } | ||
218 | @else { | 245 | @else { | ||
219 | @return saturate($c, percentage(abs(map-get($ColorAmount, $state)))); | 246 | @return saturate($c, percentage(abs(map-get($ColorAmount, $state)))); | ||
220 | } | 247 | } | ||
221 | } | 248 | } | ||
222 | 249 | | |||
223 | @if map-get($ColorEffect, $state)==2 or map-get($ColorEffect, $state)==3 { // 2 and 3 seem to do the same | 250 | @if map-get($ColorEffect, $state)==2 or map-get($ColorEffect, $state)==3 { // 2 and 3 seem to do the same | ||
224 | @return mix(map-get($Color, $state),$c, percentage(map-get($ColorAmount, $state))); | 251 | @return mix(map-get($Color, $state),$c, percentage(map-get($ColorAmount, $state))); | ||
225 | } | 252 | } | ||
226 | } | 253 | } | ||
227 | 254 | | |||
228 | @function Intensity($c, $state) { | 255 | @function internal_Intensity($c, $state) { | ||
229 | 256 | | |||
230 | @if map-get($IntensityEffect, $state) == 0 { | 257 | @if map-get($IntensityEffect, $state) == 0 { | ||
231 | @return $c; | 258 | @return $c; | ||
232 | } | 259 | } | ||
233 | @if map-get($IntensityEffect, $state) == 1 { | 260 | @if map-get($IntensityEffect, $state) == 1 { | ||
234 | @if map-get($IntensityAmount, $state) >= 0 { | 261 | @if map-get($IntensityAmount, $state) >= 0 { | ||
235 | @return mix(white, $c, percentage(map-get($IntensityAmount, $state))); | 262 | @return mix(white, $c, percentage(map-get($IntensityAmount, $state))); | ||
236 | } | 263 | } | ||
Show All 11 Lines | 269 | @if map-get($IntensityEffect, $state) == 2 { | |||
248 | } | 275 | } | ||
249 | } | 276 | } | ||
250 | 277 | | |||
251 | @if map-get($IntensityEffect, $state) == 3 { | 278 | @if map-get($IntensityEffect, $state) == 3 { | ||
252 | @return change-color($c, $lightness: min(lightness($c)*(1+map-get($IntensityAmount, $state)),100%)); | 279 | @return change-color($c, $lightness: min(lightness($c)*(1+map-get($IntensityAmount, $state)),100%)); | ||
253 | } | 280 | } | ||
254 | } | 281 | } | ||
255 | 282 | | |||
256 | @function alpha2solid($c,$background) { | 283 | @function internal_alpha2solid($c,$background) { | ||
257 | $amount:alpha($c); | 284 | $amount:alpha($c); | ||
258 | $c:rgb(red($c),green($c),blue($c)); | 285 | $c:rgb(red($c),green($c),blue($c)); | ||
259 | @return mix($c,$background,$amount); | 286 | @return mix($c,$background,$amount); | ||
260 | } | 287 | } |