텍스트와 스타일

모든 셀에는 문자, 전경색, 배경색과 속성 집합이 있어요. Text.js는 이를 %c CSS 스팬으로 컴파일해서 콘솔에 실제 색상, 굵은 글씨와 기울임꼴을 표시해요.

텍스트 속성

<Text>는 bold, dim, italic, underline, strikethrough를 받아요. 중첩된 <Text> 요소는 한 줄 안에서 스타일이 적용된 스팬이 돼요.

<Text>  Deployed <Text bold>acme-web</Text> to <Text color="accent">iad1</Text></Text>

테마 토큰

color prop은 16진수 값, 일반 색상 이름(emerald), 테마 토큰을 받아요. Tailwind 팔레트의 색조는 클래스(text-emerald-400)로 지정해요. 토큰은 활성 테마를 따르므로 의미를 나타내는 색상에는 토큰을 우선 사용하세요. 상태 컴포넌트를 추가하세요:

app/status.tsx+15tsx

+추가: 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에는 상태 색상이 적용되고, 빌드 중에는 기울임꼴로, 오류가 발생하면 취소선으로 표시돼요.

app/page.tsx+23-1tsx

-삭제: 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"는 긴 커밋 메시지를 두 번째 줄로 넘기는 대신 …로 끝내요.

테마

Text.js에는 Geist Dark, OpenCode Dark, Tokyo Night, Amber CRT, Geist Light의 5가지 테마가 포함돼요. 콘솔에서 t를 눌러 차례로 전환하세요. 위의 모든 색상이 토큰이므로 프레임 전체가 새 팔레트로 다시 그려져요.

이 장의 내용

텍스트 속성

테마 토큰

배포 카드

테마

사용해 보기

콘솔 열기

데스크톱에서 열기

퀴즈

텍스트와 스타일

이 장의 내용

#텍스트 속성

#테마 토큰

#배포 카드

#테마

사용해 보기

콘솔 열기

데스크톱에서 열기

퀴즈

텍스트 속성

테마 토큰

배포 카드

테마