feat: Pagination token (#42330)

* ✨ feat: Pagination Component Token

* ✨ feat: Pagination Component Token

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update demo

* ✨ feat: update style

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update demo

* ✨ feat: update

* ✨ feat: update snap

components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1166,6 +1166,661 @@ Array [
 ]
 `;
 
+exports[`renders components/pagination/demo/component-token.tsx extend context correctly 1`] = `
+Array [
+  <ul
+    class="ant-pagination"
+  >
+    <li
+      class="ant-pagination-total-text"
+    >
+      Total 500 items
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-prev"
+      tabindex="0"
+      title="Previous Page"
+    >
+      <a>
+        Previous
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-1"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
+      title="2"
+    >
+      <a
+        rel="nofollow"
+      >
+        2
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active"
+      tabindex="0"
+      title="3"
+    >
+      <a
+        rel="nofollow"
+      >
+        3
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
+      title="4"
+    >
+      <a
+        rel="nofollow"
+      >
+        4
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
+      tabindex="0"
+      title="5"
+    >
+      <a
+        rel="nofollow"
+      >
+        5
+      </a>
+    </li>
+    <li
+      class="ant-pagination-jump-next ant-pagination-jump-next-custom-icon"
+      tabindex="0"
+      title="Next 5 Pages"
+    >
+      <a
+        class="ant-pagination-item-link"
+      >
+        <div
+          class="ant-pagination-item-container"
+        >
+          <span
+            aria-label="double-right"
+            class="anticon anticon-double-right ant-pagination-item-link-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="double-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-pagination-item-ellipsis"
+          >
+            •••
+          </span>
+        </div>
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-50"
+      tabindex="0"
+      title="50"
+    >
+      <a
+        rel="nofollow"
+      >
+        50
+      </a>
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <a>
+        Next
+      </a>
+    </li>
+    <li
+      class="ant-pagination-options"
+    >
+      <div
+        aria-label="Page Size"
+        class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="Page Size"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              role="combobox"
+              type="search"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="10 / page"
+          >
+            10 / page
+          </span>
+        </div>
+        <div
+          class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <div>
+            <div
+              class="rc-virtual-list"
+              style="position: relative;"
+            >
+              <div
+                class="rc-virtual-list-holder"
+                style="max-height: 256px; overflow-y: auto;"
+              >
+                <div>
+                  <div
+                    class="rc-virtual-list-holder-inner"
+                    id="rc_select_TEST_OR_SSR_list"
+                    role="listbox"
+                    style="display: flex; flex-direction: column;"
+                  >
+                    <div
+                      aria-selected="true"
+                      class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                      id="rc_select_TEST_OR_SSR_list_0"
+                      role="option"
+                      title="10 / page"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        10 / page
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      id="rc_select_TEST_OR_SSR_list_1"
+                      role="option"
+                      title="20 / page"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        20 / page
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      id="rc_select_TEST_OR_SSR_list_2"
+                      role="option"
+                      title="50 / page"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        50 / page
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      id="rc_select_TEST_OR_SSR_list_3"
+                      role="option"
+                      title="100 / page"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        100 / page
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select: none;"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-pagination-options-quick-jumper"
+      >
+        Go to
+        <input
+          aria-label="Page"
+          type="text"
+          value=""
+        />
+        Page
+      </div>
+    </li>
+  </ul>,
+  <br />,
+  <ul
+    class="ant-pagination ant-pagination-disabled"
+  >
+    <li
+      aria-disabled="false"
+      class="ant-pagination-prev"
+      tabindex="0"
+      title="Previous Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-1"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
+      title="2"
+    >
+      <a
+        rel="nofollow"
+      >
+        2
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active"
+      tabindex="0"
+      title="3"
+    >
+      <a
+        rel="nofollow"
+      >
+        3
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
+      title="4"
+    >
+      <a
+        rel="nofollow"
+      >
+        4
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
+      tabindex="0"
+      title="5"
+    >
+      <a
+        rel="nofollow"
+      >
+        5
+      </a>
+    </li>
+    <li
+      class="ant-pagination-jump-next ant-pagination-jump-next-custom-icon"
+      tabindex="0"
+      title="Next 5 Pages"
+    >
+      <a
+        class="ant-pagination-item-link"
+      >
+        <div
+          class="ant-pagination-item-container"
+        >
+          <span
+            aria-label="double-right"
+            class="anticon anticon-double-right ant-pagination-item-link-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="double-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-pagination-item-ellipsis"
+          >
+            •••
+          </span>
+        </div>
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-50"
+      tabindex="0"
+      title="50"
+    >
+      <a
+        rel="nofollow"
+      >
+        50
+      </a>
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-options"
+    >
+      <div
+        aria-label="Page Size"
+        class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="Page Size"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              disabled=""
+              id="rc_select_TEST_OR_SSR"
+              role="combobox"
+              type="search"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="10 / page"
+          >
+            10 / page
+          </span>
+        </div>
+        <div
+          class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <div>
+            <div
+              class="rc-virtual-list"
+              style="position: relative;"
+            >
+              <div
+                class="rc-virtual-list-holder"
+                style="max-height: 256px; overflow-y: auto;"
+              >
+                <div>
+                  <div
+                    class="rc-virtual-list-holder-inner"
+                    id="rc_select_TEST_OR_SSR_list"
+                    role="listbox"
+                    style="display: flex; flex-direction: column;"
+                  >
+                    <div
+                      aria-selected="true"
+                      class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                      id="rc_select_TEST_OR_SSR_list_0"
+                      role="option"
+                      title="10 / page"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        10 / page
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      id="rc_select_TEST_OR_SSR_list_1"
+                      role="option"
+                      title="20 / page"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        20 / page
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      id="rc_select_TEST_OR_SSR_list_2"
+                      role="option"
+                      title="50 / page"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        50 / page
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      id="rc_select_TEST_OR_SSR_list_3"
+                      role="option"
+                      title="100 / page"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        100 / page
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select: none;"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </li>
+  </ul>,
+]
+`;
+
 exports[`renders components/pagination/demo/controlled.tsx extend context correctly 1`] = `
 <ul
   class="ant-pagination"

components/pagination/__tests__/__snapshots__/demo.test.ts.snap

@@ -857,6 +857,455 @@ Array [
 ]
 `;
 
+exports[`renders components/pagination/demo/component-token.tsx correctly 1`] = `
+Array [
+  <ul
+    class="ant-pagination"
+  >
+    <li
+      class="ant-pagination-total-text"
+    >
+      Total 500 items
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-prev"
+      tabindex="0"
+      title="Previous Page"
+    >
+      <a>
+        Previous
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-1"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
+      title="2"
+    >
+      <a
+        rel="nofollow"
+      >
+        2
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active"
+      tabindex="0"
+      title="3"
+    >
+      <a
+        rel="nofollow"
+      >
+        3
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
+      title="4"
+    >
+      <a
+        rel="nofollow"
+      >
+        4
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
+      tabindex="0"
+      title="5"
+    >
+      <a
+        rel="nofollow"
+      >
+        5
+      </a>
+    </li>
+    <li
+      class="ant-pagination-jump-next ant-pagination-jump-next-custom-icon"
+      tabindex="0"
+      title="Next 5 Pages"
+    >
+      <a
+        class="ant-pagination-item-link"
+      >
+        <div
+          class="ant-pagination-item-container"
+        >
+          <span
+            aria-label="double-right"
+            class="anticon anticon-double-right ant-pagination-item-link-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="double-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-pagination-item-ellipsis"
+          >
+            •••
+          </span>
+        </div>
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-50"
+      tabindex="0"
+      title="50"
+    >
+      <a
+        rel="nofollow"
+      >
+        50
+      </a>
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <a>
+        Next
+      </a>
+    </li>
+    <li
+      class="ant-pagination-options"
+    >
+      <div
+        aria-label="Page Size"
+        class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-show-search"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="undefined_list_0"
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="Page Size"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              role="combobox"
+              type="search"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="10 / page"
+          >
+            10 / page
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-pagination-options-quick-jumper"
+      >
+        Go to
+        <input
+          aria-label="Page"
+          type="text"
+          value=""
+        />
+        Page
+      </div>
+    </li>
+  </ul>,
+  <br />,
+  <ul
+    class="ant-pagination ant-pagination-disabled"
+  >
+    <li
+      aria-disabled="false"
+      class="ant-pagination-prev"
+      tabindex="0"
+      title="Previous Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-1"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
+      title="2"
+    >
+      <a
+        rel="nofollow"
+      >
+        2
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active"
+      tabindex="0"
+      title="3"
+    >
+      <a
+        rel="nofollow"
+      >
+        3
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
+      title="4"
+    >
+      <a
+        rel="nofollow"
+      >
+        4
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
+      tabindex="0"
+      title="5"
+    >
+      <a
+        rel="nofollow"
+      >
+        5
+      </a>
+    </li>
+    <li
+      class="ant-pagination-jump-next ant-pagination-jump-next-custom-icon"
+      tabindex="0"
+      title="Next 5 Pages"
+    >
+      <a
+        class="ant-pagination-item-link"
+      >
+        <div
+          class="ant-pagination-item-container"
+        >
+          <span
+            aria-label="double-right"
+            class="anticon anticon-double-right ant-pagination-item-link-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="double-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-pagination-item-ellipsis"
+          >
+            •••
+          </span>
+        </div>
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-50"
+      tabindex="0"
+      title="50"
+    >
+      <a
+        rel="nofollow"
+      >
+        50
+      </a>
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-options"
+    >
+      <div
+        aria-label="Page Size"
+        class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled ant-select-show-search"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="undefined_list_0"
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="Page Size"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              disabled=""
+              role="combobox"
+              type="search"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="10 / page"
+          >
+            10 / page
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </li>
+  </ul>,
+]
+`;
+
 exports[`renders components/pagination/demo/controlled.tsx correctly 1`] = `
 <ul
   class="ant-pagination"

components/pagination/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.

components/pagination/demo/component-token.tsx

@@ -0,0 +1,44 @@
+import type { PaginationProps } from 'antd';
+import { ConfigProvider, Pagination } from 'antd';
+import React from 'react';
+
+const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
+  if (type === 'prev') {
+    return <a>Previous</a>;
+  }
+  if (type === 'next') {
+    return <a>Next</a>;
+  }
+  return originalElement;
+};
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Pagination: {
+          itemSize: 20,
+          itemSizeSM: 12,
+          itemActiveBg: '#e7cc87',
+          itemLinkBg: '#344324',
+          itemActiveBgDisabled: '#9c1515',
+          itemInputBg: '#9c1515',
+          miniOptionsSizeChangerTop: 0,
+          itemBg: '#333',
+        },
+      },
+    }}
+  >
+    <Pagination
+      showSizeChanger
+      defaultCurrent={3}
+      total={500}
+      itemRender={itemRender}
+      showQuickJumper
+      showTotal={(total) => `Total ${total} items`}
+    />
+    <br />
+    <Pagination showSizeChanger defaultCurrent={3} total={500} disabled />
+  </ConfigProvider>
+);
+
+export default App;

