Skip to main content

Setup

Installing the design-token library.

npm install --save @adjust/design-tokens
note

Make sure you have access to Adjust's private npm packages. You can find more information here.

Usage​

The design tokens are available in SASS as mixins and variables or in JavaScript as a module.

JavaScript​

To import any design token as a JavaScript variable use:

import { ColorWhite } from '@adjust/design-tokens';

Design tokens in JavaScript are formatted in CamelCase. An overview of the naming of all tokens can be found here.

SASS​

Make sure your SASS build step supports node_module imports. PostCSS supports this for instance via its postcss-import package.

To import all design tokens in SASS use the following.

@use '~@adjust/design-tokens/scss/tokens' as *;

.button {
  padding: $spacing-10;
}

SASS variables are formatted as kebab-case. An overview of the naming of all tokens can be found here.