design-token/z-index
Summary
Enforces z-index values to match the zIndex tokens defined in your configuration.
Configuration
Enable the rule in designlint.config.*. See configuration for defining tokens.
json
{
"tokens": {
"$version": "1.0.0",
"zIndex": {
"modal": { "$type": "number", "$value": 1000 },
"dropdown": { "$type": "number", "$ref": "#/zIndex/modal" }
}
},
"rules": { "design-token/z-index": "error" }
}Options
No additional options.
This rule is not auto-fixable.
Examples
Invalid
css
.layer { z-index: 5; }ts
const layer = 5;Valid
css
.layer { z-index: 1000; }ts
const layer = 1000;When Not To Use
If z-index values are not standardized, disable this rule.