Radius
Exem UI 디자인 시스템의 Radius 토큰입니다. 4단계로 구성되며, UI 요소의 모서리 라운딩을 일관되게 적용합니다.
Preview
각 radius 토큰의 시각적 프리뷰입니다.
미세한 라운딩. 작은 요소, Tag, Badge 등
기본 라운딩. TextField, Button 등
강한 라운딩. Card, Panel, 코드 블록 등
가장 강한 라운딩. 큰 컨테이너, Modal 등
Scale
각 radius 토큰의 CSS 값입니다. rounded-* 유틸리티 클래스로 적용합니다.
| Token | CSS Variable | Value | Preview |
|---|---|---|---|
| --radius-weak | 2px | ||
| --radius-medium | 4px | ||
| --radius-strong | 6px | ||
| --radius-hard | 8px |
Full Rounding
디자인 토큰에는 포함되지 않지만, Tailwind native rounded-full도 함께 사용하고 있습니다.
Avatar, Pill 버튼, 원형 아이콘 버튼 등 완전한 원형이 필요한 경우 사용합니다.
Usage
Radius 토큰의 일반적인 사용 사례입니다.
Consistency
같은 레벨의 컨텍스트 안에서는 동일한 radius 토큰을 사용하여 시각적 일관성을 유지합니다.
Small Elements
weak ~ medium — Tag, Badge, Chip, TextField, Button 등 크기가 작은 UI 요소에 사용합니다. 과도한 라운딩은 요소를 불안정하게 보이게 합니다.
Large Containers
strong ~ hard — Card, Panel, Modal, 코드 블록 등 큰 컨테이너에 사용합니다. 넓은 영역에서 부드러운 외곽선을 제공합니다.
Nesting
중첩된 요소에서는 바깥 요소보다 안쪽 요소의 radius를 한 단계 낮추는 것이 자연스럽습니다.
예를 들어, Card(rounded-strong) 내부의 Button은 rounded-medium을 사용합니다.
Token
@exem-ui/core에서 제공하는 TypeScript 토큰 객체입니다.
radius
rounded-* 유틸리티의 border-radius 매핑
import { radius } from '@exem-ui/core/tailwindcss';
// radius = {
// 'weak' '2px',
// 'medium' '4px',
// 'strong' '6px',
// 'hard' '8px',
// }