refactor(uikit): simplify TablePagination styles and move them to theme (#639)

* refactor(uikit): simplify TablePagination styles and move them to theme

Removed inline styles from TablePagination component and added a centralized styles definition for pagination in the theme. This improves maintainability and consistency across the UI.

* Create gorgeous-bears-worry.md

Author: awxxxxxx

.changeset/gorgeous-bears-worry.md

@@ -0,0 +1,5 @@
+---
+"@tidbcloud/uikit": patch
+---
+
+refactor(uikit): simplify TablePagination styles and move them to theme

packages/uikit/src/biz/Table/TablePagination.tsx

@@ -95,20 +95,6 @@ export const ProTablePagination = <TData extends MRT_RowData>({ table, ...props
           total={paginationProps?.total ?? numberOfPages}
           value={paginationProps.value ?? pageIndex + 1}
           withEdges={withEdges}
-          styles={mergeStylesList([
-            (theme) => ({
-              control: {
-                border: 'none',
-                color: theme.colors.carbon[9],
-                borderRadius: theme.defaultRadius,
-                '&[data-active]': {
-                  color: theme.colors.carbon[9],
-                  background: theme.colors.carbon[4]
-                }
-              }
-            }),
-            rest.styles
-          ])}
           {...rest}
         />
         {showRowsPerPage && (

packages/uikit/src/theme/theme.ts

@@ -3,6 +3,7 @@ import {
   AccordionProps,
   DEFAULT_THEME,
   MantineTheme,
+  PaginationProps,
   RadioIndicatorProps,
   TagsInputProps,
   createTheme,
@@ -1404,6 +1405,34 @@ const theme = createTheme({
           }
         }
       }
+    },
+    Pagination: {
+      styles: (theme: MantineTheme, _props: PaginationProps, u: EmotionHelpers) => {
+        return {
+          control: {
+            border: 'none',
+            color: themeColor(theme, 'carbon', 9),
+            borderRadius: theme.defaultRadius,
+            backgroundColor: 'transparent',
+            [u.dark]: {
+              color: themeColor(theme, 'carbon', 8)
+            },
+            '&:hover': {
+              [u.light]: {
+                backgroundColor: themeColor(theme, 'carbon', 2)
+              }
+            },
+            '&[data-active]': {
+              color: themeColor(theme, 'carbon', 9),
+              border: `1px solid ${themeColor(theme, 'carbon', 5)}`,
+              background: themeColor(theme, 'carbon', 2),
+              [u.dark]: {
+                color: themeColor(theme, 'carbon', 8)
+              }
+            }
+          }
+        }
+      }
     }
   }
 })