[ @sdxc/u/responsive ]

forcedColors

Sugar over media("(forced-colors: active)", input).

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

import { forcedColors } from "@sdxc/u/responsive";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.forcedColors(u.forcedColorAdjust("none"))`	`css({ "@media (forced-colors: active)": { forcedColorAdjust: "none" } })`

Examples

Basic example

Use forcedColors(...) to apply utilities when the system forces its own palette, as a Windows contrast theme does, to restore cues that color alone carried. Emulate forced-colors: active in your browser's dev tools to see the border appear:

Online

<span
	mix={[
		bg("success.solid"),
		fg("success.onSolid"),
		forcedColors(border({ width: 2 })),
		...,
	]}
>
	Online
</span>

Keeping an element's colors

Pair it with forcedColorAdjust("none") on content whose color is the point, like a color picker's swatches:

<div mix={[...]}>
	<div
		mix={[
			bg("color.brand.500"),
			is(12),
			bs(12),
			rounded("md"),
			forcedColors(forcedColorAdjust("none")),
		]}
	/>
	<div
		mix={[
			bg("color.success.500"),
			is(12),
			bs(12),
			rounded("md"),
			forcedColors(forcedColorAdjust("none")),
		]}
	/>
	<div
		mix={[
			bg("color.danger.500"),
			is(12),
			bs(12),
			rounded("md"),
			forcedColors(forcedColorAdjust("none")),
		]}
	/>
</div>

Applying on a state

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

u.hover(u.forcedColors(u.forcedColorAdjust("none")))

Signature

u.forcedColors(input: UtilityInput<Node>)