@design-sync/cli NPM

@design-sync/cli

Design Sync CLI

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

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

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.