@primer/primitives 10.8.0-rc.f296f65b → 11.0.0-rc.56d48488

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 +30 -30
  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 +30 -30
  12. package/dist/css/functional/themes/dark.css +30 -30
  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 +43194 -0
  20. package/dist/docs/functional/themes/dark-colorblind.json +7878 -648
  21. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +43188 -0
  22. package/dist/docs/functional/themes/dark-dimmed.json +7797 -565
  23. package/dist/docs/functional/themes/dark-high-contrast.json +7751 -523
  24. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +43192 -0
  25. package/dist/docs/functional/themes/dark-tritanopia.json +7878 -648
  26. package/dist/docs/functional/themes/dark.json +7878 -648
  27. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +43154 -0
  28. package/dist/docs/functional/themes/light-colorblind.json +7744 -512
  29. package/dist/docs/functional/themes/light-high-contrast.json +7760 -532
  30. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +43154 -0
  31. package/dist/docs/functional/themes/light-tritanopia.json +7742 -510
  32. package/dist/docs/functional/themes/light.json +7742 -510
  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 +45 -49
  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 +45 -49
  42. package/dist/figma/themes/dark.json +45 -49
  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 +30 -30
  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 +30 -30
  56. package/dist/internalCss/dark.css +30 -30
  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 +43194 -0
  64. package/dist/styleLint/functional/themes/dark-colorblind.json +7877 -647
  65. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +43188 -0
  66. package/dist/styleLint/functional/themes/dark-dimmed.json +7797 -565
  67. package/dist/styleLint/functional/themes/dark-high-contrast.json +7751 -523
  68. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +43192 -0
  69. package/dist/styleLint/functional/themes/dark-tritanopia.json +7877 -647
  70. package/dist/styleLint/functional/themes/dark.json +7877 -647
  71. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +43154 -0
  72. package/dist/styleLint/functional/themes/light-colorblind.json +7744 -512
  73. package/dist/styleLint/functional/themes/light-high-contrast.json +7760 -532
  74. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +43154 -0
  75. package/dist/styleLint/functional/themes/light-tritanopia.json +7742 -510
  76. package/dist/styleLint/functional/themes/light.json +7742 -510
  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 +344 -1
  93. package/src/tokens/functional/color/display.json5 +1334 -1239
  94. package/src/tokens/functional/color/fgColor.json5 +77 -18
  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;
@@ -163,7 +157,7 @@
163
157
  --control-transparent-bgColor-active: #656c7640;
164
158
  --control-transparent-bgColor-hover: #656c7633;
165
159
  --control-transparent-bgColor-rest: #00000000;
166
- --control-transparent-bgColor-selected: #656c761a;
160
+ --control-transparent-bgColor-selected: #656c7633;
167
161
  --control-transparent-borderColor-active: #00000000;
168
162
  --control-transparent-borderColor-hover: #00000000;
169
163
  --control-transparent-borderColor-rest: #00000000;
@@ -501,7 +495,7 @@
501
495
  --fgColor-attention: #d29922;
502
496
  --fgColor-danger: #f0883e;
503
497
  --fgColor-default: #f0f6fc;
504
- --fgColor-disabled: #656c7699;
498
+ --fgColor-disabled: #656c76;
505
499
  --fgColor-done: #ab7df8;
506
500
  --fgColor-link: var(--fgColor-accent);
507
501
  --fgColor-muted: #9198a1;
@@ -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;
@@ -991,7 +985,7 @@
991
985
  --control-transparent-bgColor-active: #656c7640;
992
986
  --control-transparent-bgColor-hover: #656c7633;
993
987
  --control-transparent-bgColor-rest: #00000000;
994
- --control-transparent-bgColor-selected: #656c761a;
988
+ --control-transparent-bgColor-selected: #656c7633;
995
989
  --control-transparent-borderColor-active: #00000000;
996
990
  --control-transparent-borderColor-hover: #00000000;
997
991
  --control-transparent-borderColor-rest: #00000000;
@@ -1329,7 +1323,7 @@
1329
1323
  --fgColor-attention: #d29922;
1330
1324
  --fgColor-danger: #f0883e;
1331
1325
  --fgColor-default: #f0f6fc;
1332
- --fgColor-disabled: #656c7699;
1326
+ --fgColor-disabled: #656c76;
1333
1327
  --fgColor-done: #ab7df8;
1334
1328
  --fgColor-link: var(--fgColor-accent);
1335
1329
  --fgColor-muted: #9198a1;
@@ -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
  }