ESLint plugin

The essential plugin for use with the Atlassian Design System.

use-tokens-shape

Examples

Use shape tokens for border radius and border width. This rule offers an autofix only when a value maps directly to a token; choose the intended shape manually for other values.

Incorrect

const styles = css({
    borderRadius: '3px',
    borderWidth: '2px',
});

Correct

import { css } from '@atlaskit/css';
import { token } from '@atlaskit/tokens';

const styles = css({
    borderRadius: token('radius.small'),
    borderWidth: token('border.width'),
});

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

Was this page helpful?

We use this feedback to improve our documentation.