refactor:pagination (#6251)

* refactor:pagination

* docs:update & refactor: pagination type

components/pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, PropType } from 'vue';
+import type { ExtractPropTypes } from 'vue';
 import { computed, toRef, defineComponent } from 'vue';
 import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
@@ -11,50 +11,55 @@ import enUS from '../vc-pagination/locale/en_US';
 import classNames from '../_util/classNames';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
+import { booleanType, arrayType, stringType, functionType, someType } from '../_util/type';
+
+// CSSINJS
+import useStyle from './style';
 
 export const paginationProps = () => ({
   total: Number,
   defaultCurrent: Number,
-  disabled: { type: Boolean, default: undefined },
+  disabled: booleanType(),
   current: Number,
   defaultPageSize: Number,
   pageSize: Number,
-  hideOnSinglePage: { type: Boolean, default: undefined },
+  hideOnSinglePage: booleanType(),
-  showSizeChanger: { type: Boolean, default: undefined },
+  showSizeChanger: booleanType(),
-  pageSizeOptions: Array as PropType<(string | number)[]>,
+  pageSizeOptions: arrayType<(string | number)[]>(),
-  buildOptionText: Function as PropType<(opt: { value: any }) => any>,
+  buildOptionText: functionType<(opt: { value: any }) => any>(),
-  showQuickJumper: {
+  showQuickJumper: someType<boolean | { goButton?: any }>(
-    type: [Boolean, Object] as PropType<boolean | { goButton?: any }>,
+    [Boolean, Object],
-    default: undefined as boolean | { goButton?: any },
+    undefined as boolean | { goButton?: any },
-  },
+  ),
-  showTotal: Function as PropType<(total: number, range: [number, number]) => any>,
+  showTotal: functionType<(total: number, range: [number, number]) => any>(),
-  size: String as PropType<'default' | 'small'>,
+  size: stringType<'default' | 'small'>(),
-  simple: { type: Boolean, default: undefined },
+  simple: booleanType(),
   locale: Object,
   prefixCls: String,
   selectPrefixCls: String,
   totalBoundaryShowSizeChanger: Number,
   selectComponentClass: String,
-  itemRender: Function as PropType<
+  itemRender:
-    (opt: {
+    functionType<
-      page: number;
+      (opt: {
-      type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next';
+        page: number;
-      originalElement: any;
+        type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next';
-    }) => any
+        originalElement: any;
-  >,
+      }) => any
+    >(),
   role: String,
   responsive: Boolean,
-  showLessItems: { type: Boolean, default: undefined },
+  showLessItems: booleanType(),
-  onChange: Function as PropType<(page: number, pageSize: number) => void>,
+  onChange: functionType<(page: number, pageSize: number) => void>(),
-  onShowSizeChange: Function as PropType<(current: number, size: number) => void>,
+  onShowSizeChange: functionType<(current: number, size: number) => void>(),
-  'onUpdate:current': Function as PropType<(current: number) => void>,
+  'onUpdate:current': functionType<(current: number) => void>(),
-  'onUpdate:pageSize': Function as PropType<(size: number) => void>,
+  'onUpdate:pageSize': functionType<(size: number) => void>(),
 });
 
 export type PaginationPosition = 'top' | 'bottom' | 'both';
 export const paginationConfig = () => ({
   ...paginationProps(),
-  position: String as PropType<PaginationPosition>,
+  position: stringType<PaginationPosition>(),
 });
 
 export type PaginationProps = Partial<ExtractPropTypes<ReturnType<typeof paginationProps>>>;
@@ -81,6 +86,10 @@ export default defineComponent({
   // emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'],
   setup(props, { slots, attrs }) {
     const { prefixCls, configProvider, direction } = useConfigInject('pagination', props);
+
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const selectPrefixCls = computed(() =>
       configProvider.getPrefixCls('select', props.selectPrefixCls),
     );
@@ -152,11 +161,12 @@ export default defineComponent({
         class: classNames(
           { mini: isSmall, [`${prefixCls.value}-rtl`]: direction.value === 'rtl' },
           attrs.class,
+          hashId.value,
         ),
         itemRender,
       };
 
-      return <VcPagination {...paginationProps} />;
+      return wrapSSR(<VcPagination {...paginationProps} />);
     };
   },
 });

components/pagination/index.en-US.md

@@ -3,7 +3,7 @@ category: Components
 type: Navigation
 title: Pagination
 cols: 1
-cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 A long list can be divided into several pages using `Pagination`, and only one page will be loaded at a time.

components/pagination/index.zh-CN.md

