design-token/opacity

Summary

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

Configuration

Enable the rule in designlint.config.*:

{ "rules": { "design-token/opacity": "error" } }

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

{
  "$version": "1.0.0",
  "opacity": {
    "high": { "$type": "number", "$ref": "#/opacity/low" },
    "low": { "$type": "number", "$value": 0.2 }
  }
}

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

Options

No additional options.

This rule is not auto-fixable.

Examples

Invalid

.box { opacity: 0.5; }

Valid

.box { opacity: 0.2; }

When Not To Use

If opacity values are not standardized, disable this rule.

Related Rules

• design-token/colors
• design-token/duration

See also

• Configuration
• Rule index