style: Modify the implementation of background color and progress color in Progress to ensure that the DSM theme configuration takes effect (#2808)

packages/semi-foundation/progress/progress.scss

@@ -81,12 +81,18 @@ $module: #{$prefix}-progress;
             display: block;
         }
 
+        &-ring-track {
+            stroke: $color-progress_default-bg;
+        }
+
         &-ring-inner {
             transition: stroke-dashoffset $motion-progress-transition_duration;
             transition-timing-function: $motion-progress-transition_timing_function;
 
             transform: rotate(-90deg);
             transform-origin: 50% 50%;
+
+            stroke: $color-progress_track_inner-bg;
         }
 
         &-text {

packages/semi-ui/progress/_story/progress.stories.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
-import { Progress, IconButton } from '../../index';
+import { Progress, IconButton, Button } from '../../index';
+import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+
 
 export default {
   title: 'Progress'
@@ -69,3 +71,50 @@ export const ProgressShowInfo = () => (
 ProgressShowInfo.story = {
   name: 'progress showInfo',
 };
+
+export const CustomLineColor = () => {
+  const [percent, setPercent] = useState(10);
+  const strokeArr = [
+      { percent: 20, color: 'red' },
+      { percent: 40, color: 'orange-9' },
+      { percent: 60, color: 'light-green-8' },
+      { percent: 80, color: 'hsla(125, 50%, 46% / 1)' }
+  ];
+  return (
+      <>
+          <div>
+              <Progress
+                  percent={percent}
+                  stroke={strokeArr}
+                  showInfo
+                  type="circle"
+                  width={100}
+                  aria-label="disk usage"
+              />
+              <Progress
+                  percent={percent}
+                  stroke={strokeArr}
+                  showInfo
+                  style={{ margin: '20px 0 10px', width: 200 }}
+                  aria-label="disk usage"
+              />
+          </div>
+          <Button
+              icon={<IconChevronLeft />}
+              theme="light"
+              onClick={() => {
+                  setPercent(percent - 10);
+              }}
+              disabled={percent === 0}
+          />
+          <Button
+              icon={<IconChevronRight />}
+              theme="light"
+              onClick={() => {
+                  setPercent(percent + 10);
+              }}
+              disabled={percent === 100}
+          />
+      </>
+  )
+}

packages/semi-ui/progress/index.tsx

@@ -73,11 +73,9 @@ class Progress extends Component<ProgressProps, ProgressState> {
         direction: strings.DEFAULT_DIRECTION,
         format: (text: string): string => `${text}%`,
         motion: true,
-        orbitStroke: 'var(--semi-color-fill-0)',
         percent: 0,
         showInfo: false,
         size: strings.DEFAULT_SIZE,
-        stroke: strings.STROKE_DEFAULT,
         strokeGradient: false,
         strokeLinecap: strings.DEFAULT_LINECAP,
         strokeWidth: 4,
@@ -170,6 +168,7 @@ class Progress extends Component<ProgressProps, ProgressState> {
             wrapper: cls(`${prefixCls}-circle`, className),
             svg: cls(`${prefixCls}-circle-ring`),
             circle: cls(`${prefixCls}-circle-ring-inner`),
+            track: cls(`${prefixCls}-circle-ring-track`),
         };
         const perc = this.calcPercent(percent);
         const percNumber = this.calcPercent(percentNumber);
@@ -210,12 +209,13 @@ class Progress extends Component<ProgressProps, ProgressState> {
             >
                 <svg key={size} className={classNames.svg} height={width} width={width} aria-hidden>
                     <circle
+                        className={classNames.track}
                         strokeDashoffset={0}
                         strokeWidth={strokeWidth}
                         strokeDasharray={strokeDasharray}
                         strokeLinecap={strokeLinecap}
                         fill="transparent"
-                        stroke={orbitStroke}
+                        style={{ stroke: orbitStroke }}
                         r={radius}
                         cx={cx}
                         cy={cy}
@@ -228,7 +228,7 @@ class Progress extends Component<ProgressProps, ProgressState> {
                         strokeDasharray={strokeDasharray}
                         strokeLinecap={strokeLinecap}
                         fill="transparent"
-                        stroke={_stroke}
+                        style={{ stroke: _stroke }}
                         r={radius}
                         cx={cx}
                         cy={cy}
@@ -260,7 +260,7 @@ class Progress extends Component<ProgressProps, ProgressState> {
         if (typeof color !== 'undefined') {
             return color;
         }
-        return strings.STROKE_DEFAULT;
+        return null;
     }
 
     renderLineProgress(): ReactNode {