@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/internalCss/dark-colorblind.css CHANGED
@@ -296,8 +296,6 @@
296
296
  --borderWidth-thick: 0.125rem;
297
297
  --borderWidth-thicker: 0.25rem;
298
298
  --borderWidth-thin: 0.0625rem;
299
- --button-danger-bgColor-active: #b5531d;
300
- --button-danger-iconColor-rest: #f0883e;
301
299
  --button-primary-bgColor-active: #3685f3;
302
300
  --button-primary-bgColor-hover: #2a7aef;
303
301
  --button-primary-borderColor-disabled: #1158c7;
@@ -444,11 +442,7 @@
444
442
  --contribution-default-bgColor-2: var(--base-color-green-6);
445
443
  --contribution-default-bgColor-3: var(--base-color-green-4);
446
444
  --contribution-default-bgColor-4: var(--base-color-green-2);
447
- --contribution-default-borderColor-0: #ffffff0d;
448
- --contribution-default-borderColor-1: #ffffff0d;
449
- --contribution-default-borderColor-2: #ffffff0d;
450
- --contribution-default-borderColor-3: #ffffff0d;
451
- --contribution-default-borderColor-4: #ffffff0d;
445
+ --contribution-default-borderColor-0: #0104090d;
452
446
  --contribution-halloween-bgColor-1: var(--base-display-color-orange-9);
453
447
  --contribution-halloween-bgColor-2: var(--base-display-color-orange-5);
454
448
  --contribution-halloween-bgColor-3: var(--base-display-color-orange-4);
@@ -467,7 +461,7 @@
467
461
  --control-transparent-bgColor-active: #656c7640;
468
462
  --control-transparent-bgColor-hover: #656c7633;
469
463
  --control-transparent-bgColor-rest: var(--base-color-transparent);
470
- --control-transparent-bgColor-selected: #656c761a;
464
+ --control-transparent-bgColor-selected: #656c7633;
471
465
  --control-transparent-borderColor-active: var(--base-color-transparent);
472
466
  --control-transparent-borderColor-hover: var(--base-color-transparent);
473
467
  --control-transparent-borderColor-rest: var(--base-color-transparent);
@@ -805,7 +799,7 @@
805
799
  --fgColor-attention: var(--base-color-yellow-3);
806
800
  --fgColor-danger: var(--base-color-orange-3);
807
801
  --fgColor-default: var(--base-color-neutral-12);
808
- --fgColor-disabled: #656c7699;
802
+ --fgColor-disabled: var(--base-color-neutral-8);
809
803
  --fgColor-done: var(--base-color-purple-4);
810
804
  --fgColor-link: var(--fgColor-accent);
811
805
  --fgColor-muted: var(--base-color-neutral-9);
@@ -978,6 +972,7 @@
978
972
  --borderColor-translucent: #ffffff26;
979
973
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
980
974
  --borderColor-upsell-muted: var(--borderColor-done-muted);
975
+ --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
981
976
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
982
977
  --button-danger-fgColor-active: var(--base-color-neutral-13);
983
978
  --button-danger-fgColor-disabled: #f0883e80;
@@ -998,7 +993,6 @@
998
993
  --button-outline-bgColor-hover: var(--control-bgColor-hover);
999
994
  --button-outline-fgColor-active: var(--base-color-neutral-13);
1000
995
  --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
1001
- --button-primary-borderColor-rest: #ffffff1a;
1002
996
  --button-primary-fgColor-disabled: #ffffff66;
1003
997
  --buttonCounter-danger-bgColor-disabled: #bd561d0d;
1004
998
  --buttonCounter-danger-bgColor-hover: #ffffff33;
@@ -1020,6 +1014,10 @@
1020
1014
  --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
1021
1015
  --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
1022
1016
  --color-ansi-white-bright: var(--base-color-neutral-13);
1017
+ --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
1018
+ --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
1019
+ --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
1020
+ --contribution-default-borderColor-4: var(--contribution-default-borderColor-0);
1023
1021
  --control-bgColor-disabled: var(--bgColor-disabled);
1024
1022
  --control-bgColor-selected: var(--control-bgColor-rest);
1025
1023
  --control-borderColor-danger: var(--borderColor-danger-emphasis);
