@primer/primitives 11.6.1-rc.d0027616 → 11.7.0-rc.9e55ef3b
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/DESIGN_TOKENS_SPEC.md +1 -1
- package/dist/css/functional/size/size.css +0 -5
- package/dist/css/functional/typography/typography.css +0 -1
- package/dist/docs/functional/size/size.json +0 -135
- package/dist/docs/functional/typography/typography.json +0 -35
- package/dist/fallbacks/functional/size/size.json +0 -5
- package/dist/fallbacks/functional/typography/typography.json +0 -1
- package/dist/figma/dimension/dimension.json +0 -55
- package/dist/figma/typography/typography.json +0 -7
- package/dist/styleLint/functional/size/size.json +0 -135
- package/dist/styleLint/functional/typography/typography.json +0 -35
- package/package.json +1 -1
- package/src/tokens/functional/size/size.json5 +0 -50
- package/src/tokens/functional/typography/typography.json5 +0 -14
package/DESIGN_TOKENS_SPEC.md
CHANGED
|
@@ -233,7 +233,7 @@ Tokens for interactive controls like buttons, inputs, and selects.
|
|
|
233
233
|
**Scale:** Use xsmall/small for dense layouts, medium for default UI, large/xlarge for prominent CTAs.
|
|
234
234
|
|
|
235
235
|
**Size patterns:**
|
|
236
|
-
- `control-[xsmall, small, medium, large, xlarge]-[gap,
|
|
236
|
+
- `control-[xsmall, small, medium, large, xlarge]-[gap, paddingBlock, paddingInline-condensed, paddingInline-normal, paddingInline-spacious, size]`
|
|
237
237
|
|
|
238
238
|
**State variants:**
|
|
239
239
|
- `control-checked-[bgColor-active, bgColor-disabled, bgColor-hover, bgColor-rest, borderColor-active, borderColor-disabled, borderColor-hover, borderColor-rest, fgColor-disabled, fgColor-rest]`
|
|
@@ -15,13 +15,11 @@
|
|
|
15
15
|
--overlay-width-xsmall: 12rem;
|
|
16
16
|
--spinner-strokeWidth-default: 0.125rem;
|
|
17
17
|
--control-large-gap: 0.5rem;
|
|
18
|
-
--control-large-lineBoxHeight: 1.25rem;
|
|
19
18
|
--control-large-paddingInline-condensed: 0.5rem;
|
|
20
19
|
--control-large-paddingInline-normal: 0.75rem;
|
|
21
20
|
--control-large-paddingInline-spacious: 1rem;
|
|
22
21
|
--control-large-size: 2.5rem;
|
|
23
22
|
--control-medium-gap: 0.5rem;
|
|
24
|
-
--control-medium-lineBoxHeight: 1.25rem;
|
|
25
23
|
--control-medium-paddingInline-condensed: 0.5rem;
|
|
26
24
|
--control-medium-paddingInline-normal: 0.75rem;
|
|
27
25
|
--control-medium-paddingInline-spacious: 1rem;
|
|
@@ -29,20 +27,17 @@
|
|
|
29
27
|
--control-minTarget-coarse: 2.75rem;
|
|
30
28
|
--control-minTarget-fine: 1rem;
|
|
31
29
|
--control-small-gap: 0.25rem;
|
|
32
|
-
--control-small-lineBoxHeight: 1.25rem;
|
|
33
30
|
--control-small-paddingBlock: 0.25rem;
|
|
34
31
|
--control-small-paddingInline-condensed: 0.5rem;
|
|
35
32
|
--control-small-paddingInline-normal: 0.75rem;
|
|
36
33
|
--control-small-paddingInline-spacious: 1rem;
|
|
37
34
|
--control-small-size: 1.75rem;
|
|
38
35
|
--control-xlarge-gap: 0.5rem;
|
|
39
|
-
--control-xlarge-lineBoxHeight: 1.25rem;
|
|
40
36
|
--control-xlarge-paddingInline-condensed: 0.5rem;
|
|
41
37
|
--control-xlarge-paddingInline-normal: 0.75rem;
|
|
42
38
|
--control-xlarge-paddingInline-spacious: 1rem;
|
|
43
39
|
--control-xlarge-size: 3rem;
|
|
44
40
|
--control-xsmall-gap: 0.25rem;
|
|
45
|
-
--control-xsmall-lineBoxHeight: 1.25rem;
|
|
46
41
|
--control-xsmall-paddingInline-condensed: 0.25rem;
|
|
47
42
|
--control-xsmall-paddingInline-normal: 0.5rem;
|
|
48
43
|
--control-xsmall-paddingInline-spacious: 0.75rem;
|
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
--text-codeBlock-lineHeight: var(--base-text-lineHeight-normal);
|
|
19
19
|
--text-codeBlock-weight: var(--base-text-weight-normal);
|
|
20
20
|
--text-codeInline-weight: var(--base-text-weight-normal);
|
|
21
|
-
--text-display-lineBoxHeight: var(--base-text-lineHeight-snug);
|
|
22
21
|
--text-display-lineHeight: var(--base-text-lineHeight-snug);
|
|
23
22
|
--text-display-size: var(--base-text-size-2xl);
|
|
24
23
|
--text-display-weight: var(--base-text-weight-medium);
|
|
@@ -26,33 +26,6 @@
|
|
|
26
26
|
"value": "0.5rem",
|
|
27
27
|
"type": "dimension"
|
|
28
28
|
},
|
|
29
|
-
"control-large-lineBoxHeight": {
|
|
30
|
-
"key": "{control.large.lineBoxHeight}",
|
|
31
|
-
"$extensions": {
|
|
32
|
-
"org.primer.figma": {
|
|
33
|
-
"collection": "pattern/size",
|
|
34
|
-
"scopes": ["size"]
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
|
-
"filePath": "src/tokens/functional/size/size.json5",
|
|
38
|
-
"isSource": true,
|
|
39
|
-
"original": {
|
|
40
|
-
"$value": "{base.size.20}",
|
|
41
|
-
"$type": "dimension",
|
|
42
|
-
"$extensions": {
|
|
43
|
-
"org.primer.figma": {
|
|
44
|
-
"collection": "pattern/size",
|
|
45
|
-
"scopes": ["size"]
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
"key": "{control.large.lineBoxHeight}"
|
|
49
|
-
},
|
|
50
|
-
"name": "control-large-lineBoxHeight",
|
|
51
|
-
"attributes": {},
|
|
52
|
-
"path": ["control", "large", "lineBoxHeight"],
|
|
53
|
-
"value": "1.25rem",
|
|
54
|
-
"type": "dimension"
|
|
55
|
-
},
|
|
56
29
|
"control-large-paddingBlock": {
|
|
57
30
|
"key": "{control.large.paddingBlock}",
|
|
58
31
|
"$extensions": {
|
|
@@ -218,33 +191,6 @@
|
|
|
218
191
|
"value": "0.5rem",
|
|
219
192
|
"type": "dimension"
|
|
220
193
|
},
|
|
221
|
-
"control-medium-lineBoxHeight": {
|
|
222
|
-
"key": "{control.medium.lineBoxHeight}",
|
|
223
|
-
"$extensions": {
|
|
224
|
-
"org.primer.figma": {
|
|
225
|
-
"collection": "pattern/size",
|
|
226
|
-
"scopes": ["size"]
|
|
227
|
-
}
|
|
228
|
-
},
|
|
229
|
-
"filePath": "src/tokens/functional/size/size.json5",
|
|
230
|
-
"isSource": true,
|
|
231
|
-
"original": {
|
|
232
|
-
"$value": "{base.size.20}",
|
|
233
|
-
"$type": "dimension",
|
|
234
|
-
"$extensions": {
|
|
235
|
-
"org.primer.figma": {
|
|
236
|
-
"collection": "pattern/size",
|
|
237
|
-
"scopes": ["size"]
|
|
238
|
-
}
|
|
239
|
-
},
|
|
240
|
-
"key": "{control.medium.lineBoxHeight}"
|
|
241
|
-
},
|
|
242
|
-
"name": "control-medium-lineBoxHeight",
|
|
243
|
-
"attributes": {},
|
|
244
|
-
"path": ["control", "medium", "lineBoxHeight"],
|
|
245
|
-
"value": "1.25rem",
|
|
246
|
-
"type": "dimension"
|
|
247
|
-
},
|
|
248
194
|
"control-medium-paddingBlock": {
|
|
249
195
|
"key": "{control.medium.paddingBlock}",
|
|
250
196
|
"$extensions": {
|
|
@@ -464,33 +410,6 @@
|
|
|
464
410
|
"value": "0.25rem",
|
|
465
411
|
"type": "dimension"
|
|
466
412
|
},
|
|
467
|
-
"control-small-lineBoxHeight": {
|
|
468
|
-
"key": "{control.small.lineBoxHeight}",
|
|
469
|
-
"$extensions": {
|
|
470
|
-
"org.primer.figma": {
|
|
471
|
-
"collection": "pattern/size",
|
|
472
|
-
"scopes": ["size"]
|
|
473
|
-
}
|
|
474
|
-
},
|
|
475
|
-
"filePath": "src/tokens/functional/size/size.json5",
|
|
476
|
-
"isSource": true,
|
|
477
|
-
"original": {
|
|
478
|
-
"$value": "{base.size.20}",
|
|
479
|
-
"$type": "dimension",
|
|
480
|
-
"$extensions": {
|
|
481
|
-
"org.primer.figma": {
|
|
482
|
-
"collection": "pattern/size",
|
|
483
|
-
"scopes": ["size"]
|
|
484
|
-
}
|
|
485
|
-
},
|
|
486
|
-
"key": "{control.small.lineBoxHeight}"
|
|
487
|
-
},
|
|
488
|
-
"name": "control-small-lineBoxHeight",
|
|
489
|
-
"attributes": {},
|
|
490
|
-
"path": ["control", "small", "lineBoxHeight"],
|
|
491
|
-
"value": "1.25rem",
|
|
492
|
-
"type": "dimension"
|
|
493
|
-
},
|
|
494
413
|
"control-small-paddingBlock": {
|
|
495
414
|
"key": "{control.small.paddingBlock}",
|
|
496
415
|
"$extensions": {
|
|
@@ -653,33 +572,6 @@
|
|
|
653
572
|
"value": "0.5rem",
|
|
654
573
|
"type": "dimension"
|
|
655
574
|
},
|
|
656
|
-
"control-xlarge-lineBoxHeight": {
|
|
657
|
-
"key": "{control.xlarge.lineBoxHeight}",
|
|
658
|
-
"$extensions": {
|
|
659
|
-
"org.primer.figma": {
|
|
660
|
-
"collection": "pattern/size",
|
|
661
|
-
"scopes": ["size"]
|
|
662
|
-
}
|
|
663
|
-
},
|
|
664
|
-
"filePath": "src/tokens/functional/size/size.json5",
|
|
665
|
-
"isSource": true,
|
|
666
|
-
"original": {
|
|
667
|
-
"$value": "{base.size.20}",
|
|
668
|
-
"$type": "dimension",
|
|
669
|
-
"$extensions": {
|
|
670
|
-
"org.primer.figma": {
|
|
671
|
-
"collection": "pattern/size",
|
|
672
|
-
"scopes": ["size"]
|
|
673
|
-
}
|
|
674
|
-
},
|
|
675
|
-
"key": "{control.xlarge.lineBoxHeight}"
|
|
676
|
-
},
|
|
677
|
-
"name": "control-xlarge-lineBoxHeight",
|
|
678
|
-
"attributes": {},
|
|
679
|
-
"path": ["control", "xlarge", "lineBoxHeight"],
|
|
680
|
-
"value": "1.25rem",
|
|
681
|
-
"type": "dimension"
|
|
682
|
-
},
|
|
683
575
|
"control-xlarge-paddingBlock": {
|
|
684
576
|
"key": "{control.xlarge.paddingBlock}",
|
|
685
577
|
"$extensions": {
|
|
@@ -845,33 +737,6 @@
|
|
|
845
737
|
"value": "0.25rem",
|
|
846
738
|
"type": "dimension"
|
|
847
739
|
},
|
|
848
|
-
"control-xsmall-lineBoxHeight": {
|
|
849
|
-
"key": "{control.xsmall.lineBoxHeight}",
|
|
850
|
-
"$extensions": {
|
|
851
|
-
"org.primer.figma": {
|
|
852
|
-
"collection": "pattern/size",
|
|
853
|
-
"scopes": ["size"]
|
|
854
|
-
}
|
|
855
|
-
},
|
|
856
|
-
"filePath": "src/tokens/functional/size/size.json5",
|
|
857
|
-
"isSource": true,
|
|
858
|
-
"original": {
|
|
859
|
-
"$value": "{base.size.20}",
|
|
860
|
-
"$type": "dimension",
|
|
861
|
-
"$extensions": {
|
|
862
|
-
"org.primer.figma": {
|
|
863
|
-
"collection": "pattern/size",
|
|
864
|
-
"scopes": ["size"]
|
|
865
|
-
}
|
|
866
|
-
},
|
|
867
|
-
"key": "{control.xsmall.lineBoxHeight}"
|
|
868
|
-
},
|
|
869
|
-
"name": "control-xsmall-lineBoxHeight",
|
|
870
|
-
"attributes": {},
|
|
871
|
-
"path": ["control", "xsmall", "lineBoxHeight"],
|
|
872
|
-
"value": "1.25rem",
|
|
873
|
-
"type": "dimension"
|
|
874
|
-
},
|
|
875
740
|
"control-xsmall-paddingBlock": {
|
|
876
741
|
"key": "{control.xsmall.paddingBlock}",
|
|
877
742
|
"$extensions": {
|
|
@@ -783,41 +783,6 @@
|
|
|
783
783
|
"value": 400,
|
|
784
784
|
"type": "fontWeight"
|
|
785
785
|
},
|
|
786
|
-
"text-display-lineBoxHeight": {
|
|
787
|
-
"key": "{text.display.lineBoxHeight}",
|
|
788
|
-
"$extensions": {
|
|
789
|
-
"org.primer.data": {
|
|
790
|
-
"fontSize": 40
|
|
791
|
-
},
|
|
792
|
-
"org.primer.figma": {
|
|
793
|
-
"collection": "typography",
|
|
794
|
-
"scopes": ["lineHeight"],
|
|
795
|
-
"fontSizeInPx": 40
|
|
796
|
-
}
|
|
797
|
-
},
|
|
798
|
-
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
799
|
-
"isSource": true,
|
|
800
|
-
"original": {
|
|
801
|
-
"$value": "{base.text.lineHeight.snug}",
|
|
802
|
-
"$type": "number",
|
|
803
|
-
"$extensions": {
|
|
804
|
-
"org.primer.data": {
|
|
805
|
-
"fontSize": 40
|
|
806
|
-
},
|
|
807
|
-
"org.primer.figma": {
|
|
808
|
-
"collection": "typography",
|
|
809
|
-
"scopes": ["lineHeight"],
|
|
810
|
-
"fontSizeInPx": 40
|
|
811
|
-
}
|
|
812
|
-
},
|
|
813
|
-
"key": "{text.display.lineBoxHeight}"
|
|
814
|
-
},
|
|
815
|
-
"name": "text-display-lineBoxHeight",
|
|
816
|
-
"attributes": {},
|
|
817
|
-
"path": ["text", "display", "lineBoxHeight"],
|
|
818
|
-
"value": 1.375,
|
|
819
|
-
"type": "number"
|
|
820
|
-
},
|
|
821
786
|
"text-display-lineHeight": {
|
|
822
787
|
"key": "{text.display.lineHeight}",
|
|
823
788
|
"$extensions": {
|
|
@@ -2,35 +2,30 @@
|
|
|
2
2
|
"--control-minTarget-fine": "1rem",
|
|
3
3
|
"--control-minTarget-coarse": "2.75rem",
|
|
4
4
|
"--control-xsmall-size": "1.5rem",
|
|
5
|
-
"--control-xsmall-lineBoxHeight": "1.25rem",
|
|
6
5
|
"--control-xsmall-paddingBlock": "0.125rem",
|
|
7
6
|
"--control-xsmall-paddingInline-condensed": "0.25rem",
|
|
8
7
|
"--control-xsmall-paddingInline-normal": "0.5rem",
|
|
9
8
|
"--control-xsmall-paddingInline-spacious": "0.75rem",
|
|
10
9
|
"--control-xsmall-gap": "0.25rem",
|
|
11
10
|
"--control-small-size": "1.75rem",
|
|
12
|
-
"--control-small-lineBoxHeight": "1.25rem",
|
|
13
11
|
"--control-small-paddingBlock": "0.25rem",
|
|
14
12
|
"--control-small-paddingInline-condensed": "0.5rem",
|
|
15
13
|
"--control-small-paddingInline-normal": "0.75rem",
|
|
16
14
|
"--control-small-paddingInline-spacious": "1rem",
|
|
17
15
|
"--control-small-gap": "0.25rem",
|
|
18
16
|
"--control-medium-size": "2rem",
|
|
19
|
-
"--control-medium-lineBoxHeight": "1.25rem",
|
|
20
17
|
"--control-medium-paddingBlock": "0.375rem",
|
|
21
18
|
"--control-medium-paddingInline-condensed": "0.5rem",
|
|
22
19
|
"--control-medium-paddingInline-normal": "0.75rem",
|
|
23
20
|
"--control-medium-paddingInline-spacious": "1rem",
|
|
24
21
|
"--control-medium-gap": "0.5rem",
|
|
25
22
|
"--control-large-size": "2.5rem",
|
|
26
|
-
"--control-large-lineBoxHeight": "1.25rem",
|
|
27
23
|
"--control-large-paddingBlock": "0.625rem",
|
|
28
24
|
"--control-large-paddingInline-condensed": "0.5rem",
|
|
29
25
|
"--control-large-paddingInline-normal": "0.75rem",
|
|
30
26
|
"--control-large-paddingInline-spacious": "1rem",
|
|
31
27
|
"--control-large-gap": "0.5rem",
|
|
32
28
|
"--control-xlarge-size": "3rem",
|
|
33
|
-
"--control-xlarge-lineBoxHeight": "1.25rem",
|
|
34
29
|
"--control-xlarge-paddingBlock": "0.875rem",
|
|
35
30
|
"--control-xlarge-paddingInline-condensed": "0.5rem",
|
|
36
31
|
"--control-xlarge-paddingInline-normal": "0.75rem",
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
"--fontStack-sansSerif": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
4
4
|
"--fontStack-sansSerifDisplay": "'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
5
5
|
"--fontStack-monospace": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
|
|
6
|
-
"--text-display-lineBoxHeight": 1.375,
|
|
7
6
|
"--text-display-size": "2.5rem",
|
|
8
7
|
"--text-display-lineHeight": 1.375,
|
|
9
8
|
"--text-display-weight": 500,
|
|
@@ -282,17 +282,6 @@
|
|
|
282
282
|
"group": "pattern/size",
|
|
283
283
|
"scopes": ["WIDTH_HEIGHT"]
|
|
284
284
|
},
|
|
285
|
-
{
|
|
286
|
-
"name": "control/xsmall/lineBoxHeight",
|
|
287
|
-
"value": 20,
|
|
288
|
-
"type": "FLOAT",
|
|
289
|
-
"refId": "pattern/size/control/xsmall/lineBoxHeight",
|
|
290
|
-
"reference": "base/size/base/size/20",
|
|
291
|
-
"collection": "pattern/size",
|
|
292
|
-
"mode": "default",
|
|
293
|
-
"group": "pattern/size",
|
|
294
|
-
"scopes": ["WIDTH_HEIGHT"]
|
|
295
|
-
},
|
|
296
285
|
{
|
|
297
286
|
"name": "control/xsmall/paddingBlock",
|
|
298
287
|
"value": 2,
|
|
@@ -358,17 +347,6 @@
|
|
|
358
347
|
"group": "pattern/size",
|
|
359
348
|
"scopes": ["WIDTH_HEIGHT"]
|
|
360
349
|
},
|
|
361
|
-
{
|
|
362
|
-
"name": "control/small/lineBoxHeight",
|
|
363
|
-
"value": 20,
|
|
364
|
-
"type": "FLOAT",
|
|
365
|
-
"refId": "pattern/size/control/small/lineBoxHeight",
|
|
366
|
-
"reference": "base/size/base/size/20",
|
|
367
|
-
"collection": "pattern/size",
|
|
368
|
-
"mode": "default",
|
|
369
|
-
"group": "pattern/size",
|
|
370
|
-
"scopes": ["WIDTH_HEIGHT"]
|
|
371
|
-
},
|
|
372
350
|
{
|
|
373
351
|
"name": "control/small/paddingBlock",
|
|
374
352
|
"value": 4,
|
|
@@ -435,17 +413,6 @@
|
|
|
435
413
|
"group": "pattern/size",
|
|
436
414
|
"scopes": ["WIDTH_HEIGHT"]
|
|
437
415
|
},
|
|
438
|
-
{
|
|
439
|
-
"name": "control/medium/lineBoxHeight",
|
|
440
|
-
"value": 20,
|
|
441
|
-
"type": "FLOAT",
|
|
442
|
-
"refId": "pattern/size/control/medium/lineBoxHeight",
|
|
443
|
-
"reference": "base/size/base/size/20",
|
|
444
|
-
"collection": "pattern/size",
|
|
445
|
-
"mode": "default",
|
|
446
|
-
"group": "pattern/size",
|
|
447
|
-
"scopes": ["WIDTH_HEIGHT"]
|
|
448
|
-
},
|
|
449
416
|
{
|
|
450
417
|
"name": "control/medium/paddingBlock",
|
|
451
418
|
"value": 6,
|
|
@@ -511,17 +478,6 @@
|
|
|
511
478
|
"group": "pattern/size",
|
|
512
479
|
"scopes": ["WIDTH_HEIGHT"]
|
|
513
480
|
},
|
|
514
|
-
{
|
|
515
|
-
"name": "control/large/lineBoxHeight",
|
|
516
|
-
"value": 20,
|
|
517
|
-
"type": "FLOAT",
|
|
518
|
-
"refId": "pattern/size/control/large/lineBoxHeight",
|
|
519
|
-
"reference": "base/size/base/size/20",
|
|
520
|
-
"collection": "pattern/size",
|
|
521
|
-
"mode": "default",
|
|
522
|
-
"group": "pattern/size",
|
|
523
|
-
"scopes": ["WIDTH_HEIGHT"]
|
|
524
|
-
},
|
|
525
481
|
{
|
|
526
482
|
"name": "control/large/paddingBlock",
|
|
527
483
|
"value": 10,
|
|
@@ -587,17 +543,6 @@
|
|
|
587
543
|
"group": "pattern/size",
|
|
588
544
|
"scopes": ["WIDTH_HEIGHT"]
|
|
589
545
|
},
|
|
590
|
-
{
|
|
591
|
-
"name": "control/xlarge/lineBoxHeight",
|
|
592
|
-
"value": 20,
|
|
593
|
-
"type": "FLOAT",
|
|
594
|
-
"refId": "pattern/size/control/xlarge/lineBoxHeight",
|
|
595
|
-
"reference": "base/size/base/size/20",
|
|
596
|
-
"collection": "pattern/size",
|
|
597
|
-
"mode": "default",
|
|
598
|
-
"group": "pattern/size",
|
|
599
|
-
"scopes": ["WIDTH_HEIGHT"]
|
|
600
|
-
},
|
|
601
546
|
{
|
|
602
547
|
"name": "control/xlarge/paddingBlock",
|
|
603
548
|
"value": 14,
|
|
@@ -140,13 +140,6 @@
|
|
|
140
140
|
"description": "Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility.",
|
|
141
141
|
"refId": "loose"
|
|
142
142
|
},
|
|
143
|
-
{
|
|
144
|
-
"name": "lineBoxHeight",
|
|
145
|
-
"value": 1.375,
|
|
146
|
-
"type": "FLOAT",
|
|
147
|
-
"refId": "lineBoxHeight",
|
|
148
|
-
"reference": "base/text/lineHeight/snug"
|
|
149
|
-
},
|
|
150
143
|
{
|
|
151
144
|
"name": "text/display/size",
|
|
152
145
|
"value": 40,
|
|
@@ -26,33 +26,6 @@
|
|
|
26
26
|
"attributes": {},
|
|
27
27
|
"path": ["control", "large", "gap"]
|
|
28
28
|
},
|
|
29
|
-
"control-large-lineBoxHeight": {
|
|
30
|
-
"key": "{control.large.lineBoxHeight}",
|
|
31
|
-
"$value": ["1.25rem", "20px"],
|
|
32
|
-
"$type": "dimension",
|
|
33
|
-
"$extensions": {
|
|
34
|
-
"org.primer.figma": {
|
|
35
|
-
"collection": "pattern/size",
|
|
36
|
-
"scopes": ["size"]
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
"filePath": "src/tokens/functional/size/size.json5",
|
|
40
|
-
"isSource": true,
|
|
41
|
-
"original": {
|
|
42
|
-
"$value": "{base.size.20}",
|
|
43
|
-
"$type": "dimension",
|
|
44
|
-
"$extensions": {
|
|
45
|
-
"org.primer.figma": {
|
|
46
|
-
"collection": "pattern/size",
|
|
47
|
-
"scopes": ["size"]
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
"key": "{control.large.lineBoxHeight}"
|
|
51
|
-
},
|
|
52
|
-
"name": "control-large-lineBoxHeight",
|
|
53
|
-
"attributes": {},
|
|
54
|
-
"path": ["control", "large", "lineBoxHeight"]
|
|
55
|
-
},
|
|
56
29
|
"control-large-paddingBlock": {
|
|
57
30
|
"key": "{control.large.paddingBlock}",
|
|
58
31
|
"$value": ["0.625rem", "10px"],
|
|
@@ -218,33 +191,6 @@
|
|
|
218
191
|
"attributes": {},
|
|
219
192
|
"path": ["control", "medium", "gap"]
|
|
220
193
|
},
|
|
221
|
-
"control-medium-lineBoxHeight": {
|
|
222
|
-
"key": "{control.medium.lineBoxHeight}",
|
|
223
|
-
"$value": ["1.25rem", "20px"],
|
|
224
|
-
"$type": "dimension",
|
|
225
|
-
"$extensions": {
|
|
226
|
-
"org.primer.figma": {
|
|
227
|
-
"collection": "pattern/size",
|
|
228
|
-
"scopes": ["size"]
|
|
229
|
-
}
|
|
230
|
-
},
|
|
231
|
-
"filePath": "src/tokens/functional/size/size.json5",
|
|
232
|
-
"isSource": true,
|
|
233
|
-
"original": {
|
|
234
|
-
"$value": "{base.size.20}",
|
|
235
|
-
"$type": "dimension",
|
|
236
|
-
"$extensions": {
|
|
237
|
-
"org.primer.figma": {
|
|
238
|
-
"collection": "pattern/size",
|
|
239
|
-
"scopes": ["size"]
|
|
240
|
-
}
|
|
241
|
-
},
|
|
242
|
-
"key": "{control.medium.lineBoxHeight}"
|
|
243
|
-
},
|
|
244
|
-
"name": "control-medium-lineBoxHeight",
|
|
245
|
-
"attributes": {},
|
|
246
|
-
"path": ["control", "medium", "lineBoxHeight"]
|
|
247
|
-
},
|
|
248
194
|
"control-medium-paddingBlock": {
|
|
249
195
|
"key": "{control.medium.paddingBlock}",
|
|
250
196
|
"$value": ["0.375rem", "6px"],
|
|
@@ -464,33 +410,6 @@
|
|
|
464
410
|
"attributes": {},
|
|
465
411
|
"path": ["control", "small", "gap"]
|
|
466
412
|
},
|
|
467
|
-
"control-small-lineBoxHeight": {
|
|
468
|
-
"key": "{control.small.lineBoxHeight}",
|
|
469
|
-
"$value": ["1.25rem", "20px"],
|
|
470
|
-
"$type": "dimension",
|
|
471
|
-
"$extensions": {
|
|
472
|
-
"org.primer.figma": {
|
|
473
|
-
"collection": "pattern/size",
|
|
474
|
-
"scopes": ["size"]
|
|
475
|
-
}
|
|
476
|
-
},
|
|
477
|
-
"filePath": "src/tokens/functional/size/size.json5",
|
|
478
|
-
"isSource": true,
|
|
479
|
-
"original": {
|
|
480
|
-
"$value": "{base.size.20}",
|
|
481
|
-
"$type": "dimension",
|
|
482
|
-
"$extensions": {
|
|
483
|
-
"org.primer.figma": {
|
|
484
|
-
"collection": "pattern/size",
|
|
485
|
-
"scopes": ["size"]
|
|
486
|
-
}
|
|
487
|
-
},
|
|
488
|
-
"key": "{control.small.lineBoxHeight}"
|
|
489
|
-
},
|
|
490
|
-
"name": "control-small-lineBoxHeight",
|
|
491
|
-
"attributes": {},
|
|
492
|
-
"path": ["control", "small", "lineBoxHeight"]
|
|
493
|
-
},
|
|
494
413
|
"control-small-paddingBlock": {
|
|
495
414
|
"key": "{control.small.paddingBlock}",
|
|
496
415
|
"$value": ["0.25rem", "4px"],
|
|
@@ -653,33 +572,6 @@
|
|
|
653
572
|
"attributes": {},
|
|
654
573
|
"path": ["control", "xlarge", "gap"]
|
|
655
574
|
},
|
|
656
|
-
"control-xlarge-lineBoxHeight": {
|
|
657
|
-
"key": "{control.xlarge.lineBoxHeight}",
|
|
658
|
-
"$value": ["1.25rem", "20px"],
|
|
659
|
-
"$type": "dimension",
|
|
660
|
-
"$extensions": {
|
|
661
|
-
"org.primer.figma": {
|
|
662
|
-
"collection": "pattern/size",
|
|
663
|
-
"scopes": ["size"]
|
|
664
|
-
}
|
|
665
|
-
},
|
|
666
|
-
"filePath": "src/tokens/functional/size/size.json5",
|
|
667
|
-
"isSource": true,
|
|
668
|
-
"original": {
|
|
669
|
-
"$value": "{base.size.20}",
|
|
670
|
-
"$type": "dimension",
|
|
671
|
-
"$extensions": {
|
|
672
|
-
"org.primer.figma": {
|
|
673
|
-
"collection": "pattern/size",
|
|
674
|
-
"scopes": ["size"]
|
|
675
|
-
}
|
|
676
|
-
},
|
|
677
|
-
"key": "{control.xlarge.lineBoxHeight}"
|
|
678
|
-
},
|
|
679
|
-
"name": "control-xlarge-lineBoxHeight",
|
|
680
|
-
"attributes": {},
|
|
681
|
-
"path": ["control", "xlarge", "lineBoxHeight"]
|
|
682
|
-
},
|
|
683
575
|
"control-xlarge-paddingBlock": {
|
|
684
576
|
"key": "{control.xlarge.paddingBlock}",
|
|
685
577
|
"$value": ["0.875rem", "14px"],
|
|
@@ -845,33 +737,6 @@
|
|
|
845
737
|
"attributes": {},
|
|
846
738
|
"path": ["control", "xsmall", "gap"]
|
|
847
739
|
},
|
|
848
|
-
"control-xsmall-lineBoxHeight": {
|
|
849
|
-
"key": "{control.xsmall.lineBoxHeight}",
|
|
850
|
-
"$value": ["1.25rem", "20px"],
|
|
851
|
-
"$type": "dimension",
|
|
852
|
-
"$extensions": {
|
|
853
|
-
"org.primer.figma": {
|
|
854
|
-
"collection": "pattern/size",
|
|
855
|
-
"scopes": ["size"]
|
|
856
|
-
}
|
|
857
|
-
},
|
|
858
|
-
"filePath": "src/tokens/functional/size/size.json5",
|
|
859
|
-
"isSource": true,
|
|
860
|
-
"original": {
|
|
861
|
-
"$value": "{base.size.20}",
|
|
862
|
-
"$type": "dimension",
|
|
863
|
-
"$extensions": {
|
|
864
|
-
"org.primer.figma": {
|
|
865
|
-
"collection": "pattern/size",
|
|
866
|
-
"scopes": ["size"]
|
|
867
|
-
}
|
|
868
|
-
},
|
|
869
|
-
"key": "{control.xsmall.lineBoxHeight}"
|
|
870
|
-
},
|
|
871
|
-
"name": "control-xsmall-lineBoxHeight",
|
|
872
|
-
"attributes": {},
|
|
873
|
-
"path": ["control", "xsmall", "lineBoxHeight"]
|
|
874
|
-
},
|
|
875
740
|
"control-xsmall-paddingBlock": {
|
|
876
741
|
"key": "{control.xsmall.paddingBlock}",
|
|
877
742
|
"$value": ["0.125rem", "2px"],
|
|
@@ -783,41 +783,6 @@
|
|
|
783
783
|
"attributes": {},
|
|
784
784
|
"path": ["text", "codeInline", "weight"]
|
|
785
785
|
},
|
|
786
|
-
"text-display-lineBoxHeight": {
|
|
787
|
-
"key": "{text.display.lineBoxHeight}",
|
|
788
|
-
"$value": 1.375,
|
|
789
|
-
"$type": "number",
|
|
790
|
-
"$extensions": {
|
|
791
|
-
"org.primer.data": {
|
|
792
|
-
"fontSize": 40
|
|
793
|
-
},
|
|
794
|
-
"org.primer.figma": {
|
|
795
|
-
"collection": "typography",
|
|
796
|
-
"scopes": ["lineHeight"],
|
|
797
|
-
"fontSizeInPx": 40
|
|
798
|
-
}
|
|
799
|
-
},
|
|
800
|
-
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
801
|
-
"isSource": true,
|
|
802
|
-
"original": {
|
|
803
|
-
"$value": "{base.text.lineHeight.snug}",
|
|
804
|
-
"$type": "number",
|
|
805
|
-
"$extensions": {
|
|
806
|
-
"org.primer.data": {
|
|
807
|
-
"fontSize": 40
|
|
808
|
-
},
|
|
809
|
-
"org.primer.figma": {
|
|
810
|
-
"collection": "typography",
|
|
811
|
-
"scopes": ["lineHeight"],
|
|
812
|
-
"fontSizeInPx": 40
|
|
813
|
-
}
|
|
814
|
-
},
|
|
815
|
-
"key": "{text.display.lineBoxHeight}"
|
|
816
|
-
},
|
|
817
|
-
"name": "text-display-lineBoxHeight",
|
|
818
|
-
"attributes": {},
|
|
819
|
-
"path": ["text", "display", "lineBoxHeight"]
|
|
820
|
-
},
|
|
821
786
|
"text-display-lineHeight": {
|
|
822
787
|
"key": "{text.display.lineHeight}",
|
|
823
788
|
"$value": 1.375,
|
package/package.json
CHANGED
|
@@ -40,16 +40,6 @@
|
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
|
-
"lineBoxHeight": {
|
|
44
|
-
"$value": "{base.size.20}",
|
|
45
|
-
"$type": "dimension",
|
|
46
|
-
"$extensions": {
|
|
47
|
-
"org.primer.figma": {
|
|
48
|
-
"collection": "pattern/size",
|
|
49
|
-
"scopes": ["size"]
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
43
|
"paddingBlock": {
|
|
54
44
|
"$value": {"value": 2, "unit": "px"},
|
|
55
45
|
"$type": "dimension",
|
|
@@ -114,16 +104,6 @@
|
|
|
114
104
|
}
|
|
115
105
|
}
|
|
116
106
|
},
|
|
117
|
-
"lineBoxHeight": {
|
|
118
|
-
"$value": "{base.size.20}",
|
|
119
|
-
"$type": "dimension",
|
|
120
|
-
"$extensions": {
|
|
121
|
-
"org.primer.figma": {
|
|
122
|
-
"collection": "pattern/size",
|
|
123
|
-
"scopes": ["size"]
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
},
|
|
127
107
|
"paddingBlock": {
|
|
128
108
|
"$value": "{base.size.4}",
|
|
129
109
|
"$type": "dimension",
|
|
@@ -188,16 +168,6 @@
|
|
|
188
168
|
}
|
|
189
169
|
}
|
|
190
170
|
},
|
|
191
|
-
"lineBoxHeight": {
|
|
192
|
-
"$value": "{base.size.20}",
|
|
193
|
-
"$type": "dimension",
|
|
194
|
-
"$extensions": {
|
|
195
|
-
"org.primer.figma": {
|
|
196
|
-
"collection": "pattern/size",
|
|
197
|
-
"scopes": ["size"]
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
},
|
|
201
171
|
"paddingBlock": {
|
|
202
172
|
"$value": {"value": 6, "unit": "px"},
|
|
203
173
|
"$type": "dimension",
|
|
@@ -262,16 +232,6 @@
|
|
|
262
232
|
}
|
|
263
233
|
}
|
|
264
234
|
},
|
|
265
|
-
"lineBoxHeight": {
|
|
266
|
-
"$value": "{base.size.20}",
|
|
267
|
-
"$type": "dimension",
|
|
268
|
-
"$extensions": {
|
|
269
|
-
"org.primer.figma": {
|
|
270
|
-
"collection": "pattern/size",
|
|
271
|
-
"scopes": ["size"]
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
},
|
|
275
235
|
"paddingBlock": {
|
|
276
236
|
"$value": {"value": 10, "unit": "px"},
|
|
277
237
|
"$type": "dimension",
|
|
@@ -336,16 +296,6 @@
|
|
|
336
296
|
}
|
|
337
297
|
}
|
|
338
298
|
},
|
|
339
|
-
"lineBoxHeight": {
|
|
340
|
-
"$value": "{base.size.20}",
|
|
341
|
-
"$type": "dimension",
|
|
342
|
-
"$extensions": {
|
|
343
|
-
"org.primer.figma": {
|
|
344
|
-
"collection": "pattern/size",
|
|
345
|
-
"scopes": ["size"]
|
|
346
|
-
}
|
|
347
|
-
}
|
|
348
|
-
},
|
|
349
299
|
"paddingBlock": {
|
|
350
300
|
"$value": {"value": 14, "unit": "px"},
|
|
351
301
|
"$type": "dimension",
|
|
@@ -1,20 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
text: {
|
|
3
3
|
display: {
|
|
4
|
-
lineBoxHeight: {
|
|
5
|
-
$value: '{base.text.lineHeight.snug}',
|
|
6
|
-
$type: 'number',
|
|
7
|
-
$extensions: {
|
|
8
|
-
'org.primer.data': {
|
|
9
|
-
fontSize: 40,
|
|
10
|
-
},
|
|
11
|
-
'org.primer.figma': {
|
|
12
|
-
collection: 'typography',
|
|
13
|
-
scopes: ['lineHeight'],
|
|
14
|
-
fontSizeInPx: 40,
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
4
|
size: {
|
|
19
5
|
$value: '{base.text.size.2xl}',
|
|
20
6
|
$type: 'dimension',
|