Skip to content
Sarj Sarj Sarj Standards

prefer-semantic-colors

Enforce semantic color tokens over raw Tailwind palette classes, arbitrary color values, and inline color literals.

arbitraryColorinlineColoropaqueForegroundPairrawPalette Rule source Tests Catalog JSON

Why

Semantic tokens keep themes and product meaning consistent while raw colors couple components to a palette value.

Fix

Replace raw palette and literal colors with the closest semantic design-system token or CSS variable.

Examples

Before — flagged Do not use a raw palette color
src/notice.tsx
const notice = <div className="text-red-500" />;
After — preferred Use a semantic color token
src/notice.tsx
const notice = <div className="text-destructive" />;

Options

{
  "additionalProperties": false,
  "properties": {
    "opaqueForegroundPairs": { "type": "boolean" },
    "requireSemanticTokens": { "type": "boolean" }
  },
  "type": "object"
}