@@ -4,7 +4,7 @@ subtitle: 分页
 type: 导航
 title: Pagination
 cols: 1
-cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 采用分页的形式分隔长列表，每次只加载一个页面。

components/pagination/style/index.less

@@ -1,472 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-@import '../../input/style/mixin';
-
-@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
-
-.@{pagination-prefix-cls} {
-  .reset-component();
-
-  ul,
-  ol {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  &::after {
-    display: block;
-    clear: both;
-    height: 0;
-    overflow: hidden;
-    visibility: hidden;
-    content: ' ';
-  }
-
-  &-total-text {
-    display: inline-block;
-    height: @pagination-item-size;
-    margin-right: 8px;
-    line-height: @pagination-item-size - 2px;
-    vertical-align: middle;
-  }
-
-  &-item {
-    display: inline-block;
-    min-width: @pagination-item-size;
-    height: @pagination-item-size;
-    margin-right: 8px;
-    font-family: @pagination-font-family;
-    line-height: @pagination-item-size - 2px;
-    text-align: center;
-    vertical-align: middle;
-    list-style: none;
-    background-color: @pagination-item-bg;
-    border: @border-width-base @border-style-base @border-color-base;
-    border-radius: @border-radius-base;
-    outline: 0;
-    cursor: pointer;
-    user-select: none;
-
-    a {
-      display: block;
-      padding: 0 6px;
-      color: @text-color;
-      transition: none;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-
-    &:hover {
-      border-color: @primary-color;
-      transition: all 0.3s;
-
-      a {
-        color: @primary-color;
-      }
-    }
-
-    // cannot merge with `&:hover`
-    // see https://github.com/ant-design/ant-design/pull/34002
-    &:focus-visible {
-      border-color: @primary-color;
-      transition: all 0.3s;
-
-      a {
-        color: @primary-color;
-      }
-    }
-
-    &-active {
-      font-weight: @pagination-font-weight-active;
-      background: @pagination-item-bg-active;
-      border-color: @primary-color;
-
-      a {
-        color: @primary-color;
-      }
-
-      &:hover {
-        border-color: @primary-5;
-      }
-
-      &:focus-visible {
-        border-color: @primary-5;
-      }
-
-      &:hover a {
-        color: @primary-5;
-      }
-
-      &:focus-visible a {
-        color: @primary-5;
-      }
-    }
-  }
-
-  &-jump-prev,
-  &-jump-next {
-    outline: 0;
-    .@{pagination-prefix-cls}-item-container {
-      position: relative;
-
-      .@{pagination-prefix-cls}-item-link-icon {
-        color: @primary-color;
-        font-size: @font-size-sm;
-        letter-spacing: -1px;
-        opacity: 0;
-        transition: all 0.2s;
-
-        &-svg {
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          margin: auto;
-        }
-      }
-
-      .@{pagination-prefix-cls}-item-ellipsis {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        display: block;
-        margin: auto;
-        color: @disabled-color;
-        font-family: Arial, Helvetica, sans-serif;
-        letter-spacing: 2px;
-        text-align: center;
-        text-indent: 0.13em;
-        opacity: 1;
-        transition: all 0.2s;
-      }
-    }
-
-    &:hover {
-      .@{pagination-prefix-cls}-item-link-icon {
-        opacity: 1;
-      }
-      .@{pagination-prefix-cls}-item-ellipsis {
-        opacity: 0;
-      }
-    }
-
-    &:focus-visible {
-      .@{pagination-prefix-cls}-item-link-icon {
-        opacity: 1;
-      }
-      .@{pagination-prefix-cls}-item-ellipsis {
-        opacity: 0;
-      }
-    }
-  }
-
-  &-prev,
-  &-jump-prev,
-  &-jump-next {
-    margin-right: 8px;
-  }
-
-  &-prev,
-  &-next,
-  &-jump-prev,
-  &-jump-next {
-    display: inline-block;
-    min-width: @pagination-item-size;
-    height: @pagination-item-size;
-    color: @text-color;
-    font-family: @pagination-font-family;
-    line-height: @pagination-item-size;
-    text-align: center;
-    vertical-align: middle;
-    list-style: none;
-    border-radius: @border-radius-base;
-    cursor: pointer;
-    transition: all 0.3s;
-  }
-
-  &-prev,
-  &-next {
-    font-family: Arial, Helvetica, sans-serif;
-    outline: 0;
-
-    button {
-      color: @text-color;
-      cursor: pointer;
-      user-select: none;
-    }
-
-    &:hover button {
-      border-color: @primary-5;
-    }
-
-    .@{pagination-prefix-cls}-item-link {
-      display: block;
-      width: 100%;
-      height: 100%;
-      padding: 0;
-      font-size: 12px;
-      text-align: center;
-      background-color: @pagination-item-link-bg;
-      border: @border-width-base @border-style-base @border-color-base;
-      border-radius: @border-radius-base;
-      outline: none;
-      transition: all 0.3s;
-    }
-
-    &:focus-visible .@{pagination-prefix-cls}-item-link {
-      color: @primary-color;
-      border-color: @primary-color;
-    }
-
-    &:hover .@{pagination-prefix-cls}-item-link {
-      color: @primary-color;
-      border-color: @primary-color;
-    }
-  }
-
-  &-disabled {
-    &,
-    &:hover {
-      cursor: not-allowed;
-      .@{pagination-prefix-cls}-item-link {
-        color: @disabled-color;
-        border-color: @border-color-base;
-        cursor: not-allowed;
-      }
-    }
-
-    &:focus-visible {
-      cursor: not-allowed;
-      .@{pagination-prefix-cls}-item-link {
-        color: @disabled-color;
-        border-color: @border-color-base;
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &-slash {
-    margin: 0 10px 0 5px;
-  }
-
-  &-options {
-    display: inline-block;
-    margin-left: 16px;
-    vertical-align: middle;
-
-    // IE11 css hack. `*::-ms-backdrop,` is a must have
-    @media all and (-ms-high-contrast: none) {
-      *::-ms-backdrop,
-      & {
-        vertical-align: top;
-      }
-    }
-
-    &-size-changer.@{ant-prefix}-select {
-      display: inline-block;
-      width: auto;
-    }
-
-    &-quick-jumper {
-      display: inline-block;
-      height: @input-height-base;
-      margin-left: @margin-xs;
-      line-height: @input-height-base;
-      vertical-align: top;
-
-      input {
-        .input();
-
-        width: 50px;
-        height: @input-height-base;
-        margin: 0 8px;
-      }
-    }
-  }
-
-  &-simple &-prev,
-  &-simple &-next {
-    height: @pagination-item-size-sm;
-    line-height: @pagination-item-size-sm;
-    vertical-align: top;
-    .@{pagination-prefix-cls}-item-link {
-      height: @pagination-item-size-sm;
-      background-color: transparent;
-      border: 0;
-
-      &::after {
-        height: @pagination-item-size-sm;
-        line-height: @pagination-item-size-sm;
-      }
-    }
-  }
-
-  &-simple &-simple-pager {
-    display: inline-block;
-    height: @pagination-item-size-sm;
-    margin-right: 8px;
-
-    input {
-      box-sizing: border-box;
-      height: 100%;
-      margin-right: 8px;
-      padding: 0 6px;
-      text-align: center;
-      background-color: @pagination-item-input-bg;
-      border: @border-width-base @border-style-base @border-color-base;
-      border-radius: @border-radius-base;
-      outline: none;
-      transition: border-color 0.3s;
-
-      &:hover {
-        border-color: @primary-color;
-      }
-
-      &:focus {
-        border-color: @primary-color-hover;
-        box-shadow: @input-outline-offset @outline-blur-size @outline-width @primary-color-outline;
-      }
-
-      &[disabled] {
-        color: @disabled-color;
-        background: @disabled-bg;
-        border-color: @border-color-base;
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &.mini &-total-text,
-  &.mini &-simple-pager {
-    height: @pagination-item-size-sm;
-    line-height: @pagination-item-size-sm;
-  }
-
-  &.mini &-item {
-    min-width: @pagination-item-size-sm;
-    height: @pagination-item-size-sm;
-    margin: 0;
-    line-height: @pagination-item-size-sm - 2px;
-  }
-
-  &.mini &-item:not(&-item-active) {
-    background: transparent;
-    border-color: transparent;
-  }
-
-  &.mini &-prev,
-  &.mini &-next {
-    min-width: @pagination-item-size-sm;
-    height: @pagination-item-size-sm;
-    margin: 0;
-    line-height: @pagination-item-size-sm;
-  }
-
-  &.mini &-prev &-item-link,
-  &.mini &-next &-item-link {
-    background: transparent;
-    border-color: transparent;
-
-    &::after {
-      height: @pagination-item-size-sm;
-      line-height: @pagination-item-size-sm;
-    }
-  }
-
-  &.mini &-jump-prev,
-  &.mini &-jump-next {
-    height: @pagination-item-size-sm;
-    margin-right: 0;
-    line-height: @pagination-item-size-sm;
-  }
-
-  &.mini &-options {
-    margin-left: 2px;
-
-    &-size-changer {
-      top: @pagination-mini-options-size-changer-top;
-    }
-
-    &-quick-jumper {
-      height: @pagination-item-size-sm;
-      line-height: @pagination-item-size-sm;
-
-      input {
-        .input-sm();
-
-        width: 44px;
-        height: @input-height-sm;
-      }
-    }
-  }
-
-  // ============================ Disabled ============================
-  &&-disabled {
-    cursor: not-allowed;
-
-    .@{pagination-prefix-cls}-item {
-      background: @disabled-bg;
-      border-color: @border-color-base;
-      cursor: not-allowed;
-
-      a {
-        color: @disabled-color;
-        background: transparent;
-        border: none;
-        cursor: not-allowed;
-      }
-
-      &-active {
-        background: @pagination-item-disabled-bg-active;
-
-        a {
-          color: @pagination-item-disabled-color-active;
-        }
-      }
-    }
-
-    .@{pagination-prefix-cls}-item-link {
-      color: @disabled-color;
-      background: @disabled-bg;
-      border-color: @border-color-base;
-      cursor: not-allowed;
-      .@{pagination-prefix-cls}-simple& {
-        background: transparent;
-      }
-    }
-
-    .@{pagination-prefix-cls}-item-link-icon {
-      opacity: 0;
-    }
-
-    .@{pagination-prefix-cls}-item-ellipsis {
-      opacity: 1;
-    }
-
-    .@{pagination-prefix-cls}-simple-pager {
-      color: @disabled-color;
-    }
-  }
-}
-
-@media only screen and (max-width: @screen-lg) {
-  .@{pagination-prefix-cls}-item {
-    &-after-jump-prev,
-    &-before-jump-next {
-      display: none;
-    }
-  }
-}
-
-@media only screen and (max-width: @screen-sm) {
-  .@{pagination-prefix-cls}-options {
-    display: none;
-  }
-}
-
-@import './rtl';

components/pagination/style/index.tsx

@@ -1,6 +1,683 @@
-import '../../style/index.less';
+import type { CSSObject } from '../../_util/cssinjs';
-import './index.less';
+import {
+  genBasicInputStyle,
+  genInputSmallStyle,
+  initInputToken,
+  type InputToken,
+} from '../../input/style';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genFocusOutline, genFocusStyle, resetComponent } from '../../_style';
 
-// style dependencies
+interface PaginationToken extends InputToken<FullToken<'Pagination'>> {
-// deps-lint-skip: grid
+  paginationItemSize: number;
-import '../../select/style';
+  paginationFontFamily: string;
+  paginationItemBg: string;
+  paginationItemBgActive: string;
+  paginationFontWeightActive: number;
+  paginationItemSizeSM: number;
+  paginationItemInputBg: string;
+  paginationMiniOptionsSizeChangerTop: number;
+  paginationItemDisabledBgActive: string;
+  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 => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-disabled`]: {
+      '&, &:hover': {
+        cursor: 'not-allowed',
+
+        [`${componentCls}-item-link`]: {
+          color: token.colorTextDisabled,
+          cursor: 'not-allowed',
+        },
+      },
+
+      '&:focus-visible': {
+        cursor: 'not-allowed',
+
+        [`${componentCls}-item-link`]: {
+          color: token.colorTextDisabled,
+          cursor: 'not-allowed',
+        },
+      },
+    },
+
+    [`&${componentCls}-disabled`]: {
+      cursor: 'not-allowed',
+
+      [`${componentCls}-item`]: {
+        cursor: 'not-allowed',
+
+        '&:hover, &:active': {
+          backgroundColor: 'transparent',
+        },
+
+        a: {
+          color: token.colorTextDisabled,
+          backgroundColor: 'transparent',
+          border: 'none',
+          cursor: 'not-allowed',
+        },
+
+        '&-active': {
+          borderColor: token.colorBorder,
+          backgroundColor: token.paginationItemDisabledBgActive,
+
+          '&:hover, &:active': {
+            backgroundColor: token.paginationItemDisabledBgActive,
+          },
+
+          a: {
+            color: token.paginationItemDisabledColorActive,
+          },
+        },
+      },
+
+      [`${componentCls}-item-link`]: {
+        color: token.colorTextDisabled,
+        cursor: 'not-allowed',
+
+        '&:hover, &:active': {
+          backgroundColor: 'transparent',
+        },
+
+        [`${componentCls}-simple&`]: {
+          backgroundColor: 'transparent',
+        },
+      },
+
+      [`${componentCls}-item-link-icon`]: {
+        opacity: 0,
+      },
+
+      [`${componentCls}-item-ellipsis`]: {
+        opacity: 1,
+      },
+
+      [`${componentCls}-simple-pager`]: {
+        color: token.colorTextDisabled,
+      },
+    },
+  };
+};
+
+const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
+  const { componentCls } = token;
+
+  return {
+    [`&${componentCls}-mini ${componentCls}-total-text, &${componentCls}-mini ${componentCls}-simple-pager`]:
+      {
+        height: token.paginationItemSizeSM,
+        lineHeight: `${token.paginationItemSizeSM}px`,
+      },
+
+    [`&${componentCls}-mini ${componentCls}-item`]: {
+      minWidth: token.paginationItemSizeSM,
+      height: token.paginationItemSizeSM,
+      margin: 0,
+      lineHeight: `${token.paginationItemSizeSM - 2}px`,
+    },
+
+    [`&${componentCls}-mini ${componentCls}-item:not(${componentCls}-item-active)`]: {
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+    },
+
+    [`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: {
+      minWidth: token.paginationItemSizeSM,
+      height: token.paginationItemSizeSM,
+      margin: 0,
+      lineHeight: `${token.paginationItemSizeSM}px`,
+    },
+
+    [`
+    &${componentCls}-mini ${componentCls}-prev ${componentCls}-item-link,
+    &${componentCls}-mini ${componentCls}-next ${componentCls}-item-link
+    `]: {
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+
+      '&::after': {
+        height: token.paginationItemSizeSM,
+        lineHeight: `${token.paginationItemSizeSM}px`,
+      },
+    },
+
+    [`&${componentCls}-mini ${componentCls}-jump-prev, &${componentCls}-mini ${componentCls}-jump-next`]:
+      {
+        height: token.paginationItemSizeSM,
+        marginInlineEnd: 0,
+        lineHeight: `${token.paginationItemSizeSM}px`,
+      },
+
+    [`&${componentCls}-mini ${componentCls}-options`]: {
+      marginInlineStart: token.paginationMiniOptionsMarginInlineStart,
+
+      [`&-size-changer`]: {
+        top: token.paginationMiniOptionsSizeChangerTop,
+      },
+
+      [`&-quick-jumper`]: {
+        height: token.paginationItemSizeSM,
+        lineHeight: `${token.paginationItemSizeSM}px`,
+
+        input: {
+          ...genInputSmallStyle(token),
+
+          width: token.paginationMiniQuickJumperInputWidth,
+          height: token.controlHeightSM,
+        },
+      },
+    },
+  };
+};
+
+const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
+  const { componentCls } = token;
+
+  return {
+    [`
+    &${componentCls}-simple ${componentCls}-prev,
+    &${componentCls}-simple ${componentCls}-next
+    `]: {
+      height: token.paginationItemSizeSM,
+      lineHeight: `${token.paginationItemSizeSM}px`,
+      verticalAlign: 'top',
+      [`${componentCls}-item-link`]: {
+        height: token.paginationItemSizeSM,
+        backgroundColor: 'transparent',
+        border: 0,
+
+        '&::after': {
+          height: token.paginationItemSizeSM,
+          lineHeight: `${token.paginationItemSizeSM}px`,
+        },
+      },
+    },
+
+    [`&${componentCls}-simple ${componentCls}-simple-pager`]: {
+      display: 'inline-block',
+      height: token.paginationItemSizeSM,
+      marginInlineEnd: token.marginXS,
+
+      input: {
+        boxSizing: 'border-box',
+        height: '100%',
+        marginInlineEnd: token.marginXS,
+        padding: `0 ${token.paginationItemPaddingInline}px`,
+        textAlign: 'center',
+        backgroundColor: token.paginationItemInputBg,
+        border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
+        borderRadius: token.borderRadius,
+        outline: 'none',
+        transition: `border-color ${token.motionDurationMid}`,
+        color: 'inherit',
+
+        '&:hover': {
+          borderColor: token.colorPrimary,
+        },
+
+        '&:focus': {
+          borderColor: token.colorPrimaryHover,
+          boxShadow: `${token.inputOutlineOffset}px 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
+        },
+
+        '&[disabled]': {
+          color: token.colorTextDisabled,
+          backgroundColor: token.colorBgContainerDisabled,
+          borderColor: token.colorBorder,
+          cursor: 'not-allowed',
+        },
+      },
+    },
+  };
+};
+
+const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
+      outline: 0,
+
+      [`${componentCls}-item-container`]: {
+        position: 'relative',
+
+        [`${componentCls}-item-link-icon`]: {
+          color: token.colorPrimary,
+          fontSize: token.fontSizeSM,
+          opacity: 0,
+          transition: `all ${token.motionDurationMid}`,
+
+          '&-svg': {
+            top: 0,
+            insetInlineEnd: 0,
+            bottom: 0,
+            insetInlineStart: 0,
+            margin: 'auto',
+          },
+        },
+
+        [`${componentCls}-item-ellipsis`]: {
+          position: 'absolute',
+          top: 0,
+          insetInlineEnd: 0,
+          bottom: 0,
+          insetInlineStart: 0,
+          display: 'block',
+          margin: 'auto',
+          color: token.colorTextDisabled,
+          fontFamily: 'Arial, Helvetica, sans-serif',
+          letterSpacing: token.paginationEllipsisLetterSpacing,
+          textAlign: 'center',
+          textIndent: token.paginationEllipsisTextIndent,
+          opacity: 1,
+          transition: `all ${token.motionDurationMid}`,
+        },
+      },
+
+      '&:hover': {
+        [`${componentCls}-item-link-icon`]: {
+          opacity: 1,
+        },
+        [`${componentCls}-item-ellipsis`]: {
+          opacity: 0,
+        },
+      },
+
+      '&:focus-visible': {
+        [`${componentCls}-item-link-icon`]: {
+          opacity: 1,
+        },
+        [`${componentCls}-item-ellipsis`]: {
+          opacity: 0,
+        },
+        ...genFocusOutline(token),
+      },
+    },
+
+    [`
+    ${componentCls}-prev,
+    ${componentCls}-jump-prev,
+    ${componentCls}-jump-next
+    `]: {
+      marginInlineEnd: token.marginXS,
+    },
+
+    [`
+    ${componentCls}-prev,
+    ${componentCls}-next,
+    ${componentCls}-jump-prev,
+    ${componentCls}-jump-next
+    `]: {
+      display: 'inline-block',
+      minWidth: token.paginationItemSize,
+      height: token.paginationItemSize,
+      color: token.colorText,
+      fontFamily: token.paginationFontFamily,
+      lineHeight: `${token.paginationItemSize}px`,
+      textAlign: 'center',
+      verticalAlign: 'middle',
+      listStyle: 'none',
+      borderRadius: token.borderRadius,
+      cursor: 'pointer',
+      transition: `all ${token.motionDurationMid}`,
+    },
+
+    [`${componentCls}-prev, ${componentCls}-next`]: {
+      fontFamily: 'Arial, Helvetica, sans-serif',
+      outline: 0,
+
+      button: {
+        color: token.colorText,
+        cursor: 'pointer',
+        userSelect: 'none',
+      },
+
+      [`${componentCls}-item-link`]: {
+        display: 'block',
+        width: '100%',
+        height: '100%',
+        padding: 0,
+        fontSize: token.fontSizeSM,
+        textAlign: 'center',
+        backgroundColor: 'transparent',
+        border: `${token.lineWidth}px ${token.lineType} transparent`,
+        borderRadius: token.borderRadius,
+        outline: 'none',
+        transition: `border ${token.motionDurationMid}`,
+      },
+
+      [`&:focus-visible ${componentCls}-item-link`]: {
+        ...genFocusOutline(token),
+      },
+
+      [`&:hover ${componentCls}-item-link`]: {
+        backgroundColor: token.colorBgTextHover,
+      },
+
+      [`&:active ${componentCls}-item-link`]: {
+        backgroundColor: token.colorBgTextActive,
+      },
+
+      [`&${componentCls}-disabled:hover`]: {
+        [`${componentCls}-item-link`]: {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+
+    [`${componentCls}-slash`]: {
+      marginInlineEnd: token.paginationSlashMarginInlineEnd,
+      marginInlineStart: token.paginationSlashMarginInlineStart,
+    },
+
+    [`${componentCls}-options`]: {
+      display: 'inline-block',
+      marginInlineStart: token.margin,
+      verticalAlign: 'middle',
+
+      '&-size-changer.-select': {
+        display: 'inline-block',
+        width: 'auto',
+      },
+
+      '&-quick-jumper': {
+        display: 'inline-block',
+        height: token.controlHeight,
+        marginInlineStart: token.marginXS,
+        lineHeight: `${token.controlHeight}px`,
+        verticalAlign: 'top',
+
+        input: {
+          ...genBasicInputStyle(token),
+
+          width: token.controlHeightLG * 1.25,
+          height: token.controlHeight,
+          boxSizing: 'border-box',
+          margin: 0,
+          marginInlineStart: token.marginXS,
+          marginInlineEnd: token.marginXS,
+        },
+      },
+    },
+  };
+};
+
+const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-item`]: {
+      display: 'inline-block',
+      minWidth: token.paginationItemSize,
+      height: token.paginationItemSize,
+      marginInlineEnd: token.marginXS,
+      fontFamily: token.paginationFontFamily,
+      lineHeight: `${token.paginationItemSize - 2}px`,
+      textAlign: 'center',
+      verticalAlign: 'middle',
+      listStyle: 'none',
+      backgroundColor: 'transparent',
+      border: `${token.lineWidth}px ${token.lineType} transparent`,
+      borderRadius: token.borderRadius,
+      outline: 0,
+      cursor: 'pointer',
+      userSelect: 'none',
+
+      a: {
+        display: 'block',
+        padding: `0 ${token.paginationItemPaddingInline}px`,
+        color: token.colorText,
+        transition: 'none',
+
+        '&:hover': {
+          textDecoration: 'none',
+        },
+      },
+
+      [`&:not(${componentCls}-item-active)`]: {
+        '&:hover': {
+          transition: `all ${token.motionDurationMid}`,
+          backgroundColor: token.colorBgTextHover,
+        },
+
+        '&:active': {
+          backgroundColor: token.colorBgTextActive,
+        },
+      },
+
+      // cannot merge with `&:hover`
+      // see https://github.com/ant-design/ant-design/pull/34002
+      ...genFocusStyle(token),
+
+      '&-active': {
+        fontWeight: token.paginationFontWeightActive,
+        backgroundColor: token.paginationItemBgActive,
+        borderColor: token.colorPrimary,
+
+        a: {
+          color: token.colorPrimary,
+        },
+
+        '&:hover': {
+          borderColor: token.colorPrimaryHover,
+        },
+
+        '&:hover a': {
+          color: token.colorPrimaryHover,
+        },
+      },
+    },
+  };
+};
+
+const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
+  const { componentCls } = token;
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+
+      'ul, ol': {
+        margin: 0,
+        padding: 0,
+        listStyle: 'none',
+      },
+
+      '&::after': {
+        display: 'block',
+        clear: 'both',
+        height: 0,
+        overflow: 'hidden',
+        visibility: 'hidden',
+        content: '""',
+      },
+
+      [`${componentCls}-total-text`]: {
+        display: 'inline-block',
+        height: token.paginationItemSize,
+        marginInlineEnd: token.marginXS,
+        lineHeight: `${token.paginationItemSize - 2}px`,
+        verticalAlign: 'middle',
+      },
+
+      // item style
+      ...genPaginationItemStyle(token),
+
+      // jump btn style
+      ...genPaginationJumpStyle(token),
+
+      // simple style
+      ...genPaginationSimpleStyle(token),
+
+      // mini style
+      ...genPaginationMiniStyle(token),
+
+      // disabled style
+      ...genPaginationDisabledStyle(token),
+
+      // media query style
+      [`@media only screen and (max-width: ${token.screenLG}px)`]: {
+        [`${componentCls}-item`]: {
+          '&-after-jump-prev, &-before-jump-next': {
+            display: 'none',
+          },
+        },
+      },
+
+      [`@media only screen and (max-width: ${token.screenSM}px)`]: {
+        [`${componentCls}-options`]: {
+          display: 'none',
+        },
+      },
+    },
+
+    // rtl style
+    [`&${token.componentCls}-rtl`]: {
+      direction: 'rtl',
+    },
+  };
+};
+
+const genBorderedStyle: GenerateStyle<PaginationToken> = token => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}${componentCls}-disabled`]: {
+      '&, &:hover': {
+        [`${componentCls}-item-link`]: {
+          borderColor: token.colorBorder,
+        },
+      },
+
+      '&:focus-visible': {
+        [`${componentCls}-item-link`]: {
+          borderColor: token.colorBorder,
+        },
+      },
+
+      [`${componentCls}-item, ${componentCls}-item-link`]: {
+        backgroundColor: token.colorBgContainerDisabled,
+        borderColor: token.colorBorder,
+
+        [`&:hover:not(${componentCls}-item-active)`]: {
+          backgroundColor: token.colorBgContainerDisabled,
+          borderColor: token.colorBorder,
+
+          a: {
+            color: token.colorTextDisabled,
+          },
+        },
+
+        [`&${componentCls}-item-active`]: {
+          backgroundColor: token.paginationItemDisabledBgActive,
+        },
+      },
+
+      [`${componentCls}-prev, ${componentCls}-next`]: {
+        '&:hover button': {
+          backgroundColor: token.colorBgContainerDisabled,
+          borderColor: token.colorBorder,
+          color: token.colorTextDisabled,
+        },
+
+        [`${componentCls}-item-link`]: {
+          backgroundColor: token.colorBgContainerDisabled,
+          borderColor: token.colorBorder,
+        },
+      },
+    },
+
+    [componentCls]: {
+      [`${componentCls}-prev, ${componentCls}-next`]: {
+        '&:hover button': {
+          borderColor: token.colorPrimaryHover,
+          backgroundColor: token.paginationItemBg,
+        },
+
+        [`${componentCls}-item-link`]: {
+          backgroundColor: token.paginationItemLinkBg,
+          borderColor: token.colorBorder,
+        },
+
+        [`&:hover ${componentCls}-item-link`]: {
+          borderColor: token.colorPrimary,
+          backgroundColor: token.paginationItemBg,
+          color: token.colorPrimary,
+        },
+
+        [`&${componentCls}-disabled`]: {
+          [`${componentCls}-item-link`]: {
+            borderColor: token.colorBorder,
+            color: token.colorTextDisabled,
+          },
+        },
+      },
+
+      [`${componentCls}-item`]: {
+        backgroundColor: token.paginationItemBg,
+        border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
+
+        [`&:hover:not(${componentCls}-item-active)`]: {
+          borderColor: token.colorPrimary,
+          backgroundColor: token.paginationItemBg,
+
+          a: {
+            color: token.colorPrimary,
+          },
+        },
+
+        '&-active': {
+          borderColor: token.colorPrimary,
+        },
+      },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Pagination', token => {
+  const paginationToken = mergeToken<PaginationToken>(
+    token,
+    {
+      paginationItemSize: token.controlHeight,
+      paginationFontFamily: token.fontFamily,
+      paginationItemBg: token.colorBgContainer,
+      paginationItemBgActive: token.colorBgContainer,
+      paginationFontWeightActive: token.fontWeightStrong,
+      paginationItemSizeSM: token.controlHeightSM,
+      paginationItemInputBg: token.colorBgContainer,
+      paginationMiniOptionsSizeChangerTop: 0,
+      paginationItemDisabledBgActive: token.controlItemBgActiveDisabled,
+      paginationItemDisabledColorActive: token.colorTextDisabled,
+      paginationItemLinkBg: token.colorBgContainer,
+      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),
+  );
+  return [
+    genPaginationStyle(paginationToken),
+    token.wireframe && genBorderedStyle(paginationToken),
+  ];
+});

components/pagination/style/rtl.less

@@ -1,55 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-@import '../../input/style/mixin';
-
-@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
-
-.@{pagination-prefix-cls}-rtl {
-  .@{pagination-prefix-cls}-total-text {
-    margin-right: 0;
-    margin-left: 8px;
-  }
-
-  .@{pagination-prefix-cls}-item,
-  .@{pagination-prefix-cls}-prev,
-  .@{pagination-prefix-cls}-jump-prev,
-  .@{pagination-prefix-cls}-jump-next {
-    margin-right: 0;
-    margin-left: 8px;
-  }
-
-  .@{pagination-prefix-cls}-slash {
-    margin: 0 5px 0 10px;
-  }
-
-  .@{pagination-prefix-cls}-options {
-    margin-right: 16px;
-    margin-left: 0;
-
-    .@{pagination-prefix-cls}-options-size-changer.@{ant-prefix}-select {
-      margin-right: 0;
-      margin-left: 8px;
-    }
-
-    .@{pagination-prefix-cls}-options-quick-jumper {
-      margin-left: 0;
-    }
-  }
-
-  &.@{pagination-prefix-cls}-simple {
-    .@{pagination-prefix-cls}-simple-pager {
-      margin-right: 0;
-      margin-left: 8px;
-
-      input {
-        margin-right: 0;
-        margin-left: 8px;
-      }
-    }
-  }
-
-  &.@{pagination-prefix-cls}.mini .@{pagination-prefix-cls}-options {
-    margin-right: 2px;
-    margin-left: 0;
-  }
-}

components/style.ts

@@ -4,7 +4,7 @@ import './radio/style';
 // import './checkbox/style';
 // import './grid/style';
 // import './tag/style';
-// import './rate/style';
+import './rate/style';
 import './pagination/style';
 // import './avatar/style';
 // import './badge/style';