Paginator tokens

components/lib/paginator/style/PaginatorStyle.js

@@ -8,10 +8,9 @@ const theme = ({ dt }) => `
     flex-wrap: wrap;
     background: ${dt('paginator.background')};
     color: ${dt('paginator.color')};
-    border: 0 none;
+    padding: ${dt('paginator.padding')};
-    padding: 0.5rem 1rem;
+    border-radius: ${dt('paginator.border.radius')};
-    border-radius: ${dt('border.radius.md')};
+    gap: ${dt('paginator.gap')};
-    gap: 0.25rem;
 }
 
 .p-paginator-content-start {
@@ -38,10 +37,10 @@ const theme = ({ dt }) => `
     background: transparent;
     border: 0 none;
     color: ${dt('paginator.nav.button.color')};
-    min-width: 2.5rem;
+    min-width: ${dt('paginator.nav.button.width')};
-    height: 2.5rem;
+    height: ${dt('paginator.nav.button.height')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
-    border-radius: 50%;
+    border-radius: ${dt('paginator.nav.button.border.radius')};
     padding: 0;
     margin: 0;
 }
@@ -51,8 +50,9 @@ const theme = ({ dt }) => `
 .p-paginator-last:focus-visible,
 .p-paginator-first:focus-visible,
 .p-paginator-prev:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    box-shadow: ${dt('paginator.nav.button.focus.ring.shadow')};
-    outline-offset: ${dt('focus.ring.offset')};
+    outline: ${dt('paginator.nav.button.focus.ring.width')} ${dt('paginator.nav.button.focus.ring.style')} ${dt('paginator.nav.button.focus.ring.color')};
+    outline-offset: ${dt('paginator.nav.button.focus.ring.offset')};
 }
 
 .p-paginator-page:not(.p-disabled):not(.p-paginator-page-active):hover,
@@ -71,7 +71,7 @@ const theme = ({ dt }) => `
 .p-paginator-pages {
     display: flex;
     align-items: center;
-    gap: 0.25rem;
+    gap: ${dt('paginator.gap')};
 }
 
 .p-paginator-page.p-paginator-page-active {

components/lib/themes/aura/paginator/index.js

@@ -1,14 +1,30 @@
 export default {
     root: {
+        padding: '0.5rem 1rem',
+        gap: '0.25rem',
+        borderRadius: '{content.border.radius}',
         background: '{content.background}',
         color: '{content.color}'
     },
     navButton: {
         hoverBackground: '{content.hover.background}',
         color: '{text.muted.color}',
-        hoverColor: '{text.hover.muted.color}'
+        hoverColor: '{text.hover.muted.color}',
+        width: '2.5rem',
+        height: '2.5rem',
+        borderRadius: '50%',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
     },
     currentPageReport: {
         color: '{text.muted.color}'
+    },
+    jumpToPageInput: {
+        maxWidth: '2.5rem'
     }
 };

components/lib/themes/lara/paginator/index.js

@@ -1,14 +1,30 @@
 export default {
     root: {
+        padding: '0.5rem 1rem',
+        gap: '0.25rem',
+        borderRadius: '{content.border.radius}',
         background: '{content.background}',
         color: '{content.color}'
     },
     navButton: {
         hoverBackground: '{content.hover.background}',
         color: '{text.muted.color}',
-        hoverColor: '{text.hover.muted.color}'
+        hoverColor: '{text.hover.muted.color}',
+        width: '2.5rem',
+        height: '2.5rem',
+        borderRadius: '50%',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
     },
     currentPageReport: {
         color: '{text.muted.color}'
+    },
+    jumpToPageInput: {
+        maxWidth: '2.5rem'
     }
 };

components/lib/themes/nora/paginator/index.js

@@ -1,14 +1,30 @@
 export default {
     root: {
+        padding: '0.5rem 1rem',
+        gap: '0.25rem',
+        borderRadius: '{content.border.radius}',
         background: '{content.background}',
         color: '{content.color}'
     },
     navButton: {
         hoverBackground: '{content.hover.background}',
-        color: '{text.muted.color}',
+        color: '{text.color}',
-        hoverColor: '{text.hover.muted.color}'
+        hoverColor: '{text.color}',
+        width: '2.5rem',
+        height: '2.5rem',
+        borderRadius: '{content.border.radius}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
     },
     currentPageReport: {
         color: '{text.muted.color}'
+    },
+    jumpToPageInput: {
+        maxWidth: '2.5rem'
     }
 };