Spacing & Border Tokens
YD-Design System의 간격 및 테두리 토큰입니다.
기본 토큰
| 토큰 | 값 | 설명 |
|---|---|---|
--yds-border-width | 2px | 기본 테두리 두께 |
--yds-border-radius | 8px | 기본 모서리 반경 |
--yds-content-padding | 16px | 기본 콘텐츠 패딩 |
컴포넌트별 Spacing 토큰
Button
| 토큰 | 값 |
|---|---|
--button-height | 48px |
--button-border-radius | 8px |
Table
| 토큰 | 값 |
|---|---|
--table-cell-padding-x | 16px |
--table-cell-padding-y | 10px |
--table-cell-height | 40px |
--table-header-height | 40px |
Modal
| 토큰 | sm | md | lg | xl |
|---|---|---|---|---|
| width | 320px | 480px | 640px | 800px |
| height | 400px | 600px | 800px | 900px |
CheckBox
| 토큰 | 값 |
|---|---|
--checkbox-wrapper-gap | 6px |
--checkbox-indicator-size | 20px |
--checkbox-indicator-inner-size | 12px |
--checkbox-indicator-border-radius | 2px |
Chips
| 토큰 | 값 |
|---|---|
--chips-height | 28px |
--chips-padding-x | 8px |
Card 유틸리티 클래스
border-width: 2px, border-radius: 8px, padding: 16px가 기본 적용된 카드 스타일입니다.
| Tailwind 클래스 | 테두리 색상 |
|---|---|
card-navy-50 | secondary-50 |
card-navy-100 | secondary-100 |
card-navy-200 | secondary-200 |
card-navy-300 | secondary-300 |
card-navy-400 | secondary-400 |