Theming
KRDS 디자인 토큰을 shadcn/ui theme로 매핑한 방식입니다.
Base style
KRDS와 가장 가까운 shadcn 최신 스타일로 Nova를 선택했습니다.
- 과도하게 둥글지 않음
- 공공서비스 UI에 맞는 중간 밀도
- Radix 기반 shadcn 프로젝트와 호환
CSS variables
src/index.css와 registry/krds/theme/index.css가 테마의 기준입니다.
대표 매핑:
| shadcn token | KRDS token source |
|---|---|
--primary | KRDS light primary 50 #256ef4 |
--primary-foreground | white |
--foreground | KRDS gray 90 #1e2124 |
--muted | KRDS gray 5 #f4f5f6 |
--border | KRDS gray 20 #cdd1d5 |
--destructive | KRDS danger 50 #de3412 |
--radius | KRDS medium radius 계열에 맞춘 0.5rem |
Font
@import "pretendard-gov/dist/web/static/pretendard-gov-subset.css";--font-sans: "Pretendard GOV", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;Focus
KRDS 접근성 방향에 맞춰 :focus-visible에 명시적인 ring을 제공합니다.