Texte et styles
Stylisez une carte de déploiement avec des couleurs, des attributs de texte et des tokens de thème.
Dans ce chapitre
- Attributs du texte
- Tokens de thème
- Une carte de déploiement
- Thèmes
Chaque cellule possède un caractère, une couleur de premier plan, un arrière-plan et un ensemble d’attributs. Text.js les compile en spans CSS %c, pour que la console affiche de vraies couleurs, du gras et de l’italique.
Attributs du texte
<Text> accepte bold, dim, italic, underline et strikethrough. Les éléments <Text> imbriqués deviennent des spans stylisés au sein d’une même ligne.
<Text> Deployed <Text bold>acme-web</Text> to <Text color="accent">iad1</Text></Text>Tokens de thème
La prop color accepte les valeurs hexadécimales, les noms de couleurs simples (emerald) et les tokens de thème ; les nuances de la palette Tailwind passent par des classes (text-emerald-400). Les tokens suivent le thème actif, privilégiez-les donc pour tout ce qui est sémantique. Ajoutez un composant de statut :
Ajouté : import { Text } from "@textjs/app";Ajouté : Ajouté : export type DeployStatus = "ready" | "building" | "error" | "queued";Ajouté : Ajouté : export const STATUS = {Ajouté : ready: { label: "Ready", color: "success" },Ajouté : building: { label: "Building", color: "warning" },Ajouté : error: { label: "Error", color: "danger" },Ajouté : queued: { label: "Queued", color: "subtle" },Ajouté : } as const;Ajouté : Ajouté : export function Status({ status }: { status: DeployStatus }) {Ajouté : const s = STATUS[status];Ajouté : return <Text color={s.color} wrap="nowrap">{`● ${s.label}`}</Text>;Ajouté : }Une carte de déploiement
bg-surface détache la carte de l’arrière-plan. L’identifiant du déploiement reprend la couleur du statut, passe en italique pendant la compilation et est barré en cas d’erreur.
Supprimé : import { Box, Spacer, Text, useInput } from "@textjs/app";Ajouté : import { Box, Spacer, Text, useAppTheme, useInput } from "@textjs/app";Ajouté : import { Status, STATUS, type DeployStatus } from "./status";Ajouté : Ajouté : const ORDER: DeployStatus[] = ["ready", "building", "error", "queued"];Ajouté : export default function Page() {Ajouté : const { theme, cycleTheme } = useAppTheme();Ajouté : const [status, setStatus] = useState<DeployStatus>("ready");Ajouté : Ajouté : useInput((e) => {Ajouté : if (e.input === "t") cycleTheme();Ajouté : if (e.input === "s") setStatus((s) => ORDER[(ORDER.indexOf(s) + 1) % ORDER.length]);Ajouté : });Ajouté : return ( <Box className="flex-col grow"> {/* top bar, now with the theme name on the right */}Ajouté : <Box className="flex-col border rounded px-2 py-1 bg-surface">Ajouté : <Box className="flex-row gap-2 h-1">Ajouté : <Text bold>acme-web</Text>Ajouté : <Status status={status} />Ajouté : </Box>Ajouté : <Text color="muted" wrap="truncate-end">feat: stream cells downward</Text>Ajouté : <Text color={STATUS[status].color} italic={status === "building"} strikethrough={status === "error"}>Ajouté : dpl_8fK2Ajouté : </Text>Ajouté : </Box> </Box> );}wrap="truncate-end" termine les longs messages de commit par … au lieu de les faire passer sur une deuxième ligne.
Thèmes
Cinq thèmes sont fournis avec Text.js : Geist Dark, OpenCode Dark, Tokyo Night, Amber CRT et Geist Light. Appuyez sur t dans la console pour passer de l’un à l’autre. Toute la frame est redessinée avec la nouvelle palette, car chaque couleur ci-dessus est un jeton de thème.
Essayer
Voici Acme Deploys en fin de chapitre, en cours d’exécution dans DevTools. Cliquez sur le pavé, puis utilisez les touches ci-dessous.
Ouvrir la console
L’application s’affiche dans DevTools.Activez d’abord « Afficher les fonctionnalités pour les développeurs web » dans Safari Réglages → Avancés. Puis cliquez ici et appuyez sur t.
Ouvrir sur ordinateur
Cette application s’affiche dans la console DevTools, qui nécessite un navigateur sur ordinateur.
Quiz
2 questionsRépondez à toutes les questions pour terminer le chapitre.