design-token/colors
Summary
Disallows raw color values and enforces the color tokens defined in your configuration.
Configuration
Enable the rule in designlint.config.*. See configuration for defining tokens.
json
{
"tokens": {
"$version": "1.0.0",
"color": {
"primary": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [1, 0, 0]
}
},
"secondary": { "$type": "color", "$ref": "#/color/primary" }
}
},
"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[].strictReference(boolean): whentrue, token-equivalent raw color literals are reported for the supported static color formats this rule parses (for example#...,rgb(...),hsl(...),hwb(...),lab(...),lch(...),color(...), named colors). Token references such asvar(--...)are still allowed. Defaults tofalse.
This rule is not auto-fixable.
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.
Enforcement modes
- Value-equivalence mode (default): raw literals are allowed when their value exactly matches a configured token value.
- Strict reference mode (
strictReference: true): reports token-equivalent raw literals for supported static formats instead of allowing them by value match.
Strict mode provides stronger design-system guarantees, but it can require broader migrations for existing styles that currently rely on token-equivalent literals.
Examples
Invalid
css
.button { color: #00ff00; }Valid
css
.button { color: #ff0000; }When Not To Use
If raw color values are allowed in your project, disable this rule.