color
background-color
A solid background plus backdrop blur, gated behind prefers-reduced-transparency: no-preference so a reduced-transparency preference keeps the plain solid background and stays legible.
import { translucent } from "@sdxc/u/color";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.translucent("sm") | css({ backgroundColor: "var(--ui-bg, Canvas)", "@media (prefers-reduced-transparency: no-preference)": { "--ui-backdrop-blur": "var(--ui-blur-sm, 4px)", 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.translucent("sm")Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.translucent("sm"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.translucent("sm"))Customizing the theme
The custom properties this utility reads, which a theme redefines.
| Variable |
|---|
--ui-backdrop-blur |
--ui-bg |
--ui-blur-sm |
Signature
u.translucent(name?: BlurName | (string & {}))