UI Styling Standard

The eslint plugin to enforce and educate on Atlassian's UI Styling Standard

no-atlaskit-theme

Disallow imports from @atlaskit/theme and its subpaths, including default, named, namespace, side-effect, and type imports.

@atlaskit/theme is a legacy styling package. Use design tokens from @atlaskit/tokens and Atlassian Design System components instead.

Examples

Incorrect

import { colors } from '@atlaskit/theme';
import { gridSize } from '@atlaskit/theme/constants';
import Theme from '@atlaskit/theme/theme';
import type { ThemeProp } from '@atlaskit/theme/create-theme';

Correct

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

const styles = css({
    color: token('color.text'),
    paddingTop: token('space.100'),
    paddingRight: token('space.100'),
    paddingBottom: token('space.100'),
    paddingLeft: token('space.100'),
});

Was this page helpful?

We use this feedback to improve our documentation.