@primer/primitives 8.2.4-rc.d955f312 → 8.2.4-rc.ea4beb50

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 (74) hide show
  1. package/README.md +17 -18
  2. package/dist/css/functional/size/border.css +1 -0
  3. package/dist/css/functional/themes/dark-colorblind.css +18 -12
  4. package/dist/css/functional/themes/dark-dimmed.css +20 -14
  5. package/dist/css/functional/themes/dark-high-contrast.css +258 -252
  6. package/dist/css/functional/themes/dark-tritanopia.css +20 -14
  7. package/dist/css/functional/themes/dark.css +20 -14
  8. package/dist/css/functional/themes/light-colorblind.css +30 -24
  9. package/dist/css/functional/themes/light-high-contrast.css +154 -148
  10. package/dist/css/functional/themes/light-tritanopia.css +30 -24
  11. package/dist/css/functional/themes/light.css +18 -12
  12. package/dist/css/primitives.css +1 -0
  13. package/dist/docs/functional/size/border.json +31 -0
  14. package/dist/docs/functional/themes/dark-colorblind.json +236 -149
  15. package/dist/docs/functional/themes/dark-dimmed.json +247 -158
  16. package/dist/docs/functional/themes/dark-high-contrast.json +555 -458
  17. package/dist/docs/functional/themes/dark-tritanopia.json +240 -153
  18. package/dist/docs/functional/themes/dark.json +247 -158
  19. package/dist/docs/functional/themes/light-colorblind.json +254 -173
  20. package/dist/docs/functional/themes/light-high-contrast.json +452 -361
  21. package/dist/docs/functional/themes/light-tritanopia.json +252 -171
  22. package/dist/docs/functional/themes/light.json +246 -157
  23. package/dist/fallbacks/functional/size/border.json +1 -0
  24. package/dist/figma/dimension/dimension.json +14 -0
  25. package/dist/figma/themes/dark-colorblind.json +246 -198
  26. package/dist/figma/themes/dark-dimmed.json +249 -200
  27. package/dist/figma/themes/dark-high-contrast.json +675 -625
  28. package/dist/figma/themes/dark-tritanopia.json +248 -200
  29. package/dist/figma/themes/dark.json +249 -200
  30. package/dist/figma/themes/light-colorblind.json +265 -218
  31. package/dist/figma/themes/light-high-contrast.json +457 -407
  32. package/dist/figma/themes/light-tritanopia.json +264 -217
  33. package/dist/figma/themes/light.json +187 -138
  34. package/dist/internalCss/dark-colorblind.css +18 -12
  35. package/dist/internalCss/dark-dimmed.css +20 -14
  36. package/dist/internalCss/dark-high-contrast.css +258 -252
  37. package/dist/internalCss/dark-tritanopia.css +20 -14
  38. package/dist/internalCss/dark.css +20 -14
  39. package/dist/internalCss/light-colorblind.css +30 -24
  40. package/dist/internalCss/light-high-contrast.css +154 -148
  41. package/dist/internalCss/light-tritanopia.css +30 -24
  42. package/dist/internalCss/light.css +18 -12
  43. package/dist/styleLint/functional/size/border.json +31 -0
  44. package/dist/styleLint/functional/themes/dark-colorblind.json +236 -149
  45. package/dist/styleLint/functional/themes/dark-dimmed.json +247 -158
  46. package/dist/styleLint/functional/themes/dark-high-contrast.json +555 -458
  47. package/dist/styleLint/functional/themes/dark-tritanopia.json +240 -153
  48. package/dist/styleLint/functional/themes/dark.json +247 -158
  49. package/dist/styleLint/functional/themes/light-colorblind.json +254 -173
  50. package/dist/styleLint/functional/themes/light-high-contrast.json +452 -361
  51. package/dist/styleLint/functional/themes/light-tritanopia.json +252 -171
  52. package/dist/styleLint/functional/themes/light.json +246 -157
  53. package/package.json +38 -35
  54. package/src/formats/cssAdvanced.ts +3 -3
  55. package/src/formats/cssCustomMedia.ts +2 -2
  56. package/src/formats/javascriptCommonJs.ts +2 -2
  57. package/src/formats/javascriptEsm.ts +2 -2
  58. package/src/formats/jsonFigma.ts +2 -2
  59. package/src/formats/jsonNestedPrefixed.ts +2 -2
  60. package/src/formats/jsonOneDimensional.ts +2 -2
  61. package/src/formats/jsonPostCssFallback.ts +2 -2
  62. package/src/formats/typescriptExportDefinition.ts +2 -2
  63. package/src/schemas/designToken.ts +1 -1
  64. package/src/schemas/validTokenType.ts +1 -1
  65. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +528 -2
  66. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +4 -0
  67. package/src/tokens/functional/color/dark/patterns-dark.json5 +26 -0
  68. package/src/tokens/functional/color/dark/primitives-dark.json5 +78 -65
  69. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +400 -0
  70. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +3 -6
  71. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +3 -6
  72. package/src/tokens/functional/color/light/patterns-light.json5 +26 -0
  73. package/src/tokens/functional/color/light/primitives-light.json5 +77 -64
  74. package/src/tokens/functional/size/border.json +13 -0
