UNPKG

@primer/primitives

Version:

Typography, spacing, and color primitives for Primer design system

github.com/primer/primitives

primer/primitives

270 lines • 18.5 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
{ "--topicTag-borderColor": "var(--color-topic-tag-border)", "--highlight-neutral-bgColor": "var(--color-search-keyword-hl)", "--page-header-bgColor": "var(--color-page-header-bg)", "--diffBlob-addition-fgColor-text": "var(--color-diff-blob-addition-fg)", "--diffBlob-addition-fgColor-num": "var(--color-diff-blob-addition-num-text)", "--diffBlob-addition-bgColor-num": "var(--color-diff-blob-addition-num-bg)", "--diffBlob-addition-bgColor-line": "var(--color-diff-blob-addition-line-bg)", "--diffBlob-addition-bgColor-word": "var(--color-diff-blob-addition-word-bg)", "--diffBlob-deletion-fgColor-text": "var(--color-diff-blob-deletion-fg)", "--diffBlob-deletion-fgColor-num": "var(--color-diff-blob-deletion-num-text)", "--diffBlob-deletion-bgColor-num": "var(--color-diff-blob-deletion-num-bg)", "--diffBlob-deletion-bgColor-line": "var(--color-diff-blob-deletion-line-bg)", "--diffBlob-deletion-bgColor-word": "var(--color-diff-blob-deletion-word-bg)", "--diffBlob-hunk-bgColor-num": "var(--color-diff-blob-hunk-num-bg)", "--diffBlob-expander-iconColor": "var(--color-diff-blob-expander-icon)", "--diffStat-addition-bgColor": "var(--bgColor-success-emphasis)", "--codeMirror-fgColor": "var(--color-codemirror-text)", "--codeMirror-bgColor": "var(--color-codemirror-bg)", "--codeMirror-gutters-bgColor": "var(--color-codemirror-gutters-bg)", "--codeMirror-gutterMarker-fgColor-default": "var(--color-codemirror-guttermarker-text)", "--codeMirror-gutterMarker-fgColor-muted": "var(--color-codemirror-guttermarker-subtle-text)", "--codeMirror-lineNumber-fgColor": "var(--color-codemirror-linenumber-text)", "--codeMirror-cursor-fgColor": "var(--color-codemirror-cursor)", "--codeMirror-selection-bgColor": "var(--color-codemirror-selection-bg)", "--codeMirror-activeline-bgColor": "var(--color-codemirror-activeline-bg)", "--codeMirror-matchingBracket-fgColor": "var(--color-codemirror-matchingbracket-text)", "--codeMirror-lines-bgColor": "var(--color-codemirror-lines-bg)", "--codeMirror-syntax-fgColor-comment": "var(--color-codemirror-syntax-comment)", "--codeMirror-syntax-fgColor-constant": "var(--color-codemirror-syntax-constant)", "--codeMirror-syntax-fgColor-entity": "var(--color-codemirror-syntax-entity)", "--codeMirror-syntax-fgColor-keyword": "var(--color-codemirror-syntax-keyword)", "--codeMirror-syntax-fgColor-storage": "var(--color-codemirror-syntax-storage)", "--codeMirror-syntax-fgColor-string": "var(--color-codemirror-syntax-string)", "--codeMirror-syntax-fgColor-support": "var(--color-codemirror-syntax-support)", "--codeMirror-syntax-fgColor-variable": "var(--color-codemirror-syntax-variable)", "--header-fgColor-default": "var(--color-header-text)", "--header-fgColor-logo": "var(--color-header-logo)", "--header-bgColor": "var(--color-header-bg)", "--header-borderColor-divider": "var(--color-header-divider)", "--headerSearch-bgColor": "var(--color-header-search-bg)", "--headerSearch-borderColor": "var(--color-header-search-border)", "--avatar-bgColor": "var(--color-avatar-bg)", "--avatar-borderColor": "var(--color-avatar-border)", "--avatar-shadow": "var(--color-avatar-child-shadow)", "--avatarStack-fade-bgColor-default": "var(--color-avatar-stack-fade)", "--avatarStack-fade-bgColor-muted": "var(--color-avatar-stack-fade-more)", "--control-bgColor-rest": "var(--color-btn-bg)", "--control-bgColor-hover": "var(--color-btn-hover-bg)", "--control-bgColor-active": "var(--color-btn-selected-bg)", "--control-bgColor-disabled": "var(--color-input-disabled-bg)", "--control-bgColor-selected": "var(--color-btn-selected-bg)", "--control-fgColor-rest": "var(--color-fg-default)", "--control-fgColor-placeholder": "var(--color-fg-subtle)", "--control-fgColor-disabled": "var(--color-primer-fg-disabled)", "--control-borderColor-rest": "var(--color-btn-border)", "--control-borderColor-emphasis": "var(--color-switch-knob-border)", "--control-borderColor-disabled": "var(--color-btn-border)", "--control-borderColor-selected": "var(--color-btn-bg)", "--control-borderColor-success": "var(--color-success-emphasis)", "--control-borderColor-danger": "var(--color-danger-emphasis)", "--control-borderColor-warning": "var(--color-attention-emphasis)", "--control-iconColor-rest": "var(--color-fg-muted)", "--control-transparent-bgColor-rest": "transparent", "--control-transparent-bgColor-hover": "var(--color-action-list-item-default-hover-bg)", "--control-transparent-bgColor-active": "var(--color-action-list-item-default-active-bg)", "--control-transparent-bgColor-disabled": "var(--color-action-list-item-default-selected-bg)", "--control-transparent-bgColor-selected": "var(--color-action-list-item-default-selected-bg)", "--control-transparent-borderColor-rest": "transparent", "--control-transparent-borderColor-hover": "var(--color-action-list-item-default-hover-border)", "--control-transparent-borderColor-active": "var(--color-action-list-item-default-active-border)", "--control-danger-fgColor-rest": "var(--color-danger-fg)", "--control-danger-fgColor-hover": "var(--color-action-list-item-danger-hover-text)", "--control-danger-bgColor-hover": "var(--color-action-list-item-danger-hover-bg)", "--control-danger-bgColor-active": "var(--color-action-list-item-danger-active-bg)", "--control-checked-bgColor-rest": "var(--color-switch-track-checked-bg)", "--control-checked-bgColor-hover": "var(--color-switch-track-checked-hover-bg)", "--control-checked-bgColor-active": "var(--color-switch-track-checked-active-bg)", "--control-checked-bgColor-disabled": "var(--color-switch-track-disabled-bg)", "--control-checked-fgColor-rest": "var(--color-switch-track-checked-fg)", "--control-checked-fgColor-disabled": "var(--color-switch-track-checked-disabled-fg)", "--control-checked-borderColor-rest": "var(--color-switch-track-checked-bg)", "--control-checked-borderColor-hover": "var(--color-switch-track-checked-hover-bg)", "--control-checked-borderColor-active": "var(--color-switch-track-checked-active-bg)", "--control-checked-borderColor-disabled": "var(--color-switch-track-disabled-bg)", "--controlTrack-bgColor-rest": "var(--color-switch-track-bg)", "--controlTrack-bgColor-hover": "var(--color-switch-track-hover-bg)", "--controlTrack-bgColor-active": "var(--color-switch-track-active-bg)", "--controlTrack-bgColor-disabled": "var(--color-switch-track-disabled-bg)", "--controlTrack-fgColor-rest": "var(--color-switch-track-fg)", "--controlTrack-fgColor-disabled": "var(--color-switch-track-disabled-fg)", "--controlTrack-borderColor-rest": "var(--color-switch-track-border)", "--controlTrack-borderColor-disabled": "var(--color-primer-fg-disabled)", "--controlKnob-bgColor-rest": "var(--color-switch-knob-bg)", "--controlKnob-bgColor-disabled": "var(--color-btn-bg)", "--controlKnob-bgColor-checked": "var(--color-switch-knob-checked-bg)", "--controlKnob-borderColor-rest": "var(--color-switch-knob-border)", "--controlKnob-borderColor-disabled": "var(--color-btn-bg)", "--controlKnob-borderColor-checked": "var(--color-switch-knob-checked-border)", "--counter-borderColor": "var(--color-counter-border)", "--button-default-fgColor-rest": "var(--color-btn-text)", "--button-default-bgColor-rest": "var(--color-btn-bg)", "--button-default-bgColor-hover": "var(--color-btn-hover-bg)", "--button-default-bgColor-active": "var(--color-btn-active-bg)", "--button-default-bgColor-selected": "var(--color-btn-selected-bg)", "--button-default-bgColor-disabled": "var(--color-btn-bg)", "--button-default-borderColor-rest": "var(--color-btn-border)", "--button-default-borderColor-hover": "var(--color-btn-hover-border)", "--button-default-borderColor-active": "var(--color-btn-active-border)", "--button-default-borderColor-disabled": "var(--color-btn-border)", "--button-default-shadow-resting": "var(--color-btn-shadow)", "--button-default-shadow-inset": "var(--color-btn-inset-shadow)", "--button-primary-fgColor-rest": "var(--color-btn-primary-text)", "--button-primary-fgColor-disabled": "var(--color-btn-primary-disabled-text)", "--button-primary-iconColor-rest": "var(--color-btn-primary-icon)", "--button-primary-bgColor-rest": "var(--color-btn-primary-bg)", "--button-primary-bgColor-hover": "var(--color-btn-primary-hover-bg)", "--button-primary-bgColor-active": "var(--color-btn-primary-selected-bg)", "--button-primary-bgColor-disabled": "var(--color-btn-primary-disabled-bg)", "--button-primary-borderColor-rest": "var(--color-btn-primary-border)", "--button-primary-borderColor-hover": "var(--color-btn-primary-hover-border)", "--button-primary-borderColor-disabled": "var(--color-btn-primary-disabled-border)", "--button-primary-shadow-selected": "var(--color-btn-primary-selected-shadow)", "--button-invisible-fgColor-rest": "var(--color-btn-outline-text)", "--button-invisible-fgColor-hover": "var(--color-btn-outline-text)", "--button-invisible-fgColor-disabled": "var(--color-primer-fg-disabled)", "--button-invisible-bgColor-rest": "transparent", "--button-invisible-bgColor-hover": "var(--color-action-list-item-default-hover-bg)", "--button-invisible-bgColor-active": "var(--color-action-list-item-default-active-bg)", "--button-invisible-bgColor-disabled": "var(--color-action-list-item-default-selected-bg)", "--button-invisible-borderColor-rest": "transparent", "--button-invisible-borderColor-hover": "transparent", "--button-invisible-borderColor-disabled": "var(--color-action-list-item-default-selected-bg)", "--button-outline-fgColor-rest": "var(--color-btn-outline-text)", "--button-outline-fgColor-hover": "var(--color-btn-outline-hover-text)", "--button-outline-fgColor-active": "var(--color-btn-outline-selected-text)", "--button-outline-fgColor-disabled": "var(--color-btn-outline-disabled-text)", "--button-outline-bgColor-rest": "var(--color-btn-bg)", "--button-outline-bgColor-hover": "var(--color-btn-outline-hover-bg)", "--button-outline-bgColor-active": "var(--color-btn-outline-selected-bg)", "--button-outline-bgColor-disabled": "var(--color-btn-outline-disabled-bg)", "--button-outline-borderColor-hover": "var(--color-btn-outline-hover-border)", "--button-outline-borderColor-active": "var(--color-btn-outline-selected-border)", "--button-outline-shadow-selected": "var(--color-btn-outline-selected-shadow)", "--button-danger-fgColor-rest": "var(--color-btn-danger-text)", "--button-danger-fgColor-hover": "var(--color-btn-danger-hover-text)", "--button-danger-fgColor-active": "var(--color-btn-danger-selected-text)", "--button-danger-fgColor-disabled": "var(--color-btn-danger-disabled-text)", "--button-danger-iconColor-rest": "var(--color-btn-danger-icon)", "--button-danger-iconColor-hover": "var(--color-btn-danger-hover-icon)", "--button-danger-bgColor-rest": "var(--color-btn-bg)", "--button-danger-bgColor-hover": "var(--color-btn-danger-hover-bg)", "--button-danger-bgColor-active": "var(--color-btn-danger-selected-bg)", "--button-danger-bgColor-disabled": "var(--color-btn-danger-disabled-bg)", "--button-danger-borderColor-rest": "var(--color-btn-border)", "--button-danger-borderColor-hover": "var(--color-btn-danger-hover-border)", "--button-danger-borderColor-active": "var(--color-btn-danger-selected-border)", "--button-danger-borderColor-disabled": "var(--color-action-list-item-default-selected-bg)", "--button-danger-shadow-selected": "var(--color-btn-danger-selected-shadow)", "--buttonCounter-default-bgColor-rest": "var(--color-btn-counter-bg)", "--buttonCounter-primary-bgColor-rest": "var(--color-btn-primary-counter-bg)", "--buttonCounter-outline-bgColor-rest": "var(--color-btn-outline-counter-bg)", "--buttonCounter-outline-bgColor-hover": "var(--color-btn-outline-hover-counter-bg)", "--buttonCounter-outline-bgColor-disabled": "var(--color-btn-outline-disabled-counter-bg)", "--buttonCounter-outline-fgColor-rest": "var(--color-btn-outline-counter-fg)", "--buttonCounter-outline-fgColor-hover": "var(--color-btn-outline-hover-counter-fg)", "--buttonCounter-outline-fgColor-disabled": "var(--color-btn-outline-disabled-counter-fg)", "--buttonCounter-danger-bgColor-hover": "var(--color-btn-danger-hover-counter-bg)", "--buttonCounter-danger-bgColor-disabled": "var(--color-btn-danger-disabled-counter-bg)", "--buttonCounter-danger-bgColor-rest": "var(--color-btn-danger-counter-bg)", "--buttonCounter-danger-fgColor-rest": "var(--color-btn-danger-counter-fg)", "--buttonCounter-danger-fgColor-hover": "var(--color-btn-danger-hover-counter-fg)", "--buttonCounter-danger-fgColor-disabled": "var(--color-btn-danger-disabled-counter-fg)", "--focus-outlineColor": "var(--color-accent-fg)", "--focus-outline": "var(--color-accent-fg solid 2px)", "--menu-bgColor-active": "var(--color-menu-bg-active)", "--overlay-bgColor": "var(--color-canvas-overlay)", "--overlay-backdrop-bgColor": "var(--color-overlay-backdrop)", "--selectMenu-borderColor": "var(--color-select-menu-backdrop-border)", "--selectMenu-bgColor-active": "var(--color-select-menu-tap-focus-bg)", "--sideNav-bgColor-selected": "var(--color-sidenav-selected-bg)", "--timelineBadge-bgColor": "var(--color-timeline-badge-bg)", "--treeViewItem-leadingVisual-iconColor-rest": "var(--color-tree-view-item-directory-fill)", "--underlineNav-borderColor-active": "var(--color-primer-border-active)", "--underlineNav-borderColor-hover": "var(--color-underlinenav-border-hover)", "--underlineNav-iconColor-rest": "var(--color-underlinenav-icon)", "--fgColor-default": "var(--color-fg-default)", "--fgColor-muted": "var(--color-fg-muted)", "--fgColor-onEmphasis": "var(--color-fg-on-emphasis)", "--fgColor-disabled": "var(--color-primer-fg-disabled)", "--fgColor-link": "var(--color-accent-fg)", "--fgColor-accent": "var(--color-accent-fg)", "--fgColor-success": "var(--color-success-fg)", "--fgColor-attention": "var(--color-attention-fg)", "--fgColor-severe": "var(--color-severe-fg)", "--fgColor-danger": "var(--color-danger-fg)", "--fgColor-open": "var(--color-open-fg)", "--fgColor-closed": "var(--color-closed-fg)", "--fgColor-done": "var(--color-done-fg)", "--fgColor-sponsors": "var(--color-sponsors-fg)", "--bgColor-default": "var(--color-canvas-default)", "--bgColor-muted": "var(--color-canvas-subtle)", "--bgColor-inset": "var(--color-canvas-inset)", "--bgColor-emphasis": "var(--color-neutral-emphasis-plus)", "--bgColor-disabled": "var(--color-neutral-muted)", "--bgColor-neutral-muted": "var(--color-neutral-subtle)", "--bgColor-neutral-emphasis": "var(--color-fg-subtle)", "--bgColor-accent-muted": "var(--color-accent-subtle)", "--bgColor-accent-emphasis": "var(--color-accent-emphasis)", "--bgColor-success-muted": "var(--color-success-subtle)", "--bgColor-success-emphasis": "var(--color-success-emphasis)", "--bgColor-attention-muted": "var(--color-attention-subtle)", "--bgColor-attention-emphasis": "var(--color-attention-emphasis)", "--bgColor-severe-muted": "var(--color-severe-subtle)", "--bgColor-severe-emphasis": "var(--color-severe-emphasis)", "--bgColor-danger-muted": "var(--color-danger-subtle)", "--bgColor-danger-emphasis": "var(--color-danger-emphasis)", "--bgColor-open-muted": "var(--color-open-subtle)", "--bgColor-open-emphasis": "var(--color-open-emphasis)", "--bgColor-closed-muted": "var(--color-closed-subtle)", "--bgColor-closed-emphasis": "var(--color-closed-emphasis)", "--bgColor-done-muted": "var(--color-done-subtle)", "--bgColor-done-emphasis": "var(--color-done-emphasis)", "--bgColor-sponsors-muted": "var(--color-sponsors-subtle)", "--bgColor-sponsors-emphasis": "var(--color-sponsors-emphasis)", "--borderColor-default": "var(--color-border-default)", "--borderColor-muted": "var(--color-border-muted)", "--borderColor-emphasis": "var(--color-fg-subtle)", "--borderColor-disabled": "var(--color-border-default)", "--borderColor-neutral-muted": "var(--color-neutral-muted)", "--borderColor-neutral-emphasis": "var(--color-fg-subtle)", "--borderColor-accent-muted": "var(--color-accent-muted)", "--borderColor-accent-emphasis": "var(--color-accent-emphasis)", "--borderColor-success-muted": "var(--color-success-muted)", "--borderColor-success-emphasis": "var(--color-success-emphasis)", "--borderColor-attention-muted": "var(--color-attention-muted)", "--borderColor-attention-emphasis": "var(--color-attention-emphasis)", "--borderColor-severe-muted": "var(--color-severe-muted)", "--borderColor-severe-emphasis": "var(--color-severe-emphasis)", "--borderColor-danger-muted": "var(--color-danger-muted)", "--borderColor-danger-emphasis": "var(--color-danger-emphasis)", "--borderColor-open-muted": "var(--color-open-muted)", "--borderColor-open-emphasis": "var(--color-open-emphasis)", "--borderColor-closed-muted": "var(--color-closed-muted)", "--borderColor-closed-emphasis": "var(--color-closed-emphasis)", "--borderColor-done-muted": "var(--color-done-muted)", "--borderColor-done-emphasis": "var(--color-done-emphasis)", "--borderColor-sponsors-muted": "var(--color-sponsors-muted)", "--borderColor-sponsors-emphasis": "var(--color-sponsors-emphasis)", "--shadow-resting-xsmall": "", "--shadow-resting-small": "var(--color-shadow-small)", "--shadow-resting-medium": "var(--color-shadow-medium)", "--shadow-floating-small": "var(--color-overlay-shadow)", "--shadow-floating-medium": "", "--shadow-floating-large": "var(--color-shadow-large)", "--shadow-floating-xlarge": "var(--color-shadow-extra-large)", "--shadow-inset": "var(--color-primer-shadow-inset)", "--borderColor-transparent": "transparent", "--bgColor-transparent": "transparent", "--data-blue-color": "var(--data-blue-color-emphasis)", "--data-auburn-color": "var(--data-auburn-color-emphasis)", "--data-orange-color": "var(--data-orange-color-emphasis)", "--data-yellow-color": "var(--data-yellow-color-emphasis)", "--data-green-color": "var(--data-green-color-emphasis)", "--data-teal-color": "var(--data-teal-color-emphasis)", "--data-purple-color": "var(--data-purple-color-emphasis)", "--data-pink-color": "var(--data-pink-color-emphasis)", "--data-red-color": "var(--data-red-color-emphasis)", "--data-gray-color": "var(--data-gray-color-emphasis)" }