Foundations
Radius
모서리 반경은 6px부터 36px까지 9단입니다. 컴포넌트마다 하나의 단계를 골라 쓰고, 같은 계층에서는 반경을 섞지 않습니다.
값은 캔버스의 radius-* 토큰을 그대로 옮겼습니다. Tailwind의 이름과도 맞춰 두어서
rounded-sm이 8px, rounded-md가 12px, rounded-lg가 14px입니다.
스케일
radius-none
0px
radius-xs
6px
radius-sm
8px
radius-md
12px
radius-lg
14px
radius-xl
20px
radius-2xl
25px
radius-3xl
31px
radius-4xl
36px
radius-full
9999px
컴포넌트별 기본값
| 컴포넌트 | token | 값 |
|---|---|---|
| Input, Textarea | radius-sm | 8px |
| Button, Card, Menu | radius-md | 12px |
| Dialog, Sheet, Toast | radius-lg | 14px |
| Badge, Chip, Avatar | radius-full | 9999px |
| Checkbox | 5px | 캔버스 예외 |
중첩
표면 안에 표면을 넣을 때는 안쪽 반경을 바깥보다 한 단계 작게 잡습니다. 같은 값을 쓰면 두 모서리가 평행하게 보여 계층이 흐려집니다.