CORE UTILITY FAMILY

SVG

Set SVG fill and stroke colors from theme tokens, currentColor, or arbitrary values.

completeTarget v0.24 verified examplesRegistry JSON ↗

WHEN TO USE IT

Choose the right tool for the layout.

Use currentColor when an icon should inherit surrounding text color and theme colors when fill or stroke needs independent semantic meaning.

QUICK REFERENCE

Classes and generated CSS

These examples are resolved by the compiler when the registry manifest is generated. A broken example fails the test suite.

ClassGenerated declarations and keyframes

co-fill-currentfill: currentColor;

co-stroke-blackstroke: var(--co-color-black);

co-stroke-2stroke-width: 2;

co-stroke-[1.5]stroke-width: 1.5;

VISUAL EXAMPLE · CURRENT COLOR

Let icons inherit surrounding text color

CurrentColor keeps an icon synchronized with its parent. Change the text color once and both SVG fill and label update together.

PRIMARY

MUTED

INVERSE

component.coord

<button class="co-text-black">
  <svg class="co-fill-current" viewBox="0 0 24 24">...</svg>
  Favorite
</button>

VISUAL EXAMPLE · FILL

Color closed SVG shapes

Fill paints the interior of paths and shapes. Use a theme color for a semantic role or an arbitrary color for a deliberate one-off value.

co-fill-black

co-fill-neutral-500

co-fill-[#d4d4d4]

component.coord

<svg class="co-fill-black">...</svg>
<svg class="co-fill-neutral-500">...</svg>
<svg class="co-fill-[#d4d4d4]">...</svg>

VISUAL EXAMPLE · STROKE COLOR

Color open paths and icon outlines

Stroke controls the outline independently from fill. Outline icons usually use fill=none in markup and a Coordiation utility for their stroke color.

co-stroke-black

co-stroke-current

co-stroke-[#aaa]

component.coord

<svg fill="none" class="co-stroke-black">...</svg>
<svg fill="none" class="co-stroke-current co-text-neutral-500">...</svg>
<svg fill="none" class="co-stroke-[#999]">...</svg>

VISUAL EXAMPLE · STROKE WIDTH

Tune visual weight without editing the SVG

Named widths cover common icon weights. Arbitrary numeric values give precise control while preserving the same path data.

co-stroke-1

co-stroke-[1.5]

co-stroke-2

component.coord

<svg class="co-stroke-black co-stroke-1">...</svg>
<svg class="co-stroke-black co-stroke-2">...</svg>
<svg class="co-stroke-black co-stroke-[1.5]">...</svg>

VISUAL EXAMPLE · ARBITRARY SVG PROPERTIES

Control dash patterns, line caps, and joins

These presentation attributes sit outside the dedicated SVG family. Use arbitrary property utilities when they need to participate in variants or remain visible to the scanner.

dasharray:5 4

linecap:round

linejoin:bevel

component.coord

<svg class="co-stroke-black co-stroke-2 co-[stroke-dasharray:5_4]">...</svg>
<svg class="co-stroke-black co-stroke-2 co-[stroke-linecap:round]">...</svg>
<svg class="co-stroke-black co-stroke-2 co-[stroke-linejoin:bevel]">...</svg>

INTERACTIVE EXAMPLE · STATE VARIANTS

Change SVG color with its component state

Hover or focus the button. Because the icon uses currentColor, the parent state controls the entire component without repeating separate icon colors.

component.coord

<button class="co-text-black hover:co-bg-black hover:co-text-white co-transition-colors">
  <svg class="co-fill-current">...</svg>
  Save item
</button>

BASIC USAGE

Apply a utility directly.

Keep the complete class string in your template so the plain-text scanner can discover it without evaluating application code.

component.coord

<div class="co-fill-current co-stroke-black co-stroke-2 co-stroke-[1.5]">
  Your content
</div>

HOW IT WORKS

Core concepts

01
Fill and stroke use the shared color resolver.
02
Stroke width accepts 0, 1, 2, numeric arbitrary values, and CSS lengths.
03
State and responsive variants compose with SVG utilities.

CSS PROPERTIES

What this family controls

fillstrokestroke-width

VARIANTS

Responsive and state conditions

Prefix any supported utility with responsive or state variants. Variants compose from left to right and the compiler emits the required selector or at-rule.

component.coord

<div class="co-fill-current md:co-stroke-black hover:co-fill-current">
  Responsive and state-aware content
</div>

ARBITRARY VALUES

Escape the scale when necessary

Use square brackets for a one-off CSS value. Prefer theme tokens for values repeated across components so an AI agent and human reviewer can recognize design intent.

Arbitrary syntax

co-fill-*
co-[content-visibility:auto]

SCOPE BOUNDARIES

Intentional boundaries

This family is implemented, documented, and tested. These notes define where a neighboring family or browser behavior takes over.

Use arbitrary properties for SVG presentation attributes outside fill, stroke color, and stroke width.
SVG presentation attributes may compete with generated CSS specificity.

Previous← Transitions and animations NextAccessibility →