@primer/primitives 7.17.0-rc.5464d1af → 7.17.0-rc.60ab8d1a
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/dist/css/functional/typography/typography.css +1 -1
- package/dist/docs/functional/typography/typography.json +13 -193
- package/dist/fallbacks/functional/typography/typography.json +1 -1
- package/dist/figma/typography/typography.json +0 -100
- package/dist/styleLint/functional/typography/typography.json +13 -193
- package/package.json +1 -1
- package/src/PrimerStyleDictionary.ts +0 -6
- package/src/platforms/figma.ts +0 -1
- package/src/schemas/numberToken.ts +0 -17
- package/src/tokens/functional/typography/typography.json +11 -101
- package/src/transformers/index.ts +0 -1
- package/src/transformers/floatToPixel.ts +0 -33
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
--text-title-size-large: 2rem;
|
|
21
21
|
--text-display-lineHeight: 1.4;
|
|
22
22
|
--text-display-size: 2.5rem;
|
|
23
|
-
--text-display-lineBoxHeight:
|
|
23
|
+
--text-display-lineBoxHeight: 3.5rem;
|
|
24
24
|
--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
|
25
25
|
--fontStack-sansSerif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
26
26
|
--fontStack-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
@@ -75,31 +75,13 @@
|
|
|
75
75
|
"path": ["fontStack", "monospace"]
|
|
76
76
|
},
|
|
77
77
|
"text-display-lineBoxHeight": {
|
|
78
|
-
"value":
|
|
79
|
-
"$type": "
|
|
80
|
-
"$extensions": {
|
|
81
|
-
"org.primer.data": {
|
|
82
|
-
"fontSize": 40
|
|
83
|
-
},
|
|
84
|
-
"org.primer.figma": {
|
|
85
|
-
"collection": "typography",
|
|
86
|
-
"scopes": ["all"]
|
|
87
|
-
}
|
|
88
|
-
},
|
|
78
|
+
"value": "3.5rem",
|
|
79
|
+
"$type": "dimension",
|
|
89
80
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
90
81
|
"isSource": true,
|
|
91
82
|
"original": {
|
|
92
|
-
"value":
|
|
93
|
-
"$type": "
|
|
94
|
-
"$extensions": {
|
|
95
|
-
"org.primer.data": {
|
|
96
|
-
"fontSize": 40
|
|
97
|
-
},
|
|
98
|
-
"org.primer.figma": {
|
|
99
|
-
"collection": "typography",
|
|
100
|
-
"scopes": ["all"]
|
|
101
|
-
}
|
|
102
|
-
}
|
|
83
|
+
"value": "56px",
|
|
84
|
+
"$type": "dimension"
|
|
103
85
|
},
|
|
104
86
|
"name": "text-display-lineBoxHeight",
|
|
105
87
|
"attributes": {},
|
|
@@ -121,29 +103,11 @@
|
|
|
121
103
|
"text-display-lineHeight": {
|
|
122
104
|
"value": 1.4,
|
|
123
105
|
"$type": "number",
|
|
124
|
-
"$extensions": {
|
|
125
|
-
"org.primer.data": {
|
|
126
|
-
"fontSize": 40
|
|
127
|
-
},
|
|
128
|
-
"org.primer.figma": {
|
|
129
|
-
"collection": "typography",
|
|
130
|
-
"scopes": ["all"]
|
|
131
|
-
}
|
|
132
|
-
},
|
|
133
106
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
134
107
|
"isSource": true,
|
|
135
108
|
"original": {
|
|
136
109
|
"value": 1.4,
|
|
137
|
-
"$type": "number"
|
|
138
|
-
"$extensions": {
|
|
139
|
-
"org.primer.data": {
|
|
140
|
-
"fontSize": 40
|
|
141
|
-
},
|
|
142
|
-
"org.primer.figma": {
|
|
143
|
-
"collection": "typography",
|
|
144
|
-
"scopes": ["all"]
|
|
145
|
-
}
|
|
146
|
-
}
|
|
110
|
+
"$type": "number"
|
|
147
111
|
},
|
|
148
112
|
"name": "text-display-lineHeight",
|
|
149
113
|
"attributes": {},
|
|
@@ -224,29 +188,11 @@
|
|
|
224
188
|
"text-title-lineHeight-large": {
|
|
225
189
|
"value": 1.5,
|
|
226
190
|
"$type": "number",
|
|
227
|
-
"$extensions": {
|
|
228
|
-
"org.primer.data": {
|
|
229
|
-
"fontSize": 32
|
|
230
|
-
},
|
|
231
|
-
"org.primer.figma": {
|
|
232
|
-
"collection": "typography",
|
|
233
|
-
"scopes": ["all"]
|
|
234
|
-
}
|
|
235
|
-
},
|
|
236
191
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
237
192
|
"isSource": true,
|
|
238
193
|
"original": {
|
|
239
194
|
"value": 1.5,
|
|
240
|
-
"$type": "number"
|
|
241
|
-
"$extensions": {
|
|
242
|
-
"org.primer.data": {
|
|
243
|
-
"fontSize": 32
|
|
244
|
-
},
|
|
245
|
-
"org.primer.figma": {
|
|
246
|
-
"collection": "typography",
|
|
247
|
-
"scopes": ["all"]
|
|
248
|
-
}
|
|
249
|
-
}
|
|
195
|
+
"$type": "number"
|
|
250
196
|
},
|
|
251
197
|
"name": "text-title-lineHeight-large",
|
|
252
198
|
"attributes": {},
|
|
@@ -255,29 +201,11 @@
|
|
|
255
201
|
"text-title-lineHeight-medium": {
|
|
256
202
|
"value": 1.6,
|
|
257
203
|
"$type": "number",
|
|
258
|
-
"$extensions": {
|
|
259
|
-
"org.primer.data": {
|
|
260
|
-
"fontSize": 20
|
|
261
|
-
},
|
|
262
|
-
"org.primer.figma": {
|
|
263
|
-
"collection": "typography",
|
|
264
|
-
"scopes": ["all"]
|
|
265
|
-
}
|
|
266
|
-
},
|
|
267
204
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
268
205
|
"isSource": true,
|
|
269
206
|
"original": {
|
|
270
207
|
"value": 1.6,
|
|
271
|
-
"$type": "number"
|
|
272
|
-
"$extensions": {
|
|
273
|
-
"org.primer.data": {
|
|
274
|
-
"fontSize": 20
|
|
275
|
-
},
|
|
276
|
-
"org.primer.figma": {
|
|
277
|
-
"collection": "typography",
|
|
278
|
-
"scopes": ["all"]
|
|
279
|
-
}
|
|
280
|
-
}
|
|
208
|
+
"$type": "number"
|
|
281
209
|
},
|
|
282
210
|
"name": "text-title-lineHeight-medium",
|
|
283
211
|
"attributes": {},
|
|
@@ -286,29 +214,11 @@
|
|
|
286
214
|
"text-title-lineHeight-small": {
|
|
287
215
|
"value": 1.5,
|
|
288
216
|
"$type": "number",
|
|
289
|
-
"$extensions": {
|
|
290
|
-
"org.primer.data": {
|
|
291
|
-
"fontSize": 16
|
|
292
|
-
},
|
|
293
|
-
"org.primer.figma": {
|
|
294
|
-
"collection": "typography",
|
|
295
|
-
"scopes": ["all"]
|
|
296
|
-
}
|
|
297
|
-
},
|
|
298
217
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
299
218
|
"isSource": true,
|
|
300
219
|
"original": {
|
|
301
220
|
"value": 1.5,
|
|
302
|
-
"$type": "number"
|
|
303
|
-
"$extensions": {
|
|
304
|
-
"org.primer.data": {
|
|
305
|
-
"fontSize": 16
|
|
306
|
-
},
|
|
307
|
-
"org.primer.figma": {
|
|
308
|
-
"collection": "typography",
|
|
309
|
-
"scopes": ["all"]
|
|
310
|
-
}
|
|
311
|
-
}
|
|
221
|
+
"$type": "number"
|
|
312
222
|
},
|
|
313
223
|
"name": "text-title-lineHeight-small",
|
|
314
224
|
"attributes": {},
|
|
@@ -514,29 +424,11 @@
|
|
|
514
424
|
"text-body-lineHeight-large": {
|
|
515
425
|
"value": 1.5,
|
|
516
426
|
"$type": "number",
|
|
517
|
-
"$extensions": {
|
|
518
|
-
"org.primer.data": {
|
|
519
|
-
"fontSize": 16
|
|
520
|
-
},
|
|
521
|
-
"org.primer.figma": {
|
|
522
|
-
"collection": "typography",
|
|
523
|
-
"scopes": ["all"]
|
|
524
|
-
}
|
|
525
|
-
},
|
|
526
427
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
527
428
|
"isSource": true,
|
|
528
429
|
"original": {
|
|
529
430
|
"value": 1.5,
|
|
530
|
-
"$type": "number"
|
|
531
|
-
"$extensions": {
|
|
532
|
-
"org.primer.data": {
|
|
533
|
-
"fontSize": 16
|
|
534
|
-
},
|
|
535
|
-
"org.primer.figma": {
|
|
536
|
-
"collection": "typography",
|
|
537
|
-
"scopes": ["all"]
|
|
538
|
-
}
|
|
539
|
-
}
|
|
431
|
+
"$type": "number"
|
|
540
432
|
},
|
|
541
433
|
"name": "text-body-lineHeight-large",
|
|
542
434
|
"attributes": {},
|
|
@@ -545,29 +437,11 @@
|
|
|
545
437
|
"text-body-lineHeight-medium": {
|
|
546
438
|
"value": 1.4285,
|
|
547
439
|
"$type": "number",
|
|
548
|
-
"$extensions": {
|
|
549
|
-
"org.primer.data": {
|
|
550
|
-
"fontSize": 14
|
|
551
|
-
},
|
|
552
|
-
"org.primer.figma": {
|
|
553
|
-
"collection": "typography",
|
|
554
|
-
"scopes": ["all"]
|
|
555
|
-
}
|
|
556
|
-
},
|
|
557
440
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
558
441
|
"isSource": true,
|
|
559
442
|
"original": {
|
|
560
443
|
"value": 1.4285,
|
|
561
|
-
"$type": "number"
|
|
562
|
-
"$extensions": {
|
|
563
|
-
"org.primer.data": {
|
|
564
|
-
"fontSize": 14
|
|
565
|
-
},
|
|
566
|
-
"org.primer.figma": {
|
|
567
|
-
"collection": "typography",
|
|
568
|
-
"scopes": ["all"]
|
|
569
|
-
}
|
|
570
|
-
}
|
|
444
|
+
"$type": "number"
|
|
571
445
|
},
|
|
572
446
|
"name": "text-body-lineHeight-medium",
|
|
573
447
|
"attributes": {},
|
|
@@ -576,29 +450,11 @@
|
|
|
576
450
|
"text-body-lineHeight-small": {
|
|
577
451
|
"value": 1.6666,
|
|
578
452
|
"$type": "number",
|
|
579
|
-
"$extensions": {
|
|
580
|
-
"org.primer.data": {
|
|
581
|
-
"fontSize": 12
|
|
582
|
-
},
|
|
583
|
-
"org.primer.figma": {
|
|
584
|
-
"collection": "typography",
|
|
585
|
-
"scopes": ["all"]
|
|
586
|
-
}
|
|
587
|
-
},
|
|
588
453
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
589
454
|
"isSource": true,
|
|
590
455
|
"original": {
|
|
591
456
|
"value": 1.6666,
|
|
592
|
-
"$type": "number"
|
|
593
|
-
"$extensions": {
|
|
594
|
-
"org.primer.data": {
|
|
595
|
-
"fontSize": 12
|
|
596
|
-
},
|
|
597
|
-
"org.primer.figma": {
|
|
598
|
-
"collection": "typography",
|
|
599
|
-
"scopes": ["all"]
|
|
600
|
-
}
|
|
601
|
-
}
|
|
457
|
+
"$type": "number"
|
|
602
458
|
},
|
|
603
459
|
"name": "text-body-lineHeight-small",
|
|
604
460
|
"attributes": {},
|
|
@@ -693,29 +549,11 @@
|
|
|
693
549
|
"text-caption-lineHeight": {
|
|
694
550
|
"value": 1.3333,
|
|
695
551
|
"$type": "number",
|
|
696
|
-
"$extensions": {
|
|
697
|
-
"org.primer.data": {
|
|
698
|
-
"fontSize": 12
|
|
699
|
-
},
|
|
700
|
-
"org.primer.figma": {
|
|
701
|
-
"collection": "typography",
|
|
702
|
-
"scopes": ["all"]
|
|
703
|
-
}
|
|
704
|
-
},
|
|
705
552
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
706
553
|
"isSource": true,
|
|
707
554
|
"original": {
|
|
708
555
|
"value": 1.3333,
|
|
709
|
-
"$type": "number"
|
|
710
|
-
"$extensions": {
|
|
711
|
-
"org.primer.data": {
|
|
712
|
-
"fontSize": 12
|
|
713
|
-
},
|
|
714
|
-
"org.primer.figma": {
|
|
715
|
-
"collection": "typography",
|
|
716
|
-
"scopes": ["all"]
|
|
717
|
-
}
|
|
718
|
-
}
|
|
556
|
+
"$type": "number"
|
|
719
557
|
},
|
|
720
558
|
"name": "text-caption-lineHeight",
|
|
721
559
|
"attributes": {},
|
|
@@ -770,29 +608,11 @@
|
|
|
770
608
|
"text-codeBlock-lineHeight": {
|
|
771
609
|
"value": 1.5385,
|
|
772
610
|
"$type": "number",
|
|
773
|
-
"$extensions": {
|
|
774
|
-
"org.primer.data": {
|
|
775
|
-
"fontSize": 13
|
|
776
|
-
},
|
|
777
|
-
"org.primer.figma": {
|
|
778
|
-
"collection": "typography",
|
|
779
|
-
"scopes": ["all"]
|
|
780
|
-
}
|
|
781
|
-
},
|
|
782
611
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
783
612
|
"isSource": true,
|
|
784
613
|
"original": {
|
|
785
614
|
"value": 1.5385,
|
|
786
|
-
"$type": "number"
|
|
787
|
-
"$extensions": {
|
|
788
|
-
"org.primer.data": {
|
|
789
|
-
"fontSize": 13
|
|
790
|
-
},
|
|
791
|
-
"org.primer.figma": {
|
|
792
|
-
"collection": "typography",
|
|
793
|
-
"scopes": ["all"]
|
|
794
|
-
}
|
|
795
|
-
}
|
|
615
|
+
"$type": "number"
|
|
796
616
|
},
|
|
797
617
|
"name": "text-codeBlock-lineHeight",
|
|
798
618
|
"attributes": {},
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"--fontStack-system": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
3
3
|
"--fontStack-sansSerif": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
4
4
|
"--fontStack-monospace": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
|
|
5
|
-
"--text-display-lineBoxHeight":
|
|
5
|
+
"--text-display-lineBoxHeight": "3.5rem",
|
|
6
6
|
"--text-display-size": "2.5rem",
|
|
7
7
|
"--text-display-lineHeight": 1.4,
|
|
8
8
|
"--text-display-weight": 500,
|
|
@@ -1,104 +1,4 @@
|
|
|
1
1
|
[
|
|
2
|
-
{
|
|
3
|
-
"name": "text/codeBlock/lineHeight",
|
|
4
|
-
"value": "20px",
|
|
5
|
-
"type": "FLOAT",
|
|
6
|
-
"refId": "typography/text/codeBlock/lineHeight",
|
|
7
|
-
"collection": "typography",
|
|
8
|
-
"mode": "default",
|
|
9
|
-
"group": "typography",
|
|
10
|
-
"scopes": ["ALL_SCOPES"]
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
"name": "text/caption/lineHeight",
|
|
14
|
-
"value": "16px",
|
|
15
|
-
"type": "FLOAT",
|
|
16
|
-
"refId": "typography/text/caption/lineHeight",
|
|
17
|
-
"collection": "typography",
|
|
18
|
-
"mode": "default",
|
|
19
|
-
"group": "typography",
|
|
20
|
-
"scopes": ["ALL_SCOPES"]
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"name": "text/body/lineHeight/small",
|
|
24
|
-
"value": "20px",
|
|
25
|
-
"type": "FLOAT",
|
|
26
|
-
"refId": "typography/text/body/lineHeight/small",
|
|
27
|
-
"collection": "typography",
|
|
28
|
-
"mode": "default",
|
|
29
|
-
"group": "typography",
|
|
30
|
-
"scopes": ["ALL_SCOPES"]
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
"name": "text/body/lineHeight/medium",
|
|
34
|
-
"value": "20px",
|
|
35
|
-
"type": "FLOAT",
|
|
36
|
-
"refId": "typography/text/body/lineHeight/medium",
|
|
37
|
-
"collection": "typography",
|
|
38
|
-
"mode": "default",
|
|
39
|
-
"group": "typography",
|
|
40
|
-
"scopes": ["ALL_SCOPES"]
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
"name": "text/body/lineHeight/large",
|
|
44
|
-
"value": "24px",
|
|
45
|
-
"type": "FLOAT",
|
|
46
|
-
"refId": "typography/text/body/lineHeight/large",
|
|
47
|
-
"collection": "typography",
|
|
48
|
-
"mode": "default",
|
|
49
|
-
"group": "typography",
|
|
50
|
-
"scopes": ["ALL_SCOPES"]
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
"name": "text/title/lineHeight/small",
|
|
54
|
-
"value": "24px",
|
|
55
|
-
"type": "FLOAT",
|
|
56
|
-
"refId": "typography/text/title/lineHeight/small",
|
|
57
|
-
"collection": "typography",
|
|
58
|
-
"mode": "default",
|
|
59
|
-
"group": "typography",
|
|
60
|
-
"scopes": ["ALL_SCOPES"]
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
"name": "text/title/lineHeight/medium",
|
|
64
|
-
"value": "32px",
|
|
65
|
-
"type": "FLOAT",
|
|
66
|
-
"refId": "typography/text/title/lineHeight/medium",
|
|
67
|
-
"collection": "typography",
|
|
68
|
-
"mode": "default",
|
|
69
|
-
"group": "typography",
|
|
70
|
-
"scopes": ["ALL_SCOPES"]
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
"name": "text/title/lineHeight/large",
|
|
74
|
-
"value": "48px",
|
|
75
|
-
"type": "FLOAT",
|
|
76
|
-
"refId": "typography/text/title/lineHeight/large",
|
|
77
|
-
"collection": "typography",
|
|
78
|
-
"mode": "default",
|
|
79
|
-
"group": "typography",
|
|
80
|
-
"scopes": ["ALL_SCOPES"]
|
|
81
|
-
},
|
|
82
|
-
{
|
|
83
|
-
"name": "text/display/lineHeight",
|
|
84
|
-
"value": "56px",
|
|
85
|
-
"type": "FLOAT",
|
|
86
|
-
"refId": "typography/text/display/lineHeight",
|
|
87
|
-
"collection": "typography",
|
|
88
|
-
"mode": "default",
|
|
89
|
-
"group": "typography",
|
|
90
|
-
"scopes": ["ALL_SCOPES"]
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
"name": "text/display/lineBoxHeight",
|
|
94
|
-
"value": "56px",
|
|
95
|
-
"type": "FLOAT",
|
|
96
|
-
"refId": "typography/text/display/lineBoxHeight",
|
|
97
|
-
"collection": "typography",
|
|
98
|
-
"mode": "default",
|
|
99
|
-
"group": "typography",
|
|
100
|
-
"scopes": ["ALL_SCOPES"]
|
|
101
|
-
},
|
|
102
2
|
{
|
|
103
3
|
"name": "fontStack/monospace",
|
|
104
4
|
"value": "SF Mono",
|
|
@@ -75,31 +75,13 @@
|
|
|
75
75
|
"path": ["fontStack", "monospace"]
|
|
76
76
|
},
|
|
77
77
|
"text-display-lineBoxHeight": {
|
|
78
|
-
"value":
|
|
79
|
-
"$type": "
|
|
80
|
-
"$extensions": {
|
|
81
|
-
"org.primer.data": {
|
|
82
|
-
"fontSize": 40
|
|
83
|
-
},
|
|
84
|
-
"org.primer.figma": {
|
|
85
|
-
"collection": "typography",
|
|
86
|
-
"scopes": ["all"]
|
|
87
|
-
}
|
|
88
|
-
},
|
|
78
|
+
"value": ["3.5rem", "56px"],
|
|
79
|
+
"$type": "dimension",
|
|
89
80
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
90
81
|
"isSource": true,
|
|
91
82
|
"original": {
|
|
92
|
-
"value":
|
|
93
|
-
"$type": "
|
|
94
|
-
"$extensions": {
|
|
95
|
-
"org.primer.data": {
|
|
96
|
-
"fontSize": 40
|
|
97
|
-
},
|
|
98
|
-
"org.primer.figma": {
|
|
99
|
-
"collection": "typography",
|
|
100
|
-
"scopes": ["all"]
|
|
101
|
-
}
|
|
102
|
-
}
|
|
83
|
+
"value": "56px",
|
|
84
|
+
"$type": "dimension"
|
|
103
85
|
},
|
|
104
86
|
"name": "text-display-lineBoxHeight",
|
|
105
87
|
"attributes": {},
|
|
@@ -121,29 +103,11 @@
|
|
|
121
103
|
"text-display-lineHeight": {
|
|
122
104
|
"value": 1.4,
|
|
123
105
|
"$type": "number",
|
|
124
|
-
"$extensions": {
|
|
125
|
-
"org.primer.data": {
|
|
126
|
-
"fontSize": 40
|
|
127
|
-
},
|
|
128
|
-
"org.primer.figma": {
|
|
129
|
-
"collection": "typography",
|
|
130
|
-
"scopes": ["all"]
|
|
131
|
-
}
|
|
132
|
-
},
|
|
133
106
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
134
107
|
"isSource": true,
|
|
135
108
|
"original": {
|
|
136
109
|
"value": 1.4,
|
|
137
|
-
"$type": "number"
|
|
138
|
-
"$extensions": {
|
|
139
|
-
"org.primer.data": {
|
|
140
|
-
"fontSize": 40
|
|
141
|
-
},
|
|
142
|
-
"org.primer.figma": {
|
|
143
|
-
"collection": "typography",
|
|
144
|
-
"scopes": ["all"]
|
|
145
|
-
}
|
|
146
|
-
}
|
|
110
|
+
"$type": "number"
|
|
147
111
|
},
|
|
148
112
|
"name": "text-display-lineHeight",
|
|
149
113
|
"attributes": {},
|
|
@@ -224,29 +188,11 @@
|
|
|
224
188
|
"text-title-lineHeight-large": {
|
|
225
189
|
"value": 1.5,
|
|
226
190
|
"$type": "number",
|
|
227
|
-
"$extensions": {
|
|
228
|
-
"org.primer.data": {
|
|
229
|
-
"fontSize": 32
|
|
230
|
-
},
|
|
231
|
-
"org.primer.figma": {
|
|
232
|
-
"collection": "typography",
|
|
233
|
-
"scopes": ["all"]
|
|
234
|
-
}
|
|
235
|
-
},
|
|
236
191
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
237
192
|
"isSource": true,
|
|
238
193
|
"original": {
|
|
239
194
|
"value": 1.5,
|
|
240
|
-
"$type": "number"
|
|
241
|
-
"$extensions": {
|
|
242
|
-
"org.primer.data": {
|
|
243
|
-
"fontSize": 32
|
|
244
|
-
},
|
|
245
|
-
"org.primer.figma": {
|
|
246
|
-
"collection": "typography",
|
|
247
|
-
"scopes": ["all"]
|
|
248
|
-
}
|
|
249
|
-
}
|
|
195
|
+
"$type": "number"
|
|
250
196
|
},
|
|
251
197
|
"name": "text-title-lineHeight-large",
|
|
252
198
|
"attributes": {},
|
|
@@ -255,29 +201,11 @@
|
|
|
255
201
|
"text-title-lineHeight-medium": {
|
|
256
202
|
"value": 1.6,
|
|
257
203
|
"$type": "number",
|
|
258
|
-
"$extensions": {
|
|
259
|
-
"org.primer.data": {
|
|
260
|
-
"fontSize": 20
|
|
261
|
-
},
|
|
262
|
-
"org.primer.figma": {
|
|
263
|
-
"collection": "typography",
|
|
264
|
-
"scopes": ["all"]
|
|
265
|
-
}
|
|
266
|
-
},
|
|
267
204
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
268
205
|
"isSource": true,
|
|
269
206
|
"original": {
|
|
270
207
|
"value": 1.6,
|
|
271
|
-
"$type": "number"
|
|
272
|
-
"$extensions": {
|
|
273
|
-
"org.primer.data": {
|
|
274
|
-
"fontSize": 20
|
|
275
|
-
},
|
|
276
|
-
"org.primer.figma": {
|
|
277
|
-
"collection": "typography",
|
|
278
|
-
"scopes": ["all"]
|
|
279
|
-
}
|
|
280
|
-
}
|
|
208
|
+
"$type": "number"
|
|
281
209
|
},
|
|
282
210
|
"name": "text-title-lineHeight-medium",
|
|
283
211
|
"attributes": {},
|
|
@@ -286,29 +214,11 @@
|
|
|
286
214
|
"text-title-lineHeight-small": {
|
|
287
215
|
"value": 1.5,
|
|
288
216
|
"$type": "number",
|
|
289
|
-
"$extensions": {
|
|
290
|
-
"org.primer.data": {
|
|
291
|
-
"fontSize": 16
|
|
292
|
-
},
|
|
293
|
-
"org.primer.figma": {
|
|
294
|
-
"collection": "typography",
|
|
295
|
-
"scopes": ["all"]
|
|
296
|
-
}
|
|
297
|
-
},
|
|
298
217
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
299
218
|
"isSource": true,
|
|
300
219
|
"original": {
|
|
301
220
|
"value": 1.5,
|
|
302
|
-
"$type": "number"
|
|
303
|
-
"$extensions": {
|
|
304
|
-
"org.primer.data": {
|
|
305
|
-
"fontSize": 16
|
|
306
|
-
},
|
|
307
|
-
"org.primer.figma": {
|
|
308
|
-
"collection": "typography",
|
|
309
|
-
"scopes": ["all"]
|
|
310
|
-
}
|
|
311
|
-
}
|
|
221
|
+
"$type": "number"
|
|
312
222
|
},
|
|
313
223
|
"name": "text-title-lineHeight-small",
|
|
314
224
|
"attributes": {},
|
|
@@ -514,29 +424,11 @@
|
|
|
514
424
|
"text-body-lineHeight-large": {
|
|
515
425
|
"value": 1.5,
|
|
516
426
|
"$type": "number",
|
|
517
|
-
"$extensions": {
|
|
518
|
-
"org.primer.data": {
|
|
519
|
-
"fontSize": 16
|
|
520
|
-
},
|
|
521
|
-
"org.primer.figma": {
|
|
522
|
-
"collection": "typography",
|
|
523
|
-
"scopes": ["all"]
|
|
524
|
-
}
|
|
525
|
-
},
|
|
526
427
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
527
428
|
"isSource": true,
|
|
528
429
|
"original": {
|
|
529
430
|
"value": 1.5,
|
|
530
|
-
"$type": "number"
|
|
531
|
-
"$extensions": {
|
|
532
|
-
"org.primer.data": {
|
|
533
|
-
"fontSize": 16
|
|
534
|
-
},
|
|
535
|
-
"org.primer.figma": {
|
|
536
|
-
"collection": "typography",
|
|
537
|
-
"scopes": ["all"]
|
|
538
|
-
}
|
|
539
|
-
}
|
|
431
|
+
"$type": "number"
|
|
540
432
|
},
|
|
541
433
|
"name": "text-body-lineHeight-large",
|
|
542
434
|
"attributes": {},
|
|
@@ -545,29 +437,11 @@
|
|
|
545
437
|
"text-body-lineHeight-medium": {
|
|
546
438
|
"value": 1.4285,
|
|
547
439
|
"$type": "number",
|
|
548
|
-
"$extensions": {
|
|
549
|
-
"org.primer.data": {
|
|
550
|
-
"fontSize": 14
|
|
551
|
-
},
|
|
552
|
-
"org.primer.figma": {
|
|
553
|
-
"collection": "typography",
|
|
554
|
-
"scopes": ["all"]
|
|
555
|
-
}
|
|
556
|
-
},
|
|
557
440
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
558
441
|
"isSource": true,
|
|
559
442
|
"original": {
|
|
560
443
|
"value": 1.4285,
|
|
561
|
-
"$type": "number"
|
|
562
|
-
"$extensions": {
|
|
563
|
-
"org.primer.data": {
|
|
564
|
-
"fontSize": 14
|
|
565
|
-
},
|
|
566
|
-
"org.primer.figma": {
|
|
567
|
-
"collection": "typography",
|
|
568
|
-
"scopes": ["all"]
|
|
569
|
-
}
|
|
570
|
-
}
|
|
444
|
+
"$type": "number"
|
|
571
445
|
},
|
|
572
446
|
"name": "text-body-lineHeight-medium",
|
|
573
447
|
"attributes": {},
|
|
@@ -576,29 +450,11 @@
|
|
|
576
450
|
"text-body-lineHeight-small": {
|
|
577
451
|
"value": 1.6666,
|
|
578
452
|
"$type": "number",
|
|
579
|
-
"$extensions": {
|
|
580
|
-
"org.primer.data": {
|
|
581
|
-
"fontSize": 12
|
|
582
|
-
},
|
|
583
|
-
"org.primer.figma": {
|
|
584
|
-
"collection": "typography",
|
|
585
|
-
"scopes": ["all"]
|
|
586
|
-
}
|
|
587
|
-
},
|
|
588
453
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
589
454
|
"isSource": true,
|
|
590
455
|
"original": {
|
|
591
456
|
"value": 1.6666,
|
|
592
|
-
"$type": "number"
|
|
593
|
-
"$extensions": {
|
|
594
|
-
"org.primer.data": {
|
|
595
|
-
"fontSize": 12
|
|
596
|
-
},
|
|
597
|
-
"org.primer.figma": {
|
|
598
|
-
"collection": "typography",
|
|
599
|
-
"scopes": ["all"]
|
|
600
|
-
}
|
|
601
|
-
}
|
|
457
|
+
"$type": "number"
|
|
602
458
|
},
|
|
603
459
|
"name": "text-body-lineHeight-small",
|
|
604
460
|
"attributes": {},
|
|
@@ -693,29 +549,11 @@
|
|
|
693
549
|
"text-caption-lineHeight": {
|
|
694
550
|
"value": 1.3333,
|
|
695
551
|
"$type": "number",
|
|
696
|
-
"$extensions": {
|
|
697
|
-
"org.primer.data": {
|
|
698
|
-
"fontSize": 12
|
|
699
|
-
},
|
|
700
|
-
"org.primer.figma": {
|
|
701
|
-
"collection": "typography",
|
|
702
|
-
"scopes": ["all"]
|
|
703
|
-
}
|
|
704
|
-
},
|
|
705
552
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
706
553
|
"isSource": true,
|
|
707
554
|
"original": {
|
|
708
555
|
"value": 1.3333,
|
|
709
|
-
"$type": "number"
|
|
710
|
-
"$extensions": {
|
|
711
|
-
"org.primer.data": {
|
|
712
|
-
"fontSize": 12
|
|
713
|
-
},
|
|
714
|
-
"org.primer.figma": {
|
|
715
|
-
"collection": "typography",
|
|
716
|
-
"scopes": ["all"]
|
|
717
|
-
}
|
|
718
|
-
}
|
|
556
|
+
"$type": "number"
|
|
719
557
|
},
|
|
720
558
|
"name": "text-caption-lineHeight",
|
|
721
559
|
"attributes": {},
|
|
@@ -770,29 +608,11 @@
|
|
|
770
608
|
"text-codeBlock-lineHeight": {
|
|
771
609
|
"value": 1.5385,
|
|
772
610
|
"$type": "number",
|
|
773
|
-
"$extensions": {
|
|
774
|
-
"org.primer.data": {
|
|
775
|
-
"fontSize": 13
|
|
776
|
-
},
|
|
777
|
-
"org.primer.figma": {
|
|
778
|
-
"collection": "typography",
|
|
779
|
-
"scopes": ["all"]
|
|
780
|
-
}
|
|
781
|
-
},
|
|
782
611
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
783
612
|
"isSource": true,
|
|
784
613
|
"original": {
|
|
785
614
|
"value": 1.5385,
|
|
786
|
-
"$type": "number"
|
|
787
|
-
"$extensions": {
|
|
788
|
-
"org.primer.data": {
|
|
789
|
-
"fontSize": 13
|
|
790
|
-
},
|
|
791
|
-
"org.primer.figma": {
|
|
792
|
-
"collection": "typography",
|
|
793
|
-
"scopes": ["all"]
|
|
794
|
-
}
|
|
795
|
-
}
|
|
615
|
+
"$type": "number"
|
|
796
616
|
},
|
|
797
617
|
"name": "text-codeBlock-lineHeight",
|
|
798
618
|
"attributes": {},
|
package/package.json
CHANGED
|
@@ -23,7 +23,6 @@ import {
|
|
|
23
23
|
shadowToCss,
|
|
24
24
|
typographyToCss,
|
|
25
25
|
dimensionToRemPxArray,
|
|
26
|
-
floatToPixel,
|
|
27
26
|
} from './transformers'
|
|
28
27
|
import {
|
|
29
28
|
javascriptCommonJs,
|
|
@@ -133,11 +132,6 @@ StyleDictionary.registerTransform({
|
|
|
133
132
|
...colorToHex,
|
|
134
133
|
})
|
|
135
134
|
|
|
136
|
-
StyleDictionary.registerTransform({
|
|
137
|
-
name: 'float/pixel',
|
|
138
|
-
...floatToPixel,
|
|
139
|
-
})
|
|
140
|
-
|
|
141
135
|
StyleDictionary.registerTransform({
|
|
142
136
|
name: 'dimension/rem',
|
|
143
137
|
...dimensionToRem,
|
package/src/platforms/figma.ts
CHANGED
|
@@ -2,27 +2,10 @@ import {z} from 'zod'
|
|
|
2
2
|
import {baseToken} from './baseToken'
|
|
3
3
|
import {referenceValue} from './referenceValue'
|
|
4
4
|
import {tokenType} from './tokenType'
|
|
5
|
-
import {scopes} from './scopes'
|
|
6
|
-
import {collection} from './collections'
|
|
7
5
|
|
|
8
6
|
export const numberToken = baseToken
|
|
9
7
|
.extend({
|
|
10
8
|
$value: z.union([z.number(), referenceValue]),
|
|
11
9
|
$type: tokenType('number'),
|
|
12
|
-
$extensions: z
|
|
13
|
-
.object({
|
|
14
|
-
'org.primer.data': z
|
|
15
|
-
.object({
|
|
16
|
-
fontSize: z.number().optional(),
|
|
17
|
-
})
|
|
18
|
-
.optional(),
|
|
19
|
-
'org.primer.figma': z
|
|
20
|
-
.object({
|
|
21
|
-
collection: collection(['typography']).optional(),
|
|
22
|
-
scopes: scopes(['all']).optional(),
|
|
23
|
-
})
|
|
24
|
-
.optional(),
|
|
25
|
-
})
|
|
26
|
-
.optional(),
|
|
27
10
|
})
|
|
28
11
|
.strict()
|
|
@@ -34,17 +34,8 @@
|
|
|
34
34
|
"text": {
|
|
35
35
|
"display": {
|
|
36
36
|
"lineBoxHeight": {
|
|
37
|
-
"$value":
|
|
38
|
-
"$type": "
|
|
39
|
-
"$extensions": {
|
|
40
|
-
"org.primer.data": {
|
|
41
|
-
"fontSize": 40
|
|
42
|
-
},
|
|
43
|
-
"org.primer.figma": {
|
|
44
|
-
"collection": "typography",
|
|
45
|
-
"scopes": ["all"]
|
|
46
|
-
}
|
|
47
|
-
}
|
|
37
|
+
"$value": "56px",
|
|
38
|
+
"$type": "dimension"
|
|
48
39
|
},
|
|
49
40
|
"size": {
|
|
50
41
|
"$value": "40px",
|
|
@@ -52,16 +43,7 @@
|
|
|
52
43
|
},
|
|
53
44
|
"lineHeight": {
|
|
54
45
|
"$value": 1.4,
|
|
55
|
-
"$type": "number"
|
|
56
|
-
"$extensions": {
|
|
57
|
-
"org.primer.data": {
|
|
58
|
-
"fontSize": 40
|
|
59
|
-
},
|
|
60
|
-
"org.primer.figma": {
|
|
61
|
-
"collection": "typography",
|
|
62
|
-
"scopes": ["all"]
|
|
63
|
-
}
|
|
64
|
-
}
|
|
46
|
+
"$type": "number"
|
|
65
47
|
},
|
|
66
48
|
"weight": {
|
|
67
49
|
"$value": "{base.text.weight.medium}",
|
|
@@ -96,42 +78,15 @@
|
|
|
96
78
|
"lineHeight": {
|
|
97
79
|
"large": {
|
|
98
80
|
"$value": 1.5,
|
|
99
|
-
"$type": "number"
|
|
100
|
-
"$extensions": {
|
|
101
|
-
"org.primer.data": {
|
|
102
|
-
"fontSize": 32
|
|
103
|
-
},
|
|
104
|
-
"org.primer.figma": {
|
|
105
|
-
"collection": "typography",
|
|
106
|
-
"scopes": ["all"]
|
|
107
|
-
}
|
|
108
|
-
}
|
|
81
|
+
"$type": "number"
|
|
109
82
|
},
|
|
110
83
|
"medium": {
|
|
111
84
|
"$value": 1.6,
|
|
112
|
-
"$type": "number"
|
|
113
|
-
"$extensions": {
|
|
114
|
-
"org.primer.data": {
|
|
115
|
-
"fontSize": 20
|
|
116
|
-
},
|
|
117
|
-
"org.primer.figma": {
|
|
118
|
-
"collection": "typography",
|
|
119
|
-
"scopes": ["all"]
|
|
120
|
-
}
|
|
121
|
-
}
|
|
85
|
+
"$type": "number"
|
|
122
86
|
},
|
|
123
87
|
"small": {
|
|
124
88
|
"$value": 1.5,
|
|
125
|
-
"$type": "number"
|
|
126
|
-
"$extensions": {
|
|
127
|
-
"org.primer.data": {
|
|
128
|
-
"fontSize": 16
|
|
129
|
-
},
|
|
130
|
-
"org.primer.figma": {
|
|
131
|
-
"collection": "typography",
|
|
132
|
-
"scopes": ["all"]
|
|
133
|
-
}
|
|
134
|
-
}
|
|
89
|
+
"$type": "number"
|
|
135
90
|
}
|
|
136
91
|
},
|
|
137
92
|
"weight": {
|
|
@@ -223,42 +178,15 @@
|
|
|
223
178
|
"lineHeight": {
|
|
224
179
|
"large": {
|
|
225
180
|
"$value": 1.5,
|
|
226
|
-
"$type": "number"
|
|
227
|
-
"$extensions": {
|
|
228
|
-
"org.primer.data": {
|
|
229
|
-
"fontSize": 16
|
|
230
|
-
},
|
|
231
|
-
"org.primer.figma": {
|
|
232
|
-
"collection": "typography",
|
|
233
|
-
"scopes": ["all"]
|
|
234
|
-
}
|
|
235
|
-
}
|
|
181
|
+
"$type": "number"
|
|
236
182
|
},
|
|
237
183
|
"medium": {
|
|
238
184
|
"$value": 1.4285,
|
|
239
|
-
"$type": "number"
|
|
240
|
-
"$extensions": {
|
|
241
|
-
"org.primer.data": {
|
|
242
|
-
"fontSize": 14
|
|
243
|
-
},
|
|
244
|
-
"org.primer.figma": {
|
|
245
|
-
"collection": "typography",
|
|
246
|
-
"scopes": ["all"]
|
|
247
|
-
}
|
|
248
|
-
}
|
|
185
|
+
"$type": "number"
|
|
249
186
|
},
|
|
250
187
|
"small": {
|
|
251
188
|
"$value": 1.6666,
|
|
252
|
-
"$type": "number"
|
|
253
|
-
"$extensions": {
|
|
254
|
-
"org.primer.data": {
|
|
255
|
-
"fontSize": 12
|
|
256
|
-
},
|
|
257
|
-
"org.primer.figma": {
|
|
258
|
-
"collection": "typography",
|
|
259
|
-
"scopes": ["all"]
|
|
260
|
-
}
|
|
261
|
-
}
|
|
189
|
+
"$type": "number"
|
|
262
190
|
}
|
|
263
191
|
},
|
|
264
192
|
"weight": {
|
|
@@ -305,16 +233,7 @@
|
|
|
305
233
|
},
|
|
306
234
|
"lineHeight": {
|
|
307
235
|
"$value": 1.3333,
|
|
308
|
-
"$type": "number"
|
|
309
|
-
"$extensions": {
|
|
310
|
-
"org.primer.data": {
|
|
311
|
-
"fontSize": 12
|
|
312
|
-
},
|
|
313
|
-
"org.primer.figma": {
|
|
314
|
-
"collection": "typography",
|
|
315
|
-
"scopes": ["all"]
|
|
316
|
-
}
|
|
317
|
-
}
|
|
236
|
+
"$type": "number"
|
|
318
237
|
},
|
|
319
238
|
"weight": {
|
|
320
239
|
"$value": "{base.text.weight.normal}",
|
|
@@ -338,16 +257,7 @@
|
|
|
338
257
|
},
|
|
339
258
|
"lineHeight": {
|
|
340
259
|
"$value": 1.5385,
|
|
341
|
-
"$type": "number"
|
|
342
|
-
"$extensions": {
|
|
343
|
-
"org.primer.data": {
|
|
344
|
-
"fontSize": 13
|
|
345
|
-
},
|
|
346
|
-
"org.primer.figma": {
|
|
347
|
-
"collection": "typography",
|
|
348
|
-
"scopes": ["all"]
|
|
349
|
-
}
|
|
350
|
-
}
|
|
260
|
+
"$type": "number"
|
|
351
261
|
},
|
|
352
262
|
"weight": {
|
|
353
263
|
"$value": "{base.text.weight.normal}",
|
|
@@ -4,7 +4,6 @@ export {colorToHexAlpha} from './colorToHexAlpha'
|
|
|
4
4
|
export {colorToHexMix} from './colorToHexMix'
|
|
5
5
|
export {colorToRgbAlpha} from './colorToRgbAlpha'
|
|
6
6
|
export {colorToRgbaFloat} from './colorToRgbaFloat'
|
|
7
|
-
export {floatToPixel} from './floatToPixel'
|
|
8
7
|
export {dimensionToRem} from './dimensionToRem'
|
|
9
8
|
export {dimensionToRemPxArray} from './dimensionToRemPxArray'
|
|
10
9
|
export {dimensionToPixelUnitless} from './dimensionToPixelUnitless'
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import type StyleDictionary from 'style-dictionary'
|
|
2
|
-
import {isNumber} from '../filters'
|
|
3
|
-
/**
|
|
4
|
-
* takes a value and returns it if its a px string if it is a float and the token has a fontSize value in extensions['org.primer.data']
|
|
5
|
-
* @param value
|
|
6
|
-
* @returns string
|
|
7
|
-
*/
|
|
8
|
-
export const convertFloatToPixel = (token: StyleDictionary.TransformedToken) => {
|
|
9
|
-
// short circut if value is not a number
|
|
10
|
-
if (
|
|
11
|
-
typeof token.value !== 'number' ||
|
|
12
|
-
!token.$extensions?.['org.primer.data']?.fontSize ||
|
|
13
|
-
typeof token.$extensions?.['org.primer.data']?.fontSize !== 'number'
|
|
14
|
-
) {
|
|
15
|
-
return token.value
|
|
16
|
-
}
|
|
17
|
-
// convert value
|
|
18
|
-
const convertedValue = token.$extensions?.['org.primer.data']?.fontSize * token.value
|
|
19
|
-
// return converted value
|
|
20
|
-
return convertedValue === 0 ? 0 : `${Math.round(convertedValue)}px`
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* @description converts a float value to a pixel value based on the provided fontSize on the tokersn extension
|
|
24
|
-
* @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
|
|
25
|
-
* @matcher matches all tokens of $type `isNumber`
|
|
26
|
-
* @transformer returns a pixel string
|
|
27
|
-
*/
|
|
28
|
-
export const floatToPixel: StyleDictionary.Transform = {
|
|
29
|
-
type: `value`,
|
|
30
|
-
transitive: true,
|
|
31
|
-
matcher: isNumber,
|
|
32
|
-
transformer: (token: StyleDictionary.TransformedToken): string => convertFloatToPixel(token),
|
|
33
|
-
}
|