primer · emplums · Apr 23, 2020 · Apr 9, 2020 · Apr 9, 2020 · Apr 9, 2020
diff --git a/package.json b/package.json
@@ -37,21 +37,20 @@
   "license": "MIT",
   "dependencies": {
     "@primer/octicons-react": "^9.2.0",
+    "@primer/primitives": "2.0.1",
     "@reach/dialog": "0.3.0",
     "@styled-system/prop-types": "5.1.2",
     "@styled-system/props": "5.1.4",
     "@styled-system/theme-get": "5.1.2",
-    "@types/styled-components": "^4.4.0",
     "@testing-library/react": "9.4.0",
+    "@types/styled-components": "^4.4.0",
     "@types/styled-system": "5.1.2",
     "babel-plugin-macros": "2.6.1",
     "babel-polyfill": "6.26.0",
     "classnames": "^2.2.5",
     "details-element-polyfill": "2.4.0",
     "jest-axe": "3.2.0",
     "nanoid": "2.1.4",
-    "primer-colors": "1.0.1",
-    "primer-typography": "1.0.1",
     "react": "^16.10.2",
     "react-is": "16.10.2",
     "styled-system": "5.1.2"

diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js
@@ -27,4 +27,8 @@ export default css`
   &:disabled {
     cursor: default;
   }
+
+  &:disabled svg {
+    opacity: 0.6;
+  }
 `
diff --git a/src/Label.js b/src/Label.js
@@ -43,7 +43,7 @@ const sizeVariant = variant({
 
 const Label = styled('span')`
   display: inline-block;
-  font-weight: 600;
+  font-weight: ${get('fontWeights.normal')};
   color: ${get('colors.white')};
   border-radius: ${get('radii.3')};
   &:hover {

diff --git a/src/SelectMenu/SelectMenuHeader.js b/src/SelectMenu/SelectMenuHeader.js
@@ -21,6 +21,7 @@ const StyledHeader = styled.header`
   display: flex;
   flex: none; // fixes header from getting squeezed in Safari iOS
   padding: ${get('space.3')};
+  border-bottom: ${get('borders.1')} ${get('colors.border.gray')};
   ${COMMON}
   ${TYPOGRAPHY}
 

diff --git a/src/SelectMenu/SelectMenuList.js b/src/SelectMenu/SelectMenuList.js
@@ -10,7 +10,6 @@ const listStyles = css`
   overflow-x: hidden;
   overflow-y: auto;
   background-color: ${get('colors.white')};
-  border-top: ${get('borders.1')} ${get('colors.border.gray')};
   -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
 
   @media (hover: hover) {

diff --git a/src/SelectMenu/SelectMenuTab.js b/src/SelectMenu/SelectMenuTab.js
@@ -13,7 +13,7 @@ const tabStyles = css`
   font-weight: 500;
   color: ${get('colors.gray.5')};
   text-align: center;
-  background-color: transparent;
+  background-color: ${get('colors.gray.1')};
   border: 0;
   box-shadow: inset 0 -1px 0 ${get('colors.border.gray')};
 
@@ -24,6 +24,7 @@ const tabStyles = css`
     border-bottom-width: 0;
     border-top-left-radius: ${get('radii.2')};
     border-top-right-radius: ${get('radii.2')};
+    background-color: ${get('colors.white')};
   }
 
   &[aria-selected='true'] {

diff --git a/src/SelectMenu/SelectMenuTabPanel.js b/src/SelectMenu/SelectMenuTabPanel.js
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import {MenuContext} from './SelectMenuContext'
 import SelectMenuList from './SelectMenuList'
 import theme from '../theme'
-import {COMMON} from '../constants'
+import {COMMON, get} from '../constants'
 
 const TabPanelBase = ({tabName, className, children, ...rest}) => {
   const menuContext = useContext(MenuContext)
@@ -16,6 +16,7 @@ const TabPanelBase = ({tabName, className, children, ...rest}) => {
 }
 
 const TabPanel = styled(TabPanelBase)`
+  border-top: ${get('borders.1')} ${get('colors.border.gray')};
   ${COMMON}
 `
 

diff --git a/src/SelectMenu/SelectMenuTabs.js b/src/SelectMenu/SelectMenuTabs.js
@@ -7,8 +7,9 @@ const tabWrapperStyles = css`
   display: flex;
   flex-shrink: 0;
   margin-bottom: -1px; // hide border of element below
-  border-top: ${get('borders.1')} ${get('colors.border.gray')};
   -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  overflow-y: hidden;
 
   // Hide scrollbar so it doesn't cover the text
   &::-webkit-scrollbar {
@@ -17,7 +18,7 @@ const tabWrapperStyles = css`
 
   @media (min-width: ${get('breakpoints.0')}) {
     padding: 0 ${get('space.2')};
-    border-top: 0;
+    margin-top: ${get('space.3')};
   }
 `
 

diff --git a/src/SideNav.js b/src/SideNav.js
@@ -24,7 +24,7 @@ function SideNavBase({variant, className, bordered, children, ...props}) {
 }
 
 const SideNav = styled(SideNavBase)`
-  background-color: ${get('colors.gray.0')};
+  background-color: ${get('colors.white')};
 
   ${props =>
     props.bordered &&
@@ -67,6 +67,16 @@ SideNav.Link = styled(Link).attrs(props => {
     border-bottom: none;
   }
 
+  &:first-child {
+    border-top-right-radius: ${get('radii.2')};
+    border-top-left-radius: ${get('radii.2')};
+  }
+
+  &:last-child {
+    border-bottom-right-radius: ${get('radii.2')};
+    border-bottom-left-radius: ${get('radii.2')};
+  }
+
   ${SideNav}.variant-normal > & {
     color: ${get('colors.gray.6')};
     padding: ${get('space.3')};
@@ -95,26 +105,16 @@ SideNav.Link = styled(Link).attrs(props => {
       text-decoration: none;
       background-color: ${get('colors.gray.1')};
       outline: none;
-
-      // Bar on the left
-      &::before {
-        background-color: ${get('colors.gray.4')};
-      }
-    }
-
-    &:active {
-      background-color: ${get('colors.white')};
     }
 
     &[aria-current='page'],
     &[aria-selected='true'] {
       font-weight: ${get('fontWeights.semibold')};
       color: ${get('colors.gray.9')};
-      background-color: ${get('colors.white')};
 
       // Bar on the left
       &::before {
-        background-color: ${get('colors.orange.5')};
+        background-color: ${get('colors.accent')};
       }
     }
   }

diff --git a/src/UnderlineNav.js b/src/UnderlineNav.js
@@ -67,7 +67,7 @@ UnderlineNav.Link = styled.a.attrs(props => ({
   &:focus {
     color: ${get('colors.gray.9')};
     text-decoration: none;
-    border-bottom-color: ${get('colors.accent')};
+    border-bottom-color: ${get('colors.gray.2')};
     transition: 0.2s ease;
 
     .UnderlineNav-octicon {

diff --git a/src/__tests__/__snapshots__/Button.js.snap b/src/__tests__/__snapshots__/Button.js.snap
@@ -23,8 +23,8 @@ exports[`Button respects the "disabled" prop 1`] = `
   font-size: 14px;
   color: #24292e;
   background-color: #fafbfc;
-  border: 1px solid #e1e4e8;
-  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,35,0.12);
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.04),inset 0px 2px 0px rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -40,6 +40,10 @@ exports[`Button respects the "disabled" prop 1`] = `
   cursor: default;
 }
 
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
 .c0:hover {
   background-color: #F3F4F6;
   box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1);
@@ -108,11 +112,15 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
   cursor: default;
 }
 
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
 .c0:hover {
   color: #fff;
   background-color: #cb2431;
-  border-color: #b31d28;
-  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
 }
 
 .c0:focus {
@@ -123,8 +131,8 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
 .c0:active {
   color: #fff;
   background-color: #be222e;
-  box-shadow: inset 0px 2px 0px rgba(179,29,40,0.4);
-  border-color: #9e1c23;
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:disabled {
@@ -160,7 +168,7 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-size: 14px;
-  color: #005cc5;
+  color: #0366d6;
   border: 1px solid #e1e4e8;
   background-color: #fafbfc;
   box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.25);
@@ -179,11 +187,15 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
   cursor: default;
 }
 
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
 .c0:hover {
   color: #fff;
   background-color: #0366d6;
-  border-color: #005cc5;
-  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
 }
 
 .c0:focus {
@@ -194,8 +206,8 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
 .c0:active {
   color: #fff;
   background-color: #035fc7;
-  border-color: rgba(4,66,137,.5);
-  box-shadow: inset 0px 1px 0px rgba(4,66,137,0.2);
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
 }
 
 .c0:disabled {
@@ -232,7 +244,7 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
   text-decoration: none;
   font-size: 14px;
   color: #fff;
-  background-color: #159739;
+  background-color: #2EA44F;
   border: 1px solid #22863a;
   box-shadow: 0px 1px 0px rgba(20,70,32,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
 }
@@ -250,21 +262,25 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
   cursor: default;
 }
 
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
 .c0:hover {
-  background-color: #138934;
-  border-color: #176f2c;
+  background-color: #2C974B;
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:focus {
   border-color: transparent;
   box-shadow: 0 0 0 3px #94D3A2;
-  background-color: #138934;
+  background-color: #2C974B;
 }
 
 .c0:active {
   background-color: #128031;
-  box-shadow: inset 0px 1px 0px rgba(20,70,32,0.2);
-  border-color: #176f2c;
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:disabled {

diff --git a/src/__tests__/__snapshots__/Dropdown.js.snap b/src/__tests__/__snapshots__/Dropdown.js.snap
@@ -69,8 +69,8 @@ exports[`Dropdown.Button matches the snapshots 1`] = `
   font-size: 14px;
   color: #24292e;
   background-color: #fafbfc;
-  border: 1px solid #e1e4e8;
-  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,35,0.12);
+  box-shadow: 0px 1px 0px rgba(27,31,35,0.04),inset 0px 2px 0px rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -86,6 +86,10 @@ exports[`Dropdown.Button matches the snapshots 1`] = `
   cursor: default;
 }
 
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
 .c0:hover {
   background-color: #F3F4F6;
   box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1);

diff --git a/src/__tests__/__snapshots__/Label.js.snap b/src/__tests__/__snapshots__/Label.js.snap
@@ -3,7 +3,7 @@
 exports[`Label respects the "outline" prop 1`] = `
 .c0 {
   display: inline-block;
-  font-weight: 600;
+  font-weight: 400;
   color: #fff;
   border-radius: 100px;
   font-size: 12px;
@@ -32,7 +32,7 @@ exports[`Label respects the "outline" prop 1`] = `
 exports[`Label respects the "variant" prop 1`] = `
 .c0 {
   display: inline-block;
-  font-weight: 600;
+  font-weight: 400;
   color: #fff;
   border-radius: 100px;
   font-size: 14px;

diff --git a/src/__tests__/__snapshots__/LabelGroup.js.snap b/src/__tests__/__snapshots__/LabelGroup.js.snap
@@ -11,7 +11,7 @@ exports[`BranchName matches snapshot 1`] = `
 
 .c1 {
   display: inline-block;
-  font-weight: 600;
+  font-weight: 400;
   color: #fff;
   border-radius: 100px;
   font-size: 12px;
@@ -27,7 +27,7 @@ exports[`BranchName matches snapshot 1`] = `
 
 .c2 {
   display: inline-block;
-  font-weight: 600;
+  font-weight: 400;
   color: #fff;
   border-radius: 100px;
   font-size: 12px;