design-token/z-index

Summary

Enforces z-index values in CSS and zIndex numeric literals in TypeScript inline style objects to match the zIndex tokens loaded into the DSR kernel.

Configuration

Enable the rule in designlint.config.*:

{ "rules": { "design-token/z-index": "error" } }

Tokens are not configured inline. Seed the DSR kernel from a DTIF catalog that includes number-type tokens under a zIndex group:

{
  "$version": "1.0.0",
  "zIndex": {
    "dropdown": { "$type": "number", "$ref": "#/zIndex/modal" },
    "modal": { "$type": "number", "$value": 1000 }
  }
}

design-lint kernel start --config-path designlint.config.json

Options

No additional options.

This rule is not auto-fixable.

Examples

Invalid

/* 5 is not a token value */
.layer { z-index: 5; }

/* zIndex inline style checked against token values */
<div style={{ zIndex: 5 }} />

Valid

.layer { z-index: 1000; }

<div style={{ zIndex: 1000 }} />

When Not To Use

If z-index values are not standardized, disable this rule.

Related Rules

• design-token/opacity
• design-token/spacing

See also

• Configuration
• Rule index