Text

크기 s / m / l / xl / 2xl은 text.size.2부터 text.size.6까지에 대응합니다.

글꼴은 font.family.sans를 읽는 text.font.family에 있습니다. Todae는 이 값으로 font-family를 지정하지 않으니, 원하는 곳에 var(--todae-text-font-family)를 적용하세요.

Server Components는 @tounsoo/todae/text에서 가져올 수 있습니다. 이 진입점에는 'use client'도 훅도 없습니다. 메인 @tounsoo/todae 진입점은 클라이언트 모듈입니다.

Small muted

Medium default

Large accent

tone="accent"는 color.accent.default를 따릅니다. Todae의 액센트는 중립적인 잉크이므로, 테마나 회사 토큰 패키지가 브랜드 액센트를 설정하기 전까지 accent 텍스트는 기본 텍스트처럼 보입니다.

제목

as="h1"부터 as="h6"까지는 제목을 렌더링합니다. 제목 수준에 따라 스케일을 내려가는 기본 크기, 굵은 두께, text.leading.tight가 정해지고, 줄바꿈이 균형 있게 맞춰집니다.

문서 개요에 맞는 수준을 고르고, 보이는 크기는 size로 정하세요. h1 아래에 있는 제목은 작게 보여야 할 때도 h2로 남습니다.

The outline says h2; the size says it is a quiet section label.

언제: 토큰 스케일을 따르는 본문 텍스트와 제목. 크기 s부터 2xl까지, 톤 default / muted / accent, 굵기, as p / span / strong / h1–h6.

쓰지 않을 때: 필드 이름 → Label. 컨트롤 그룹의 이름 → Fieldset.Legend. 힌트와 오류 → Description / ErrorMessage. 다이얼로그 제목 → Dialog.Title.

Text props
이름	타입	필수	기본값	설명
as	`"p" \| "span" \| "strong" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	아니요	"p"	렌더링할 요소. 제목 수준은 문서 개요를 정하고, 기본 크기, 굵은 두께, 좁은 행간도 정합니다.
size	`"s" \| "m" \| "l" \| "xl" \| "2xl"`	아니요	"m"; for headings h1 "2xl", h2 "xl", h3 "l", h4 and h5 "m", h6 "s"	text.size.2부터 text.size.6까지에 대응합니다. 제목을 수준보다 크거나 작게 보이게 하려면 지정합니다.
tone	`"default" \| "muted" \| "accent"`	아니요	"default"	전경색 역할. accent는 color.accent.default를 따르며 Todae에서는 중립 잉크색이므로, 테마가 브랜드 강조색을 설정하기 전까지는 default와 같습니다.
weight	`"regular" \| "medium" \| "bold"`	아니요	"regular"; "bold" for headings	글꼴 굵기.
children	`React.ReactNode`	아니요	—	텍스트 내용.