design-token/font-weight
Summary
Enforces font-weight values in CSS and numeric literals in TypeScript inline style objects to match the font weight tokens loaded into the DSR kernel.
Configuration
Enable the rule in designlint.config.*:
{ "rules": { "design-token/font-weight": "error" } }Tokens are not configured inline. Seed the DSR kernel from a DTIF catalog that includes fontWeight-type tokens under a fontWeights group:
{
"$version": "1.0.0",
"fontWeights": {
"bold": { "$type": "fontWeight", "$value": 700 },
"emphasis": { "$type": "fontWeight", "$ref": "#/fontWeights/bold" },
"regular": { "$type": "fontWeight", "$value": 400 }
}
}design-lint kernel start --config-path designlint.config.jsonFont-weight tokens may be numbers (e.g. 400) or keyword strings (e.g. "bold"). Numeric tokens are checked against CSS numeric values and TypeScript numeric literals. String tokens are checked against CSS keyword values.
Options
No additional options.
This rule is not auto-fixable.
Examples
Given tokens regular = 400 and bold = 700 (numeric):
Invalid
/* 500 does not match any token */
.text { font-weight: 500; }
/* "bold" keyword is not in the token set (only numeric 400 and 700 are) */
.text { font-weight: bold; }Valid
.text { font-weight: 400; }
.text { font-weight: 700; }/* TypeScript inline style — numeric literal */
<p style={{ fontWeight: 400 }} />If you want to allow the bold keyword, add a string-valued token:
{ "boldKeyword": { "$type": "fontWeight", "$value": "bold" } }When Not To Use
If arbitrary font weights are allowed, disable this rule.