TotallyMoney Design Tokens

This repository houses all our design tokens.

Usage

Package Installation

yarn add @totallymoney/design-tokens

Or using npm:

npm install @totallymoney/design-tokens --save

URL

We can use unpkg to access the design tokens package using its url:

https://unpkg.com/browse/@totallymoney/design-tokens

Then you can access the path to the tokens and drop it in your solution or video making software:

<link rel="stylesheet" href="https://unpkg.com/browse/@totallymoney/design-tokens/dist/web/tokens.css" />

How this works

All our design tokens are generated automatically from Figma and processed using style-dictionary:

1. A design token in the Figma library is updated
2. The update triggers a PR in this repo
3. The PR is merged
4. The workflow triggers style-dictionary to process the design tokens into formats specifically for native and web
5. The npm package is published with the design tokens