Best Practices
Elevation tokens are divided in three types:
- Focus Ring – Identified by the prefix
$focus-ringfollowed by a suffix that indicates the the semantic value according to the colors guidelines (base,accent, orcritical). - Shadow – Identified by the prefix
$shadowfollowed by suffixes that are numbers that are agnostic to the token value, they just represent a crescent order. - Z-index – Identified by the prefix
$zfollowed by suffixes that are numbers that are agnostic to the token value, they just represent a crescent order.
Focus Ring
Include focus states for merchants that prefer or require keyboard navigation (a web standard mentioned in the rationale (opens in a new tab)) and to highlight error states on form fields.
| Token | Usage |
|---|---|
$focus-ring-base | Focus ring of form fields, actions in neutral colors (Secondary and Tertiary Buttons, and items in a Menu), and popovers |
$focus-ring-accent | Focus ring of actions in accent color (Primary Buttons) |
$focus-ring-critical | Focus ring of form fields in error state and actions in critical colors (Critical Buttons and critical items in a Menu) |
Shadow
As mentioned in the rationale (opens in a new tab), use shadows 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
Z-index is the CSS property that controls the stacking order of elements on a page, measured along the z-axis. A higher z-index value means that an element will appear in front of another with a lower z-index value. Elements in the Admin are 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 |