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