implement functional color variables for SideNav

primer · Mar 2, 2021 · f2c5779 · f2c5779
1 parent f95018b
commit f2c5779
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/.changeset/four-beers-scream.md b/.changeset/four-beers-scream.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in SideNav
diff --git a/src/SideNav.tsx b/src/SideNav.tsx
@@ -90,10 +90,10 @@ const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {
   }
 
   ${SideNav}.variant-normal > & {
-    color: ${get('colors.gray.6')};
+    color: ${get('colors.text.secondary')};
     padding: ${get('space.3')};
     border: 0;
-    border-top: ${get('borderWidths.1')} solid ${get('colors.gray.2')};
+    border-top: ${get('borderWidths.1')} solid ${get('colors.border.primary')};
 
     &:first-child {
       border-top: 0;
@@ -113,38 +113,38 @@ const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {
 
     &:hover,
     &:focus {
-      color: ${get('colors.gray.9')};
+      color: ${get('colors.text.primary')};
       text-decoration: none;
-      background-color: ${get('colors.gray.1')};
+      background-color: ${get('colors.bg.canvasInset')};
       outline: none;
     }
 
     &[aria-current='page'],
     &[aria-selected='true'] {
       font-weight: ${get('fontWeights.semibold')};
-      color: ${get('colors.gray.9')};
+      color: ${get('colors.text.primary')};
 
       // Bar on the left
       &::before {
-        background-color: ${get('colors.accent')};
+        background-color: ${get('colors.sidenav.borderActive')};
       }
     }
   }
 
   ${SideNav}.variant-lightweight > & {
     padding: ${get('space.1')} 0;
-    color: ${get('colors.blue.5')};
+    color: ${get('colors.text.link')};
 
     &:hover,
     &:focus {
-      color: ${get('colors.gray.9')};
+      color: ${get('colors.text.primary')};
       text-decoration: none;
       outline: none;
     }
 
     &[aria-current='page'],
     &[aria-selected='true'] {
-      color: ${get('colors.gray.9')};
+      color: ${get('colors.text.primary')};
       font-weight: ${get('fontWeights.semibold')};
     }
   }

diff --git a/src/__tests__/__snapshots__/SideNav.tsx.snap b/src/__tests__/__snapshots__/SideNav.tsx.snap
@@ -87,7 +87,7 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
 
 .c1.variant-normal > .c0[aria-current='page']::before,
 .c1.variant-normal > .c0[aria-selected='true']::before {
-  background-color: #f66a0a;
+  background-color: #f9826c;
 }
 
 .c1.variant-lightweight > .c0 {