Canvas
--color-bgColor-default
Page background
Primer
20개의 공식 시맨틱 토큰
총 20가지 색상
개요 Primer
Primer는 GitHub의 디자인 시스템으로, 색을 canvas·foreground·border·accent 같은 기능형 프리미티브로 구성합니다. 각각은 default·muted·emphasis 역할로 나뉩니다.
사용 방법
--fgColor-default나 --bgColor-accent-emphasis 같은 CSS 변수를 참조하세요. Primer의 프리미티브는 라이트·다크 테마에서 의미를 안정적으로 유지합니다.
Canvas inset
--color-bgColor-inset
Recessed wells and code blocks
Neutral muted
--color-bgColor-neutral-muted
Muted section background
Foreground
--color-fgColor-default
Default text
Foreground muted
--color-fgColor-muted
Secondary text
Foreground disabled
--color-fgColor-disabled
Placeholder text
Foreground on emphasis
--color-fgColor-onEmphasis
Text on emphasis backgrounds
Accent
--color-bgColor-accent-emphasis
Links, selected nav items
Accent foreground
--color-fgColor-accent
Link text color
Accent muted
--color-bgColor-accent-muted
Hover states and inline backgrounds
Success
--color-bgColor-success-emphasis
Open states and confirm buttons
Attention
--color-bgColor-attention-emphasis
Caution highlights
Severe
--color-bgColor-severe-emphasis
Urgent warnings
Danger
--color-bgColor-danger-emphasis
Closed states and destructive actions
Done
--color-bgColor-done-emphasis
Merged / complete states
Sponsors
--color-bgColor-sponsors-emphasis
Sponsor hearts and buttons
Neutral emphasis
--color-bgColor-neutral-emphasis
Gray buttons and counters
Border default
--color-border-default
Primary borders
Border muted
--color-border-muted
Secondary borders
Border emphasis
--color-border-emphasis
Strong contrast borders
일치하는 색상이 없습니다
출처: Primer · @primer/primitives 11.10.0 light