Merge pull request #1106 from primer/VanAnderson/pagination-functiona…

…l-vars

Use functional color variables in Pagination

.changeset/blue-spiders-pull.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in Pagination

src/Pagination/Pagination.tsx

@@ -11,53 +11,53 @@ const Page = styled.a`
   padding: 5px 10px;
   font-style: normal;
   line-height: 20px;
-  color: ${get('pagination.colors.normal.fg')};
+  color: ${get('colors.text.primary')};
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   user-select: none;
   text-decoration: none;
 
-  margin-right: ${get('pagination.spaceBetween')};
+  margin-right: ${get('space.1')};
 
   &:last-child {
     margin-right: 0;
   }
 
   border: ${get('borderWidths.1')} solid transparent;
-  border-radius: ${get('pagination.borderRadius')};
+  border-radius: ${get('radii.2')};
   transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
 
   &:hover,
   &:focus {
     text-decoration: none;
-    border-color: ${get('pagination.colors.hover.border')};
+    border-color: ${get('colors.border.primary')};
     outline: 0;
     transition-duration: 0.1s;
   }
 
   &:active {
-    border-color: ${get('pagination.colors.active.border')};
+    border-color: ${get('colors.border.secondary')};
   }
 
   &[rel='prev'],
   &[rel='next'] {
-    color: ${get('pagination.colors.nextPrevious.fg')};
+    color: ${get('colors.text.link')};
   }
 
   &[aria-current],
   &[aria-current]:hover {
-    color: ${get('pagination.colors.selected.fg')};
-    background-color: ${get('pagination.colors.selected.bg')};
-    border-color: ${get('pagination.colors.selected.border')};
+    color: ${get('colors.state.selected.primaryText')};
+    background-color: ${get('colors.state.selected.primaryBg')};
+    border-color: transparent;
   }
 
   &[aria-disabled],
   &[aria-disabled]:hover {
-    color: ${get('pagination.colors.disabled.fg')}; // check
+    color: ${get('colors.text.disabled')}; // check
     cursor: default;
-    border-color: ${get('pagination.colors.disabled.border')};
+    border-color: transparent;
   }
 
   @supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {
@@ -73,7 +73,7 @@ const Page = styled.a`
 
     // chevron-left
     &[rel='prev']::before {
-      margin-right: ${get('pagination.spaceBetween')};
+      margin-right: ${get('space.1')};
       clip-path: polygon(
         9.8px 12.8px,
         8.7px 12.8px,
@@ -89,7 +89,7 @@ const Page = styled.a`
 
     // chevron-right
     &[rel='next']::after {
-      margin-left: ${get('pagination.spaceBetween')};
+      margin-left: ${get('space.1')};
       clip-path: polygon(
         6.2px 3.2px,
         7.3px 3.2px,

src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap

@@ -38,7 +38,7 @@ exports[`Pagination renders consistently 1`] = `
 .c2:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-color: #eaecef;
+  border-color: #e1e4e8;
   outline: 0;
   -webkit-transition-duration: 0.1s;
   transition-duration: 0.1s;
@@ -62,7 +62,7 @@ exports[`Pagination renders consistently 1`] = `
 
 .c2[aria-disabled],
 .c2[aria-disabled]:hover {
-  color: #d1d5da;
+  color: #959da5;
   cursor: default;
   border-color: transparent;
 }