디자인 토큰

토큰은 시각 값의 단일 소스입니다. @refineui/tokens는 Foundation 스케일을 CSS 변수와 Tailwind 유틸리티로 매핑합니다. 컴포넌트와 제품 UI는 팔레트 hex나 임의 px가 아니라 시맨틱 이름을 참조해야 합니다.

카테고리

카테고리	용도
컬러	서피스, 텍스트, 보더, 브랜드, 상태
타이포그래피	텍스트 역할 (headingMd, bodyMd, …)
스페이싱	갭, 패딩, 마진
사이징	컨트롤 높이, 아이콘, 레이아웃 스텝
라디우스	모서리 둥글기
보더	스트로크 너비
엘리베이션	그림자 / 깊이
투명도	비활성 wash, 오버레이 헬퍼
모션	지속 시간, 이징, press 스케일
Z-index	오버레이 스택킹

규칙

1. 제품 코드에서는 Foundation 원시값보다 시맨틱 별칭(backgroundSurface, sizeMedium, fast)을 우선하세요.
2. 값이 없으면 Foundation을 먼저 업데이트한 뒤 packages/tokens를 맞추세요 — 일회성 값을 만들지 마세요.
3. 컨트롤 hover / focus 모션이 일관되도록 @refineui/react/refineui.css를 한 번만 임포트하세요.