package/dist/internalCss/light-tritanopia.css CHANGED
@@ -459,7 +459,7 @@
459
459
  --control-borderColor-emphasis: #868f99;
460
460
  --control-borderColor-disabled: #eaeef2b3;
461
461
  --control-borderColor-selected: #f6f8fa;
462
- --control-borderColor-success: #218bff;
462
+ --control-borderColor-success: #0969da;
463
463
  --control-borderColor-danger: #cf222e;
464
464
  --control-borderColor-warning: #bf8700;
465
465
  --control-iconColor-rest: #636c76;
@@ -514,9 +514,9 @@
514
514
  --button-primary-fgColor-rest: #ffffff;
515
515
  --button-primary-fgColor-disabled: #ffffffcc;
516
516
  --button-primary-iconColor-rest: #ffffffcc;
517
- --button-primary-bgColor-rest: #0f72e3;
518
- --button-primary-bgColor-hover: #0d6bd8;
519
- --button-primary-bgColor-active: #0b64ce;
517
+ --button-primary-bgColor-rest: #0969da;
518
+ --button-primary-bgColor-hover: #0864d1;
519
+ --button-primary-bgColor-active: #075fc8;
520
520
  --button-primary-bgColor-disabled: #92caff;
521
521
  --button-primary-borderColor-rest: #1f232826;
522
522
  --button-primary-borderColor-hover: #1f232826;
@@ -714,20 +714,23 @@
714
714
  --label-coral-fgColor-rest: #ba2e12;
715
715
  --label-coral-fgColor-hover: #9b2712;
716
716
  --label-coral-fgColor-active: #7e2011;
717
+ --tooltip-bgColor: #24292f;
718
+ --tooltip-fgColor: #ffffff;
717
719
  --fgColor-default: #1f2328;
718
720
  --fgColor-muted: #636c76;
719
721
  --fgColor-onEmphasis: #ffffff;
722
+ --fgColor-onInverse: #ffffff;
720
723
  --fgColor-white: #ffffff;
721
724
  --fgColor-black: #1f2328;
722
725
  --fgColor-disabled: #8c959f;
723
726
  --fgColor-link: #0969da;
724
- --fgColor-neutral: #6e7781;
727
+ --fgColor-neutral: #57606a;
725
728
  --fgColor-accent: #0969da;
726
729
  --fgColor-success: #0969da;
730
+ --fgColor-open: #cf222e;
727
731
  --fgColor-attention: #9a6700;
728
732
  --fgColor-severe: #cf222e;
729
733
  --fgColor-danger: #d1242f;
730
- --fgColor-open: #cf222e;
731
734
  --fgColor-closed: #6e7781;
732
735
  --fgColor-done: #8250df;
733
736
  --fgColor-upsell: #8250df;
@@ -746,15 +749,15 @@
746
749
  --bgColor-accent-muted: #ddf4ff;
