ESLint plugin

The essential plugin for use with the Atlassian Design System.

use-tokens-shape

Examples

This rule marks code as violations when a shape token should be used. It will auto-fix values that can be mapped 1:1 with an ADS shape token. Values that can't be mapped to a token will still be reported, however no auto-fix will happen.

Incorrect

const someStyles = css({
  borderRadius: '3px';
                    ^^^^^
  borderWidth: '2px';
                 ^^^^^
})

Correct

import { token } from '@atlaskit/tokens'

const someStyles = css({
  borderRadius: token('radius.small');
  borderRadius: token('border.width.outline');
})

See the list of available shape tokens on the ADS website, (opens new window).

Was this page helpful?

We use this feedback to improve our documentation.