Colors

@choblue/ui 디자인 시스템의 색상 토큰입니다.

Color Palettes

각 팔레트는 100–900 단계로 구성됩니다. Neutral은 50–950까지 지원합니다.

Neutral

50#F6F7F9

100#ECEFF3

200#DCE1EA

300#BFC8D9

400#94A0B8

500#6A7895

600#536079

700#3C475D

800#2B3445

900#1D2330

950#121721

Primary

100#ECD6FF

200#D7ADFF

300#BE84FF

400#A866FF

500#8333FF

600#6525DB

700#4B19B7

800#341093

900#23097A

Success

100#F1FDF2

200#CCFBD5

300#BFF9D1

400#6BF3A1

500#10E57A

600#056F44

700#03583E

800#024437

900#023A35

Info

100#D9FEFD

200#B3FBFE

300#8CF1FE

400#70E3FD

500#41CDFC

600#2FA2D8

700#207BB5

800#145892

900#0C3F78

Warning

100#FFF4D8

200#FFE6B2

300#FFD58B

400#FFC46F

500#FFA83F

600#DB842E

700#B7641F

800#934814

900#7A340C

Danger

100#FFF7F2

200#FFDDCE

300#FFD0C2

400#FF826E

500#FF1B0E

600#A01108

700#760F0A

800#530D09

900#360A08

Semantic Tokens

배경, 전경, 보더 등 UI의 역할에 따라 매핑되는 시맨틱 토큰입니다. 다크 모드에서 자동으로 전환됩니다.

background

foreground

surface

muted

muted-foreground

border

input

ring

overlay

disabled

disabled-foreground

Token	용도
`background`	페이지 배경
`foreground`	기본 텍스트
`surface`	섹션 배경
`muted` / `muted-foreground`	보조 텍스트
`border`	기본 보더
`input`	입력 필드 보더
`ring`	포커스 링
`overlay`	모달 백드롭
`disabled` / `disabled-foreground`	비활성 상태

Component Tokens

컴포넌트별로 사용되는 전용 색상 토큰입니다.

primary

primary-foreground

secondary

secondary-foreground

danger

danger-foreground

accent

accent-foreground

card

card-foreground

popover

popover-foreground

Token	용도
`primary` / `primary-foreground`	주요 액션 (Button, Badge)
`secondary` / `secondary-foreground`	보조 액션
`danger` / `danger-foreground`	위험/삭제 액션
`accent` / `accent-foreground`	호버/강조
`card` / `card-foreground`	카드 컨테이너
`popover` / `popover-foreground`	팝오버/드롭다운

사용법


{/* Tailwind 유틸리티로 직접 사용 */}
<div className="bg-primary text-primary-foreground">Primary</div>
<div className="bg-background text-foreground border border-border">Surface</div>
 
{/* 팔레트 단계 직접 참조 */}
<span className="text-danger-600">Error message</span>
<div className="bg-success-100 text-success-700">Success badge</div>