@primer/primitives 10.3.4 → 10.4.0-rc.1cf1d876

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/dist/css/base/motion/motion.css +1 -0
  2. package/dist/css/functional/themes/dark-colorblind.css +36 -0
  3. package/dist/css/functional/themes/dark-dimmed.css +36 -0
  4. package/dist/css/functional/themes/dark-high-contrast.css +36 -0
  5. package/dist/css/functional/themes/dark-tritanopia.css +36 -0
  6. package/dist/css/functional/themes/dark.css +36 -0
  7. package/dist/css/functional/themes/light-colorblind.css +36 -0
  8. package/dist/css/functional/themes/light-high-contrast.css +36 -0
  9. package/dist/css/functional/themes/light-tritanopia.css +36 -0
  10. package/dist/css/functional/themes/light.css +36 -0
  11. package/dist/css/primitives.css +1 -0
  12. package/dist/docs/base/motion/motion.json +14 -0
  13. package/dist/docs/functional/themes/dark-colorblind.json +2600 -226
  14. package/dist/docs/functional/themes/dark-dimmed.json +2152 -166
  15. package/dist/docs/functional/themes/dark-high-contrast.json +2786 -260
  16. package/dist/docs/functional/themes/dark-tritanopia.json +2446 -160
  17. package/dist/docs/functional/themes/dark.json +2379 -215
  18. package/dist/docs/functional/themes/light-colorblind.json +2573 -225
  19. package/dist/docs/functional/themes/light-high-contrast.json +1990 -234
  20. package/dist/docs/functional/themes/light-tritanopia.json +2437 -163
  21. package/dist/docs/functional/themes/light.json +2380 -216
  22. package/dist/fallbacks/base/motion/motion.json +1 -0
  23. package/dist/figma/themes/dark-colorblind.json +4154 -3589
  24. package/dist/figma/themes/dark-dimmed.json +3945 -3563
  25. package/dist/figma/themes/dark-high-contrast.json +3361 -2651
  26. package/dist/figma/themes/dark-tritanopia.json +4128 -3675
  27. package/dist/figma/themes/dark.json +4039 -3746
  28. package/dist/figma/themes/light-colorblind.json +4084 -3551
  29. package/dist/figma/themes/light-high-contrast.json +3409 -3101
  30. package/dist/figma/themes/light-tritanopia.json +4086 -3649
  31. package/dist/figma/themes/light.json +3991 -3698
  32. package/dist/internalCss/dark-colorblind.css +36 -0
  33. package/dist/internalCss/dark-dimmed.css +36 -0
  34. package/dist/internalCss/dark-high-contrast.css +36 -0
  35. package/dist/internalCss/dark-tritanopia.css +36 -0
  36. package/dist/internalCss/dark.css +36 -0
  37. package/dist/internalCss/light-colorblind.css +36 -0
  38. package/dist/internalCss/light-high-contrast.css +36 -0
  39. package/dist/internalCss/light-tritanopia.css +36 -0
  40. package/dist/internalCss/light.css +36 -0
  41. package/dist/styleLint/base/motion/motion.json +14 -0
  42. package/dist/styleLint/functional/themes/dark-colorblind.json +2599 -225
  43. package/dist/styleLint/functional/themes/dark-dimmed.json +2151 -165
  44. package/dist/styleLint/functional/themes/dark-high-contrast.json +2785 -259
  45. package/dist/styleLint/functional/themes/dark-tritanopia.json +2446 -160
  46. package/dist/styleLint/functional/themes/dark.json +2379 -215
  47. package/dist/styleLint/functional/themes/light-colorblind.json +2575 -227
  48. package/dist/styleLint/functional/themes/light-high-contrast.json +1989 -233
  49. package/dist/styleLint/functional/themes/light-tritanopia.json +2436 -162
  50. package/dist/styleLint/functional/themes/light.json +2380 -216
  51. package/package.json +1 -1
  52. package/src/tokens/base/motion/timing.json5 +4 -0
  53. package/src/tokens/component/card.json5 +18 -0
  54. package/src/tokens/{functional/color/light/app-light.json5 → component/codeMirror.json5} +67 -0
  55. package/src/tokens/component/contribution.json5 +344 -0
  56. package/src/tokens/component/counter.json5 +43 -0
  57. package/src/tokens/component/tooltip.json5 +32 -0
  58. package/src/tokens/functional/color/bgColor.json5 +24 -20
  59. package/src/tokens/functional/color/control.json5 +968 -0
  60. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -24
  61. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -164
  62. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +0 -104
  63. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +0 -60
  64. package/src/tokens/functional/color/dark/patterns-dark.json5 +725 -1432
  65. package/src/tokens/functional/color/{dark/data-vis-dark.json5 → data-vis.json5} +61 -21
  66. package/src/tokens/functional/color/focus.json5 +15 -0
  67. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +0 -20
  68. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +0 -90
  69. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +0 -56
  70. package/src/tokens/functional/color/light/patterns-light.json5 +720 -1428
  71. package/src/tokens/functional/color/{light/syntax-light.json5 → syntax.json5} +187 -0
  72. package/src/tokens/functional/color/dark/app-dark.json5 +0 -254
  73. package/src/tokens/functional/color/dark/syntax-dark.json5 +0 -559
  74. package/src/tokens/functional/color/light/data-vis-light.json5 +0 -284
