fix(input): icon color

src/icon/src/styles/themed-base.cssr.js

@@ -1,4 +1,4 @@
-import { c, cTB, cM } from '../../../_utils/cssr'
+import { c, cTB, cM, cB } from '../../../_utils/cssr'
 
 export default c([
   ({ props }) => {
@@ -52,7 +52,14 @@ export default c([
         cM('5-depth', {
           opacity: opacity5Depth
         })
-      ])
+      ]),
+      [1, 2, 3, 4, 5].map(v => cB(`icon-${v}-depth >`, [
+        cTB('icon', {
+          fill: color,
+          stroke: color,
+          opacity: props.$local[`opacity${v}Depth`]
+        })
+      ]))
     ]
   }
 ])

src/input/src/Input.vue

@@ -122,6 +122,7 @@
     <div
       v-if="$slots.affix || $slots.prefix"
       class="n-input__prefix"
+      :class="disabled ? 'n-icon-5-depth' : 'n-icon-4-depth'"
     >
       <slot name="affix">
         <slot name="prefix" />
@@ -130,6 +131,7 @@
     <transition name="n-button-suffix-transition">
       <div
         class="n-input__suffix"
+        :class="disabled ? 'n-icon-5-depth' : 'n-icon-4-depth'"
       >
         <div class="n-input-clear">
           <n-base-suffix

src/input/src/styles/themed-base.cssr.js

@@ -24,9 +24,7 @@ export default c([
       borderMaskColorDisabled,
       colorDisabled,
       textColorDisabled,
-      placeholderColorDisabled,
-      iconColorDisabled,
-      iconOpacityDisabled
+      placeholderColorDisabled
     } = props.$local
     const {
       cubicBezierEaseInOut
@@ -80,16 +78,6 @@ export default c([
         cE('placeholder', {
           color: placeholderColorDisabled
         }),
-        cE('suffix, prefix', [
-          cB('icon', {
-            fill: iconColorDisabled,
-            stroke: iconColorDisabled
-          }, [
-            c('svg', {
-              opacity: iconOpacityDisabled
-            })
-          ])
-        ]),
         cE('splitor', {
           color: textColorDisabled
         })

src/input/styles/dark.js

@@ -12,8 +12,6 @@ export default create({
       textColor2Overlay,
       textColor4Overlay,
       textColor5Overlay,
-      opacity5,
-      opacity4,
       primaryColor,
       primaryColorHover,
       inputColorOverlay,
@@ -21,8 +19,7 @@ export default create({
       warningColor,
       warningColorHover,
       errorColor,
-      errorColorHover,
-      textColorBase
+      errorColorHover
     } = derived
     const {
       borderRadius
@@ -39,10 +36,6 @@ export default create({
       backgroundColor: inputColorOverlay,
       colorDisabled: inputColorDisabledOverlay,
       colorFocus: changeColor(primaryColor, { alpha: 0.1 }),
-      iconColor: textColorBase,
-      iconColorDisabled: textColorBase,
-      iconOpacity: opacity4,
-      iconOpacityDisabled: opacity5,
       borderMaskColor: 'transparent',
       borderMaskColorHover: primaryColorHover,
       borderMaskColorDisabled: 'transparent !important',

src/input/styles/light.js

@@ -20,10 +20,7 @@ export default create({
       warningColor,
       warningColorHover,
       errorColor,
-      errorColorHover,
-      opacity4,
-      opacity5,
-      textColorBase
+      errorColorHover
     } = derived
     const {
       borderRadius
@@ -40,10 +37,6 @@ export default create({
       backgroundColor: inputColor,
       colorDisabled: inputColorDisabled,
       colorFocus: inputColor,
-      iconColor: textColorBase,
-      iconOpacity: opacity4,
-      iconColorDisabled: textColorBase,
-      iconOpacityDisabled: opacity5,
       borderMaskColor: 'transparent',
       borderMaskColorHover: primaryColorHover,
       borderMaskColorDisabled: 'transparent !important',