kyeongmin
8e577b3163
- tokens: typography(35변수), spacing(28변수), colors(41변수) 정의 - slide-base.html: 인라인 style 제거, Jinja include로 토큰/CSS 조립 - slide-base.css: 모든 직접값을 토큰 변수 참조로 전환 (직접값 0) - block_assembler.py: Template → Environment.from_string (include 지원) - TOKENS-v1.md: 위계 기준표 초안 + component token 후보 - BLOCK-RULES.md: 블록 작성 규칙 (spacing 문구 실제 토큰과 일치) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
70 lines
2.8 KiB
Markdown
70 lines
2.8 KiB
Markdown
# Typography Tokens — 초안 v1
|
|
|
|
## Global Hierarchy Tokens
|
|
|
|
슬라이드 전체의 공통 글자 위계. 모든 블록이 이 기준을 따른다.
|
|
|
|
| 위계 | 토큰명 | font-size | font-weight | line-height | 용도 |
|
|
|------|--------|-----------|-------------|-------------|------|
|
|
| 대목차 | `--font-slide-title` | 22px | 700 | 1.4 | 슬라이드 상단 제목 |
|
|
| 중목차 | `--font-zone-title` | 13px | 700 | 1.4 | zone 제목 (## 대목차 하위) |
|
|
| 소목차 | `--font-sub-title` | 12px | 700 | 1.45 | 블록 내 소제목, 카드 제목 |
|
|
| 본문 | `--font-body` | 11px | 400~500 | 1.55 | 블릿, 설명 텍스트 |
|
|
| 캡션 | `--font-caption` | 10px | 400 | 1.4 | 각주, 출처, 보조 텍스트 |
|
|
| footer | `--font-footer` | 20px | 700 | 1.2 | 핵심 인사이트 pill |
|
|
|
|
---
|
|
|
|
## Component Semantic Token 후보
|
|
|
|
위계 6종으로 안 덮이는 역할. 가까운 위계에서 기본값을 가져오되, 필요시 override.
|
|
|
|
| 역할 | 기반 위계 | 예상 override | 비고 |
|
|
|------|-----------|---------------|------|
|
|
| body-strong (본문 강조) | 본문 (11px) | weight: 600~700 | 본문 heading, 인라인 강조 |
|
|
| detail-link (자세히보기) | 캡션 (10px) | weight: 500, color: muted | 링크 텍스트 |
|
|
| pill-label | 소목차 (12px) | weight: 700, color: white | pill/badge 안 라벨 |
|
|
| table-header | 소목차 (12px) | weight: 700, color: white, bg: dark | 표 헤더 셀 |
|
|
| table-cell | 본문 (11px) | - | 표 데이터 셀 |
|
|
| compare-badge | 소목차 (12px) | weight: 700 | 비교 블록 VS 뱃지 |
|
|
| callout | 소목차 (12px) | weight: 700, color: accent | 강조 인용 |
|
|
| overline | 캡션 (10px) | weight: 600, letter-spacing | 상단 라벨 |
|
|
|
|
---
|
|
|
|
## Source
|
|
|
|
현재 코드에서 추출한 실제 사용값 기준.
|
|
|
|
| 출처 | 대목차 | 중목차 | 소목차 | 본문 | 캡션 | footer |
|
|
|------|--------|--------|--------|------|------|--------|
|
|
| slide-base.html | 22px | - | - | - | - | 20px |
|
|
| block_assembler.py zone title | - | 13px | - | - | - | - |
|
|
| block_assembler.py direct render | - | - | 12px | 11px | - | - |
|
|
| block_assembler.py .bul | - | - | - | 11px | - | - |
|
|
| FontHierarchy (legacy) | - | - | key_msg 14 | core 12 | sidebar 10 | - |
|
|
|
|
---
|
|
|
|
## FontHierarchy 매핑 (보조 체계)
|
|
|
|
기존 FontHierarchy는 역할 기반이므로, 위계 기반으로 매핑하여 보조로 유지.
|
|
|
|
| FontHierarchy | 위계 매핑 | 비고 |
|
|
|---------------|-----------|------|
|
|
| key_msg (14px) | 소목차~중목차 사이 | 강조 메시지용, component token 후보 |
|
|
| core (12px) | 소목차 | 기본 블록 제목급 |
|
|
| bg (11px) | 본문 | 배경/보조 텍스트 |
|
|
| sidebar (10px) | 캡션 | 사이드바/첨부 |
|
|
|
|
---
|
|
|
|
## 상태
|
|
|
|
- [x] inventory 수집 완료
|
|
- [x] global hierarchy v1 초안
|
|
- [x] component token 후보 분리
|
|
- [ ] typography.css 파일 작성
|
|
- [ ] spacing tokens 정의
|
|
- [ ] color tokens 정의 (공통 + 의미색)
|