747
750
  --bgColor-accent-emphasis: #0969da;
748
751
  --bgColor-success-muted: #ddf4ff;
749
- --bgColor-success-emphasis: #0f72e3;
752
+ --bgColor-success-emphasis: #0969da;
753
+ --bgColor-open-muted: #ffebe9;
754
+ --bgColor-open-emphasis: #cf222e;
750
755
  --bgColor-attention-muted: #fff8c5;
751
756
  --bgColor-attention-emphasis: #9a6700;
752
757
  --bgColor-severe-muted: #ffebe9;
753
758
  --bgColor-severe-emphasis: #cf222e;
754
759
  --bgColor-danger-muted: #ffebe9;
755
760
  --bgColor-danger-emphasis: #cf222e;
756
- --bgColor-open-muted: #ffebe9;
757
- --bgColor-open-emphasis: #cf222e;
758
761
  --bgColor-closed-muted: #f6f8fa;
759
762
  --bgColor-closed-emphasis: #6e7781;
760
763
  --bgColor-done-muted: #fbefff;
@@ -774,15 +777,15 @@
774
777
  --borderColor-accent-muted: #54aeff66;
775
778
  --borderColor-accent-emphasis: #0969da;
776
779
  --borderColor-success-muted: #54aeff66;
777
- --borderColor-success-emphasis: #218bff;
780
+ --borderColor-success-emphasis: #0969da;
781
+ --borderColor-open-muted: #ff818266;
782
+ --borderColor-open-emphasis: #cf222e;
778
783
  --borderColor-attention-muted: #d4a72c66;
779
784
  --borderColor-attention-emphasis: #bf8700;
780
785
  --borderColor-severe-muted: #ff818266;
781
786
  --borderColor-severe-emphasis: #cf222e;
782
787
  --borderColor-danger-muted: #ff818266;
783
788
  --borderColor-danger-emphasis: #cf222e;
784
- --borderColor-open-muted: #ff818266;
785
- --borderColor-open-emphasis: #cf222e;
786
789
  --borderColor-closed-muted: #afb8c166;
787
790
  --borderColor-closed-emphasis: #6e7781;
788
791
  --borderColor-done-muted: #c297ff66;
@@ -1308,7 +1311,7 @@
1308
1311
  --control-borderColor-emphasis: #868f99;
1309
1312
  --control-borderColor-disabled: #eaeef2b3;
1310
1313
  --control-borderColor-selected: #f6f8fa;
1311
- --control-borderColor-success: #218bff;
1314
+ --control-borderColor-success: #0969da;
1312
1315
  --control-borderColor-danger: #cf222e;
1313
1316
  --control-borderColor-warning: #bf8700;
1314
1317
  --control-iconColor-rest: #636c76;
@@ -1363,9 +1366,9 @@
1363
1366
  --button-primary-fgColor-rest: #ffffff;
1364
1367
  --button-primary-fgColor-disabled: #ffffffcc;
1365
1368
  --button-primary-iconColor-rest: #ffffffcc;
1366
- --button-primary-bgColor-rest: #0f72e3;
1367
- --button-primary-bgColor-hover: #0d6bd8;
1368
- --button-primary-bgColor-active: #0b64ce;
1369
+ --button-primary-bgColor-rest: #0969da;
1370
+ --button-primary-bgColor-hover: #0864d1;
1371
+ --button-primary-bgColor-active: #075fc8;
1369
1372
  --button-primary-bgColor-disabled: #92caff;
1370
1373
  --button-primary-borderColor-rest: #1f232826;
1371
1374
  --button-primary-borderColor-hover: #1f232826;
@@ -1563,20 +1566,23 @@
1563
1566
  --label-coral-fgColor-rest: #ba2e12;
1564
1567
  --label-coral-fgColor-hover: #9b2712;
1565
1568
  --label-coral-fgColor-active: #7e2011;
1569
+ --tooltip-bgColor: #24292f;
1570
+ --tooltip-fgColor: #ffffff;
1566
1571
  --fgColor-default: #1f2328;