components/pagination/index.en-US.md

@@ -27,6 +27,7 @@ A long list can be divided into several pages using `Pagination`, and only one p
 <code src="./demo/all.tsx">Show All</code>
 <code src="./demo/itemRender.tsx">Prev and next</code>
 <code src="./demo/wireframe.tsx" debug>Wireframe</code>
+<code src="./demo/component-token.tsx" debug>component Token</code>
 
 ## API
 

components/pagination/index.zh-CN.md

@@ -28,6 +28,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA
 <code src="./demo/all.tsx">全部展示</code>
 <code src="./demo/itemRender.tsx">上一步和下一步</code>
 <code src="./demo/wireframe.tsx" debug>线框风格</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 

components/pagination/style/index.ts

@@ -9,19 +9,20 @@ import { genFocusOutline, genFocusStyle, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
+export interface ComponentToken {
+  itemBg: string;
+  itemSize: number;
+  itemActiveBg: string;
+  itemSizeSM: number;
+  itemLinkBg: string;
+  itemActiveBgDisabled: string;
+  itemActiveColorDisabled: string;
+  itemInputBg: string;
+  miniOptionsSizeChangerTop: number;
+}
+
 interface PaginationToken extends InputToken<FullToken<'Pagination'>> {
-  paginationItemSize: number;
-  paginationFontFamily: string;
-  paginationItemBg: string;
-  paginationItemBgActive: string;
-  paginationFontWeightActive: number;
-  paginationItemSizeSM: number;
-  paginationItemInputBg: string;
-  paginationMiniOptionsSizeChangerTop: number;
-  paginationItemDisabledBgActive: string;
-  paginationItemDisabledColorActive: string;
-  paginationItemLinkBg: string;
-  inputOutlineOffset: string;
+  inputOutlineOffset: number;
   paginationMiniOptionsMarginInlineStart: number;
   paginationMiniQuickJumperInputWidth: number;
   paginationItemPaddingInline: number;
@@ -83,14 +84,14 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = (t
 
         '&-active': {
           borderColor: token.colorBorder,
-          backgroundColor: token.paginationItemDisabledBgActive,
+          backgroundColor: token.itemActiveBgDisabled,
 
           '&:hover, &:active': {
-            backgroundColor: token.paginationItemDisabledBgActive,
+            backgroundColor: token.itemActiveBgDisabled,
           },
 
           a: {
-            color: token.paginationItemDisabledColorActive,
+            color: token.itemActiveColorDisabled,
           },
         },
       },
@@ -141,15 +142,15 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
   return {
     [`&${componentCls}-mini ${componentCls}-total-text, &${componentCls}-mini ${componentCls}-simple-pager`]:
       {
-        height: token.paginationItemSizeSM,
-        lineHeight: `${token.paginationItemSizeSM}px`,
+        height: token.itemSizeSM,
+        lineHeight: `${token.itemSizeSM}px`,
       },
 
     [`&${componentCls}-mini ${componentCls}-item`]: {
-      minWidth: token.paginationItemSizeSM,
-      height: token.paginationItemSizeSM,
+      minWidth: token.itemSizeSM,
+      height: token.itemSizeSM,
       margin: 0,
-      lineHeight: `${token.paginationItemSizeSM - 2}px`,
+      lineHeight: `${token.itemSizeSM - 2}px`,
     },
 
     [`&${componentCls}-mini ${componentCls}-item:not(${componentCls}-item-active)`]: {
@@ -164,10 +165,10 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
     },
 
     [`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: {
-      minWidth: token.paginationItemSizeSM,
-      height: token.paginationItemSizeSM,
+      minWidth: token.itemSizeSM,
+      height: token.itemSizeSM,
       margin: 0,
-      lineHeight: `${token.paginationItemSizeSM}px`,
+      lineHeight: `${token.itemSizeSM}px`,
       [`&:hover ${componentCls}-item-link`]: {
         backgroundColor: token.colorBgTextHover,
       },
@@ -187,28 +188,28 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
       borderColor: 'transparent',
 
       '&::after': {
-        height: token.paginationItemSizeSM,
-        lineHeight: `${token.paginationItemSizeSM}px`,
+        height: token.itemSizeSM,
+        lineHeight: `${token.itemSizeSM}px`,
       },
     },
 
     [`&${componentCls}-mini ${componentCls}-jump-prev, &${componentCls}-mini ${componentCls}-jump-next`]:
       {
-        height: token.paginationItemSizeSM,
+        height: token.itemSizeSM,
         marginInlineEnd: 0,
-        lineHeight: `${token.paginationItemSizeSM}px`,
+        lineHeight: `${token.itemSizeSM}px`,
       },
 
     [`&${componentCls}-mini ${componentCls}-options`]: {
       marginInlineStart: token.paginationMiniOptionsMarginInlineStart,
 
       [`&-size-changer`]: {
-        top: token.paginationMiniOptionsSizeChangerTop,
+        top: token.miniOptionsSizeChangerTop,
       },
 
       [`&-quick-jumper`]: {
-        height: token.paginationItemSizeSM,
-        lineHeight: `${token.paginationItemSizeSM}px`,
+        height: token.itemSizeSM,
+        lineHeight: `${token.itemSizeSM}px`,
 
         input: {
           ...genInputSmallStyle(token),
@@ -229,11 +230,11 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
     &${componentCls}-simple ${componentCls}-prev,
     &${componentCls}-simple ${componentCls}-next
     `]: {
-      height: token.paginationItemSizeSM,
-      lineHeight: `${token.paginationItemSizeSM}px`,
+      height: token.itemSizeSM,
+      lineHeight: `${token.itemSizeSM}px`,
       verticalAlign: 'top',
       [`${componentCls}-item-link`]: {
-        height: token.paginationItemSizeSM,
+        height: token.itemSizeSM,
         backgroundColor: 'transparent',
         border: 0,
         '&:hover': {
@@ -243,15 +244,15 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
           backgroundColor: token.colorBgTextActive,
         },
         '&::after': {
-          height: token.paginationItemSizeSM,
-          lineHeight: `${token.paginationItemSizeSM}px`,
+          height: token.itemSizeSM,
+          lineHeight: `${token.itemSizeSM}px`,
         },
       },
     },
 
     [`&${componentCls}-simple ${componentCls}-simple-pager`]: {
       display: 'inline-block',
-      height: token.paginationItemSizeSM,
+      height: token.itemSizeSM,
       marginInlineEnd: token.marginXS,
 
       input: {
@@ -260,7 +261,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
         marginInlineEnd: token.marginXS,
         padding: `0 ${token.paginationItemPaddingInline}px`,
         textAlign: 'center',
-        backgroundColor: token.paginationItemInputBg,
+        backgroundColor: token.itemInputBg,
         border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
         borderRadius: token.borderRadius,
         outline: 'none',
@@ -365,11 +366,11 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
     ${componentCls}-jump-next
     `]: {
       display: 'inline-block',
-      minWidth: token.paginationItemSize,
-      height: token.paginationItemSize,
+      minWidth: token.itemSize,
+      height: token.itemSize,
       color: token.colorText,
-      fontFamily: token.paginationFontFamily,
-      lineHeight: `${token.paginationItemSize}px`,
+      fontFamily: token.fontFamily,
+      lineHeight: `${token.itemSize}px`,
       textAlign: 'center',
       verticalAlign: 'middle',
       listStyle: 'none',
@@ -464,11 +465,11 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = (token
   return {
     [`${componentCls}-item`]: {
       display: 'inline-block',
-      minWidth: token.paginationItemSize,
-      height: token.paginationItemSize,
+      minWidth: token.itemSize,
+      height: token.itemSize,
       marginInlineEnd: token.marginXS,
-      fontFamily: token.paginationFontFamily,
-      lineHeight: `${token.paginationItemSize - 2}px`,
+      fontFamily: token.fontFamily,
+      lineHeight: `${token.itemSize - 2}px`,
       textAlign: 'center',
       verticalAlign: 'middle',
       listStyle: 'none',
@@ -506,8 +507,8 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = (token
       ...genFocusStyle(token),
 
       '&-active': {
-        fontWeight: token.paginationFontWeightActive,
-        backgroundColor: token.paginationItemBgActive,
+        fontWeight: token.fontWeightStrong,
+        backgroundColor: token.itemActiveBg,
         borderColor: token.colorPrimary,
 
         a: {
@@ -550,9 +551,9 @@ const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = (token) =>
 
       [`${componentCls}-total-text`]: {
         display: 'inline-block',
-        height: token.paginationItemSize,
+        height: token.itemSize,
         marginInlineEnd: token.marginXS,
-        lineHeight: `${token.paginationItemSize - 2}px`,
+        lineHeight: `${token.itemSize - 2}px`,
         verticalAlign: 'middle',
       },
 
@@ -625,7 +626,7 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
         },
 
         [`&${componentCls}-item-active`]: {
-          backgroundColor: token.paginationItemDisabledBgActive,
+          backgroundColor: token.itemActiveBgDisabled,
         },
       },
 
@@ -647,17 +648,17 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
       [`${componentCls}-prev, ${componentCls}-next`]: {
         '&:hover button': {
           borderColor: token.colorPrimaryHover,
-          backgroundColor: token.paginationItemBg,
+          backgroundColor: token.itemBg,
         },
 
         [`${componentCls}-item-link`]: {
-          backgroundColor: token.paginationItemLinkBg,
+          backgroundColor: token.itemLinkBg,
           borderColor: token.colorBorder,
         },
 
         [`&:hover ${componentCls}-item-link`]: {
           borderColor: token.colorPrimary,
-          backgroundColor: token.paginationItemBg,
+          backgroundColor: token.itemBg,
           color: token.colorPrimary,
         },
 
@@ -670,12 +671,12 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
       },
 
       [`${componentCls}-item`]: {
-        backgroundColor: token.paginationItemBg,
+        backgroundColor: token.itemBg,
         border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
 
         [`&:hover:not(${componentCls}-item-active)`]: {
           borderColor: token.colorPrimary,
-          backgroundColor: token.paginationItemBg,
+          backgroundColor: token.itemBg,
 
           a: {
             color: token.colorPrimary,
@@ -691,34 +692,37 @@ const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
 };
 
 // ============================== 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),
-  ];
-});
+export default genComponentStyleHook(
+  'Pagination',
+  (token) => {
+    const paginationToken = mergeToken<PaginationToken>(
+      token,
+      {
+        inputOutlineOffset: 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),
+    ];
+  },
+  (token) => ({
+    itemBg: token.colorBgContainer,
+    itemSize: token.controlHeight,
+    itemSizeSM: token.controlHeightSM,
+    itemActiveBg: token.colorBgContainer,
+    itemLinkBg: token.colorBgContainer,
+    itemActiveColorDisabled: token.colorTextDisabled,
+    itemActiveBgDisabled: token.controlItemBgActiveDisabled,
+    itemInputBg: token.colorBgContainer,
+    miniOptionsSizeChangerTop: 0,
+  }),
+);

components/theme/interface/components.ts

@@ -29,6 +29,7 @@ import type { ComponentToken as MenuComponentToken } from '../../menu/style';
 import type { ComponentToken as MessageComponentToken } from '../../message/style';
 import type { ComponentToken as ModalComponentToken } from '../../modal/style';
 import type { ComponentToken as NotificationComponentToken } from '../../notification/style';
+import type { ComponentToken as PaginationComponentToken } from '../../pagination/style';
 import type { ComponentToken as PopconfirmComponentToken } from '../../popconfirm/style';
 import type { ComponentToken as PopoverComponentToken } from '../../popover/style';
 import type { ComponentToken as ProgressComponentToken } from '../../progress/style';
@@ -85,7 +86,7 @@ export interface ComponentTokenMap {
   List?: ListComponentToken;
   Mentions?: MentionsComponentToken;
   Notification?: NotificationComponentToken;
-  Pagination?: {};
+  Pagination?: PaginationComponentToken;
   Popover?: PopoverComponentToken;
   Popconfirm?: PopconfirmComponentToken;
   Rate?: RateComponentToken;

docs/react/migrate-less-variables.en-US.md

@@ -203,7 +203,22 @@ This document contains the correspondence between all the less variables related
 
 <!-- ### Notification -->
 
-<!-- ### Pagination -->
+### Pagination
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@pagination-item-bg` | `itemBg` | - |
+| `@pagination-item-size` | `itemSize` | - |
+| `@pagination-item-size-sm` | `itemSizeSM` | - |
+| `@pagination-font-family` | `fontFamily` | GlobalToken |
+| `@pagination-font-weight-active` | `fontWeightStrong` | GlobalToken |
+| `@pagination-item-bg-active` | `itemActiveBg` | - |
+| `@pagination-item-link-bg` | `itemLinkBg` | - |
+| `@pagination-item-disabled-color-active` | `itemDisabledColorActive` | - |
+| `@pagination-item-disabled-bg-active` | `itemDisabledBgActive` | - |
+| `@pagination-item-input-bg` | `itemInputBg` | - |
+| `@pagination-mini-options-size-changer-top` | `miniOptionsSizeChangerTop` | - |
 
 ### Popover>
 

docs/react/migrate-less-variables.zh-CN.md

@@ -201,7 +201,22 @@ title: Less 变量迁移 Design Token
 
 <!-- ### Notification 通知提醒框 -->
 
-<!-- ### Pagination 分页 -->
+### Pagination 分页
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@pagination-item-bg` | `itemBg` | - |
+| `@pagination-item-size` | `itemSize` | - |
+| `@pagination-item-size-sm` | `itemSizeSM` | - |
+| `@pagination-font-family` | `fontFamily` | 全局 Token |
+| `@pagination-font-weight-active` | `fontWeightStrong` | 全局 Token |
+| `@pagination-item-bg-active` | `itemActiveBg` | - |
+| `@pagination-item-link-bg` | `itemLinkBg` | - |
+| `@pagination-item-disabled-color-active` | `itemActiveColorDisabled` | - |
+| `@pagination-item-disabled-bg-active` | `itemActiveBgDisabled` | - |
+| `@pagination-item-input-bg` | `itemInputBg` | - |
+| `@pagination-mini-options-size-changer-top` | `miniOptionsSizeChangerTop` | - |
 
 ### Popover 气泡卡片