Canvas
--color-bgColor-default
Page background
Primer
20 официальных семантических токенов
Всего 20 цветов
Обзор Primer
Primer, дизайн-система GitHub, структурирует цвет как функциональные примитивы: canvas, foreground, border и accent. Каждый делится на роли default, muted и emphasis.
Как использовать
Ссылайтесь на CSS-переменные вроде --fgColor-default или --bgColor-accent-emphasis. Примитивы 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