feat(Progress): add --van-progress-inactive-color var (#9711)

* feat(Progress): add --van-progress-inactive-color var

* fix: doc

packages/vant/src/progress/Progress.tsx

@@ -28,7 +28,7 @@ export default defineComponent({
 
   setup(props) {
     const background = computed(() =>
-      props.inactive ? '#cacaca' : props.color
+      props.inactive ? undefined : props.color
     );
 
     const renderPivot = () => {
@@ -44,7 +44,10 @@ export default defineComponent({
         };
 
         return (
-          <span style={style} class={bem('pivot')}>
+          <span
+            style={style}
+            class={bem('pivot', { inactive: props.inactive })}
+          >
             {text}
           </span>
         );
@@ -64,7 +67,10 @@ export default defineComponent({
 
       return (
         <div class={bem()} style={rootStyle}>
-          <span class={bem('portion')} style={portionStyle}></span>
+          <span
+            class={bem('portion', { inactive: props.inactive })}
+            style={portionStyle}
+          />
           {renderPivot()}
         </div>
       );

packages/vant/src/progress/README.md

@@ -98,6 +98,7 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | --van-progress-height | _4px_ | - |
 | --van-progress-color | _var(--van-primary-color)_ | - |
+| --van-progress-inactive-color | _var(--van-gray-5)_ | - |
 | --van-progress-background-color | _var(--van-gray-3)_ | - |
 | --van-progress-pivot-padding | _0 5px_ | - |
 | --van-progress-pivot-text-color | _var(--van-white)_ | - |

packages/vant/src/progress/README.zh-CN.md

@@ -102,6 +102,7 @@ progressRef.value?.resize();
 | ------------------------------------- | -------------------------- | ---- |
 | --van-progress-height                 | _4px_                      | -    |
 | --van-progress-color                  | _var(--van-primary-color)_ | -    |
+| --van-progress-inactive-color         | _var(--van-gray-5)_        | -    |
 | --van-progress-background-color       | _var(--van-gray-3)_        | -    |
 | --van-progress-pivot-padding          | _0 5px_                    | -    |
 | --van-progress-pivot-text-color       | _var(--van-white)_         | -    |

packages/vant/src/progress/demo/index.vue

@@ -57,7 +57,7 @@ const reduce = () => {
   </demo-block>
 
   <demo-block :title="t('transition')">
-    <van-progress inactive :percentage="percentage" />
+    <van-progress :percentage="percentage" />
     <div style="margin-top: 15px">
       <van-button :text="t('add')" type="primary" size="small" @click="add" />
       <van-button

packages/vant/src/progress/index.less

@@ -3,6 +3,7 @@
 :root {
   --van-progress-height: @progress-height;
   --van-progress-color: @progress-color;
+  --van-progress-inactive-color: @progress-inactive-color;
   --van-progress-background-color: @progress-background-color;
   --van-progress-pivot-padding: @progress-pivot-padding;
   --van-progress-pivot-text-color: @progress-pivot-text-color;
@@ -27,6 +28,10 @@
     transform-origin: 0;
     transition: all var(--van-animation-duration-base)
       var(--van-animation-timing-function-enter);
+
+    &--inactive {
+      background: var(--van-progress-inactive-color);
+    }
   }
 
   &__pivot {
@@ -44,5 +49,9 @@
     border-radius: 1em;
     transition: all var(--van-animation-duration-base)
       var(--van-animation-timing-function-enter);
+
+    &--inactive {
+      background: var(--van-progress-inactive-color);
+    }
   }
 }

packages/vant/src/progress/test/__snapshots__/demo.spec.ts.snap

@@ -31,12 +31,12 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
   <div class="van-progress">
-    <span class="van-progress__portion"
-          style="background: rgb(202, 202, 202); transform: scaleX(0.5);"
+    <span class="van-progress__portion van-progress__portion--inactive"
+          style="transform: scaleX(0.5);"
     >
     </span>
-    <span style="left: 50%; transform: translate(-50%,-50%); background: rgb(202, 202, 202);"
-          class="van-progress__pivot"
+    <span style="left: 50%; transform: translate(-50%,-50%);"
+          class="van-progress__pivot van-progress__pivot--inactive"
     >
       50%
     </span>
@@ -80,10 +80,10 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-progress">
     <span class="van-progress__portion"
-          style="background: rgb(202, 202, 202); transform: scaleX(0.5);"
+          style="transform: scaleX(0.5);"
     >
     </span>
-    <span style="left: 50%; transform: translate(-50%,-50%); background: rgb(202, 202, 202);"
+    <span style="left: 50%; transform: translate(-50%,-50%);"
           class="van-progress__pivot"
     >
       50%

packages/vant/src/progress/var.less

@@ -2,6 +2,7 @@
 
 @progress-height: 4px;
 @progress-color: var(--van-primary-color);
+@progress-inactive-color: var(--van-gray-5);
 @progress-background-color: var(--van-gray-3);
 @progress-pivot-padding: 0 5px;
 @progress-pivot-text-color: var(--van-white);