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