@servicetitan/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.

Usage no npm install needed!

<script type="module">
  import servicetitanTokens from 'https://cdn.skypack.dev/@servicetitan/tokens';
</script>

README

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}} />