Featuring Design System

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

CodeValuePreview
00
250.0625rem
500.125rem
1000.25rem
1500.375rem
2000.5rem
2500.625rem
3000.75rem
4001rem
5001.25rem
6001.5rem
8002rem
10002.5rem
12003rem
16004rem
20005rem

전체 토큰 목록

--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