design-token/spacing
Summary
Enforces a spacing scale so that only configured token values or multiples of a base unit are allowed.
Configuration
Enable the rule in designlint.config.*. See configuration for defining tokens.
json
{
"tokens": {
"$version": "1.0.0",
"spacing": {
"sm": {
"$type": "dimension",
"$value": { "dimensionType": "length", "value": 4, "unit": "px" }
},
"md": { "$type": "dimension", "$ref": "#/spacing/sm" }
}
},
"rules": {
"design-token/spacing": ["error", { "base": 4, "units": ["rem", "vw"] }]
}
}Spacing tokens use the dimension type with dimensionType set to length.
Options
base(number): values must be multiples of this number. Defaults to4.units(string[]): CSS units to validate. Defaults to['px', 'rem', 'em'].
Numbers that appear inside CSS functions (e.g., calc(), var()) are ignored.
This rule is not auto-fixable.
Examples
Invalid
css
.box { margin: 5px; }Valid
css
.box { margin: 8px; }
.box { margin: var(--spacing-md); }
.box { margin: calc(100% - 5px); }
.box { margin: var(--space, 5px); }When Not To Use
If spacing values do not follow a scale, disable this rule.