package/src/tokens/functional/color/{dark/data-vis-dark.json5 → data-vis.json5} RENAMED
@@ -8,10 +8,12 @@
8
8
  $extensions: {
9
9
  'org.primer.figma': {
10
10
  collection: 'mode',
11
-
12
11
  group: 'component',
13
12
  scopes: ['bgColor', 'borderColor'],
14
13
  },
14
+ 'org.primer.overrides': {
15
+ dark: '{base.display.color.blue.5}'
16
+ }
15
17
  },
16
18
  },
17
19
  muted: {
@@ -20,10 +22,12 @@
20
22
  $extensions: {
21
23
  'org.primer.figma': {
22
24
  collection: 'mode',
23
-
24
25
  group: 'component',
25
26
  scopes: ['bgColor'],
26
27
  },
28
+ 'org.primer.overrides': {
29
+ dark: '{base.display.color.blue.0}'
30
+ }
27
31
  },
28
32
  },
29
33
  },
@@ -36,10 +40,12 @@
36
40
  $extensions: {
37
41
  'org.primer.figma': {
38
42
  collection: 'mode',
39
-
40
43
  group: 'component',
41
44
  scopes: ['bgColor', 'borderColor'],
42
45
  },
46
+ 'org.primer.overrides': {
47
+ dark: '{base.display.color.auburn.5}'
48
+ }
43
49
  },
44
50
  },
45
51
  muted: {
@@ -48,10 +54,12 @@
48
54
  $extensions: {
49
55
  'org.primer.figma': {
50
56
  collection: 'mode',
51
-
52
57
  group: 'component',
53
58
  scopes: ['bgColor'],
54
59
  },
60
+ 'org.primer.overrides': {
61
+ dark: '{base.display.color.auburn.0}'
62
+ }
55
63
  },
56
64
  },
57
65
  },
@@ -64,10 +72,12 @@
64
72
  $extensions: {
65
73
  'org.primer.figma': {
66
74
  collection: 'mode',
67
-
68
75
  group: 'component',
69
76
  scopes: ['bgColor', 'borderColor'],
70
77
  },
78
+ 'org.primer.overrides': {
79
+ dark: '{base.display.color.orange.4}'
80
+ }
71
81
  },
72
82
  },
73
83
  muted: {
@@ -76,10 +86,12 @@
76
86
  $extensions: {
77
87
  'org.primer.figma': {
78
88
  collection: 'mode',
79
-
80
89
  group: 'component',
81
90
  scopes: ['bgColor'],
82
91
  },
92
+ 'org.primer.overrides': {
93
+ dark: '{base.display.color.orange.0}'
94
+ }
83
95
  },
84
96
  },
