fix(new-hope): add new tokens to pagination

Yakutoc · Dec 4, 2024 · afe89ed · afe89ed
1 parent 376befd
commit afe89ed
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 15 deletions.
diff --git a/packages/plasma-new-hope/src/components/Pagination/Pagination.styles.ts b/packages/plasma-new-hope/src/components/Pagination/Pagination.styles.ts
@@ -123,6 +123,13 @@ export const PaginationButton = styled(Button)`
         ${buttonTokens.buttonBackgroundColorActive}: var(${tokens.paginationCurrentButtonActiveBackgroundColor});
     }
 
+    &.${classes.buttonDisabled} {
+        ${buttonTokens.buttonColor}: var(${tokens.paginationDisabledButtonColor}, var(${tokens.buttonColor}));
+        ${buttonTokens.buttonBackgroundColor}: var(${tokens.paginationDisabledButtonBackgroundColor}, var(${
+    tokens.buttonBackgroundColor
+}));
+    }
+
     :focus {
         outline: none;
     }

diff --git a/packages/plasma-new-hope/src/components/Pagination/Pagination.tokens.ts b/packages/plasma-new-hope/src/components/Pagination/Pagination.tokens.ts
@@ -17,6 +17,7 @@ export const classes = {
     paginationPageButtonActive: 'pagination-page-button-active',
 
     paginationIconReverse: 'pagination-icon-reverse',
+    buttonDisabled: 'pagination-button-disabled',
 };
 
 export const tokens = {
@@ -43,6 +44,8 @@ export const tokens = {
     paginationCurrentButtonHoverColor: '--plasma-pagination-button-current-color-hover',
     paginationCurrentButtonActiveBackgroundColor: '--plasma-pagination-button-current-bg-color-active',
     paginationCurrentButtonActiveColor: '--plasma-pagination--button-current-color-active',
+    paginationDisabledButtonColor: '--plasma-pagination--button-color-disabled',
+    paginationDisabledButtonBackgroundColor: '--plasma-pagination--button-bg-color-disabled',
 
     buttonDisabledOpacity: '--plasma-pagination-button-disabled-opacity',
 

diff --git a/packages/plasma-new-hope/src/components/Pagination/Pagination.tsx b/packages/plasma-new-hope/src/components/Pagination/Pagination.tsx
@@ -139,7 +139,11 @@ export const paginationRoot = (Root: RootProps<HTMLDivElement, PaginationProps>)
                                 sections.map((section, indexSection) => (
                                     <>
                                         {indexSection !== 0 && (
-                                            <PaginationShorter stretching="fixed" disabled>
+                                            <PaginationShorter
+                                                stretching="fixed"
+                                                disabled
+                                                className={classes.buttonDisabled}
+                                            >
                                                 ...
                                             </PaginationShorter>
                                         )}
@@ -154,6 +158,7 @@ export const paginationRoot = (Root: RootProps<HTMLDivElement, PaginationProps>)
                                                     className={cx(
                                                         classes.paginationPageButton,
                                                         isActiveButton(pageValue),
+                                                        disabled.includes(pageValue) ? classes.buttonDisabled : '',
                                                     )}
                                                 >
                                                     {pageValue}

diff --git a/...pe/src/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.ts b/...pe/src/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.ts
@@ -35,6 +35,13 @@ export const SelectPerPageSelect = styled(Select)`
     ${selectTokens.itemIconMargin}: 0 0.375rem 0 0;
     ${selectTokens.itemIconSize}: 1.5rem;
     ${selectTokens.itemHeight}: var(${tokens.selectItemHeight});
+
+    ${selectTokens.fontFamily}: var(${tokens.paginationFontFamily});
+    ${selectTokens.fontSize}: var(${tokens.paginationFontSize});
+    ${selectTokens.fontStyle}: var(${tokens.paginationFontStyle});
+    ${selectTokens.fontWeight}: var(${tokens.paginationFontWeight});
+    ${selectTokens.fontLetterSpacing}: var(${tokens.paginationLetterSpacing});
+    ${selectTokens.fontLineHeight}: var(${tokens.paginationLineHeight});
 `;
 
 export const SelectPerPageTypography = styled.div`

diff --git a/packages/sdds-cs/src/components/Pagination/Pagination.config.ts b/packages/sdds-cs/src/components/Pagination/Pagination.config.ts
@@ -10,23 +10,25 @@ export const config = {
         view: {
             default: css`
                 ${paginationTokens.buttonColor}: var(--text-accent);
-                ${paginationTokens.buttonColorHover}: var(--text-accent-hover);
-                ${paginationTokens.buttonColorActive}: var(--text-accent-active);
+                ${paginationTokens.buttonColorHover}: var(--text-accent);
+                ${paginationTokens.buttonColorActive}: var(--text-accent);
                 ${paginationTokens.buttonBackgroundColor}: var(--surface-clear);
                 ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear);
                 ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear);
-                ${paginationTokens.buttonHoverColor}: var(--text-primary);
-                ${paginationTokens.buttonActiveColor}: var(--text-primary);
-                ${paginationTokens.buttonArrowColor}: var(--text-secondary);
-                ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover);
-                ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover);
+                ${paginationTokens.buttonHoverColor}: var(--text-accent);
+                ${paginationTokens.buttonActiveColor}: var(--text-accent);
+                ${paginationTokens.buttonArrowColor}: var(--text-accent);
+                ${paginationTokens.buttonArrowColorHover}: var(--text-accent);
+                ${paginationTokens.buttonArrowColorActive}: var(--text-accent);
 
                 ${paginationTokens.inputBackgroundColor}: var(--surface-solid-card);
                 ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card);
                 ${paginationTokens.inputBorderColor}: var(--outline-solid-primary);
 
                 ${paginationTokens.paginationColor}: var(--text-primary);
                 ${paginationTokens.buttonFocusColor}: var(--surface-accent);
+                ${paginationTokens.paginationDisabledButtonColor}: var(--text-secondary);
+                ${paginationTokens.paginationDisabledButtonBackgroundColor}: var(--surface-clear);
             `,
         },
         viewCurrentPage: {
@@ -41,12 +43,12 @@ export const config = {
         },
         size: {
             s: css`
-                ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size);
-                ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family);
+                ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size);
+                ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style);
+                ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-font-weight);
+                ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
+                ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height);
 
                 ${paginationTokens.buttonHeight}: 2.5rem;
                 ${paginationTokens.buttonWidth}: 2.5rem;
@@ -77,7 +79,7 @@ export const config = {
                 ${paginationTokens.inputWidth}: 3rem;
                 ${paginationTokens.inputHeight}: 2.5rem;
                 ${paginationTokens.inputPadding}: 0 0.625rem;
-                ${paginationTokens.inputBorderWidth}: 0.0625rem;
+                ${paginationTokens.inputBorderWidth}: 0.125rem;
             `,
         },
         type: {