@quartzds/design-token-generator NPM

Quartz Design Token Generator

💡 Overview

This tool translates Quartz's design tokens JSON file into resources for developers. The tokens JSON file is edited using the Tokens Studio plugin, then transformed using the Style Dictionary library.

Prerequisites

A JSON file produced by the Tokens Studio plugin
node "^14.17.0 || >=16.0.0"
npm >=6

Token transformation rules

Translating design tokens into platform-specific assets requires rules. Quartz uses specific rules based on its own design tokens conventions. The goal of this library is to package all those transformation rules into a convenient API.

Customizing quartz styles

This tool allows you to customize Quartz with your brand and styles. This will be described on our website soon.

TODO: link to the documentation page.

💿 Installation

npm install @quartzds/design-token-generator

📖 Usage

qds-token-generator generate

By default, this command reads the design-tokens.json file in the current working directory and translates it into assets for all the supported platforms:

<cwd>
├── dist
│   ├── platform
│   |   ├── desktop.css
│   |   └── mobile.css
│   └── theme
│       ├── dark.css
│       └── light.css
└── build
    ├── android
    │   ├── platform
    │   |   ├── desktop.xml
    │   |   └── mobile.xml
    │   └── theme
    │       ├── dark.xml
    │       └── light.xml
    └── ios
        ├── platform
        |   ├── desktop.swift
        |   └── mobile.swift
        └── theme
            ├── dark.swift
            └── light.swift

Select the platforms to generate

To generate specific platforms, use the --platform option to provide the list of platforms, separated by semicolons:

qds-token-generator generate --platform 'css'

See the list of supported platforms for more info.

Configure output paths

Each platform also provides a option to specify where the files will be output:

qds-token-generator generate \
  --platform 'css' \
  --css-output 'resources/css'

The example above generates the following files:

<cwd>
└── resources
    └── css
        ├── platform
        |   ├── desktop.css
        |   └── mobile.css
        └── theme
            ├── dark.css
            └── light.css

💻 API reference

Name	Shortcut	Default Value	Description
`--input`	`-i`	`./design-tokens.json`	Relative location of the token file from Figma
`--platform`	`-p`	`all`	Semicolon-separated list of platforms to generate: `ios`, `android`, `css`, `all`
`--css-output`		`./dist`	Output directory relative location for CSS
`--android-output`		`./build/android`	Output directory relative location for Android
`--ios-output`		`./build/ios`	Output directory relative location for iOS
`--copyright`		`Copyright <year> Schneider Electric`	Copyright header to be placed in generated files
`--copyright-year`		current year	Specify the year in the default copyright header