1567
1572
  --fgColor-muted: #636c76;
1568
1573
  --fgColor-onEmphasis: #ffffff;
1574
+ --fgColor-onInverse: #ffffff;
1569
1575
  --fgColor-white: #ffffff;
1570
1576
  --fgColor-black: #1f2328;
1571
1577
  --fgColor-disabled: #8c959f;
1572
1578
  --fgColor-link: #0969da;
1573
- --fgColor-neutral: #6e7781;
1579
+ --fgColor-neutral: #57606a;
1574
1580
  --fgColor-accent: #0969da;
1575
1581
  --fgColor-success: #0969da;
1582
+ --fgColor-open: #cf222e;
1576
1583
  --fgColor-attention: #9a6700;
1577
1584
  --fgColor-severe: #cf222e;
1578
1585
  --fgColor-danger: #d1242f;
1579
- --fgColor-open: #cf222e;
1580
1586
  --fgColor-closed: #6e7781;
1581
1587
  --fgColor-done: #8250df;
1582
1588
  --fgColor-upsell: #8250df;
@@ -1595,15 +1601,15 @@
1595
1601
  --bgColor-accent-muted: #ddf4ff;
1596
1602
  --bgColor-accent-emphasis: #0969da;
1597
1603
  --bgColor-success-muted: #ddf4ff;
1598
- --bgColor-success-emphasis: #0f72e3;
1604
+ --bgColor-success-emphasis: #0969da;
1605
+ --bgColor-open-muted: #ffebe9;
1606
+ --bgColor-open-emphasis: #cf222e;
1599
1607
  --bgColor-attention-muted: #fff8c5;
1600
1608
  --bgColor-attention-emphasis: #9a6700;
1601
1609
  --bgColor-severe-muted: #ffebe9;
1602
1610
  --bgColor-severe-emphasis: #cf222e;
1603
1611
  --bgColor-danger-muted: #ffebe9;
1604
1612
  --bgColor-danger-emphasis: #cf222e;
1605
- --bgColor-open-muted: #ffebe9;
1606
- --bgColor-open-emphasis: #cf222e;
1607
1613
  --bgColor-closed-muted: #f6f8fa;
1608
1614
  --bgColor-closed-emphasis: #6e7781;
1609
1615
  --bgColor-done-muted: #fbefff;
@@ -1623,15 +1629,15 @@
1623
1629
  --borderColor-accent-muted: #54aeff66;
1624
1630
  --borderColor-accent-emphasis: #0969da;
1625
1631
  --borderColor-success-muted: #54aeff66;
1626
- --borderColor-success-emphasis: #218bff;
1632
+ --borderColor-success-emphasis: #0969da;
1633
+ --borderColor-open-muted: #ff818266;
1634
+ --borderColor-open-emphasis: #cf222e;
1627
1635
  --borderColor-attention-muted: #d4a72c66;
1628
1636
  --borderColor-attention-emphasis: #bf8700;
1629
1637
  --borderColor-severe-muted: #ff818266;
1630
1638
  --borderColor-severe-emphasis: #cf222e;
1631
1639
  --borderColor-danger-muted: #ff818266;
1632
1640
  --borderColor-danger-emphasis: #cf222e;
1633
- --borderColor-open-muted: #ff818266;
1634
- --borderColor-open-emphasis: #cf222e;
1635
1641
  --borderColor-closed-muted: #afb8c166;
1636
1642
  --borderColor-closed-emphasis: #6e7781;
1637
1643
  --borderColor-done-muted: #c297ff66;
package/dist/internalCss/light.css CHANGED
@@ -714,20 +714,23 @@
714
714
  --label-coral-fgColor-rest: #ba2e12;
715
715
  --label-coral-fgColor-hover: #9b2712;
716
716
  --label-coral-fgColor-active: #7e2011;
717
+ --tooltip-bgColor: #24292f;
718
+ --tooltip-fgColor: #ffffff;
717
719
  --fgColor-default: #1f2328;
718
720
  --fgColor-muted: #636c76;
