토큰
모든 토큰은 @openiot/tokens 의 @theme 한 곳에서 정의돼요. 토큰 이름을 유지하면 컴포넌트가 자동으로 리컬러돼요.
시맨틱 컬러
| Prop | Type | Default | 설명 |
|---|---|---|---|
| --color-background | color | #ffffff | 페이지 배경 (dark: #121212) |
| --color-foreground | color | #1f1f1f | 기본 텍스트 (dark: #f7f7f7) |
| --color-muted | color | #f7f7f7 | 보조 표면 (Gray-1) |
| --color-muted-foreground | color | #6b6b6b | 보조 텍스트 (Gray-8) |
| --color-border | color | #ebebeb | 경계선 (Gray-2) |
| --color-ring | color | #3182f6 | 포커스 링 (브랜드) |
| --color-destructive | color | #ff0b0b | 위험/삭제 (Status/Error) |
| --color-success | color | #00a400 | 성공 (Status/Positive) |
| --color-warning | color | #ff850b | 경고 (Status/Alert) |
Radius
| Prop | Type | Default | 설명 |
|---|---|---|---|
| --radius-sm | length | 0.25rem | 4px |
| --radius-md | length | 0.5rem | 8px (기본 버튼/인풋) |
| --radius-lg | length | 0.75rem | 12px |
| --radius-xl | length | 1rem | 16px (카드) |
Shadow
| Prop | Type | Default | 설명 |
|---|---|---|---|
| --shadow-1 (card) | shadow | 2/2/8 · 16% | L1 카드/패널 ($Shadow-01) |
| --shadow-2 (popover) | shadow | 2/2/16 · 24% | L2 드롭다운/다이얼로그 ($Shadow-02) |
| --shadow-3 (modal) | shadow | 2/2/16 · 32% | L3 모달/시트 ($Shadow-03) |