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