Foundations
여백
4px 격자.
키는 4px × N 입니다 — Tailwind 수치 스케일과 같은 좌표계입니다.
--spacing-00--spacing-10.25rem--spacing-20.5rem--spacing-30.75rem--spacing-41rem--spacing-51.25rem--spacing-61.5rem--spacing-71.75rem--spacing-82rem--spacing-102.5rem--spacing-123rem--spacing-143.5rem--spacing-164rem--spacing-205rem--spacing-246rem--spacing-1-50.375rem--spacing-2-50.625rem--spacing-3-50.875rem반 눈금이 있는 이유
1.5 · 2.5 · 3.5 · 7 · 14 · 20 · 24 는 빈 눈금을 메운 것입니다. 실측에서
spacing 유틸 2,045건 중 388건(19%)이 스케일 밖이었고, 그중 336건이 이 일곱 단계에 몰려 있었습니다.
이건 "이름에 값을 적어 넣는" 문제가 아닙니다. fontSize 는
13 · 15 같은 숫자 키를 거부하고 sm · base 로 접었습니다 — 거기선 이름이 역할이고 숫자가
드리프트였습니다. 반면 spacing 은 처음부터 수치 좌표계였고, 빠진 눈금을 채우는 건 새 명명
철학이 아니라 같은 격자의 완성입니다.
잔여 52건(0.5 · 9 · 11 · 18 · 28 · 32 · 60)은 승격하지 않습니다 —
style() 리터럴로 남습니다.
sprinkles
여백을 유틸로 쓸 땐 sprinkles 진입점입니다.
import { sprinkles } from '@coldsurfers/surf-ui/sprinkles'
sprinkles({ paddingY: '20', gap: '4' })sprinkles 는 배럴에 없습니다. 런타임 맵이 JS 38 kB(gzip 5.7 kB)라, 배럴에서 재수출하면
vars 한 줄 쓰려고 . 을 연 소비처까지 그걸 뭅니다(실측: index.js 3.2 → 41.2 kB).
반응형 축은 mobile · tablet · desktop 세 조건을 갖습니다.
sprinkles({ paddingX: { mobile: '4', desktop: '10' } })