design-token/colors

Disallows raw color values and enforces the color tokens defined in your configuration.

Configuration

Enable the rule in designlint.config.*:

{
  "tokens": { "colors": { "primary": "#ff0000" } },
  "rules": {
    "design-token/colors": ["error", { "allow": ["named"] }]
  }
}

Options

• allow ("hex" | "rgb" | "rgba" | "hsl" | "hsla" | "hwb" | "lab" | "lch" | "color" | "named"[]): formats that may appear as raw values. Defaults to [].

Supported formats

The rule detects and blocks the following color formats unless they are defined as tokens or explicitly allowed:

• Hexadecimal values (e.g., #ff0000)
• Functional notations: rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), color()
• Named colors (e.g., red, rebeccapurple)

Token values and matched color strings are normalized to lowercase before comparison, making hex colors case-insensitive.

Examples

Invalid

.button { color: #00ff00; }

Valid

.button { color: #ff0000; }