feat: Progress Component Token (#42757)

* feat: Progress Component Token

* feat: add defaultColor&circleTextColor  update infoTextColor -> textColor

* chore: update

* chore: add comment

* chore: update snapshot

* chore: fix lint

* chore: rm ignore file

---------

Signed-off-by: MadCcc <1075746765@qq.com>
Co-authored-by: MadCcc <1075746765@qq.com>

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

@@ -643,6 +643,637 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct
 
 exports[`renders components/progress/demo/circle-mini.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/progress/demo/component-token.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-space ant-space-vertical"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-bottom: 8px;"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-outer"
+          style="width: 100%; height: 8px;"
+        >
+          <div
+            class="ant-progress-inner"
+          >
+            <div
+              class="ant-progress-bg"
+              style="width: 50%; height: 8px;"
+            />
+          </div>
+        </div>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-bottom: 8px;"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-outer"
+          style="width: 100%; height: 6px;"
+        >
+          <div
+            class="ant-progress-inner"
+          >
+            <div
+              class="ant-progress-bg"
+              style="width: 50%; height: 6px;"
+            />
+          </div>
+        </div>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-outer"
+          style="width: 300px; height: 20px;"
+        >
+          <div
+            class="ant-progress-inner"
+          >
+            <div
+              class="ant-progress-bg"
+              style="width: 50%; height: 20px;"
+            />
+          </div>
+        </div>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right: 30px;"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width: 120px; height: 120px; font-size: 24px;"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 30px;"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width: 60px; height: 60px; font-size: 15px;"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-inline-circle ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width: 20px; height: 20px; font-size: 9px;"
+        >
+          <span>
+            <svg
+              class="ant-progress-circle"
+              role="presentation"
+              viewBox="-50 -50 100 100"
+            >
+              <circle
+                class="ant-progress-circle-trail"
+                cx="0"
+                cy="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="1"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              />
+            </svg>
+          </span>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; bottom: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              >
+                <span
+                  class="ant-progress-text"
+                  title="50%"
+                >
+                  50%
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right: 30px;"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width: 120px; height: 120px; font-size: 24px;"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 30px;"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width: 60px; height: 60px; font-size: 15px;"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width: 20px; height: 20px; font-size: 9px;"
+        >
+          <span>
+            <svg
+              class="ant-progress-circle"
+              role="presentation"
+              viewBox="-50 -50 100 100"
+            >
+              <circle
+                class="ant-progress-circle-trail"
+                cx="0"
+                cy="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="1"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              />
+            </svg>
+          </span>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; bottom: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              >
+                <span
+                  class="ant-progress-text"
+                  title="50%"
+                >
+                  50%
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap: wrap; margin-bottom: -30px;"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right: 30px; padding-bottom: 30px;"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width: 14px; height: 8px;"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width: 14px; height: 8px;"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width: 14px; height: 8px;"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 30px; padding-bottom: 30px;"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width: 2px; height: 8px;"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width: 2px; height: 8px;"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width: 2px; height: 8px;"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 30px; padding-bottom: 30px;"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width: 20px; height: 20px;"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width: 20px; height: 20px;"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width: 20px; height: 20px;"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom: 30px;"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width: 20px; height: 30px;"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width: 20px; height: 30px;"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width: 20px; height: 30px;"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders components/progress/demo/component-token.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/progress/demo/dashboard.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"

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

@@ -611,6 +611,587 @@ exports[`renders components/progress/demo/circle-mini.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/progress/demo/component-token.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-space ant-space-vertical"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-bottom:8px"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-outer"
+          style="width:100%;height:8px"
+        >
+          <div
+            class="ant-progress-inner"
+          >
+            <div
+              class="ant-progress-bg"
+              style="width:50%;height:8px"
+            />
+          </div>
+        </div>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-bottom:8px"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-outer"
+          style="width:100%;height:6px"
+        >
+          <div
+            class="ant-progress-inner"
+          >
+            <div
+              class="ant-progress-bg"
+              style="width:50%;height:6px"
+            />
+          </div>
+        </div>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-outer"
+          style="width:300px;height:20px"
+        >
+          <div
+            class="ant-progress-inner"
+          >
+            <div
+              class="ant-progress-bg"
+              style="width:50%;height:20px"
+            />
+          </div>
+        </div>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:30px"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:120px;height:120px;font-size:24px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:30px"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:60px;height:60px;font-size:15px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-inline-circle ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:20px;height:20px;font-size:9px"
+        >
+          <span>
+            <svg
+              class="ant-progress-circle"
+              role="presentation"
+              viewBox="-50 -50 100 100"
+            >
+              <circle
+                class="ant-progress-circle-trail"
+                cx="0"
+                cy="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="1"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:30px"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:120px;height:120px;font-size:24px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:30px"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:60px;height:60px;font-size:15px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:20px;height:20px;font-size:9px"
+        >
+          <span>
+            <svg
+              class="ant-progress-circle"
+              role="presentation"
+              viewBox="-50 -50 100 100"
+            >
+              <circle
+                class="ant-progress-circle-trail"
+                cx="0"
+                cy="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="1"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap:wrap;margin-bottom:-30px"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:30px;padding-bottom:30px"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:14px;height:8px"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:14px;height:8px"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width:14px;height:8px"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:30px;padding-bottom:30px"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:2px;height:8px"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:2px;height:8px"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width:2px;height:8px"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:30px;padding-bottom:30px"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:20px;height:20px"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:20px;height:20px"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width:20px;height:20px"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom:30px"
+    >
+      <div
+        aria-valuenow="50"
+        class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:20px;height:30px"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:20px;height:30px"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width:20px;height:30px"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/progress/demo/dashboard.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"

components/progress/demo/component-token.md

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

components/progress/demo/component-token.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ConfigProvider, Progress, Space } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      token: {
+        marginXXS: 20,
+        fontSizeSM: 24,
+      },
+      components: {
+        Progress: {
+          defaultColor: '#bae0ff',
+          remainingColor: '#f5222d',
+          colorText: '#52c41a',
+          circleTextColor: '#52c41a',
+          lineBorderRadius: 50,
+        },
+      },
+    }}
+  >
+    <Space direction="vertical">
+      <Progress percent={50} />
+      <Progress percent={50} size="small" />
+      <Progress percent={50} size={[300, 20]} />
+    </Space>
+    <br />
+    <br />
+    <Space size={30}>
+      <Progress type="circle" percent={50} />
+      <Progress type="circle" percent={50} size="small" />
+      <Progress type="circle" percent={50} size={20} />
+    </Space>
+    <br />
+    <br />
+    <Space size={30}>
+      <Progress type="dashboard" percent={50} />
+      <Progress type="dashboard" percent={50} size="small" />
+      <Progress type="dashboard" percent={50} size={20} />
+    </Space>
+    <br />
+    <br />
+    <Space size={30} wrap>
+      <Progress steps={3} percent={50} />
+      <Progress steps={3} percent={50} size="small" />
+      <Progress steps={3} percent={50} size={20} />
+      <Progress steps={3} percent={50} size={[20, 30]} />
+    </Space>
+  </ConfigProvider>
+);
+
+export default App;

