@primer/components 29.0.0-rc.ae627848 → 29.1.0-rc.4e9b967e

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 (232) hide show
  1. package/.eslintrc.json +2 -1
  2. package/.storybook/preview.js +58 -0
  3. package/CHANGELOG.md +13 -1
  4. package/dist/browser.esm.js +240 -194
  5. package/dist/browser.esm.js.map +1 -1
  6. package/dist/browser.umd.js +339 -293
  7. package/dist/browser.umd.js.map +1 -1
  8. package/docs/content/AnchoredOverlay.mdx +2 -0
  9. package/docs/content/Overlay.mdx +4 -0
  10. package/docs/content/Portal.mdx +11 -9
  11. package/docs/content/overriding-styles.mdx +0 -1
  12. package/docs/content/theme-reference.md +8 -0
  13. package/docs/content/theming.md +1 -2
  14. package/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js +1 -1
  15. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +1 -1
  16. package/lib/ActionList/Divider.js +1 -1
  17. package/lib/ActionList/Header.js +2 -2
  18. package/lib/ActionList/Item.js +10 -10
  19. package/lib/ActionList/List.js +1 -1
  20. package/lib/AvatarPair.js +1 -1
  21. package/lib/AvatarStack.js +1 -1
  22. package/lib/BranchName.js +1 -1
  23. package/lib/Breadcrumb.js +2 -2
  24. package/lib/Button/Button.js +1 -1
  25. package/lib/Button/ButtonClose.js +1 -1
  26. package/lib/Button/ButtonInvisible.js +1 -1
  27. package/lib/Button/ButtonTableList.js +1 -1
  28. package/lib/CircleBadge.js +1 -1
  29. package/lib/CircleOcticon.js +1 -1
  30. package/lib/CounterLabel.js +2 -2
  31. package/lib/Dialog/ConfirmationDialog.js +1 -1
  32. package/lib/Dialog/Dialog.js +5 -5
  33. package/lib/Dialog.js +4 -4
  34. package/lib/Dropdown.js +2 -2
  35. package/lib/DropdownStyles.js +6 -6
  36. package/lib/FilterList.js +1 -1
  37. package/lib/FilteredActionList/FilteredActionList.js +2 -2
  38. package/lib/Flash.js +1 -1
  39. package/lib/Label.js +2 -2
  40. package/lib/Link.js +1 -1
  41. package/lib/Overlay.js +1 -1
  42. package/lib/Pagehead.js +1 -1
  43. package/lib/Pagination/Pagination.js +1 -1
  44. package/lib/Popover.js +1 -1
  45. package/lib/ProgressBar.js +1 -1
  46. package/lib/SelectMenu/SelectMenuDivider.js +1 -1
  47. package/lib/SelectMenu/SelectMenuFilter.js +1 -1
  48. package/lib/SelectMenu/SelectMenuFooter.js +1 -1
  49. package/lib/SelectMenu/SelectMenuHeader.js +2 -2
  50. package/lib/SelectMenu/SelectMenuItem.js +1 -1
  51. package/lib/SelectMenu/SelectMenuList.js +1 -1
  52. package/lib/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  53. package/lib/SelectMenu/SelectMenuModal.js +2 -2
  54. package/lib/SelectMenu/SelectMenuTab.js +1 -1
  55. package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
  56. package/lib/SideNav.js +5 -5
  57. package/lib/StateLabel.js +1 -1
  58. package/lib/SubNav.js +1 -1
  59. package/lib/TabNav.js +2 -2
  60. package/lib/TextInput.js +2 -2
  61. package/lib/Timeline.js +16 -19
  62. package/lib/Tooltip.js +1 -1
  63. package/lib/UnderlineNav.js +2 -2
  64. package/lib/__tests__/BorderBox.js +1 -1
  65. package/lib/__tests__/CircleOcticon.js +1 -1
  66. package/lib/__tests__/Link.js +1 -1
  67. package/lib/__tests__/PointerBox.js +2 -2
  68. package/lib/__tests__/Position.js +4 -4
  69. package/lib/__tests__/ThemeProvider.js +1 -1
  70. package/lib/stories/ActionList.stories.js +1 -1
  71. package/lib/stories/ThemeProvider.stories.js +6 -6
  72. package/lib/stories/useFocusTrap.stories.js +1 -1
  73. package/lib/theme-preval.d.ts +12 -6
  74. package/lib/theme-preval.js +2930 -1738
  75. package/lib/utils/testing.d.ts +4707 -2355
  76. package/lib-esm/ActionList/Divider.js +1 -1
  77. package/lib-esm/ActionList/Header.js +2 -2
  78. package/lib-esm/ActionList/Item.js +10 -10
  79. package/lib-esm/ActionList/List.js +1 -1
  80. package/lib-esm/AvatarPair.js +1 -1
  81. package/lib-esm/AvatarStack.js +1 -1
  82. package/lib-esm/BranchName.js +1 -1
  83. package/lib-esm/Breadcrumb.js +2 -2
  84. package/lib-esm/Button/Button.js +1 -1
  85. package/lib-esm/Button/ButtonClose.js +1 -1
  86. package/lib-esm/Button/ButtonInvisible.js +1 -1
  87. package/lib-esm/Button/ButtonTableList.js +1 -1
  88. package/lib-esm/CircleBadge.js +1 -1
  89. package/lib-esm/CircleOcticon.js +1 -1
  90. package/lib-esm/CounterLabel.js +2 -2
  91. package/lib-esm/Dialog/ConfirmationDialog.js +1 -1
  92. package/lib-esm/Dialog/Dialog.js +5 -5
  93. package/lib-esm/Dialog.js +4 -4
  94. package/lib-esm/Dropdown.js +2 -2
  95. package/lib-esm/DropdownStyles.js +6 -6
  96. package/lib-esm/FilterList.js +1 -1
  97. package/lib-esm/FilteredActionList/FilteredActionList.js +2 -2
  98. package/lib-esm/Flash.js +1 -1
  99. package/lib-esm/Label.js +2 -2
  100. package/lib-esm/Link.js +1 -1
  101. package/lib-esm/Overlay.js +1 -1
  102. package/lib-esm/Pagehead.js +1 -1
  103. package/lib-esm/Pagination/Pagination.js +1 -1
  104. package/lib-esm/Popover.js +1 -1
  105. package/lib-esm/ProgressBar.js +1 -1
  106. package/lib-esm/SelectMenu/SelectMenuDivider.js +1 -1
  107. package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
  108. package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
  109. package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
  110. package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
  111. package/lib-esm/SelectMenu/SelectMenuList.js +1 -1
  112. package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
  113. package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
  114. package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
  115. package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
  116. package/lib-esm/SideNav.js +5 -5
  117. package/lib-esm/StateLabel.js +1 -1
  118. package/lib-esm/SubNav.js +1 -1
  119. package/lib-esm/TabNav.js +2 -2
  120. package/lib-esm/TextInput.js +2 -2
  121. package/lib-esm/Timeline.js +12 -17
  122. package/lib-esm/Tooltip.js +1 -1
  123. package/lib-esm/UnderlineNav.js +2 -2
  124. package/lib-esm/__tests__/BorderBox.js +1 -1
  125. package/lib-esm/__tests__/CircleOcticon.js +1 -1
  126. package/lib-esm/__tests__/Link.js +1 -1
  127. package/lib-esm/__tests__/PointerBox.js +2 -2
  128. package/lib-esm/__tests__/Position.js +4 -4
  129. package/lib-esm/__tests__/ThemeProvider.js +1 -1
  130. package/lib-esm/stories/ActionList.stories.js +1 -1
  131. package/lib-esm/stories/ThemeProvider.stories.js +6 -6
  132. package/lib-esm/stories/useFocusTrap.stories.js +1 -1
  133. package/lib-esm/theme-preval.d.ts +12 -6
  134. package/lib-esm/theme-preval.js +2930 -1738
  135. package/lib-esm/utils/testing.d.ts +4707 -2355
  136. package/package-lock.json +9 -4
  137. package/package.json +3 -2
  138. package/src/ActionList/Divider.tsx +1 -1
  139. package/src/ActionList/Header.tsx +4 -4
  140. package/src/ActionList/Item.tsx +10 -10
  141. package/src/ActionList/List.tsx +1 -1
  142. package/src/AvatarPair.tsx +5 -1
  143. package/src/AvatarStack.tsx +2 -2
  144. package/src/BranchName.tsx +2 -2
  145. package/src/Breadcrumb.tsx +3 -3
  146. package/src/Button/Button.tsx +1 -1
  147. package/src/Button/ButtonClose.tsx +2 -2
  148. package/src/Button/ButtonInvisible.tsx +2 -2
  149. package/src/Button/ButtonTableList.tsx +2 -2
  150. package/src/CircleBadge.tsx +1 -1
  151. package/src/CircleOcticon.tsx +1 -1
  152. package/src/CounterLabel.tsx +6 -6
  153. package/src/Dialog/ConfirmationDialog.tsx +1 -1
  154. package/src/Dialog/Dialog.tsx +5 -5
  155. package/src/Dialog.tsx +4 -4
  156. package/src/Dropdown.tsx +12 -12
  157. package/src/DropdownStyles.ts +6 -6
  158. package/src/FilterList.tsx +5 -5
  159. package/src/FilteredActionList/FilteredActionList.tsx +2 -2
  160. package/src/Flash.tsx +1 -1
  161. package/src/Label.tsx +3 -3
  162. package/src/Link.tsx +2 -2
  163. package/src/Overlay.tsx +1 -1
  164. package/src/Pagehead.tsx +1 -1
  165. package/src/Pagination/Pagination.tsx +7 -7
  166. package/src/Popover.tsx +10 -10
  167. package/src/ProgressBar.tsx +1 -1
  168. package/src/SelectMenu/SelectMenuDivider.tsx +3 -3
  169. package/src/SelectMenu/SelectMenuFilter.tsx +2 -2
  170. package/src/SelectMenu/SelectMenuFooter.tsx +2 -2
  171. package/src/SelectMenu/SelectMenuHeader.tsx +2 -2
  172. package/src/SelectMenu/SelectMenuItem.tsx +6 -6
  173. package/src/SelectMenu/SelectMenuList.tsx +5 -5
  174. package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +1 -1
  175. package/src/SelectMenu/SelectMenuModal.tsx +3 -3
  176. package/src/SelectMenu/SelectMenuTab.tsx +6 -6
  177. package/src/SelectMenu/SelectMenuTabPanel.tsx +1 -1
  178. package/src/SideNav.tsx +11 -11
  179. package/src/StateLabel.tsx +1 -1
  180. package/src/SubNav.tsx +11 -11
  181. package/src/TabNav.tsx +6 -6
  182. package/src/TextInput.tsx +9 -9
  183. package/src/Timeline.tsx +11 -11
  184. package/src/Tooltip.tsx +7 -7
  185. package/src/UnderlineNav.tsx +8 -8
  186. package/src/__tests__/BorderBox.tsx +1 -1
  187. package/src/__tests__/CircleOcticon.tsx +1 -1
  188. package/src/__tests__/Link.tsx +1 -1
  189. package/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap +6 -6
  190. package/src/__tests__/PointerBox.tsx +2 -2
  191. package/src/__tests__/Position.tsx +4 -4
  192. package/src/__tests__/ThemeProvider.tsx +1 -1
  193. package/src/__tests__/__snapshots__/ActionList.tsx.snap +1 -1
  194. package/src/__tests__/__snapshots__/ActionMenu.tsx.snap +11 -11
  195. package/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap +28 -28
  196. package/src/__tests__/__snapshots__/BorderBox.tsx.snap +1 -1
  197. package/src/__tests__/__snapshots__/BranchName.tsx.snap +2 -2
  198. package/src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap +6 -6
  199. package/src/__tests__/__snapshots__/Button.tsx.snap +116 -116
  200. package/src/__tests__/__snapshots__/Caret.tsx.snap +12 -12
  201. package/src/__tests__/__snapshots__/CircleBadge.tsx.snap +4 -4
  202. package/src/__tests__/__snapshots__/CircleOcticon.tsx.snap +1 -1
  203. package/src/__tests__/__snapshots__/CounterLabel.tsx.snap +2 -2
  204. package/src/__tests__/__snapshots__/Dialog.tsx.snap +11 -11
  205. package/src/__tests__/__snapshots__/Dropdown.tsx.snap +18 -18
  206. package/src/__tests__/__snapshots__/DropdownMenu.tsx.snap +11 -11
  207. package/src/__tests__/__snapshots__/FilterListItem.tsx.snap +4 -4
  208. package/src/__tests__/__snapshots__/Flash.tsx.snap +5 -5
  209. package/src/__tests__/__snapshots__/Header.tsx.snap +1 -1
  210. package/src/__tests__/__snapshots__/Label.tsx.snap +6 -6
  211. package/src/__tests__/__snapshots__/Link.tsx.snap +10 -10
  212. package/src/__tests__/__snapshots__/Pagehead.tsx.snap +1 -1
  213. package/src/__tests__/__snapshots__/PointerBox.tsx.snap +10 -10
  214. package/src/__tests__/__snapshots__/Popover.tsx.snap +70 -70
  215. package/src/__tests__/__snapshots__/ProgressBar.tsx.snap +4 -4
  216. package/src/__tests__/__snapshots__/SelectMenu.tsx.snap +28 -28
  217. package/src/__tests__/__snapshots__/SelectPanel.tsx.snap +12 -12
  218. package/src/__tests__/__snapshots__/SideNav.tsx.snap +14 -14
  219. package/src/__tests__/__snapshots__/StateLabel.tsx.snap +7 -7
  220. package/src/__tests__/__snapshots__/SubNavLink.tsx.snap +24 -24
  221. package/src/__tests__/__snapshots__/TabNav.tsx.snap +5 -5
  222. package/src/__tests__/__snapshots__/TextInput.tsx.snap +36 -36
  223. package/src/__tests__/__snapshots__/ThemeProvider.tsx.snap +2 -2
  224. package/src/__tests__/__snapshots__/Timeline.tsx.snap +9 -7
  225. package/src/__tests__/__snapshots__/Tooltip.tsx.snap +6 -6
  226. package/src/__tests__/__snapshots__/UnderlineNav.tsx.snap +1 -1
  227. package/src/__tests__/__snapshots__/UnderlineNavLink.tsx.snap +21 -21
  228. package/src/stories/ActionList.stories.tsx +1 -1
  229. package/src/stories/ThemeProvider.stories.tsx +6 -6
  230. package/src/stories/useFocusTrap.stories.tsx +1 -1
  231. package/src/theme-preval.js +16 -0
  232. package/stats.html +1 -1
