테두리·모서리·표면
작성 중모서리 반경과 표면 단계
모서리
버튼·입력·선택 상자 같은 컨트롤은 radius.md(6px), 선택 상자·Combobox의 펼친 목록은 입력에 딸려 있어 같은 radius.md(6px)입니다. 카드·패널·메뉴는 radius.lg(10px), 대화상자·명령 검색 패널은 radius.xl(16px)이고, 16px 패널 안의 검색 입력은 radius.lg(10px)입니다. 6px 틀 안의 요소(탭 항목, 목록 항목, 입력 묶음 안 버튼 등)는 radius.sm(4px)입니다. shadcn의 --radius는 radius.lg에 연결되어 있습니다.
sm
md
lg
xl
| 토큰 | 값 | 설명 |
|---|---|---|
radius.sm--ds-radius-sm | 4px | 컨트롤 안쪽 요소(탭 항목, 입력 묶음 안 버튼·단축키) |
radius.md--ds-radius-md | 6px | 버튼·입력·선택 상자 등 컨트롤과 목록 항목 |
radius.lg--ds-radius-lg | 10px | 카드·패널·펼친 목록 |
radius.xl--ds-radius-xl | 16px | 대화상자·명령 검색·대형 프리뷰 |
표면과 테두리
오른쪽 위에서 색 모드·크기 모드를 바꾸면 이 화면의 견본도 함께 바뀝니다.
| 토큰 | 다크 (기본) | 라이트 | 설명 |
|---|---|---|---|
surface.canvas--ds-surface-canvas | #111214 {neutral.950} | #ffffff {neutral.0} | |
surface.sidebar--ds-surface-sidebar | #17181b {neutral.850} | #f6f6f8 {neutral.100} | |
surface.panel--ds-surface-panel | #151619 {neutral.900} | #fafafb {neutral.50} | |
surface.raised--ds-surface-raised | #202126 {neutral.825} | #eeeef2 {neutral.150} | |
surface.hover--ds-surface-hover | #24252b {neutral.800} | #e9e9ed {neutral.200} | |
surface.scrim--ds-surface-scrim | #111214 {neutral.950} | #111214 {neutral.950} | 대화상자 뒤를 덮는 막. 불투명도는 쓰는 곳에서 준다 |
border.default--ds-border-default | #292b31 {neutral.750} | #e3e3e8 {neutral.250} | |
border.strong--ds-border-strong | #3a3c44 {neutral.700} | #c9cad2 {neutral.300} |