@ihabdevteam/core 0.9.11 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -1
- package/dist/components.cjs.js +45 -45
- package/dist/components.esm.css +1 -1
- package/dist/ihabdevteam-core-tokens.css +1 -1
- package/dist/ihabdevteam-core.cjs.js +179 -179
- package/dist/ihabdevteam-core.css +1 -1
- package/dist/ihabdevteam-core.d.ts +105 -0
- package/dist/packages/core/src/components/Report/ReportDocument.css +127 -0
- package/dist/packages/core/src/components/Report/ReportDocument.d.ts +77 -0
- package/dist/packages/core/src/components/Report/ReportDocument.js +0 -0
- package/dist/packages/core/src/components/Report/ReportInfoPanel.css +42 -0
- package/dist/packages/core/src/components/Report/ReportInfoPanel.d.ts +26 -0
- package/dist/packages/core/src/components/Report/ReportInfoPanel.js +14 -0
- package/dist/packages/core/src/components.d.ts +4 -0
- package/dist/packages/core/src/components.js +2 -0
- package/dist/packages/core/src/styles.css +63 -31
- package/dist/packages/core/src/tokens.css +25 -1
- package/package.json +1 -1
|
@@ -133,10 +133,34 @@
|
|
|
133
133
|
--font-family: 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
|
|
134
134
|
|
|
135
135
|
/* ── 타입 스케일 ──────────────────────────────────────────
|
|
136
|
-
클래스(.h0~.h5 / .body-* / .button-* / .caption-*)는 styles.css에 있고 값은 전부
|
|
136
|
+
클래스(.display-1~3 / .h0~.h5 / .body-* / .button-* / .caption-*)는 styles.css에 있고 값은 전부
|
|
137
137
|
여기서 온다. 아래 반응형·글자 크기 스케일 블록이 같은 변수를 재정의하므로,
|
|
138
138
|
다른 프레임워크(Tailwind @theme 등)에서도 이 변수만 읽으면 동일한 스케일을 얻는다.
|
|
139
139
|
`-weight`는 기본, `-weight-bold`는 클래스명에 b가 붙은 변형(.h0b, .body-1b …)이다. */
|
|
140
|
+
/* ── 디스플레이 단 (display-1~3) ─────────────────────────
|
|
141
|
+
h0 **위**의 세 단. 앱 화면 제목이 아니라 **랜딩·히어로처럼 크게 외치는 자리** 전용이다.
|
|
142
|
+
그래서 아래 h0~h5 와 규약이 셋 다르다 —
|
|
143
|
+
|
|
144
|
+
· **크기는 clamp(뷰포트 연속 보간)** 이다. h 단은 미디어쿼리로 세 계단을 뛰는데,
|
|
145
|
+
히어로 글자가 계단으로 뛰면 그 폭 근처에서 줄바꿈이 툭툭 달라진다. 아래
|
|
146
|
+
반응형 블록에 display 를 **다시 적지 않는 것은 그 때문**이다(적으면 계단이
|
|
147
|
+
되살아난다).
|
|
148
|
+
· **행간은 배수, 자간은 em** 이다. 크기가 연속으로 변하는데 px 로 박으면 큰 화면
|
|
149
|
+
에서 행간이 붙고 작은 화면에서 벌어진다.
|
|
150
|
+
· **글자 크기 스케일([data-font-scale])에서 뺀다.** h0~h3 도 같은 이유로 빠져
|
|
151
|
+
있다 — 이미 충분히 크고, 키우면 히어로 한 줄이 화면을 넘긴다.
|
|
152
|
+
|
|
153
|
+
h0(40px) 과 겹치지 않게 잡았다. 어느 폭에서도 h0 < display-3 < display-2 < display-1:
|
|
154
|
+
375px h0 28 · d3 34 · d2 38 · d1 44
|
|
155
|
+
768px h0 32 · d3 34 · d2 40 · d1 51
|
|
156
|
+
1024px h0 40 · d3 42 · d2 53 · d1 68
|
|
157
|
+
1440px h0 40 · d3 44 · d2 56 · d1 72 (셋 다 최댓값 도달)
|
|
158
|
+
특히 1024px 은 h0 가 32→40 으로 뛰는 지점이라, display-3 의 vw 계수(4.1)는
|
|
159
|
+
그 자리에서 40 을 넘도록 잡은 값이다. 낮추면 그 폭에서만 h0 보다 작아진다. */
|
|
160
|
+
--text-display-1-size: clamp(44px, 6.6vw, 72px); --text-display-1-line: 1.05; --text-display-1-spacing: -0.04em; --text-display-1-weight: 800; --text-display-1-weight-bold: 900;
|
|
161
|
+
--text-display-2-size: clamp(38px, 5.2vw, 56px); --text-display-2-line: 1.12; --text-display-2-spacing: -0.03em; --text-display-2-weight: 700; --text-display-2-weight-bold: 800;
|
|
162
|
+
--text-display-3-size: clamp(34px, 4.1vw, 44px); --text-display-3-line: 1.2; --text-display-3-spacing: -0.02em; --text-display-3-weight: 700; --text-display-3-weight-bold: 800;
|
|
163
|
+
|
|
140
164
|
--text-h0-size: 40px; --text-h0-line: 52px; --text-h0-spacing: -1px; --text-h0-weight: 700; --text-h0-weight-bold: 800;
|
|
141
165
|
--text-h1-size: 32px; --text-h1-line: 44px; --text-h1-spacing: -0.5px; --text-h1-weight: 700; --text-h1-weight-bold: 800;
|
|
142
166
|
--text-h2-size: 24px; --text-h2-line: 34px; --text-h2-spacing: -0.25px; --text-h2-weight: 500; --text-h2-weight-bold: 600;
|