package/src/__tests__/__snapshots__/Button.tsx.snap CHANGED
@@ -23,10 +23,10 @@ exports[`Button renders consistently 1`] = `
23
23
  text-decoration: none;
24
24
  text-align: center;
25
25
  font-size: 14px;
26
- color: #24292e;
27
- background-color: #fafbfc;
28
- border: 1px solid rgba(27,31,35,0.15);
29
- box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
26
+ color: #24292f;
27
+ background-color: #f6f8fa;
28
+ border: 1px solid rgba(27,31,36,0.15);
29
+ box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
30
30
  }
31
31
 
32
32
  .c0:hover {
@@ -48,23 +48,23 @@ exports[`Button renders consistently 1`] = `
48
48
 
49
49
  .c0:hover {
50
50
  background-color: #f3f4f6;
51
- border-color: rgba(27,31,35,0.15);
51
+ border-color: rgba(27,31,36,0.15);
52
52
  }
53
53
 
54
54
  .c0:focus {
55
- border-color: rgba(27,31,35,0.15);
56
- box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
55
+ border-color: rgba(27,31,36,0.15);
56
+ box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
57
57
  }
58
58
 
59
59
  .c0:active {
60
60
  background-color: hsla(220,14%,94%,1);
61
- box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
61
+ box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
62
62
  }
