no-restricted-theme-tokens

This rule reports a utility that uses a theme token that your project reserves, such as the default palette color behind bg-blue-500. Use it to make components use role names such as bg-action. The rule is off until you list tokens.

Configuration

{
  "lint": {
    "rules": {
      "no-restricted-theme-tokens": {
        "severity": "warn",
        "tokens": ["--color-blue-*"]
      }
    }
  }
}

Reported

style("bg-blue-500");no-restricted-theme-tokens: direct use of theme token `--color-blue-500` is forbidden

Fixed

style("bg-action");

How to fix

Use the role token that stands for the color, as in the example. The role token can still refer to the palette in its definition:

@theme {
  --color-action: var(--color-blue-500);
}

Options

tokens lists patterns for the reserved custom properties, such as --color-blue-*. Patterns accept * and ?, and they are case-sensitive. The list must not be empty when the rule is on.

Rule settings