@servicetitan/tokens

Anvil Tokens

The design tokens project is available to use in developing custom components and UI that is also used in @servicetitan/design-system. It contains variables in SCSS, Less, and JS variables that can be imported into any type of project.

Installation

npm install @servicetitan/tokens --save

Within the packages dist/ directory there are a few files that can be used.

File	Description
tokens.common.js	JS object of variables as module.exports
tokens.less	Less variables
tokens.scss	SCSS variables

Using Less Tokens

@import (reference) '~@servicetitan/tokens/dist/tokens.less';

div {
    color: @color-blue;
}

Using SCSS Tokens

@import 'node_modules/@servicetitan/tokens/dist/tokens';

div {
    color: $color-blue;
}

Using JS Tokens

import tokens from '@servicetitan/tokens';

const Component = () => <div style={{backgroundColor: tokens.colorBlue}} />