design-token/duration

Enforces transition and animation duration values to match the duration tokens defined in your configuration.

Configuration

{
  "tokens": {
    "durations": { "short": "100ms", "long": 250 }
  },
  "rules": { "design-token/duration": "error" }
}

Duration tokens may be numbers (milliseconds) or strings with ms or s units. String values are normalized for comparison.

Examples

Invalid

.box { transition: all 300ms ease; }
.box { animation: fade 0.5s linear; }

Valid

.box { transition: all 100ms ease; }
.box { animation-duration: 250ms; }