fix: grid-wrap-full을 아트보드 폭이 아니라 100%로 둔다
`grid-wrap-*`는 Figma 아트보드 폭이 그대로 들어온 값이다. `full`은 "부모 폭을 채운다"는 뜻인데 모바일 38rem(380px)·PC 192rem(1920px)으로 잡혀 있어 그보다 좁은 창에서는 넘치고 넓은 창에서는 덜 찬다. 두 모드 모두 `100%`로 바꾼다. 나머지 세 단계(default·sm·xsm)는 그대로 둔다 — 최대 폭 단계로는 쓸 수 있는 값이고, 유일한 소비처인 `_fox-snackbar.scss`도 `max-inline-size`로 쓰고 있다. 생성 파일만 고치면 다음 재export에서 지워지므로 변환기(`build-tokens.py`)에 `DEV_OVERRIDES`를 두고 거기서 치환한다. 시안 값을 CSS에서 그대로 쓸 수 없는 토큰이 더 나오면 같은 표에 붙인다. Co-Authored-By: Claude Opus 5
@c4525fbf96d1482de142bee30e80c8a3d0551ca0
--- @fox/styles/tokens/_responsive.scss
+++ @fox/styles/tokens/_responsive.scss
... | ... | @@ -40,7 +40,7 @@ |
| 40 | 40 |
form-height-sm: 2.8rem, |
| 41 | 41 |
form-height-md: 4rem, |
| 42 | 42 |
form-height-lg: 4.8rem, |
| 43 |
- grid-wrap-full: 38rem, |
|
| 43 |
+ grid-wrap-full: 100%, |
|
| 44 | 44 |
grid-wrap-default: 34.8rem, |
| 45 | 45 |
grid-wrap-sm: 32rem, |
| 46 | 46 |
grid-wrap-xsm: 28rem, |
... | ... | @@ -118,7 +118,7 @@ |
| 118 | 118 |
form-height-sm: 2.8rem, |
| 119 | 119 |
form-height-md: 4rem, |
| 120 | 120 |
form-height-lg: 5.6rem, |
| 121 |
- grid-wrap-full: 192rem, |
|
| 121 |
+ grid-wrap-full: 100%, |
|
| 122 | 122 |
grid-wrap-default: 155.2rem, |
| 123 | 123 |
grid-wrap-sm: 108rem, |
| 124 | 124 |
grid-wrap-xsm: 80rem, |
--- @fox/tools/build-tokens.py
+++ @fox/tools/build-tokens.py
... | ... | @@ -206,6 +206,17 @@ |
| 206 | 206 |
resp_pc = OrderedDict((name_responsive(p), css_len(n["$value"])) for p, n in raw["pc"].items()) |
| 207 | 207 |
assert list(resp_mobile) == list(resp_pc) |
| 208 | 208 |
|
| 209 |
+# Figma 값을 그대로 쓸 수 없는 토큰. 시안의 값은 **아트보드 폭**이라 CSS에서는 뜻이 달라진다. |
|
| 210 |
+# 재export해도 이 치환이 유지되도록 변환기가 들고 있는다(생성 파일을 손으로 고치면 지워진다). |
|
| 211 |
+DEV_OVERRIDES = {
|
|
| 212 |
+ # `full`은 "화면을 채운다"는 뜻인데 Figma에서는 아트보드 폭(모바일 380px / PC 1920px)으로 |
|
| 213 |
+ # 잡혀 있다. 그대로 쓰면 그보다 좁은 창에서 넘치고 넓은 창에서는 덜 찬다. |
|
| 214 |
+ "grid-wrap-full": "100%", |
|
| 215 |
+} |
|
| 216 |
+for _key, _value in DEV_OVERRIDES.items(): |
|
| 217 |
+ resp_mobile[_key] = _value |
|
| 218 |
+ resp_pc[_key] = _value |
|
| 219 |
+ |
|
| 209 | 220 |
BREAKPOINT_PC = "768px" |
| 210 | 221 |
|
| 211 | 222 |
|
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?