@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__/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 {