Datos

DiffView

Lo que cambió entre dos versiones, línea por línea: las eliminadas con − en rojo, las agregadas con + en verde, el resto como contexto.

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

Ejemplos

Una revisión

Primero las líneas eliminadas, luego lo que las reemplazó, con contexto alrededor.

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

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

Lo que cambió entre dos versiones, línea por línea: las eliminadas con − en rojo, las agregadas con + en verde, el resto como contexto.

Prop	Tipo	Por defecto	Descripción
`lines`obligatoria	`DiffLine[]`	-	Las líneas, en orden.
`className`	`string`	-	Clases extra para el elemento raíz.
`title`	`string`	-	Un nombre para el cambio ("Venue", "tokens.css"); también la etiqueta de la lista.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-diff.alea-diff-title.alea-diff-lines.alea-diff-sign
Atributos data: data-type=removedata-type=add

Una figure nombrada por su título; cada línea cambiada empieza con "Agregado" o "Eliminado" para lectores de pantalla.
Los signos y los fondos marcan cada cambio.

Qué hacer y qué evitar

Hacer

Deja una o dos líneas de contexto alrededor de cada cambio.

Evitar

No muestres el documento entero: muestra lo que cambió.

En Figma

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