テキストとスタイル
色、テキスト属性、テーマトークンでデプロイカードのスタイルを設定します。
この章の内容
- テキスト属性
- テーマトークン
- デプロイカード
- テーマ
各セルには文字、前景色、背景色、属性のセットがあります。Text.jsはこれらを %c のCSSスパンにコンパイルするため、コンソールに実際の色、太字、斜体が表示されます。
テキスト属性
<Text> は bold、dim、italic、underline、strikethrough を受け取ります。ネストした <Text> 要素は、1行内のスタイル付きスパンになります。
<Text> Deployed <Text bold>acme-web</Text> to <Text color="accent">iad1</Text></Text>テーマトークン
color プロパティは16進数値、色名（emerald）、テーマトークンを受け取り、Tailwindパレットの色の濃淡はクラス（text-emerald-400）で指定します。トークンはアクティブなテーマに従うため、意味を持つ色にはトークンを優先して使います。ステータスコンポーネントを追加します。
追加：import { Text } from "@textjs/app";追加：追加：export type DeployStatus = "ready" | "building" | "error" | "queued";追加：追加：export const STATUS = {追加： ready: { label: "Ready", color: "success" },追加： building: { label: "Building", color: "warning" },追加： error: { label: "Error", color: "danger" },追加： queued: { label: "Queued", color: "subtle" },追加：} as const;追加：追加：export function Status({ status }: { status: DeployStatus }) {追加： const s = STATUS[status];追加： return <Text color={s.color} wrap="nowrap">{`● ${s.label}`}</Text>;追加：}デプロイカード
bg-surface はカードを背景から浮き上がらせます。デプロイIDにはステータスの色が適用され、ビルド中は斜体になり、エラー時は取り消し線が付きます。
削除：import { Box, Spacer, Text, useInput } from "@textjs/app";追加：import { Box, Spacer, Text, useAppTheme, useInput } from "@textjs/app";追加：import { Status, STATUS, type DeployStatus } from "./status";追加：追加：const ORDER: DeployStatus[] = ["ready", "building", "error", "queued"];追加：export default function Page() {追加： const { theme, cycleTheme } = useAppTheme();追加： const [status, setStatus] = useState<DeployStatus>("ready");追加：追加： useInput((e) => {追加： if (e.input === "t") cycleTheme();追加： if (e.input === "s") setStatus((s) => ORDER[(ORDER.indexOf(s) + 1) % ORDER.length]);追加： });追加： return ( <Box className="flex-col grow"> {/* top bar, now with the theme name on the right */}追加： <Box className="flex-col border rounded px-2 py-1 bg-surface">追加： <Box className="flex-row gap-2 h-1">追加： <Text bold>acme-web</Text>追加： <Status status={status} />追加： </Box>追加： <Text color="muted" wrap="truncate-end">feat: stream cells downward</Text>追加： <Text color={STATUS[status].color} italic={status === "building"} strikethrough={status === "error"}>追加： dpl_8fK2追加： </Text>追加： </Box> </Box> );}wrap="truncate-end" は長いコミットメッセージを2行目に折り返さず、末尾を … で省略します。
テーマ
Text.jsにはGeist Dark、OpenCode Dark、Tokyo Night、Amber CRT、Geist Lightの5つのテーマが同梱されています。コンソールで t を押すと、順に切り替わります。上で使った色はすべてトークンなので、フレーム全体が新しいパレットで再描画されます。
試す
これは章の終わりに完成するAcme Deploysで、DevToolsで動作しています。パッドをクリックして、以下のキーを使います。
コンソールを開く
アプリはDevToolsに描画されます。まずSafariの「設定」→「詳細」で「Webデベロッパ用の機能を表示」をオンにします。 次にここをクリックして、tを押します。
デスクトップで開く
このアプリはDevToolsのコンソールに描画されるため、デスクトップブラウザーが必要です。
クイズ
2問すべての問題に回答すると章を完了できます。