implement functional color variables for TabNav

primer · Mar 2, 2021 · 6b2dc95 · 6b2dc95
1 parent c44ee36
commit 6b2dc95
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/.changeset/good-turkeys-give.md b/.changeset/good-turkeys-give.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in TabNav
diff --git a/src/TabNav.tsx b/src/TabNav.tsx
@@ -12,7 +12,7 @@ const SELECTED_CLASS = 'selected'
 
 const TabNavBase = styled.div<SystemCommonProps & SxProp>`
   margin-top: 0;
-  border-bottom: 1px solid ${get('colors.border.gray')};
+  border-bottom: 1px solid ${get('colors.border.primary')};
   ${COMMON}
   ${sx}
 `
@@ -47,24 +47,24 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   padding: 8px 12px;
   font-size: ${get('fontSizes.1')};
   line-height: 20px;
-  color: ${get('colors.black')};
+  color: ${get('colors.text.primary')};
   text-decoration: none;
   background-color: transparent;
   border: 1px solid transparent;
   border-bottom: 0;
 
   &:hover,
   &:focus {
-    color: ${get('colors.text.grayDark')};
+    color: ${get('colors.text.primary')};
     text-decoration: none;
   }
 
   &.selected {
-    color: ${get('colors.text.grayDark')};
-    border-color: ${get('colors.border.gray')};
+    color: ${get('colors.text.primary')};
+    border-color: ${get('colors.border.primary')};
     border-top-right-radius: ${get('radii.2')};
     border-top-left-radius: ${get('radii.2')};
-    background-color: ${get('colors.white')};
+    background-color: ${get('colors.bg.canvas')};
   }
 
   ${COMMON};

diff --git a/src/__tests__/__snapshots__/TabNav.tsx.snap b/src/__tests__/__snapshots__/TabNav.tsx.snap
@@ -5,7 +5,7 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
   padding: 8px 12px;
   font-size: 14px;
   line-height: 20px;
-  color: #1b1f23;
+  color: #24292e;
   -webkit-text-decoration: none;
   text-decoration: none;
   background-color: transparent;