shadow.rs
1use gpui::{
2 App, Application, Bounds, BoxShadow, Context, Div, SharedString, Window, WindowBounds,
3 WindowOptions, div, hsla, point, prelude::*, px, relative, rgb, size,
4};
5
6struct Shadow {}
7
8impl Shadow {
9 fn base() -> Div {
10 div()
11 .size_16()
12 .bg(rgb(0xffffff))
13 .rounded_full()
14 .border_1()
15 .border_color(hsla(0.0, 0.0, 0.0, 0.1))
16 }
17
18 fn square() -> Div {
19 div()
20 .size_16()
21 .bg(rgb(0xffffff))
22 .border_1()
23 .border_color(hsla(0.0, 0.0, 0.0, 0.1))
24 }
25
26 fn rounded_small() -> Div {
27 div()
28 .size_16()
29 .bg(rgb(0xffffff))
30 .rounded(px(4.))
31 .border_1()
32 .border_color(hsla(0.0, 0.0, 0.0, 0.1))
33 }
34
35 fn rounded_medium() -> Div {
36 div()
37 .size_16()
38 .bg(rgb(0xffffff))
39 .rounded(px(8.))
40 .border_1()
41 .border_color(hsla(0.0, 0.0, 0.0, 0.1))
42 }
43
44 fn rounded_large() -> Div {
45 div()
46 .size_16()
47 .bg(rgb(0xffffff))
48 .rounded(px(12.))
49 .border_1()
50 .border_color(hsla(0.0, 0.0, 0.0, 0.1))
51 }
52}
53
54fn example(label: impl Into<SharedString>, example: impl IntoElement) -> impl IntoElement {
55 let label = label.into();
56
57 div()
58 .flex()
59 .flex_col()
60 .justify_center()
61 .items_center()
62 .w(relative(1. / 6.))
63 .border_r_1()
64 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
65 .child(
66 div()
67 .flex()
68 .items_center()
69 .justify_center()
70 .flex_1()
71 .py_12()
72 .child(example),
73 )
74 .child(
75 div()
76 .w_full()
77 .border_t_1()
78 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
79 .p_1()
80 .flex()
81 .items_center()
82 .child(label),
83 )
84}
85
86impl Render for Shadow {
87 fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
88 div()
89 .id("shadow-example")
90 .overflow_y_scroll()
91 .bg(rgb(0xffffff))
92 .size_full()
93 .text_xs()
94 .child(div().flex().flex_col().w_full().children(vec![
95 div()
96 .border_b_1()
97 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
98 .flex()
99 .flex_row()
100 .children(vec![
101 example(
102 "Square",
103 Shadow::square()
104 .shadow(vec![BoxShadow {
105 color: hsla(0.0, 0.5, 0.5, 0.3),
106 offset: point(px(0.), px(8.)),
107 blur_radius: px(8.),
108 spread_radius: px(0.),
109 }]),
110 ),
111 example(
112 "Rounded 4",
113 Shadow::rounded_small()
114 .shadow(vec![BoxShadow {
115 color: hsla(0.0, 0.5, 0.5, 0.3),
116 offset: point(px(0.), px(8.)),
117 blur_radius: px(8.),
118 spread_radius: px(0.),
119 }]),
120 ),
121 example(
122 "Rounded 8",
123 Shadow::rounded_medium()
124 .shadow(vec![BoxShadow {
125 color: hsla(0.0, 0.5, 0.5, 0.3),
126 offset: point(px(0.), px(8.)),
127 blur_radius: px(8.),
128 spread_radius: px(0.),
129 }]),
130 ),
131 example(
132 "Rounded 16",
133 Shadow::rounded_large()
134 .shadow(vec![BoxShadow {
135 color: hsla(0.0, 0.5, 0.5, 0.3),
136 offset: point(px(0.), px(8.)),
137 blur_radius: px(8.),
138 spread_radius: px(0.),
139 }]),
140 ),
141 example(
142 "Circle",
143 Shadow::base()
144 .shadow(vec![BoxShadow {
145 color: hsla(0.0, 0.5, 0.5, 0.3),
146 offset: point(px(0.), px(8.)),
147 blur_radius: px(8.),
148 spread_radius: px(0.),
149 }]),
150 ),
151 ]),
152 div()
153 .border_b_1()
154 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
155 .flex()
156 .w_full()
157 .children(vec![
158 example("None", Shadow::base()),
159 // 2Xsmall shadow
160 example("2X Small", Shadow::base().shadow_2xs()),
161 // Xsmall shadow
162 example("Extra Small", Shadow::base().shadow_xs()),
163 // Small shadow
164 example("Small", Shadow::base().shadow_sm()),
165 // Medium shadow
166 example("Medium", Shadow::base().shadow_md()),
167 // Large shadow
168 example("Large", Shadow::base().shadow_lg()),
169 example("Extra Large", Shadow::base().shadow_xl()),
170 example("2X Large", Shadow::base().shadow_2xl()),
171 ]),
172 // Horizontal list of increasing blur radii
173 div()
174 .border_b_1()
175 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
176 .flex()
177 .children(vec![
178 example(
179 "Blur 0",
180 Shadow::base().shadow(vec![BoxShadow {
181 color: hsla(0.0, 0.0, 0.0, 0.3),
182 offset: point(px(0.), px(8.)),
183 blur_radius: px(0.),
184 spread_radius: px(0.),
185 }]),
186 ),
187 example(
188 "Blur 2",
189 Shadow::base().shadow(vec![BoxShadow {
190 color: hsla(0.0, 0.0, 0.0, 0.3),
191 offset: point(px(0.), px(8.)),
192 blur_radius: px(2.),
193 spread_radius: px(0.),
194 }]),
195 ),
196 example(
197 "Blur 4",
198 Shadow::base().shadow(vec![BoxShadow {
199 color: hsla(0.0, 0.0, 0.0, 0.3),
200 offset: point(px(0.), px(8.)),
201 blur_radius: px(4.),
202 spread_radius: px(0.),
203 }]),
204 ),
205 example(
206 "Blur 8",
207 Shadow::base().shadow(vec![BoxShadow {
208 color: hsla(0.0, 0.0, 0.0, 0.3),
209 offset: point(px(0.), px(8.)),
210 blur_radius: px(8.),
211 spread_radius: px(0.),
212 }]),
213 ),
214 example(
215 "Blur 16",
216 Shadow::base().shadow(vec![BoxShadow {
217 color: hsla(0.0, 0.0, 0.0, 0.3),
218 offset: point(px(0.), px(8.)),
219 blur_radius: px(16.),
220 spread_radius: px(0.),
221 }]),
222 ),
223 ]),
224 // Horizontal list of increasing spread radii
225 div()
226 .border_b_1()
227 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
228 .flex()
229 .children(vec![
230 example(
231 "Spread 0",
232 Shadow::base().shadow(vec![BoxShadow {
233 color: hsla(0.0, 0.0, 0.0, 0.3),
234 offset: point(px(0.), px(8.)),
235 blur_radius: px(8.),
236 spread_radius: px(0.),
237 }]),
238 ),
239 example(
240 "Spread 2",
241 Shadow::base().shadow(vec![BoxShadow {
242 color: hsla(0.0, 0.0, 0.0, 0.3),
243 offset: point(px(0.), px(8.)),
244 blur_radius: px(8.),
245 spread_radius: px(2.),
246 }]),
247 ),
248 example(
249 "Spread 4",
250 Shadow::base().shadow(vec![BoxShadow {
251 color: hsla(0.0, 0.0, 0.0, 0.3),
252 offset: point(px(0.), px(8.)),
253 blur_radius: px(8.),
254 spread_radius: px(4.),
255 }]),
256 ),
257 example(
258 "Spread 8",
259 Shadow::base().shadow(vec![BoxShadow {
260 color: hsla(0.0, 0.0, 0.0, 0.3),
261 offset: point(px(0.), px(8.)),
262 blur_radius: px(8.),
263 spread_radius: px(8.),
264 }]),
265 ),
266 example(
267 "Spread 16",
268 Shadow::base().shadow(vec![BoxShadow {
269 color: hsla(0.0, 0.0, 0.0, 0.3),
270 offset: point(px(0.), px(8.)),
271 blur_radius: px(8.),
272 spread_radius: px(16.),
273 }]),
274 ),
275 ]),
276 // Square spread examples
277 div()
278 .border_b_1()
279 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
280 .flex()
281 .children(vec![
282 example(
283 "Square Spread 0",
284 Shadow::square().shadow(vec![BoxShadow {
285 color: hsla(0.0, 0.0, 0.0, 0.3),
286 offset: point(px(0.), px(8.)),
287 blur_radius: px(8.),
288 spread_radius: px(0.),
289 }]),
290 ),
291 example(
292 "Square Spread 8",
293 Shadow::square().shadow(vec![BoxShadow {
294 color: hsla(0.0, 0.0, 0.0, 0.3),
295 offset: point(px(0.), px(8.)),
296 blur_radius: px(8.),
297 spread_radius: px(8.),
298 }]),
299 ),
300 example(
301 "Square Spread 16",
302 Shadow::square().shadow(vec![BoxShadow {
303 color: hsla(0.0, 0.0, 0.0, 0.3),
304 offset: point(px(0.), px(8.)),
305 blur_radius: px(8.),
306 spread_radius: px(16.),
307 }]),
308 ),
309 ]),
310 // Rounded large spread examples
311 div()
312 .border_b_1()
313 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
314 .flex()
315 .children(vec![
316 example(
317 "Rounded Large Spread 0",
318 Shadow::rounded_large().shadow(vec![BoxShadow {
319 color: hsla(0.0, 0.0, 0.0, 0.3),
320 offset: point(px(0.), px(8.)),
321 blur_radius: px(8.),
322 spread_radius: px(0.),
323 }]),
324 ),
325 example(
326 "Rounded Large Spread 8",
327 Shadow::rounded_large().shadow(vec![BoxShadow {
328 color: hsla(0.0, 0.0, 0.0, 0.3),
329 offset: point(px(0.), px(8.)),
330 blur_radius: px(8.),
331 spread_radius: px(8.),
332 }]),
333 ),
334 example(
335 "Rounded Large Spread 16",
336 Shadow::rounded_large().shadow(vec![BoxShadow {
337 color: hsla(0.0, 0.0, 0.0, 0.3),
338 offset: point(px(0.), px(8.)),
339 blur_radius: px(8.),
340 spread_radius: px(16.),
341 }]),
342 ),
343 ]),
344 // Directional shadows
345 div()
346 .border_b_1()
347 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
348 .flex()
349 .children(vec![
350 example(
351 "Left",
352 Shadow::base().shadow(vec![BoxShadow {
353 color: hsla(0.0, 0.5, 0.5, 0.3),
354 offset: point(px(-8.), px(0.)),
355 blur_radius: px(8.),
356 spread_radius: px(0.),
357 }]),
358 ),
359 example(
360 "Right",
361 Shadow::base().shadow(vec![BoxShadow {
362 color: hsla(0.0, 0.5, 0.5, 0.3),
363 offset: point(px(8.), px(0.)),
364 blur_radius: px(8.),
365 spread_radius: px(0.),
366 }]),
367 ),
368 example(
369 "Top",
370 Shadow::base().shadow(vec![BoxShadow {
371 color: hsla(0.0, 0.5, 0.5, 0.3),
372 offset: point(px(0.), px(-8.)),
373 blur_radius: px(8.),
374 spread_radius: px(0.),
375 }]),
376 ),
377 example(
378 "Bottom",
379 Shadow::base().shadow(vec![BoxShadow {
380 color: hsla(0.0, 0.5, 0.5, 0.3),
381 offset: point(px(0.), px(8.)),
382 blur_radius: px(8.),
383 spread_radius: px(0.),
384 }]),
385 ),
386 ]),
387 // Square directional shadows
388 div()
389 .border_b_1()
390 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
391 .flex()
392 .children(vec![
393 example(
394 "Square Left",
395 Shadow::square().shadow(vec![BoxShadow {
396 color: hsla(0.0, 0.5, 0.5, 0.3),
397 offset: point(px(-8.), px(0.)),
398 blur_radius: px(8.),
399 spread_radius: px(0.),
400 }]),
401 ),
402 example(
403 "Square Right",
404 Shadow::square().shadow(vec![BoxShadow {
405 color: hsla(0.0, 0.5, 0.5, 0.3),
406 offset: point(px(8.), px(0.)),
407 blur_radius: px(8.),
408 spread_radius: px(0.),
409 }]),
410 ),
411 example(
412 "Square Top",
413 Shadow::square().shadow(vec![BoxShadow {
414 color: hsla(0.0, 0.5, 0.5, 0.3),
415 offset: point(px(0.), px(-8.)),
416 blur_radius: px(8.),
417 spread_radius: px(0.),
418 }]),
419 ),
420 example(
421 "Square Bottom",
422 Shadow::square().shadow(vec![BoxShadow {
423 color: hsla(0.0, 0.5, 0.5, 0.3),
424 offset: point(px(0.), px(8.)),
425 blur_radius: px(8.),
426 spread_radius: px(0.),
427 }]),
428 ),
429 ]),
430 // Rounded large directional shadows
431 div()
432 .border_b_1()
433 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
434 .flex()
435 .children(vec![
436 example(
437 "Rounded Large Left",
438 Shadow::rounded_large().shadow(vec![BoxShadow {
439 color: hsla(0.0, 0.5, 0.5, 0.3),
440 offset: point(px(-8.), px(0.)),
441 blur_radius: px(8.),
442 spread_radius: px(0.),
443 }]),
444 ),
445 example(
446 "Rounded Large Right",
447 Shadow::rounded_large().shadow(vec![BoxShadow {
448 color: hsla(0.0, 0.5, 0.5, 0.3),
449 offset: point(px(8.), px(0.)),
450 blur_radius: px(8.),
451 spread_radius: px(0.),
452 }]),
453 ),
454 example(
455 "Rounded Large Top",
456 Shadow::rounded_large().shadow(vec![BoxShadow {
457 color: hsla(0.0, 0.5, 0.5, 0.3),
458 offset: point(px(0.), px(-8.)),
459 blur_radius: px(8.),
460 spread_radius: px(0.),
461 }]),
462 ),
463 example(
464 "Rounded Large Bottom",
465 Shadow::rounded_large().shadow(vec![BoxShadow {
466 color: hsla(0.0, 0.5, 0.5, 0.3),
467 offset: point(px(0.), px(8.)),
468 blur_radius: px(8.),
469 spread_radius: px(0.),
470 }]),
471 ),
472 ]),
473 // Multiple shadows for different shapes
474 div()
475 .border_b_1()
476 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
477 .flex()
478 .children(vec![
479 example(
480 "Circle Multiple",
481 Shadow::base().shadow(vec![
482 BoxShadow {
483 color: hsla(0.0 / 360., 1.0, 0.5, 0.3), // Red
484 offset: point(px(0.), px(-12.)),
485 blur_radius: px(8.),
486 spread_radius: px(2.),
487 },
488 BoxShadow {
489 color: hsla(60.0 / 360., 1.0, 0.5, 0.3), // Yellow
490 offset: point(px(12.), px(0.)),
491 blur_radius: px(8.),
492 spread_radius: px(2.),
493 },
494 BoxShadow {
495 color: hsla(120.0 / 360., 1.0, 0.5, 0.3), // Green
496 offset: point(px(0.), px(12.)),
497 blur_radius: px(8.),
498 spread_radius: px(2.),
499 },
500 BoxShadow {
501 color: hsla(240.0 / 360., 1.0, 0.5, 0.3), // Blue
502 offset: point(px(-12.), px(0.)),
503 blur_radius: px(8.),
504 spread_radius: px(2.),
505 },
506 ]),
507 ),
508 example(
509 "Square Multiple",
510 Shadow::square().shadow(vec![
511 BoxShadow {
512 color: hsla(0.0 / 360., 1.0, 0.5, 0.3), // Red
513 offset: point(px(0.), px(-12.)),
514 blur_radius: px(8.),
515 spread_radius: px(2.),
516 },
517 BoxShadow {
518 color: hsla(60.0 / 360., 1.0, 0.5, 0.3), // Yellow
519 offset: point(px(12.), px(0.)),
520 blur_radius: px(8.),
521 spread_radius: px(2.),
522 },
523 BoxShadow {
524 color: hsla(120.0 / 360., 1.0, 0.5, 0.3), // Green
525 offset: point(px(0.), px(12.)),
526 blur_radius: px(8.),
527 spread_radius: px(2.),
528 },
529 BoxShadow {
530 color: hsla(240.0 / 360., 1.0, 0.5, 0.3), // Blue
531 offset: point(px(-12.), px(0.)),
532 blur_radius: px(8.),
533 spread_radius: px(2.),
534 },
535 ]),
536 ),
537 example(
538 "Rounded Large Multiple",
539 Shadow::rounded_large().shadow(vec![
540 BoxShadow {
541 color: hsla(0.0 / 360., 1.0, 0.5, 0.3), // Red
542 offset: point(px(0.), px(-12.)),
543 blur_radius: px(8.),
544 spread_radius: px(2.),
545 },
546 BoxShadow {
547 color: hsla(60.0 / 360., 1.0, 0.5, 0.3), // Yellow
548 offset: point(px(12.), px(0.)),
549 blur_radius: px(8.),
550 spread_radius: px(2.),
551 },
552 BoxShadow {
553 color: hsla(120.0 / 360., 1.0, 0.5, 0.3), // Green
554 offset: point(px(0.), px(12.)),
555 blur_radius: px(8.),
556 spread_radius: px(2.),
557 },
558 BoxShadow {
559 color: hsla(240.0 / 360., 1.0, 0.5, 0.3), // Blue
560 offset: point(px(-12.), px(0.)),
561 blur_radius: px(8.),
562 spread_radius: px(2.),
563 },
564 ]),
565 ),
566 ]),
567 ]))
568 }
569}
570
571fn main() {
572 Application::new().run(|cx: &mut App| {
573 let bounds = Bounds::centered(None, size(px(1000.0), px(800.0)), cx);
574 cx.open_window(
575 WindowOptions {
576 window_bounds: Some(WindowBounds::Windowed(bounds)),
577 ..Default::default()
578 },
579 |_, cx| cx.new(|_| Shadow {}),
580 )
581 .unwrap();
582
583 cx.activate(true);
584 });
585}