Spacing
일관된 레이아웃과 간격을 위한 스페이싱 토큰. spacing-0(0px)부터 spacing-2000(80px)까지 제공.
--global-spacing-{code}
Usage
import { global } from '@featuring-corp/design-tokens';
// TypeScript에서 사용
console.log(global.spacing[400]); // "1rem"
console.log(global.spacing[800]); // "2rem"/* CSS에서 사용 */
.container {
padding: var(--global-spacing-400);
gap: var(--global-spacing-200);
}Tokens
| Code | Value | Preview |
|---|---|---|
0 | 0 | |
25 | 0.0625rem | |
50 | 0.125rem | |
100 | 0.25rem | |
150 | 0.375rem | |
200 | 0.5rem | |
250 | 0.625rem | |
300 | 0.75rem | |
400 | 1rem | |
500 | 1.25rem | |
600 | 1.5rem | |
800 | 2rem | |
1000 | 2.5rem | |
1200 | 3rem | |
1600 | 4rem | |
2000 | 5rem |
전체 토큰 목록
--global-spacing-0: 0
--global-spacing-25: 0.0625rem
--global-spacing-50: 0.125rem
--global-spacing-100: 0.25rem
--global-spacing-150: 0.375rem
--global-spacing-200: 0.5rem
--global-spacing-250: 0.625rem
--global-spacing-300: 0.75rem
--global-spacing-400: 1rem
--global-spacing-500: 1.25rem
--global-spacing-600: 1.5rem
--global-spacing-800: 2rem
--global-spacing-1000: 2.5rem
--global-spacing-1200: 3rem
--global-spacing-1600: 4rem
--global-spacing-2000: 5rem