This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@quartzds/design-token-generator

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

Supported platforms

Values to use with the --platform option:

Value	Description
all (default)	All supported platforms
css	Standard CSS files
ios	Swift classes with constants for iOS
android	XML resources files for Android

⚖️ License

See the LICENSE file for license rights and limitations.