From 53c1b3fce2dcb5b93a58214410443716a6851282 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 27 May 2022 10:47:28 +0800
Subject: [PATCH] refactor: progress full token (#35745)

* refactor: progress full token

* refactor: token

* refactor: more token
---
 components/progress/style/index.tsx | 95 +++++++++++++----------------
 1 file changed, 44 insertions(+), 51 deletions(-)

diff --git a/components/progress/style/index.tsx b/components/progress/style/index.tsx
index b3d9962770..84d6a93069 100644
--- a/components/progress/style/index.tsx
+++ b/components/progress/style/index.tsx
@@ -4,18 +4,16 @@ import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../_util/theme';
 import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
 
-export interface ComponentToken {
-  remainingColor: string;
-  defaultColor: string;
-  stepsItemBg: string;
-  infoTextColor: string;
-}
+export interface ComponentToken {}
 
 interface ProgressToken extends FullToken<'Progress'> {
-  radius: string;
-  infoTextColor: string;
-  circleTextFontSize: string;
-  textFontSize: string;
+  progressLineRadius: number;
+  progressInfoTextColor: string;
+  progressRemainingColor: string;
+  progressDefaultColor: string;
+  progressStepMinWidth: number;
+  progressStepMarginInlineEnd: number;
+  progressActiveMotionDuration: string;
 }
 
 const antProgressActive = new Keyframes('antProgressActive', {
@@ -72,21 +70,21 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token: ProgressToken) => {
         width: '100%',
         overflow: 'hidden',
         verticalAlign: 'middle',
-        backgroundColor: token.remainingColor,
-        borderRadius: token.radius,
+        backgroundColor: token.progressRemainingColor,
+        borderRadius: token.progressLineRadius,
       },
 
       [`${progressCls}-inner:not(${progressCls}-circle-gradient)`]: {
         [`${progressCls}-circle-path`]: {
-          stroke: token.blue,
+          stroke: token.colorInfo,
         },
       },
 
       [`&${progressCls}-success-bg, ${progressCls}-bg`]: {
         position: 'relative',
-        backgroundColor: token.blue,
-        borderRadius: token.radius,
-        transition: `all ${token.motionDurationSlow} cubic-bezier(0.08, 0.82, 0.17, 1) 0s`, // FIXME: hard code in v4
+        backgroundColor: token.colorInfo,
+        borderRadius: token.progressLineRadius,
+        transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
       },
 
       [`${progressCls}-success-bg`]: {
@@ -98,10 +96,9 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token: ProgressToken) => {
 
       [`${progressCls}-text`]: {
         display: 'inline-block',
-        width: '2em', // FIXME: hardcode in v4
-        marginInlineStart: token.marginXS, // FIXME: hard code in v4
-        color: token.infoTextColor,
-        fontSize: token.textFontSize,
+        width: '2em',
+        marginInlineStart: token.marginXS,
+        color: token.progressInfoTextColor,
         lineHeight: 1,
         whiteSpace: 'nowrap',
         textAlign: 'start',
@@ -117,10 +114,10 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token: ProgressToken) => {
           position: 'absolute',
           inset: 0,
           background: token.colorBgComponent,
-          borderRadius: 10, // FIXME: hard code in v4
+          borderRadius: token.progressLineRadius,
           opacity: 0,
           animationName: antProgressActive,
-          animationDuration: '2.4s', // FIXME: hard code in v4
+          animationDuration: token.progressActiveMotionDuration,
           animationTimingFunction: token.motionEaseOutQuint,
           animationIterationCount: 'infinite',
           content: '""',
@@ -172,7 +169,7 @@ const genCircleStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSS
       },
 
       [`${progressCls}-circle-trail`]: {
-        stroke: token.remainingColor,
+        stroke: token.progressRemainingColor,
       },
 
       [`&${progressCls}-circle ${progressCls}-inner`]: {
@@ -189,14 +186,13 @@ const genCircleStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSS
         margin: 0,
         padding: 0,
         color: token.colorText,
-        fontSize: token.circleTextFontSize,
         lineHeight: 1,
         whiteSpace: 'normal',
         textAlign: 'center',
         transform: `translate(-50%, -50%)`,
 
         [iconPrefixCls]: {
-          fontSize: `${14 / 12}em`, // FIXME: hard code in v4
+          fontSize: `${token.fontSize / token.fontSizeSM}em`,
         },
       },
 
@@ -229,13 +225,13 @@ const genStepStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSOb
         },
         '&-item': {
           flexShrink: 0,
-          minWidth: 2, // FIXME: hardcode in v4
-          marginInlineEnd: 2, // FIXME: hardcode in v4
-          background: token.stepsItemBg,
+          minWidth: token.progressStepMinWidth,
+          marginInlineEnd: token.progressStepMarginInlineEnd,
+          background: token.progressRemainingColor,
           transition: `all ${token.motionDurationSlow}`,
 
           '&-active': {
-            background: token.blue,
+            background: token.colorInfo,
           },
         },
       },
@@ -256,25 +252,22 @@ const genSmallLine: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSOb
   };
 };
 
-export default genComponentStyleHook(
-  'Progress',
-  token => {
-    const progressToken = mergeToken<ProgressToken>(token, {
-      radius: '100px',
-      circleTextFontSize: '1em', // FIXME: hard code in v4
-      textFontSize: '1em', // FIXME: hard code in v4
-    });
-    return [
-      genBaseStyle(progressToken),
-      genCircleStyle(progressToken),
-      genStepStyle(progressToken),
-      genSmallLine(progressToken),
-    ];
-  },
-  token => ({
-    defaultColor: token.blue,
-    remainingColor: 'rgba(0, 0, 0, 0.04)',
-    stepsItemBg: '#f3f3f3',
-    infoTextColor: '#000000d9',
-  }),
-);
+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.colorBgContainer,
+    progressStepMarginInlineEnd,
+    progressStepMinWidth: progressStepMarginInlineEnd,
+    progressActiveMotionDuration: '2.4s',
+  });
+  return [
+    genBaseStyle(progressToken),
+    genCircleStyle(progressToken),
+    genStepStyle(progressToken),
+    genSmallLine(progressToken),
+  ];
+});