Elevation tokens
A set of predefined tokens which are used to establish a sense of depth and perspective.
Shadow
A set of predefined tokens which enable the use of drop shadows consistently and systematically. AgDS provides three drop shadow tokens:
- sm: Used to slightly elevate interactive elements like cards
- md: Used to further elevate interactive elements on hover
- lg: Used for elements that float above the page like dropdowns and modals.
sm0px 2px 4px rgba(0, 0, 0, 0.15)
md0px 4px 16px rgba(0, 0, 0, 0.15)
lg0px 16px 32px rgba(0, 0, 0, 0.20)
Z-index
A set of predefined tokens for handling the relative distance between two surfaces along the z-axis.
| Token | Value | Description |
|---|---|---|
| base | 0 | The base z-index. |
| elevated | 1 | Used to elevate elements above adjacent elements that sit on the base z-index. |
| overlay | 100 | Used for overlays in modals and other components that sit on top of the page - e.g. Modal, Drawer, Main nav (mobile). |
| dialog | 110 | Used for the main dialog element in modals and other components that sit on top of the - e.g. Modal, Drawer, Main nav (mobile). |
| popover | 200 | Used for popover elements - e.g. the calendar popover in the Date picker. |
| skipLink | 999 | Used for focused Skip links. |