@primer/primitives 10.8.0-rc.f296f65b → 11.0.0-rc.a6a4b391

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 (95) hide show
  1. package/dist/build/platforms/css.js +2 -1
  2. package/dist/build/schemas/collections.d.ts +1 -1
  3. package/dist/build/schemas/colorToken.d.ts +260 -0
  4. package/dist/build/schemas/colorToken.js +10 -0
  5. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +1658 -0
  6. package/dist/css/functional/themes/dark-colorblind.css +26 -26
  7. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +1658 -0
  8. package/dist/css/functional/themes/dark-dimmed.css +60 -60
  9. package/dist/css/functional/themes/dark-high-contrast.css +24 -24
  10. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +1658 -0
  11. package/dist/css/functional/themes/dark-tritanopia.css +26 -26
  12. package/dist/css/functional/themes/dark.css +26 -26
  13. package/dist/css/functional/themes/light-colorblind-high-contrast.css +1658 -0
  14. package/dist/css/functional/themes/light-colorblind.css +30 -30
  15. package/dist/css/functional/themes/light-high-contrast.css +32 -32
  16. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +1658 -0
  17. package/dist/css/functional/themes/light-tritanopia.css +28 -28
  18. package/dist/css/functional/themes/light.css +28 -28
  19. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +43196 -0
  20. package/dist/docs/functional/themes/dark-colorblind.json +7751 -517
  21. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +43190 -0
  22. package/dist/docs/functional/themes/dark-dimmed.json +7795 -561
  23. package/dist/docs/functional/themes/dark-high-contrast.json +7749 -519
  24. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +43194 -0
  25. package/dist/docs/functional/themes/dark-tritanopia.json +7751 -517
  26. package/dist/docs/functional/themes/dark.json +7751 -517
  27. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +43156 -0
  28. package/dist/docs/functional/themes/light-colorblind.json +7742 -508
  29. package/dist/docs/functional/themes/light-high-contrast.json +7758 -528
  30. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +43156 -0
  31. package/dist/docs/functional/themes/light-tritanopia.json +7740 -506
  32. package/dist/docs/functional/themes/light.json +7740 -506
  33. package/dist/figma/figma.json +18 -8
  34. package/dist/figma/scales/dark-dimmed.json +14 -14
  35. package/dist/figma/themes/dark-colorblind-high-contrast.json +13877 -0
  36. package/dist/figma/themes/dark-colorblind.json +35 -38
  37. package/dist/figma/themes/dark-dimmed-high-contrast.json +13871 -0
  38. package/dist/figma/themes/dark-dimmed.json +102 -107
  39. package/dist/figma/themes/dark-high-contrast.json +28 -34
  40. package/dist/figma/themes/dark-tritanopia-high-contrast.json +13873 -0
  41. package/dist/figma/themes/dark-tritanopia.json +35 -38
  42. package/dist/figma/themes/dark.json +35 -38
  43. package/dist/figma/themes/light-colorblind-high-contrast.json +13857 -0
  44. package/dist/figma/themes/light-colorblind.json +21 -24
  45. package/dist/figma/themes/light-high-contrast.json +46 -51
  46. package/dist/figma/themes/light-tritanopia-high-contrast.json +13856 -0
  47. package/dist/figma/themes/light-tritanopia.json +19 -23
  48. package/dist/figma/themes/light.json +19 -23
  49. package/dist/internalCss/dark-colorblind-high-contrast.css +2266 -0
  50. package/dist/internalCss/dark-colorblind.css +26 -26
  51. package/dist/internalCss/dark-dimmed-high-contrast.css +2266 -0
  52. package/dist/internalCss/dark-dimmed.css +54 -54
  53. package/dist/internalCss/dark-high-contrast.css +24 -24
  54. package/dist/internalCss/dark-tritanopia-high-contrast.css +2266 -0
  55. package/dist/internalCss/dark-tritanopia.css +26 -26
  56. package/dist/internalCss/dark.css +26 -26
  57. package/dist/internalCss/light-colorblind-high-contrast.css +2266 -0
  58. package/dist/internalCss/light-colorblind.css +30 -30
  59. package/dist/internalCss/light-high-contrast.css +32 -32
  60. package/dist/internalCss/light-tritanopia-high-contrast.css +2266 -0
  61. package/dist/internalCss/light-tritanopia.css +28 -28
  62. package/dist/internalCss/light.css +28 -28
  63. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +43196 -0
  64. package/dist/styleLint/functional/themes/dark-colorblind.json +7751 -517
  65. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +43190 -0
  66. package/dist/styleLint/functional/themes/dark-dimmed.json +7795 -561
  67. package/dist/styleLint/functional/themes/dark-high-contrast.json +7749 -519
  68. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +43194 -0
  69. package/dist/styleLint/functional/themes/dark-tritanopia.json +7751 -517
  70. package/dist/styleLint/functional/themes/dark.json +7751 -517
  71. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +43156 -0
  72. package/dist/styleLint/functional/themes/light-colorblind.json +7742 -508
  73. package/dist/styleLint/functional/themes/light-high-contrast.json +7758 -528
  74. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +43156 -0
  75. package/dist/styleLint/functional/themes/light-tritanopia.json +7740 -506
  76. package/dist/styleLint/functional/themes/light.json +7740 -506
  77. package/package.json +1 -1
  78. package/src/tokens/base/color/dark/dark.dimmed.json5 +0 -9
  79. package/src/tokens/component/avatar.json5 +17 -4
  80. package/src/tokens/component/button.json5 +260 -61
  81. package/src/tokens/component/codeMirror.json5 +20 -2
  82. package/src/tokens/component/contribution.json5 +35 -57
  83. package/src/tokens/component/counter.json5 +5 -0
  84. package/src/tokens/component/diffBlob.json5 +75 -8
  85. package/src/tokens/component/header.json5 +2 -0
  86. package/src/tokens/component/overlay.json5 +25 -0
  87. package/src/tokens/component/skeletonLoader.json5 +20 -0
  88. package/src/tokens/component/tooltip.json5 +8 -2
  89. package/src/tokens/component/topicTag.json5 +5 -0
  90. package/src/tokens/functional/color/bgColor.json5 +86 -0
  91. package/src/tokens/functional/color/borderColor.json5 +268 -0
  92. package/src/tokens/functional/color/control.json5 +343 -0
  93. package/src/tokens/functional/color/display.json5 +1334 -1239
  94. package/src/tokens/functional/color/fgColor.json5 +77 -17
  95. package/src/tokens/functional/color/syntax.json5 +44 -2
