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: "..." } })`

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.backdrop(u.bg("neutral.solid"))

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>)