components/progress/style/index.tsx

@@ -4,13 +4,35 @@ import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
-export interface ComponentToken {}
+export interface ComponentToken {
+  /**
+   * @desc 进度条默认颜色
+   * @descEN Default color of progress bar
+   */
+  defaultColor: string;
+  /**
+   * @desc 进度条剩余部分颜色
+   * @descEN Color of remaining part of progress bar
+   */
+  remainingColor: string;
+  /**
+   * @desc 圆形进度条文字颜色
+   * @descEN Text color of circular progress bar
+   */
+  circleTextColor: string;
+  /**
+   * @desc 条状进度条圆角
+   * @descEN Border radius of line progress bar
+   */
+  lineBorderRadius: number;
+  /**
+   * @desc 圆形进度条文本大小
+   * @descEN Text size of circular progress bar
+   */
+  circleTextFontSize: string;
+}
 
 interface ProgressToken extends FullToken<'Progress'> {
-  progressLineRadius: number;
-  progressInfoTextColor: string;
-  progressRemainingColor: string;
-  progressDefaultColor: string;
   progressStepMinWidth: number;
   progressStepMarginInlineEnd: number;
   progressActiveMotionDuration: string;
@@ -73,20 +95,20 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
         width: '100%',
         overflow: 'hidden',
         verticalAlign: 'middle',
-        backgroundColor: token.progressRemainingColor,
-        borderRadius: token.progressLineRadius,
+        backgroundColor: token.remainingColor,
+        borderRadius: token.lineBorderRadius,
       },
 
       [`${progressCls}-inner:not(${progressCls}-circle-gradient)`]: {
         [`${progressCls}-circle-path`]: {
-          stroke: token.colorInfo,
+          stroke: token.defaultColor,
         },
       },
 
       [`${progressCls}-success-bg, ${progressCls}-bg`]: {
         position: 'relative',
-        backgroundColor: token.colorInfo,
-        borderRadius: token.progressLineRadius,
+        backgroundColor: token.defaultColor,
+        borderRadius: token.lineBorderRadius,
         transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
       },
 
@@ -101,7 +123,7 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
         display: 'inline-block',
         width: '2em',
         marginInlineStart: token.marginXS,
-        color: token.progressInfoTextColor,
+        color: token.colorText,
         lineHeight: 1,
         whiteSpace: 'nowrap',
         textAlign: 'start',
@@ -117,7 +139,7 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
           position: 'absolute',
           inset: 0,
           backgroundColor: token.colorBgContainer,
