Radius
컴포넌트의 모서리 둥글기를 위한 토큰. radius-50(2px), 100(4px), 200(8px), 300(12px), 400(16px), full(999px) 제공.
--global-radius-{code}
Usage
import { global } from '@featuring-corp/design-tokens';
// TypeScript에서 사용
console.log(global.radius[200]); // "8px"
console.log(global.radius.full); // "999px"/* CSS에서 사용 */
.button {
border-radius: var(--global-radius-100);
}
.avatar {
border-radius: var(--global-radius-full);
}Tokens
| Code | Value | Preview |
|---|---|---|
50 | 2px | |
100 | 4px | |
200 | 8px | |
300 | 12px | |
400 | 16px | |
full | 999px |
전체 토큰 목록
--global-radius-50: 2px
--global-radius-100: 4px
--global-radius-200: 8px
--global-radius-300: 12px
--global-radius-400: 16px
--global-radius-full: 999px