Color Variables

Define every CSS color as a semantic custom property in the owning bundle’s single variables.css file and reference that property wherever the color is used. This includes text, backgrounds, borders, outlines, shadows, gradients, SVG colors, interaction states, and scrollbars. Literal color values may appear only in custom-property definitions in variables.css so site and panel themes can replace colors without changing component rules.

Correct

:root {
    --surfaceColor: #fff;
}

.item {
    background-color: var(--surfaceColor);
}

Incorrect

.card { background-color: #fff; color: rgb(20 20 20); }

Fix

Move the literal color into a semantic CSS custom property in the owning variables.css file and replace its usage with var(--propertyName).