Elevation
Shadow recipes for cards, popovers, and floating surfaces.
Each Foundation step (--refineui-elevation-N) automatically switches between light and dark values based on the active theme. Components should prefer the intent-level aliases below, which remain mapped to those Foundation steps. Use the bare variable — explicit *light / *dark suffixes are only needed when a surface must stay in one mode regardless of theme.
| Use | CSS |
|---|---|
| Surface / raised / floating | --refineui-elevation-surface | -raised | -floating |
| Overlay / modal / toast | --refineui-elevation-overlay | -modal | -toast |
| Foundation step | --refineui-elevation-8 |
| Force light | --refineui-elevation-8light |
| Force dark | --refineui-elevation-8dark |
shadow2
shadow4
shadow8
shadow16
shadow24
shadow32
shadow64
.panel { box-shadow: var(--refineui-elevation-floating);}