FitX Design Tokens

FitX Design Tokens is a design token bundling project that provides bundled CSS, JS, and JSON files to deliver consistent design token data in various formats. It uses Style Dictionary to process and convert design tokens created according to the W3C Design Token Community Group (DTCG) standard.

Table of Contents

• Project Overview
• Directory Structure
• Installation
• Design Tokens
• Build Process

Füge diesen Abschnitt einfach an der gewünschten Stelle in deine README ein.

Usage

Use Tokens in Code:

npm install @fitx/design-tokens

Use Tokens ins Figma: Install Figma Plugin like Variables Import by microsoft and import tokens.json.

Project Overview

This project reads design tokens from the tokens/ directory, which follow the dtcg standard, and generates bundled files in the build/ directory in various formats (CSS, JS, JSON). It uses Style Dictionary to define and transform the design tokens into the desired output formats.

Directory Structure

├── build/                 # Generated output files after build
├──── styles/              # Contains splitted and merged CSS Files
├────── tokens.css         # Merged Tokens
├────── [token-group].css  # splitted CSS Files e.g color.css
├── tokens/                # Source design token files (dtcg standard)
├── sd.config.js           # Style Dictionary configuration file

Installation

Before build, install the dependencies via npm:

npm install

Design Tokens

The design tokens are located in the tokens/ directory and follow the W3C Design Token Community Group (DTCG) standard. These token files are read by the build process and transformed into CSS, JS, and JSON output formats.

Build Process

The build process is executed using Style Dictionary. To generate the bundled design tokens, use the following command:

npm run build-tokens

The bundled files will be stored in the build/ directory.