From 6b2dc95f2b3e250e130ff7e36d18eda3cda94b4a Mon Sep 17 00:00:00 2001
From: Van Anderson <van.m.anderson@gmail.com>
Date: Fri, 26 Feb 2021 10:00:09 -0600
Subject: [PATCH] implement functional color variables for TabNav

---
 .changeset/good-turkeys-give.md             |  5 +++++
 src/TabNav.tsx                              | 12 ++++++------
 src/__tests__/__snapshots__/TabNav.tsx.snap |  2 +-
 3 files changed, 12 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/good-turkeys-give.md

diff --git a/.changeset/good-turkeys-give.md b/.changeset/good-turkeys-give.md
new file mode 100644
index 00000000000..a977ffd8bf3
--- /dev/null
+++ 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
index 037fcd8a8c5..81ec89c1b1c 100644
--- 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,7 +47,7 @@ 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;
@@ -55,16 +55,16 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
 
   &: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
index 1c367579bd1..284bc548d55 100644
--- 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;