feat(pagination) - update pagination component to use new SHINE design system

.changeset/sharp-heads-call.md

@@ -0,0 +1,9 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+Update pagination component to match new SHINE design system
+
+BREAKING CHANGES
+The next button now uses an ArrowRight and ArrowLeft icon instead of text. To apply the new styling, add the `item__nav` class to pagination items that represent the "Next" button.

MIGRATION_GUIDE.md

@@ -28,6 +28,9 @@
 - The Award Bling component has been renamed to Bling.
 - Bling no longer accepts children elements besides those for screen readers. Please include any visually represented strings (such as counts) as siblings to the bling component.
 
+#### Pagination
+- The next and previous button now uses an `ArrowRight` and `ArrowLeft` icon instead of text. To apply the new styling, use the class `.s-pagination--item__nav`. Since these buttons use icons to represent their behavior, make sure to include descriptive text for screen readers.
+
 #### Popover
 - The new popovers no longer include an arrow element. The `s-popover--arrow` css class has been removed, and any markup using it (e.g. `<div class="s-popover--arrow"></div>`) should be deleted from the codebases as part of the migration.
 

packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts

@@ -1,5 +1,4 @@
 import { runA11yTests } from "../../test/a11y-test-utils";
-import { WCAGNonTextContrast } from "../../test/assertions";
 import "../../index";
 
 describe("pagination", () => {
@@ -33,6 +32,5 @@ describe("pagination", () => {
             `,
         },
         tag: "nav",
-        additionalAssertions: [WCAGNonTextContrast],
     });
 });

packages/stacks-classic/lib/components/pagination/pagination.less

@@ -8,70 +8,71 @@
     }
 
     & &--item {
-        --_pa-item-bg: transparent;
-        --_pa-item-bc: var(--bc-darker);
-        --_pa-item-fc: var(--fc-medium);
-        --_pa-item-bg-focus: var(--black-400);
-        --_pa-item-fc-focus: var(--white);
-        --_pa-item-bg-hover: var(--black-225);
-        --_pa-item-bc-hover: var(--bc-darker);
-        --_pa-item-fc-hover: var(--fc-dark);
-
-        // CONTEXTUAL STYLES
-        .highcontrast-mode({ text-decoration: none; });
+        --_pa-item-bg: unset;
+        --_pa-item-br: unset;
+        --_pa-item-fc: var(--black-400);
+        --_pa-item-p: var(--su-static4);
 
         // MODIFIERS
         &.is-selected {
-            --_pa-item-bg: var(--theme-primary);
-            --_pa-item-bc: transparent;
-            --_pa-item-fc: var(--white);
-            --_pa-item-bg-focus: var(--theme-primary-400);
-        }
-        &.s-pagination--item__clear {
-            --_pa-item-bg: transparent;
-            --_pa-item-bc: transparent;
-            --_pa-item-fc: inherit;
+            --_pa-item-fc: var(--black-600);
+
+            &:not(:hover):not(:focus-visible):before {
+                background-color: var(--black-600);
+                content: "";
+                height: var(--su-static2);
+                left: 0;
+                position: absolute;
+                right: 0;
+                top: 100%;
+            }
         }
-        // override hover styles to match base styles
-        &.is-selected,
-        &.s-pagination--item__clear {
-            --_pa-item-bc-hover: var(--_pa-item-bc);
-            --_pa-item-bg-hover: var(--_pa-item-bg);
-            --_pa-item-fc-hover: var(--_pa-item-fc);
+        &.s-pagination--item__nav {
+            --_pa-item-bg: var(--black-150);
+            --_pa-item-br: var(--br-circle);
+            --_pa-item-fc: var(--black-600);
+            --_pa-item-p: var(--su-static6);
+
+            aspect-ratio: 1 / 1;
+
+            &:hover {
+                --_pa-item-bg: var(--black-200);
+            }
         }
 
         // INTERACTION
-        &:hover {
-            background-color: var(--_pa-item-bg-hover);
-            border-color: var(--_pa-item-bc-hover);
-            color: var(--_pa-item-fc-hover);
+        &[href]:hover:not(&__nav) {
+            --_pa-item-bg: var(--black-150);
+            --_pa-item-br: var(--br-pill);
+            --_pa-item-fc: var(--black-600);
         }
-
         &:focus-visible {
-            .focus-styles(true, true);
+            --_pa-item-bg: var(--black-150);
+            --_pa-item-fc: var(--black-600);
+            .focus-styles(false, true);
         }
-
-        &:focus-visible,
+        &:focus-visible:not(&__nav),
         &.focus-inset-bordered {
-            background-color: var(--_pa-item-bg-focus);
-            color: var(--_pa-item-fc-focus);
+            --_pa-item-br: var(--br-md);
         }
 
         background-color: var(--_pa-item-bg);
-        border: 1px solid var(--_pa-item-bc);
+        border-radius: var(--_pa-item-br);
         color: var(--_pa-item-fc);
+        padding: var(--_pa-item-p);
 
-        border-radius: var(--br-md);
-        display: inline-block;
-        font-size: var(--fs-body1);
-        line-height: var(--lh-xl);
-        padding: 0 var(--su8);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin: var(--su-static1);
+        position: relative;
     }
 
     &,
     ul {
         display: flex;
+        align-items: center;
         flex-wrap: wrap;
-        gap: var(--su4);
+        gap: var(--su2);
     }
 }