Radius
디자인 시스템의 border-radius 토큰을 확인할 수 있습니다.
Radius는 UI 컴포넌트의 모서리 곡률(border-radius)을 일관되게 적용하기 위한 토큰입니다.
사용 방법
Tailwind의 rounded-* 유틸리티로 바로 사용할 수 있도록 이름 기반 radius 토큰(--radius-xs ~ --radius-4xl)을 제공합니다.
- 사용 예:
rounded-xs(border-radius: var(--radius-xs)→2px)rounded-sm(border-radius: var(--radius-sm)→4px)rounded-md(border-radius: var(--radius-md)→6px)rounded-lg(border-radius: var(--radius-lg)→8px)rounded-xl(border-radius: var(--radius-xl)→12px)rounded-2xl(border-radius: var(--radius-2xl)→16px)rounded-3xl(border-radius: var(--radius-3xl)→24px)rounded-4xl(border-radius: var(--radius-4xl)→32px)- 필요 시 arbitrary value도 가능:
rounded-[var(--radius-12)]
Radius 토큰
| 이름(token) | 값 |
|---|---|
--radius-xs | var(--radius-2) (2px) |
--radius-sm | var(--radius-4) (4px) |
--radius-md | var(--radius-6) (6px) |
--radius-lg | var(--radius-8) (8px) |
--radius-xl | var(--radius-12) (12px) |
--radius-2xl | var(--radius-16) (16px) |
--radius-3xl | var(--radius-24) (24px) |
--radius-4xl | var(--radius-32) (32px) |
숫자 기반 토큰(--radius-{숫자})도 그대로 유지합니다. (현재 global.css 기준)