feat: v5 hover (#37433)

* feat: v5 hover

* feat: breadcrumb margin

* feat: badge hover

* feat: v5 error

* fix: badge ribbon corner

components/badge/style/index.tsx

@@ -13,6 +13,7 @@ interface BadgeToken extends FullToken<'Badge'> {
   badgeFontWeight: string;
   badgeFontSize: number;
   badgeColor: string;
+  badgeColorHover: string;
   badgeDotSize: number;
   badgeFontSizeSm: number;
   badgeStatusSize: number;
@@ -115,12 +116,18 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
         background: token.badgeColor,
         borderRadius: token.badgeHeight / 2,
         boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`,
+        transition: `background ${token.motionDurationSlow}`,
+
         a: {
           color: token.badgeTextColor,
         },
         'a:hover': {
           color: token.badgeTextColor,
         },
+
+        'a:hover &': {
+          background: token.badgeColorHover,
+        },
       },
       [`${componentCls}-count-sm`]: {
         minWidth: badgeHeightSm,
@@ -277,7 +284,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
       top: marginXS,
       height: badgeFontHeight,
       padding: `0 ${token.paddingXS}px`,
-      color: token.badgeTextColor,
+      color: token.colorPrimary,
       lineHeight: `${badgeFontHeight}px`,
       whiteSpace: 'nowrap',
       backgroundColor: token.colorPrimary,
@@ -327,6 +334,7 @@ export default genComponentStyleHook('Badge', token => {
   const badgeFontWeight = 'normal';
   const badgeFontSize = fontSizeSM;
   const badgeColor = token.colorError;
+  const badgeColorHover = token.colorErrorHover;
   const badgeHeightSm = fontSize;
   const badgeDotSize = fontSizeSM / 2;
   const badgeFontSizeSm = fontSizeSM;
@@ -341,6 +349,7 @@ export default genComponentStyleHook('Badge', token => {
     badgeFontWeight,
     badgeFontSize,
     badgeColor,
+    badgeColorHover,
     badgeShadowColor: colorBorderBg,
     badgeHeightSm,
     badgeDotSize,

components/breadcrumb/style/index.tsx

@@ -38,17 +38,15 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
       a: {
         color: token.breadcrumbLinkColor,
         transition: `color ${token.motionDurationSlow}`,
+        padding: `0 ${token.paddingXXS}px`,
+        borderRadius: token.radiusSM,
+        height: token.lineHeight * token.fontSize,
+        display: 'inline-block',
+        marginInline: -token.marginXXS,
 
         '&:hover': {
           color: token.breadcrumbLinkColorHover,
-        },
+          backgroundColor: token.colorBgTextHover,
-      },
-
-      'li:last-child': {
-        color: token.breadcrumbLastItemColor,
-
-        a: {
-          color: token.breadcrumbLastItemColor,
         },
       },
 
@@ -63,16 +61,38 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
 
       [`${componentCls}-link`]: {
         [`
-        > ${iconCls} + span,
+          > ${iconCls} + span,
-        > ${iconCls} + a
+          > ${iconCls} + a
-       `]: {
+        `]: {
           marginInlineStart: token.marginXXS,
         },
       },
 
       [`${componentCls}-overlay-link`]: {
+        borderRadius: token.radiusSM,
+        height: token.lineHeight * token.fontSize,
+        display: 'inline-block',
+        padding: `0 ${token.paddingXXS}px`,
+        marginInline: -token.marginXXS,
+
         [`> ${iconCls}`]: {
           marginInlineStart: token.marginXXS,
+          fontSize: token.fontSizeIcon,
+        },
+
+        '&:hover': {
+          color: token.breadcrumbLinkColorHover,
+          backgroundColor: token.colorBgTextHover,
+
+          a: {
+            color: token.breadcrumbLinkColorHover,
+          },
+        },
+
+        a: {
+          '&:hover': {
+            backgroundColor: 'transparent',
+          },
         },
       },
 
@@ -93,7 +113,7 @@ export default genComponentStyleHook('Breadcrumb', token => {
     breadcrumbLinkColor: token.colorTextDescription,
     breadcrumbLinkColorHover: token.colorText,
     breadcrumbLastItemColor: token.colorText,
-    breadcrumbSeparatorMargin: token.paddingXS,
+    breadcrumbSeparatorMargin: token.marginXS,
     breadcrumbSeparatorColor: token.colorTextDescription,
   });
 

