Radius

모서리 둥글기에 쓰는 radius 토큰 스케일과 사용 규칙

모서리 둥글기(border-radius)는 radius 토큰으로 지정합니다.

개요

radius 토큰은 이름이 그대로 px 값입니다. 2부터 36까지 있고, 원형 아바타·알약형 버튼처럼 완전히 둥근 모서리에는 full을 사용합니다. 요소가 클수록 큰 값을 사용합니다. 작은 배지에는 4, 일반 카드에는 8, 큰 패널에는 16이 적당합니다.

스케일

각 토큰의 값·모양과 권장 용도입니다.

토큰	값	용도
0	0px	둥글기를 적용하지 않는 값(기본 둥글기 초기화)
2	2px	아주 작은 둥글기(포커스 링 등 세부 요소)
4	4px	작은 컴포넌트(칩·배지·태그)
6	6px	가장 작은 크기의 컨트롤(소형 버튼 등)
8	8px	기본 컨트롤 둥글기(버튼·입력·칩 등 대부분의 인터랙티브 요소)
10	10px	중간 크기 컨트롤(아이콘 버튼·중간 카드)
12	12px	중소형 요소(프로그레스 바·큰 태그·작은 카드)
16	16px	컨테이너 단위(카드·다이얼로그·패널)
20	20px	큰 컨테이너(큰 카드·강조 표면)
24	24px	넓은 표면(큰 다이얼로그·시트)
32	32px	매우 큰 표면(장식용 컨테이너)
36	36px	특수한 대형 표면
full	9999px	완전한 원형(아바타·알약형 버튼·원형 아이콘 버튼)

사용법

DS 컴포넌트는 자체 모서리 둥글기를 스케일에 맞춰 적용합니다. 앱에서 직접 둥글기를 지정할 때는 radius 토큰을 CSS 변수로 참조합니다.

css

.card {
  border-radius: var(--ids-radii-16);
}

.avatar {
  border-radius: var(--ids-radii-full);
}

mildang-frontend 저장소에서 DS 소스를 직접 사용하는 경우에는 shorthand borderRadius="16"도 사용할 수 있습니다.

권장 사항

구분	내용
권장	이름이 곧 px 인 숫자 토큰을 사용합니다(작은 요소는 `4`, 기본은 `8`, 큰 컨테이너는 `16`).
권장	원형 아바타·알약형 버튼처럼 완전히 둥근 모서리에는 `full`을 사용합니다.
지양	티셔츠 사이즈(`md`·`lg` 등)는 레거시 별칭이므로 신규 코드에서 사용하지 않습니다.
지양	스케일에 없는 raw px(`'13px'`)를 하드코딩하지 않습니다.