@seatentacle/design-tokens

Design tokens are a set of visual design attributes needed to create custom themes

Usage no npm install needed!

<script type="module">
  import seatentacleDesignTokens from 'https://cdn.skypack.dev/@seatentacle/design-tokens';
</script>

README

SeaTentacle Design Tokens

GitHub license NPM Version semantic-release

Design tokens are a set of visual design attributes needed to create custom themes. It should be used instead literal values such as background colors, font size, etc.

Installation

Run the npm command to add the package to your project.

npm i --save @seatentacle/design-tokens

Usage

The first step is to add the package import to the file where you want to use design tokens.

To use standard tokens, just copy this line to the top of your file.

import { defaultTokens } from '@seatentacle/design-tokens'

You can call the token you need by simply typing defaultTokens and using dot-notation, continue typing the name of the desired token, for example: defaultTokens.backgroundButtonInfo.

Format

Tokens are wratten in JavaScript and primarily intended for use with css-in-js libraries such as styled-components. Also, for the convenience of using tokens in TypeScript, the package contains the declaration files .d.ts.

License

The code is licensed under MIT