@design-sync/cli

@design-sync/cli

Design Sync CLI

Usage

Initialize and install packages

# npm
npx @design-sync/cli init

follow the prompt to create a design-sync.config file or pass -y to skip the prompt and use the default values.

Sync:

add a sync script to your package.json file

{
  "scripts": {
    "sync": "design-sync sync"
  }
}

then run

<npm|pnpm|yarn|bun> run sync

Configuration

The configuration file is a design-sync.config.ts file in the root of your project.

• uri: (string) the uri of a git repository to download the design tokens from, eg gh:owner/repo/path/to/file/or/folder#branch supports github, gitlab, sourcehut and bitbucket see giget for more info.
• auth: (string) Custom Authorization token to use for downloading tokens. (Can be overridden with GIGET_AUTH environment variable).
• out: (string) the output directory for the generated files
• plugins: (array) plugins to use, see plugins for more info
• schemaExtensions (array)- schema extensions to use, see schema extensions for more info
• prettify: (boolean) format the generated files using prettier, default: false
• filter: (TokensWalkerFilter) filter tokens to process, default: all supported token types
• requiredModes: (array) required modes, default: []
• defaultMode: (string) default mode, default: default
• disableDefaultExtensions: (boolean) disable default schema extensions, default: false

Plugins

• css-plugin
• json-plugin
• vanilla-extract-plugin

Schema Extensions

• Modes -> allow you to override tokens per mode (dark, light, etc) and generate a theme for each mode, enabled by default.
• Color Modifiers -> allow you to modify colors using common color modifiers like lighten, darken, saturate, etc, enabled by default.
• Color Generators -> allow you to generate more colors dynamically using color modifiers, enabled by default.

Development

• Clone this repository
• Install latest LTS version of Node.js
• Enable Corepack using corepack enable
• Install dependencies using pnpm install
• Run interactive tests using pnpm dev

License

Made with 💛

Published under MIT License.