Colors
테마 색상 팔레트와 시맨틱 토큰을 확인합니다.
Semantic Colors
테마 시맨틱 컬러 토큰
background
--color-background
hsl(40 30% 95%)
페이지 배경 (미색/크림)
foreground
--color-foreground
hsl(30 10% 15%)
기본 텍스트
card
--color-card
hsl(0 0% 100%)
카드 배경
popover
--color-popover
hsl(0 0% 100%)
팝오버 배경
primary
--color-primary
hsl(220 60% 38%)
주요 버튼/액센트 (네이비 블루)
secondary
--color-secondary
hsl(40 20% 93%)
보조 배경/버튼
muted
--color-muted
hsl(40 20% 93%)
비활성 배경
accent
--color-accent
hsl(40 20% 93%)
강조 배경
destructive
--color-destructive
hsl(0 55% 55%)
위험/삭제 (레드)
Foreground Pairing
배경색과 전경색 조합
card
card-foreground 텍스트
popover
popover-foreground 텍스트
primary
primary-foreground 텍스트
secondary
secondary-foreground 텍스트
muted
muted-foreground 텍스트
accent
accent-foreground 텍스트
destructive
destructive-foreground 텍스트
Functional Colors
기능별 색상 (Success, Warning, Error, Info)
성공 상태
경고 상태
오류 상태 (destructive)
정보 안내
Utility Colors
Border, Input, Ring 등 유틸리티 색상
border
--color-border
hsl(40 15% 87%)
테두리
input
--color-input
hsl(40 15% 87%)
입력 필드 테두리
ring
--color-ring
hsl(220 60% 38%)
포커스 링 (네이비 블루)
Gray Scale
Muted, Border, Input 계열 색상 비교