package/dist/css/functional/themes/dark-colorblind.css CHANGED
@@ -2,8 +2,6 @@
2
2
  [data-color-mode="dark"][data-dark-theme="dark_colorblind"] ::backdrop,
3
3
  [data-color-mode="auto"][data-light-theme="dark_colorblind"],
4
4
  [data-color-mode="auto"][data-light-theme="dark_colorblind"] ::backdrop {
5
- --button-danger-bgColor-active: #b5531d;
6
- --button-danger-iconColor-rest: #f0883e;
7
5
  --button-primary-bgColor-active: #3685f3;
8
6
  --button-primary-bgColor-hover: #2a7aef;
9
7
  --button-primary-borderColor-disabled: #1158c7;
@@ -140,11 +138,7 @@
140
138
  --contribution-default-bgColor-2: #196c2e;
141
139
  --contribution-default-bgColor-3: #2ea043;
142
140
  --contribution-default-bgColor-4: #56d364;
143
- --contribution-default-borderColor-0: #ffffff0d;
144
- --contribution-default-borderColor-1: #ffffff0d;
145
- --contribution-default-borderColor-2: #ffffff0d;
146
- --contribution-default-borderColor-3: #ffffff0d;
147
- --contribution-default-borderColor-4: #ffffff0d;
141
+ --contribution-default-borderColor-0: #0104090d;
148
142
  --contribution-halloween-bgColor-1: #fac68f;
149
143
  --contribution-halloween-bgColor-2: #c46212;
150
144
  --contribution-halloween-bgColor-3: #984b10;
@@ -674,6 +668,7 @@
674
668
  --borderColor-translucent: #ffffff26;
675
669
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
676
670
  --borderColor-upsell-muted: var(--borderColor-done-muted);
671
+ --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
677
672
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
678
673
  --button-danger-fgColor-active: #ffffff;
679
674
  --button-danger-fgColor-disabled: #f0883e80;
@@ -694,7 +689,6 @@
694
689
  --button-outline-bgColor-hover: var(--control-bgColor-hover);
695
690
  --button-outline-fgColor-active: #ffffff;
696
691
  --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
697
- --button-primary-borderColor-rest: #ffffff1a;
698
692
  --button-primary-fgColor-disabled: #ffffff66;
699
693
  --buttonCounter-danger-bgColor-disabled: #bd561d0d;
700
694
  --buttonCounter-danger-bgColor-hover: #ffffff33;
@@ -716,6 +710,10 @@
716
710
  --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
717
711
  --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
718
712
  --color-ansi-white-bright: #ffffff;
713
+ --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
714
+ --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
715
+ --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
716
+ --contribution-default-borderColor-4: var(--contribution-default-borderColor-0);
719
717
  --control-bgColor-disabled: var(--bgColor-disabled);
720
718
  --control-bgColor-selected: var(--control-bgColor-rest);
721
719
  --control-borderColor-danger: var(--borderColor-danger-emphasis);
@@ -786,8 +784,8 @@
786
784
  --border-upsell-muted: 0.0625rem solid #ab7df866;
787
785
  --borderColor-neutral-muted: var(--borderColor-muted);
788
786
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
789
- --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
790
787
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
788
+ --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
791
789
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
792
790
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
793
791
  --button-default-borderColor-rest: var(--control-borderColor-rest);
@@ -798,8 +796,7 @@
798
796
  --button-invisible-fgColor-rest: var(--control-fgColor-rest);
799
797
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
800
798
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
801
- --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
802
- --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
799
+ --button-primary-borderColor-rest: var(--borderColor-translucent);
803
800
  --button-primary-fgColor-rest: var(--fgColor-white);
804
801
  --button-primary-iconColor-rest: var(--fgColor-white);
805
802
  --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
@@ -816,22 +813,23 @@
816
813
  --overlay-borderColor: var(--borderColor-muted);
817
814
  --tooltip-fgColor: var(--fgColor-onEmphasis);
818
815
  --border-neutral-muted: 0.0625rem solid #3d444db3;
819
- --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
816
+ --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
820
817
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
821
818
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
819
+ --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
820
+ --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
822
821
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
823
822
  --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
824
823
  --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
825
824
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
826
825
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
826
+ --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
827
827
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
828
828
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
829
829
  }
