Token Studio and Style Dictionary Integration Example

This repository provides an example of how to integrate Token Studio with Style Dictionary to allow for custom token output.

Overview

Token Studio is a design tool that allows you to create and manage design tokens. Style Dictionary is a build tool that allows you to transform design tokens into various formats, such as CSS, SCSS, LESS, JSON, and more.

This repository provides an example of how to use Token Studio and Style Dictionary together to create a custom token output. The example includes a sample design token file in Token Studio format, a Style Dictionary configuration file, and a script that runs Style Dictionary to generate the custom token output.

Getting Started

To get started with this example, follow these steps:

1. Clone this repository to your local machine: git clone https://github.com/example/token-studio-style-dictionary.git

2. Install the required dependencies: pnpm install

3. Sync tokens with tokens studio https://docs.tokens.studio/sync/github

4. Run build script to generate the custom token output: pnpm run build