63
63
 
64
64
  .c0:disabled {
65
- color: #959da5;
66
- background-color: #fafbfc;
67
- border-color: rgba(27,31,35,0.15);
65
+ color: #57606a;
66
+ background-color: #f6f8fa;
67
+ border-color: rgba(27,31,36,0.15);
68
68
  }
69
69
 
70
70
  <button
@@ -95,10 +95,10 @@ exports[`Button respects the "disabled" prop 1`] = `
95
95
  text-decoration: none;
96
96
  text-align: center;
97
97
  font-size: 14px;
98
- color: #24292e;
99
- background-color: #fafbfc;
100
- border: 1px solid rgba(27,31,35,0.15);
101
- box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
98
+ color: #24292f;
99
+ background-color: #f6f8fa;
100
+ border: 1px solid rgba(27,31,36,0.15);
101
+ box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
102
102
  }
103
103
 
104
104
  .c0:hover {
@@ -120,23 +120,23 @@ exports[`Button respects the "disabled" prop 1`] = `
120
120
 
121
121
  .c0:hover {
122
122
  background-color: #f3f4f6;
123
- border-color: rgba(27,31,35,0.15);
123
+ border-color: rgba(27,31,36,0.15);
124
124
  }
125
125
 
126
126
  .c0:focus {
127
- border-color: rgba(27,31,35,0.15);
128
- box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
127
+ border-color: rgba(27,31,36,0.15);
128
+ box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
129
129
  }
