Skip to content
Design Token Authority

CLI hand-off

“Take it to the CLI”: in the playground’s Outputs view, the dta.config.ts the playground generates for the choices made (its name opens a preview; Copy and Download next to it) and the steps that give the same files with the CLI, each command as a copyable command chip. For a plugin export the steps import it first (pull --from-file), as the playground did.

When to use

Section titled “When to use”
  • At the end of something tried in the browser that a project can repeat with the CLI.
  • Not for documentation of a command (that is the reference) or for a single command on its own (a Command button).

Token files: the config and one command

Light

Take it to the CLI

The same files on your machine: the generated config carries the choices above.

355 B
  1. Put dta.config.ts in your project folder. Put the token files in tokens/ next to it.
  2. Build:

The config imports defineConfig from design-token-authority: install it in your project first (npm install --save-dev design-token-authority).

Graphite

Take it to the CLI

The same files on your machine: the generated config carries the choices above.

355 B
  1. Put dta.config.ts in your project folder. Put the token files in tokens/ next to it.
  2. Build:

The config imports defineConfig from design-token-authority: install it in your project first (npm install --save-dev design-token-authority).

Story: /stories/cli-handoff/files/

A plugin export: import, then build; config preview open

Light

Take it to the CLI

355 B
  1. Put dta.config.ts in your project folder.
  2. Import the plugin export into tokens/, as the playground did:
  3. Build:
Graphite

Take it to the CLI

355 B
  1. Put dta.config.ts in your project folder.
  2. Import the plugin export into tokens/, as the playground did:
  3. Build:

Story: /stories/cli-handoff/export/

Guidelines

Section titled “Guidelines”
  • A section under a stroke-ink rule in border-strong, the title in the title type, an intro in fg-muted.
  • The config is one file row like an output file: the name in mono action-text, its size, Copy and Download (quiet Buttons). Its row is tinted action-subtle while its preview is open.
  • Numbered steps in body-sm; a command is the site’s command chip (CommandButton.css: terminal-bg, the $ in terminal-prompt, a copy icon that turns into a tick). Here the chip may wrap, so a long command never runs past a phone screen; a file in it breaks after a / or ., like the config’s name and the steps (Token path).
  • Commands read npx design-token-authority …, never npx dta (that npm name belongs to another package). A note under the steps says what the steps assume, such as the package installed in the project.
  • A Preact component; stories render it to static HTML.
  • Motion: a view-transition part (dta-swap), so it moves to its new place when the output files above it change. See Motion.

Tokens used

Section titled “Tokens used”

Read from the component’s source:

--action-bg--action-subtle--action-text--border-default--border-strong--fg-default--fg-muted--fg-subtle--font-mono--font-sans--layout-measure--space-1--space-2--space-3--space-4--space-6--stroke-focus--stroke-hairline--stroke-ink--type-body-sm-line-height--type-body-sm-size--type-code-line-height--type-meta-line-height--type-meta-size--type-title-line-height--type-title-size--type-title-weight