모양과 선
모서리를 얼마나 둥글게 하고 선을 어떤 색과 두께로 그릴지 정한다. 그림자와 쌓임 순서는 깊이 문서에 있다.
모서리
1
1_5
2
2_5
3
full
circle
| 토큰 | 값 | 비고 |
|---|---|---|
| --nui-radius-1 | 0.25rem | 4px — chip · checkbox · tag (small) |
| --nui-radius-1_5 | 0.375rem | 6px — button · input · select (medium 40~48) |
| --nui-radius-2 | 0.5rem | 8px — toast (medium 56~64) |
| --nui-radius-2_5 | 0.625rem | 10px — accordion box · card (large) |
| --nui-radius-3 | 0.75rem | 12px — dialog · menu · bottom sheet (xlarge, max) |
| --nui-radius-full | 9999px | — |
| --nui-radius-circle | 50% | — |
radius-circle(50%)과 radius-full(9999px)은 다르다. 둘 다 "완전히 둥근"처럼 보이지만 50% 는 가로세로 비율을 따라간다. Switch 트랙(40×24)에 쓰면 타원이 된다. 정사각형이 아니면 radius-full 을 쓴다.선 색
굵기가 아니라 한 화면에 몇 번 나오는지로 나눈다. 많이 나올수록 연하다. 리스트 구분선이 진하면 화면이 줄무늬처럼 보인다.
형태선border-form
의미경계선border-section
구분선border-divider
위에서 아래로 갈수록 연해진다. 자주 나오는 선일수록 조용해야 한다.
| 이 선이 화면에 | 토큰 | 예 |
|---|---|---|
| 한 요소에 하나 형태선 | --nui-border-form | 카드 · 패널 · 팝업의 외곽 |
| 한 화면에 한두 번 의미경계선 | --nui-border-section | 섹션 사이, 헤더와 본문 경계 |
| 한 화면에 여러 번 구분선 | --nui-border-divider | 리스트 행, 아코디언 항목 |
뒤의 둘은 반투명이다. 구분선은 어떤 배경 위에 놓일지 모른다. 불투명 회색은 배경에 따라 튀지만 반투명은 아래 색과 섞인다.
입력 컨트롤은 이 표를 쓰지 않는다.
control-border 가 따로 있고 형태선보다 한 단계 진하다. 누를 수 있는 것과 가만히 있는 것을 진하기로 구분한다. 상태별로 무엇을 쓰는지는 상태 문서에 있다.| 토큰 | 값 | 비고 | |
|---|---|---|---|
| --nui-border-form | var(--nui-color-gray-6) | 별칭 | |
| --nui-border-section | var(--nui-color-gray-a5) | 별칭 | |
| --nui-border-divider | var(--nui-color-gray-a3) | 별칭 | |
| --nui-border-brand | var(--nui-color-brand-7) | 별칭 | |
| --nui-border-brand-subtle | var(--nui-color-brand-6) | 별칭 |
두께
색과 달리 두께는 연쇄하지 않는다. 1px 은 그냥 1px 이고, 하나를 바꿔도 다른 데로 퍼지지 않는다. 그래서 역할 계층 없이 스케일만 둔다.
| 토큰 | 값 | 비고 |
|---|---|---|
| --nui-border-width-1 | 1px | — |
| --nui-border-width-2 | 2px | — |
컴포넌트는 자기 두께 변수로 이 값을 덮는다. border 를 실제로 쓰는 컴포넌트에만 변수가 있다. Toast 와 Tooltip 은 테두리를 쓰지 않아 두께 변수도 없다.
투명한 테두리에도 두께가 적용된다. Popup 닫기 버튼과 Datepicker 날짜 칸은
border: … solid transparent 로 자리만 잡아둔 곳이다. 여기를 빼면 두께를 2px 로 바꿨을 때 이 자리만 1px 로 남아 선택하는 순간 요소가 밀린다.