130
130
 
131
131
  .c0:active {
132
132
  background-color: hsla(220,14%,94%,1);
133
- box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
133
+ box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
134
134
  }
135
135
 
136
136
  .c0:disabled {
137
- color: #959da5;
138
- background-color: #fafbfc;
139
- border-color: rgba(27,31,35,0.15);
137
+ color: #57606a;
138
+ background-color: #f6f8fa;
139
+ border-color: rgba(27,31,36,0.15);
140
140
  }
141
141
 
142
142
  <button
@@ -168,10 +168,10 @@ exports[`ButtonDanger renders consistently 1`] = `
168
168
  text-decoration: none;
169
169
  text-align: center;
170
170
  font-size: 14px;
171
- color: #d73a49;
172
- border: 1px solid rgba(27,31,35,0.15);
173
- background-color: #fafbfc;
174
- box-shadow: 0 1px 0 rgba(27,31,35,0.04);
171
+ color: #cf222e;
172
+ border: 1px solid rgba(27,31,36,0.15);
173
+ background-color: #f6f8fa;
174
+ box-shadow: 0 1px 0 rgba(27,31,36,0.04);
175
175
  }
176
176
 
177
177
  .c0:hover {
@@ -193,26 +193,26 @@ exports[`ButtonDanger renders consistently 1`] = `
193
193
 
194
194
  .c0:hover {
195
195
  color: #ffffff;
196
- background-color: #cb2431;
197
- border-color: rgba(27,31,35,0.15);
198
- box-shadow: 0 1px 0 rgba(27,31,35,0.1);
196
+ background-color: #a40e26;
197
+ border-color: rgba(27,31,36,0.15);
198
+ box-shadow: 0 1px 0 rgba(27,31,36,0.1);
199
199
  }
200
200
 
201
201
  .c0:focus {
202
- border-color: rgba(27,31,35,0.15);
203
- box-shadow: 0 0 0 3px rgba(203,36,49,0.4);
202
+ border-color: rgba(27,31,36,0.15);
203
+ box-shadow: 0 0 0 3px rgba(164,14,38,0.4);
204
204
  }
205
205
 
206
206
  .c0:active {
207
207
  color: #ffffff;
208
- background-color: hsla(354,66%,51%,1);
209
- box-shadow: inset 0 1px 0 rgba(134,24,29,0.2);
210
- border-color: rgba(27,31,35,0.15);
208
+ background-color: hsla(356,72%,44%,1);
209
+ box-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
210
+ border-color: rgba(27,31,36,0.15);
211
211
  }
212
212
 
213
213
  .c0:disabled {
214
- color: rgba(215,58,73,0.5);
215
- background-color: #fafbfc;
214
+ color: rgba(207,34,46,0.5);
215
+ background-color: #f6f8fa;
216
216
  }
217
217
 
218
218
  <button
@@ -243,10 +243,10 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
243
243
  text-decoration: none;
244
244
  text-align: center;
245
245
  font-size: 14px;
246
- color: #d73a49;
247
- border: 1px solid rgba(27,31,35,0.15);
248
- background-color: #fafbfc;
249
- box-shadow: 0 1px 0 rgba(27,31,35,0.04);
246
+ color: #cf222e;
247
+ border: 1px solid rgba(27,31,36,0.15);
248
+ background-color: #f6f8fa;
249
+ box-shadow: 0 1px 0 rgba(27,31,36,0.04);
250
250
  }
