use-design-tokens.rst (1492B)
1 ================= 2 use-design-tokens 3 ================= 4 5 This rule checks that CSS declarations use design token variables instead of 6 hardcoded values. This ensures consistent design system usage across the 7 application and makes it easier to maintain design system consistency. 8 9 The rule supports multiple CSS properties, each of which can be enabled or 10 disabled independently. See the documentation below for details about each 11 supported property. 12 13 Configuration 14 ------------- 15 16 The rule accepts the following configuration options: 17 18 - ``true`` - Enables checking for all supported CSS properties 19 - ``null`` - Disables the rule entirely 20 - An object with CSS property names as keys, which disables specific properties: 21 22 - All properties are enabled by default when using object configuration 23 - Set a property to ``null`` to disable checking for that property 24 25 Examples: 26 27 .. code-block:: javascript 28 29 // Enable all property checks 30 "stylelint-plugin-mozilla/use-design-tokens": true 31 32 // Disable the rule entirely 33 "stylelint-plugin-mozilla/use-design-tokens": null 34 35 // Disable specific properties (common in rollouts) 36 // All other properties remain enabled by default 37 "stylelint-plugin-mozilla/use-design-tokens": { 38 "box-shadow": null 39 } 40 41 Supported Properties 42 -------------------- 43 44 The following CSS properties are supported by this rule. Click on a property 45 name to see examples of correct and incorrect usage: 46 47 .. toctree:: 48 :maxdepth: 1 49 :glob: 50 51 use-design-tokens/*