# transparencySafe

> Sugar over `media("(prefers-reduced-transparency: no-preference)", input)`, the same gate `u.translucent()` uses internally.

```ts
import { transparencySafe } from "@sdxc/u/responsive";
```

Sugar over `media("(prefers-reduced-transparency: no-preference)", input)`,
the same gate `u.translucent()` uses internally. Wrap `u.backdropBlur()`
or `u.backdropSaturate()` in it directly to keep both effects gated together.

## 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:

```tsx
<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.

```ts
u.transparencySafe(u.backdropSaturate("2.75rem"))
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.transparencySafe(u.backdropSaturate(1.4)))
```

## Signature

```ts
u.transparencySafe(input: UtilityInput<Node>)
```