no-raw-colors

Examples

Colours come from the theme. Raw palette colours (bg-pink-500) and colour tokens ui.css does not declare are reported. The message names the nearest declared tokens (by perceptual distance, from the light-mode values) or the spelling you meant, and the file to extend. transparent, current and inherit are accepted. Unlike shadcn/lint, white and black are reported: a Brok theme drives dark mode through tokens, so a fixed white bypasses it exactly as a palette shade does (allow *-white if a design needs it). Arbitrary colours such as bg-[#333] belong to no-arbitrary-values. Literal colours in fill, stroke and inline style colour properties are reported by the same rule.

{{-- Allowed: declared theme colours, keywords, variables. --}}
<div class="bg-primary text-muted-foreground hover:bg-primary/90 fill-current bg-(--brand)">Account</div>

{{-- Reported: raw palette, and a token the theme does not declare. --}}
<div class="bg-pink-500">Account</div>
<div class="text-primry">Account</div>

"bg-pink-500" uses the raw Tailwind palette. Nearest theme tokens: bg-chart-5. Use one of those,
or declare --color-<name> in resources/css/ui.css for a new color.
"text-primry" is not a declared theme color. Did you mean "text-primary"? Declared colors: accent, background, ...

Allow an exception

Use full class patterns, not colour names. Outside the badge, amber passes except bg-amber-500; on the badge only amber-500 is exempt and deny: [] clears the inherited denial. An exception here does not open the class through no-restyle.

"no-raw-colors": ["error", {
  "allow": ["*-amber-*"],
  "deny": ["bg-amber-500"],
  "contracts": [{ "pattern": "^badge$", "allow": ["*-amber-500"], "deny": [] }]
}]

Limits

• Undeclared tokens are judged against your installed ui.css and its imports. Without one, palette colours are still reported but undeclared tokens cannot be checked.
• Nearest-token suggestions resolve the light palette and, when ui.css has a .dark block, the dark one too: a token that is near in both modes ranks first, and a dark: class is compared against the dark palette. A suggestion is a starting point, not a guarantee that it matches the design.
• Variable references such as bg-(--brand) pass; the rule does not check that the variable is declared.

Configure

In the lint.rules block of ui.json. It accepts allow, deny, contracts, message, include, exclude; see the policy for what the entries match.

"no-raw-colors": ["warning", { "allow": [...], "deny": [...], "contracts": [], "message": "...", "include": ["resources/views/components/ui"], "exclude": ["resources/views/legacy/**"] }]

php artisan ui:check --explain no-raw-colors

Suppress one line

{{-- ui-lint-disable-next-line no-raw-colors: reason --}}