accent-color

Reference for the accent-color CSS property.

Abbreviation

N/A

Full Property

accentColor

Type

Variables

When using a property with a semantic value like accentColor-primary, Maple generates a variable fallback chain depending on the type of the property.

This page uses primary as the example token. In real utilities it can be any semantic name (secondary, success, border etc.) or a native CSS color name (red, blue, green etc.).

The chain is evaluated from left to right, using the first defined variable and falling through to the next variable or default.

Value Resolution

The property first resolves the semantic color token itself.

Color value

Resolves the semantic color token for this property.

--accentColor-primaryMost Specific

--color-primary

--primary

primaryDefault

Channel Controls

These chains tune the OKLCH channels after the color token resolves.

l-scale

Scales the resolved OKLCH lightness channel.

--accentColor-primary-l-scaleMost Specific

--primary-l-scale

--accentColor-l-scale

--l-scale

1Default

c-scale

Scales the resolved OKLCH chroma channel.

--accentColor-primary-c-scaleMost Specific

--primary-c-scale

--accentColor-c-scale

--c-scale

1Default

h-rotate

Rotates the resolved OKLCH hue channel.

--accentColor-primary-h-rotateMost Specific

--primary-h-rotate

--accentColor-h-rotate

--h-rotate

0Default