-          borderRadius: token.progressLineRadius,
+          borderRadius: token.lineBorderRadius,
           opacity: 0,
           animationName: genAntProgressActive(),
           animationDuration: token.progressActiveMotionDuration,
@@ -173,7 +195,7 @@ const genCircleStyle: GenerateStyle<ProgressToken> = (token) => {
   return {
     [progressCls]: {
       [`${progressCls}-circle-trail`]: {
-        stroke: token.progressRemainingColor,
+        stroke: token.remainingColor,
       },
 
       [`&${progressCls}-circle ${progressCls}-inner`]: {
@@ -189,7 +211,8 @@ const genCircleStyle: GenerateStyle<ProgressToken> = (token) => {
         width: '100%',
         margin: 0,
         padding: 0,
-        color: token.colorText,
+        color: token.circleTextColor,
+        fontSize: token.circleTextFontSize,
         lineHeight: 1,
         whiteSpace: 'normal',
         textAlign: 'center',
@@ -237,11 +260,11 @@ const genStepStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSOb
           flexShrink: 0,
           minWidth: token.progressStepMinWidth,
           marginInlineEnd: token.progressStepMarginInlineEnd,
-          backgroundColor: token.progressRemainingColor,
+          backgroundColor: token.remainingColor,
           transition: `all ${token.motionDurationSlow}`,
 
           '&-active': {
-            backgroundColor: token.colorInfo,
+            backgroundColor: token.defaultColor,
           },
         },
       },
@@ -262,22 +285,29 @@ const genSmallLine: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSOb
   };
 };
 
-export default genComponentStyleHook('Progress', (token) => {
-  const progressStepMarginInlineEnd = token.marginXXS / 2;
+export default genComponentStyleHook(
+  'Progress',
+  (token) => {
+    const progressStepMarginInlineEnd = token.marginXXS / 2;
 
-  const progressToken = mergeToken<ProgressToken>(token, {
-    progressLineRadius: 100, // magic for capsule shape, should be a very large number
-    progressInfoTextColor: token.colorText,
-    progressDefaultColor: token.colorInfo,
-    progressRemainingColor: token.colorFillSecondary,
-    progressStepMarginInlineEnd,
-    progressStepMinWidth: progressStepMarginInlineEnd,
-    progressActiveMotionDuration: '2.4s',
-  });
-  return [
-    genBaseStyle(progressToken),
-    genCircleStyle(progressToken),
-    genStepStyle(progressToken),
-    genSmallLine(progressToken),
-  ];
-});
+    const progressToken = mergeToken<ProgressToken>(token, {
+      progressStepMarginInlineEnd,
+      progressStepMinWidth: progressStepMarginInlineEnd,
+      progressActiveMotionDuration: '2.4s',
+    });
+
+    return [
+      genBaseStyle(progressToken),
+      genCircleStyle(progressToken),
+      genStepStyle(progressToken),
+      genSmallLine(progressToken),
+    ];
+  },
+  (token) => ({
+    circleTextColor: token.colorText,
+    defaultColor: token.colorInfo,
+    remainingColor: token.colorFillSecondary,
+    lineBorderRadius: 100, // magic for capsule shape, should be a very large number
+    circleTextFontSize: '1em',
+  }),
+);

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

@@ -436,7 +436,19 @@ export default App;
 | `@popover-distance` | `marginXXS` | Global Token |
 | `@popover-padding-horizontal` | - | Deprecated for style change |
 
-<!-- ### Progress -->
+### Progress
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@progress-default-color` | `defaultColor` | - |
+| `@progress-remaining-color` | `remainingColor` | - |
+| `@progress-info-text-color` | `colorText` | Global Token |
+| `@progress-text-color` | `circleTextColor` | - |
+| `@progress-radius` | `lineBorderRadius` | - |
+| `@progress-steps-item-bg` | `remainingColor` | - |
+| `@progress-text-font-size` | `fontSizeSM` | Global Token |
+| `@progress-circle-text-font-size` | `circleTextFontSize` | - |
 
 ### Radio
 

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

@@ -433,7 +433,19 @@ Mentions 提及
 | `@popover-distance` | `marginXXS` | 全局 Token |
 | `@popover-padding-horizontal` | - | 已废弃 |
 
-<!-- ### Progress 进度条 -->
+### Progress 进度条
+
+<!-- prettier-ignore -->
+| less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@progress-default-color` | `defaultColor` | - |
+| `@progress-remaining-color` | `remainingColor` | - |
+| `@progress-info-text-color` | `colorText` | 全局 Token |
+| `@progress-text-color` | `circleTextColor` | - |
+| `@progress-radius` | `lineBorderRadius` | - |
+| `@progress-steps-item-bg` | `remainingColor` | - |
+| `@progress-text-font-size` | `fontSizeSM` | 全局 Token |
+| `@progress-circle-text-font-size` | `circleTextFontSize` | - |
 
 ### Radio 单选框