'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Tipografía
Prose
Da estilo a contenido largo que no controlas elemento por elemento: artículos, documentación, Markdown, HTML de un CMS.
import { Prose } from '@alea/ui';
Ejemplos
Artículo
Títulos, listas, citas, código, tablas e imágenes de cualquier fuente.
Motion with a system
Thirty-three patterns instead of a hundred keyframes. Each one is built from tokens and has a reduced-motion fallback.
What changes
- Overlays pop from their trigger
- Selection glides between items
- Errors nudge once
Motion should explain what changed, never decorate.
.alea-popover[data-entering] { animation: alea-pop var(--alea-motion-duration-base); }| Pattern | Duration |
|---|---|
| Pop | 250 ms |
| Rise | 400 ms |
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-accent-on…--alea-accent-solid…--alea-accent-strong…--alea-border…--alea-border-strong…--alea-text-muted…
Radius
--alea-radius-md…
Type
--alea-font-family-display…--alea-font-size-4xl…--alea-font-size-base…--alea-font-size-sm…--alea-font-tracking-display…--alea-font-weight-light…--alea-font-weight-semibold…
Motion
--alea-motion-duration-fast…--alea-motion-ease-out…
Props
Prose props
Da estilo a contenido largo que no controlas elemento por elemento: artículos, documentación, HTML de un CMS.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | Contenido enriquecido: títulos, párrafos, listas, enlaces, citas, código, imágenes, tablas (de Markdown o un CMS). |
className | string | - | |
size | "sm" | "base" | 'base' | Texto sm (14 px) o base (16 px, por defecto). |
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.
- Variantes
sizesmbase- 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-prose.alea-markdown- Atributos data
data-size=basedata-checklistdata-checked=true
Accesibilidad
- Mantén los títulos en orden dentro del contenido; Prose les da estilo pero no puede arreglar un nivel saltado.
Qué hacer y qué evitar
Hacer
- Envuelve en Prose lo que sale de un CMS o de Markdown.
Evitar
- No pongas componentes de interfaz dentro de Prose: es para leer.