design-token/border-radius
Summary
Enforces border-radius
values to match the tokens defined in your configuration.
Configuration
Enable the rule in designlint.config.*
. See configuration for defining tokens.
json
{
"tokens": {
"$version": "1.0.0",
"borderRadius": {
"sm": {
"$type": "dimension",
"$value": { "dimensionType": "length", "value": 2, "unit": "px" }
},
"lg": { "$type": "dimension", "$ref": "#/borderRadius/sm" }
}
},
"rules": { "design-token/border-radius": "error" }
}
Border radius tokens use the dimension
type with dimensionType
set to length
.
Options
No additional options.
This rule is not auto-fixable.
Examples
Invalid
css
.box { border-radius: 3px; }
Valid
css
.box { border-radius: 4px; }
.box { border-radius: var(--border-radius-lg); }
When Not To Use
If border radius values are not standardized, disable this rule.