@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__/SelectMenu.tsx.snap CHANGED
@@ -23,10 +23,10 @@ exports[`SelectMenu right-aligned modal has right: 0px 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
  .c1:hover {
@@ -48,23 +48,23 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
48
48
 
49
49
  .c1: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
  .c1: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
  .c1: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
  .c1: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
  .c6 {
@@ -72,18 +72,18 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
72
72
  margin: 0;
73
73
  font-size: 12px;
74
74
  font-weight: 600;
75
- color: #6a737d;
75
+ color: #57606a;
76
76
  background-color: #f6f8fa;
77
- border-bottom: 1px solid hsla(214,13%,93%,1);
77
+ border-bottom: 1px solid hsla(210,18%,87%,1);
78
78
  }
79
79
 
80
80
  .c7 {
81
81
  margin-top: -1px;
82
82
  padding: 8px 16px;
83
83
  font-size: 12px;
84
- color: #6a737d;
84
+ color: #57606a;
85
85
  text-align: center;
86
- border-top: 1px solid hsla(214,13%,93%,1);
86
+ border-top: 1px solid hsla(210,18%,87%,1);
87
87
  }
88
88
 
89
89
  .c5 {
@@ -101,8 +101,8 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
101
101
  cursor: pointer;
102
102
  background-color: #ffffff;
103
103
  border: 0;
104
- border-bottom: 1px solid hsla(214,13%,93%,1);
105
- color: #586069;
104
+ border-bottom: 1px solid hsla(210,18%,87%,1);
105
+ color: #57606a;
106
106
  -webkit-text-decoration: none;
107
107
  text-decoration: none;
108
108
  font-size: 12px;
@@ -143,7 +143,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
143
143
 
144
144
  .c5[aria-checked='true'] {
145
145
  font-weight: 500;
146
- color: #24292e;
146
+ color: #24292f;
147
147
  }
148
148
 
149
149
  .c5[aria-checked='true'] .SelectMenu-selected-icon {
@@ -185,7 +185,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
185
185
  flex-direction: column;
186
186
  background-color: #ffffff;
187
187
  border-radius: 6px;
188
- box-shadow: 0 1px 0 rgba(27,31,35,0.04);
188
+ box-shadow: 0 1px 0 rgba(27,31,36,0.04);
189
189
  -webkit-animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
190
190
  animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
191
191
  width: 300px;
@@ -217,7 +217,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
217
217
  left: 0;
218
218
  pointer-events: none;
219
219
  content: '';
220
- background-color: rgba(27,31,35,0.5);
220
+ background-color: rgba(27,31,36,0.5);
221
221
  }
222
222
 
223
223
  .c0 > summary {
@@ -249,33 +249,33 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
249
249
  .c5:hover,
250
250
  .c5:active,
251
251
  .c5:focus {
252
- background-color: #f6f8fa;
252
+ background-color: rgba(234,238,242,0.5);
253
253
  }
254
254
  }
255
255
 
256
256
  @media (hover:none) {
257
257
  .c5 {
258
- -webkit-tap-highlight-color: rgba(209,213,218,0.5);
258
+ -webkit-tap-highlight-color: rgba(175,184,193,0.5);
259
259
  }
260
260
 
261
261
  .c5:focus,
262
262
  .c5:active {
263
- background-color: #fafbfc;
263
+ background-color: #f6f8fa;
264
264
  }
265
265
  }
266
266
 
267
267
  @media (hover:hover) {
268
268
  .c4 .SelectMenuTab:focus {
269
- background-color: #dbedff;
269
+ background-color: #b6e3ff;
270
270
  }
271
271
 
272
272
  .c4 .SelectMenuTab:not([aria-checked='true']):hover {
273
- color: #24292e;
273
+ color: #24292f;
274
274
  background-color: #f6f8fa;
275
275
  }
276
276
 
277
277
  .c4 .SelectMenuTab:not([aria-checked='true']):active {
278
- color: #24292e;
278
+ color: #24292f;
279
279
  background-color: #f6f8fa;
280
280
  }
281
281
  }
@@ -286,9 +286,9 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
286
286
  max-height: 350px;
287
287
  margin: 4px 0 16px 0;
288
288
  font-size: 12px;
289
- border: 1px solid #e1e4e8;
289
+ border: 1px solid #d0d7de;
290
290
  border-radius: 6px;
291
- box-shadow: 0 1px 0 rgba(27,31,35,0.04);
291
+ box-shadow: 0 1px 0 rgba(27,31,36,0.04);
292
292
  }
293
293
  }
294
294
 
package/src/__tests__/__snapshots__/SelectPanel.tsx.snap CHANGED
@@ -4,7 +4,7 @@ exports[`SelectPanel renders consistently 1`] = `
4
4
  .c0 {
5
5
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
6
6
  line-height: 1.5;
7
- color: #24292e;
7
+ color: #24292f;
8
8
  }
9
9
 
10
10
  .c1 {
@@ -29,10 +29,10 @@ exports[`SelectPanel renders consistently 1`] = `
29
29
  text-decoration: none;
30
30
  text-align: center;
31
31
  font-size: 14px;
32
- color: #24292e;
33
- background-color: #fafbfc;
34
- border: 1px solid rgba(27,31,35,0.15);
35
- box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
32
+ color: #24292f;
33
+ background-color: #f6f8fa;
34
+ border: 1px solid rgba(27,31,36,0.15);
35
+ box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
36
36
  }
37
37
 
38
38
  .c1:hover {
@@ -54,23 +54,23 @@ exports[`SelectPanel renders consistently 1`] = `
54
54
 
55
55
  .c1:hover {
56
56
  background-color: #f3f4f6;
57
- border-color: rgba(27,31,35,0.15);
57
+ border-color: rgba(27,31,36,0.15);
58
58
  }
59
59
 
60
60
  .c1:focus {
61
- border-color: rgba(27,31,35,0.15);
62
- box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
61
+ border-color: rgba(27,31,36,0.15);
62
+ box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
63
63
  }
64
64
 
65
65
  .c1:active {
66
66
  background-color: hsla(220,14%,94%,1);
67
- box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
67
+ box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
68
68
  }
69
69
 
70
70
  .c1:disabled {
71
- color: #959da5;
72
- background-color: #fafbfc;
73
- border-color: rgba(27,31,35,0.15);
71
+ color: #57606a;
72
+ background-color: #f6f8fa;
73
+ border-color: rgba(27,31,36,0.15);
74
74
  }
75
75
 
76
76
  .c2 {
package/src/__tests__/__snapshots__/SideNav.tsx.snap CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  exports[`SideNav SideNav.Link renders consistently 1`] = `
4
4
  .c0 {
5
- color: #0366d6;
5
+ color: #0969da;
6
6
  -webkit-text-decoration: none;
7
7
  text-decoration: none;
8
8
  position: relative;
@@ -39,10 +39,10 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
39
39
  }
40
40
 
41
41
  .c1.variant-normal > .c0 {
42
- color: #24292e;
42
+ color: #24292f;
43
43
  padding: 16px;
44
44
  border: 0;
45
- border-top: 1px solid hsla(214,13%,93%,1);
45
+ border-top: 1px solid hsla(210,18%,87%,1);
46
46
  }
47
47
 
48
48
  .c1.variant-normal > .c0:first-child {
@@ -68,18 +68,18 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
68
68
  }
69
69
 
70
70
  .c1.variant-normal > .c0:hover {
71
- background-color: #f6f8fa;
71
+ background-color: rgba(234,238,242,0.5);
72
72
  outline: none;
73
73
  -webkit-text-decoration: none;
74
74
  text-decoration: none;
75
75
  }
76
76
 
77
77
  .c1.variant-normal > .c0:focus {
78
- background-color: #f6f8fa;
78
+ background-color: rgba(234,238,242,0.5);
79
79
  outline: none;
80
80
  -webkit-text-decoration: none;
81
81
  text-decoration: none;
82
- box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
82
+ box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
83
83
  z-index: 1;
84
84
  }
85
85
 
@@ -90,33 +90,33 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
90
90
 
91
91
  .c1.variant-normal > .c0[aria-current='page']::before,
92
92
  .c1.variant-normal > .c0[aria-selected='true']::before {
93
- background-color: #f9826c;
93
+ background-color: #FD8C73;
94
94
  }
95
95
 
96
96
  .c1.variant-lightweight > .c0 {
97
97
  padding: 4px 0;
98
- color: #0366d6;
98
+ color: #0969da;
99
99
  }
100
100
 
101
101
  .c1.variant-lightweight > .c0:hover {
102
- color: #24292e;
102
+ color: #24292f;
103
103
  -webkit-text-decoration: none;
104
104
  text-decoration: none;
105
105
  outline: none;
106
106
  }
107
107
 
108
108
  .c1.variant-lightweight > .c0:focus {
109
- color: #24292e;
109
+ color: #24292f;
110
110
  -webkit-text-decoration: none;
111
111
  text-decoration: none;
112
112
  outline: none;
113
- box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
113
+ box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
114
114
  z-index: 1;
115
115
  }
116
116
 
117
117
  .c1.variant-lightweight > .c0[aria-current='page'],
118
118
  .c1.variant-lightweight > .c0[aria-selected='true'] {
119
- color: #24292e;
119
+ color: #24292f;
120
120
  font-weight: 500;
121
121
  }
122
122
 
@@ -129,12 +129,12 @@ exports[`SideNav renders consistently 1`] = `
129
129
  .c0 {
130
130
  border-width: 0;
131
131
  border-style: solid;
132
- border-color: #e1e4e8;
132
+ border-color: #d0d7de;
133
133
  border-radius: 6px;
134
134
  }
135
135
 
136
136
  .c1 {
137
- background-color: #fafbfc;
137
+ background-color: #f6f8fa;
138
138
  }
139
139
 
140
140
  <nav
package/src/__tests__/__snapshots__/StateLabel.tsx.snap CHANGED
@@ -21,7 +21,7 @@ exports[`StateLabel renders children 1`] = `
21
21
  border-radius: 100px;
22
22
  border-width: 1px;
23
23
  border-style: solid;
24
- background-color: #28a745;
24
+ background-color: #2da44e;
25
25
  color: #ffffff;
26
26
  border-color: rgba(0,0,0,0);
27
27
  padding-left: 12px;
@@ -80,7 +80,7 @@ exports[`StateLabel renders consistently 1`] = `
80
80
  border-radius: 100px;
81
81
  border-width: 1px;
82
82
  border-style: solid;
83
- background-color: #28a745;
83
+ background-color: #2da44e;
84
84
  color: #ffffff;
85
85
  border-color: rgba(0,0,0,0);
86
86
  padding-left: 12px;
@@ -139,7 +139,7 @@ exports[`StateLabel respects the status prop 1`] = `
139
139
  border-radius: 100px;
140
140
  border-width: 1px;
141
141
  border-style: solid;
142
- background-color: #28a745;
142
+ background-color: #2da44e;
143
143
  color: #ffffff;
144
144
  border-color: rgba(0,0,0,0);
145
145
  padding-left: 12px;
@@ -197,7 +197,7 @@ exports[`StateLabel respects the status prop 2`] = `
197
197
  border-radius: 100px;
198
198
  border-width: 1px;
199
199
  border-style: solid;
200
- background-color: #d73a49;
200
+ background-color: #cf222e;
201
201
  color: #ffffff;
202
202
  border-color: rgba(0,0,0,0);
203
203
  padding-left: 12px;
@@ -255,7 +255,7 @@ exports[`StateLabel respects the status prop 3`] = `
255
255
  border-radius: 100px;
256
256
  border-width: 1px;
257
257
  border-style: solid;
258
- background-color: #6f42c1;
258
+ background-color: #8250df;
259
259
  color: #ffffff;
260
260
  border-color: rgba(0,0,0,0);
261
261
  padding-left: 12px;
@@ -313,7 +313,7 @@ exports[`StateLabel respects the variant prop 1`] = `
313
313
  border-radius: 100px;
314
314
  border-width: 1px;
315
315
  border-style: solid;
316
- background-color: #28a745;
316
+ background-color: #2da44e;
317
317
  color: #ffffff;
318
318
  border-color: rgba(0,0,0,0);
319
319
  padding-left: 8px;
@@ -371,7 +371,7 @@ exports[`StateLabel respects the variant prop 2`] = `
371
371
  border-radius: 100px;
372
372
  border-width: 1px;
373
373
  border-style: solid;
374
- background-color: #28a745;
374
+ background-color: #2da44e;
375
375
  color: #ffffff;
376
376
  border-color: rgba(0,0,0,0);
377
377
  padding-left: 12px;
package/src/__tests__/__snapshots__/SubNavLink.tsx.snap CHANGED
@@ -8,13 +8,13 @@ exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" p
8
8
  font-size: 14px;
9
9
  line-height: 20px;
10
10
  min-height: 34px;
11
- color: #24292e;
11
+ color: #24292f;
12
12
  text-align: center;
13
13
  -webkit-text-decoration: none;
14
14
  text-decoration: none;
15
- border-top: 1px solid #e1e4e8;
16
- border-bottom: 1px solid #e1e4e8;
17
- border-right: 1px solid #e1e4e8;
15
+ border-top: 1px solid #d0d7de;
16
+ border-bottom: 1px solid #d0d7de;
17
+ border-right: 1px solid #d0d7de;
18
18
  display: -webkit-box;
19
19
  display: -webkit-flex;
20
20
  display: -ms-flexbox;
@@ -28,7 +28,7 @@ exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" p
28
28
  .c0:first-of-type {
29
29
  border-top-left-radius: 6px;
30
30
  border-bottom-left-radius: 6px;
31
- border-left: 1px solid #e1e4e8;
31
+ border-left: 1px solid #d0d7de;
32
32
  }
33
33
 
34
34
  .c0:last-of-type {
@@ -47,13 +47,13 @@ exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" p
47
47
 
48
48
  .c0:hover .SubNav-octicon,
49
49
  .c0:focus .SubNav-octicon {
50
- color: #586069;
50
+ color: #57606a;
51
51
  }
52
52
 
53
53
  .c0.selected {
54
54
  color: #ffffff;
55
- background-color: #0366d6;
56
- border-color: #0366d6;
55
+ background-color: #0969da;
56
+ border-color: #0969da;
57
57
  }
58
58
 
59
59
  .c0.selected .SubNav-octicon {
@@ -75,13 +75,13 @@ exports[`SubNav.Link renders consistently 1`] = `
75
75
  font-size: 14px;
76
76
  line-height: 20px;
77
77
  min-height: 34px;
78
- color: #24292e;
78
+ color: #24292f;
79
79
  text-align: center;
80
80
  -webkit-text-decoration: none;
81
81
  text-decoration: none;
82
- border-top: 1px solid #e1e4e8;
83
- border-bottom: 1px solid #e1e4e8;
84
- border-right: 1px solid #e1e4e8;
82
+ border-top: 1px solid #d0d7de;
83
+ border-bottom: 1px solid #d0d7de;
84
+ border-right: 1px solid #d0d7de;
85
85
  display: -webkit-box;
86
86
  display: -webkit-flex;
87
87
  display: -ms-flexbox;
@@ -95,7 +95,7 @@ exports[`SubNav.Link renders consistently 1`] = `
95
95
  .c0:first-of-type {
96
96
  border-top-left-radius: 6px;
97
97
  border-bottom-left-radius: 6px;
98
- border-left: 1px solid #e1e4e8;
98
+ border-left: 1px solid #d0d7de;
99
99
  }
100
100
 
101
101
  .c0:last-of-type {
@@ -114,13 +114,13 @@ exports[`SubNav.Link renders consistently 1`] = `
114
114
 
115
115
  .c0:hover .SubNav-octicon,
116
116
  .c0:focus .SubNav-octicon {
117
- color: #586069;
117
+ color: #57606a;
118
118
  }
119
119
 
120
120
  .c0.selected {
121
121
  color: #ffffff;
122
- background-color: #0366d6;
123
- border-color: #0366d6;
122
+ background-color: #0969da;
123
+ border-color: #0969da;
124
124
  }
125
125
 
126
126
  .c0.selected .SubNav-octicon {
@@ -140,13 +140,13 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
140
140
  font-size: 14px;
141
141
  line-height: 20px;
142
142
  min-height: 34px;
143
- color: #24292e;
143
+ color: #24292f;
144
144
  text-align: center;
145
145
  -webkit-text-decoration: none;
146
146
  text-decoration: none;
147
- border-top: 1px solid #e1e4e8;
148
- border-bottom: 1px solid #e1e4e8;
149
- border-right: 1px solid #e1e4e8;
147
+ border-top: 1px solid #d0d7de;
148
+ border-bottom: 1px solid #d0d7de;
149
+ border-right: 1px solid #d0d7de;
150
150
  display: -webkit-box;
151
151
  display: -webkit-flex;
152
152
  display: -ms-flexbox;
@@ -160,7 +160,7 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
160
160
  .c0:first-of-type {
161
161
  border-top-left-radius: 6px;
162
162
  border-bottom-left-radius: 6px;
163
- border-left: 1px solid #e1e4e8;
163
+ border-left: 1px solid #d0d7de;
164
164
  }
165
165
 
166
166
  .c0:last-of-type {
@@ -179,13 +179,13 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
179
179
 
180
180
  .c0:hover .SubNav-octicon,
181
181
  .c0:focus .SubNav-octicon {
182
- color: #586069;
182
+ color: #57606a;
183
183
  }
184
184
 
185
185
  .c0.selected {
186
186
  color: #ffffff;
187
- background-color: #0366d6;
188
- border-color: #0366d6;
187
+ background-color: #0969da;
188
+ border-color: #0969da;
189
189
  }
190
190
 
191
191
  .c0.selected .SubNav-octicon {
package/src/__tests__/__snapshots__/TabNav.tsx.snap CHANGED
@@ -5,7 +5,7 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
5
5
  padding: 8px 12px;
6
6
  font-size: 14px;
7
7
  line-height: 20px;
8
- color: #24292e;
8
+ color: #24292f;
9
9
  -webkit-text-decoration: none;
10
10
  text-decoration: none;
11
11
  background-color: transparent;
@@ -15,14 +15,14 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
15
15
 
16
16
  .c0:hover,
17
17
  .c0:focus {
18
- color: #24292e;
18
+ color: #24292f;
19
19
  -webkit-text-decoration: none;
20
20
  text-decoration: none;
21
21
  }
22
22
 
23
23
  .c0.selected {
24
- color: #24292e;
25
- border-color: #e1e4e8;
24
+ color: #24292f;
25
+ border-color: #d0d7de;
26
26
  border-top-right-radius: 6px;
27
27
  border-top-left-radius: 6px;
28
28
  background-color: #ffffff;
@@ -36,7 +36,7 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
36
36
  exports[`TabNav renders consistently 1`] = `
37
37
  .c0 {
38
38
  margin-top: 0;
39
- border-bottom: 1px solid #e1e4e8;
39
+ border-bottom: 1px solid #d0d7de;
40
40
  }
41
41
 
42
42
  .c1 {