251
251
 
252
252
  .c0:hover {
@@ -268,26 +268,26 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
268
268
 
269
269
  .c0:hover {
270
270
  color: #ffffff;
271
- background-color: #cb2431;
272
- border-color: rgba(27,31,35,0.15);
273
- box-shadow: 0 1px 0 rgba(27,31,35,0.1);
271
+ background-color: #a40e26;
272
+ border-color: rgba(27,31,36,0.15);
273
+ box-shadow: 0 1px 0 rgba(27,31,36,0.1);
274
274
  }
275
275
 
276
276
  .c0:focus {
277
- border-color: rgba(27,31,35,0.15);
278
- box-shadow: 0 0 0 3px rgba(203,36,49,0.4);
277
+ border-color: rgba(27,31,36,0.15);
278
+ box-shadow: 0 0 0 3px rgba(164,14,38,0.4);
279
279
  }
280
280
 
281
281
  .c0:active {
282
282
  color: #ffffff;
283
- background-color: hsla(354,66%,51%,1);
284
- box-shadow: inset 0 1px 0 rgba(134,24,29,0.2);
285
- border-color: rgba(27,31,35,0.15);
283
+ background-color: hsla(356,72%,44%,1);
284
+ box-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
285
+ border-color: rgba(27,31,36,0.15);
286
286
  }
287
287
 
288
288
  .c0:disabled {
289
- color: rgba(215,58,73,0.5);
290
- background-color: #fafbfc;
289
+ color: rgba(207,34,46,0.5);
290
+ background-color: #f6f8fa;
291
291
  }
292
292
 
293
293
  <button
@@ -371,10 +371,10 @@ exports[`ButtonInvisible renders consistently 1`] = `
371
371
  text-decoration: none;
372
372
  text-align: center;
373
373
  font-size: 14px;
374
- color: #0366d6;
375
- border: 1px solid rgba(27,31,35,0.15);
376
- background-color: #fafbfc;
377
- box-shadow: 0 1px 0 rgba(27,31,35,0.04);
374
+ color: #0969da;
375
+ border: 1px solid rgba(27,31,36,0.15);
376
+ background-color: #f6f8fa;
377
+ box-shadow: 0 1px 0 rgba(27,31,36,0.04);
378
378
  }
379
379
 
380
380
  .c0:hover {
@@ -396,27 +396,27 @@ exports[`ButtonInvisible renders consistently 1`] = `
396
396
 
397
397
  .c0:hover {
398
398
  color: #ffffff;
399
- background-color: #0366d6;
400
- border-color: rgba(27,31,35,0.15);
401
- box-shadow: 0 1px 0 rgba(27,31,35,0.1);
399
+ background-color: #0969da;
400
+ border-color: rgba(27,31,36,0.15);
401
+ box-shadow: 0 1px 0 rgba(27,31,36,0.1);
402
402
  }
403
403
 
404
404
  .c0:focus {
405
- border-color: rgba(27,31,35,0.15);
406
- box-shadow: 0 0 0 3px rgba(0,92,197,0.4);
405
+ border-color: rgba(27,31,36,0.15);
406
+ box-shadow: 0 0 0 3px rgba(5,80,174,0.4);
407
407
  }
408
408
 
409
409
  .c0:active {
410
410
  color: #ffffff;
411
- background-color: hsla(212,97%,40%,1);
412
- box-shadow: inset 0 1px 0 rgba(5,38,76,0.2);
413
- border-color: rgba(27,31,35,0.15);
411
+ background-color: hsla(212,92%,42%,1);
412
+ box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
413
+ border-color: rgba(27,31,36,0.15);
414
414
  }
415
415
 
416
416
  .c0:disabled {
417
- color: rgba(3,102,214,0.5);
418
- background-color: #fafbfc;
419
- border-color: rgba(27,31,35,0.15);
417
+ color: rgba(9,105,218,0.5);
418
+ background-color: #f6f8fa;
419
+ border-color: rgba(27,31,36,0.15);
420
420
  }
421
421
 
422
422
  <button
@@ -447,7 +447,7 @@ exports[`ButtonInvisible renders correct disabled styles 1`] = `
447
447
  text-decoration: none;
448
448
  text-align: center;
449
449
  font-size: 14px;
450
- color: #0366d6;
450
+ color: #0969da;
451
451
  background-color: transparent;
452
452
  border: 0;
453
453
  border-radius: 6px;
@@ -472,11 +472,11 @@ exports[`ButtonInvisible renders correct disabled styles 1`] = `
472
472
  }
473
473
 
474
474
  .c0:disabled {
475
- color: #959da5;
475
+ color: #57606a;
476
476
  }
477
477
 
478
478
  .c0:focus {
479
- box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
479
+ box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
480
480
  }
481
481
 
482
482
  <button
@@ -508,10 +508,10 @@ exports[`ButtonOutline renders consistently 1`] = `
508
508
  text-decoration: none;
509
509
  text-align: center;
510
510
  font-size: 14px;
511
- color: #0366d6;
512
- border: 1px solid rgba(27,31,35,0.15);
513
- background-color: #fafbfc;
514
- box-shadow: 0 1px 0 rgba(27,31,35,0.04);
511
+ color: #0969da;
512
+ border: 1px solid rgba(27,31,36,0.15);
513
+ background-color: #f6f8fa;
514
+ box-shadow: 0 1px 0 rgba(27,31,36,0.04);
515
515
  }
516
516
 
517
517
  .c0:hover {
@@ -533,27 +533,27 @@ exports[`ButtonOutline renders consistently 1`] = `
533
533
 
