[ @sdxc/u/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)) ..." } }) |
Examples
Basic example
Use transparencySafe(...) to apply see-through effects only when the reader has not asked for less transparency. Turn on Reduce transparency in your system's accessibility settings to see the blur go:
Frosted glass
<div mix={[...]}>
<div mix={[transparencySafe(backdropBlur("lg")), ...]}>Frosted glass</div>
</div>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)))Signature
u.transparencySafe(input: UtilityInput<Node>)