830
830
  @media (prefers-color-scheme: dark) {
831
- [data-color-mode="auto"][data-dark-theme="dark_colorblind"],
832
- [data-color-mode="auto"][data-dark-theme="dark_colorblind"] ::backdrop {
833
- --button-danger-bgColor-active: #b5531d;
834
- --button-danger-iconColor-rest: #f0883e;
831
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"],
832
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"] ::backdrop {
835
833
  --button-primary-bgColor-active: #3685f3;
836
834
  --button-primary-bgColor-hover: #2a7aef;
837
835
  --button-primary-borderColor-disabled: #1158c7;
@@ -968,11 +966,7 @@
968
966
  --contribution-default-bgColor-2: #196c2e;
969
967
  --contribution-default-bgColor-3: #2ea043;
970
968
  --contribution-default-bgColor-4: #56d364;
971
- --contribution-default-borderColor-0: #ffffff0d;
972
- --contribution-default-borderColor-1: #ffffff0d;
973
- --contribution-default-borderColor-2: #ffffff0d;
974
- --contribution-default-borderColor-3: #ffffff0d;
975
- --contribution-default-borderColor-4: #ffffff0d;
969
+ --contribution-default-borderColor-0: #0104090d;
976
970
  --contribution-halloween-bgColor-1: #fac68f;
977
971
  --contribution-halloween-bgColor-2: #c46212;
978
972
  --contribution-halloween-bgColor-3: #984b10;
@@ -1502,6 +1496,7 @@
1502
1496
  --borderColor-translucent: #ffffff26;
1503
1497
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
1504
1498
  --borderColor-upsell-muted: var(--borderColor-done-muted);
1499
+ --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
1505
1500
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
1506
1501
  --button-danger-fgColor-active: #ffffff;
1507
1502
  --button-danger-fgColor-disabled: #f0883e80;
@@ -1522,7 +1517,6 @@
1522
1517
  --button-outline-bgColor-hover: var(--control-bgColor-hover);
1523
1518
  --button-outline-fgColor-active: #ffffff;
1524
1519
  --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
1525
- --button-primary-borderColor-rest: #ffffff1a;
1526
1520
  --button-primary-fgColor-disabled: #ffffff66;
1527
1521
  --buttonCounter-danger-bgColor-disabled: #bd561d0d;
1528
1522
  --buttonCounter-danger-bgColor-hover: #ffffff33;
@@ -1544,6 +1538,10 @@
1544
1538
  --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
1545
1539
  --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
1546
1540
  --color-ansi-white-bright: #ffffff;
1541
+ --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
1542
+ --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
1543
+ --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
1544
+ --contribution-default-borderColor-4: var(--contribution-default-borderColor-0);
1547
1545
  --control-bgColor-disabled: var(--bgColor-disabled);
1548
1546
  --control-bgColor-selected: var(--control-bgColor-rest);
1549
1547
  --control-borderColor-danger: var(--borderColor-danger-emphasis);
@@ -1614,8 +1612,8 @@
1614
1612
  --border-upsell-muted: 0.0625rem solid #ab7df866;
1615
1613
  --borderColor-neutral-muted: var(--borderColor-muted);
1616
1614
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
1617
- --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1618
1615
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
1616
+ --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
1619
1617
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
1620
1618
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
1621
1619
  --button-default-borderColor-rest: var(--control-borderColor-rest);
@@ -1626,8 +1624,7 @@
1626
1624
  --button-invisible-fgColor-rest: var(--control-fgColor-rest);
1627
1625
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
1628
1626
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
1629
- --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
1630
- --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
1627
+ --button-primary-borderColor-rest: var(--borderColor-translucent);
1631
1628
  --button-primary-fgColor-rest: var(--fgColor-white);
1632
1629
  --button-primary-iconColor-rest: var(--fgColor-white);
1633
1630
  --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
@@ -1644,14 +1641,17 @@
1644
1641
  --overlay-borderColor: var(--borderColor-muted);
1645
1642
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1646
1643
  --border-neutral-muted: 0.0625rem solid #3d444db3;
1647
- --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1644
+ --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1648
1645
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
1649
1646
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
1647
+ --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
1648
+ --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
1650
1649
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
1651
1650
  --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
1652
1651
  --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1653
1652
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1654
1653
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1654
+ --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1655
1655
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
1656
1656
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1657
1657
  }