@primer/primitives 7.12.0-rc.f16a928 → 7.12.0
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 +21 -0
- package/package.json +1 -1
- package/tokens-next-private/css/functional/size/size.css +6 -0
- package/tokens-next-private/css/functional/themes/dark-colorblind.css +2 -0
- package/tokens-next-private/css/functional/themes/dark-dimmed.css +2 -0
- package/tokens-next-private/css/functional/themes/dark-high-contrast.css +2 -0
- package/tokens-next-private/css/functional/themes/dark-tritanopia.css +2 -0
- package/tokens-next-private/css/functional/themes/dark.css +2 -0
- package/tokens-next-private/css/functional/themes/light-colorblind.css +2 -0
- package/tokens-next-private/css/functional/themes/light-high-contrast.css +2 -0
- package/tokens-next-private/css/functional/themes/light-tritanopia.css +2 -0
- package/tokens-next-private/css/functional/themes/light.css +2 -0
- package/tokens-next-private/docs/functional/size/size.json +161 -11
- package/tokens-next-private/docs/functional/themes/dark-colorblind.json +28 -1
- package/tokens-next-private/docs/functional/themes/dark-dimmed.json +28 -1
- package/tokens-next-private/docs/functional/themes/dark-high-contrast.json +28 -1
- package/tokens-next-private/docs/functional/themes/dark-tritanopia.json +28 -1
- package/tokens-next-private/docs/functional/themes/dark.json +28 -1
- package/tokens-next-private/docs/functional/themes/light-colorblind.json +27 -0
- package/tokens-next-private/docs/functional/themes/light-high-contrast.json +27 -0
- package/tokens-next-private/docs/functional/themes/light-tritanopia.json +27 -0
- package/tokens-next-private/docs/functional/themes/light.json +27 -0
- package/tokens-next-private/fallbacks/color-fallbacks.json +1 -0
- package/tokens-next-private/fallbacks/functional/size/size.json +6 -0
- package/tokens-next-private/figma/dimension/dimension.json +70 -12
- package/tokens-next-private/figma/themes/dark.json +83 -68
- package/tokens-next-private/figma/themes/light.json +83 -68
- package/tokens-next-private/scss/functional/size/size.scss +6 -0
- package/tokens-next-private/scss/functional/themes/dark-colorblind.scss +1 -0
- package/tokens-next-private/scss/functional/themes/dark-dimmed.scss +1 -0
- package/tokens-next-private/scss/functional/themes/dark-high-contrast.scss +1 -0
- package/tokens-next-private/scss/functional/themes/dark-tritanopia.scss +1 -0
- package/tokens-next-private/scss/functional/themes/dark.scss +1 -0
- package/tokens-next-private/scss/functional/themes/light-colorblind.scss +1 -0
- package/tokens-next-private/scss/functional/themes/light-high-contrast.scss +1 -0
- package/tokens-next-private/scss/functional/themes/light-tritanopia.scss +1 -0
- package/tokens-next-private/scss/functional/themes/light.scss +1 -0
- package/tokens-v2-private/css/tokens/base/size/size.css +1 -1
- package/tokens-v2-private/css/tokens/base/typography/typography.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/border.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/breakpoints.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/size-coarse.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/size-fine.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/size.css +1 -1
- package/tokens-v2-private/css/tokens/functional/typography/typography.css +1 -1
- package/tokens-v2-private/js/module/tokens/base/size/size.js +1 -1
- package/tokens-v2-private/js/module/tokens/base/typography/typography.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/border.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/breakpoints.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/size-coarse.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/size-fine.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/size.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/viewport.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/typography/typography.js +1 -1
- package/tokens-v2-private/js/tokens/base/size/size.js +1 -1
- package/tokens-v2-private/js/tokens/base/typography/typography.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/border.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/breakpoints.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/size-coarse.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/size-fine.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/size.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/viewport.js +1 -1
- package/tokens-v2-private/js/tokens/functional/typography/typography.js +1 -1
- package/tokens-v2-private/scss/tokens/base/size/size.scss +1 -1
- package/tokens-v2-private/scss/tokens/base/typography/typography.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/border.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/breakpoints.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/size-coarse.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/size-fine.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/size.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/viewport.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/typography/typography.scss +1 -1
- package/tokens-v2-private/ts/tokens/base/size/size.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/base/size/size.js +1 -1
- package/tokens-v2-private/ts/tokens/base/typography/typography.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/base/typography/typography.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/border.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/border.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/breakpoints.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/breakpoints.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size-coarse.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size-coarse.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size-fine.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size-fine.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/viewport.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/viewport.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/typography/typography.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/typography/typography.js +1 -1
|
@@ -5569,6 +5569,33 @@
|
|
|
5569
5569
|
"attributes": {},
|
|
5570
5570
|
"path": ["bgColor", "muted"]
|
|
5571
5571
|
},
|
|
5572
|
+
"bgColor-inset": {
|
|
5573
|
+
"value": "#f6f8fa",
|
|
5574
|
+
"$type": "color",
|
|
5575
|
+
"$extensions": {
|
|
5576
|
+
"org.primer.figma": {
|
|
5577
|
+
"collection": "mode",
|
|
5578
|
+
"mode": "light",
|
|
5579
|
+
"scopes": ["bgColor"]
|
|
5580
|
+
}
|
|
5581
|
+
},
|
|
5582
|
+
"filePath": "src/tokens/functional/color/light/primitives-light.json5",
|
|
5583
|
+
"isSource": true,
|
|
5584
|
+
"original": {
|
|
5585
|
+
"value": "{base.color.gray.0}",
|
|
5586
|
+
"$type": "color",
|
|
5587
|
+
"$extensions": {
|
|
5588
|
+
"org.primer.figma": {
|
|
5589
|
+
"collection": "mode",
|
|
5590
|
+
"mode": "light",
|
|
5591
|
+
"scopes": ["bgColor"]
|
|
5592
|
+
}
|
|
5593
|
+
}
|
|
5594
|
+
},
|
|
5595
|
+
"name": "bgColor-inset",
|
|
5596
|
+
"attributes": {},
|
|
5597
|
+
"path": ["bgColor", "inset"]
|
|
5598
|
+
},
|
|
5572
5599
|
"bgColor-emphasis": {
|
|
5573
5600
|
"value": "#24292f",
|
|
5574
5601
|
"$type": "color",
|
|
@@ -5573,6 +5573,33 @@
|
|
|
5573
5573
|
"attributes": {},
|
|
5574
5574
|
"path": ["bgColor", "muted"]
|
|
5575
5575
|
},
|
|
5576
|
+
"bgColor-inset": {
|
|
5577
|
+
"value": "#ffffff",
|
|
5578
|
+
"$type": "color",
|
|
5579
|
+
"$extensions": {
|
|
5580
|
+
"org.primer.figma": {
|
|
5581
|
+
"collection": "mode",
|
|
5582
|
+
"mode": "light",
|
|
5583
|
+
"scopes": ["bgColor"]
|
|
5584
|
+
}
|
|
5585
|
+
},
|
|
5586
|
+
"filePath": "src/tokens/functional/color/light/overrides/light.high-contrast.json5",
|
|
5587
|
+
"isSource": true,
|
|
5588
|
+
"original": {
|
|
5589
|
+
"value": "{base.color.white}",
|
|
5590
|
+
"$type": "color",
|
|
5591
|
+
"$extensions": {
|
|
5592
|
+
"org.primer.figma": {
|
|
5593
|
+
"collection": "mode",
|
|
5594
|
+
"mode": "light",
|
|
5595
|
+
"scopes": ["bgColor"]
|
|
5596
|
+
}
|
|
5597
|
+
}
|
|
5598
|
+
},
|
|
5599
|
+
"name": "bgColor-inset",
|
|
5600
|
+
"attributes": {},
|
|
5601
|
+
"path": ["bgColor", "inset"]
|
|
5602
|
+
},
|
|
5576
5603
|
"bgColor-emphasis": {
|
|
5577
5604
|
"value": "#0e1116",
|
|
5578
5605
|
"$type": "color",
|
|
@@ -5565,6 +5565,33 @@
|
|
|
5565
5565
|
"attributes": {},
|
|
5566
5566
|
"path": ["bgColor", "muted"]
|
|
5567
5567
|
},
|
|
5568
|
+
"bgColor-inset": {
|
|
5569
|
+
"value": "#f6f8fa",
|
|
5570
|
+
"$type": "color",
|
|
5571
|
+
"$extensions": {
|
|
5572
|
+
"org.primer.figma": {
|
|
5573
|
+
"collection": "mode",
|
|
5574
|
+
"mode": "light",
|
|
5575
|
+
"scopes": ["bgColor"]
|
|
5576
|
+
}
|
|
5577
|
+
},
|
|
5578
|
+
"filePath": "src/tokens/functional/color/light/primitives-light.json5",
|
|
5579
|
+
"isSource": true,
|
|
5580
|
+
"original": {
|
|
5581
|
+
"value": "{base.color.gray.0}",
|
|
5582
|
+
"$type": "color",
|
|
5583
|
+
"$extensions": {
|
|
5584
|
+
"org.primer.figma": {
|
|
5585
|
+
"collection": "mode",
|
|
5586
|
+
"mode": "light",
|
|
5587
|
+
"scopes": ["bgColor"]
|
|
5588
|
+
}
|
|
5589
|
+
}
|
|
5590
|
+
},
|
|
5591
|
+
"name": "bgColor-inset",
|
|
5592
|
+
"attributes": {},
|
|
5593
|
+
"path": ["bgColor", "inset"]
|
|
5594
|
+
},
|
|
5568
5595
|
"bgColor-emphasis": {
|
|
5569
5596
|
"value": "#24292f",
|
|
5570
5597
|
"$type": "color",
|
|
@@ -5565,6 +5565,33 @@
|
|
|
5565
5565
|
"attributes": {},
|
|
5566
5566
|
"path": ["bgColor", "muted"]
|
|
5567
5567
|
},
|
|
5568
|
+
"bgColor-inset": {
|
|
5569
|
+
"value": "#f6f8fa",
|
|
5570
|
+
"$type": "color",
|
|
5571
|
+
"$extensions": {
|
|
5572
|
+
"org.primer.figma": {
|
|
5573
|
+
"collection": "mode",
|
|
5574
|
+
"mode": "light",
|
|
5575
|
+
"scopes": ["bgColor"]
|
|
5576
|
+
}
|
|
5577
|
+
},
|
|
5578
|
+
"filePath": "src/tokens/functional/color/light/primitives-light.json5",
|
|
5579
|
+
"isSource": true,
|
|
5580
|
+
"original": {
|
|
5581
|
+
"value": "{base.color.gray.0}",
|
|
5582
|
+
"$type": "color",
|
|
5583
|
+
"$extensions": {
|
|
5584
|
+
"org.primer.figma": {
|
|
5585
|
+
"collection": "mode",
|
|
5586
|
+
"mode": "light",
|
|
5587
|
+
"scopes": ["bgColor"]
|
|
5588
|
+
}
|
|
5589
|
+
}
|
|
5590
|
+
},
|
|
5591
|
+
"name": "bgColor-inset",
|
|
5592
|
+
"attributes": {},
|
|
5593
|
+
"path": ["bgColor", "inset"]
|
|
5594
|
+
},
|
|
5568
5595
|
"bgColor-emphasis": {
|
|
5569
5596
|
"value": "#24292f",
|
|
5570
5597
|
"$type": "color",
|
|
@@ -196,6 +196,7 @@
|
|
|
196
196
|
"--fgColor-sponsors": "var(--color-sponsors-fg)",
|
|
197
197
|
"--bgColor-default": "var(--color-canvas-default)",
|
|
198
198
|
"--bgColor-muted": "var(--color-canvas-subtle)",
|
|
199
|
+
"--bgColor-inset": "var(--color-canvas-inset)",
|
|
199
200
|
"--bgColor-emphasis": "var(--color-neutral-emphasis-plus)",
|
|
200
201
|
"--bgColor-disabled": "var(--color-neutral-muted)",
|
|
201
202
|
"--bgColor-neutral-muted": "var(--color-neutral-subtle)",
|
|
@@ -40,6 +40,12 @@
|
|
|
40
40
|
"--controlStack-large-gap-auto": "0.5rem",
|
|
41
41
|
"--controlStack-large-gap-condensed": "0.5rem",
|
|
42
42
|
"--controlStack-large-gap-spacious": "0.75rem",
|
|
43
|
+
"--space-xxsmall": "0.125rem",
|
|
44
|
+
"--space-xsmall": "0.25rem",
|
|
45
|
+
"--space-small": "0.375rem",
|
|
46
|
+
"--space-medium": "0.5rem",
|
|
47
|
+
"--space-large": "0.75rem",
|
|
48
|
+
"--space-xlarge": "1rem",
|
|
43
49
|
"--stack-padding-condensed": "0.5rem",
|
|
44
50
|
"--stack-padding-normal": "1rem",
|
|
45
51
|
"--stack-padding-spacious": "1.5rem",
|
|
@@ -72,6 +72,24 @@
|
|
|
72
72
|
"mode": "default",
|
|
73
73
|
"scopes": ["GAP"]
|
|
74
74
|
},
|
|
75
|
+
{
|
|
76
|
+
"name": "space/small",
|
|
77
|
+
"value": 6,
|
|
78
|
+
"type": "FLOAT",
|
|
79
|
+
"refId": "functional/size/space/small",
|
|
80
|
+
"collection": "functional/size",
|
|
81
|
+
"mode": "default",
|
|
82
|
+
"scopes": ["GAP"]
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": "space/xxsmall",
|
|
86
|
+
"value": 2,
|
|
87
|
+
"type": "FLOAT",
|
|
88
|
+
"refId": "functional/size/space/xxsmall",
|
|
89
|
+
"collection": "functional/size",
|
|
90
|
+
"mode": "default",
|
|
91
|
+
"scopes": ["GAP"]
|
|
92
|
+
},
|
|
75
93
|
{
|
|
76
94
|
"name": "breakpoint/xxlarge",
|
|
77
95
|
"value": 1440,
|
|
@@ -353,9 +371,9 @@
|
|
|
353
371
|
"name": "stack/gap/spacious",
|
|
354
372
|
"value": 24,
|
|
355
373
|
"type": "FLOAT",
|
|
356
|
-
"refId": "
|
|
374
|
+
"refId": "pattern/size/stack/gap/spacious",
|
|
357
375
|
"reference": "base/size/base/size/24",
|
|
358
|
-
"collection": "
|
|
376
|
+
"collection": "pattern/size",
|
|
359
377
|
"mode": "default",
|
|
360
378
|
"scopes": ["GAP"]
|
|
361
379
|
},
|
|
@@ -363,9 +381,9 @@
|
|
|
363
381
|
"name": "stack/gap/normal",
|
|
364
382
|
"value": 16,
|
|
365
383
|
"type": "FLOAT",
|
|
366
|
-
"refId": "
|
|
384
|
+
"refId": "pattern/size/stack/gap/normal",
|
|
367
385
|
"reference": "base/size/base/size/16",
|
|
368
|
-
"collection": "
|
|
386
|
+
"collection": "pattern/size",
|
|
369
387
|
"mode": "default",
|
|
370
388
|
"scopes": ["GAP"]
|
|
371
389
|
},
|
|
@@ -373,9 +391,9 @@
|
|
|
373
391
|
"name": "stack/gap/condensed",
|
|
374
392
|
"value": 8,
|
|
375
393
|
"type": "FLOAT",
|
|
376
|
-
"refId": "
|
|
394
|
+
"refId": "pattern/size/stack/gap/condensed",
|
|
377
395
|
"reference": "base/size/base/size/8",
|
|
378
|
-
"collection": "
|
|
396
|
+
"collection": "pattern/size",
|
|
379
397
|
"mode": "default",
|
|
380
398
|
"scopes": ["GAP"]
|
|
381
399
|
},
|
|
@@ -383,9 +401,9 @@
|
|
|
383
401
|
"name": "stack/padding/spacious",
|
|
384
402
|
"value": 24,
|
|
385
403
|
"type": "FLOAT",
|
|
386
|
-
"refId": "
|
|
404
|
+
"refId": "pattern/size/stack/padding/spacious",
|
|
387
405
|
"reference": "base/size/base/size/24",
|
|
388
|
-
"collection": "
|
|
406
|
+
"collection": "pattern/size",
|
|
389
407
|
"mode": "default",
|
|
390
408
|
"scopes": ["GAP"]
|
|
391
409
|
},
|
|
@@ -393,9 +411,9 @@
|
|
|
393
411
|
"name": "stack/padding/normal",
|
|
394
412
|
"value": 16,
|
|
395
413
|
"type": "FLOAT",
|
|
396
|
-
"refId": "
|
|
414
|
+
"refId": "pattern/size/stack/padding/normal",
|
|
397
415
|
"reference": "base/size/base/size/16",
|
|
398
|
-
"collection": "
|
|
416
|
+
"collection": "pattern/size",
|
|
399
417
|
"mode": "default",
|
|
400
418
|
"scopes": ["GAP"]
|
|
401
419
|
},
|
|
@@ -403,9 +421,9 @@
|
|
|
403
421
|
"name": "stack/padding/condensed",
|
|
404
422
|
"value": 8,
|
|
405
423
|
"type": "FLOAT",
|
|
406
|
-
"refId": "
|
|
424
|
+
"refId": "pattern/size/stack/padding/condensed",
|
|
407
425
|
"reference": "base/size/base/size/8",
|
|
408
|
-
"collection": "
|
|
426
|
+
"collection": "pattern/size",
|
|
409
427
|
"mode": "default",
|
|
410
428
|
"scopes": ["GAP"]
|
|
411
429
|
},
|
|
@@ -708,5 +726,45 @@
|
|
|
708
726
|
"collection": "pattern/size",
|
|
709
727
|
"mode": "default",
|
|
710
728
|
"scopes": ["WIDTH_HEIGHT"]
|
|
729
|
+
},
|
|
730
|
+
{
|
|
731
|
+
"name": "space/xlarge",
|
|
732
|
+
"value": 16,
|
|
733
|
+
"type": "FLOAT",
|
|
734
|
+
"refId": "functional/size/space/xlarge",
|
|
735
|
+
"reference": "base/size/base/size/16",
|
|
736
|
+
"collection": "functional/size",
|
|
737
|
+
"mode": "default",
|
|
738
|
+
"scopes": ["GAP"]
|
|
739
|
+
},
|
|
740
|
+
{
|
|
741
|
+
"name": "space/large",
|
|
742
|
+
"value": 12,
|
|
743
|
+
"type": "FLOAT",
|
|
744
|
+
"refId": "functional/size/space/large",
|
|
745
|
+
"reference": "base/size/base/size/12",
|
|
746
|
+
"collection": "functional/size",
|
|
747
|
+
"mode": "default",
|
|
748
|
+
"scopes": ["GAP"]
|
|
749
|
+
},
|
|
750
|
+
{
|
|
751
|
+
"name": "space/medium",
|
|
752
|
+
"value": 8,
|
|
753
|
+
"type": "FLOAT",
|
|
754
|
+
"refId": "functional/size/space/medium",
|
|
755
|
+
"reference": "base/size/base/size/8",
|
|
756
|
+
"collection": "functional/size",
|
|
757
|
+
"mode": "default",
|
|
758
|
+
"scopes": ["GAP"]
|
|
759
|
+
},
|
|
760
|
+
{
|
|
761
|
+
"name": "space/xsmall",
|
|
762
|
+
"value": 4,
|
|
763
|
+
"type": "FLOAT",
|
|
764
|
+
"refId": "functional/size/space/xsmall",
|
|
765
|
+
"reference": "base/size/base/size/4",
|
|
766
|
+
"collection": "functional/size",
|
|
767
|
+
"mode": "default",
|
|
768
|
+
"scopes": ["GAP"]
|
|
711
769
|
}
|
|
712
770
|
]
|