간격과 크기
작성 중4px 단위 간격, 컨트롤·행 높이
간격
4px 단위입니다.
| 토큰 | 값 | 설명 |
|---|---|---|
space.1--ds-space-1 | 4px | |
space.2--ds-space-2 | 8px | |
space.3--ds-space-3 | 12px | |
space.4--ds-space-4 | 16px | |
space.6--ds-space-6 | 24px | |
space.8--ds-space-8 | 32px | |
space.12--ds-space-12 | 48px | |
space.16--ds-space-16 | 64px | |
space.24--ds-space-24 | 96px |
컨트롤과 행 높이
Button·Input·Select의 높이가 control.height를 따릅니다. 오른쪽 위에서 색 모드·크기 모드를 바꾸면 이 화면의 견본도 함께 바뀝니다.
sm
md
lg
row
| 토큰 | 기본 | 큰 글씨 | 설명 |
|---|---|---|---|
control.height.sm--ds-control-height-sm | 28px {size.28} | 36px {size.36} | |
control.height.md--ds-control-height-md | 32px {size.32} | 44px {size.44} | |
control.height.lg--ds-control-height-lg | 40px {size.40} | 48px {size.48} | |
row.height--ds-row-height | 44px {size.44} | 56px {size.56} |
정하지 않은 것
제안서의 조밀한 행 높이(36px)는 아직 없습니다. 필요하면 크기 모드에 compact를 추가합니다.