components/button/style/index.tsx

@@ -7,8 +7,6 @@ import genGroupStyle from './group';
 export interface ComponentToken {}
 
 export interface ButtonToken extends FullToken<'Button'> {
-  colorBgTextHover: string;
-  colorBgTextActive: string;
   // FIXME: should be removed
   colorOutlineDefault: string;
 }
@@ -387,11 +385,9 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Button', token => {
-  const { controlTmpOutline, colorFillQuaternary, colorFillTertiary } = token;
+  const { controlTmpOutline } = token;
 
   const buttonToken = mergeToken<ButtonToken>(token, {
-    colorBgTextHover: colorFillQuaternary,
-    colorBgTextActive: colorFillTertiary,
     colorOutlineDefault: controlTmpOutline,
   });
 

components/checkbox/style/index.tsx

@@ -159,12 +159,13 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
       },
 
       // Wrapper & Wrapper > Checkbox
+
       [`
-      ${wrapperCls}:hover:not(${wrapperCls}-disabled),
+        ${wrapperCls}:not(${wrapperCls}-disabled),
-      ${checkboxCls}:hover:not(${checkboxCls}-disabled),
+        ${checkboxCls}:not(${checkboxCls}-disabled)
-      ${checkboxCls}-input:focus +
+      `]: {
-    `]: {
+        [`&:hover ${checkboxCls}-inner,
-        [`${checkboxCls}-inner`]: {
+          ${checkboxCls}-input:focus + ${checkboxCls}-inner`]: {
           borderColor: token.colorPrimary,
         },
       },
@@ -192,7 +193,6 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
           insetInlineStart: 0,
           width: '100%',
           height: '100%',
-          border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorPrimary}`,
           borderRadius: token.controlRadiusSM,
           visibility: 'hidden',
           animationName: antCheckboxEffect,
@@ -202,6 +202,17 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
           content: '""',
         },
       },
+
+      [`
+        ${wrapperCls}-checked:not(${wrapperCls}-disabled),
+        ${checkboxCls}-checked:not(${checkboxCls}-disabled)
+      `]: {
+        [`&:hover ${checkboxCls}-inner,
+          ${checkboxCls}-input:focus + ${checkboxCls}-inner`]: {
+          backgroundColor: token.colorPrimaryHover,
+          borderColor: 'transparent',
+        },
+      },
     },
 
     // ==================== Disable ====================

components/checkbox/style/mixin.less

