Testo e stili
Applica a una scheda di deploy colori, attributi di testo e token del tema.
In questo capitolo
- Attributi del testo
- Token del tema
- Una scheda di deploy
- Temi
Ogni cella ha un carattere, un colore di primo piano, uno sfondo e un insieme di attributi. Text.js li compila in span CSS %c, così la console mostra colori reali, grassetto e corsivo.
Attributi del testo
<Text> accetta bold, dim, italic, underline e strikethrough. Gli elementi <Text> annidati diventano span con stili all’interno di una singola riga.
<Text> Deployed <Text bold>acme-web</Text> to <Text color="accent">iad1</Text></Text>Token del tema
La prop color accetta valori esadecimali, nomi di colori semplici (emerald) e token del tema; le tonalità della palette Tailwind si applicano tramite classi (text-emerald-400). I token seguono il tema attivo, quindi preferiscili per tutto ciò che ha un significato semantico. Aggiungi un componente di stato:
Aggiunto: import { Text } from "@textjs/app";Aggiunto: Aggiunto: export type DeployStatus = "ready" | "building" | "error" | "queued";Aggiunto: Aggiunto: export const STATUS = {Aggiunto: ready: { label: "Ready", color: "success" },Aggiunto: building: { label: "Building", color: "warning" },Aggiunto: error: { label: "Error", color: "danger" },Aggiunto: queued: { label: "Queued", color: "subtle" },Aggiunto: } as const;Aggiunto: Aggiunto: export function Status({ status }: { status: DeployStatus }) {Aggiunto: const s = STATUS[status];Aggiunto: return <Text color={s.color} wrap="nowrap">{`● ${s.label}`}</Text>;Aggiunto: }Una scheda di deploy
bg-surface fa risaltare la scheda rispetto allo sfondo. L’ID del deploy assume il colore dello stato, passa al corsivo durante la build e diventa barrato in caso di errore.
Rimosso: import { Box, Spacer, Text, useInput } from "@textjs/app";Aggiunto: import { Box, Spacer, Text, useAppTheme, useInput } from "@textjs/app";Aggiunto: import { Status, STATUS, type DeployStatus } from "./status";Aggiunto: Aggiunto: const ORDER: DeployStatus[] = ["ready", "building", "error", "queued"];Aggiunto: export default function Page() {Aggiunto: const { theme, cycleTheme } = useAppTheme();Aggiunto: const [status, setStatus] = useState<DeployStatus>("ready");Aggiunto: Aggiunto: useInput((e) => {Aggiunto: if (e.input === "t") cycleTheme();Aggiunto: if (e.input === "s") setStatus((s) => ORDER[(ORDER.indexOf(s) + 1) % ORDER.length]);Aggiunto: });Aggiunto: return ( <Box className="flex-col grow"> {/* top bar, now with the theme name on the right */}Aggiunto: <Box className="flex-col border rounded px-2 py-1 bg-surface">Aggiunto: <Box className="flex-row gap-2 h-1">Aggiunto: <Text bold>acme-web</Text>Aggiunto: <Status status={status} />Aggiunto: </Box>Aggiunto: <Text color="muted" wrap="truncate-end">feat: stream cells downward</Text>Aggiunto: <Text color={STATUS[status].color} italic={status === "building"} strikethrough={status === "error"}>Aggiunto: dpl_8fK2Aggiunto: </Text>Aggiunto: </Box> </Box> );}wrap="truncate-end" termina i messaggi di commit lunghi con … invece di mandarli a capo su una seconda riga.
Temi
Text.js include cinque temi: Geist Dark, OpenCode Dark, Tokyo Night, Amber CRT e Geist Light. Premi t nella console per scorrerli. L’intero frame viene ridisegnato con la nuova palette, perché ogni colore usato sopra è un token.
Provala
Questa è Acme Deploys alla fine del capitolo, in esecuzione in DevTools. Fai clic sul pannello del focus, poi usa i tasti qui sotto.
Apri la console
L’app viene renderizzata in DevTools.Prima attiva «Mostra funzionalità per sviluppatori web» in Safari Impostazioni → Avanzate. Poi fai clic qui e premi t.
Aprire su desktop
Questa app viene renderizzata nella console DevTools, che richiede un browser desktop.
Quiz
2 domandeRispondi a tutte le domande per completare il capitolo.