@@ -1090,8 +1088,8 @@
1090
1088
  --border-upsell-muted: 0.0625rem solid #ab7df866;
1091
1089
  --borderColor-neutral-muted: var(--borderColor-muted);
1092
1090
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
1093
- --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1094
1091
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
1092
+ --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
1095
1093
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
1096
1094
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
1097
1095
  --button-default-borderColor-rest: var(--control-borderColor-rest);
@@ -1102,8 +1100,7 @@
1102
1100
  --button-invisible-fgColor-rest: var(--control-fgColor-rest);
1103
1101
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
1104
1102
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
1105
- --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
1106
- --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
1103
+ --button-primary-borderColor-rest: var(--borderColor-translucent);
1107
1104
  --button-primary-fgColor-rest: var(--fgColor-white);
1108
1105
  --button-primary-iconColor-rest: var(--fgColor-white);
1109
1106
  --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
@@ -1120,20 +1117,23 @@
1120
1117
  --overlay-borderColor: var(--borderColor-muted);
1121
1118
  --tooltip-fgColor: var(--fgColor-onEmphasis);
1122
1119
  --border-neutral-muted: 0.0625rem solid #3d444db3;
1123
- --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1120
+ --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
1124
1121
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
1125
1122
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
1123
+ --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
1124
+ --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
1126
1125
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
1127
1126
  --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;
1128
1127
  --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
1129
1128
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
1130
1129
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
1130
+ --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1131
1131
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
1132
1132
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1133
1133
  }
