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 // Small shadow
160 example("Small", Shadow::base().shadow_sm()),
161 // Medium shadow
162 example("Medium", Shadow::base().shadow_md()),
163 // Large shadow
164 example("Large", Shadow::base().shadow_lg()),
165 example("Extra Large", Shadow::base().shadow_xl()),
166 example("2X Large", Shadow::base().shadow_2xl()),
167 ]),
168 // Horizontal list of increasing blur radii
169 div()
170 .border_b_1()
171 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
172 .flex()
173 .children(vec![
174 example(
175 "Blur 0",
176 Shadow::base().shadow(vec![BoxShadow {
177 color: hsla(0.0, 0.0, 0.0, 0.3),
178 offset: point(px(0.), px(8.)),
179 blur_radius: px(0.),
180 spread_radius: px(0.),
181 }]),
182 ),
183 example(
184 "Blur 2",
185 Shadow::base().shadow(vec![BoxShadow {
186 color: hsla(0.0, 0.0, 0.0, 0.3),
187 offset: point(px(0.), px(8.)),
188 blur_radius: px(2.),
189 spread_radius: px(0.),
190 }]),
191 ),
192 example(
193 "Blur 4",
194 Shadow::base().shadow(vec![BoxShadow {
195 color: hsla(0.0, 0.0, 0.0, 0.3),
196 offset: point(px(0.), px(8.)),
197 blur_radius: px(4.),
198 spread_radius: px(0.),
199 }]),
200 ),
201 example(
202 "Blur 8",
203 Shadow::base().shadow(vec![BoxShadow {
204 color: hsla(0.0, 0.0, 0.0, 0.3),
205 offset: point(px(0.), px(8.)),
206 blur_radius: px(8.),
207 spread_radius: px(0.),
208 }]),
209 ),
210 example(
211 "Blur 16",
212 Shadow::base().shadow(vec![BoxShadow {
213 color: hsla(0.0, 0.0, 0.0, 0.3),
214 offset: point(px(0.), px(8.)),
215 blur_radius: px(16.),
216 spread_radius: px(0.),
217 }]),
218 ),
219 ]),
220 // Horizontal list of increasing spread radii
221 div()
222 .border_b_1()
223 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
224 .flex()
225 .children(vec![
226 example(
227 "Spread 0",
228 Shadow::base().shadow(vec![BoxShadow {
229 color: hsla(0.0, 0.0, 0.0, 0.3),
230 offset: point(px(0.), px(8.)),
231 blur_radius: px(8.),
232 spread_radius: px(0.),
233 }]),
234 ),
235 example(
236 "Spread 2",
237 Shadow::base().shadow(vec![BoxShadow {
238 color: hsla(0.0, 0.0, 0.0, 0.3),
239 offset: point(px(0.), px(8.)),
240 blur_radius: px(8.),
241 spread_radius: px(2.),
242 }]),
243 ),
244 example(
245 "Spread 4",
246 Shadow::base().shadow(vec![BoxShadow {
247 color: hsla(0.0, 0.0, 0.0, 0.3),
248 offset: point(px(0.), px(8.)),
249 blur_radius: px(8.),
250 spread_radius: px(4.),
251 }]),
252 ),
253 example(
254 "Spread 8",
255 Shadow::base().shadow(vec![BoxShadow {
256 color: hsla(0.0, 0.0, 0.0, 0.3),
257 offset: point(px(0.), px(8.)),
258 blur_radius: px(8.),
259 spread_radius: px(8.),
260 }]),
261 ),
262 example(
263 "Spread 16",
264 Shadow::base().shadow(vec![BoxShadow {
265 color: hsla(0.0, 0.0, 0.0, 0.3),
266 offset: point(px(0.), px(8.)),
267 blur_radius: px(8.),
268 spread_radius: px(16.),
269 }]),
270 ),
271 ]),
272 // Square spread examples
273 div()
274 .border_b_1()
275 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
276 .flex()
277 .children(vec![
278 example(
279 "Square Spread 0",
280 Shadow::square().shadow(vec![BoxShadow {
281 color: hsla(0.0, 0.0, 0.0, 0.3),
282 offset: point(px(0.), px(8.)),
283 blur_radius: px(8.),
284 spread_radius: px(0.),
285 }]),
286 ),
287 example(
288 "Square Spread 8",
289 Shadow::square().shadow(vec![BoxShadow {
290 color: hsla(0.0, 0.0, 0.0, 0.3),
291 offset: point(px(0.), px(8.)),
292 blur_radius: px(8.),
293 spread_radius: px(8.),
294 }]),
295 ),
296 example(
297 "Square Spread 16",
298 Shadow::square().shadow(vec![BoxShadow {
299 color: hsla(0.0, 0.0, 0.0, 0.3),
300 offset: point(px(0.), px(8.)),
301 blur_radius: px(8.),
302 spread_radius: px(16.),
303 }]),
304 ),
305 ]),
306 // Rounded large spread examples
307 div()
308 .border_b_1()
309 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
310 .flex()
311 .children(vec![
312 example(
313 "Rounded Large Spread 0",
314 Shadow::rounded_large().shadow(vec![BoxShadow {
315 color: hsla(0.0, 0.0, 0.0, 0.3),
316 offset: point(px(0.), px(8.)),
317 blur_radius: px(8.),
318 spread_radius: px(0.),
319 }]),
320 ),
321 example(
322 "Rounded Large Spread 8",
323 Shadow::rounded_large().shadow(vec![BoxShadow {
324 color: hsla(0.0, 0.0, 0.0, 0.3),
325 offset: point(px(0.), px(8.)),
326 blur_radius: px(8.),
327 spread_radius: px(8.),
328 }]),
329 ),
330 example(
331 "Rounded Large Spread 16",
332 Shadow::rounded_large().shadow(vec![BoxShadow {
333 color: hsla(0.0, 0.0, 0.0, 0.3),
334 offset: point(px(0.), px(8.)),
335 blur_radius: px(8.),
336 spread_radius: px(16.),
337 }]),
338 ),
339 ]),
340 // Directional shadows
341 div()
342 .border_b_1()
343 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
344 .flex()
345 .children(vec![
346 example(
347 "Left",
348 Shadow::base().shadow(vec![BoxShadow {
349 color: hsla(0.0, 0.5, 0.5, 0.3),
350 offset: point(px(-8.), px(0.)),
351 blur_radius: px(8.),
352 spread_radius: px(0.),
353 }]),
354 ),
355 example(
356 "Right",
357 Shadow::base().shadow(vec![BoxShadow {
358 color: hsla(0.0, 0.5, 0.5, 0.3),
359 offset: point(px(8.), px(0.)),
360 blur_radius: px(8.),
361 spread_radius: px(0.),
362 }]),
363 ),
364 example(
365 "Top",
366 Shadow::base().shadow(vec![BoxShadow {
367 color: hsla(0.0, 0.5, 0.5, 0.3),
368 offset: point(px(0.), px(-8.)),
369 blur_radius: px(8.),
370 spread_radius: px(0.),
371 }]),
372 ),
373 example(
374 "Bottom",
375 Shadow::base().shadow(vec![BoxShadow {
376 color: hsla(0.0, 0.5, 0.5, 0.3),
377 offset: point(px(0.), px(8.)),
378 blur_radius: px(8.),
379 spread_radius: px(0.),
380 }]),
381 ),
382 ]),
383 // Square directional shadows
384 div()
385 .border_b_1()
386 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
387 .flex()
388 .children(vec![
389 example(
390 "Square Left",
391 Shadow::square().shadow(vec![BoxShadow {
392 color: hsla(0.0, 0.5, 0.5, 0.3),
393 offset: point(px(-8.), px(0.)),
394 blur_radius: px(8.),
395 spread_radius: px(0.),
396 }]),
397 ),
398 example(
399 "Square Right",
400 Shadow::square().shadow(vec![BoxShadow {
401 color: hsla(0.0, 0.5, 0.5, 0.3),
402 offset: point(px(8.), px(0.)),
403 blur_radius: px(8.),
404 spread_radius: px(0.),
405 }]),
406 ),
407 example(
408 "Square Top",
409 Shadow::square().shadow(vec![BoxShadow {
410 color: hsla(0.0, 0.5, 0.5, 0.3),
411 offset: point(px(0.), px(-8.)),
412 blur_radius: px(8.),
413 spread_radius: px(0.),
414 }]),
415 ),
416 example(
417 "Square Bottom",
418 Shadow::square().shadow(vec![BoxShadow {
419 color: hsla(0.0, 0.5, 0.5, 0.3),
420 offset: point(px(0.), px(8.)),
421 blur_radius: px(8.),
422 spread_radius: px(0.),
423 }]),
424 ),
425 ]),
426 // Rounded large directional shadows
427 div()
428 .border_b_1()
429 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
430 .flex()
431 .children(vec![
432 example(
433 "Rounded Large Left",
434 Shadow::rounded_large().shadow(vec![BoxShadow {
435 color: hsla(0.0, 0.5, 0.5, 0.3),
436 offset: point(px(-8.), px(0.)),
437 blur_radius: px(8.),
438 spread_radius: px(0.),
439 }]),
440 ),
441 example(
442 "Rounded Large Right",
443 Shadow::rounded_large().shadow(vec![BoxShadow {
444 color: hsla(0.0, 0.5, 0.5, 0.3),
445 offset: point(px(8.), px(0.)),
446 blur_radius: px(8.),
447 spread_radius: px(0.),
448 }]),
449 ),
450 example(
451 "Rounded Large Top",
452 Shadow::rounded_large().shadow(vec![BoxShadow {
453 color: hsla(0.0, 0.5, 0.5, 0.3),
454 offset: point(px(0.), px(-8.)),
455 blur_radius: px(8.),
456 spread_radius: px(0.),
457 }]),
458 ),
459 example(
460 "Rounded Large Bottom",
461 Shadow::rounded_large().shadow(vec![BoxShadow {
462 color: hsla(0.0, 0.5, 0.5, 0.3),
463 offset: point(px(0.), px(8.)),
464 blur_radius: px(8.),
465 spread_radius: px(0.),
466 }]),
467 ),
468 ]),
469 // Multiple shadows for different shapes
470 div()
471 .border_b_1()
472 .border_color(hsla(0.0, 0.0, 0.0, 1.0))
473 .flex()
474 .children(vec![
475 example(
476 "Circle Multiple",
477 Shadow::base().shadow(vec![
478 BoxShadow {
479 color: hsla(0.0 / 360., 1.0, 0.5, 0.3), // Red
480 offset: point(px(0.), px(-12.)),
481 blur_radius: px(8.),
482 spread_radius: px(2.),
483 },
484 BoxShadow {
485 color: hsla(60.0 / 360., 1.0, 0.5, 0.3), // Yellow
486 offset: point(px(12.), px(0.)),
487 blur_radius: px(8.),
488 spread_radius: px(2.),
489 },
490 BoxShadow {
491 color: hsla(120.0 / 360., 1.0, 0.5, 0.3), // Green
492 offset: point(px(0.), px(12.)),
493 blur_radius: px(8.),
494 spread_radius: px(2.),
495 },
496 BoxShadow {
497 color: hsla(240.0 / 360., 1.0, 0.5, 0.3), // Blue
498 offset: point(px(-12.), px(0.)),
499 blur_radius: px(8.),
500 spread_radius: px(2.),
501 },
502 ]),
503 ),
504 example(
505 "Square Multiple",
506 Shadow::square().shadow(vec![
507 BoxShadow {
508 color: hsla(0.0 / 360., 1.0, 0.5, 0.3), // Red
509 offset: point(px(0.), px(-12.)),
510 blur_radius: px(8.),
511 spread_radius: px(2.),
512 },
513 BoxShadow {
514 color: hsla(60.0 / 360., 1.0, 0.5, 0.3), // Yellow
515 offset: point(px(12.), px(0.)),
516 blur_radius: px(8.),
517 spread_radius: px(2.),
518 },
519 BoxShadow {
520 color: hsla(120.0 / 360., 1.0, 0.5, 0.3), // Green
521 offset: point(px(0.), px(12.)),
522 blur_radius: px(8.),
523 spread_radius: px(2.),
524 },
525 BoxShadow {
526 color: hsla(240.0 / 360., 1.0, 0.5, 0.3), // Blue
527 offset: point(px(-12.), px(0.)),
528 blur_radius: px(8.),
529 spread_radius: px(2.),
530 },
531 ]),
532 ),
533 example(
534 "Rounded Large Multiple",
535 Shadow::rounded_large().shadow(vec![
536 BoxShadow {
537 color: hsla(0.0 / 360., 1.0, 0.5, 0.3), // Red
538 offset: point(px(0.), px(-12.)),
539 blur_radius: px(8.),
540 spread_radius: px(2.),
541 },
542 BoxShadow {
543 color: hsla(60.0 / 360., 1.0, 0.5, 0.3), // Yellow
544 offset: point(px(12.), px(0.)),
545 blur_radius: px(8.),
546 spread_radius: px(2.),
547 },
548 BoxShadow {
549 color: hsla(120.0 / 360., 1.0, 0.5, 0.3), // Green
550 offset: point(px(0.), px(12.)),
551 blur_radius: px(8.),
552 spread_radius: px(2.),
553 },
554 BoxShadow {
555 color: hsla(240.0 / 360., 1.0, 0.5, 0.3), // Blue
556 offset: point(px(-12.), px(0.)),
557 blur_radius: px(8.),
558 spread_radius: px(2.),
559 },
560 ]),
561 ),
562 ]),
563 ]))
564 }
565}
566
567fn main() {
568 Application::new().run(|cx: &mut App| {
569 let bounds = Bounds::centered(None, size(px(1000.0), px(800.0)), cx);
570 cx.open_window(
571 WindowOptions {
572 window_bounds: Some(WindowBounds::Windowed(bounds)),
573 ..Default::default()
574 },
575 |_, cx| cx.new(|_| Shadow {}),
576 )
577 .unwrap();
578
579 cx.activate(true);
580 });
581}