@impact-x/tokens v0.5.21

@impact-x/tokens

Design tokens for products using Impact X design system.

Installation

All available tokens in one package

To install @impact-x/tokens in your project, run the following command using npm:

npm install -S @impact-x/tokens

If you prefer Yarn, use the following command instead:

yarn add @impact-x/tokens

Tokens as individual packages

You can also install each token as individual packages:

yarn add @impact-x/color
yarn add @impact-x/typography
yarn add @impact-x/space

All design token packages follow the naming convention: @impact-x/{token-name}. Please refer to the corresponding documentation page for more information.

Usage

Sass

In Sass, you can import and use all the design tokens available:

@import '~@impact-x/tokens';

div {
  color: $ix-color-purple;
}

JavaScript

For JavaScript, you can import and use this module:

import { ixColorAmethyst } from '@impact-x/tokens';

...

const theme = {
  primaryColor: ${ixColorAmethyst};
}`;

API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Basics