Typography
설치 확인제목(Heading)·본문(Text)·문장 안 코드(InlineCode)
1. 목적과 출처
제목(Heading)·본문(Text)·문장 안 코드(InlineCode)
- 출처
- 자체 제작
- 프로젝트
src/components/ui/typography.tsx- Registry
@adcapsule/typography
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| 구성 | 모양 |
|---|---|
| Heading size="display" | 정돈된 업무 흐름 |
| Heading size="headline" | 정돈된 업무 흐름 |
| Heading size="title" | 정돈된 업무 흐름 |
| Heading size="body" | 정돈된 업무 흐름 |
| Text variant="body" | 팀의 모든 작업을 하나의 공간에서 |
| Text variant="secondary" | 팀의 모든 작업을 하나의 공간에서 |
| Text variant="muted" | 팀의 모든 작업을 하나의 공간에서 |
| Text variant="caption" | 팀의 모든 작업을 하나의 공간에서 |
| InlineCode |
|
3. 속성 바꿔 보기
정돈된 업무 흐름
팀의 모든 작업을 하나의 공간에서. 설정은 data-theme 속성으로 바꿉니다.
Heading size
level
Text variant
4. 설치와 사용
- npm 패키지
- class-variance-authority
- 함께 설치
- @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- Heading: level(문서 구조)과 size(보이는 크기)를 따로
- Text variant: body·secondary·muted·caption
- InlineCode는 문장 안 짧은 코드
공통으로 유지할 토큰
- font.size.display·headline·title·body·caption
- text.primary·secondary·muted