Best Practices
Elevation tokens are divided in three types:
- Focus Ring: Identified by the prefix
$focus-ring, followed by a suffix that indicates the semantic value according to the Color guidelines (base, accent, critical). - Shadow: Identified by the prefix
$shadow, followed by numeric suffixes in a crescent order. - Z-index: Identified by the prefix
$z, followed by numeric suffixes in a crescent order.
Focus Ring
As explained in the rationale, this is a web standard used in the focus state of interactive elements for users that prefer or require keyboard navigation.
| Token | Usage |
|---|---|
$focus-ring-base | Form fields, actions in neutral colors (secondary and tertiary Buttons, and items in a Menu), and popovers |
$focus-ring-accent | Actions in accent color (primary Buttons) |
$focus-ring-critical | Form fields in an error state and actions in critical colors (Critical Buttons and critical items in a Menu) |
Shadow
As mentioned in the rationale, use these tokens to indicate that an element is over another and there is content hidden below it.
| Token | Usage |
|---|---|
$shadow-1 | Popovers |
$shadow-2 | Modal, Drawer, and Toast |
Z-index
This CSS property controls the stacking order of elements on a page, measured along a z-axis. An element with a higher z-index value appears in front of another with a lower z-index value. Elements in the Admin should be stacked as described below.
| Token | Usage |
|---|---|
$z-1 | Page Content, Page Header |
$z-2 | Drawer Backdrop |
$z-3 | Drawer |
$z-4 | Modal Backdrop |
$z-5 | Modal |
$z-6 | Popover |
$z-7 | Toast |
$z-8 | No scenarios mapped |
$z-9 | Tooltip |
$z-10 | Floating contextual help |