@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/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);
@@ -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);
@@ -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
  }