[ @sdxc/u/effects ]

contrast

Applies a filter: contrast(...), pushing pixels away from (above 1) or toward (below 1) mid-grey; 0 flattens the element to uniform grey.

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

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

Quick reference

Every documented call, beside the CSS it emits.

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

Examples

Basic example

Use contrast(n) to push an element's colors away from mid-grey above 1, or toward it below 1:

contrast(0.5)

contrast(1.25)

contrast(2)

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

Combining filters

Every filter utility writes its own part of one filter, so contrast() stacks with saturate(), sepia() and the rest:

contrast(1.25)

all three

<div mix={[...]}>
	<div mix={[...]}>
		<img mix={[contrast(1.25), ...]} src={...} alt="" />
		<span mix={[...]}>contrast(1.25)</span>
	</div>
	<div mix={[...]}>
		<img
			mix={[contrast(1.25), saturate(1.5), sepia(0.3), ...]}
			src={...}
			alt=""
		/>
		<span mix={[...]}>all three</span>
	</div>
</div>

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.contrast("2.75rem")

Applying on a state

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

u.hover(u.contrast(1.25))

Responsive design

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

u.at("md", u.contrast(1.25))

Signature

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