Use functional color variables in FilterList

primer · Mar 2, 2021 · 53c97b9 · 53c97b9
1 parent f9d29cc
commit 53c97b9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/.changeset/famous-guests-look.md b/.changeset/famous-guests-look.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in FilterList
diff --git a/src/FilterList.tsx b/src/FilterList.tsx
@@ -35,20 +35,20 @@ const FilterListItemBase = styled.a<StyledFilterListItemBaseProps>`
   margin: ${props => (props.small ? '0 0 2px' : '0 0 5px 0')};
   overflow: hidden;
   font-size: ${get('fontSizes.1')};
-  color: ${props => (props.selected ? get('colors.white') : get('colors.gray.6'))};
-  background-color: ${props => (props.selected ? get('colors.blue.5') : '')}!important;
+  color: ${props => (props.selected ? get('colors.state.selected.primaryText') : get('colors.text.secondary'))};
+  background-color: ${props => (props.selected ? get('colors.state.selected.primaryBg') : '')}!important;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
   border-radius: ${get('radii.1')};
   &:hover {
     text-decoration: none;
-    background-color: ${get('colors.filterList.hoverBg')};
+    background-color: ${get('colors.bg.tertiary')};
   }
   &:active {
-    color: ${get('colors.white')};
-    background-color: ${get('colors.blue.5')};
+    color: ${get('colors.state.selected.primaryText')};
+    background-color: ${get('colors.state.selected.primaryBg')};
   }
   .count {
     float: right;

diff --git a/src/__tests__/__snapshots__/FilterListItem.tsx.snap b/src/__tests__/__snapshots__/FilterListItem.tsx.snap
@@ -21,7 +21,7 @@ exports[`FilterList.Item renders consistently 1`] = `
 .c0:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #eaecef;
+  background-color: #f6f8fa;
 }
 
 .c0:active {
@@ -60,7 +60,7 @@ exports[`FilterList.Item respects the "selected" prop 1`] = `
 .c0:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #eaecef;
+  background-color: #f6f8fa;
 }
 
 .c0:active {