mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +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, componentCls,
colorBgContainer, colorBgContainer,
colorError, colorError,
colorErrorOutline, errorActiveShadow,
colorWarning, colorWarning,
colorWarningOutline, warningActiveShadow,
} = token; } = token;
return { return {
@ -1009,8 +1009,7 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
...genActiveStyle( ...genActiveStyle(
mergeToken<PickerToken>(token, { mergeToken<PickerToken>(token, {
activeBorderColor: colorError, activeBorderColor: colorError,
hoverBorderColor: colorError, activeShadow: errorActiveShadow,
controlOutline: colorErrorOutline,
}), }),
), ),
}, },
@ -1030,8 +1029,7 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
...genActiveStyle( ...genActiveStyle(
mergeToken<PickerToken>(token, { mergeToken<PickerToken>(token, {
activeBorderColor: colorWarning, activeBorderColor: colorWarning,
hoverBorderColor: colorWarning, activeShadow: warningActiveShadow,
controlOutline: colorWarningOutline,
}), }),
), ),
}, },

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

@ -51,6 +51,21 @@ export interface SharedComponentToken {
* @descEN Active border color * @descEN Active border color
*/ */
activeBorderColor: string; 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 {} export interface ComponentToken extends SharedComponentToken {}
@ -77,13 +92,11 @@ export const genPlaceholderStyle = (color: string): CSSObject => ({
export const genHoverStyle = (token: InputToken): CSSObject => ({ export const genHoverStyle = (token: InputToken): CSSObject => ({
borderColor: token.hoverBorderColor, borderColor: token.hoverBorderColor,
borderInlineEndWidth: token.lineWidth,
}); });
export const genActiveStyle = (token: InputToken) => ({ export const genActiveStyle = (token: InputToken) => ({
borderColor: token.activeBorderColor, borderColor: token.activeBorderColor,
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`, boxShadow: token.activeShadow,
borderInlineEndWidth: token.lineWidth,
outline: 0, outline: 0,
}); });
@ -121,8 +134,8 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject
componentCls, componentCls,
colorError, colorError,
colorWarning, colorWarning,
colorErrorOutline, errorActiveShadow,
colorWarningOutline, warningActiveShadow,
colorErrorBorderHover, colorErrorBorderHover,
colorWarningBorderHover, colorWarningBorderHover,
} = token; } = token;
@ -139,8 +152,7 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject
...genActiveStyle( ...genActiveStyle(
mergeToken<InputToken>(token, { mergeToken<InputToken>(token, {
activeBorderColor: colorError, activeBorderColor: colorError,
hoverBorderColor: colorError, activeShadow: errorActiveShadow,
controlOutline: colorErrorOutline,
}), }),
), ),
}, },
@ -160,8 +172,7 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject
...genActiveStyle( ...genActiveStyle(
mergeToken<InputToken>(token, { mergeToken<InputToken>(token, {
activeBorderColor: colorWarning, activeBorderColor: colorWarning,
hoverBorderColor: colorWarning, activeShadow: warningActiveShadow,
controlOutline: colorWarningOutline,
}), }),
), ),
}, },
@ -1010,6 +1021,10 @@ export const initComponentToken = (token: GlobalToken): SharedComponentToken =>
controlPaddingHorizontal, controlPaddingHorizontal,
colorFillAlter, colorFillAlter,
colorPrimaryHover, colorPrimaryHover,
controlOutlineWidth,
controlOutline,
colorErrorOutline,
colorWarningOutline,
} = token; } = token;
return { return {
@ -1029,6 +1044,9 @@ export const initComponentToken = (token: GlobalToken): SharedComponentToken =>
addonBg: colorFillAlter, addonBg: colorFillAlter,
activeBorderColor: colorPrimaryHover, activeBorderColor: colorPrimaryHover,
hoverBorderColor: colorPrimaryHover, hoverBorderColor: colorPrimaryHover,
activeShadow: `0 0 0 ${controlOutlineWidth}px ${controlOutline}`,
errorActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorErrorOutline}`,
warningActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorWarningOutline}`,
}; };
}; };