1use gpui::{hsla, point, px, BoxShadow};
2use smallvec::{smallvec, SmallVec};
3
4/// Today, elevation is primarily used to add shadows to elements, and set the correct background for elements like buttons.
5///
6/// Elevation can be thought of as the physical closeness of an element to the
7/// user. Elements with lower elevations are physically further away on the
8/// z-axis and appear to be underneath elements with higher elevations.
9///
10/// In the future, a more complete approach to elevation may be added.
11#[derive(Debug, Clone, Copy, PartialEq, Eq)]
12pub enum ElevationIndex {
13 /// On the layer of the app background. This is under panels, panes, and
14 /// other surfaces.
15 Background,
16 /// The primary surface – Contains panels, panes, containers, etc.
17 Surface,
18 /// A surface that is elevated above the primary surface. but below washes, models, and dragged elements.
19 ElevatedSurface,
20 /// A surface that is above all non-modal surfaces, and separates the app from focused intents, like dialogs, alerts, modals, etc.
21 Wash,
22 /// A surface above the [ElevationIndex::Wash] that is used for dialogs, alerts, modals, etc.
23 ModalSurface,
24 /// A surface above all other surfaces, reserved exclusively for dragged elements, like a dragged file, tab or other draggable element.
25 DraggedElement,
26}
27
28impl ElevationIndex {
29 /// Returns an appropriate shadow for the given elevation index.
30 pub fn shadow(self) -> SmallVec<[BoxShadow; 2]> {
31 match self {
32 ElevationIndex::Surface => smallvec![],
33
34 ElevationIndex::ElevatedSurface => smallvec![BoxShadow {
35 color: hsla(0., 0., 0., 0.12),
36 offset: point(px(0.), px(2.)),
37 blur_radius: px(3.),
38 spread_radius: px(0.),
39 }],
40
41 ElevationIndex::ModalSurface => smallvec![
42 BoxShadow {
43 color: hsla(0., 0., 0., 0.12),
44 offset: point(px(0.), px(2.)),
45 blur_radius: px(3.),
46 spread_radius: px(0.),
47 },
48 BoxShadow {
49 color: hsla(0., 0., 0., 0.08),
50 offset: point(px(0.), px(3.)),
51 blur_radius: px(6.),
52 spread_radius: px(0.),
53 },
54 BoxShadow {
55 color: hsla(0., 0., 0., 0.04),
56 offset: point(px(0.), px(6.)),
57 blur_radius: px(12.),
58 spread_radius: px(0.),
59 },
60 ],
61
62 _ => smallvec![],
63 }
64 }
65}