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[].
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.
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.