[ @sdxc/u/color ]

translucent

A see-through background plus backdrop blur, gated behind prefers-reduced-transparency: no-preference; a reduced-transparency preference gets the opaque --ui-bg background and stays legible.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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)": { backgroundColor: "color-mix(in oklab, var(--ui-bg, Canvas) 70%, transparent)", "--ui-backdrop-blur": "var(--ui-blur-sm, 4px)", backdropFilter: "blur(var(--ui-backdrop-blur, 0px)) ..." } })`

Examples

Basic example

Use translucent() for a panel that blurs what is behind it, falling back to a solid background when the reader prefers reduced transparency:

translucent()

<div mix={[p(8), ...]}>
	<div mix={[translucent(), ...]}>translucent()</div>
</div>

Blur sizes

Pass a blur name, sm, md or lg, to set how strongly the backdrop is blurred:

<div mix={[p(8), ...]}>
	<div mix={[translucent("sm"), ...]}>sm</div>
	<div mix={[translucent("md"), ...]}>md</div>
	<div mix={[translucent("lg"), ...]}>lg</div>
</div>

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 your theme

Customizing colors

Define a palette as --ui-color-{name}-{50..950} and map a tone onto it with the --ui-{tone}-* variables, the way theme.css maps the built-in ones:

:root {
	--ui-color-info-50: oklch(0.97 0.02 230);
	--ui-color-info-200: oklch(0.88 0.06 230);
	--ui-color-info-500: oklch(0.62 0.16 230);
	--ui-color-info-600: oklch(0.52 0.18 230);
	--ui-color-info-900: oklch(0.3 0.1 230);

	--ui-info-bg-tint: var(--ui-color-info-50);
	--ui-info-bg-solid: var(--ui-color-info-600);
	--ui-info-fg: var(--ui-color-info-600);
	--ui-info-fg-muted: var(--ui-color-info-500);
	--ui-info-fg-emphasis: var(--ui-color-info-900);
	--ui-info-fg-on-solid: white;
	--ui-info-border: var(--ui-color-info-200);
	--ui-info-border-strong: var(--ui-color-info-600);
	--ui-info-ring: var(--ui-color-info-500);
}

declare module "@sdxc/u" {
	interface ColorPalettes {
		info: true;
	}
	interface SemanticTones {
		info: true;
	}
}

The new name is then accepted wherever the scale is:

bg("info")

Customizing blur

Redefine a --ui-blur-* variable to change a step, or declare a new one:

:root {
	--ui-blur-xl: 24px;
}

declare module "@sdxc/u" {
	interface Blurs {
		xl: true;
	}
}

The new name is then accepted wherever the scale is:

translucent("xl")

Signature

u.translucent(name?: BlurName | (string & {}))