17-6. v4.0 → v5.0 토큰 변경 대조표 ⚠️ 필독
이름은 그대로 두고 값이 바뀐 항목이 많습니다. 그래서 마이그레이션 방법은 찾아 바꾸기가 아니라 파일 교체 + 화면 확인입니다.
| 토큰 | v4.0 | v5.0 | 비고 |
|---|---|---|---|
--fs-base | 14px | 16px | 기준 전환 |
--fs-xs / sm / lg / xl / 2xl / 3xl / 4xl | 11/12/16/18/22/26/30 | 12/14/18/20/24/28/32 | 스케일 재계산 |
--fs-2xs | 10px | 11px + @deprecated | 충돌 C1 해소. v6.0 제거 예정 |
--control-height (sm/lg) | 36/28/44 | 40/32/48 | 16px 본문 대응 |
compact --control-height (sm) | 30/24 | 34/28 | 행간 안전 |
--density-fs-base (compact) | 14(13) | 16(14) | 한 스텝 규칙 유지 |
--container-narrow / -wide | (없음) | 720 / 1440px 신설 | --container-max:1200 유지 |
--font-base | Pretendard + Figtree + 15종 | Figtree 제거 / 태국·인도계 6종 추가 | 본문은 Pretendard 단독 |
--font-display | (없음) | 신설 (Figtree) | 영문 대형 제목·태그라인 |
--fs-display-sm/md/lg | (없음) | 40 / 48 / 56px 신설 | Expressive 세트 |
--lh-display / --ls-display | (없음) | 1.15 / -0.02em 신설 | 40px 이상 필수 조판 |
--z-* (9종) | (없음) | 신설 | z-index 숫자 사용 금지 |
--color-fill-active/-selected/-disabled | (없음) | 신설 | 상호작용 상태 세트 |
--color-border-strong | (없음) | gray-500 신설 | 폼 컨트롤 전용 (3.04:1) |
--color-text-tertiary | 힌트·placeholder용 | 글자 사용 금지로 변경 | 3.04:1 미달 |
--color-dim-weak / -overlay / -strong / -image | (없음) | 신설 4단계 | 딤 |
--color-pass/fail/hold/oos (+bg/border/text) | (없음) | 신설 | 품질 판정 도메인 |
--icon-sm/md/lg · --focus-ring-* · --touch-target-min | (없음) | 신설 | 0단계 보강 |
--purple-400 / -900 · --teal-400 / -900 | (없음) | 신설 | 팔레트 8단계 통일 |
--r-none | (없음) | 0 신설 | 각진 모서리. .jt-r-* 유틸리티 동반 |
color-scheme | (없음) | light / dark 선언 | 브라우저 기본 컨트롤(라디오·달력·스크롤바) 다크 대응 |
웹폰트 @import | (없음) | 토큰 파일에 내장 | 링크 1개로 폰트 포함 |
--shadow-4 | 정의만 | 용도 한정 주석 (모달 위 팝오버 전용) | 충돌 C4 해소 |
| 언어 안전 규칙 블록 | (없음) | 신설 :lang(ko) + :where(body) | 다국어 견고성 |