fix(icon): custom colorIcon should work for component icon (#53511)

2026-02-09 02:49:18 +08:00 · 2025-04-16 23:02:44 +08:00
parent d84ea2101d
commit 482548f052
14 changed files with 21 additions and 21 deletions
--- a/components/card/style/index.ts
+++ b/components/card/style/index.ts
@@ -219,7 +219,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
        [`a:not(${componentCls}-btn), > ${iconCls}`]: {
          display: 'inline-block',
          width: '100%',
-          color: token.colorTextDescription,
+          color: token.colorIcon,
          lineHeight: unit(token.fontHeight),
          transition: `color ${token.motionDurationMid}`,

--- a/components/cascader/style/columns.ts
+++ b/components/cascader/style/columns.ts
@@ -105,7 +105,7 @@ const getColumnsStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CS

            [iconCls]: {
              marginInlineStart: token.paddingXXS,
-              color: token.colorTextDescription,
+              color: token.colorIcon,
              fontSize: token.fontSizeIcon,
            },

--- a/components/date-picker/style/index.ts
+++ b/components/date-picker/style/index.ts
@@ -78,7 +78,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
    paddingInlineSM,
    paddingXS,
    marginXS,
-    colorTextDescription,
+    colorIcon,
    lineWidthBold,
    colorPrimary,
    motionDurationSlow,
@@ -211,7 +211,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
          },

          '&:hover': {
-            color: colorTextDescription,
+            color: colorIcon,
          },
        },

@@ -238,7 +238,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
          cursor: 'default',

          [`${componentCls}-focused &`]: {
-            color: colorTextDescription,
+            color: colorIcon,
          },

          [`${componentCls}-range-separator &`]: {
--- a/components/dropdown/style/index.ts
+++ b/components/dropdown/style/index.ts
@@ -329,7 +329,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {

              [`${componentCls}-menu-submenu-arrow-icon`]: {
                marginInlineEnd: '0 !important',
-                color: token.colorTextDescription,
+                color: token.colorIcon,
                fontSize: fontSizeIcon,
                fontStyle: 'normal',
              },
--- a/components/input-number/style/index.ts
+++ b/components/input-number/style/index.ts
@@ -59,7 +59,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
    paddingBlockSM,
    paddingBlockLG,
    paddingInlineLG,
-    colorTextDescription,
+    colorIcon,
    motionDurationMid,
    handleHoverColor,
    handleOpacity,
@@ -294,7 +294,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
        [`${componentCls}-handler`]: {
          height: '50%',
          overflow: 'hidden',
-          color: colorTextDescription,
+          color: colorIcon,
          fontWeight: 'bold',
          lineHeight: 0,
          textAlign: 'center',
@@ -320,7 +320,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
          '&-up-inner, &-down-inner': {
            ...resetIcon(),

-            color: colorTextDescription,
+            color: colorIcon,
            transition: `all ${motionDurationMid} linear`,
            userSelect: 'none',
          },
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@@ -425,7 +425,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
      outline: 'none',
      backgroundColor: 'transparent',
      '&:hover': {
-        color: token.colorTextTertiary,
+        color: token.colorIcon,
      },

      '&:active': {
--- a/components/mentions/style/index.ts
+++ b/components/mentions/style/index.ts
@@ -63,7 +63,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
    paddingBlock,
    fontSize,
    fontSizeIcon,
-    colorTextTertiary,
+    colorIcon,
    colorTextQuaternary,
    colorBgElevated,
    paddingXXS,
@@ -141,7 +141,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
          backgroundColor: 'transparent',

          '&:hover': {
-            color: colorTextTertiary,
+            color: colorIcon,
          },

          '&:active': {
--- a/components/select/style/index.ts
+++ b/components/select/style/index.ts
@@ -194,7 +194,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
        },

        '&:hover': {
-          color: token.colorTextTertiary,
+          color: token.colorIcon,
        },
      },

--- a/components/table/style/filter.ts
+++ b/components/table/style/filter.ts
@@ -22,7 +22,7 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
    tablePaddingHorizontal,
    borderRadius,
    motionDurationSlow,
-    colorTextDescription,
+    colorIcon,
    colorPrimary,
    tableHeaderFilterActiveBg,
    colorTextDisabled,
@@ -63,7 +63,7 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
          transition: `all ${motionDurationSlow}`,

          '&:hover': {
-            color: colorTextDescription,
+            color: colorIcon,
            background: tableHeaderFilterActiveBg,
          },

--- a/components/tabs/style/index.ts
+++ b/components/tabs/style/index.ts
@@ -323,7 +323,7 @@ const genDropdownStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
              _skip_check_: true,
              value: token.marginSM,
            },
-            color: token.colorTextDescription,
+            color: token.colorIcon,
            fontSize: token.fontSizeSM,
            background: 'transparent',
            border: 0,
@@ -713,7 +713,7 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
          _skip_check_: true,
          value: token.marginXS,
        },
-        color: token.colorTextDescription,
+        color: token.colorIcon,
        fontSize: token.fontSizeSM,
        background: 'transparent',
        border: 'none',
--- a/components/tag/style/index.ts
+++ b/components/tag/style/index.ts
@@ -66,7 +66,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
      [`${componentCls}-close-icon`]: {
        marginInlineStart: iconMarginInline,
        fontSize: token.tagIconSize,
-        color: token.colorTextDescription,
+        color: token.colorIcon,
        cursor: 'pointer',
        transition: `all ${token.motionDurationMid}`,

--- a/components/typography/style/mixins.ts
+++ b/components/typography/style/mixins.ts
@@ -199,7 +199,7 @@ export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = (tok
        position: 'absolute',
        insetInlineEnd: token.calc(token.marginXS).add(2).equal(),
        insetBlockEnd: token.marginXS,
-        color: token.colorTextDescription,
+        color: token.colorIcon,
        // default style
        fontWeight: 'normal',
        fontSize: token.fontSize,
--- a/components/upload/style/index.ts
+++ b/components/upload/style/index.ts
@@ -53,7 +53,7 @@ const genBaseStyle: GenerateStyle<UploadToken> = (token) => {
 };

 export const prepareComponentToken: GetDefaultToken<'Upload'> = (token) => ({
-  actionsColor: token.colorTextDescription,
+  actionsColor: token.colorIcon,
 });

 // ============================== Export ==============================
--- a/components/upload/style/list.ts
+++ b/components/upload/style/list.ts
@@ -59,7 +59,7 @@ const genListStyle: GenerateStyle<UploadToken> = (token) => {
          },

          [`${componentCls}-icon ${iconCls}`]: {
-            color: token.colorTextDescription,
+            color: token.colorIcon,
            fontSize,
          },