Craft Design Tokens

The Craft Design Tokens package (@getprovi/craft-tokens) provides a comprehensive set of design tokens that serve as the foundational elements for consistent and cohesive design across our products. Design tokens encapsulate visual design attributes such as colors, typography, spacing, and more, allowing for easy maintenance, scalability, and customization of design properties.

See more about design tokens in the Craft Design Tokens documentation.

Installation

To install the Craft Design Tokens package, run the following command or substitute your package manager of choice (e.g., npm i -D, pnpm i -D):

yarn add -D @getprovi/craft-tokens

Build Tokens

To build the design tokens, run the following command in the packages/tokens directory:

pnpm build

This command will generate the design tokens in the dist directory in the following formats:

• dist/output/index.js: A tokens object containing all design tokens and a token function to access them.
• dist/output/variables.js: A convertedVariables object containing the design tokens in a format that can be used directly inside the Tailwind config.

Usage

To use the design tokens import them into your project. For example, to use the color tokens:

import { tokens } from '@getprovi/craft-tokens';
import { convertedVariables } from '@getprovi/craft-tokens/variables.js';

console.log(tokens, convertedVariables);