[ @sdxc/u/color ]

fill

Applies the SVG fill paint property, resolving semantic tones the same way color does.

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

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

Quick reference

Every documented call, beside the CSS it emits.

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

Examples

Basic example

Use fill with a tone to set the paint inside an SVG shape:

<div mix={[...]}>
	<svg mix={[fill("brand")]} 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={[fill("warning")]} 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={[fill("danger")]} 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>

Fills under a stroke, and no fill

Fill a shape under its outline, here with the palette shade color.brand.200, or pass none to leave only the outline:

<div mix={[...]}>
	<svg
		mix={[fill("color.brand.200"), stroke("brand"), strokeWidth(1.5)]}
		viewBox="0 0 24 24"
		width={48}
		height={48}
		aria-hidden="true"
	>
		<path d="M12 20.5S3 15 3 8.9A4.6 4.6 0 0 1 12 6.6a4.6 4.6 0 0 1 9 2.3C21 15 12 20.5 12 20.5z" />
	</svg>
	<svg
		mix={[fill("none"), stroke("brand"), strokeWidth(1.5)]}
		viewBox="0 0 24 24"
		width={48}
		height={48}
		aria-hidden="true"
	>
		<path d="M12 20.5S3 15 3 8.9A4.6 4.6 0 0 1 12 6.6a4.6 4.6 0 0 1 9 2.3C21 15 12 20.5 12 20.5z" />
	</svg>
</div>

Following the text color

Pass currentColor so an icon takes the text color of its parent, here two buttons of different tones:

<div mix={[...]}>
	<button
		type="button"
		mix={[
			bg("brand.solid"),
			fg("brand.onSolid"),
			hstack({ gap: 2, align: "center" }),
			...,
		]}
	>
		<svg
			mix={[fill("currentColor")]}
			viewBox="0 0 24 24"
			width={16}
			height={16}
			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>
		Star
	</button>
	<button
		type="button"
		mix={[
			bg("danger.tint"),
			fg("danger.emphasis"),
			hstack({ gap: 2, align: "center" }),
			...,
		]}
	>
		<svg
			mix={[fill("currentColor")]}
			viewBox="0 0 24 24"
			width={16}
			height={16}
			aria-hidden="true"
		>
			<path d="M12 20.5S3 15 3 8.9A4.6 4.6 0 0 1 12 6.6a4.6 4.6 0 0 1 9 2.3C21 15 12 20.5 12 20.5z" />
		</svg>
		Like
	</button>
</div>

Palette shades

Use a palette shade, like color.brand.300, for fills no tone names, such as the series of a chart:

<svg width={160} height={80} viewBox="0 0 160 80" aria-hidden="true">
	<rect x={0} y={50} width={32} height={30} mix={[fill("color.brand.200")]} />
	<rect x={42} y={30} width={32} height={50} mix={[fill("color.brand.400")]} />
	<rect x={84} y={15} width={32} height={65} mix={[fill("color.brand.600")]} />
	<rect x={126} y={0} width={32} height={80} mix={[fill("color.brand.800")]} />
</svg>

Applying on a state

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

u.hover(u.fill())

Responsive design

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

u.at("md", u.fill())

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:

fill("info")

Signature

u.fill(value?: ColorValue | (string & {}))