🎨(react) enhance Pagination component styles

update Pagination token and css files with new css variables introduce
with the new tokens architectures

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;

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>
         ))}

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}