85
97
  },
@@ -92,10 +104,12 @@
92
104
  $extensions: {
93
105
  'org.primer.figma': {
94
106
  collection: 'mode',
95
-
96
107
  group: 'component',
97
108
  scopes: ['bgColor', 'borderColor'],
98
109
  },
110
+ 'org.primer.overrides': {
111
+ dark: '{base.display.color.yellow.4}'
112
+ }
99
113
  },
100
114
  },
101
115
  muted: {
@@ -104,10 +118,12 @@
104
118
  $extensions: {
105
119
  'org.primer.figma': {
106
120
  collection: 'mode',
107
-
108
121
  group: 'component',
109
122
  scopes: ['bgColor'],
110
123
  },
124
+ 'org.primer.overrides': {
125
+ dark: '{base.display.color.yellow.0}'
126
+ }
111
127
  },
112
128
  },
113
129
  },
@@ -120,10 +136,12 @@
120
136
  $extensions: {
121
137
  'org.primer.figma': {
122
138
  collection: 'mode',
123
-
124
139
  group: 'component',
125
140
  scopes: ['bgColor', 'borderColor'],
126
141
  },
142
+ 'org.primer.overrides': {
143
+ dark: '{base.display.color.green.4}'
144
+ }
127
145
  },
128
146
  },
129
147
  muted: {
@@ -132,10 +150,12 @@
132
150
  $extensions: {
133
151
  'org.primer.figma': {
134
152
  collection: 'mode',
135
-
136
153
  group: 'component',
137
154
  scopes: ['bgColor'],
138
155
  },
156
+ 'org.primer.overrides': {
157
+ dark: '{base.display.color.green.0}'
158
+ }
139
159
  },
140
160
  },
141
161
  },
@@ -148,10 +168,12 @@
148
168
  $extensions: {
149
169
  'org.primer.figma': {
150
170
  collection: 'mode',
151
-
152
171
  group: 'component',
153
172
  scopes: ['bgColor', 'borderColor'],
154
173
  },
174
+ 'org.primer.overrides': {
175
+ dark: '{base.display.color.teal.4}'
176
+ }
155
177
  },
156
178
  },
157
179
  muted: {
@@ -160,10 +182,12 @@
160
182
  $extensions: {
161
183
  'org.primer.figma': {
162
184
  collection: 'mode',
163
-
164
185
  group: 'component',
165
186
  scopes: ['bgColor'],
166
187
  },
188
+ 'org.primer.overrides': {
189
+ dark: '{base.display.color.teal.0}'
190
+ }
167
191
  },
168
192
  },
169
193
  },
@@ -176,10 +200,12 @@
176
200
  $extensions: {
177
201
  'org.primer.figma': {
178
202
  collection: 'mode',
179
-
180
203
  group: 'component',
181
204
  scopes: ['bgColor', 'borderColor'],
182
205
  },
206
+ 'org.primer.overrides': {
207
+ dark: '{base.display.color.purple.5}'
208
+ }
183
209
  },
184
210
  },
185
211
  muted: {
@@ -188,10 +214,12 @@
188
214
  $extensions: {
189
215
  'org.primer.figma': {
190
216
  collection: 'mode',
191
-
192
217
  group: 'component',
193
218
  scopes: ['bgColor'],
194
219
  },
220
+ 'org.primer.overrides': {
221
+ dark: '{base.display.color.purple.0}'
222
+ }
195
223
  },
196
224
  },
197
225
  },
@@ -204,10 +232,12 @@
204
232
  $extensions: {
205
233
  'org.primer.figma': {
206
234
  collection: 'mode',
207
-
208
235
  group: 'component',
209
236
  scopes: ['bgColor', 'borderColor'],
210
237
  },
238
+ 'org.primer.overrides': {
239
+ dark: '{base.display.color.pink.5}'
240
+ }
211
241
  },
