Add new tokens for Paginator

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',

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%',

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%',

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}',
+        selectedBackground: '{highlight.background}',
-        hoverColor: '{text.color}',
+        color: '{text.muted.color}',
+        hoverColor: '{text.hover.muted.color}',
+        selectedColor: '{highlight.color}',
         width: '2.5rem',
         height: '2.5rem',
         borderRadius: '{content.border.radius}',