[ @sdxc/u/color ]

outline-width

Sets outline-width alone, so a state can override the width while the color and style already in effect stay in force.

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

import { outlineWidth } from "@sdxc/u/color";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.outlineWidth(4)`	`css({ outlineWidth: "4px" })`
`u.outlineWidth("0.25rem")`	`css({ outlineWidth: "0.25rem" })`

Examples

Basic example

Use outlineWidth with a number of pixels to set only the width of an outline:

outlineWidth(1)

outlineWidth(2)

outlineWidth(4)

outlineWidth(8)

<div mix={[...]}>
	<div mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth(1), ...]}>
		outlineWidth(1)
	</div>
	<div mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth(2), ...]}>
		outlineWidth(2)
	</div>
	<div mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth(4), ...]}>
		outlineWidth(4)
	</div>
	<div mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth(8), ...]}>
		outlineWidth(8)
	</div>
</div>

CSS lengths

Pass a string for any CSS length or keyword, like 0.25rem or thick:

0.25rem

0.5em

thick

<div mix={[...]}>
	<div
		mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth("0.25rem"), ...]}
	>
		0.25rem
	</div>
	<div
		mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth("0.5em"), ...]}
	>
		0.5em
	</div>
	<div
		mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth("thick"), ...]}
	>
		thick
	</div>
</div>

Using a custom value

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

u.outlineWidth("2.75rem")

Applying on a state

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

u.hover(u.outlineWidth(4))

Responsive design

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

u.at("md", u.outlineWidth(4))

Signature

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