212
242
  },
213
243
  muted: {
@@ -216,10 +246,12 @@
216
246
  $extensions: {
217
247
  'org.primer.figma': {
218
248
  collection: 'mode',
219
-
220
249
  group: 'component',
221
250
  scopes: ['bgColor'],
222
251
  },
252
+ 'org.primer.overrides': {
253
+ dark: '{base.display.color.pink.0}'
254
+ }
223
255
  },
224
256
  },
225
257
  },
@@ -232,10 +264,12 @@
232
264
  $extensions: {
233
265
  'org.primer.figma': {
234
266
  collection: 'mode',
235
-
236
267
  group: 'component',
237
268
  scopes: ['bgColor', 'borderColor'],
238
269
  },
270
+ 'org.primer.overrides': {
271
+ dark: '{base.display.color.red.5}'
272
+ }
239
273
  },
240
274
  },
241
275
  muted: {
@@ -244,10 +278,12 @@
244
278
  $extensions: {
245
279
  'org.primer.figma': {
246
280
  collection: 'mode',
247
-
248
281
  group: 'component',
249
282
  scopes: ['bgColor'],
250
283
  },
284
+ 'org.primer.overrides': {
285
+ dark: '{base.display.color.red.0}'
286
+ }
251
287
  },
252
288
  },
253
289
  },
@@ -260,10 +296,12 @@
260
296
  $extensions: {
261
297
  'org.primer.figma': {
262
298
  collection: 'mode',
263
-
264
299
  group: 'component',
265
300
  scopes: ['bgColor', 'borderColor'],
266
301
  },
302
+ 'org.primer.overrides': {
303
+ dark: '{base.display.color.gray.4}'
304
+ }
267
305
  },
268
306
  },
269
307
  muted: {
@@ -272,13 +310,15 @@
272
310
  $extensions: {
273
311
  'org.primer.figma': {
274
312
  collection: 'mode',
275
-
276
313
  group: 'component',
277
314
  scopes: ['bgColor'],
278
315
  },
316
+ 'org.primer.overrides': {
317
+ dark: '{base.display.color.gray.0}'
318
+ }
279
319
  },
280
320
  },
281
321
  },
282
322
  },
283
323
  },
284
- }
324
+ }
package/src/tokens/functional/color/focus.json5 ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ focus: {
3
+ outlineColor: {
4
+ $value: '{borderColor.accent.emphasis}',
5
+ $type: 'color',
6
+ $extensions: {
7
+ 'org.primer.figma': {
8
+ collection: 'mode',
9
+ group: 'component (internal)',
10
+ scopes: ['borderColor', 'effectColor'],
11
+ },
12
+ },
13
+ },
14
+ },
15
+ }
package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 CHANGED
@@ -4,26 +4,6 @@
4
4
  * @description All overwrites for functional color tokens for light high contrast color mode are in this file
5
5
  */
