style(Stepper): adjust haptics feedback (#9778)

packages/vant/src/stepper/README.md

@@ -173,7 +173,6 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
-| --van-stepper-active-color | _#e8e8e8_ | - |
 | --van-stepper-background-color | _var(--van-active-color)_ | - |
 | --van-stepper-button-icon-color | _var(--van-text-color)_ | - |
 | --van-stepper-button-disabled-color | _var(--van-background-color)_ | - |

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

@@ -193,7 +193,6 @@ import type { StepperTheme, StepperProps } from 'vant';
 
 | 名称 | 默认值 | 描述 |
 | --- | --- | --- |
-| --van-stepper-active-color | _#e8e8e8_ | - |
 | --van-stepper-background-color | _var(--van-active-color)_ | - |
 | --van-stepper-button-icon-color | _var(--van-text-color)_ | - |
 | --van-stepper-button-disabled-color | _var(--van-background-color)_ | - |

packages/vant/src/stepper/Stepper.tsx

@@ -23,6 +23,7 @@ import {
   createNamespace,
   callInterceptor,
   makeNumericProp,
+  HAPTICS_FEEDBACK,
 } from '../utils';
 
 // Composables
@@ -297,7 +298,10 @@ export default defineComponent({
           v-show={props.showMinus}
           type="button"
           style={buttonStyle.value}
-          class={bem('minus', { disabled: minusDisabled.value })}
+          class={[
+            bem('minus', { disabled: minusDisabled.value }),
+            { [HAPTICS_FEEDBACK]: !minusDisabled.value },
+          ]}
           {...createListeners('minus')}
         />
         <input
@@ -325,7 +329,10 @@ export default defineComponent({
           v-show={props.showPlus}
           type="button"
           style={buttonStyle.value}
-          class={bem('plus', { disabled: plusDisabled.value })}
+          class={[
+            bem('plus', { disabled: plusDisabled.value }),
+            { [HAPTICS_FEEDBACK]: !plusDisabled.value },
+          ]}
           {...createListeners('plus')}
         />
       </div>

packages/vant/src/stepper/index.less

@@ -1,7 +1,6 @@
 @import './var.less';
 
 :root {
-  --van-stepper-active-color: @stepper-active-color;
   --van-stepper-background-color: @stepper-background-color;
   --van-stepper-button-icon-color: @stepper-button-icon-color;
   --van-stepper-button-disabled-color: @stepper-button-disabled-color;
@@ -55,18 +54,10 @@
       content: '';
     }
 
-    &:active {
-      background-color: var(--van-stepper-active-color);
-    }
-
     &--disabled {
       color: var(--van-stepper-button-disabled-icon-color);
       background-color: var(--van-stepper-button-disabled-color);
       cursor: not-allowed;
-
-      &:active {
-        background-color: var(--van-stepper-button-disabled-color);
-      }
     }
   }
 
@@ -123,15 +114,9 @@
     .van-stepper__minus {
       border-radius: 100%;
 
-      &:active {
-        opacity: var(--van-active-opacity);
-      }
-
       &--disabled {
-        &,
+        opacity: 0.3;
-        &:active {
+        cursor: not-allowed;
-          opacity: 0.3;
-        }
       }
     }
 

packages/vant/src/stepper/var.less

@@ -1,6 +1,5 @@
 @import '../style/var.less';
 
-@stepper-active-color: #e8e8e8;
 @stepper-background-color: var(--van-active-color);
 @stepper-button-icon-color: var(--van-text-color);
 @stepper-button-disabled-color: var(--van-background-color);