Design Tokens Parser

This project is focused on parsing Design Tokens using Style Dictionary and Token Studio, to convert them to tailwind utilities.

How it Works

Once the Figma tokens are merged, this parser generates the tailwind design tokens in a plugin form, so all Cosigned projects can use it.

Getting Started

Install the package:

npm i @cosigned/design-tokens

or

yarn add @cosigned/design-tokens

Import the files:

import {
  lightTheme,
  darkTheme,
  cosignedTwPlugin,
} from "@cosigned/design-tokens";

• cosignedTwPlugin: is used as a tailwind plugin to have all the design tokens inside the tailwind config. Import it on the tailwind.config.ts file.

• lightTheme: is the light theme design tokens used to dynamically change the css variables, to have a light theme.

• darkTheme: is the dark theme design tokens used to dynamically change the css variables, to have a dark theme.