hardcoded-color

A color written out instead of a theme token.

Group

Text

Runs

Optional: run it with ur lint --rule hardcoded-color

Level

warning

Reads

Every file

Fix

None: which token a color stands for is the author's to say

Why

The line writes a color as a literal: a hex color, or a color function such as rgb(...), oklch(...), or color(srgb ...). A color written where it is used drifts from the theme and cannot be changed in one place. Define colors as tokens in the theme files and refer to the tokens. The rule reads style sheets, HTML, and component source as Straitjacket's color rule reads them, and runs where [lint.hardcoded-color] turns it on; its exclude globs name the theme files, where colors are defined.

The fix, as Ur suggests it: use a theme token or a CSS variable.

For agents

Write no color literals outside the theme files; refer to a theme token or a CSS variable.

.cart {
  padding: var(--space-4);
  background: var(--surface);
}

.cart-total {
  font-weight: 600;
  color: #1a7f37;
}

$ ur lint --rule hardcoded-color
warning[hardcoded-color]: color literal `#1a7f37`
  --> ./src/styles/cart.css:8:10 `#1a7f37`
  = hint: use a theme token or a CSS variable
0 clone classes and 1 text finding in 1 file