@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.
Files changed (90) hide show
  1. package/README.md +21 -0
  2. package/package.json +1 -1
  3. package/tokens-next-private/css/functional/size/size.css +6 -0
  4. package/tokens-next-private/css/functional/themes/dark-colorblind.css +2 -0
  5. package/tokens-next-private/css/functional/themes/dark-dimmed.css +2 -0
  6. package/tokens-next-private/css/functional/themes/dark-high-contrast.css +2 -0
  7. package/tokens-next-private/css/functional/themes/dark-tritanopia.css +2 -0
  8. package/tokens-next-private/css/functional/themes/dark.css +2 -0
  9. package/tokens-next-private/css/functional/themes/light-colorblind.css +2 -0
  10. package/tokens-next-private/css/functional/themes/light-high-contrast.css +2 -0
  11. package/tokens-next-private/css/functional/themes/light-tritanopia.css +2 -0
  12. package/tokens-next-private/css/functional/themes/light.css +2 -0
  13. package/tokens-next-private/docs/functional/size/size.json +161 -11
  14. package/tokens-next-private/docs/functional/themes/dark-colorblind.json +28 -1
  15. package/tokens-next-private/docs/functional/themes/dark-dimmed.json +28 -1
  16. package/tokens-next-private/docs/functional/themes/dark-high-contrast.json +28 -1
  17. package/tokens-next-private/docs/functional/themes/dark-tritanopia.json +28 -1
  18. package/tokens-next-private/docs/functional/themes/dark.json +28 -1
  19. package/tokens-next-private/docs/functional/themes/light-colorblind.json +27 -0
  20. package/tokens-next-private/docs/functional/themes/light-high-contrast.json +27 -0
  21. package/tokens-next-private/docs/functional/themes/light-tritanopia.json +27 -0
  22. package/tokens-next-private/docs/functional/themes/light.json +27 -0
  23. package/tokens-next-private/fallbacks/color-fallbacks.json +1 -0
  24. package/tokens-next-private/fallbacks/functional/size/size.json +6 -0
  25. package/tokens-next-private/figma/dimension/dimension.json +70 -12
  26. package/tokens-next-private/figma/themes/dark.json +83 -68
  27. package/tokens-next-private/figma/themes/light.json +83 -68
  28. package/tokens-next-private/scss/functional/size/size.scss +6 -0
  29. package/tokens-next-private/scss/functional/themes/dark-colorblind.scss +1 -0
  30. package/tokens-next-private/scss/functional/themes/dark-dimmed.scss +1 -0
  31. package/tokens-next-private/scss/functional/themes/dark-high-contrast.scss +1 -0
  32. package/tokens-next-private/scss/functional/themes/dark-tritanopia.scss +1 -0
  33. package/tokens-next-private/scss/functional/themes/dark.scss +1 -0
  34. package/tokens-next-private/scss/functional/themes/light-colorblind.scss +1 -0
  35. package/tokens-next-private/scss/functional/themes/light-high-contrast.scss +1 -0
  36. package/tokens-next-private/scss/functional/themes/light-tritanopia.scss +1 -0
  37. package/tokens-next-private/scss/functional/themes/light.scss +1 -0
  38. package/tokens-v2-private/css/tokens/base/size/size.css +1 -1
  39. package/tokens-v2-private/css/tokens/base/typography/typography.css +1 -1
  40. package/tokens-v2-private/css/tokens/functional/size/border.css +1 -1
  41. package/tokens-v2-private/css/tokens/functional/size/breakpoints.css +1 -1
  42. package/tokens-v2-private/css/tokens/functional/size/size-coarse.css +1 -1
  43. package/tokens-v2-private/css/tokens/functional/size/size-fine.css +1 -1
  44. package/tokens-v2-private/css/tokens/functional/size/size.css +1 -1
  45. package/tokens-v2-private/css/tokens/functional/typography/typography.css +1 -1
  46. package/tokens-v2-private/js/module/tokens/base/size/size.js +1 -1
  47. package/tokens-v2-private/js/module/tokens/base/typography/typography.js +1 -1
  48. package/tokens-v2-private/js/module/tokens/functional/size/border.js +1 -1
  49. package/tokens-v2-private/js/module/tokens/functional/size/breakpoints.js +1 -1
  50. package/tokens-v2-private/js/module/tokens/functional/size/size-coarse.js +1 -1
  51. package/tokens-v2-private/js/module/tokens/functional/size/size-fine.js +1 -1
  52. package/tokens-v2-private/js/module/tokens/functional/size/size.js +1 -1
  53. package/tokens-v2-private/js/module/tokens/functional/size/viewport.js +1 -1
  54. package/tokens-v2-private/js/module/tokens/functional/typography/typography.js +1 -1
  55. package/tokens-v2-private/js/tokens/base/size/size.js +1 -1
  56. package/tokens-v2-private/js/tokens/base/typography/typography.js +1 -1
  57. package/tokens-v2-private/js/tokens/functional/size/border.js +1 -1
  58. package/tokens-v2-private/js/tokens/functional/size/breakpoints.js +1 -1
  59. package/tokens-v2-private/js/tokens/functional/size/size-coarse.js +1 -1
  60. package/tokens-v2-private/js/tokens/functional/size/size-fine.js +1 -1
  61. package/tokens-v2-private/js/tokens/functional/size/size.js +1 -1
  62. package/tokens-v2-private/js/tokens/functional/size/viewport.js +1 -1
  63. package/tokens-v2-private/js/tokens/functional/typography/typography.js +1 -1
  64. package/tokens-v2-private/scss/tokens/base/size/size.scss +1 -1
  65. package/tokens-v2-private/scss/tokens/base/typography/typography.scss +1 -1
  66. package/tokens-v2-private/scss/tokens/functional/size/border.scss +1 -1
  67. package/tokens-v2-private/scss/tokens/functional/size/breakpoints.scss +1 -1
  68. package/tokens-v2-private/scss/tokens/functional/size/size-coarse.scss +1 -1
  69. package/tokens-v2-private/scss/tokens/functional/size/size-fine.scss +1 -1
  70. package/tokens-v2-private/scss/tokens/functional/size/size.scss +1 -1
  71. package/tokens-v2-private/scss/tokens/functional/size/viewport.scss +1 -1
  72. package/tokens-v2-private/scss/tokens/functional/typography/typography.scss +1 -1
  73. package/tokens-v2-private/ts/tokens/base/size/size.d.ts +1 -1
  74. package/tokens-v2-private/ts/tokens/base/size/size.js +1 -1
  75. package/tokens-v2-private/ts/tokens/base/typography/typography.d.ts +1 -1
  76. package/tokens-v2-private/ts/tokens/base/typography/typography.js +1 -1
  77. package/tokens-v2-private/ts/tokens/functional/size/border.d.ts +1 -1
  78. package/tokens-v2-private/ts/tokens/functional/size/border.js +1 -1
  79. package/tokens-v2-private/ts/tokens/functional/size/breakpoints.d.ts +1 -1
  80. package/tokens-v2-private/ts/tokens/functional/size/breakpoints.js +1 -1
  81. package/tokens-v2-private/ts/tokens/functional/size/size-coarse.d.ts +1 -1
  82. package/tokens-v2-private/ts/tokens/functional/size/size-coarse.js +1 -1
  83. package/tokens-v2-private/ts/tokens/functional/size/size-fine.d.ts +1 -1
  84. package/tokens-v2-private/ts/tokens/functional/size/size-fine.js +1 -1
  85. package/tokens-v2-private/ts/tokens/functional/size/size.d.ts +1 -1
  86. package/tokens-v2-private/ts/tokens/functional/size/size.js +1 -1
  87. package/tokens-v2-private/ts/tokens/functional/size/viewport.d.ts +1 -1
  88. package/tokens-v2-private/ts/tokens/functional/size/viewport.js +1 -1
  89. package/tokens-v2-private/ts/tokens/functional/typography/typography.d.ts +1 -1
  90. 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": "functional/size/stack/gap/spacious",
374
+ "refId": "pattern/size/stack/gap/spacious",
357
375
  "reference": "base/size/base/size/24",
358
- "collection": "functional/size",
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": "functional/size/stack/gap/normal",
384
+ "refId": "pattern/size/stack/gap/normal",
367
385
  "reference": "base/size/base/size/16",
368
- "collection": "functional/size",
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": "functional/size/stack/gap/condensed",
394
+ "refId": "pattern/size/stack/gap/condensed",
377
395
  "reference": "base/size/base/size/8",
378
- "collection": "functional/size",
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": "functional/size/stack/padding/spacious",
404
+ "refId": "pattern/size/stack/padding/spacious",
387
405
  "reference": "base/size/base/size/24",
388
- "collection": "functional/size",
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": "functional/size/stack/padding/normal",
414
+ "refId": "pattern/size/stack/padding/normal",
397
415
  "reference": "base/size/base/size/16",
398
- "collection": "functional/size",
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": "functional/size/stack/padding/condensed",
424
+ "refId": "pattern/size/stack/padding/condensed",
407
425
  "reference": "base/size/base/size/8",
408
- "collection": "functional/size",
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
  ]