1134
1134
  @media (prefers-color-scheme: dark) {
1135
- [data-color-mode="auto"][data-dark-theme="dark_colorblind"],
1136
- [data-color-mode="auto"][data-dark-theme="dark_colorblind"] ::backdrop {
1135
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"],
1136
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"] ::backdrop {
1137
1137
  --base-color-black: #010409;
1138
1138
  --base-color-blue-0: #cae8ff;
1139
1139
  --base-color-blue-1: #a5d6ff;
@@ -1428,8 +1428,6 @@
1428
1428
  --borderWidth-thick: 0.125rem;
1429
1429
  --borderWidth-thicker: 0.25rem;
1430
1430
  --borderWidth-thin: 0.0625rem;
1431
- --button-danger-bgColor-active: #b5531d;
1432
- --button-danger-iconColor-rest: #f0883e;
1433
1431
  --button-primary-bgColor-active: #3685f3;
1434
1432
  --button-primary-bgColor-hover: #2a7aef;
1435
1433
  --button-primary-borderColor-disabled: #1158c7;
@@ -1576,11 +1574,7 @@
1576
1574
  --contribution-default-bgColor-2: var(--base-color-green-6);
1577
1575
  --contribution-default-bgColor-3: var(--base-color-green-4);
1578
1576
  --contribution-default-bgColor-4: var(--base-color-green-2);
1579
- --contribution-default-borderColor-0: #ffffff0d;
1580
- --contribution-default-borderColor-1: #ffffff0d;
1581
- --contribution-default-borderColor-2: #ffffff0d;
1582
- --contribution-default-borderColor-3: #ffffff0d;
1583
- --contribution-default-borderColor-4: #ffffff0d;
1577
+ --contribution-default-borderColor-0: #0104090d;
1584
1578
  --contribution-halloween-bgColor-1: var(--base-display-color-orange-9);
1585
1579
  --contribution-halloween-bgColor-2: var(--base-display-color-orange-5);
1586
1580
  --contribution-halloween-bgColor-3: var(--base-display-color-orange-4);
@@ -1599,7 +1593,7 @@
1599
1593
  --control-transparent-bgColor-active: #656c7640;
1600
1594
  --control-transparent-bgColor-hover: #656c7633;
1601
1595
  --control-transparent-bgColor-rest: var(--base-color-transparent);
1602
- --control-transparent-bgColor-selected: #656c761a;
1596
+ --control-transparent-bgColor-selected: #656c7633;
1603
1597
  --control-transparent-borderColor-active: var(--base-color-transparent);
1604
1598
  --control-transparent-borderColor-hover: var(--base-color-transparent);
1605
1599
  --control-transparent-borderColor-rest: var(--base-color-transparent);
@@ -1937,7 +1931,7 @@
1937
1931
  --fgColor-attention: var(--base-color-yellow-3);
1938
1932
  --fgColor-danger: var(--base-color-orange-3);
1939
1933
  --fgColor-default: var(--base-color-neutral-12);
1940
- --fgColor-disabled: #656c7699;
1934
+ --fgColor-disabled: var(--base-color-neutral-8);
1941
1935
  --fgColor-done: var(--base-color-purple-4);
1942
1936
  --fgColor-link: var(--fgColor-accent);
1943
1937
  --fgColor-muted: var(--base-color-neutral-9);
@@ -2110,6 +2104,7 @@
2110
2104
  --borderColor-translucent: #ffffff26;
2111
2105
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis);
2112
2106
  --borderColor-upsell-muted: var(--borderColor-done-muted);
2107
+ --button-danger-bgColor-active: var(--bgColor-danger-emphasis);
2113
2108
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
2114
2109
  --button-danger-fgColor-active: var(--base-color-neutral-13);
2115
2110
  --button-danger-fgColor-disabled: #f0883e80;
@@ -2130,7 +2125,6 @@
2130
2125
  --button-outline-bgColor-hover: var(--control-bgColor-hover);
2131
2126
  --button-outline-fgColor-active: var(--base-color-neutral-13);
2132
2127
  --button-primary-bgColor-rest: var(--bgColor-success-emphasis);
2133
- --button-primary-borderColor-rest: #ffffff1a;
2134
2128
  --button-primary-fgColor-disabled: #ffffff66;
2135
2129
  --buttonCounter-danger-bgColor-disabled: #bd561d0d;
2136
2130
  --buttonCounter-danger-bgColor-hover: #ffffff33;
@@ -2152,6 +2146,10 @@
2152
2146
  --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
2153
2147
  --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
2154
2148
  --color-ansi-white-bright: var(--base-color-neutral-13);
2149
+ --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
2150
+ --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
2151
+ --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
2152
+ --contribution-default-borderColor-4: var(--contribution-default-borderColor-0);
2155
2153
  --control-bgColor-disabled: var(--bgColor-disabled);
2156
2154
  --control-bgColor-selected: var(--control-bgColor-rest);
2157
2155
  --control-borderColor-danger: var(--borderColor-danger-emphasis);
@@ -2222,8 +2220,8 @@
2222
2220
  --border-upsell-muted: 0.0625rem solid #ab7df866;
2223
2221
  --borderColor-neutral-muted: var(--borderColor-muted);
2224
2222
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
2225
- --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
2226
2223
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
2224
+ --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
2227
2225
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
2228
2226
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
2229
2227
  --button-default-borderColor-rest: var(--control-borderColor-rest);
@@ -2234,8 +2232,7 @@
2234
2232
  --button-invisible-fgColor-rest: var(--control-fgColor-rest);
2235
2233
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
2236
2234
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
2237
- --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
2238
- --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
2235
+ --button-primary-borderColor-rest: var(--borderColor-translucent);
2239
2236
  --button-primary-fgColor-rest: var(--fgColor-white);
2240
2237
  --button-primary-iconColor-rest: var(--fgColor-white);
2241
2238
  --control-checked-borderColor-disabled: var(--control-checked-bgColor-disabled);
@@ -2252,14 +2249,17 @@
2252
2249
  --overlay-borderColor: var(--borderColor-muted);
2253
2250
  --tooltip-fgColor: var(--fgColor-onEmphasis);
2254
2251
  --border-neutral-muted: 0.0625rem solid #3d444db3;
2255
- --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2252
+ --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
2256
2253
  --button-default-borderColor-active: var(--button-default-borderColor-rest);
2257
2254
  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
2255
+ --button-primary-borderColor-active: var(--button-primary-borderColor-rest);
2256
+ --button-primary-borderColor-hover: var(--button-primary-borderColor-rest);
2258
2257
  --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
2259
2258
  --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;
2260
2259
  --shadow-floating-small: 0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
2261
2260
  --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
2262
2261
  --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
2262
+ --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2263
2263
  --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
2264
2264
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
2265
2265
  }