@ihabdevteam/core 0.9.11 → 0.10.0

package/README.md

@@ -92,14 +92,31 @@ import '@ihabdevteam/core/tokens.css'
 
 ### 타입 스케일 토큰
 
-`.h0`~`.h5` / `.body-*` / `.button-*` / `.caption-*` 클래스의 수치는 모두 `--text-*` 변수에서 옵니다(반응형·글자 크기 스케일 포함). 다른 프레임워크로 옮길 때는 이 변수만 읽으면 됩니다.
+`.display-1`~`.display-3` / `.h0`~`.h5` / `.body-*` / `.button-*` / `.caption-*` 클래스의 수치는 모두 `--text-*` 변수에서 옵니다(반응형·글자 크기 스케일 포함). 다른 프레임워크로 옮길 때는 이 변수만 읽으면 됩니다.
 
 ```
+--text-display-1-size / --text-display-1-line / --text-display-1-spacing / --text-display-1-weight / --text-display-1-weight-bold
 --text-h0-size / --text-h0-line / --text-h0-spacing / --text-h0-weight / --text-h0-weight-bold
 --text-body-1-size / --text-body-1-line / --text-body-1-weight / --text-body-1-weight-bold
 --text-button-1-size / --text-caption-1-size …
 ```
 
+#### 디스플레이 단(`display-1`~`3`)은 규약이 다릅니다
+
+`h0` **위**의 세 단으로, **랜딩·히어로처럼 크게 외치는 자리 전용**입니다. 앱 화면 제목에는 `h0`~`h5` 를 쓰세요.
+
+| | 크기 | 행간 | 자간 | 굵기(`b`) |
+|---|---|---|---|---|
+| `display-1` | `clamp(44px, 6.6vw, 72px)` | 1.05 | -0.04em | 800 (900) |
+| `display-2` | `clamp(38px, 5.2vw, 56px)` | 1.12 | -0.03em | 700 (800) |
+| `display-3` | `clamp(34px, 4.1vw, 44px)` | 1.2 | -0.02em | 700 (800) |
+
+- **크기는 뷰포트를 따라 연속으로 변합니다.** `h` 단은 미디어쿼리로 세 계단을 뛰지만, 히어로 글자가 계단으로 뛰면 그 폭 근처에서 줄바꿈이 툭툭 달라집니다. 그래서 반응형 블록에 `display` 를 **다시 적지 않습니다**.
+- **행간은 배수, 자간은 `em`** 입니다. 크기가 연속으로 변하는데 `px` 로 박으면 큰 화면에서 행간이 붙습니다.
+- **글자 크기 스케일(`[data-font-scale]`)에서 빠집니다** — `h0`~`h3` 과 같은 까닭입니다(이미 크고, 키우면 히어로 한 줄이 화면을 넘칩니다).
+
+어느 폭에서도 `h0 < display-3 < display-2 < display-1` 이 성립합니다(1024px 처럼 `h0` 가 32→40 으로 뛰는 지점 포함).
+
 그 밖에 `--duration-fast|base|slow`, `--ease-out|in-out`(모션), `--bp-tablet|desktop`(브레이크포인트 — CSS 미디어쿼리에는 직접 쓸 수 없고 JS·Tailwind용 단일 출처), `--container-page`(콘텐츠 최대폭), `--color-text-primary|secondary|muted` · `--color-surface|surface-raised|surface-sunken` · `--color-border`(역할 기반 시맨틱 별칭)를 제공합니다.
 
 ## Subpath imports