mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 01:13:58 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat: support Input shadow token (#44410)

Browse Source
This commit is contained in:
MadCcc 2023-08-25 09:32:39 +08:00 committed by GitHub
parent d373bf3d35
commit 4755acaeb8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/date-picker/style/index.ts
View File

@ -992,9 +992,9 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
componentCls,
colorBgContainer,
colorError,
colorErrorOutline,
errorActiveShadow,
colorWarning,
colorWarningOutline,
warningActiveShadow,
} = token;
return {
@ -1009,8 +1009,7 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
...genActiveStyle(
mergeToken<PickerToken>(token, {
activeBorderColor: colorError,
hoverBorderColor: colorError,
controlOutline: colorErrorOutline,
activeShadow: errorActiveShadow,
}),
),
},
@ -1030,8 +1029,7 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
...genActiveStyle(
mergeToken<PickerToken>(token, {
activeBorderColor: colorWarning,
hoverBorderColor: colorWarning,
controlOutline: colorWarningOutline,
activeShadow: warningActiveShadow,
}),
),
},

36
components/input/style/index.ts
View File

@ -51,6 +51,21 @@ export interface SharedComponentToken {
* @descEN Active border color
*/
activeBorderColor: string;
/**
* @desc 激活态阴影
* @descEN Box-shadow when active
*/
activeShadow: string;
/**
* @desc 错误状态时激活态阴影
* @descEN Box-shadow when active in error status
*/
errorActiveShadow: string;
/**
* @desc 警告状态时激活态阴影
* @descEN Box-shadow when active in warning status
*/
warningActiveShadow: string;
}
export interface ComponentToken extends SharedComponentToken {}
@ -77,13 +92,11 @@ export const genPlaceholderStyle = (color: string): CSSObject => ({
export const genHoverStyle = (token: InputToken): CSSObject => ({
borderColor: token.hoverBorderColor,
borderInlineEndWidth: token.lineWidth,
});
export const genActiveStyle = (token: InputToken) => ({
borderColor: token.activeBorderColor,
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
borderInlineEndWidth: token.lineWidth,
boxShadow: token.activeShadow,
outline: 0,
});
@ -121,8 +134,8 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject
componentCls,
colorError,
colorWarning,
colorErrorOutline,
colorWarningOutline,
errorActiveShadow,
warningActiveShadow,
colorErrorBorderHover,
colorWarningBorderHover,
} = token;
@ -139,8 +152,7 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject
...genActiveStyle(
mergeToken<InputToken>(token, {
activeBorderColor: colorError,
hoverBorderColor: colorError,
controlOutline: colorErrorOutline,
activeShadow: errorActiveShadow,
}),
),
},
@ -160,8 +172,7 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject
...genActiveStyle(
mergeToken<InputToken>(token, {
activeBorderColor: colorWarning,
hoverBorderColor: colorWarning,
controlOutline: colorWarningOutline,
activeShadow: warningActiveShadow,
}),
),
},
@ -1010,6 +1021,10 @@ export const initComponentToken = (token: GlobalToken): SharedComponentToken =>
controlPaddingHorizontal,
colorFillAlter,
colorPrimaryHover,
controlOutlineWidth,
controlOutline,
colorErrorOutline,
colorWarningOutline,
} = token;
return {
@ -1029,6 +1044,9 @@ export const initComponentToken = (token: GlobalToken): SharedComponentToken =>
addonBg: colorFillAlter,
activeBorderColor: colorPrimaryHover,
hoverBorderColor: colorPrimaryHover,
activeShadow: `0 0 0 ${controlOutlineWidth}px ${controlOutline}`,
errorActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorErrorOutline}`,
warningActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorWarningOutline}`,
};
};