형태와 경계
목적에 맞는 형태를 고른 뒤 Tinyrack 반경, 테두리, 포커스 토큰으로 경계를 분명하게 하고 중첩 표면을 조화롭게 만들어요.
목적에 맞는 형태 선택
- 경계가 선명해야 하는 작은 컨트롤에는
sm또는md를 사용해요. - 구별되는 패널, 팝오버, 오버레이 표면에는
lg또는xl을 사용하세요. - 캡슐, 상태, 아바타, 원형 자체가 역할을 전달할 때만
full을 사용해요.
반경과 테두리 스케일
| 반경 | 값 | CSS 변수 |
|---|---|---|
xs | 0.125rem | --tinyrack-radius-xs |
sm | 0.25rem | --tinyrack-radius-sm |
md | 0.375rem | --tinyrack-radius-md |
lg | 0.5rem | --tinyrack-radius-lg |
xl | 0.75rem | --tinyrack-radius-xl |
full | 9999px | --tinyrack-radius-full |
일반 경계에는 default, 더 강한 구조에는 strong, 좁은 강조선에는 accent를 사용해요. 각각 --tinyrack-border-width-default, -strong, -accent에 연결돼요.
| 테두리 | 값 |
|---|---|
default | 1px |
strong | 2px |
accent | 3px |
중첩 형태 규칙
안쪽 표면은 컨테이너와 같거나 더 작은 반경을 사용하세요. 안쪽 여백과 테두리 두께도 고려해야 해요. 바깥 경계보다 더 둥글어 보이는 사각형을 안에 넣지 마세요.
중첩 콘텐츠
형태를 따르는 포커스
포커스 윤곽선은 상호작용 요소에 적용해 해당 요소의 반경을 따르게 하세요. Tinyrack은 --tinyrack-focus-width (2px)와 --tinyrack-focus-offset (2px)을 사용해요. 윤곽선을 잘라 내거나 컨트롤 경계를 바꾸는 형태로 대체하지 마세요.
적용 예시
준비
동작은 컨트롤 반경을, 상태는 의미가 있는 캡슐 형태를 사용해요.구현과 참고
도구에서는 tinyrackRadii와 tinyrackBorders를 사용해요. CSS에서는 --tinyrack-radius-*, --tinyrack-border-width-*, --tinyrack-focus-*를, Tailwind에서는 대응하는 rounded-tinyrack-*, 테두리, 윤곽선 유틸리티를 사용하세요. 컴포넌트 범위에서는 --tr-* 변수를 재정의해요.