[ @sdxc/u/color ]

outline-style

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

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.outlineStyle("dashed")`	`css({ outlineStyle: "dashed" })`

Examples

Basic example

Use outlineStyle to set only the style of an outline, like dashed or dotted:

solid

dashed

dotted

double

<div mix={[...]}>
	<div mix={[outlineWidth(3), outlineColor("brand"), outlineStyle("solid"), ...]}>
		solid
	</div>
	<div mix={[outlineWidth(3), outlineColor("brand"), outlineStyle("dashed"), ...]}>
		dashed
	</div>
	<div mix={[outlineWidth(3), outlineColor("brand"), outlineStyle("dotted"), ...]}>
		dotted
	</div>
	<div mix={[outlineWidth(4), outlineColor("brand"), outlineStyle("double"), ...]}>
		double
	</div>
</div>

Applying on a state

Wrap outlineStyle in a state, like focusVisible(), to draw the outline only then. Tab to the button to see it:

<button
	type="button"
	mix={[
		outlineWidth(2),
		outlineColor("brand"),
		focusVisible(outlineStyle("dashed")),
		...,
	]}
>
	Save changes
</button>

Applying on a state

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

u.hover(u.outlineStyle("dashed"))

Responsive design

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

u.at("md", u.outlineStyle("dashed"))

Signature

u.outlineStyle(value: OutlineStyleValue)