Foundations
Elevation
Stance shadow tokens for light and dark themes, solid outlines in high contrast, and the fixed z-index scale for overlays, menus and toasts.
Elevation is expressed with soft, indigo-tinted shadows in light mode and deeper shadows over lighter surfaces in dark mode. In high contrast, shadows become solid outlines, because depth must not depend on subtle shading.
Shadows
--st-shadow-xsInputs, subtle lift--st-shadow-smCards at rest--st-shadow-mdHovered cards, sticky headers--st-shadow-lgPopovers, menus, toasts--st-shadow-xlDialogs and drawersZ-index
Layers use a fixed scale. Never invent ad-hoc z-index values.
| Token | Value |
|---|---|
--st-z-base | 0 |
--st-z-raised | 1 |
--st-z-sticky | 100 |
--st-z-dropdown | 1000 |
--st-z-overlay | 1100 |
--st-z-modal | 1200 |
--st-z-popover | 1300 |
--st-z-toast | 1400 |
--st-z-tooltip | 1500 |