Utilities

SVG

Generated from the registry, so this page can't drift from the compiler.

fill

Sets the fill color of an SVG shape.

Syntax

syntax

fill(value)
fill[raw-css]

Accepted values

Argument	Type	Values
`value`	keyword	none
	colors token	brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue
	keyword	transparent current inherit
	var(--name)	See type
	alpha(color,0–100)	See type

Examples and generated CSS

expressions

fill(brand)
fill(none)
hover:fill(light)
fill[#ff00aa]

Generated CSS

.fill\(brand\) {
  fill: var(--croff-color-brand);
}

.fill\(none\) {
  fill: none;
}

.fill\[\#ff00aa\] {
  fill: #ff00aa;
}

.hover\:fill\(light\):hover {
  fill: var(--croff-color-light);
}

Theme behavior

Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:fill(brand)
hover:fill(brand)
lg:focus:fill(brand)

stroke

Sets the outline color of an SVG shape.

Syntax

syntax

stroke(value)
stroke[raw-css]

Accepted values

Argument	Type	Values
`value`	keyword	none
	colors token	brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue
	keyword	transparent current inherit
	var(--name)	See type
	alpha(color,0–100)	See type

Examples and generated CSS

expressions

stroke(brand)
stroke(none)
hover:stroke(light)
stroke[#ff00aa]

Generated CSS

.stroke\(brand\) {
  stroke: var(--croff-color-brand);
}

.stroke\(none\) {
  stroke: none;
}

.stroke\[\#ff00aa\] {
  stroke: #ff00aa;
}

.hover\:stroke\(light\):hover {
  stroke: var(--croff-color-light);
}

Theme behavior

Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use.

Responsive and state usage

expressions

md:stroke(brand)
hover:stroke(brand)
lg:focus:stroke(brand)

stroke-width

Sets the outline width of an SVG shape.

Syntax

syntax

stroke-width(value)
stroke-width[raw-css]

Accepted values

Argument	Type	Values
`value`	integer 0–64	See type

Examples and generated CSS

expressions

stroke-width(2)
stroke-width[1.5]

Generated CSS

.stroke-width\(2\) {
  stroke-width: 2;
}

.stroke-width\[1\.5\] {
  stroke-width: 1.5;
}

Theme behavior

This utility uses fixed keywords and numbers, and reads nothing from the theme.

Responsive and state usage

expressions

md:stroke-width(2)
hover:stroke-width(2)
lg:focus:stroke-width(2)