[ @sdxc/u/state ]
backdrop
Applies the given utilities to a top-layer element's ::backdrop, the layer the browser paints behind a <dialog> or popover to dim the page with no overlay, z-index, or scroll container; pairs with u.open().
import { backdrop } from "@sdxc/u/state";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.backdrop(u.bg("neutral.solid")) | css({ "&::backdrop": { backgroundColor: "..." } }) |
Examples
Basic example
Wrap utilities in backdrop() to paint the layer behind a modal dialog. Click the button to open the dialog:
<div>
<button
type="button"
commandfor="backdrop-basic"
command="show-modal"
mix={[bg("brand.solid"), fg("brand.onSolid"), cursor("pointer"), ...]}
>
Delete project
</button>
<dialog id="backdrop-basic" mix={[backdrop([bg("neutral.solid"), opacity(60)]), ...]}>
<div mix={[vstack({ gap: 3 })]}>
<p mix={[text("base"), weight("semibold")]}>Delete this project?</p>
<button
type="button"
commandfor="backdrop-basic"
command="close"
mix={[bg("neutral.tint"), fg("neutral.emphasis"), cursor("pointer"), ...]}
>
Cancel
</button>
</div>
</dialog>
</div>Blurring the page
Put backdropBlur() inside backdrop() to frost the page behind the dialog. Open it to see the blur:
<div>
<button
type="button"
commandfor="backdrop-blurred"
command="show-modal"
mix={[bg("brand.solid"), fg("brand.onSolid"), cursor("pointer"), ...]}
>
Open settings
</button>
<dialog
id="backdrop-blurred"
mix={[
backdrop([bg("transparent"), backdropBlur("md"), backdropBrightness(0.8)]),
...,
]}
>
<div mix={[vstack({ gap: 3 })]}>
<p mix={[text("base"), weight("semibold")]}>Settings</p>
<button
type="button"
commandfor="backdrop-blurred"
command="close"
mix={[bg("neutral.tint"), fg("neutral.emphasis"), cursor("pointer"), ...]}
>
Done
</button>
</div>
</dialog>
</div>Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.backdrop(u.bg("neutral.solid")))Signature
u.backdrop(input: UtilityInput<Node>)