Irodori彩り

Primer

20 个官方语义 token

共 20 种颜色

简介 Primer

Primer 是 GitHub 的设计系统,将颜色组织为功能性原语:canvas、foreground、border、accent。每种原语又分为 default、muted、emphasis 三种角色。

如何使用

引用 --fgColor-default 或 --bgColor-accent-emphasis 之类的 CSS 变量。Primer 的原语让语义在明暗主题间保持稳定。

官方文档

Canvas

--color-bgColor-default

Page background

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