Radius
시각적으로 보기 좋은 디자인을 위해 Radius는 대부분의 컴포넌트에 적용됩니다.
정해진 값을 사용해 일관성을 유지하기 위해 정의됩니다.
Variables
컴포넌트에 대한 구체적인 정의가 없을 경우, 8가지 radius 값을 각 컴포넌트 크기에 따라 대응하여 사용합니다.
radius-
none
none
radius-xs
radius-sm
radius-md
radius-lg
radius-xl
radius-2xl
radius-circle
| Name | px | rem | View |
|---|---|---|---|
| --radius-none | 0 | 0 | |
| --radius-xs | 4 | 0.25 | |
| --radius-sm | 6 | 0.375 | |
| --radius-md | 8 | 0.5 | |
| --radius-lg | 12 | 0.75 | |
| --radius-xl | 16 | 1.25 | |
| --radius-2xl | 24 | 1.5 | |
| --radius-circle | 50% | 50% |