534
534
  .c0:hover {
535
535
  color: #ffffff;
536
- background-color: #0366d6;
537
- border-color: rgba(27,31,35,0.15);
538
- box-shadow: 0 1px 0 rgba(27,31,35,0.1);
536
+ background-color: #0969da;
537
+ border-color: rgba(27,31,36,0.15);
538
+ box-shadow: 0 1px 0 rgba(27,31,36,0.1);
539
539
  }
540
540
 
541
541
  .c0:focus {
542
- border-color: rgba(27,31,35,0.15);
543
- box-shadow: 0 0 0 3px rgba(0,92,197,0.4);
542
+ border-color: rgba(27,31,36,0.15);
543
+ box-shadow: 0 0 0 3px rgba(5,80,174,0.4);
544
544
  }
545
545
 
546
546
  .c0:active {
547
547
  color: #ffffff;
548
- background-color: hsla(212,97%,40%,1);
549
- box-shadow: inset 0 1px 0 rgba(5,38,76,0.2);
550
- border-color: rgba(27,31,35,0.15);
548
+ background-color: hsla(212,92%,42%,1);
549
+ box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
550
+ border-color: rgba(27,31,36,0.15);
551
551
  }
552
552
 
553
553
  .c0:disabled {
554
- color: rgba(3,102,214,0.5);
555
- background-color: #fafbfc;
556
- border-color: rgba(27,31,35,0.15);
554
+ color: rgba(9,105,218,0.5);
555
+ background-color: #f6f8fa;
556
+ border-color: rgba(27,31,36,0.15);
557
557
  }
558
558
 
559
559
  <button
@@ -584,10 +584,10 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
584
584
  text-decoration: none;
585
585
  text-align: center;
586
586
  font-size: 14px;
587
- color: #0366d6;
588
- border: 1px solid rgba(27,31,35,0.15);
589
- background-color: #fafbfc;
590
- box-shadow: 0 1px 0 rgba(27,31,35,0.04);
587
+ color: #0969da;
588
+ border: 1px solid rgba(27,31,36,0.15);
589
+ background-color: #f6f8fa;
590
+ box-shadow: 0 1px 0 rgba(27,31,36,0.04);
591
591
  }
592
592
 
593
593
  .c0:hover {
@@ -609,27 +609,27 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
609
609
 
610
610
  .c0:hover {
611
611
  color: #ffffff;
612
- background-color: #0366d6;
613
- border-color: rgba(27,31,35,0.15);
614
- box-shadow: 0 1px 0 rgba(27,31,35,0.1);
612
+ background-color: #0969da;
613
+ border-color: rgba(27,31,36,0.15);
614
+ box-shadow: 0 1px 0 rgba(27,31,36,0.1);
615
615
  }
616
616
 
617
617
  .c0:focus {
618
- border-color: rgba(27,31,35,0.15);
619
- box-shadow: 0 0 0 3px rgba(0,92,197,0.4);
618
+ border-color: rgba(27,31,36,0.15);
619
+ box-shadow: 0 0 0 3px rgba(5,80,174,0.4);
620
620
  }
621
621
 
622
622
  .c0:active {
623
623
  color: #ffffff;
624
- background-color: hsla(212,97%,40%,1);
625
- box-shadow: inset 0 1px 0 rgba(5,38,76,0.2);
626
- border-color: rgba(27,31,35,0.15);
624
+ background-color: hsla(212,92%,42%,1);
625
+ box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
626
+ border-color: rgba(27,31,36,0.15);
627
627
  }
628
628
 
629
629
  .c0:disabled {
630
- color: rgba(3,102,214,0.5);
631
- background-color: #fafbfc;
632
- border-color: rgba(27,31,35,0.15);
630
+ color: rgba(9,105,218,0.5);
631
+ background-color: #f6f8fa;
632
+ border-color: rgba(27,31,36,0.15);
633
633
  }
634
634
 
635
635
  <button
@@ -662,9 +662,9 @@ exports[`ButtonPrimary renders consistently 1`] = `
662
662
  text-align: center;
663
663
  font-size: 14px;
664
664
  color: #ffffff;
665
- border: 1px solid rgba(27,31,35,0.15);
666
- background-color: #2ea44f;
667
- box-shadow: 0 1px 0 rgba(27,31,35,0.1);
665
+ border: 1px solid rgba(27,31,36,0.15);
666
+ background-color: #2da44e;
667
+ box-shadow: 0 1px 0 rgba(27,31,36,0.1);
668
668
  }
669
669
 
670
670
  .c0:hover {
@@ -686,23 +686,23 @@ exports[`ButtonPrimary renders consistently 1`] = `
686
686
 
687
687
  .c0:hover {
688
688
  background-color: #2c974b;
689
- border-color: rgba(27,31,35,0.15);
689
+ border-color: rgba(27,31,36,0.15);
690
690
  }
691
691
 
692
692
  .c0:focus {
693
- border-color: rgba(27,31,35,0.15);
694
- box-shadow: 0 0 0 3px rgba(46,164,79,0.4);
693
+ border-color: rgba(27,31,36,0.15);
694
+ box-shadow: 0 0 0 3px rgba(45,164,78,0.4);
695
695
  }
696
696
 
697
697
  .c0:active {
698
698
  background-color: hsla(137,55%,36%,1);
699
- box-shadow: inset 0 1px 0 rgba(20,70,32,0.2);
699
+ box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
700
700
  }
701
701
 
702
702
  .c0:disabled {
703
703
  color: rgba(255,255,255,0.8);
704
704
  background-color: #94d3a2;
705
- border-color: rgba(27,31,35,0.1);
705
+ border-color: rgba(27,31,36,0.15);
706
706
  }
707
707
 
708
708
  <button
@@ -734,9 +734,9 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
734
734
  text-align: center;
735
735
  font-size: 14px;
736
736
  color: #ffffff;
737
- border: 1px solid rgba(27,31,35,0.15);
738
- background-color: #2ea44f;
739
- box-shadow: 0 1px 0 rgba(27,31,35,0.1);
737
+ border: 1px solid rgba(27,31,36,0.15);
738
+ background-color: #2da44e;
739
+ box-shadow: 0 1px 0 rgba(27,31,36,0.1);
740
740
  }
