Texto e estilo
Estilize um cartão de deploy com cores, atributos de texto e tokens de tema.
Neste capítulo
- Atributos de texto
- Tokens de tema
- Um cartão de deploy
- Temas
Cada célula tem um caractere, uma cor de primeiro plano, uma cor de fundo e um conjunto de atributos. Text.js compila esses valores em spans CSS %c, para que o console mostre cores reais, negrito e itálico.
Atributos de texto
<Text> aceita bold, dim, italic, underline e strikethrough. Elementos <Text> aninhados se tornam spans estilizados dentro de uma única linha.
<Text> Deployed <Text bold>acme-web</Text> to <Text color="accent">iad1</Text></Text>Tokens de tema
A prop color aceita valores hexadecimais, nomes de cores simples (emerald) e tokens de tema; os tons da paleta Tailwind são definidos por classes (text-emerald-400). Os tokens acompanham o tema ativo, então prefira usá-los para tudo que for semântico. Adicione um componente de status:
Adicionado: import { Text } from "@textjs/app";Adicionado: Adicionado: export type DeployStatus = "ready" | "building" | "error" | "queued";Adicionado: Adicionado: export const STATUS = {Adicionado: ready: { label: "Ready", color: "success" },Adicionado: building: { label: "Building", color: "warning" },Adicionado: error: { label: "Error", color: "danger" },Adicionado: queued: { label: "Queued", color: "subtle" },Adicionado: } as const;Adicionado: Adicionado: export function Status({ status }: { status: DeployStatus }) {Adicionado: const s = STATUS[status];Adicionado: return <Text color={s.color} wrap="nowrap">{`● ${s.label}`}</Text>;Adicionado: }Um cartão de deploy
bg-surface destaca o cartão do fundo. O ID do deploy assume a cor do status, fica em itálico durante o build e é tachado em caso de erro.
Removido: import { Box, Spacer, Text, useInput } from "@textjs/app";Adicionado: import { Box, Spacer, Text, useAppTheme, useInput } from "@textjs/app";Adicionado: import { Status, STATUS, type DeployStatus } from "./status";Adicionado: Adicionado: const ORDER: DeployStatus[] = ["ready", "building", "error", "queued"];Adicionado: export default function Page() {Adicionado: const { theme, cycleTheme } = useAppTheme();Adicionado: const [status, setStatus] = useState<DeployStatus>("ready");Adicionado: Adicionado: useInput((e) => {Adicionado: if (e.input === "t") cycleTheme();Adicionado: if (e.input === "s") setStatus((s) => ORDER[(ORDER.indexOf(s) + 1) % ORDER.length]);Adicionado: });Adicionado: return ( <Box className="flex-col grow"> {/* top bar, now with the theme name on the right */}Adicionado: <Box className="flex-col border rounded px-2 py-1 bg-surface">Adicionado: <Box className="flex-row gap-2 h-1">Adicionado: <Text bold>acme-web</Text>Adicionado: <Status status={status} />Adicionado: </Box>Adicionado: <Text color="muted" wrap="truncate-end">feat: stream cells downward</Text>Adicionado: <Text color={STATUS[status].color} italic={status === "building"} strikethrough={status === "error"}>Adicionado: dpl_8fK2Adicionado: </Text>Adicionado: </Box> </Box> );}wrap="truncate-end" termina mensagens de commit longas com … em vez de quebrá-las em uma segunda linha.
Temas
Text.js inclui cinco temas: Geist Dark, OpenCode Dark, Tokyo Night, Amber CRT e Geist Light. Pressione t no console para alternar entre eles. O quadro inteiro é redesenhado com a nova paleta, porque cada cor acima é um token.
Experimentar
Este é Acme Deploys ao final do capítulo, rodando no DevTools. Clique na área de entrada e use as teclas abaixo.
Abrir o console
O app renderiza no DevTools.Primeiro ative “Mostrar recursos para desenvolvedores web” em Ajustes do Safari → Avançado. Depois clique aqui e pressione t.
Abrir em um computador
Este app renderiza no console do DevTools, que precisa de um navegador de computador.
Questionário
2 perguntasResponda a todas as perguntas para concluir o capítulo.