use-design-tokens

This rule checks that CSS declarations use design token variables instead of hardcoded values. This ensures consistent design system usage across the application and makes it easier to maintain design system consistency.

The rule supports multiple CSS properties, each of which can be enabled or disabled independently. See the documentation below for details about each supported property.

Configuration

The rule accepts the following configuration options:

  • true - Enables checking for all supported CSS properties

  • null - Disables the rule entirely

  • An object with CSS property names as keys, which disables specific properties:

    • All properties are enabled by default when using object configuration

    • Set a property to null to disable checking for that property

Examples:

// Enable all property checks
"stylelint-plugin-mozilla/use-design-tokens": true

// Disable the rule entirely
"stylelint-plugin-mozilla/use-design-tokens": null

// Disable specific properties (common in rollouts)
// All other properties remain enabled by default
"stylelint-plugin-mozilla/use-design-tokens": {
  "box-shadow": null
}

Supported Properties

The following CSS properties are supported by this rule. Click on a property name to see examples of correct and incorrect usage: