fix(transfer): icon color

src/transfer/src/Transfer.vue

@@ -2,7 +2,8 @@
   <div
     class="n-transfer"
     :class="{
-      [`n-transfer--filterable`]: filterable
+      'n-transfer--disabled': disabled,
+      'n-transfer--filterable': filterable
     }"
     :style="cssVars"
   >
@@ -25,6 +26,7 @@
             v-model:value="srcPattern"
             clearable
             size="small"
+            :disabled="disabled"
             :unstable-theme="mergedTheme.peers.Input"
             :unstable-theme-overrides="mergedTheme.overrides.Input"
             :placeholder="targetFilterPlaceholder"
@@ -32,7 +34,7 @@
             @blur="handleInputBlur"
           >
             <template #clear>
-              <n-base-icon>
+              <n-base-icon class="n-transfer-icon">
                 <search-icon />
               </n-base-icon>
             </template>
@@ -140,6 +142,7 @@
         <div v-if="filterable" class="n-transfer-filter">
           <n-input
             v-model:value="tgtPattern"
+            :disabled="disabled"
             :unstable-theme="mergedTheme.peers.Input"
             :unstable-theme-overrides="mergedTheme.overrides.Input"
             clearable
@@ -149,7 +152,7 @@
             @blur="handleInputBlur"
           >
             <template #clear>
-              <n-base-icon>
+              <n-base-icon class="n-transfer-icon">
                 <search-icon />
               </n-base-icon>
             </template>
@@ -399,6 +402,8 @@ export default defineComponent({
             itemTextColorDisabled,
             extraFontSize,
             titleFontWeight,
+            iconColor,
+            iconColorDisabled,
             [createKey('fontSize', size)]: fontSize,
             [createKey('itemHeight', size)]: itemHeight
           }
@@ -422,7 +427,9 @@ export default defineComponent({
           '--item-text-color': itemTextColor,
           '--item-text-color-disabled': itemTextColorDisabled,
           '--list-color': listColor,
-          '--width': width
+          '--width': width,
+          '--icon-color': iconColor,
+          '--icon-color-disabled': iconColorDisabled
         }
       })
     }

src/transfer/src/styles/index.cssr.js

@@ -65,6 +65,15 @@ export default c([
         })
       ])
     ]),
+    cB('transfer-icon', `
+      color: var(--icon-color);
+      transition: color .3s var(--bezier);
+    `),
+    cM('disabled', [
+      cB('transfer-icon', {
+        color: 'var(--icon-color-disabled)'
+      })
+    ]),
     cB('transfer-list', `
       background-clip: padding-box;
       width: calc(50% - 36px);

src/transfer/styles/dark.js

@@ -18,6 +18,9 @@ export default {
   },
   self (vars) {
     const {
+      iconColorDisabledOverlay,
+      iconColorOverlay,
+      fontWeight,
       fontSizeLarge,
       fontSizeMedium,
       fontSizeSmall,
@@ -30,7 +33,7 @@ export default {
       textColor1Overlay,
       textColorDisabledOverlay,
       textColor2Overlay,
-      borderColorOverlay,
+      dividerColorOverlay,
       hoverColorOverlay
     } = vars
     return {
@@ -48,11 +51,13 @@ export default {
       titleTextColor: textColor1Overlay,
       titleTextColorDisabled: textColorDisabledOverlay,
       headerExtraTextColor: textColor2Overlay,
-      filterDividerColor: borderColorOverlay,
+      filterDividerColor: dividerColorOverlay,
       itemTextColor: textColor2Overlay,
       itemTextColorDisabled: textColorDisabledOverlay,
       itemColorPending: hoverColorOverlay,
-      titleFontWeight: 400
+      titleFontWeight: fontWeight,
+      iconColor: iconColorOverlay,
+      iconColorDisabled: iconColorDisabledOverlay
     }
   }
 }

src/transfer/styles/light.js

@@ -19,6 +19,9 @@ export default {
   },
   self (vars) {
     const {
+      fontWeight,
+      iconColorDisabled,
+      iconColor,
       fontSizeLarge,
       fontSizeMedium,
       fontSizeSmall,
@@ -54,7 +57,9 @@ export default {
       itemTextColor: textColor2,
       itemTextColorDisabled: textColorDisabled,
       itemColorPending: hoverColorOverlay,
-      titleFontWeight: 400
+      titleFontWeight: fontWeight,
+      iconColor,
+      iconColorDisabled
     }
   }
 }