design-token/composite-equivalence
Summary
Reports raw CSS composite values (borders, shadows, typography, transitions) that exactly match an existing composite token in the DSR kernel. Authors should reference the token instead of repeating its value literally.
Configuration
Enable the rule in designlint.config.*:
{ "rules": { "design-token/composite-equivalence": "error" } }Tokens are not configured inline. Seed the DSR kernel from a DTIF catalog that includes composite-type tokens (boxShadow, border, typography, transition):
{
"$version": "1.0.0",
"borders": {
"focus": {
"$type": "border",
"$value": {
"borderType": "css.border",
"color": { "colorSpace": "srgb", "components": [0, 0, 0] },
"style": "solid",
"width": { "dimensionType": "length", "value": 2, "unit": "px" }
}
}
}
}design-lint kernel start --config-path designlint.config.jsonOptions
No additional options.
This rule is auto-fixable. Matched raw values are replaced with var(--derived-name) where the CSS variable name is derived from the token pointer (e.g. #/borders/focus → var(--borders-focus)).
NOTE
The rule compares the normalized CSS declaration value against the token value's string representation. For DTIF typed composite tokens (border, shadow, etc.) whose $value is an object, the comparison uses the JSON serialization of that object — so a hand-written CSS shorthand like border: 2px solid #000 will not match the token. The rule is most effective when composite tokens are string-valued (e.g. custom DTIF extensions) or when the CSS value exactly matches the serialized token object.
Examples
Invalid
/* raw composite value that could reference a token instead */
.card { border: 2px solid #000; }Valid
/* uses a token reference derived from pointer #/borders/focus */
.card { border: var(--borders-focus); }When Not To Use
If your project does not use composite tokens, disable this rule.