effects
shadow
Applies a box shadow from the shadow scale, written to the elevation slot of the shared composite boxShadow declaration.
import { shadow } from "@sdxc/u/effects";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.shadow("lg") | css({ "--ui-box-shadow-elevation": "var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))", boxShadow: "var(--ui-box-shadow-ring, 0 0 #0000), var(--ui-box-shadow-elevation, 0 0 #0000)" }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.shadow("lg")Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.shadow("lg"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.shadow("lg"))Customizing the theme
The custom properties this utility reads, which a theme redefines.
| Variable |
|---|
--ui-box-shadow-elevation |
--ui-box-shadow-ring |
--ui-shadow-lg |
Signature
u.shadow(name?: ShadowName | (string & {}))