From a2db31aceb637aee74d983daa180aa023103ed4e Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 26 May 2024 02:45:26 +0300
Subject: [PATCH] Add new tokens for Paginator

---
 .../lib/paginator/style/PaginatorStyle.js      | 18 +++++++++---------
 components/lib/themes/aura/paginator/index.js  |  3 +++
 components/lib/themes/lara/paginator/index.js  |  3 +++
 components/lib/themes/nora/paginator/index.js  |  7 +++++--
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/components/lib/paginator/style/PaginatorStyle.js b/components/lib/paginator/style/PaginatorStyle.js
index 36274c40ca..97dd73bfe7 100644
--- a/components/lib/paginator/style/PaginatorStyle.js
+++ b/components/lib/paginator/style/PaginatorStyle.js
@@ -34,7 +34,7 @@ const theme = ({ dt }) => `
     user-select: none;
     overflow: hidden;
     position: relative;
-    background: transparent;
+    background: ${dt('paginator.nav.button.background')};
     border: 0 none;
     color: ${dt('paginator.nav.button.color')};
     min-width: ${dt('paginator.nav.button.width')};
@@ -55,7 +55,7 @@ const theme = ({ dt }) => `
     outline-offset: ${dt('paginator.nav.button.focus.ring.offset')};
 }
 
-.p-paginator-page:not(.p-disabled):not(.p-paginator-page-active):hover,
+.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):hover,
 .p-paginator-first:not(.p-disabled):hover,
 .p-paginator-prev:not(.p-disabled):hover,
 .p-paginator-next:not(.p-disabled):hover,
@@ -64,6 +64,11 @@ const theme = ({ dt }) => `
     color: ${dt('paginator.nav.button.hover.color')};
 }
 
+.p-paginator-page.p-paginator-page-selected {
+    background: ${dt('paginator.nav.button.selected.background')};
+    color: ${dt('paginator.nav.button.selected.color')};
+}
+
 .p-paginator-current {
     color: ${dt('paginator.current.page.report.color')};
 }
@@ -74,13 +79,8 @@ const theme = ({ dt }) => `
     gap: ${dt('paginator.gap')};
 }
 
-.p-paginator-page.p-paginator-page-active {
-    background: ${dt('highlight.background')};
-    color: ${dt('highlight.color')};
-}
-
 .p-paginator-jtp-input .p-inputtext {
-    max-width: 2.5rem;
+    max-width: ${dt('paginator.jump.to.page.input.max.width')};
 }
 `;
 
@@ -126,7 +126,7 @@ const classes = {
     page: ({ props, pageLink }) => [
         'p-paginator-page',
         {
-            'p-paginator-page-active': pageLink - 1 === props.page
+            'p-paginator-page-selected': pageLink - 1 === props.page
         }
     ],
     current: 'p-paginator-current',
diff --git a/components/lib/themes/aura/paginator/index.js b/components/lib/themes/aura/paginator/index.js
index f0f6dfa99d..cc37a37143 100644
--- a/components/lib/themes/aura/paginator/index.js
+++ b/components/lib/themes/aura/paginator/index.js
@@ -8,9 +8,12 @@ export default {
         transitionDuration: '{transition.duration}'
     },
     navButton: {
+        background: 'transparent',
         hoverBackground: '{content.hover.background}',
+        selectedBackground: '{highlight.background}',
         color: '{text.muted.color}',
         hoverColor: '{text.hover.muted.color}',
+        selectedColor: '{highlight.color}',
         width: '2.5rem',
         height: '2.5rem',
         borderRadius: '50%',
diff --git a/components/lib/themes/lara/paginator/index.js b/components/lib/themes/lara/paginator/index.js
index f0f6dfa99d..cc37a37143 100644
--- a/components/lib/themes/lara/paginator/index.js
+++ b/components/lib/themes/lara/paginator/index.js
@@ -8,9 +8,12 @@ export default {
         transitionDuration: '{transition.duration}'
     },
     navButton: {
+        background: 'transparent',
         hoverBackground: '{content.hover.background}',
+        selectedBackground: '{highlight.background}',
         color: '{text.muted.color}',
         hoverColor: '{text.hover.muted.color}',
+        selectedColor: '{highlight.color}',
         width: '2.5rem',
         height: '2.5rem',
         borderRadius: '50%',
diff --git a/components/lib/themes/nora/paginator/index.js b/components/lib/themes/nora/paginator/index.js
index 2f2d551359..6f8cac616f 100644
--- a/components/lib/themes/nora/paginator/index.js
+++ b/components/lib/themes/nora/paginator/index.js
@@ -8,9 +8,12 @@ export default {
         transitionDuration: '{transition.duration}'
     },
     navButton: {
+        background: 'transparent',
         hoverBackground: '{content.hover.background}',
-        color: '{text.color}',
-        hoverColor: '{text.color}',
+        selectedBackground: '{highlight.background}',
+        color: '{text.muted.color}',
+        hoverColor: '{text.hover.muted.color}',
+        selectedColor: '{highlight.color}',
         width: '2.5rem',
         height: '2.5rem',
         borderRadius: '{content.border.radius}',