diff --git a/components/color-picker/style/index.ts b/components/color-picker/style/index.ts index 3294bf25f7..17de103d56 100644 --- a/components/color-picker/style/index.ts +++ b/components/color-picker/style/index.ts @@ -20,9 +20,9 @@ export interface ColorPickerToken extends FullToken<'ColorPicker'> { colorPickerPresetColorSize: number; } -export const genActiveStyle = (token: ColorPickerToken) => ({ - boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`, +export const genActiveStyle = (token: ColorPickerToken, borderColor: string) => ({ borderInlineEndWidth: token.lineWidth, + borderColor, outline: 0, }); @@ -78,40 +78,24 @@ const genClearStyle = ( }; const genStatusStyle = (token: ColorPickerToken): CSSObject => { - const { - componentCls, - colorError, - colorWarning, - colorErrorBorderHover, - colorWarningBorderHover, - colorErrorOutline, - colorWarningOutline, - } = token; + const { componentCls, colorError, colorWarning, colorErrorHover, colorWarningHover } = token; return { [`&${componentCls}-status-error`]: { borderColor: colorError, '&:hover': { - borderColor: colorErrorBorderHover, + borderColor: colorErrorHover, }, [`&${componentCls}-trigger-active`]: { - ...genActiveStyle( - mergeToken(token, { - controlOutline: colorErrorOutline, - }), - ), + ...genActiveStyle(token, colorError), }, }, [`&${componentCls}-status-warning`]: { borderColor: colorWarning, '&:hover': { - borderColor: colorWarningBorderHover, + borderColor: colorWarningHover, }, [`&${componentCls}-trigger-active`]: { - ...genActiveStyle( - mergeToken(token, { - controlOutline: colorWarningOutline, - }), - ), + ...genActiveStyle(token, colorWarning), }, }, }; @@ -178,6 +162,7 @@ const genColorPickerStyle: GenerateStyle = (token) => { colorBorder, paddingXXS, fontSize, + colorPrimaryHover, } = token; return [ @@ -221,12 +206,11 @@ const genColorPickerStyle: GenerateStyle = (token) => { fontSize, color: colorText, }, - '&-active': { - ...genActiveStyle(token), - borderColor: colorPrimary, - }, '&:hover': { - borderColor: colorPrimary, + borderColor: colorPrimaryHover, + }, + [`&${componentCls}-trigger-active`]: { + ...genActiveStyle(token, colorPrimary), }, '&-disabled': { color: colorTextDisabled, diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 932087d118..59049ea740 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -996,14 +996,18 @@ const genPickerStatusStyle: GenerateStyle = (token) => { errorActiveShadow, colorWarning, warningActiveShadow, + colorErrorHover, + colorWarningHover, } = token; return { - [`${componentCls}:not(${componentCls}-disabled)`]: { + [`${componentCls}:not(${componentCls}-disabled):not([disabled])`]: { [`&${componentCls}-status-error`]: { - '&, &:not([disabled]):hover': { - backgroundColor: colorBgContainer, - borderColor: colorError, + backgroundColor: colorBgContainer, + borderColor: colorError, + + '&:hover': { + borderColor: colorErrorHover, }, [`&${componentCls}-focused, &:focus`]: { @@ -1021,9 +1025,11 @@ const genPickerStatusStyle: GenerateStyle = (token) => { }, [`&${componentCls}-status-warning`]: { - '&, &:not([disabled]):hover': { - backgroundColor: colorBgContainer, - borderColor: colorWarning, + backgroundColor: colorBgContainer, + borderColor: colorWarning, + + '&:hover': { + borderColor: colorWarningHover, }, [`&${componentCls}-focused, &:focus`]: { @@ -1105,11 +1111,11 @@ const genPickerStyle: GenerateStyle = (token) => { borderRadius, transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`, - '&:hover, &-focused': { + '&:hover': { ...genHoverStyle(token), }, - '&-focused': { + [`&-focused${componentCls}`]: { ...genActiveStyle(token), }, diff --git a/components/input-number/style/index.ts b/components/input-number/style/index.ts index c9002a364d..c2afb3bc7a 100644 --- a/components/input-number/style/index.ts +++ b/components/input-number/style/index.ts @@ -1,14 +1,12 @@ -import type { SharedInputToken, SharedComponentToken } from '../../input/style'; +import type { SharedComponentToken, SharedInputToken } from '../../input/style'; import { - initComponentToken, - initInputToken, - genActiveStyle, genBasicInputStyle, genDisabledStyle, - genHoverStyle, genInputGroupStyle, genPlaceholderStyle, genStatusStyle, + initComponentToken, + initInputToken, } from '../../input/style'; import { resetComponent, resetIcon } from '../../style'; import { genCompactItemStyle } from '../../style/compact-item'; @@ -151,14 +149,6 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe }, }, - '&:hover': { - ...genHoverStyle(token), - }, - - '&-focused': { - ...genActiveStyle(token), - }, - // ===================== Out Of Range ===================== '&-out-of-range': { [`${componentCls}-input-wrap`]: { @@ -395,7 +385,6 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb }, [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: { - ...genHoverStyle(token), zIndex: 1, }, diff --git a/components/input/style/index.ts b/components/input/style/index.ts index c9086adebe..f515788b83 100644 --- a/components/input/style/index.ts +++ b/components/input/style/index.ts @@ -121,7 +121,12 @@ export const genDisabledStyle = (token: InputToken): CSSObject => ({ opacity: 1, '&:hover': { - ...genHoverStyle(mergeToken(token, { hoverBorderColor: token.colorBorder })), + ...genHoverStyle( + mergeToken(token, { + hoverBorderColor: token.colorBorder, + hoverBg: token.colorBgContainerDisabled, + }), + ), }, }); @@ -160,7 +165,7 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject borderColor: colorErrorBorderHover, }, - '&:focus, &-focused': { + '&:focus, &:focus-within': { ...genActiveStyle( mergeToken(token, { activeBorderColor: colorError, @@ -180,7 +185,7 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject borderColor: colorWarningBorderHover, }, - '&:focus, &-focused': { + '&:focus, &:focus-within': { ...genActiveStyle( mergeToken(token, { activeBorderColor: colorWarning, @@ -217,7 +222,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({ ...genHoverStyle(token), }, - '&:focus, &-focused': { + '&:focus, &:focus-within': { ...genActiveStyle(token), }, @@ -647,7 +652,6 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => { display: 'inline-flex', [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: { - ...genHoverStyle(token), zIndex: 1, [`${componentCls}-search-with-button &`]: { zIndex: 0, @@ -1034,10 +1038,7 @@ export const initComponentToken = (token: GlobalToken): SharedComponentToken => controlPaddingHorizontal, colorFillAlter, colorPrimaryHover, - controlOutlineWidth, - controlOutline, - colorErrorOutline, - colorWarningOutline, + colorPrimary, } = token; return { @@ -1055,11 +1056,11 @@ export const initComponentToken = (token: GlobalToken): SharedComponentToken => paddingInlineSM: controlPaddingHorizontalSM - lineWidth, paddingInlineLG: controlPaddingHorizontal - lineWidth, addonBg: colorFillAlter, - activeBorderColor: colorPrimaryHover, + activeBorderColor: colorPrimary, hoverBorderColor: colorPrimaryHover, - activeShadow: `0 0 0 ${controlOutlineWidth}px ${controlOutline}`, - errorActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorErrorOutline}`, - warningActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorWarningOutline}`, + activeShadow: `none`, + errorActiveShadow: `none`, + warningActiveShadow: `none`, hoverBg: 'transparent', activeBg: 'transparent', }; diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index 4f21e0820c..122311df4d 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -160,17 +160,16 @@ const genStatusStyle = ( componentCls: string; antCls: string; borderHoverColor: string; - outlineColor: string; - controlOutlineWidth: number; + borderActiveColor: string; }, overwriteDefaultBorder: boolean = false, ): CSSObject => { - const { componentCls, borderHoverColor, outlineColor, antCls } = token; + const { componentCls, borderHoverColor, antCls, borderActiveColor } = token; const overwriteStyle: CSSObject = overwriteDefaultBorder ? { [`${componentCls}-selector`]: { - borderColor: borderHoverColor, + borderColor: borderActiveColor, }, } : {}; @@ -181,15 +180,14 @@ const genStatusStyle = ( { ...overwriteStyle, - [`${componentCls}-focused& ${componentCls}-selector`]: { - borderColor: borderHoverColor, - boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`, - outline: 0, - }, - [`&:hover ${componentCls}-selector`]: { borderColor: borderHoverColor, }, + + [`${componentCls}-focused& ${componentCls}-selector`]: { + borderColor: borderActiveColor, + outline: 0, + }, }, }, }; @@ -398,14 +396,14 @@ const genSelectStyle: GenerateStyle = (token) => { componentCls, mergeToken(token, { borderHoverColor: token.colorPrimaryHover, - outlineColor: token.controlOutline, + borderActiveColor: token.colorPrimary, }), ), genStatusStyle( `${componentCls}-status-error`, mergeToken(token, { borderHoverColor: token.colorErrorHover, - outlineColor: token.colorErrorOutline, + borderActiveColor: token.colorError, }), true, ), @@ -413,7 +411,7 @@ const genSelectStyle: GenerateStyle = (token) => { `${componentCls}-status-warning`, mergeToken(token, { borderHoverColor: token.colorWarningHover, - outlineColor: token.colorWarningOutline, + borderActiveColor: token.colorWarning, }), true, ),