[ @sdxc/u/color ]
stroke
Applies stroke, resolving a semantic tone to an SVG shape's outline color.
import { stroke } from "@sdxc/u/color";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:
<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:
<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:
<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.
u.hover(u.stroke())Responsive design
Wrap the call in a container query to scope it to one width.
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:
: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);
}declare module "@sdxc/u" {
interface ColorPalettes {
info: true;
}
interface SemanticTones {
info: true;
}
}The new name is then accepted wherever the scale is:
stroke("info")Signature
u.stroke(value?: ColorValue | (string & {}))