From d79d58885ae085e19ec8dcd16641abaf5befaa47 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Fri, 22 Aug 2025 10:16:26 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(react)=20enhance=20Pagination=20co?=
 =?UTF-8?q?mponent=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

update Pagination token and css files with new css variables introduce
with the new tokens architectures
---
 .../react/src/components/Pagination/_index.scss  | 12 +++++++++---
 .../src/components/Pagination/index.stories.tsx  |  2 +-
 .../react/src/components/Pagination/index.tsx    | 16 +++++++++++-----
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/Pagination/_index.scss b/packages/react/src/components/Pagination/_index.scss
index 6151751..01de085 100644
--- a/packages/react/src/components/Pagination/_index.scss
+++ b/packages/react/src/components/Pagination/_index.scss
@@ -8,12 +8,18 @@
   &__list {
     display: flex;
     align-items: center;
-    border: 1px var(--c--theme--colors--greyscale-300) solid;
+    border: 1px var(--c--contextuals--border--surface--primary) solid;
     border-radius: 2px;
-    padding: var(--c--theme--spacings--st);
-    background: var(--c--theme--colors--greyscale-000);
+    padding: var(--c--globals--spacings--st);
+    background: var(--c--contextuals--background--surface--secondary);
+
+    &__ellipsis {
+      color: var(--c--contextuals--content--semantic--neutral--tertiary);
+    }
   }
 
+
+
   &__goto {
     display: flex;
     align-items: center;
diff --git a/packages/react/src/components/Pagination/index.stories.tsx b/packages/react/src/components/Pagination/index.stories.tsx
index b2fd72a..58f0c91 100644
--- a/packages/react/src/components/Pagination/index.stories.tsx
+++ b/packages/react/src/components/Pagination/index.stories.tsx
@@ -47,7 +47,7 @@ export const List = () => {
     <div>
       <div>
         {items.map((item) => (
-          <div className="p-t bg-secondary-300 mb-t" key={item}>
+          <div className="p-t bg-semantic--neutral--tertiary mb-t" key={item}>
             {item}
           </div>
         ))}
diff --git a/packages/react/src/components/Pagination/index.tsx b/packages/react/src/components/Pagination/index.tsx
index 1166567..75c710f 100644
--- a/packages/react/src/components/Pagination/index.tsx
+++ b/packages/react/src/components/Pagination/index.tsx
@@ -106,7 +106,8 @@ export const Pagination = ({
     <div className="c__pagination">
       <div className="c__pagination__list">
         <Button
-          color="tertiary-text"
+          variant="neutral"
+          color="tertiary"
           aria-label={t("components.pagination.previous_aria")}
           onClick={onPreviousClick}
           disabled={!canPrevious}
@@ -116,10 +117,13 @@ export const Pagination = ({
         {pageList.map((_page, index) => (
           <Fragment key={_page}>
             {/* Prepend a cell with "..." when the page number we're rendering does not follow the previous one */}
-            {_page > (pageList[index - 1] || 0) + 1 && <span>...</span>}
+            {_page > (pageList[index - 1] || 0) + 1 && (
+              <span className="c__pagination__list__ellipsis">...</span>
+            )}
             {_page === page ? (
               <Button
-                color="tertiary-text"
+                variant="neutral"
+                color="bordered"
                 active={true}
                 aria-label={t("components.pagination.current_page_aria", {
                   page: _page,
@@ -130,7 +134,8 @@ export const Pagination = ({
               </Button>
             ) : (
               <Button
-                color="tertiary-text"
+                variant="neutral"
+                color="tertiary"
                 aria-label={t("components.pagination.goto_page_aria", {
                   page: _page,
                 })}
@@ -143,7 +148,8 @@ export const Pagination = ({
           </Fragment>
         ))}
         <Button
-          color="tertiary-text"
+          variant="neutral"
+          color="tertiary"
           aria-label={t("components.pagination.next_aria")}
           onClick={onNextClick}
           disabled={!canNext}