# stroke

> Applies `stroke`, resolving a semantic tone to an SVG shape's outline color.

```ts
import { stroke } from "@sdxc/u/color";
```

Applies `stroke`, resolving a semantic tone to an SVG shape's outline
color. With no value it resolves the system default
`var(--ui-fg, CanvasText)`; a bare tone resolves that tone's `fg` weight.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.stroke()` | `css({ stroke: "var(--ui-fg, CanvasText)" })` |
| `u.stroke("neutral.tint")` | `css({ stroke: "var(--ui-neutral-bg-tint)" })` |
| `u.stroke("brand")` | `css({ stroke: "var(--ui-brand-fg)" })` |
| `u.stroke("none")` | `css({ stroke: "none" })` |

## Examples

### Basic example

Use `stroke` with a tone to color the outline of an SVG shape:

```tsx
<div mix={[...]}>
	<svg
		mix={[stroke("brand"), fill("none"), strokeWidth(1.5)]}
		viewBox="0 0 24 24"
		width={48}
		height={48}
		aria-hidden="true"
	>
		<path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.1 3.4 1.4-6.8L2.2 9.1l6.9-.8z" />
	</svg>
	<svg
		mix={[stroke("success"), fill("none"), strokeWidth(1.5)]}
		viewBox="0 0 24 24"
		width={48}
		height={48}
		aria-hidden="true"
	>
		<path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.1 3.4 1.4-6.8L2.2 9.1l6.9-.8z" />
	</svg>
	<svg
		mix={[stroke("danger"), fill("none"), strokeWidth(1.5)]}
		viewBox="0 0 24 24"
		width={48}
		height={48}
		aria-hidden="true"
	>
		<path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.1 3.4 1.4-6.8L2.2 9.1l6.9-.8z" />
	</svg>
</div>
```

### Following the text color

Pass `currentColor` so a line icon takes the text color of the element around it:

```tsx
<a href="#stroke" mix={[fg("brand"), inlineFlex(), gap(2), ...]}>
	Read the guide
	<svg
		mix={[stroke("currentColor"), fill("none"), strokeWidth(2)]}
		viewBox="0 0 24 24"
		width={20}
		height={20}
		aria-hidden="true"
	>
		<path d="M5 12h14M13 6l6 6-6 6" />
	</svg>
</a>
```

### Tints, palette shades and no stroke

Pass a weight, like `neutral.tint`, a palette shade, like `color.brand.300`, or `none` to drop the stroke:

```tsx
<svg width={240} height={72} viewBox="0 0 240 72" aria-hidden="true">
	<circle
		cx={36}
		cy={36}
		r={28}
		mix={[fill("brand"), stroke("neutral.tint"), strokeWidth(6)]}
	/>
	<circle
		cx={120}
		cy={36}
		r={28}
		mix={[fill("brand"), stroke("color.brand.300"), strokeWidth(6)]}
	/>
	<circle cx={204} cy={36} r={28} mix={[fill("brand"), stroke("none")]} />
</svg>
```

## Applying on a state

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

```ts
u.hover(u.stroke())
```

## Responsive design

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

```ts
u.at("md", u.stroke())
```

## Customizing your theme

### Customizing colors

Define a palette as `--ui-color-{name}-{50..950}` and map a tone onto it with the `--ui-{tone}-*` variables, the way `theme.css` maps the built-in ones:

```css
:root {
	--ui-color-info-50: oklch(0.97 0.02 230);
	--ui-color-info-200: oklch(0.88 0.06 230);
	--ui-color-info-500: oklch(0.62 0.16 230);
	--ui-color-info-600: oklch(0.52 0.18 230);
	--ui-color-info-900: oklch(0.3 0.1 230);

	--ui-info-bg-tint: var(--ui-color-info-50);
	--ui-info-bg-solid: var(--ui-color-info-600);
	--ui-info-fg: var(--ui-color-info-600);
	--ui-info-fg-muted: var(--ui-color-info-500);
	--ui-info-fg-emphasis: var(--ui-color-info-900);
	--ui-info-fg-on-solid: white;
	--ui-info-border: var(--ui-color-info-200);
	--ui-info-border-strong: var(--ui-color-info-600);
	--ui-info-ring: var(--ui-color-info-500);
}
```

```ts
declare module "@sdxc/u" {
	interface ColorPalettes {
		info: true;
	}
	interface SemanticTones {
		info: true;
	}
}
```

The new name is then accepted wherever the scale is:

```ts
stroke("info")
```

## Signature

```ts
u.stroke(value?: ColorValue | (string & {}))
```