719
721
  --fgColor-onEmphasis: #ffffff;
722
+ --fgColor-onInverse: #ffffff;
720
723
  --fgColor-white: #ffffff;
721
724
  --fgColor-black: #1f2328;
722
725
  --fgColor-disabled: #8c959f;
723
726
  --fgColor-link: #0969da;
724
- --fgColor-neutral: #6e7781;
727
+ --fgColor-neutral: #57606a;
725
728
  --fgColor-accent: #0969da;
726
729
  --fgColor-success: #1a7f37;
730
+ --fgColor-open: #1a7f37;
727
731
  --fgColor-attention: #9a6700;
728
732
  --fgColor-severe: #bc4c00;
729
733
  --fgColor-danger: #d1242f;
730
- --fgColor-open: #1a7f37;
731
734
  --fgColor-closed: #d1242f;
732
735
  --fgColor-done: #8250df;
733
736
  --fgColor-upsell: #8250df;
@@ -747,14 +750,14 @@
747
750
  --bgColor-accent-emphasis: #0969da;
748
751
  --bgColor-success-muted: #dafbe1;
749
752
  --bgColor-success-emphasis: #1f883d;
753
+ --bgColor-open-muted: #dafbe1;
754
+ --bgColor-open-emphasis: #1f883d;
750
755
  --bgColor-attention-muted: #fff8c5;
751
756
  --bgColor-attention-emphasis: #9a6700;
752
757
  --bgColor-severe-muted: #fff1e5;
753
758
  --bgColor-severe-emphasis: #bc4c00;
754
759
  --bgColor-danger-muted: #ffebe9;
755
760
  --bgColor-danger-emphasis: #cf222e;
756
- --bgColor-open-muted: #dafbe1;
757
- --bgColor-open-emphasis: #1f883d;
758
761
  --bgColor-closed-muted: #ffebe9;
759
762
  --bgColor-closed-emphasis: #cf222e;
760
763
  --bgColor-done-muted: #fbefff;
@@ -775,14 +778,14 @@
775
778
  --borderColor-accent-emphasis: #0969da;
776
779
  --borderColor-success-muted: #4ac26b66;
777
780
  --borderColor-success-emphasis: #1a7f37;
781
+ --borderColor-open-muted: #4ac26b66;
782
+ --borderColor-open-emphasis: #1a7f37;
778
783
  --borderColor-attention-muted: #d4a72c66;
779
784
  --borderColor-attention-emphasis: #bf8700;
780
785
  --borderColor-severe-muted: #fb8f4466;
781
786
  --borderColor-severe-emphasis: #bc4c00;
782
787
  --borderColor-danger-muted: #ff818266;
783
788
  --borderColor-danger-emphasis: #cf222e;
784
- --borderColor-open-muted: #4ac26b66;
785
- --borderColor-open-emphasis: #1a7f37;
786
789
  --borderColor-closed-muted: #ff818266;
787
790
  --borderColor-closed-emphasis: #cf222e;
788
791
  --borderColor-done-muted: #c297ff66;
@@ -1563,20 +1566,23 @@
1563
1566
  --label-coral-fgColor-rest: #ba2e12;
1564
1567
  --label-coral-fgColor-hover: #9b2712;
1565
1568
  --label-coral-fgColor-active: #7e2011;
1569
+ --tooltip-bgColor: #24292f;
1570
+ --tooltip-fgColor: #ffffff;
1566
1571
  --fgColor-default: #1f2328;
1567
1572
  --fgColor-muted: #636c76;
1568
1573
  --fgColor-onEmphasis: #ffffff;
1574
+ --fgColor-onInverse: #ffffff;
1569
1575
  --fgColor-white: #ffffff;
1570
1576
  --fgColor-black: #1f2328;
1571
1577
  --fgColor-disabled: #8c959f;
1572
1578
  --fgColor-link: #0969da;
1573
- --fgColor-neutral: #6e7781;
1579
+ --fgColor-neutral: #57606a;
1574
1580
  --fgColor-accent: #0969da;
1575
1581
  --fgColor-success: #1a7f37;