@@ -1,241 +0,0 @@
-@import '../../style/mixins/index';
-
-.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
-  @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
-  // 一般状态
-  .@{checkbox-prefix-cls} {
-    .reset-component();
-
-    position: relative;
-    top: 0.2em;
-    line-height: 1;
-    white-space: nowrap;
-    outline: none;
-    cursor: pointer;
-
-    .@{checkbox-prefix-cls}-wrapper:hover &-inner,
-    &:hover &-inner,
-    &-input:focus + &-inner {
-      border-color: @checkbox-color;
-    }
-
-    &-checked::after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: 1px solid @checkbox-color;
-      border-radius: @checkbox-border-radius;
-      visibility: hidden;
-      animation: antCheckboxEffect 0.36s ease-in-out;
-      animation-fill-mode: backwards;
-      content: '';
-    }
-
-    &:hover::after,
-    .@{checkbox-prefix-cls}-wrapper:hover &::after {
-      visibility: visible;
-    }
-
-    &-inner {
-      position: relative;
-      top: 0;
-      left: 0;
-      display: block;
-      width: @checkbox-size;
-      height: @checkbox-size;
-      direction: ltr;
-      background-color: @checkbox-check-bg;
-      border: @checkbox-border-width @border-style-base @border-color-base;
-      border-radius: @checkbox-border-radius;
-      // Fix IE checked style
-      // https://github.com/ant-design/ant-design/issues/12597
-      border-collapse: separate;
-      transition: all 0.3s;
-
-      &::after {
-        @check-width: (@checkbox-size / 14) * 5px;
-        @check-height: (@checkbox-size / 14) * 8px;
-
-        position: absolute;
-        top: 50%;
-        // https://github.com/ant-design/ant-design/pull/19452
-        // https://github.com/ant-design/ant-design/pull/31726
-        left: 21.5%;
-        display: table;
-        width: @check-width;
-        height: @check-height;
-        border: 2px solid @checkbox-check-color;
-        border-top: 0;
-        border-left: 0;
-        transform: rotate(45deg) scale(0) translate(-50%, -50%);
-        opacity: 0;
-        transition: all 0.1s @ease-in-back, opacity 0.1s;
-        content: ' ';
-      }
-    }
-
-    &-input {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      opacity: 0;
-    }
-  }
-
-  // 选中状态
-  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
-    position: absolute;
-    display: table;
-    border: 2px solid @checkbox-check-color;
-    border-top: 0;
-    border-left: 0;
-    transform: rotate(45deg) scale(1) translate(-50%, -50%);
-    opacity: 1;
-    transition: all 0.2s @ease-out-back 0.1s;
-    content: ' ';
-  }
-
-  .@{checkbox-prefix-cls}-checked {
-    .@{checkbox-inner-prefix-cls} {
-      background-color: @checkbox-color;
-      border-color: @checkbox-color;
-    }
-  }
-
-  .@{checkbox-prefix-cls}-disabled {
-    cursor: not-allowed;
-
-    &.@{checkbox-prefix-cls}-checked {
-      .@{checkbox-inner-prefix-cls}::after {
-        border-color: @disabled-color;
-        animation-name: none;
-      }
-    }
-
-    .@{checkbox-prefix-cls}-input {
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    .@{checkbox-inner-prefix-cls} {
-      background-color: @input-disabled-bg;
-      border-color: @border-color-base !important;
-
-      &::after {
-        border-color: @input-disabled-bg;
-        border-collapse: separate;
-        animation-name: none;
-      }
-    }
-
-    & + span {
-      color: @disabled-color;
-      cursor: not-allowed;
-    }
-
-    // Not show highlight border of checkbox when disabled
-    &:hover::after,
-    .@{checkbox-prefix-cls}-wrapper:hover &::after {
-      visibility: hidden;
-    }
-  }
-
-  .@{checkbox-prefix-cls}-wrapper {
-    .reset-component();
-    display: inline-flex;
-    align-items: baseline;
-    line-height: unset;
-    cursor: pointer;
-
-    &::after {
-      display: inline-block;
-      width: 0;
-      overflow: hidden;
-      content: '\a0';
-    }
-
-    &.@{checkbox-prefix-cls}-wrapper-disabled {
-      cursor: not-allowed;
-    }
-
-    & + & {
-      margin-left: 8px;
-    }
-
-    &&-in-form-item {
-      input[type='checkbox'] {
-        width: 14px;
-        height: 14px;
-      }
-    }
-  }
-
-  .@{checkbox-prefix-cls} + span {
-    padding-right: 8px;
-    padding-left: 8px;
-  }
-
-  .@{checkbox-prefix-cls}-group {
-    .reset-component();
-    display: inline-block;
-
-    &-item {
-      margin-right: @checkbox-group-item-margin-right;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    &-item + &-item {
-      margin-left: 0;
-    }
-  }
-
-  // 半选状态
-  .@{checkbox-prefix-cls}-indeterminate {
-    .@{checkbox-inner-prefix-cls} {
-      background-color: @checkbox-check-bg;
-      border-color: @border-color-base;
-    }
-    .@{checkbox-inner-prefix-cls}::after {
-      @indeterminate-width: @checkbox-size - 8px;
-      @indeterminate-height: @checkbox-size - 8px;
-
-      top: 50%;
-      left: 50%;
-      width: @indeterminate-width;
-      height: @indeterminate-height;
-      background-color: @checkbox-color;
-      border: 0;
-      transform: translate(-50%, -50%) scale(1);
-      opacity: 1;
-      content: ' ';
-    }
-
-    &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
-      background-color: @disabled-color;
-      border-color: @disabled-color;
-    }
-  }
-}
-
-@keyframes antCheckboxEffect {
-  0% {
-    transform: scale(1);
-    opacity: 0.5;
-  }
-
-  100% {
-    transform: scale(1.6);
-    opacity: 0;
-  }
-}

components/dropdown/style/index.tsx

