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>
2.8 KiB
2.8 KiB
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) | 캡션 | 사이드바/첨부 |
상태
- inventory 수집 완료
- global hierarchy v1 초안
- component token 후보 분리
- typography.css 파일 작성
- spacing tokens 정의
- color tokens 정의 (공통 + 의미색)