임동욱 임동욱 08-20
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
+++ @fox/styles/tokens/_responsive.scss
@@ -40,7 +40,7 @@
   form-height-sm: 2.8rem,
   form-height-md: 4rem,
   form-height-lg: 4.8rem,
-  grid-wrap-full: 38rem,
+  grid-wrap-full: 100%,
   grid-wrap-default: 34.8rem,
   grid-wrap-sm: 32rem,
   grid-wrap-xsm: 28rem,
@@ -118,7 +118,7 @@
   form-height-sm: 2.8rem,
   form-height-md: 4rem,
   form-height-lg: 5.6rem,
-  grid-wrap-full: 192rem,
+  grid-wrap-full: 100%,
   grid-wrap-default: 155.2rem,
   grid-wrap-sm: 108rem,
   grid-wrap-xsm: 80rem,
@fox/tools/build-tokens.py
--- @fox/tools/build-tokens.py
+++ @fox/tools/build-tokens.py
@@ -206,6 +206,17 @@
 resp_pc = OrderedDict((name_responsive(p), css_len(n["$value"])) for p, n in raw["pc"].items())
 assert list(resp_mobile) == list(resp_pc)
 
+# Figma 값을 그대로 쓸 수 없는 토큰. 시안의 값은 **아트보드 폭**이라 CSS에서는 뜻이 달라진다.
+# 재export해도 이 치환이 유지되도록 변환기가 들고 있는다(생성 파일을 손으로 고치면 지워진다).
+DEV_OVERRIDES = {
+    # `full`은 "화면을 채운다"는 뜻인데 Figma에서는 아트보드 폭(모바일 380px / PC 1920px)으로
+    # 잡혀 있다. 그대로 쓰면 그보다 좁은 창에서 넘치고 넓은 창에서는 덜 찬다.
+    "grid-wrap-full": "100%",
+}
+for _key, _value in DEV_OVERRIDES.items():
+    resp_mobile[_key] = _value
+    resp_pc[_key] = _value
+
 BREAKPOINT_PC = "768px"
 
 
Add a comment
List