숫자 토큰 표
공유 숫자 토큰 표와 실용적인 예제입니다.
간격 견본이 있는 표시
| 토큰 | 값 | px | 표시 형식 |
|---|---|---|---|
--spacing-4xs | .125rem | 2px | |
--spacing-3xs | .25rem | 4px | |
--spacing-2xs | .375rem | 6px | |
--spacing-xs | .5rem | 8px | |
--spacing-sm | .75rem | 12px | |
--spacing-md | 1rem | 16px | |
--spacing-lg | 1.5rem | 24px | |
--spacing-xl | 2rem | 32px | |
--spacing-2xl | 3rem | 48px | |
--spacing-3xl | 4rem | 64px | |
--spacing-4xl | 6rem | 96px | |
--spacing-5xl | 8rem | 128px |
사용 위치: 레이아웃 시스템 가이드.
사용법과 인터페이스
ThemeNumberVariableTable은 프리셋에서 숫자 토큰과 단위를 읽습니다. spacing 표현은 빗금 배경과 떠 있는 객체로 실제 간격을 드러냅니다. 표는 안정적인 토큰·값 열과 조용한 행 구분선을 가지며 좁은 화면에서는 키보드로 포커스할 수 있는 영역 안에서 스크롤됩니다.
<ThemeNumberVariableTable namespace="spacing" representation="spacing" />representation prop은 선택 사항입니다. 중단점과 컨테이너는 간격 견본 없이 설명과 함께 같은 데이터 기반 표를 사용합니다. 원래 토큰 값과 참조 단위를 텍스트로 유지하고 목록은 측정용 레이아웃 데모 밖에 두세요. 숫자 표 검토 페이지에서 현재 공유 표를 확인할 수 있습니다.