Radius

PAI Design 모서리 반경 token과 radius scale 사용 기준을 소개해요.

PAI Design radius는 버튼, 카드, overlay처럼 표면의 모서리를 얼마나 둥글게 보여줄지 정하는 기준이에요. 같은 수준의 표면에는 같은 radius token을 반복해서 사용해야 화면이 더 일정하게 보여요.

Overview

현재 PAI Design radius는 5단계로 운영해요.

구분	예시	언제 쓰나요
XSmall radius	`radius.xs`	inline code, 아주 작은 chip, 촘촘한 메타 UI에 사용해요.
Small radius	`radius.sm`	작은 control, 보조 surface, 촘촘한 UI에 사용해요.
Medium radius	`radius.md`	기본 control과 입력 요소에 사용해요.
Large radius	`radius.lg`	Dialog, HelpBubble, 카드처럼 더 큰 surface에 사용해요.
Full radius	`radius.full`	pill 버튼, badge, 원형 icon button처럼 끝까지 둥글게 처리할 때 사용해요.

모서리 반경을 직접 숫자로 쓰기보다 tokenVars에서 radius token을 가져와 사용해요.

import { tokenVars } from "@pai-design/tokens";

const buttonRadius = tokenVars["radius.md"];
const dialogRadius = tokenVars["radius.lg"];

아주 작은 표현에는 radius.xs를, 기본 control에는 radius.md를 먼저 사용해보세요. 더 큰 surface에는 radius.lg를, pill이나 round shape에는 radius.full을 사용해요.

radius scale은 자주 쓰는 단계만 남겨두었어요. 너무 많은 단계를 두기보다, 비슷한 표면에는 같은 radius를 반복해서 쓰는 쪽이 더 중요해요.

radius.xs: inline code, 아주 작은 chip, 촘촘한 보조 메타 UI에 사용해요.
radius.sm: 작은 chip, 보조 버튼, 촘촘한 리스트 아이템처럼 비교적 작은 surface에 사용해요.
radius.md: 기본 버튼, input, field처럼 가장 자주 쓰는 control에 사용해요.
radius.lg: Dialog, AlertDialog, HelpBubble, card처럼 더 큰 표면에 사용해요.
radius.full: pill 형태 badge, segment, 원형 icon-only control처럼 끝까지 둥글게 보여줘야 하는 경우에 사용해요.

같은 크기와 역할의 surface라면 같은 radius token을 반복해서 사용해요. 그래야 컴포넌트가 달라도 한 제품처럼 보여요.