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

Sign up to get free protection for your applications and to get access to all the features.
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 {