From 397f3360f1e6486ae475394b5b4cef968a0cdb21 Mon Sep 17 00:00:00 2001
From: Van Anderson <van.m.anderson@gmail.com>
Date: Thu, 4 Mar 2021 11:49:18 -0600
Subject: [PATCH] Use functional color variables in Pagination

---
 .changeset/blue-spiders-pull.md               |  5 ++++
 src/Pagination/Pagination.tsx                 | 26 +++++++++----------
 .../__snapshots__/Pagination.tsx.snap         |  4 +--
 3 files changed, 20 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/blue-spiders-pull.md

diff --git a/.changeset/blue-spiders-pull.md b/.changeset/blue-spiders-pull.md
new file mode 100644
index 00000000000..7123d047dfc
--- /dev/null
+++ b/.changeset/blue-spiders-pull.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in Pagination
diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx
index fe94027d348..a0cbef270ff 100644
--- a/src/Pagination/Pagination.tsx
+++ b/src/Pagination/Pagination.tsx
@@ -11,7 +11,7 @@ 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;
@@ -19,45 +19,45 @@ const Page = styled.a`
   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,
diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap
index 5c1aaa36a0f..0a4471e5100 100644
--- a/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap
+++ b/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;
 }