Foundations

Colors

모든 색은 CSS 변수 토큰으로 정의되어 테마(light/dark/HCB/HCW)에 따라 자동 전환됩니다. 칩을 클릭하면 현재 테마 기준 실제 색 값이 클립보드에 복사됩니다.

Base

표면·텍스트 기본 토큰.

주요 액션·강조 색.

의미별 상태 색 — 수치·배지·알림.

차트 시리즈 색.

사이드바 전용 토큰.

토큰은 bg-* / text-* / border-* Tailwind 유틸로 사용합니다. 테마를 전환한 뒤 다시 칩을 클릭하면 해당 테마의 값이 복사됩니다.

색은 모두 CSS 변수입니다. 컴포넌트(.tsx)나 globals.css 는 건드리지 말고 토큰 값만 바꾸세요.

1
토큰 값 수정
기본 색은 src/app/tokens.css 에 정의돼 있습니다. 여기서 :root(라이트) · .dark · .theme-hcb · .theme-hcw 의 변수 값만 바꾸면 모든 컴포넌트에 일괄 반영됩니다. 값은 oklch 권장(테마 일관성).
2
건드리지 말 것
globals.css 의 @theme · @layer 와 registry/ui/*.tsx 컴포넌트는 공통 본체라 재다운로드 시 덮어써집니다. 직접 수정하지 마세요.