@impact-x/tokens
v0.5.21
Published
Design tokens for products using _Impact X_ design system.
Downloads
79
Readme
@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