refactor: pagination full token (#35872)

* refactor: pagination full token

* chore: code clean

components/_util/theme/interface.ts

@@ -324,6 +324,7 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
   controlItemBgActive: string; // Note. It also is a color
   controlItemBgActiveHover: string; // Note. It also is a color
   controlInteractiveSize: number;
+  controlItemBgActiveDisabled: string; // Note. It also is a color
 
   // Color
   colorBorder: string;

components/_util/theme/util/alias.ts

@@ -95,6 +95,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     colorSplit: 'rgba(0, 0, 0, 0.06)',
     controlItemBgActive: primaryColors[0],
     controlItemBgActiveHover: new TinyColor(primaryColors[0]).darken(2).toRgbString(),
+    controlItemBgActiveDisabled: new TinyColor('#000').tint(90).toRgbString(),
     fontWeightStrong: 600,
 
     // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥

components/pagination/style/index.tsx

@@ -1,6 +1,5 @@
 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
 import {
   genBasicInputStyle,
   genInputSmallStyle,
@@ -23,6 +22,13 @@ interface PaginationToken extends InputToken<FullToken<'Pagination'>> {
   paginationItemDisabledColorActive: string;
   paginationItemLinkBg: string;
   inputOutlineOffset: string;
+  paginationMiniOptionsMarginInlineStart: number;
+  paginationMiniQuickJumperInputWidth: number;
+  paginationItemPaddingInline: number;
+  paginationEllipsisLetterSpacing: number;
+  paginationEllipsisTextIndent: string;
+  paginationSlashMarginInlineStart: number;
+  paginationSlashMarginInlineEnd: number;
 }
 
 const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
@@ -149,8 +155,7 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
     },
 
     [`&&-mini ${componentCls}-options`]: {
-      // FIXME
-      marginInlineStart: 2,
+      marginInlineStart: token.paginationMiniOptionsMarginInlineStart,
 
       [`&-size-changer`]: {
         top: token.paginationMiniOptionsSizeChangerTop,
@@ -163,8 +168,7 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
         input: {
           ...genInputSmallStyle(token),
 
-          // FIXME
-          width: 44,
+          width: token.paginationMiniQuickJumperInputWidth,
           height: token.controlHeightSM,
         },
       },
@@ -204,8 +208,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke
         boxSizing: 'border-box',
         height: '100%',
         marginInlineEnd: token.marginXS,
-        // FIXME: hardcode in v4
-        padding: '0 6px',
+        padding: `0 ${token.paginationItemPaddingInline}px`,
         textAlign: 'center',
         backgroundColor: token.paginationItemInputBg,
         border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
@@ -246,8 +249,6 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
         [`${componentCls}-item-link-icon`]: {
           color: token.colorPrimary,
           fontSize: token.fontSizeSM,
-          // FIXME
-          letterSpacing: -1,
           opacity: 0,
           transition: `all ${token.motionDurationMid}`,
 
@@ -270,11 +271,9 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
           margin: 'auto',
           color: token.colorTextDisabled,
           fontFamily: 'Arial, Helvetica, sans-serif',
-          // FIXME
-          letterSpacing: 2,
+          letterSpacing: token.paginationEllipsisLetterSpacing,
           textAlign: 'center',
-          // FIXME
-          textIndent: '0.13em',
+          textIndent: token.paginationEllipsisTextIndent,
           opacity: 1,
           transition: `all ${token.motionDurationMid}`,
         },
@@ -343,7 +342,6 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
 
       [`${componentCls}-item-link`]: {
         display: 'block',
-        // FIXME
         width: '100%',
         height: '100%',
         padding: 0,
@@ -368,9 +366,8 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
     },
 
     [`${componentCls}-slash`]: {
-      // FIXME
-      marginInlineEnd: 10,
-      marginInlineStart: 5,
+      marginInlineEnd: token.paginationSlashMarginInlineEnd,
+      marginInlineStart: token.paginationSlashMarginInlineStart,
     },
 
     [`${componentCls}-options`]: {
@@ -378,13 +375,6 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
       marginInlineStart: token.margin,
       verticalAlign: 'middle',
 
-      // IE11 css hack. `*::-ms-backdrop,` is a must have
-      '@media all and (-ms-high-contrast: none)': {
-        [`*::-ms-backdrop, &-options`]: {
-          verticalAlign: 'top',
-        },
-      },
-
       '&-size-changer.-select': {
         display: 'inline-block',
         width: 'auto',
@@ -400,8 +390,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
         input: {
           ...genBasicInputStyle(token),
 
-          // FIXME
-          width: 50,
+          width: token.controlHeightLG * 1.25,
           height: token.controlHeight,
           margin: 0,
           marginInlineStart: token.marginXS,
@@ -435,8 +424,7 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token
 
       a: {
         display: 'block',
-        // FIXME
-        padding: '0 6px',
+        padding: `0 ${token.paginationItemPaddingInline}px`,
         color: token.colorText,
         transition: 'none',
 
@@ -567,19 +555,25 @@ export default genComponentStyleHook('Pagination', token => {
   const paginationToken = mergeToken<PaginationToken>(
     token,
     {
-      // FIXME: missing token
       paginationItemSize: token.controlHeight,
       paginationFontFamily: token.fontFamily,
       paginationItemBg: token.colorBgComponent,
       paginationItemBgActive: token.colorBgComponent,
-      paginationFontWeightActive: 500,
-      paginationItemSizeSM: 24,
+      paginationFontWeightActive: token.fontWeightStrong,
+      paginationItemSizeSM: token.controlHeightSM,
       paginationItemInputBg: token.colorBgComponent,
       paginationMiniOptionsSizeChangerTop: 0,
-      paginationItemDisabledBgActive: new TinyColor('#000').tint(90).toString(), // tint(@black, 90%)
+      paginationItemDisabledBgActive: token.controlItemBgActiveDisabled,
       paginationItemDisabledColorActive: token.colorTextDisabled,
       paginationItemLinkBg: token.colorBgComponent,
       inputOutlineOffset: '0 0',
+      paginationMiniOptionsMarginInlineStart: token.marginXXS / 2,
+      paginationMiniQuickJumperInputWidth: token.controlHeightLG * 1.1,
+      paginationItemPaddingInline: token.marginXXS * 1.5,
+      paginationEllipsisLetterSpacing: token.marginXXS / 2,
+      paginationSlashMarginInlineStart: token.marginXXS,
+      paginationSlashMarginInlineEnd: token.marginSM,
+      paginationEllipsisTextIndent: '0.13em', // magic for ui experience
     },
     initInputToken(token),
   );