본문으로 건너뛰기
Amineslab UI

Foundation

Radius

원시 곡률과 action, form field, section, overlay에 맞춘 모서리 토큰을 구분합니다.

Primitive

Primitive는 정확한 곡률을 나타내는 재료입니다. 제품 화면과 컴포넌트는 아래 단계를 바로 고르기보다 역할이 담긴 semantic radius를 우선 사용합니다.

none--radius-nonerounded-none0
xs--radius-xsrounded-xs0.125rem
sm--radius-smrounded-sm0.25rem
md--radius-mdrounded-md0.375rem
lg--radius-lgrounded-lg0.5rem
xl--radius-xlrounded-xl0.75rem
2xl--radius-2xlrounded-2xl1rem
full--radius-fullrounded-full9999px

Semantic roles

실제 UI에서는 형태가 아니라 책임으로 radius를 선택합니다. 역할별 토큰을 사용하면 제품이 컴포넌트 내부를 알지 못해도 같은 종류의 형태를 한 번에 조정할 수 있습니다.

Action
Token
--radius-action
Tailwind
rounded-action
Primitive
--radius-mdmd · 0.375rem
USE
Button, IconButton
Form field
Token
--radius-form-field
Tailwind
rounded-form-field
Primitive
--radius-mdmd · 0.375rem
USE
Input, Select, Textarea
Content
Section
Token
--radius-section
Tailwind
rounded-section
Primitive
--radius-lglg · 0.5rem
USE
Card, Panel, Callout
Overlay
Overlay
Token
--radius-overlay
Tailwind
rounded-overlay
Primitive
--radius-xlxl · 0.75rem
USE
Dialog, Sheet

Action과 form field는 독립된 역할입니다.

둘 다 기본값은 md지만 같은 토큰으로 묶지 않습니다. 제품이 버튼과 입력 필드의 형태를 서로 다르게 바꿔도 각 역할만 독립적으로 override할 수 있습니다.

고유 geometry

역할보다 요소 자체의 구조가 형태를 결정할 때는 primitive를 직접 사용합니다. 원과 pill은 full, 직각은 none, 부모의 곡률을 따라야 하는 자식은 inherit가 기준입니다. Button group처럼 요소가 이어지는 면의 모서리는 0으로 만들고 바깥 모서리에만 해당 role의 radius를 유지합니다.

rounded-full원 · pill
rounded-none직각 구조
border-radius: inherit부모 곡률 상속
rounded-action + 0연결된 안쪽 모서리

사용 기준

권장하는 사용
  • 컴포넌트 용도에 맞게 `--radius-action`, `--radius-form-field`, `--radius-section`, `--radius-overlay`를 사용합니다.
피해야 할 사용
  • 상태 배지를 제외한 모든 요소를 pill 형태로 만들지 마세요.

검증 기준

  • action, form field, section, overlay 토큰을 해당 용도의 컴포넌트에 연결합니다.
  • 역할별 토큰을 재정의해도 다른 용도의 radius는 바뀌지 않아야 합니다.
  • 원, pill, 연결 모서리처럼 구조가 모양을 정하는 요소는 원시 geometry 값을 유지합니다.