[ @sdxc/u/effects ]

grayscale

Applies a filter: grayscale(...), desaturating toward grey; 1 (the default) is fully grey, dimming an inactive element while its layout holds.

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

import { grayscale } from "@sdxc/u/effects";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.grayscale()`	`css({ "--ui-filter-grayscale": "1", filter: "... grayscale(var(--ui-filter-grayscale, 0)) ..." })`

Examples

Basic example

Use grayscale(n) to desaturate an element toward grey, where grayscale() with no argument is fully grey:

grayscale(0.25)

grayscale(0.5)

grayscale()

<div mix={[...]}>
	<div mix={[...]}>
		<img mix={[grayscale(0.25), ...]} src={...} alt="" />
		<span mix={[...]}>grayscale(0.25)</span>
	</div>
	<div mix={[...]}>
		<img mix={[grayscale(0.5), ...]} src={...} alt="" />
		<span mix={[...]}>grayscale(0.5)</span>
	</div>
	<div mix={[...]}>
		<img mix={[grayscale(), ...]} src={...} alt="" />
		<span mix={[...]}>grayscale()</span>
	</div>
</div>

Restoring color on hover

Set grayscale() and override it with hover(grayscale(0)) to bring color back when the element is hovered. Hover the photograph:

<img
	mix={[
		grayscale(),
		hover(grayscale(0)),
		transition("filter", { duration: 300 }),
		...,
	]}
	src={...}
	alt=""
/>

Applying on a state

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

u.hover(u.grayscale())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.grayscale())

Signature

u.grayscale(value?: number | (string & {}))