elevation.rs

 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}