Texto y estilos
Da estilo a una tarjeta de despliegue con colores, atributos de texto y tokens de tema.
En este capítulo
- Atributos de texto
- Tokens de tema
- Una tarjeta de despliegue
- Temas
Cada celda tiene un carácter, un color de primer plano, un fondo y un conjunto de atributos. Text.js los compila en spans CSS %c, por lo que la consola muestra colores reales, negrita y cursiva.
Atributos de texto
<Text> acepta bold, dim, italic, underline y strikethrough. Los elementos <Text> anidados se convierten en spans con estilos dentro de una misma línea.
<Text> Deployed <Text bold>acme-web</Text> to <Text color="accent">iad1</Text></Text>Tokens de tema
La prop color acepta valores hexadecimales, nombres de colores sin modificadores (emerald) y tokens de tema; los tonos de la paleta de Tailwind se aplican mediante clases (text-emerald-400). Los tokens siguen el tema activo, así que dales preferencia para cualquier uso semántico. Añade un componente de estado:
Añadido: import { Text } from "@textjs/app";Añadido: Añadido: export type DeployStatus = "ready" | "building" | "error" | "queued";Añadido: Añadido: export const STATUS = {Añadido: ready: { label: "Ready", color: "success" },Añadido: building: { label: "Building", color: "warning" },Añadido: error: { label: "Error", color: "danger" },Añadido: queued: { label: "Queued", color: "subtle" },Añadido: } as const;Añadido: Añadido: export function Status({ status }: { status: DeployStatus }) {Añadido: const s = STATUS[status];Añadido: return <Text color={s.color} wrap="nowrap">{`● ${s.label}`}</Text>;Añadido: }Una tarjeta de despliegue
bg-surface hace que la tarjeta destaque sobre el fondo. El identificador del despliegue adopta el color del estado, se muestra en cursiva durante la compilación y se tacha si hay un error.
Eliminado: import { Box, Spacer, Text, useInput } from "@textjs/app";Añadido: import { Box, Spacer, Text, useAppTheme, useInput } from "@textjs/app";Añadido: import { Status, STATUS, type DeployStatus } from "./status";Añadido: Añadido: const ORDER: DeployStatus[] = ["ready", "building", "error", "queued"];Añadido: export default function Page() {Añadido: const { theme, cycleTheme } = useAppTheme();Añadido: const [status, setStatus] = useState<DeployStatus>("ready");Añadido: Añadido: useInput((e) => {Añadido: if (e.input === "t") cycleTheme();Añadido: if (e.input === "s") setStatus((s) => ORDER[(ORDER.indexOf(s) + 1) % ORDER.length]);Añadido: });Añadido: return ( <Box className="flex-col grow"> {/* top bar, now with the theme name on the right */}Añadido: <Box className="flex-col border rounded px-2 py-1 bg-surface">Añadido: <Box className="flex-row gap-2 h-1">Añadido: <Text bold>acme-web</Text>Añadido: <Status status={status} />Añadido: </Box>Añadido: <Text color="muted" wrap="truncate-end">feat: stream cells downward</Text>Añadido: <Text color={STATUS[status].color} italic={status === "building"} strikethrough={status === "error"}>Añadido: dpl_8fK2Añadido: </Text>Añadido: </Box> </Box> );}wrap="truncate-end" termina los mensajes de commit largos con … en lugar de continuarlos en una segunda fila.
Temas
Text.js incluye cinco temas: Geist Dark, OpenCode Dark, Tokyo Night, Amber CRT y Geist Light. Pulsa t en la consola para alternar entre ellos. Todo el fotograma se vuelve a dibujar con la nueva paleta, porque cada color anterior es un token.
Probar
Esta es Acme Deploys al final del capítulo, ejecutándose en DevTools. Haz clic en el panel y usa las teclas de abajo.
Abrir la consola
La app se renderiza en DevTools.Primero activa «Mostrar funciones para desarrolladores web» en Configuración de Safari → Avanzado. Luego haz clic aquí y pulsa t.
Abrir en un equipo de escritorio
Esta app se renderiza en la consola de DevTools, que requiere un navegador de escritorio.
Cuestionario
2 preguntasResponde todas las preguntas para completar el capítulo.