Terminal

A read-only block of CLI output on terminal-bg, showing what DTA actually prints.

Output of dta diff

Light

TERMINALSAME INPUT · SAME OUTPUT

$ npx dta diff --base tokens-base --tokens-only

changed Colors.Foundation.Blue.500 #0047a0 → #0057b8

affected Colors.Brand.Primary because of Colors.Foundation.Blue.500

3 changed · 1 added · 1 removed · 2 affected

Graphite

TERMINALSAME INPUT · SAME OUTPUT

$ npx dta diff --base tokens-base --tokens-only

changed Colors.Foundation.Blue.500 #0047a0 → #0057b8

affected Colors.Brand.Primary because of Colors.Foundation.Blue.500

3 changed · 1 added · 1 removed · 2 affected

Story: /stories/terminal/diff/

Guidelines

• Header strip in mono meta: “TERMINAL” and “SAME INPUT · SAME OUTPUT”.
• Prompt and changes in terminal-prompt, passes and found values in terminal-success, secondary lines in terminal-muted, everything else terminal-fg; all at 7:1 on terminal-bg.
• terminal-success stays the terminal’s own token, not a status colour: the terminal is dark in both themes, so Light’s status-success-text (dark green) would not read on it. It is sage-300 in both themes, the same green as Graphite’s success text. A pass line is a word (“passed”, “found”) as in the CLI, never colour alone.
• Output is copied from a real run and stays stable; never invent statistics. The example is abridged output of dta diff on the brand-ab fixture.
• The cursor blinks; it stops under reduced motion.

Tokens used

Read from the component’s source:

--font-mono--radius-lg--space-3--space-4--stroke-hairline--terminal-bg--terminal-fg--terminal-muted--terminal-prompt--terminal-success--type-code-size--type-meta-size