1582
+ --fgColor-open: #1a7f37;
1576
1583
  --fgColor-attention: #9a6700;
1577
1584
  --fgColor-severe: #bc4c00;
1578
1585
  --fgColor-danger: #d1242f;
1579
- --fgColor-open: #1a7f37;
1580
1586
  --fgColor-closed: #d1242f;
1581
1587
  --fgColor-done: #8250df;
1582
1588
  --fgColor-upsell: #8250df;
@@ -1596,14 +1602,14 @@
1596
1602
  --bgColor-accent-emphasis: #0969da;
1597
1603
  --bgColor-success-muted: #dafbe1;
1598
1604
  --bgColor-success-emphasis: #1f883d;
1605
+ --bgColor-open-muted: #dafbe1;
1606
+ --bgColor-open-emphasis: #1f883d;
1599
1607
  --bgColor-attention-muted: #fff8c5;
1600
1608
  --bgColor-attention-emphasis: #9a6700;
1601
1609
  --bgColor-severe-muted: #fff1e5;
1602
1610
  --bgColor-severe-emphasis: #bc4c00;
1603
1611
  --bgColor-danger-muted: #ffebe9;
1604
1612
  --bgColor-danger-emphasis: #cf222e;
1605
- --bgColor-open-muted: #dafbe1;
1606
- --bgColor-open-emphasis: #1f883d;
1607
1613
  --bgColor-closed-muted: #ffebe9;
1608
1614
  --bgColor-closed-emphasis: #cf222e;
1609
1615
  --bgColor-done-muted: #fbefff;
@@ -1624,14 +1630,14 @@
1624
1630
  --borderColor-accent-emphasis: #0969da;
1625
1631
  --borderColor-success-muted: #4ac26b66;
1626
1632
  --borderColor-success-emphasis: #1a7f37;
1633
+ --borderColor-open-muted: #4ac26b66;
1634
+ --borderColor-open-emphasis: #1a7f37;
1627
1635
  --borderColor-attention-muted: #d4a72c66;
1628
1636
  --borderColor-attention-emphasis: #bf8700;
1629
1637
  --borderColor-severe-muted: #fb8f4466;
1630
1638
  --borderColor-severe-emphasis: #bc4c00;
1631
1639
  --borderColor-danger-muted: #ff818266;
1632
1640
  --borderColor-danger-emphasis: #cf222e;
1633
- --borderColor-open-muted: #4ac26b66;
1634
- --borderColor-open-emphasis: #1a7f37;
1635
1641
  --borderColor-closed-muted: #ff818266;
1636
1642
  --borderColor-closed-emphasis: #cf222e;
1637
1643
  --borderColor-done-muted: #c297ff66;
package/dist/styleLint/functional/size/border.json CHANGED
@@ -205,6 +205,37 @@
205
205
  "attributes": {},
206
206
  "path": ["borderRadius", "full"]
207
207
  },
208
+ "borderRadius-default": {
209
+ "value": ["0.0234375rem", "0.375px"],
210
+ "$type": "dimension",
211
+ "$extensions": {
212
+ "org.primer.figma": {
213
+ "collection": "functional/size",
214
+ "scopes": ["radius"],
215
+ "codeSyntax": {
216
+ "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
217
+ }
218
+ }
219
+ },
220
+ "filePath": "src/tokens/functional/size/border.json",
221
+ "isSource": true,
222
+ "original": {
223
+ "value": "{borderRadius.medium}",
224
+ "$type": "dimension",
225
+ "$extensions": {
226
+ "org.primer.figma": {
227
+ "collection": "functional/size",
228
+ "scopes": ["radius"],
229
+ "codeSyntax": {
230
+ "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
231
+ }
232
+ }
233
+ }
234
+ },
235
+ "name": "borderRadius-default",
236
+ "attributes": {},
237
+ "path": ["borderRadius", "default"]
238
+ },
208
239
  "outline-focus-offset": {
209
240
  "value": ["-0.125rem", "-2px"],
210
241
  "$type": "dimension",