Elevation
Three resting shadow depths, plus none (not a token, just the absence of a shadow), which is the default for anything in normal document flow. A component's elevation attribute (see the button page) selects between these directly. Each panel below sits on the page background with the real box-shadow: var(--ox-shadow-*) applied, so the depth is visible, not just described.
None
no tokenLow
--ox-shadow-low- Light
- 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.1)
- Dark
- 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.2)
Med
--ox-shadow-med- Light
- 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 12px rgba(0, 0, 0, 0.1)
- Dark
- 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 2px 12px rgba(0, 0, 0, 0.2)
High
--ox-shadow-high- Light
- 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 8px 24px rgba(0, 0, 0, 0.1)
- Dark
- 0px 2px 2px rgba(0, 0, 0, 0.2), 0px 8px 24px rgba(0, 0, 0, 0.3)
Focus and state rings
Inset rings, not resting shadows: the border a focused, selected, or status-carrying control draws inward from its own edge. Only --ox-shadow-inset-hover changes between light and dark; the status rings are fixed colors in both schemes.
Hover
--ox-shadow-inset-hover- Light
- inset 0px 0px 0px 2px rgba(5, 54, 89, 0.15)
- Dark
- inset 0px 0px 0px 2px rgba(223, 226, 229, 0.2)
Selected
--ox-shadow-inset-selected- Light
- inset 0px 0px 0px 2px rgba(1, 113, 227, 0.5)
- Dark
- inset 0px 0px 0px 2px rgba(1, 113, 227, 0.5)
Success
--ox-shadow-inset-success- Light
- inset 0px 0px 0px 2px rgba(38, 167, 86, 0.3)
- Dark
- inset 0px 0px 0px 2px rgba(38, 167, 86, 0.3)
Warning
--ox-shadow-inset-warning- Light
- inset 0px 0px 0px 2px rgba(226, 164, 0, 0.3)
- Dark
- inset 0px 0px 0px 2px rgba(226, 164, 0, 0.3)
Error
--ox-shadow-inset-error- Light
- inset 0px 0px 0px 2px rgba(227, 25, 59, 0.3)
- Dark
- inset 0px 0px 0px 2px rgba(227, 25, 59, 0.3)