Skip to content
Sarj Standards

TypeScript · style

prefer-semantic-colors

eslint:prefer-semantic-colors

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

Default
error
Fix
none
Languages
typescript

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.

Before / after

Executed by this rule’s unit tests.

Before

Do not use a raw palette color

src/notice.tsx · focus
const notice = <div className="text-red-500" />;

After

Use a semantic color token

src/notice.tsx · focus
const notice = <div className="text-destructive" />;

Limits

  • Email, PDF, icon artwork, masks, gradients, stories, and explicitly configured non-token projects have targeted exclusions.

Message IDs

arbitraryColorinlineColorrawPalette

Options

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