6
6
  {
7
- counter: {
8
- borderColor: {
9
- $value: '{borderColor.default}',
10
- $type: 'color',
11
- },
12
- bgColor: {
13
- muted: {
14
- $value: '{bgColor.neutral.muted}',
15
- $type: 'color',
16
- $extensions: {
17
- 'org.primer.figma': {
18
- collection: 'mode',
19
- group: 'component',
20
- scopes: ['bgColor'],
21
- },
22
- },
23
- alpha: 1,
24
- },
25
- },
26
- },
27
7
  control: {
28
8
  fgColor: {
29
9
  placeholder: {
package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 CHANGED
@@ -4,20 +4,6 @@
4
4
  * @description All overwrites for functional color tokens for light protanopia and deuteranopia color mode are in this file
5
5
  */
6
6
  {
7
- codeMirror: {
8
- syntax: {
9
- fgColor: {
10
- keyword: {
11
- $value: '{base.color.orange.5}',
12
- $type: 'color',
13
- },
14
- storage: {
15
- $value: '{base.color.orange.5}',
16
- $type: 'color',
17
- },
18
- },
19
- },
20
- },
21
7
  button: {
22
8
  primary: {
23
9
  bgColor: {
@@ -80,80 +66,4 @@
80
66
  },
81
67
  },
82
68
  },
83
- color: {
84
- ansi: {
85
- green: {
86
- $value: '{base.color.blue.6}',
87
- $type: 'color',
88
- },
89
- 'green-bright': {
90
- $value: '{base.color.blue.5}',
91
- $type: 'color',
92
- },
93
- red: {
94
- $value: '{base.color.orange.5}',
95
- $type: 'color',
96
- },
97
- 'red-bright': {
98
- $value: '{base.color.orange.6}',
99
- $type: 'color',
100
- },
101
- },
102
- prettylights: {
103
- syntax: {
104
- keyword: {
105
- $value: '{base.color.orange.5}',
106
- $type: 'color',
107
- },
108
- invalid: {
109
- illegal: {
110
- bg: {
111
- $value: '{base.color.orange.7}',
112
- $type: 'color',
113
- },
114
- },
115
- },
116
- carriage: {
117
- return: {
118
- bg: {
119
- $value: '{base.color.orange.5}',
120
- $type: 'color',
121
- },
122
- },
123
- },
124
- 'string-regexp': {
125
- $value: '{base.color.blue.6}',
126
- $type: 'color',
127
- },
128
- brackethighlighter: {
129
- unmatched: {
130
- $value: '{base.color.orange.7}',
131
- $type: 'color',
132
- },
133
- },
134
- markup: {
135
- deleted: {
136
- text: {
137
- $value: '{base.color.orange.7}',
138
- $type: 'color',
139
- },
140
- bg: {
141
- $value: '{base.color.orange.0}',
142
- $type: 'color',
143
- },
144
- },
145
- inserted: {
146
- text: {
147
- $value: '{base.color.blue.6}',
148
- $type: 'color',
149
- },
150
- bg: {
151
- $value: '{base.color.blue.0}',
152
- $type: 'color',
153
- },
154
- },
155
- },
156
- },
157
- },
158
- },
159
69
  }
package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 CHANGED
@@ -4,16 +4,6 @@
4
4
  * @description All overwrites for functional color tokens for this theme are in this file
5
5
  */
6
6
  {
7
- codeMirror: {
8
- syntax: {
9
- fgColor: {
10
- variable: {
11
- $value: '{base.color.red.6}',
12
- $type: 'color',
13
- },
14
- },
15
- },
16
- },
17
7
  button: {
18
8
  primary: {
19
9
  bgColor: {
@@ -48,50 +38,4 @@
48
38
  },
49
39
  },
50
40
  },
51
- color: {
52
- ansi: {
53
- green: {
54
- $value: '{base.color.blue.6}',
55
- $type: 'color',
56
- },
57
- 'green-bright': {
58
- $value: '{base.color.blue.5}',
59
- $type: 'color',
60
- },
61
- },
62
- prettylights: {
63
- syntax: {
64
- 'string-regexp': {
65
- $value: '{base.color.blue.6}',
66
- $type: 'color',
67
- },
68
- variable: {
69
- $value: '{base.color.red.6}',
70
- $type: 'color',
71
- },
72
- markup: {
73
- inserted: {
74
- text: {
75
- $value: '{base.color.blue.6}',
76
- $type: 'color',
77
- },
78
- bg: {
79
- $value: '{base.color.blue.0}',
80
- $type: 'color',
81
- },
82
- },
83
- changed: {
84
- text: {
85
- $value: '{base.color.red.6}',
86
- $type: 'color',
87
- },
88
- bg: {
89
- $value: '{base.color.red.1}',
90
- $type: 'color',
91
- },
92
- },
93
- },
94
- },
95
- },
96
- },
97
41
  }