Data display

DiffView

What changed between two versions, line by line: removed lines marked − in red, added + in green, the rest as context.

import { DiffView } from '@alea/ui';

Examples

A revision

Removed lines first, then what replaced them, with context around.

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

--alea-status-danger…
--alea-status-success…
--alea-text-muted…

Space

--alea-space-1…
--alea-space-2…
--alea-space-3…

Radius

--alea-radius-xs…

Type

--alea-font-family-mono…
--alea-font-size-sm…
--alea-font-weight-semibold…

Props

`DiffView` props

What changed between two versions, line by line: removed lines marked − in red, added + in green, the rest as context.

Prop	Type	Default	Description
`lines`required	`DiffLine[]`	-	The lines, in order.
`className`	`string`	-	Extra class names for the root element.
`title`	`string`	-	A name for the change ("Venue", "tokens.css"); also the list's label.

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-diff.alea-diff-title.alea-diff-lines.alea-diff-sign
Data attributes: data-type=removedata-type=add

A figure named by its title; each changed line starts with "Added" or "Removed" for screen readers.
Signs and backgrounds both mark a change.

Do and don't

Keep a line or two of context around each change.

Don't

Don't show a whole document: show what changed.

In Figma

Diff line with Type (add, remove, same).