[ @sdxc/u/effects ]

opacity

Applies opacity from a 0-100 integer.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.opacity(50)`	`css({ opacity: 0.5 })`

Examples

Basic example

Use opacity(n) with a value from 0 to 100 to make an element and everything inside it see-through:

opacity(100)

opacity(75)

opacity(50)

opacity(25)

<div mix={[...]}>
	<div mix={[opacity(100), ...]}>opacity(100)</div>
	<div mix={[opacity(75), ...]}>opacity(75)</div>
	<div mix={[opacity(50), ...]}>opacity(50)</div>
	<div mix={[opacity(25), ...]}>opacity(25)</div>
</div>

Fading disabled controls

Combine it with disabled() to fade a control while it can't be used:

<div mix={[...]}>
	<button type="button" mix={[disabled(opacity(50)), ...]}>
		Save
	</button>
	<button type="button" disabled mix={[disabled(opacity(50)), ...]}>
		Save
	</button>
</div>

Using a custom value

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

u.opacity("2.75rem")

Applying on a state

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

u.hover(u.opacity(50))

Responsive design

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

u.at("md", u.opacity(50))

Signature

u.opacity(value: number)