Stylelint plugin

Design tokens are supported by linting rules, which warn you if a token is deprecated, missing, or has no fallback style. Design token lint rules are provided by the Design System

ESLint and Stylelint plugins.

If you are an Atlassian employee, you must configure the lint rule in your repository and keep it up-to-date. If you are a partner developer, we strongly recommend you to use it as well.

Follow the Get started guide to get started with Design Tokens, and set up the ESLint plugin.

Ensures that the codebase uses the global token function for color and spacing values, rather than hard-coded values. This ruleset is great for codebases that are starting to adopt tokens and those that have already adopted tokens. This ruleset also prevents new contributors from accidentally adding hard-coded color or spacing values.

Use the token function and token values.

box-shadow: var(--ds-shadow-raised);

color: var(--ds-text-highEmphasis);

padding: var(--ds-space-100) var(--ds-space-200);

Don't use hard-coded CSS colors, hexadecimal spacing values, or any values that aren’t current tokens.

color: red;
       ^^^

box-shadow: 0px 1px 1px #161A1D32;
                        ^^^^^^^^^

padding: 8px 16px;
         ^^^^^^^^

color: var(--not-a-token-value);
       ^^^^^^^^^^^^^^^^^^^^^^^^