responsive
transparencySafe
Sugar over media("(prefers-reduced-transparency: no-preference)", input), the same gate u.translucent() uses internally.
import { transparencySafe } from "@sdxc/u/responsive";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.transparencySafe(u.backdropSaturate(1.4)) | css({ "@media (prefers-reduced-transparency: no-preference)": { "--ui-backdrop-saturate": "1.4", backdropFilter: "blur(var(--ui-backdrop-blur, 0px)) ...", WebkitBackdropFilter: "blur(var(--ui-backdrop-blur, 0px)) ..." } }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.transparencySafe(u.backdropSaturate("2.75rem"))Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.transparencySafe(u.backdropSaturate(1.4)))Customizing the theme
The custom properties this utility reads, which a theme redefines.
| Variable |
|---|
--ui-backdrop-blur |
--ui-backdrop-saturate |
Signature
u.transparencySafe(input: UtilityInput<Node>)