@primer/primitives 7.17.0-rc.be58e800 → 7.17.0-rc.d6bee7f7

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.
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Primer Primitives
2
2
 
3
- [![npm package](https://img.shields.io/npm/v/@primer/primitives.svg?style=flat)](https://www.npmjs.com/package/@primer/primitives)
3
+ [![npm package](https://img.shields.io/npm/v/@primer/primitives.svg?style=flat)](https://www.npmjs.com/package/@primer/primitives) [![Storybook](https://github.com/primer/primitives/actions/workflows/deploy.yml/badge.svg)](https://primer.style/primitives/storybook/) [![A11y contrast check](https://github.com/primer/primitives/actions/workflows/a11y-contrast.yml/badge.svg)](https://github.com/primer/primitives/actions/workflows/a11y-contrast.yml)
4
4
 
5
5
  This repo contains values for color, spacing, and typography primitives for use with [Primer][primer], GitHub's design system.
6
6
 
@@ -2,11 +2,23 @@
2
2
  "base-text-weight-light": {
3
3
  "$type": "fontWeight",
4
4
  "value": 300,
5
+ "$extensions": {
6
+ "org.primer.figma": {
7
+ "collection": "base/typography",
8
+ "scopes": ["all"]
9
+ }
10
+ },
5
11
  "filePath": "src/tokens/base/typography/typography.json",
6
12
  "isSource": true,
7
13
  "original": {
8
14
  "$type": "fontWeight",
9
- "value": 300
15
+ "value": 300,
16
+ "$extensions": {
17
+ "org.primer.figma": {
18
+ "collection": "base/typography",
19
+ "scopes": ["all"]
20
+ }
21
+ }
10
22
  },
11
23
  "name": "base-text-weight-light",
12
24
  "attributes": {},
@@ -15,11 +27,23 @@
15
27
  "base-text-weight-normal": {
16
28
  "value": 400,
17
29
  "$type": "fontWeight",
30
+ "$extensions": {
31
+ "org.primer.figma": {
32
+ "collection": "base/typography",
33
+ "scopes": ["all"]
34
+ }
35
+ },
18
36
  "filePath": "src/tokens/base/typography/typography.json",
19
37
  "isSource": true,
20
38
  "original": {
21
39
  "value": 400,
22
- "$type": "fontWeight"
40
+ "$type": "fontWeight",
41
+ "$extensions": {
42
+ "org.primer.figma": {
43
+ "collection": "base/typography",
44
+ "scopes": ["all"]
45
+ }
46
+ }
23
47
  },
24
48
  "name": "base-text-weight-normal",
25
49
  "attributes": {},
@@ -28,11 +52,23 @@
28
52
  "base-text-weight-medium": {
29
53
  "value": 500,
30
54
  "$type": "fontWeight",
55
+ "$extensions": {
56
+ "org.primer.figma": {
57
+ "collection": "base/typography",
58
+ "scopes": ["all"]
59
+ }
60
+ },
31
61
  "filePath": "src/tokens/base/typography/typography.json",
32
62
  "isSource": true,
33
63
  "original": {
34
64
  "value": 500,
35
- "$type": "fontWeight"
65
+ "$type": "fontWeight",
66
+ "$extensions": {
67
+ "org.primer.figma": {
68
+ "collection": "base/typography",
69
+ "scopes": ["all"]
70
+ }
71
+ }
36
72
  },
37
73
  "name": "base-text-weight-medium",
38
74
  "attributes": {},
@@ -41,11 +77,23 @@
41
77
  "base-text-weight-semibold": {
42
78
  "value": 600,
43
79
  "$type": "fontWeight",
80
+ "$extensions": {
81
+ "org.primer.figma": {
82
+ "collection": "base/typography",
83
+ "scopes": ["all"]
84
+ }
85
+ },
44
86
  "filePath": "src/tokens/base/typography/typography.json",
45
87
  "isSource": true,
46
88
  "original": {
47
89
  "value": 600,
48
- "$type": "fontWeight"
90
+ "$type": "fontWeight",
91
+ "$extensions": {
92
+ "org.primer.figma": {
93
+ "collection": "base/typography",
94
+ "scopes": ["all"]
95
+ }
96
+ }
49
97
  },
50
98
  "name": "base-text-weight-semibold",
51
99
  "attributes": {},
@@ -83,7 +83,8 @@
83
83
  },
84
84
  "org.primer.figma": {
85
85
  "collection": "typography",
86
- "scopes": ["all"]
86
+ "scopes": ["all"],
87
+ "fontSizeInPx": 40
87
88
  }
88
89
  },
89
90
  "filePath": "src/tokens/functional/typography/typography.json",
@@ -97,7 +98,8 @@
97
98
  },
98
99
  "org.primer.figma": {
99
100
  "collection": "typography",
100
- "scopes": ["all"]
101
+ "scopes": ["all"],
102
+ "fontSizeInPx": 40
101
103
  }
102
104
  }
103
105
  },
@@ -108,11 +110,23 @@
108
110
  "text-display-size": {
109
111
  "value": "2.5rem",
110
112
  "$type": "dimension",
113
+ "$extensions": {
114
+ "org.primer.figma": {
115
+ "collection": "typography",
116
+ "scopes": ["all"]
117
+ }
118
+ },
111
119
  "filePath": "src/tokens/functional/typography/typography.json",
112
120
  "isSource": true,
113
121
  "original": {
114
122
  "value": "40px",
115
- "$type": "dimension"
123
+ "$type": "dimension",
124
+ "$extensions": {
125
+ "org.primer.figma": {
126
+ "collection": "typography",
127
+ "scopes": ["all"]
128
+ }
129
+ }
116
130
  },
117
131
  "name": "text-display-size",
118
132
  "attributes": {},
@@ -152,11 +166,23 @@
152
166
  "text-display-weight": {
153
167
  "value": 500,
154
168
  "$type": "fontWeight",
169
+ "$extensions": {
170
+ "org.primer.figma": {
171
+ "collection": "typography",
172
+ "scopes": ["all"]
173
+ }
174
+ },
155
175
  "filePath": "src/tokens/functional/typography/typography.json",
156
176
  "isSource": true,
157
177
  "original": {
158
178
  "value": "{base.text.weight.medium}",
159
- "$type": "fontWeight"
179
+ "$type": "fontWeight",
180
+ "$extensions": {
181
+ "org.primer.figma": {
182
+ "collection": "typography",
183
+ "scopes": ["all"]
184
+ }
185
+ }
160
186
  },
161
187
  "name": "text-display-weight",
162
188
  "attributes": {},
@@ -185,11 +211,23 @@
185
211
  "text-title-size-large": {
186
212
  "value": "2rem",
187
213
  "$type": "dimension",
214
+ "$extensions": {
215
+ "org.primer.figma": {
216
+ "collection": "typography",
217
+ "scopes": ["all"]
218
+ }
219
+ },
188
220
  "filePath": "src/tokens/functional/typography/typography.json",
189
221
  "isSource": true,
190
222
  "original": {
191
223
  "value": "32px",
192
- "$type": "dimension"
224
+ "$type": "dimension",
225
+ "$extensions": {
226
+ "org.primer.figma": {
227
+ "collection": "typography",
228
+ "scopes": ["all"]
229
+ }
230
+ }
193
231
  },
194
232
  "name": "text-title-size-large",
195
233
  "attributes": {},
@@ -198,11 +236,23 @@
198
236
  "text-title-size-medium": {
199
237
  "value": "1.25rem",
200
238
  "$type": "dimension",
239
+ "$extensions": {
240
+ "org.primer.figma": {
241
+ "collection": "typography",
242
+ "scopes": ["all"]
243
+ }
244
+ },
201
245
  "filePath": "src/tokens/functional/typography/typography.json",
202
246
  "isSource": true,
203
247
  "original": {
204
248
  "value": "20px",
205
- "$type": "dimension"
249
+ "$type": "dimension",
250
+ "$extensions": {
251
+ "org.primer.figma": {
252
+ "collection": "typography",
253
+ "scopes": ["all"]
254
+ }
255
+ }
206
256
  },
207
257
  "name": "text-title-size-medium",
208
258
  "attributes": {},
@@ -211,11 +261,23 @@
211
261
  "text-title-size-small": {
212
262
  "value": "1rem",
213
263
  "$type": "dimension",
264
+ "$extensions": {
265
+ "org.primer.figma": {
266
+ "collection": "typography",
267
+ "scopes": ["all"]
268
+ }
269
+ },
214
270
  "filePath": "src/tokens/functional/typography/typography.json",
215
271
  "isSource": true,
216
272
  "original": {
217
273
  "value": "16px",
218
- "$type": "dimension"
274
+ "$type": "dimension",
275
+ "$extensions": {
276
+ "org.primer.figma": {
277
+ "collection": "typography",
278
+ "scopes": ["all"]
279
+ }
280
+ }
219
281
  },
220
282
  "name": "text-title-size-small",
221
283
  "attributes": {},
@@ -317,11 +379,23 @@
317
379
  "text-title-weight-large": {
318
380
  "value": 600,
319
381
  "$type": "fontWeight",
382
+ "$extensions": {
383
+ "org.primer.figma": {
384
+ "collection": "typography",
385
+ "scopes": ["all"]
386
+ }
387
+ },
320
388
  "filePath": "src/tokens/functional/typography/typography.json",
321
389
  "isSource": true,
322
390
  "original": {
323
391
  "value": "{base.text.weight.semibold}",
324
- "$type": "fontWeight"
392
+ "$type": "fontWeight",
393
+ "$extensions": {
394
+ "org.primer.figma": {
395
+ "collection": "typography",
396
+ "scopes": ["all"]
397
+ }
398
+ }
325
399
  },
326
400
  "name": "text-title-weight-large",
327
401
  "attributes": {},
@@ -330,11 +404,23 @@
330
404
  "text-title-weight-medium": {
331
405
  "value": 600,
332
406
  "$type": "fontWeight",
407
+ "$extensions": {
408
+ "org.primer.figma": {
409
+ "collection": "typography",
410
+ "scopes": ["all"]
411
+ }
412
+ },
333
413
  "filePath": "src/tokens/functional/typography/typography.json",
334
414
  "isSource": true,
335
415
  "original": {
336
416
  "value": "{base.text.weight.semibold}",
337
- "$type": "fontWeight"
417
+ "$type": "fontWeight",
418
+ "$extensions": {
419
+ "org.primer.figma": {
420
+ "collection": "typography",
421
+ "scopes": ["all"]
422
+ }
423
+ }
338
424
  },
339
425
  "name": "text-title-weight-medium",
340
426
  "attributes": {},
@@ -343,11 +429,23 @@
343
429
  "text-title-weight-small": {
344
430
  "value": 600,
345
431
  "$type": "fontWeight",
432
+ "$extensions": {
433
+ "org.primer.figma": {
434
+ "collection": "typography",
435
+ "scopes": ["all"]
436
+ }
437
+ },
346
438
  "filePath": "src/tokens/functional/typography/typography.json",
347
439
  "isSource": true,
348
440
  "original": {
349
441
  "value": "{base.text.weight.semibold}",
350
- "$type": "fontWeight"
442
+ "$type": "fontWeight",
443
+ "$extensions": {
444
+ "org.primer.figma": {
445
+ "collection": "typography",
446
+ "scopes": ["all"]
447
+ }
448
+ }
351
449
  },
352
450
  "name": "text-title-weight-small",
353
451
  "attributes": {},
@@ -416,11 +514,23 @@
416
514
  "text-subtitle-size": {
417
515
  "value": "1.25rem",
418
516
  "$type": "dimension",
517
+ "$extensions": {
518
+ "org.primer.figma": {
519
+ "collection": "typography",
520
+ "scopes": ["all"]
521
+ }
522
+ },
419
523
  "filePath": "src/tokens/functional/typography/typography.json",
420
524
  "isSource": true,
421
525
  "original": {
422
526
  "value": "20px",
423
- "$type": "dimension"
527
+ "$type": "dimension",
528
+ "$extensions": {
529
+ "org.primer.figma": {
530
+ "collection": "typography",
531
+ "scopes": ["all"]
532
+ }
533
+ }
424
534
  },
425
535
  "name": "text-subtitle-size",
426
536
  "attributes": {},
@@ -429,11 +539,23 @@
429
539
  "text-subtitle-lineHeight": {
430
540
  "value": 1.6,
431
541
  "$type": "number",
542
+ "$extensions": {
543
+ "org.primer.figma": {
544
+ "collection": "typography",
545
+ "scopes": ["all"]
546
+ }
547
+ },
432
548
  "filePath": "src/tokens/functional/typography/typography.json",
433
549
  "isSource": true,
434
550
  "original": {
435
551
  "value": 1.6,
436
- "$type": "number"
552
+ "$type": "number",
553
+ "$extensions": {
554
+ "org.primer.figma": {
555
+ "collection": "typography",
556
+ "scopes": ["all"]
557
+ }
558
+ }
437
559
  },
438
560
  "name": "text-subtitle-lineHeight",
439
561
  "attributes": {},
@@ -442,11 +564,23 @@
442
564
  "text-subtitle-weight": {
443
565
  "value": 400,
444
566
  "$type": "fontWeight",
567
+ "$extensions": {
568
+ "org.primer.figma": {
569
+ "collection": "typography",
570
+ "scopes": ["all"]
571
+ }
572
+ },
445
573
  "filePath": "src/tokens/functional/typography/typography.json",
446
574
  "isSource": true,
447
575
  "original": {
448
576
  "value": "{base.text.weight.normal}",
449
- "$type": "fontWeight"
577
+ "$type": "fontWeight",
578
+ "$extensions": {
579
+ "org.primer.figma": {
580
+ "collection": "typography",
581
+ "scopes": ["all"]
582
+ }
583
+ }
450
584
  },
451
585
  "name": "text-subtitle-weight",
452
586
  "attributes": {},
@@ -475,11 +609,23 @@
475
609
  "text-body-size-large": {
476
610
  "value": "1rem",
477
611
  "$type": "dimension",
612
+ "$extensions": {
613
+ "org.primer.figma": {
614
+ "collection": "typography",
615
+ "scopes": ["all"]
616
+ }
617
+ },
478
618
  "filePath": "src/tokens/functional/typography/typography.json",
479
619
  "isSource": true,
480
620
  "original": {
481
621
  "value": "16px",
482
- "$type": "dimension"
622
+ "$type": "dimension",
623
+ "$extensions": {
624
+ "org.primer.figma": {
625
+ "collection": "typography",
626
+ "scopes": ["all"]
627
+ }
628
+ }
483
629
  },
484
630
  "name": "text-body-size-large",
485
631
  "attributes": {},
@@ -488,11 +634,23 @@
488
634
  "text-body-size-medium": {
489
635
  "value": "0.875rem",
490
636
  "$type": "dimension",
637
+ "$extensions": {
638
+ "org.primer.figma": {
639
+ "collection": "typography",
640
+ "scopes": ["all"]
641
+ }
642
+ },
491
643
  "filePath": "src/tokens/functional/typography/typography.json",
492
644
  "isSource": true,
493
645
  "original": {
494
646
  "value": "14px",
495
- "$type": "dimension"
647
+ "$type": "dimension",
648
+ "$extensions": {
649
+ "org.primer.figma": {
650
+ "collection": "typography",
651
+ "scopes": ["all"]
652
+ }
653
+ }
496
654
  },
497
655
  "name": "text-body-size-medium",
498
656
  "attributes": {},
@@ -501,11 +659,23 @@
501
659
  "text-body-size-small": {
502
660
  "value": "0.75rem",
503
661
  "$type": "dimension",
662
+ "$extensions": {
663
+ "org.primer.figma": {
664
+ "collection": "typography",
665
+ "scopes": ["all"]
666
+ }
667
+ },
504
668
  "filePath": "src/tokens/functional/typography/typography.json",
505
669
  "isSource": true,
506
670
  "original": {
507
671
  "value": "12px",
508
- "$type": "dimension"
672
+ "$type": "dimension",
673
+ "$extensions": {
674
+ "org.primer.figma": {
675
+ "collection": "typography",
676
+ "scopes": ["all"]
677
+ }
678
+ }
509
679
  },
510
680
  "name": "text-body-size-small",
511
681
  "attributes": {},
@@ -680,11 +850,23 @@
680
850
  "text-caption-size": {
681
851
  "value": "0.75rem",
682
852
  "$type": "dimension",
853
+ "$extensions": {
854
+ "org.primer.figma": {
855
+ "collection": "typography",
856
+ "scopes": ["all"]
857
+ }
858
+ },
683
859
  "filePath": "src/tokens/functional/typography/typography.json",
684
860
  "isSource": true,
685
861
  "original": {
686
862
  "value": "12px",
687
- "$type": "dimension"
863
+ "$type": "dimension",
864
+ "$extensions": {
865
+ "org.primer.figma": {
866
+ "collection": "typography",
867
+ "scopes": ["all"]
868
+ }
869
+ }
688
870
  },
689
871
  "name": "text-caption-size",
690
872
  "attributes": {},
@@ -724,11 +906,23 @@
724
906
  "text-caption-weight": {
725
907
  "value": 400,
726
908
  "$type": "fontWeight",
909
+ "$extensions": {
910
+ "org.primer.figma": {
911
+ "collection": "typography",
912
+ "scopes": ["all"]
913
+ }
914
+ },
727
915
  "filePath": "src/tokens/functional/typography/typography.json",
728
916
  "isSource": true,
729
917
  "original": {
730
918
  "value": "{base.text.weight.normal}",
731
- "$type": "fontWeight"
919
+ "$type": "fontWeight",
920
+ "$extensions": {
921
+ "org.primer.figma": {
922
+ "collection": "typography",
923
+ "scopes": ["all"]
924
+ }
925
+ }
732
926
  },
733
927
  "name": "text-caption-weight",
734
928
  "attributes": {},
@@ -757,11 +951,23 @@
757
951
  "text-codeBlock-size": {
758
952
  "value": "0.8125rem",
759
953
  "$type": "dimension",
954
+ "$extensions": {
955
+ "org.primer.figma": {
956
+ "collection": "typography",
957
+ "scopes": ["all"]
958
+ }
959
+ },
760
960
  "filePath": "src/tokens/functional/typography/typography.json",
761
961
  "isSource": true,
762
962
  "original": {
763
963
  "value": "13px",
764
- "$type": "dimension"
964
+ "$type": "dimension",
965
+ "$extensions": {
966
+ "org.primer.figma": {
967
+ "collection": "typography",
968
+ "scopes": ["all"]
969
+ }
970
+ }
765
971
  },
766
972
  "name": "text-codeBlock-size",
767
973
  "attributes": {},
@@ -801,11 +1007,23 @@
801
1007
  "text-codeBlock-weight": {
802
1008
  "value": 400,
803
1009
  "$type": "fontWeight",
1010
+ "$extensions": {
1011
+ "org.primer.figma": {
1012
+ "collection": "typography",
1013
+ "scopes": ["all"]
1014
+ }
1015
+ },
804
1016
  "filePath": "src/tokens/functional/typography/typography.json",
805
1017
  "isSource": true,
806
1018
  "original": {
807
1019
  "value": "{base.text.weight.normal}",
808
- "$type": "fontWeight"
1020
+ "$type": "fontWeight",
1021
+ "$extensions": {
1022
+ "org.primer.figma": {
1023
+ "collection": "typography",
1024
+ "scopes": ["all"]
1025
+ }
1026
+ }
809
1027
  },
810
1028
  "name": "text-codeBlock-weight",
811
1029
  "attributes": {},
@@ -834,11 +1052,23 @@
834
1052
  "text-codeInline-size": {
835
1053
  "value": "0.9285em",
836
1054
  "$type": "dimension",
1055
+ "$extensions": {
1056
+ "org.primer.figma": {
1057
+ "collection": "typography",
1058
+ "scopes": ["all"]
1059
+ }
1060
+ },
837
1061
  "filePath": "src/tokens/functional/typography/typography.json",
838
1062
  "isSource": true,
839
1063
  "original": {
840
1064
  "value": "0.9285em",
841
- "$type": "dimension"
1065
+ "$type": "dimension",
1066
+ "$extensions": {
1067
+ "org.primer.figma": {
1068
+ "collection": "typography",
1069
+ "scopes": ["all"]
1070
+ }
1071
+ }
842
1072
  },
843
1073
  "name": "text-codeInline-size",
844
1074
  "attributes": {},
@@ -847,11 +1077,23 @@
847
1077
  "text-codeInline-weight": {
848
1078
  "value": 400,
849
1079
  "$type": "fontWeight",
1080
+ "$extensions": {
1081
+ "org.primer.figma": {
1082
+ "collection": "typography",
1083
+ "scopes": ["all"]
1084
+ }
1085
+ },
850
1086
  "filePath": "src/tokens/functional/typography/typography.json",
851
1087
  "isSource": true,
852
1088
  "original": {
853
1089
  "value": "{base.text.weight.normal}",
854
- "$type": "fontWeight"
1090
+ "$type": "fontWeight",
1091
+ "$extensions": {
1092
+ "org.primer.figma": {
1093
+ "collection": "typography",
1094
+ "scopes": ["all"]
1095
+ }
1096
+ }
855
1097
  },
856
1098
  "name": "text-codeInline-weight",
857
1099
  "attributes": {},
@@ -93,6 +93,14 @@
93
93
  "groups": [
94
94
  "typography"
95
95
  ]
96
+ },
97
+ "base/typography": {
98
+ "modes": [
99
+ "default"
100
+ ],
101
+ "groups": [
102
+ "base/typography"
103
+ ]
96
104
  }
97
105
  },
98
106
  "files": [