741
741
 
742
742
  .c0:hover {
@@ -758,23 +758,23 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
758
758
 
759
759
  .c0:hover {
760
760
  background-color: #2c974b;
761
- border-color: rgba(27,31,35,0.15);
761
+ border-color: rgba(27,31,36,0.15);
762
762
  }
763
763
 
764
764
  .c0:focus {
765
- border-color: rgba(27,31,35,0.15);
766
- box-shadow: 0 0 0 3px rgba(46,164,79,0.4);
765
+ border-color: rgba(27,31,36,0.15);
766
+ box-shadow: 0 0 0 3px rgba(45,164,78,0.4);
767
767
  }
768
768
 
769
769
  .c0:active {
770
770
  background-color: hsla(137,55%,36%,1);
771
- box-shadow: inset 0 1px 0 rgba(20,70,32,0.2);
771
+ box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
772
772
  }
773
773
 
774
774
  .c0:disabled {
775
775
  color: rgba(255,255,255,0.8);
776
776
  background-color: #94d3a2;
777
- border-color: rgba(27,31,35,0.1);
777
+ border-color: rgba(27,31,36,0.15);
778
778
  }
779
779
 
780
780
  <button
@@ -788,7 +788,7 @@ exports[`ButtonTableList renders consistently 1`] = `
788
788
  display: inline-block;
789
789
  padding: 0;
790
790
  font-size: 14px;
791
- color: #586069;
791
+ color: #57606a;
792
792
  -webkit-text-decoration: none;
793
793
  text-decoration: none;
794
794
  white-space: nowrap;
@@ -811,7 +811,7 @@ exports[`ButtonTableList renders consistently 1`] = `
811
811
 
812
812
  .c0:disabled,
813
813
  .c0:disabled:hover {
814
- color: rgba(#586069,0.5);
814
+ color: rgba(#57606a,0.5);
815
815
  cursor: default;
816
816
  }
817
817
 
package/src/__tests__/__snapshots__/Caret.tsx.snap CHANGED
@@ -24,7 +24,7 @@ exports[`Caret renders cardinal directions 1`] = `
24
24
  <path
25
25
  d="M-8,0L0,8L8,0"
26
26
  fill="none"
27
- stroke="#e1e4e8"
27
+ stroke="#d0d7de"
28
28
  strokeWidth="1px"
29
29
  />
30
30
  </g>
@@ -55,7 +55,7 @@ exports[`Caret renders cardinal directions 2`] = `
55
55
  <path
56
56
  d="M-8,0L0,8L8,0"
57
57
  fill="none"
58
- stroke="#e1e4e8"
58
+ stroke="#d0d7de"
59
59
  strokeWidth="1px"
60
60
  />
61
61
  </g>
@@ -86,7 +86,7 @@ exports[`Caret renders cardinal directions 3`] = `
86
86
  <path
87
87
  d="M-8,0L0,8L8,0"
88
88
  fill="none"
89
- stroke="#e1e4e8"
89
+ stroke="#d0d7de"
90
90
  strokeWidth="1px"
91
91
  />
92
92
  </g>
@@ -117,7 +117,7 @@ exports[`Caret renders cardinal directions 4`] = `
117
117
  <path
118
118
  d="M-8,0L0,8L8,0"
119
119
  fill="none"
120
- stroke="#e1e4e8"
120
+ stroke="#d0d7de"
121
121
  strokeWidth="1px"
122
122
  />
123
123
  </g>
@@ -148,7 +148,7 @@ exports[`Caret renders cardinal directions 5`] = `
148
148
  <path
149
149
  d="M-8,0L0,8L8,0"
150
150
  fill="none"
151
- stroke="#e1e4e8"
151
+ stroke="#d0d7de"
152
152
  strokeWidth="1px"
153
153
  />
154
154
  </g>
@@ -179,7 +179,7 @@ exports[`Caret renders cardinal directions 6`] = `
179
179
  <path
180
180
  d="M-8,0L0,8L8,0"
181
181
  fill="none"
182
- stroke="#e1e4e8"
182
+ stroke="#d0d7de"
183
183
  strokeWidth="1px"
184
184
  />
185
185
  </g>
@@ -210,7 +210,7 @@ exports[`Caret renders cardinal directions 7`] = `
210
210
  <path
211
211
  d="M-8,0L0,8L8,0"
212
212
  fill="none"
213
- stroke="#e1e4e8"
213
+ stroke="#d0d7de"
214
214
  strokeWidth="1px"
215
215
  />
216
216
  </g>
@@ -241,7 +241,7 @@ exports[`Caret renders cardinal directions 8`] = `
241
241
  <path
242
242
  d="M-8,0L0,8L8,0"
243
243
  fill="none"
244
- stroke="#e1e4e8"
244
+ stroke="#d0d7de"
245
245
  strokeWidth="1px"
246
246
  />
247
247
  </g>
@@ -272,7 +272,7 @@ exports[`Caret renders cardinal directions 9`] = `
272
272
  <path
273
273
  d="M-8,0L0,8L8,0"
274
274
  fill="none"
275
- stroke="#e1e4e8"
275
+ stroke="#d0d7de"
276
276
  strokeWidth="1px"
277
277
  />
278
278
  </g>
@@ -303,7 +303,7 @@ exports[`Caret renders cardinal directions 10`] = `
303
303
  <path
304
304
  d="M-8,0L0,8L8,0"
305
305
  fill="none"
306
- stroke="#e1e4e8"
306
+ stroke="#d0d7de"
307
307
  strokeWidth="1px"
308
308
  />
309
309
  </g>
@@ -334,7 +334,7 @@ exports[`Caret renders cardinal directions 11`] = `
334
334
  <path
335
335
  d="M-8,0L0,8L8,0"
336
336
  fill="none"
337
- stroke="#e1e4e8"
337
+ stroke="#d0d7de"
338
338
  strokeWidth="1px"
339
339
  />
340
340
  </g>
@@ -365,7 +365,7 @@ exports[`Caret renders cardinal directions 12`] = `
365
365
  <path
366
366
  d="M-8,0L0,8L8,0"
367
367
  fill="none"
368
- stroke="#e1e4e8"
368
+ stroke="#d0d7de"
369
369
  strokeWidth="1px"
370
370
  />
371
371
  </g>
package/src/__tests__/__snapshots__/CircleBadge.tsx.snap CHANGED
@@ -46,7 +46,7 @@ exports[`CircleBadge renders consistently 1`] = `
46
46
  justify-content: center;
47
47
  background-color: #ffffff;
48
48
  border-radius: 50%;
49
- box-shadow: 0 3px 6px rgba(149,157,165,0.15);
49
+ box-shadow: 0 3px 6px rgba(140,149,159,0.15);
50
50
  width: 96px;
51
51
  height: 96px;
52
52
  }
@@ -77,7 +77,7 @@ exports[`CircleBadge respects the inline prop 1`] = `
77
77
  justify-content: center;
78
78
  background-color: #ffffff;
79
79
  border-radius: 50%;
80
- box-shadow: 0 3px 6px rgba(149,157,165,0.15);
80
+ box-shadow: 0 3px 6px rgba(140,149,159,0.15);
81
81
  width: 96px;
82
82
  height: 96px;
83
83
  }
@@ -103,7 +103,7 @@ exports[`CircleBadge respects the variant prop 1`] = `
103
103
  justify-content: center;
104
104
  background-color: #ffffff;
105
105
  border-radius: 50%;
106
- box-shadow: 0 3px 6px rgba(149,157,165,0.15);
106
+ box-shadow: 0 3px 6px rgba(140,149,159,0.15);
107
107
  width: 128px;
108
108
  height: 128px;
109
109
  }
@@ -129,7 +129,7 @@ exports[`CircleBadge uses the size prop to override the variant prop 1`] = `
129
129
  justify-content: center;
130
130
  background-color: #ffffff;
131
131
  border-radius: 50%;
132
- box-shadow: 0 3px 6px rgba(149,157,165,0.15);
132
+ box-shadow: 0 3px 6px rgba(140,149,159,0.15);
133
133
  width: 20px;
134
134
  height: 20px;
135
135
  }
package/src/__tests__/__snapshots__/CircleOcticon.tsx.snap CHANGED
@@ -8,7 +8,7 @@ exports[`CircleOcticon renders consistently 1`] = `
8
8
  border-width: 0;
9
9
  border-radius: 50%;
10
10
  border-style: solid;
11
- border-color: #e1e4e8;
11
+ border-color: #d0d7de;
12
12
  }
13
13
 
14
14
  .c1 {
package/src/__tests__/__snapshots__/CounterLabel.tsx.snap CHANGED
@@ -8,8 +8,8 @@ exports[`CounterLabel renders consistently 1`] = `
8
8
  font-weight: 600;
9
9
  line-height: 1;
10
10
  border-radius: 20px;
11
- color: #24292e;
12
- background-color: rgba(209,213,218,0.5);
11
+ color: #24292f;
12
+ background-color: rgba(175,184,193,0.2);
13
13
  }
14
14
 
15
15
  .c0:empty {