Skip to main content

orbital_theme/tokens/
color.rs

1use getset::{Getters, Setters};
2use orbital_macros::WriteCSSVars;
3use std::collections::HashMap;
4
5#[derive(Clone, WriteCSSVars, Getters, Setters)]
6#[getset(get = "pub", set = "pub")]
7pub struct ColorTheme {
8    color_scheme: String,
9
10    color_neutral_background_static: String,
11    color_neutral_background_inverted: String,
12    color_neutral_background_disabled: String,
13    color_neutral_background_1: String,
14    color_neutral_background_1_hover: String,
15    color_neutral_background_1_pressed: String,
16    color_neutral_background_2: String,
17    color_neutral_background_3: String,
18    color_neutral_background_3_hover: String,
19    color_neutral_background_3_pressed: String,
20    color_neutral_background_4: String,
21    color_neutral_background_4_hover: String,
22    color_neutral_background_4_pressed: String,
23    color_neutral_background_5: String,
24    color_neutral_background_6: String,
25
26    color_neutral_foreground_static_inverted: String,
27    color_neutral_foreground_disabled: String,
28    color_neutral_foreground_1: String,
29    color_neutral_foreground_1_hover: String,
30    color_neutral_foreground_1_pressed: String,
31    color_neutral_foreground_2: String,
32    color_neutral_foreground_2_hover: String,
33    color_neutral_foreground_2_pressed: String,
34    color_neutral_foreground_2_brand_hover: String,
35    color_neutral_foreground_2_brand_pressed: String,
36    color_neutral_foreground_2_brand_selected: String,
37    color_neutral_foreground_3: String,
38    color_neutral_foreground_4: String,
39    color_neutral_foreground_on_brand: String,
40    color_neutral_foreground_inverted: String,
41
42    color_neutral_stroke_disabled: String,
43    color_neutral_stroke_1: String,
44    color_neutral_stroke_1_hover: String,
45    color_neutral_stroke_1_pressed: String,
46    color_neutral_stroke_2: String,
47    color_neutral_stroke_accessible: String,
48    color_neutral_stroke_accessible_hover: String,
49    color_neutral_stroke_accessible_pressed: String,
50
51    color_neutral_shadow_ambient: String,
52    color_neutral_shadow_key: String,
53
54    color_neutral_stencil_1: String,
55    color_neutral_stencil_2: String,
56
57    color_compound_brand_foreground_1: String,
58    color_compound_brand_foreground_1_hover: String,
59    color_compound_brand_foreground_1_pressed: String,
60    color_compound_brand_background: String,
61    color_compound_brand_background_hover: String,
62    color_compound_brand_background_pressed: String,
63    color_compound_brand_stroke: String,
64    color_compound_brand_stroke_pressed: String,
65
66    color_brand_background: String,
67    color_brand_background_hover: String,
68    color_brand_background_pressed: String,
69    color_brand_background_2: String,
70    color_brand_foreground_1: String,
71    color_brand_foreground_2: String,
72    color_brand_stroke_1: String,
73    color_brand_stroke_2: String,
74    color_brand_stroke_2_contrast: String,
75    color_brand_foreground_link: String,
76    color_brand_foreground_link_hover: String,
77    color_brand_foreground_link_pressed: String,
78
79    color_stroke_focus_2: String,
80
81    color_palette_red_background_1: String,
82    color_palette_red_background_3: String,
83    color_palette_red_foreground_1: String,
84    color_palette_red_foreground_3: String,
85    color_palette_red_border_1: String,
86    color_palette_red_border_2: String,
87    color_palette_green_background_1: String,
88    color_palette_green_background_3: String,
89    color_palette_green_foreground_1: String,
90    color_palette_green_foreground_3: String,
91    color_palette_green_border_1: String,
92    color_palette_green_border_2: String,
93    color_palette_yellow_background_1: String,
94    color_palette_yellow_background_3: String,
95    color_palette_yellow_foreground_1: String,
96    color_palette_yellow_foreground_2: String,
97    color_palette_yellow_border_1: String,
98
99    color_palette_dark_orange_background_1: String,
100    color_palette_dark_orange_background_3: String,
101    color_palette_dark_orange_foreground_1: String,
102    color_palette_dark_orange_foreground_3: String,
103    color_palette_dark_orange_border_1: String,
104
105    color_status_success_background_1: String,
106    color_status_success_foreground_1: String,
107    color_status_success_border_1: String,
108    color_status_warning_background_1: String,
109    color_status_warning_foreground_3: String,
110    color_status_warning_border_1: String,
111    color_status_danger_background_1: String,
112    color_status_danger_foreground_1: String,
113    color_status_danger_border_1: String,
114
115    color_subtle_background: String,
116    color_subtle_background_hover: String,
117    color_subtle_background_pressed: String,
118    color_code_background: String,
119    color_code_foreground: String,
120    color_transparent_background: String,
121    color_transparent_background_hover: String,
122    color_transparent_background_pressed: String,
123    color_transparent_stroke: String,
124
125    shadow2: String,
126    shadow4: String,
127    shadow8: String,
128    shadow16: String,
129    shadow28: String,
130    shadow64: String,
131}
132
133impl ColorTheme {
134    fn validate_palette(brand_colors: &HashMap<i32, String>) {
135        for v in 1..=16 {
136            let variant = v * 10;
137            brand_colors
138                .get(&variant)
139                .unwrap_or_else(|| panic!("Missing variant {} in brand color palette", variant));
140        }
141    }
142    pub fn custom_light(brand_colors: &HashMap<i32, String>) -> Self {
143        Self::validate_palette(brand_colors);
144        let mut theme = Self::light();
145        theme.color_brand_background = brand_colors.get(&80).unwrap().clone();
146        theme.color_brand_background_2 = brand_colors.get(&160).unwrap().clone();
147        theme.color_brand_background_hover = brand_colors.get(&70).unwrap().clone();
148        theme.color_brand_background_pressed = brand_colors.get(&40).unwrap().clone();
149        theme.color_brand_foreground_1 = brand_colors.get(&80).unwrap().clone();
150        theme.color_brand_foreground_2 = brand_colors.get(&70).unwrap().clone();
151        theme.color_brand_foreground_link = brand_colors.get(&70).unwrap().clone();
152        theme.color_brand_foreground_link_hover = brand_colors.get(&60).unwrap().clone();
153        theme.color_brand_foreground_link_pressed = brand_colors.get(&40).unwrap().clone();
154        theme.color_brand_stroke_1 = brand_colors.get(&80).unwrap().clone();
155        theme.color_brand_stroke_2 = brand_colors.get(&140).unwrap().clone();
156        theme.color_brand_stroke_2_contrast = brand_colors.get(&140).unwrap().clone();
157        theme.color_compound_brand_background = brand_colors.get(&80).unwrap().clone();
158        theme.color_compound_brand_background_hover = brand_colors.get(&70).unwrap().clone();
159        theme.color_compound_brand_background_pressed = brand_colors.get(&60).unwrap().clone();
160        theme.color_compound_brand_foreground_1 = brand_colors.get(&80).unwrap().clone();
161        theme.color_compound_brand_foreground_1_hover = brand_colors.get(&70).unwrap().clone();
162        theme.color_compound_brand_foreground_1_pressed = brand_colors.get(&60).unwrap().clone();
163        theme.color_compound_brand_stroke = brand_colors.get(&80).unwrap().clone();
164        theme.color_compound_brand_stroke_pressed = brand_colors.get(&60).unwrap().clone();
165        theme.color_neutral_foreground_2_brand_hover = brand_colors.get(&80).unwrap().clone();
166        theme.color_neutral_foreground_2_brand_pressed = brand_colors.get(&70).unwrap().clone();
167        theme.color_neutral_foreground_2_brand_selected = brand_colors.get(&80).unwrap().clone();
168        theme
169    }
170
171    pub fn custom_dark(brand_colors: &HashMap<i32, String>) -> Self {
172        Self::validate_palette(brand_colors);
173        let mut theme = Self::dark();
174        theme.color_brand_background = brand_colors.get(&70).unwrap().clone();
175        theme.color_brand_background_2 = brand_colors.get(&20).unwrap().clone();
176        theme.color_brand_background_hover = brand_colors.get(&80).unwrap().clone();
177        theme.color_brand_background_pressed = brand_colors.get(&40).unwrap().clone();
178        theme.color_brand_foreground_1 = brand_colors.get(&110).unwrap().clone();
179        theme.color_brand_foreground_2 = brand_colors.get(&120).unwrap().clone();
180        theme.color_brand_foreground_link = brand_colors.get(&100).unwrap().clone();
181        theme.color_brand_foreground_link_hover = brand_colors.get(&110).unwrap().clone();
182        theme.color_brand_foreground_link_pressed = brand_colors.get(&90).unwrap().clone();
183        theme.color_brand_stroke_1 = brand_colors.get(&100).unwrap().clone();
184        theme.color_brand_stroke_2 = brand_colors.get(&50).unwrap().clone();
185        theme.color_brand_stroke_2_contrast = brand_colors.get(&50).unwrap().clone();
186        theme.color_compound_brand_background = brand_colors.get(&100).unwrap().clone();
187        theme.color_compound_brand_background_hover = brand_colors.get(&110).unwrap().clone();
188        theme.color_compound_brand_background_pressed = brand_colors.get(&90).unwrap().clone();
189        theme.color_compound_brand_foreground_1 = brand_colors.get(&100).unwrap().clone();
190        theme.color_compound_brand_foreground_1_hover = brand_colors.get(&110).unwrap().clone();
191        theme.color_compound_brand_foreground_1_pressed = brand_colors.get(&90).unwrap().clone();
192        theme.color_compound_brand_stroke = brand_colors.get(&100).unwrap().clone();
193        theme.color_compound_brand_stroke_pressed = brand_colors.get(&90).unwrap().clone();
194        theme.color_neutral_foreground_2_brand_hover = brand_colors.get(&100).unwrap().clone();
195        theme.color_neutral_foreground_2_brand_pressed = brand_colors.get(&90).unwrap().clone();
196        theme.color_neutral_foreground_2_brand_selected = brand_colors.get(&100).unwrap().clone();
197        theme
198    }
199
200    pub fn light() -> Self {
201        Self {
202            color_scheme: "light".into(),
203
204            color_neutral_background_static: "#313435".into(),
205            color_neutral_background_inverted: "#272a2b".into(),
206            color_neutral_background_disabled: "#eff0f1".into(),
207            color_neutral_background_1: "#ffffff".into(),
208            color_neutral_background_1_hover: "#f5f5f5".into(),
209            color_neutral_background_1_pressed: "#dfe0e1".into(),
210            color_neutral_background_2: "#f9fafb".into(),
211            color_neutral_background_3: "#f5f5f5".into(),
212            color_neutral_background_3_hover: "#eaebec".into(),
213            color_neutral_background_3_pressed: "#d4d7d8".into(),
214            color_neutral_background_4: "#eff0f1".into(),
215            color_neutral_background_4_hover: "#fafafa".into(),
216            color_neutral_background_4_pressed: "#f5f5f5".into(),
217            color_neutral_background_5: "#eaebec".into(),
218            color_neutral_background_6: "#e5e6e7".into(),
219
220            color_neutral_foreground_static_inverted: "#ffffff".into(),
221            color_neutral_foreground_disabled: "#babec0".into(),
222            color_neutral_foreground_1: "#232425".into(),
223            color_neutral_foreground_1_hover: "#232425".into(),
224            color_neutral_foreground_1_pressed: "#232425".into(),
225            color_neutral_foreground_2: "#3f4345".into(),
226            color_neutral_foreground_2_hover: "#232425".into(),
227            color_neutral_foreground_2_pressed: "#232425".into(),
228            color_neutral_foreground_2_brand_hover: "#1a6f94".into(),
229            color_neutral_foreground_2_brand_pressed: "#1e82ae".into(),
230            color_neutral_foreground_2_brand_selected: "#1a6f94".into(),
231            color_neutral_foreground_3: "#5d6265".into(),
232            color_neutral_foreground_4: "#6c7174".into(),
233            color_neutral_foreground_on_brand: "#fff".into(),
234            color_neutral_foreground_inverted: "#fff".into(),
235
236            color_neutral_stroke_disabled: "#dfe0e1".into(),
237            color_neutral_stroke_1: "#cfd2d3".into(),
238            color_neutral_stroke_1_hover: "#c5c8c9".into(),
239            color_neutral_stroke_1_pressed: "#b0b4b6".into(),
240            color_neutral_stroke_2: "#dfe0e1".into(),
241            color_neutral_stroke_accessible: "#5d6265".into(),
242            color_neutral_stroke_accessible_hover: "#54585a".into(),
243            color_neutral_stroke_accessible_pressed: "#4a4e50".into(),
244
245            color_neutral_shadow_ambient: "rgba(0,0,0,0.11)".into(),
246            color_neutral_shadow_key: "rgba(0,0,0,0.13)".into(),
247
248            color_neutral_stencil_1: "#e5e6e7".into(),
249            color_neutral_stencil_2: "#fafafa".into(),
250
251            color_compound_brand_foreground_1: "#1a6f94".into(),
252            color_compound_brand_foreground_1_hover: "#1e82ae".into(),
253            color_compound_brand_foreground_1_pressed: "#1a6f93".into(),
254
255            color_compound_brand_background: "#1a6f94".into(),
256            color_compound_brand_background_hover: "#1e82ae".into(),
257            color_compound_brand_background_pressed: "#1a6f93".into(),
258            color_compound_brand_stroke: "#1a6f94".into(),
259            color_compound_brand_stroke_pressed: "#1a6f93".into(),
260
261            color_brand_background: "#1a6f94".into(),
262            color_brand_background_hover: "#1e82ae".into(),
263            color_brand_background_pressed: "#11485f".into(),
264            color_brand_background_2: "#f6fbfd".into(),
265            color_brand_foreground_1: "#1a6f94".into(),
266            color_brand_foreground_2: "#1e82ae".into(),
267            color_brand_stroke_1: "#1a6f94".into(),
268            color_brand_stroke_2: "#d4edf7".into(),
269            color_brand_stroke_2_contrast: "#d4edf7".into(),
270            color_brand_foreground_link: "#1e82ae".into(),
271            color_brand_foreground_link_hover: "#1a6f93".into(),
272            color_brand_foreground_link_pressed: "#11485f".into(),
273
274            color_stroke_focus_2: "#000000".into(),
275
276            color_palette_red_background_1: "#fdf7f6".into(),
277            color_palette_red_background_3: "#d54d30".into(),
278            color_palette_red_foreground_1: "#c0462b".into(),
279            color_palette_red_foreground_3: "#d54d30".into(),
280            color_palette_red_border_1: "#f2c4ba".into(),
281            color_palette_red_border_2: "#d54d30".into(),
282            color_palette_green_background_1: "#f1faf3".into(),
283            color_palette_green_background_3: "#0d7f24".into(),
284            color_palette_green_foreground_1: "#0c7220".into(),
285            color_palette_green_foreground_3: "#0d7f24".into(),
286            color_palette_green_border_1: "#9ed9aa".into(),
287            color_palette_green_border_2: "#0d7f24".into(),
288            color_palette_yellow_background_1: "#fefff5".into(),
289            color_palette_yellow_background_3: "#e4fd00".into(),
290            color_palette_yellow_foreground_1: "#748100".into(),
291            color_palette_yellow_foreground_2: "#748100".into(),
292            color_palette_yellow_border_1: "#f7ffb1".into(),
293
294            color_palette_dark_orange_background_1: "#fdf8f3".into(),
295            color_palette_dark_orange_background_3: "#db6600".into(),
296            color_palette_dark_orange_foreground_1: "#c55c00".into(),
297            color_palette_dark_orange_foreground_3: "#db6600".into(),
298            color_palette_dark_orange_border_1: "#f6cea9".into(),
299
300            color_status_success_background_1: "#f1faf3".into(),
301            color_status_success_foreground_1: "#0c7220".into(),
302            color_status_success_border_1: "#9ed9aa".into(),
303            color_status_warning_background_1: "#fffbf5".into(),
304            color_status_warning_foreground_3: "#c06f05".into(),
305            color_status_warning_border_1: "#ffdeb2".into(),
306            color_status_danger_background_1: "#fdf4f3".into(),
307            color_status_danger_foreground_1: "#b51d0a".into(),
308            color_status_danger_border_1: "#f0b2aa".into(),
309
310            color_subtle_background: "transparent".into(),
311            color_subtle_background_hover: "#f5f5f5".into(),
312            color_subtle_background_pressed: "#dfe0e1".into(),
313            color_code_background: "#e9f6fb".into(),
314            color_code_foreground: "#11485f".into(),
315            color_transparent_background: "transparent".into(),
316            color_transparent_background_hover: "transparent".into(),
317            color_transparent_background_pressed: "transparent".into(),
318            color_transparent_stroke: "transparent".into(),
319
320            shadow2: "0 0 1px rgba(0,0,0,0.11), 0 1px 3px rgba(0,0,0,0.13)".into(),
321            shadow4: "0 0 2px rgba(0,0,0,0.11), 0 2px 5px rgba(0,0,0,0.13)".into(),
322            shadow8: "0 0 2px rgba(0,0,0,0.11), 0 4px 9px rgba(0,0,0,0.13)".into(),
323            shadow16: "0 0 3px rgba(0,0,0,0.11), 0 8px 18px rgba(0,0,0,0.13)".into(),
324            shadow28: "0 0 3px rgba(0,0,0,0.11), 0 14px 30px rgba(0,0,0,0.13)".into(),
325            shadow64: "0 0 8px rgba(0,0,0,0.11), 0 32px 68px rgba(0,0,0,0.13)".into(),
326        }
327    }
328
329    pub fn dark() -> Self {
330        Self {
331            color_scheme: "dark".into(),
332
333            color_neutral_background_static: "#3b3e3f".into(),
334            color_neutral_background_inverted: "#ffffff".into(),
335            color_neutral_background_disabled: "#131415".into(),
336            color_neutral_background_1: "#272a2b".into(),
337            color_neutral_background_1_hover: "#3b3e3f".into(),
338            color_neutral_background_1_pressed: "#1e1f20".into(),
339            color_neutral_background_2: "#1e2224".into(),
340            color_neutral_background_3: "#131415".into(),
341            color_neutral_background_3_hover: "#272a2b".into(),
342            color_neutral_background_3_pressed: "#0a0a0a".into(),
343            color_neutral_background_4: "#0a0a0a".into(),
344            color_neutral_background_4_hover: "#1e1f20".into(),
345            color_neutral_background_4_pressed: "#000000".into(),
346            color_neutral_background_5: "#000000".into(),
347            color_neutral_background_6: "#313435".into(),
348
349            color_neutral_foreground_static_inverted: "#ffffff".into(),
350            color_neutral_foreground_disabled: "#585d60".into(),
351            color_neutral_foreground_1: "#fff".into(),
352            color_neutral_foreground_1_hover: "#fff".into(),
353            color_neutral_foreground_1_pressed: "#fff".into(),
354            color_neutral_foreground_2: "#d4d7d8".into(),
355            color_neutral_foreground_2_hover: "#fff".into(),
356            color_neutral_foreground_2_pressed: "#fff".into(),
357            color_neutral_foreground_2_brand_hover: "#51b5e1".into(),
358            color_neutral_foreground_2_brand_pressed: "#2fa6da".into(),
359            color_neutral_foreground_2_brand_selected: "#51b5e1".into(),
360            color_neutral_foreground_3: "#aaaeb0".into(),
361            color_neutral_foreground_4: "#959a9d".into(),
362            color_neutral_foreground_on_brand: "#fff".into(),
363            color_neutral_foreground_inverted: "#232425".into(),
364
365            color_neutral_stroke_disabled: "#3f4345".into(),
366            color_neutral_stroke_1: "#62676a".into(),
367            color_neutral_stroke_1_hover: "#70777a".into(),
368            color_neutral_stroke_1_pressed: "#676c6f".into(),
369            color_neutral_stroke_2: "#4f5355".into(),
370            color_neutral_stroke_accessible: "#aaaeb0".into(),
371            color_neutral_stroke_accessible_hover: "#babec0".into(),
372            color_neutral_stroke_accessible_pressed: "#b0b4b6".into(),
373
374            color_neutral_shadow_ambient: "rgba(0,0,0,0.22)".into(),
375            color_neutral_shadow_key: "rgba(0,0,0,0.26)".into(),
376
377            color_neutral_stencil_1: "#54585a".into(),
378            color_neutral_stencil_2: "#313435".into(),
379
380            color_compound_brand_foreground_1: "#51b5e1".into(),
381            color_compound_brand_foreground_1_hover: "#74c4e7".into(),
382            color_compound_brand_foreground_1_pressed: "#2fa6da".into(),
383
384            color_compound_brand_background: "#51b5e1".into(),
385            color_compound_brand_background_hover: "#74c4e7".into(),
386            color_compound_brand_background_pressed: "#2fa6da".into(),
387            color_compound_brand_stroke: "#51b5e1".into(),
388            color_compound_brand_stroke_pressed: "#2fa6da".into(),
389
390            color_brand_background: "#1e82ae".into(),
391            color_brand_background_hover: "#1a6f94".into(),
392            color_brand_background_pressed: "#11485f".into(),
393            color_brand_background_2: "#092734".into(),
394            color_brand_foreground_1: "#74c4e7".into(),
395            color_brand_foreground_2: "#97d3ed".into(),
396            color_brand_stroke_1: "#51b5e1".into(),
397            color_brand_stroke_2: "#155b79".into(),
398            color_brand_stroke_2_contrast: "#155b79".into(),
399            color_brand_foreground_link: "#51b5e1".into(),
400            color_brand_foreground_link_hover: "#74c4e7".into(),
401            color_brand_foreground_link_pressed: "#2fa6da".into(),
402
403            color_stroke_focus_2: "#ffffff".into(),
404
405            color_palette_red_background_1: "#40180f".into(),
406            color_palette_red_background_3: "#d54d30".into(),
407            color_palette_red_foreground_1: "#e68d7a".into(),
408            color_palette_red_foreground_3: "#e68d7a".into(),
409            color_palette_red_border_1: "#d54d30".into(),
410            color_palette_red_border_2: "#e68d7a".into(),
411            color_palette_green_background_1: "#04260b".into(),
412            color_palette_green_background_3: "#0d7f24".into(),
413            color_palette_green_foreground_1: "#52b265".into(),
414            color_palette_green_foreground_3: "#9ed9aa".into(),
415            color_palette_green_border_1: "#0d7f24".into(),
416            color_palette_green_border_2: "#9ed9aa".into(),
417            color_palette_yellow_background_1: "#454c00".into(),
418            color_palette_yellow_background_3: "#e4fd00".into(),
419            color_palette_yellow_foreground_1: "#f0ff65".into(),
420            color_palette_yellow_foreground_2: "#f7ffb1".into(),
421            color_palette_yellow_border_1: "#e4fd00".into(),
422
423            color_palette_dark_orange_background_1: "#411f00".into(),
424            color_palette_dark_orange_background_3: "#db6600".into(),
425            color_palette_dark_orange_foreground_1: "#ec9f5b".into(),
426            color_palette_dark_orange_foreground_3: "#ec9f5b".into(),
427            color_palette_dark_orange_border_1: "#db6600".into(),
428
429            color_status_success_background_1: "#04260b".into(),
430            color_status_success_foreground_1: "#52b265".into(),
431            color_status_success_border_1: "#0d7f24".into(),
432            color_status_warning_background_1: "#4c2c02".into(),
433            color_status_warning_foreground_3: "#fead41".into(),
434            color_status_warning_border_1: "#fd9306".into(),
435            color_status_danger_background_1: "#3c0b04".into(),
436            color_status_danger_foreground_1: "#df6d5f".into(),
437            color_status_danger_border_1: "#ca200a".into(),
438
439            color_subtle_background: "transparent".into(),
440            color_subtle_background_hover: "#36393a".into(),
441            color_subtle_background_pressed: "#2c2f30".into(),
442            color_code_background: "#161b22".into(),
443            color_code_foreground: "#c9d1d9".into(),
444            color_transparent_background: "transparent".into(),
445            color_transparent_background_hover: "transparent".into(),
446            color_transparent_background_pressed: "transparent".into(),
447            color_transparent_stroke: "transparent".into(),
448
449            shadow2: "0 0 1px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.26)".into(),
450            shadow4: "0 0 2px rgba(0,0,0,0.22), 0 2px 5px rgba(0,0,0,0.26)".into(),
451            shadow8: "0 0 2px rgba(0,0,0,0.22), 0 4px 9px rgba(0,0,0,0.26)".into(),
452            shadow16: "0 0 3px rgba(0,0,0,0.22), 0 8px 18px rgba(0,0,0,0.26)".into(),
453            shadow28: "0 0 3px rgba(0,0,0,0.22), 0 14px 30px rgba(0,0,0,0.26)".into(),
454            shadow64: "0 0 8px rgba(0,0,0,0.22), 0 32px 68px rgba(0,0,0,0.26)".into(),
455        }
456    }
457}