[ @sdxc/u/state ]

selection

Applies utilities to the element's ::selection; only color, background-color, text-decoration, and text-shadow take effect, and overriding the platform's contrast guarantee requires a high-contrast pair.

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

import { selection } from "@sdxc/u/state";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.selection(u.bg("brand.tint"))`	`css({ "&::selection": { backgroundColor: "..." } })`

Examples

Basic example

Wrap utilities in selection() to style the text a user highlights. Select some of the paragraph:

Utilities compose: a state wrapper takes any of them, so the same few calls style a button at rest, under the pointer, and while it is pressed.

<p mix={[selection([bg("brand.solid"), fg("brand.onSolid")]), ...]}>
	Utilities compose: a state wrapper takes any of them, so the same few calls style a button at
	rest, under the pointer, and while it is pressed.
</p>

Responsive design

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

u.at("md", u.selection(u.bg("brand.tint")))

Signature

u.selection(input: UtilityInput<Node>)