@@ -330,13 +330,16 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
                 }
               : [],
 
+            [`&:hover, &-active`]: {
+              backgroundColor: token.controlItemBgHover,
+            },
+
             '&-selected': {
               color: token.colorPrimary,
               backgroundColor: token.controlItemBgActive,
-            },
+              '&:hover, &-active': {
-
+                backgroundColor: token.controlItemBgActiveHover,
-            [`&:hover, &-active`]: {
+              },
-              backgroundColor: token.controlItemBgHover,
             },
 
             '&-disabled': {

components/segmented/style/index.tsx

@@ -69,13 +69,6 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
         direction: 'rtl',
       },
 
-      // hover/focus styles
-      [`&:not(${componentCls}-disabled)`]: {
-        '&:hover, &:focus': {
-          backgroundColor: token.bgColorHover,
-        },
-      },
-
       // block styles
       '&&-block': {
         display: 'flex',
@@ -91,16 +84,17 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
         position: 'relative',
         textAlign: 'center',
         cursor: 'pointer',
-        transition: `color ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+        transition: `color ${token.motionDurationSlow} ${token.motionEaseInOut}, background-color ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+        borderRadius: token.controlRadiusSM,
 
         '&-selected': {
           ...getSegmentedItemSelectedStyle(token),
-          borderRadius: token.controlRadiusSM,
           color: token.labelColorHover,
         },
 
         '&:hover, &:focus': {
           color: token.labelColorHover,
+          backgroundColor: token.bgColorHover,
         },
 
         '&-label': {
@@ -185,7 +179,6 @@ export default genComponentStyleHook('Segmented', token => {
     colorTextLabel,
     colorText,
     colorFillSecondary,
-    colorFill,
     colorBgContainer,
   } = token;
 
@@ -196,7 +189,7 @@ export default genComponentStyleHook('Segmented', token => {
     labelColor: colorTextLabel,
     labelColorHover: colorText,
     bgColor: colorFillSecondary,
-    bgColorHover: colorFill,
+    bgColorHover: colorFillSecondary,
     bgColorSelected: colorBgContainer,
   });
   return [genSegmentedStyle(segmentedToken)];

components/slider/style/index.tsx

@@ -15,7 +15,8 @@ export interface ComponentToken {
   controlSize: number;
   railSize: number;
   handleSize: number;
-  lineHandleWidth: number;
+  handleLineWidth: number;
+  handleLineWidthHover: number;
   dotSize: number;
 }
 
@@ -55,7 +56,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
 
       [`${componentCls}-rail`]: {
         position: 'absolute',
-        backgroundColor: token.colorFillSecondary,
+        backgroundColor: token.colorFillTertiary,
         borderRadius: token.controlRadiusXS,
         transition: `background-color ${token.motionDurationSlow}`,
       },
@@ -72,31 +73,30 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
         width: token.handleSize,
         height: token.handleSize,
         backgroundColor: token.colorBgContainer,
-        border: `${token.lineHandleWidth}px solid ${token.colorPrimaryBorder}`,
+        border: `${token.handleLineWidth}px solid ${token.colorPrimaryBorder}`,
+        outline: `0 solid ${token.colorPrimaryBorder}`,
         borderRadius: '50%',
-        boxShadow: 'none',
         cursor: 'pointer',
         transition: `
-          border-color ${token.motionDurationSlow},
+          border ${token.motionDurationSlow},
-          box-shadow ${token.motionDurationSlow},
+          outline ${token.motionDurationSlow}
-          transform ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28)
         `,
-        outline: 'none',
 
         [`${componentCls}-dragging`]: {
           zIndex: 1,
         },
 
-        '&:focus': {
+        '&:hover, &:active, &:focus': {
-          borderColor: token.colorPrimaryHover,
+          boxShadow: `none`,
-          outline: 'none',
+          outlineWidth: token.handleLineWidthHover,
-          boxShadow: token.handleFocusShadow,
+          outlineColor: token.colorPrimary,
+          borderWidth: 0,
         },
       },
 
       '&:hover': {
         [`${componentCls}-rail`]: {
-          backgroundColor: colorFillContentHover,
+          backgroundColor: token.colorFillSecondary,
         },
 
         [`${componentCls}-track`]: {
@@ -109,6 +109,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
 
         [`${componentCls}-handle${antCls}-tooltip-open`]: {
           borderColor: token.colorPrimary,
+          outlineColor: token.colorPrimary,
         },
 
         // We use below style instead
@@ -120,7 +121,8 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
           ${componentCls}-handle,
           ${componentCls}-dot-active
         `]: {
-          borderColor: token.colorPrimaryHover,
+          borderColor: token.colorPrimary,
+          outlineColor: token.colorPrimary,
         },
       },
 
@@ -154,7 +156,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
         width: dotSize,
         height: dotSize,
         backgroundColor: token.colorBgContainer,
-        border: `${token.lineHandleWidth}px solid ${token.colorSplit}`,
+        border: `${token.handleLineWidth}px solid ${token.colorSplit}`,
         borderRadius: '50%',
         cursor: 'pointer',
         transition: `border-color ${token.motionDurationSlow}`,
@@ -295,13 +297,15 @@ export default genComponentStyleHook(
     // Handle line width is always width-er 1px
     const increaseHandleWidth = 1;
     const controlSize = token.controlHeightSM / 2;
-    const lineHandleWidth = token.lineWidth + increaseHandleWidth;
+    const handleLineWidth = token.lineWidth + increaseHandleWidth;
+    const handleLineWidthHover = token.lineWidth + increaseHandleWidth * 3;
     return {
       controlSize,
       railSize: controlSize / 3,
-      handleSize: controlSize + lineHandleWidth,
+      handleSize: controlSize + handleLineWidth,
       dotSize: (controlSize / 3) * 2,
-      lineHandleWidth,
+      handleLineWidth,
+      handleLineWidthHover,
     };
   },
 );

components/switch/style/index.tsx

@@ -152,13 +152,17 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
       height: token.switchHeight,
       lineHeight: `${token.switchHeight}px`,
       verticalAlign: 'middle',
-      backgroundImage: `linear-gradient(to right, ${token.colorTextDisabled}, ${token.colorTextDisabled}), linear-gradient(to right, ${token.colorBgContainer}, ${token.colorBgContainer})`,
+      background: token.colorTextQuaternary,
       border: '0',
       borderRadius: 100,
       cursor: 'pointer',
       transition: `all ${token.switchDuration}`,
       userSelect: 'none',
 
+      '&:hover': {
+        background: token.colorTextTertiary,
+      },
+
       '&:focus-visible': {
         outline: 0,
         boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlTmpOutline}`,
@@ -174,6 +178,10 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
 
       [`&${token.componentCls}-checked`]: {
         background: token.switchColor,
+
+        '&:hover': {
+          background: token.colorPrimaryHover,
+        },
       },
 
       [`&${token.componentCls}-loading, &${token.componentCls}-disabled`]: {

components/tag/style/index.tsx

@@ -113,6 +113,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
 
         '&:not(&-checked):hover': {
           color: token.colorPrimary,
+          backgroundColor: token.colorFillSecondary,
         },
 
         '&:active, &-checked': {
@@ -121,6 +122,9 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
 
         '&-checked': {
           backgroundColor: token.colorPrimary,
+          '&:hover': {
+            backgroundColor: token.colorPrimaryHover,
+          },
         },
 
         '&:active': {

components/theme/interface.ts

@@ -364,6 +364,8 @@ export interface AliasToken extends MapToken {
   colorTextHeading: string;
   colorTextLabel: string;
   colorTextDescription: string;
+  colorBgTextHover: string;
+  colorBgTextActive: string;
 
   /** Weak action. Such as `allowClear` or Alert close button */
   colorIcon: string;

components/theme/themes/default/colors.ts

@@ -32,12 +32,12 @@ export const generateNeutralColorPalettes: GenerateNeutralColorMap = (
     colorBgBase,
     colorTextBase,
 
-    colorText: getAlphaColor(colorTextBase, 0.85),
+    colorText: getAlphaColor(colorTextBase, 0.88),
     colorTextSecondary: getAlphaColor(colorTextBase, 0.65),
     colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
     colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
 
-    colorFill: getAlphaColor(colorTextBase, 0.12),
+    colorFill: getAlphaColor(colorTextBase, 0.15),
     colorFillSecondary: getAlphaColor(colorTextBase, 0.06),
     colorFillTertiary: getAlphaColor(colorTextBase, 0.04),
     colorFillQuaternary: getAlphaColor(colorTextBase, 0.02),

components/theme/themes/seed.ts

@@ -1,7 +1,7 @@
 import type { PresetColorType, SeedToken } from '..';
 
 export const defaultPresetColors: PresetColorType = {
-  blue: '#1890FF',
+  blue: '#1677ff',
   purple: '#722ED1',
   cyan: '#13C2C2',
   green: '#52C41A',
@@ -24,8 +24,8 @@ const seedToken: SeedToken = {
   colorPrimary: '#1677ff',
   colorSuccess: '#52c41a',
   colorWarning: '#faad14',
-  colorError: '#ff4d4f',
+  colorError: '#f5222d',
-  colorInfo: '#1890ff',
+  colorInfo: '#1677ff',
   colorTextBase: '',
   colorTextLightSolid: '#fff',
 

components/theme/themes/shared/genColorMapToken.ts

@@ -46,7 +46,7 @@ export default function genColorMapToken(
     colorSuccessBgHover: successColors[2],
     colorSuccessBorder: successColors[3],
     colorSuccessBorderHover: successColors[4],
-    colorSuccessHover: successColors[5],
+    colorSuccessHover: successColors[4],
     colorSuccess: successColors[6],
     colorSuccessActive: successColors[7],
     colorSuccessTextHover: successColors[8],
@@ -57,8 +57,8 @@ export default function genColorMapToken(
     colorErrorBgHover: errorColors[2],
     colorErrorBorder: errorColors[3],
     colorErrorBorderHover: errorColors[4],
-    colorErrorHover: errorColors[5],
+    colorErrorHover: errorColors[4],
-    colorError: errorColors[6],
+    colorError: errorColors[5],
     colorErrorActive: errorColors[7],
     colorErrorTextHover: errorColors[8],
     colorErrorText: errorColors[9],
@@ -68,7 +68,7 @@ export default function genColorMapToken(
     colorWarningBgHover: warningColors[2],
     colorWarningBorder: warningColors[3],
     colorWarningBorderHover: warningColors[4],
-    colorWarningHover: warningColors[5],
+    colorWarningHover: warningColors[4],
     colorWarning: warningColors[6],
     colorWarningActive: warningColors[7],
     colorWarningTextHover: warningColors[8],
@@ -79,7 +79,7 @@ export default function genColorMapToken(
     colorInfoBgHover: infoColors[2],
     colorInfoBorder: infoColors[3],
     colorInfoBorderHover: infoColors[4],
-    colorInfoHover: infoColors[5],
+    colorInfoHover: infoColors[4],
     colorInfo: infoColors[6],
     colorInfoActive: infoColors[7],
     colorInfoTextHover: infoColors[8],

components/theme/themes/v4/dark.ts

@@ -1,6 +1,6 @@
 import type { DerivativeFunc } from '@ant-design/cssinjs';
 import { generate } from '@ant-design/colors';
-import genColorMapToken from '../shared/genColorMapToken';
+import genColorMapToken from './genColorMapToken';
 import type { MapToken, SeedToken } from '../../interface';
 import defaultAlgorithm from '../dark';
 import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';

components/theme/themes/v4/default.ts

@@ -1,6 +1,6 @@
 import type { DerivativeFunc } from '@ant-design/cssinjs';
 import { generate } from '@ant-design/colors';
-import genColorMapToken from '../shared/genColorMapToken';
+import genColorMapToken from './genColorMapToken';
 import type { MapToken, SeedToken } from '../../interface';
 import defaultAlgorithm from '../default';
 import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';

components/theme/themes/v4/genColorMapToken.ts

@@ -0,0 +1,91 @@
+import { TinyColor } from '@ctrl/tinycolor';
+import type { ColorMapToken, SeedToken } from '../../interface';
+import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
+
+interface PaletteGenerators {
+  generateColorPalettes: GenerateColorMap;
+  generateNeutralColorPalettes: GenerateNeutralColorMap;
+}
+
+export default function genColorMapToken(
+  seed: SeedToken,
+  { generateColorPalettes, generateNeutralColorPalettes }: PaletteGenerators,
+): ColorMapToken {
+  const {
+    colorSuccess: colorSuccessBase,
+    colorWarning: colorWarningBase,
+    colorError: colorErrorBase,
+    colorInfo: colorInfoBase,
+    colorPrimary: colorPrimaryBase,
+    colorBgBase,
+    colorTextBase,
+  } = seed;
+
+  const primaryColors = generateColorPalettes(colorPrimaryBase);
+  const successColors = generateColorPalettes(colorSuccessBase);
+  const warningColors = generateColorPalettes(colorWarningBase);
+  const errorColors = generateColorPalettes(colorErrorBase);
+  const infoColors = generateColorPalettes(colorInfoBase);
+  const neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase);
+
+  return {
+    ...neutralColors,
+
+    colorPrimaryBg: primaryColors[1],
+    colorPrimaryBgHover: primaryColors[2],
+    colorPrimaryBorder: primaryColors[3],
+    colorPrimaryBorderHover: primaryColors[4],
+    colorPrimaryHover: primaryColors[5],
+    colorPrimary: primaryColors[6],
+    colorPrimaryActive: primaryColors[7],
+    colorPrimaryTextHover: primaryColors[8],
+    colorPrimaryText: primaryColors[9],
+    colorPrimaryTextActive: primaryColors[10],
+
+    colorSuccessBg: successColors[1],
+    colorSuccessBgHover: successColors[2],
+    colorSuccessBorder: successColors[3],
+    colorSuccessBorderHover: successColors[4],
+    colorSuccessHover: successColors[5],
+    colorSuccess: successColors[6],
+    colorSuccessActive: successColors[7],
+    colorSuccessTextHover: successColors[8],
+    colorSuccessText: successColors[9],
+    colorSuccessTextActive: successColors[10],
+
+    colorErrorBg: errorColors[1],
+    colorErrorBgHover: errorColors[2],
+    colorErrorBorder: errorColors[3],
+    colorErrorBorderHover: errorColors[4],
+    colorErrorHover: errorColors[5],
+    colorError: errorColors[6],
+    colorErrorActive: errorColors[7],
+    colorErrorTextHover: errorColors[8],
+    colorErrorText: errorColors[9],
+    colorErrorTextActive: errorColors[10],
+
+    colorWarningBg: warningColors[1],
+    colorWarningBgHover: warningColors[2],
+    colorWarningBorder: warningColors[3],
+    colorWarningBorderHover: warningColors[4],
+    colorWarningHover: warningColors[5],
+    colorWarning: warningColors[6],
+    colorWarningActive: warningColors[7],
+    colorWarningTextHover: warningColors[8],
+    colorWarningText: warningColors[9],
+    colorWarningTextActive: warningColors[10],
+
+    colorInfoBg: infoColors[1],
+    colorInfoBgHover: infoColors[2],
+    colorInfoBorder: infoColors[3],
+    colorInfoBorderHover: infoColors[4],
+    colorInfoHover: infoColors[5],
+    colorInfo: infoColors[6],
+    colorInfoActive: infoColors[7],
+    colorInfoTextHover: infoColors[8],
+    colorInfoText: infoColors[9],
+    colorInfoTextActive: infoColors[10],
+
+    colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
+  };
+}

components/theme/util/alias.ts

@@ -31,9 +31,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
   const aliasToken: AliasToken = {
     ...mergedToken,
 
-    colorLink: mergedToken.colorPrimaryText,
+    colorLink: mergedToken.colorInfoText,
-    colorLinkHover: mergedToken.colorPrimaryTextHover,
+    colorLinkHover: mergedToken.colorInfoHover,
-    colorLinkActive: mergedToken.colorPrimaryActive,
+    colorLinkActive: mergedToken.colorInfoActive,
 
     // ============== Background ============== //
     colorFillContent: mergedToken.colorFillSecondary,
@@ -51,6 +51,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     colorTextLabel: mergedToken.colorTextSecondary,
     colorTextDescription: mergedToken.colorTextTertiary,
     colorHighlight: mergedToken.colorError,
+    colorBgTextHover: mergedToken.colorFillSecondary,
+    colorBgTextActive: mergedToken.colorFill,
 
     colorIcon: mergedToken.colorTextTertiary,
     colorIconHover: mergedToken.colorText,