mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

feat: v5 radius (#37146)

Browse Source 
* feat: v5 radius

* test: fix test
This commit is contained in:
MadCcc 2022-08-19 10:10:51 +08:00 committed by GitHub
parent cfbbfb5cba
commit 93908debec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 268 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/alert/style/index.tsx
View File

@ -33,7 +33,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
fontSize,
fontSizeLG,
lineHeight,
controlRadius: borderRadius,
radiusLG: borderRadius,
motionEaseInOutCirc,
alertIconSizeLG,
colorText,

22
components/avatar/style/index.tsx
View File

@ -14,7 +14,6 @@ type AvatarToken = FullToken<'Avatar'> & {
avatarFontSizeBase: number;
avatarFontSizeLG: number;
avatarFontSizeSM: number;
avatarBorderRadius: number;
avatarGroupOverlapping: number;
avatarGroupSpace: number;
avatarGroupBorderColor: string;
@ -34,18 +33,24 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
avatarFontSizeBase,
avatarFontSizeLG,
avatarFontSizeSM,
avatarBorderRadius,
controlRadius,
controlRadiusLG,
controlRadiusSM,
lineWidth,
lineType,
} = token;
// Avatar size style
const avatarSizeStyle = (size: number, fontSize: number): CSSObject => ({
const avatarSizeStyle = (size: number, fontSize: number, radius: number): CSSObject => ({
width: size,
height: size,
lineHeight: `${size - lineWidth * 2}px`,
borderRadius: '50%',
[`&${componentCls}-square`]: {
borderRadius: radius,
},
[`${componentCls}-string`]: {
position: 'absolute',
left: {
@ -84,18 +89,14 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
display: 'block',
},
...avatarSizeStyle(avatarSizeBase, avatarFontSizeBase),
...avatarSizeStyle(avatarSizeBase, avatarFontSizeBase, controlRadius),
[`&-lg`]: {
...avatarSizeStyle(avatarSizeLG, avatarFontSizeLG),
...avatarSizeStyle(avatarSizeLG, avatarFontSizeLG, controlRadiusLG),
},
[`&-sm`]: {
...avatarSizeStyle(avatarSizeSM, avatarFontSizeSM),
},
[`&-square`]: {
borderRadius: avatarBorderRadius,
...avatarSizeStyle(avatarSizeSM, avatarFontSizeSM, controlRadiusSM),
},
'> img': {
@ -161,7 +162,6 @@ export default genComponentStyleHook('Avatar', token => {
avatarFontSizeBase: Math.round((fontSizeLG + fontSizeXL) / 2),
avatarFontSizeLG: fontSizeHeading3,
avatarFontSizeSM: fontSize,
avatarBorderRadius: token.radiusBase,
avatarGroupOverlapping: marginXS,
avatarGroupSpace: marginXS,
avatarGroupBorderColor: colorBorderBg,

2
components/badge/style/index.tsx
View File

@ -281,7 +281,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
lineHeight: `${badgeFontHeight}px`,
whiteSpace: 'nowrap',
backgroundColor: token.colorPrimary,
borderRadius: token.controlRadius,
borderRadius: token.controlRadiusSM,
[`${ribbonPrefixCls}-text`]: { color: token.colorTextLightSolid },
[`${ribbonPrefixCls}-corner`]: {
position: 'absolute',

11
components/button/style/index.tsx
View File

@ -110,8 +110,6 @@ const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token
});
const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
borderRadius: token.controlRadius,
...genSolidDisabledButtonStyle(token),
});
@ -266,8 +264,6 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
// Type: Text
const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
borderRadius: token.controlRadius,
...genHoverActiveButtonStyle(
{
backgroundColor: token.colorBgTextHover,
@ -317,6 +313,7 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
fontSize: token.fontSize,
height: token.controlHeight,
padding: `${paddingVertical}px ${paddingHorizontal}px`,
borderRadius: token.controlRadius,
[`&${iconOnlyCls}`]: {
width: token.controlHeight,
@ -357,18 +354,20 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = token => genSizeButtonStyle(token);
const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
const largeToken = mergeToken<ButtonToken>(token, {
const smallToken = mergeToken<ButtonToken>(token, {
controlHeight: token.controlHeightSM,
padding: token.paddingXS,
controlRadius: token.controlRadiusSM,
});
return genSizeButtonStyle(largeToken, `${token.componentCls}-sm`);
return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`);
};
const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
const largeToken = mergeToken<ButtonToken>(token, {
controlHeight: token.controlHeightLG,
fontSize: token.fontSizeLG,
controlRadius: token.controlRadiusLG,
});
return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`);

2
components/calendar/demo/card.md
View File

@ -38,7 +38,7 @@ export default App;
.site-calendar-demo-card {
width: 300px;
border: 1px solid #f0f0f0;
border-radius: 2px;
border-radius: 8px;
}
```

4
components/calendar/style/index.tsx
View File

@ -67,13 +67,13 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
},
},
[`${calendarCls}-mini`]: {
borderRadius: token.radiusBase,
borderRadius: token.controlRadiusLG,
[`${calendarCls}-header`]: {
paddingInlineEnd: token.paddingXS,
paddingInlineStart: token.paddingXS,
},
[`${componentCls}-panel`]: {
borderRadius: `0 0 ${token.radiusBase}px ${token.radiusBase}px`,
borderRadius: `0 0 ${token.controlRadiusLG}px ${token.controlRadiusLG}px`,
},
[`${componentCls}-content`]: {
height: token.miniContentHeight,

6
components/card/style/index.tsx
View File

@ -37,7 +37,7 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
fontSize: token.fontSizeLG,
background: 'transparent',
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorderSecondary}`,
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`,
...clearFix(),
@ -246,7 +246,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
position: 'relative',
background: token.colorBgContainer,
borderRadius: token.radiusBase,
borderRadius: token.radiusLG,
[`${componentCls}-head`]: genCardHeadStyle(token),
@ -273,7 +273,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
},
img: {
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`,
},
},

4
components/checkbox/style/index.tsx
View File

@ -100,7 +100,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
direction: 'ltr',
backgroundColor: token.colorBgContainer,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
borderRadius: token.controlRadius,
borderRadius: token.controlRadiusSM,
borderCollapse: 'separate',
transition: `all ${token.motionDurationSlow}`,
@ -193,7 +193,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
width: '100%',
height: '100%',
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorPrimary}`,
borderRadius: token.controlRadius,
borderRadius: token.controlRadiusSM,
visibility: 'hidden',
animationName: antCheckboxEffect,
animationDuration: token.motionDurationSlow,

2
components/collapse/style/index.tsx
View File

@ -245,7 +245,7 @@ export default genComponentStyleHook('Collapse', token => {
collapseContentPadding: token.padding,
collapseHeaderBg: token.colorFillAlter,
collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`,
collapsePanelBorderRadius: token.radiusBase,
collapsePanelBorderRadius: token.radiusLG,
});
return [

41
components/date-picker/style/index.tsx
View File

@ -80,7 +80,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
minWidth: token.pickerPanelCellHeight,
height: token.pickerPanelCellHeight,
lineHeight: `${token.pickerPanelCellHeight}px`,
borderRadius: token.radiusBase,
borderRadius: token.controlRadiusSM,
transition: `background ${token.motionDurationSlow}, border ${token.motionDurationSlow}`,
},
@ -103,7 +103,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
insetInlineStart: 0,
zIndex: 1,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorPrimary}`,
borderRadius: token.radiusBase,
borderRadius: token.controlRadiusSM,
content: '""',
},
},
@ -187,8 +187,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
// range start border-radius
[`&-in-view:is(&-range-start):not(&-range-start-single):not(&-range-end) ${pickerCellInnerCls}`]:
{
borderStartStartRadius: token.radiusBase,
borderEndStartRadius: token.radiusBase,
borderStartStartRadius: token.controlRadiusSM,
borderEndStartRadius: token.controlRadiusSM,
borderStartEndRadius: 0,
borderEndEndRadius: 0,
},
@ -198,8 +198,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
{
borderStartStartRadius: 0,
borderEndStartRadius: 0,
borderStartEndRadius: token.radiusBase,
borderEndEndRadius: token.radiusBase,
borderStartEndRadius: token.controlRadiusSM,
borderEndEndRadius: token.controlRadiusSM,
},
'&-range-hover:is(&-range-end)::after': {
@ -265,7 +265,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
textAlign: 'center',
background: token.colorBgContainer,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
borderRadius: token.radiusBase,
borderRadius: token.controlRadiusLG,
outline: 'none',
'&-focused': {
@ -563,8 +563,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
[`${componentCls}-cell-range-hover-start::after`]: {
insetInlineStart: hoverCellFixedDistance,
borderInlineStart: `${token.controlLineWidth}px dashed ${token.pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: token.radiusBase,
borderBottomStartRadius: token.radiusBase,
borderStartStartRadius: token.controlRadiusSM,
borderBottomStartRadius: token.controlRadiusSM,
borderStartEndRadius: 0,
borderBottomEndRadius: 0,
@ -573,8 +573,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
borderInlineEnd: `${token.controlLineWidth}px dashed ${token.pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: 0,
borderBottomStartRadius: 0,
borderStartEndRadius: token.radiusBase,
borderBottomEndRadius: token.radiusBase,
borderStartEndRadius: token.controlRadiusSM,
borderBottomEndRadius: token.controlRadiusSM,
},
},
[`${componentCls}-cell-range-hover-end::after`]: {
@ -582,14 +582,14 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
borderInlineEnd: `${token.controlLineWidth}px dashed ${token.pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: 0,
borderBottomStartRadius: 0,
borderStartEndRadius: token.radiusBase,
borderBottomEndRadius: token.radiusBase,
borderStartEndRadius: token.controlRadius,
borderBottomEndRadius: token.controlRadius,
[`${componentCls}-panel-rtl &`]: {
insetInlineStart: hoverCellFixedDistance,
borderInlineStart: `${token.controlLineWidth}px dashed ${token.pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: token.radiusBase,
borderBottomStartRadius: token.radiusBase,
borderStartStartRadius: token.controlRadius,
borderBottomStartRadius: token.controlRadius,
borderStartEndRadius: 0,
borderBottomEndRadius: 0,
},
@ -834,7 +834,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
alignItems: 'center',
background: token.colorBgContainer,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
borderRadius: token.radiusBase,
borderRadius: token.controlRadius,
transition: `border ${token.motionDurationSlow}, box-shadow ${token.motionDurationSlow}`,
'&:hover, &-focused': {
@ -1141,14 +1141,19 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
marginInlineStart: token.inputPaddingHorizontal * 1.5,
boxShadow: token.boxShadowPopoverArrowBottom,
transition: `left ${token.motionDurationSlow} ease-out`,
...roundedArrow(token.sizePopupArrow, 5, token.colorBgElevated),
...roundedArrow(
token.sizePopupArrow,
token.radiusXS,
token.radiusOuter,
token.colorBgElevated,
),
},
[`${componentCls}-panel-container`]: {
overflow: 'hidden',
verticalAlign: 'top',
background: token.colorBgElevated,
borderRadius: token.radiusBase,
borderRadius: token.controlRadiusLG,
boxShadow: token.boxShadow,
transition: `margin ${token.motionDurationSlow}`,

2
components/descriptions/style/index.tsx
View File

@ -103,7 +103,7 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token: Descripti
},
[`${componentCls}-view`]: {
width: '100%',
borderRadius: token.radiusBase,
borderRadius: token.radiusLG,
table: {
width: '100%',
tableLayout: 'fixed',

4
components/dropdown/style/index.tsx
View File

@ -126,7 +126,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
width: sizePopupArrow,
height: sizePopupArrow,
...roundedArrow(sizePopupArrow, 5, colorBgElevated),
...roundedArrow(sizePopupArrow, token.radiusXS, token.radiusOuter, colorBgElevated),
},
[`
@ -261,7 +261,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
listStyleType: 'none',
backgroundColor: colorBgElevated,
backgroundClip: 'padding-box',
borderRadius: token.controlRadius,
borderRadius: token.controlRadiusLG,
outline: 'none',
boxShadow: token.boxShadow,

8
components/input-number/index.tsx
View File

@ -124,8 +124,8 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
{
[`${prefixCls}-affix-wrapper-focused`]: focused,
[`${prefixCls}-affix-wrapper-disabled`]: props.disabled,
[`${prefixCls}-affix-wrapper-sm`]: size === 'small',
[`${prefixCls}-affix-wrapper-lg`]: size === 'large',
[`${prefixCls}-affix-wrapper-sm`]: mergeSize === 'small',
[`${prefixCls}-affix-wrapper-lg`]: mergeSize === 'large',
[`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
[`${prefixCls}-affix-wrapper-readonly`]: readOnly,
[`${prefixCls}-affix-wrapper-borderless`]: !bordered,
@ -174,8 +174,8 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
const mergedGroupClassName = classNames(
`${prefixCls}-group-wrapper`,
{
[`${prefixCls}-group-wrapper-sm`]: size === 'small',
[`${prefixCls}-group-wrapper-lg`]: size === 'large',
[`${prefixCls}-group-wrapper-sm`]: mergeSize === 'small',
[`${prefixCls}-group-wrapper-lg`]: mergeSize === 'large',
[`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
},
getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback),

33
components/input-number/style/index.tsx
View File

@ -42,6 +42,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
colorBgContainer,
motionDurationMid,
colorTextDisabled,
controlRadiusSM,
controlRadiusLG,
controlWidth,
} = token;
@ -70,6 +72,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
'&-lg': {
padding: 0,
fontSize: fontSizeLG,
borderRadius: controlRadiusLG,
[`input${componentCls}-input`]: {
height: controlHeightLG - 2 * controlLineWidth,
@ -78,6 +81,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
'&-sm': {
padding: 0,
borderRadius: controlRadiusSM,
[`input${componentCls}-input`]: {
height: controlHeightSM - 2 * controlLineWidth,
@ -120,6 +124,18 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
[`${componentCls}-affix-wrapper`]: {
width: '100%',
},
// Size
'&-lg': {
[`${componentCls}-group-addon`]: {
borderRadius: controlRadiusLG,
},
},
'&-sm': {
[`${componentCls}-group-addon`]: {
borderRadius: controlRadiusSM,
},
},
},
},
@ -275,7 +291,14 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
};
const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
const { componentCls, inputPaddingHorizontal, inputAffixPadding, controlWidth } = token;
const {
componentCls,
inputPaddingHorizontal,
inputAffixPadding,
controlWidth,
controlRadiusLG,
controlRadiusSM,
} = token;
return {
[`${componentCls}-affix-wrapper`]: {
@ -288,6 +311,14 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
padding: 0,
paddingInlineStart: inputPaddingHorizontal,
'&-lg': {
borderRadius: controlRadiusLG,
},
'&-sm': {
borderRadius: controlRadiusSM,
},
'&:not(&-disabled):hover': {
...genHoverStyle(token),
zIndex: 1,

19
components/input/style/index.tsx
View File

@ -55,16 +55,18 @@ export const genDisabledStyle = (token: InputToken): CSSObject => ({
});
const genInputLargeStyle = (token: InputToken): CSSObject => {
const { inputPaddingVerticalLG, inputPaddingHorizontal, fontSizeLG } = token;
const { inputPaddingVerticalLG, inputPaddingHorizontal, fontSizeLG, controlRadiusLG } = token;
return {
padding: `${inputPaddingVerticalLG}px ${inputPaddingHorizontal}px`,
fontSize: fontSizeLG,
borderRadius: controlRadiusLG,
};
};
export const genInputSmallStyle = (token: InputToken): CSSObject => ({
padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`,
borderRadius: token.controlRadiusSM,
});
export const genStatusStyle = (token: InputToken): CSSObject => {
@ -653,7 +655,8 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
};
const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
const { prefixCls, colorError, colorSuccess } = token;
const { prefixCls, colorError, colorSuccess, componentCls, controlRadiusLG, controlRadiusSM } =
token;
return {
[`.${prefixCls}-group`]: {
@ -675,6 +678,18 @@ const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
direction: 'rtl',
},
// Size
'&-lg': {
[`${componentCls}-group-addon`]: {
borderRadius: controlRadiusLG,
},
},
'&-sm': {
[`${componentCls}-group-addon`]: {
borderRadius: controlRadiusSM,
},
},
// Status
'&-status-error': {
[`.${prefixCls}-group-addon`]: {

4
components/list/style/index.tsx
View File

@ -24,12 +24,12 @@ const genBorderedStyle = (token: ListToken): CSSObject => {
padding,
listItemPaddingSM,
marginLG,
radiusBase,
radiusLG,
} = token;
return {
[`${listBorderedCls}`]: {
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
borderRadius: radiusBase,
borderRadius: radiusLG,
[`${componentCls}-header,${componentCls}-footer,${componentCls}-item`]: {
paddingInline: paddingLG,
},

12
components/mentions/style/index.tsx
View File

@ -33,7 +33,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
inputPaddingVertical,
fontSize,
colorBgElevated,
controlRadius,
controlRadiusLG,
boxShadow,
} = token;
@ -142,7 +142,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
fontSize,
fontVariant: 'initial',
backgroundColor: colorBgElevated,
borderRadius: controlRadius,
borderRadius: controlRadiusLG,
outline: 'none',
boxShadow,
@ -177,8 +177,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
},
'&:first-child': {
borderStartStartRadius: controlRadius,
borderStartEndRadius: controlRadius,
borderStartStartRadius: controlRadiusLG,
borderStartEndRadius: controlRadiusLG,
borderEndStartRadius: 0,
borderEndEndRadius: 0,
},
@ -186,8 +186,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
'&:last-child': {
borderStartStartRadius: 0,
borderStartEndRadius: 0,
borderEndStartRadius: controlRadius,
borderEndEndRadius: controlRadius,
borderEndStartRadius: controlRadiusLG,
borderEndEndRadius: controlRadiusLG,
},
'&-disabled': {

4
components/message/style/index.tsx
View File

@ -31,7 +31,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = token => {
motionDurationSlow,
marginXS,
paddingXS,
radiusBase,
radiusLG,
zIndexPopup,
// Custom token
messageNoticeContentPadding,
@ -128,7 +128,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = token => {
display: 'inline-block',
padding: messageNoticeContentPadding,
background: colorBgElevated,
borderRadius: radiusBase,
borderRadius: radiusLG,
boxShadow,
pointerEvents: 'all',
},

6
components/modal/style/index.tsx
View File

@ -161,7 +161,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
backgroundColor: token.modalContentBg,
backgroundClip: 'padding-box',
border: 0,
borderRadius: token.controlRadius,
borderRadius: token.radiusLG,
boxShadow: token.boxShadow,
pointerEvents: 'auto',
},
@ -205,7 +205,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
color: token.colorText,
background: token.modalHeaderBg,
borderBottom: `${token.modalHeaderBorderWidth}px ${token.modalHeaderBorderStyle} ${token.modalHeaderBorderColorSplit}`,
borderRadius: `${token.controlRadius}px ${token.controlRadius}px 0 0`,
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`,
},
[`${componentCls}-body`]: {
@ -220,7 +220,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
textAlign: 'end',
background: token.modalFooterBg,
borderTop: `${token.modalFooterBorderWidth}px ${token.modalFooterBorderStyle} ${token.modalFooterBorderColorSplit}`,
borderRadius: `0 0 ${token.controlRadius}px ${token.controlRadius}px`,
borderRadius: `0 0 ${token.radiusLG}px ${token.radiusLG}px`,
[`${token.antCls}-btn + ${token.antCls}-btn:not(${token.antCls}-dropdown-trigger)`]: {
marginBottom: 0,

4
components/notification/style/index.tsx
View File

@ -27,7 +27,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
boxShadow,
fontSizeLG,
notificationMarginBottom,
radiusBase,
radiusLG,
colorSuccess,
colorInfo,
colorWarning,
@ -161,7 +161,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
lineHeight,
wordWrap: 'break-word',
background: notificationBg,
borderRadius: radiusBase,
borderRadius: radiusLG,
boxShadow,
[`${componentCls}-close-icon`]: {

2
components/popover/style/index.tsx
View File

@ -33,7 +33,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
boxShadow,
colorSplit,
colorTextHeading,
radiusBase: borderRadius,
radiusLG: borderRadius,
paddingSM,
zIndexPopup,
} = token;

48
components/radio/style/index.tsx
View File

@ -258,6 +258,8 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
controlHeightSM,
paddingXS,
controlRadius,
controlRadiusSM,
controlRadiusLG,
radioDotColor,
radioButtonFocusShadow,
radioButtonCheckedBg,
@ -308,19 +310,6 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
height: '100%',
},
[`${componentCls}-group-large &`]: {
height: controlHeightLG,
fontSize: fontSizeLG,
lineHeight: `${controlHeightLG - controlLineWidth * 2}px`,
},
[`${componentCls}-group-small &`]: {
height: controlHeightSM,
paddingInline: paddingXS - controlLineWidth,
paddingBlock: 0,
lineHeight: `${controlHeightSM - controlLineWidth * 2}px`,
},
'&:not(:first-child)': {
'&::before': {
position: 'absolute',
@ -353,6 +342,39 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
borderRadius: controlRadius,
},
[`${componentCls}-group-large &`]: {
height: controlHeightLG,
fontSize: fontSizeLG,
lineHeight: `${controlHeightLG - controlLineWidth * 2}px`,
'&:first-child': {
borderStartStartRadius: controlRadiusLG,
borderEndStartRadius: controlRadiusLG,
},
'&:last-child': {
borderStartEndRadius: controlRadiusLG,
borderEndEndRadius: controlRadiusLG,
},
},
[`${componentCls}-group-small &`]: {
height: controlHeightSM,
paddingInline: paddingXS - controlLineWidth,
paddingBlock: 0,
lineHeight: `${controlHeightSM - controlLineWidth * 2}px`,
'&:first-child': {
borderStartStartRadius: controlRadiusSM,
borderEndStartRadius: controlRadiusSM,
},
'&:last-child': {
borderStartEndRadius: controlRadiusSM,
borderEndEndRadius: controlRadiusSM,
},
},
'&:hover': {
position: 'relative',
color: radioDotColor,

34
components/segmented/style/index.tsx
View File

@ -29,7 +29,6 @@ function segmentedDisabledItem(cls: string, token: SegmentedToken): CSSObject {
function getSegmentedItemSelectedStyle(token: SegmentedToken): CSSObject {
return {
backgroundColor: token.bgColorSelected,
borderRadius: token.controlRadius,
boxShadow: token.boxShadowSegmentedSelectedItem,
};
}
@ -54,7 +53,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
padding: token.segmentedContainerPadding,
color: token.labelColor,
backgroundColor: token.bgColor,
borderRadius: token.radiusBase,
borderRadius: token.controlRadius,
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
[`${componentCls}-group`]: {
@ -96,6 +95,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
'&-selected': {
...getSegmentedItemSelectedStyle(token),
borderRadius: token.controlRadiusSM,
color: token.labelColorHover,
},
@ -127,17 +127,29 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
},
// size styles
[`&&-lg ${componentCls}-item-label`]: {
minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
lineHeight: `${token.controlHeightLG - token.segmentedContainerPadding * 2}px`,
padding: `0 ${token.segmentedPaddingHorizontal}px`,
fontSize: token.fontSizeLG,
'&&-lg': {
borderRadius: token.controlRadiusLG,
[`${componentCls}-item-label`]: {
minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
lineHeight: `${token.controlHeightLG - token.segmentedContainerPadding * 2}px`,
padding: `0 ${token.segmentedPaddingHorizontal}px`,
fontSize: token.fontSizeLG,
},
[`${componentCls}-item-selected`]: {
borderRadius: token.controlRadius,
},
},
[`&&-sm ${componentCls}-item-label`]: {
minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
lineHeight: `${token.controlHeightSM - token.segmentedContainerPadding * 2}px`,
padding: `0 ${token.segmentedPaddingHorizontalSM}px`,
'&&-sm': {
borderRadius: token.controlRadiusSM,
[`&&-sm ${componentCls}-item-label`]: {
minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
lineHeight: `${token.controlHeightSM - token.segmentedContainerPadding * 2}px`,
padding: `0 ${token.segmentedPaddingHorizontalSM}px`,
},
[`${componentCls}-item-selected`]: {
borderRadius: token.controlRadiusXS,
},
},
// disabled styles

2
components/select/style/dropdown.tsx
View File

@ -52,7 +52,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {
// https://github.com/ant-design/ant-design/issues/11843
fontVariant: 'initial',
backgroundColor: token.colorBgElevated,
borderRadius: token.controlRadius,
borderRadius: token.controlRadiusLG,
outline: 'none',
boxShadow: token.boxShadow,

1
components/select/style/index.tsx
View File

@ -23,7 +23,6 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
position: 'relative',
backgroundColor: token.colorBgContainer,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
borderRadius: token.controlRadius,
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
input: {

7
components/select/style/multiple.tsx
View File

@ -56,6 +56,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
alignItems: 'center',
// Multiple is little different that horizontal is follow the vertical
padding: `${selectItemDist - FIXED_ITEM_MARGIN}px ${FIXED_ITEM_MARGIN * 2}px`,
borderRadius: token.controlRadius,
[`${componentCls}-show-search&`]: {
cursor: 'text',
@ -95,7 +96,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
lineHeight: `${selectItemHeight - token.controlLineWidth * 2}px`,
background: token.colorFillSecondary,
border: `${token.controlLineWidth}px solid ${token.colorSplit}`,
borderRadius: token.controlRadius,
borderRadius: token.controlRadiusSM,
cursor: 'default',
transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
userSelect: 'none',
@ -196,6 +197,8 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
const smallToken = mergeToken<SelectToken>(token, {
controlHeight: token.controlHeightSM,
controlHeightSM: token.controlHeightXS,
controlRadius: token.controlRadiusSM,
controlRadiusSM: token.controlRadiusXS,
});
const [, smSelectItemMargin] = getSelectItemStyle(token);
@ -227,6 +230,8 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
fontSize: token.fontSizeLG,
controlHeight: token.controlHeightLG,
controlHeightSM: token.controlHeight,
controlRadius: token.controlRadiusLG,
controlRadiusSM: token.controlRadius,
}),
'lg',
),

6
components/select/style/single.tsx
View File

@ -4,7 +4,7 @@ import type { SelectToken } from '.';
import { mergeToken } from '../../theme';
function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
const { componentCls, inputPaddingHorizontalBase } = token;
const { componentCls, inputPaddingHorizontalBase, controlRadius } = token;
const selectHeightWithoutBorder = token.controlHeight - token.controlLineWidth * 2;
@ -21,6 +21,8 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
...resetComponent(token),
display: 'flex',
borderRadius: controlRadius,
[`${componentCls}-selection-search`]: {
position: 'absolute',
top: 0,
@ -143,6 +145,7 @@ export default function genSingleStyle(token: SelectToken): CSSInterpolation {
genSizeStyle(
mergeToken<any>(token, {
controlHeight: token.controlHeightSM,
controlRadius: token.controlRadiusSM,
}),
'sm',
),
@ -182,6 +185,7 @@ export default function genSingleStyle(token: SelectToken): CSSInterpolation {
mergeToken<any>(token, {
controlHeight: token.controlHeightLG,
fontSize: token.fontSizeLG,
controlRadius: token.controlRadiusLG,
}),
'lg',
),

6
components/skeleton/style/index.tsx
View File

@ -171,14 +171,14 @@ const genSkeletonElementButtonSize = (size: number): CSSObject => ({
});
const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
const { radiusBase, skeletonButtonCls, controlHeight, controlHeightLG, controlHeightSM, color } =
const { radiusSM, skeletonButtonCls, controlHeight, controlHeightLG, controlHeightSM, color } =
token;
return {
[`${skeletonButtonCls}`]: {
display: 'inline-block',
verticalAlign: 'top',
background: color,
borderRadius: radiusBase,
borderRadius: radiusSM,
width: controlHeight * 2,
minWidth: controlHeight * 2,
...genSkeletonElementButtonSize(controlHeight),
@ -353,7 +353,7 @@ export default genComponentStyleHook(
skeletonImageCls: `${componentCls}-image`,
imageSizeBase: token.controlHeight * 1.5,
skeletonTitleHeight: token.controlHeight / 2,
skeletonBlockRadius: token.radiusLG,
skeletonBlockRadius: token.radiusSM,
skeletonParagraphLineHeight: token.controlHeight / 2,
skeletonParagraphMarginTop: token.marginLG + token.marginXXS,
borderRadius: 100, // Large number to make capsule shape

4
components/slider/style/index.tsx
View File

@ -56,14 +56,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
[`${componentCls}-rail`]: {
position: 'absolute',
backgroundColor: token.colorFillSecondary,
borderRadius: token.controlRadius,
borderRadius: token.controlRadiusXS,
transition: `background-color ${token.motionDurationSlow}`,
},
[`${componentCls}-track`]: {
position: 'absolute',
backgroundColor: token.colorPrimaryBorder,
borderRadius: token.controlRadius,
borderRadius: token.controlRadiusXS,
transition: `background-color ${token.motionDurationSlow}`,
},

4
components/style/placementArrow.tsx
View File

@ -12,7 +12,7 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
colorBg: string,
showArrowCls?: string,
): CSSInterpolation {
const { componentCls, sizePopupArrow, marginXXS } = token;
const { componentCls, sizePopupArrow, marginXXS, radiusXS, radiusOuter } = token;
const dropdownArrowOffset = (sizePopupArrow / Math.sqrt(2)) * 2;
const dropdownArrowDistance = sizePopupArrow + marginXXS;
@ -28,7 +28,7 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
width: sizePopupArrow,
height: sizePopupArrow,
...roundedArrow(sizePopupArrow, 5, colorBg),
...roundedArrow(sizePopupArrow, radiusXS, radiusOuter, colorBg),
'&:before': {
background: colorBg,

14
components/style/roundedArrow.tsx
View File

@ -1,18 +1,22 @@
/* eslint-disable import/prefer-default-export */
import type { CSSObject } from '@ant-design/cssinjs';
export const roundedArrow = (width: number, outerRadius: number, bgColor: string): CSSObject => {
export const roundedArrow = (
width: number,
innerRadius: number,
outerRadius: number,
bgColor: string,
): CSSObject => {
const cornerHeight = outerRadius * (1 - 1 / Math.sqrt(2));
const radiusBase = 2;
const ax = width - cornerHeight;
const ay = 2 * width + cornerHeight;
const bx = ax + outerRadius * (1 / Math.sqrt(2));
const by = 2 * width;
const cx = 2 * width - radiusBase;
const cx = 2 * width - innerRadius;
const cy = 2 * width;
const dx = 2 * width;
const dy = 2 * width - radiusBase;
const dy = 2 * width - innerRadius;
const fx = 2 * width + cornerHeight;
const fy = width - cornerHeight;
const ex = 2 * width;
@ -33,7 +37,7 @@ export const roundedArrow = (width: number, outerRadius: number, bgColor: string
backgroundRepeat: 'no-repeat',
backgroundPosition: `${Math.ceil(-width + 1)}px ${Math.ceil(-width + 1)}px`,
content: '""',
clipPath: `path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 1 ${bx} ${by} L ${cx} ${cy} A ${radiusBase} ${radiusBase} 0 0 0 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 1 ${fx} ${fy} Z')`,
clipPath: `path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 1 ${bx} ${by} L ${cx} ${cy} A ${innerRadius} ${innerRadius} 0 0 0 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 1 ${fx} ${fy} Z')`,
},
};
};

4
components/table/style/index.tsx
View File

@ -239,7 +239,7 @@ export default genComponentStyleHook('Table', token => {
opacityLoading,
colorBgContainer,
colorFillSecondary,
radiusBase,
radiusLG,
colorFillContent,
controlInteractiveSize: checkboxSize,
} = token;
@ -253,7 +253,7 @@ export default genComponentStyleHook('Table', token => {
const tableToken = mergeToken<TableToken>(token, {
tableFontSize: fontSize,
tableBg: colorBgContainer,
tableRadius: radiusBase,
tableRadius: radiusLG,
tablePaddingVertical: padding,
tablePaddingHorizontal: padding,

38
components/tabs/style/index.tsx
View File

@ -67,7 +67,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
[`&${componentCls}-top`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-tab`]: {
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`,
},
[`${componentCls}-tab-active`]: {
@ -79,7 +79,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
[`&${componentCls}-bottom`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
[`${componentCls}-tab`]: {
borderRadius: `0 0 ${token.radiusBase}px ${token.radiusBase}px`,
borderRadius: `0 0 ${token.radiusLG}px ${token.radiusLG}px`,
},
[`${componentCls}-tab-active`]: {
@ -102,7 +102,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
[`${componentCls}-tab`]: {
borderRadius: {
_skip_check_: true,
value: `${token.radiusBase}px 0 0 ${token.radiusBase}px`,
value: `${token.radiusLG}px 0 0 ${token.radiusLG}px`,
},
},
@ -120,7 +120,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
[`${componentCls}-tab`]: {
borderRadius: {
_skip_check_: true,
value: `0 ${token.radiusBase}px ${token.radiusBase}px 0`,
value: `0 ${token.radiusLG}px ${token.radiusLG}px 0`,
},
},
@ -168,7 +168,7 @@ const genDropdownStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
listStyleType: 'none',
backgroundColor: token.colorBgContainer,
backgroundClip: 'padding-box',
borderRadius: token.radiusBase,
borderRadius: token.radiusLG,
outline: 'none',
boxShadow: token.boxShadow,
@ -486,6 +486,32 @@ const genSizeStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
padding: `${token.paddingXXS * 1.5}px ${padding}px`,
},
},
[`&${componentCls}-bottom`]: {
[`> ${componentCls}-nav ${componentCls}-tab`]: {
borderRadius: `0 0 ${token.radiusBase}px ${token.radiusBase}px`,
},
},
[`&${componentCls}-top`]: {
[`> ${componentCls}-nav ${componentCls}-tab`]: {
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,
},
},
[`&${componentCls}-right`]: {
[`> ${componentCls}-nav ${componentCls}-tab`]: {
borderRadius: {
_skip_check_: true,
value: `0 ${token.radiusBase}px ${token.radiusBase}px 0`,
},
},
},
[`&${componentCls}-left`]: {
[`> ${componentCls}-nav ${componentCls}-tab`]: {
borderRadius: {
_skip_check_: true,
value: `${token.radiusBase}px 0 0 ${token.radiusBase}px`,
},
},
},
},
[`&${componentCls}-large`]: {
@ -774,7 +800,7 @@ const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
padding: `0 ${token.paddingXS}px`,
background: 'transparent',
border: `${token.controlLineWidth}px ${token.controlLineType} ${colorSplit}`,
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`,
outline: 'none',
cursor: 'pointer',
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,

2
components/tag/style/index.tsx
View File

@ -72,7 +72,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
whiteSpace: 'nowrap',
background: token.tagDefaultBg,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
borderRadius: token.controlRadius,
borderRadius: token.radiusSM,
opacity: 1,
transition: `all ${token.motionDurationSlow}`,
textAlign: 'start',

6
components/theme/interface.ts
View File

@ -321,9 +321,10 @@ export interface CommonMapToken {
motionDurationSlow: string;
// Radius
radiusXS: number;
radiusSM: number;
radiusLG: number;
radiusXL: number;
radiusOuter: number;
// Control
/** @private Only Used for control inside component like Multiple Select inner selection item */
@ -407,6 +408,9 @@ export interface AliasToken extends MapToken {
controlLineWidth: number;
controlLineType: string;
controlRadius: number;
controlRadiusXS: number;
controlRadiusSM: number;
controlRadiusLG: number;
controlOutlineWidth: number;
controlItemBgHover: string; // Note. It also is a color
controlItemBgActive: string; // Note. It also is a color

2
components/theme/themes/seed.ts
View File

@ -57,7 +57,7 @@ const seedToken: SeedToken = {
motionEaseOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,
// Radius
radiusBase: 2,
radiusBase: 6,
// Size
sizeUnit: 4,

7
components/theme/themes/shared/genCommonMapToken.ts
View File

@ -44,9 +44,10 @@ export default function genCommonMapToken(token: SeedToken): CommonMapToken {
lineWidthBold: lineWidth + 1,
// radius
radiusSM: radiusBase / 2,
radiusLG: radiusBase * 2,
radiusXL: radiusBase * 4,
radiusXS: radiusBase / 3,
radiusSM: (radiusBase * 2) / 3,
radiusLG: (radiusBase * 4) / 3,
radiusOuter: (radiusBase * 4) / 3,
// control
controlHeightSM: controlHeight * 0.75,

3
components/theme/util/alias.ts
View File

@ -95,6 +95,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
controlLineType: mergedToken.lineType,
controlRadius: mergedToken.radiusBase,
controlRadiusXS: mergedToken.radiusXS,
controlRadiusSM: mergedToken.radiusSM,
controlRadiusLG: mergedToken.radiusLG,
fontWeightStrong: 600,

8
components/tooltip/style/index.tsx
View File

@ -101,7 +101,13 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
},
// Arrow Style
getArrowStyle(token, 'var(--antd-arrow-background-color)', ''),
getArrowStyle(
mergeToken(token, {
radiusOuter: 5,
}),
'var(--antd-arrow-background-color)',
'',
),
// Pure Render
{

4
components/transfer/style/index.tsx
View File

@ -114,7 +114,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
width: listWidth,
height: listHeight,
border: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
borderRadius: token.radiusBase,
borderRadius: token.controlRadiusLG,
'&-with-pagination': {
width: listWidthLG,
@ -139,7 +139,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
color: token.colorText,
background: token.colorBgContainer,
borderBottom: `${controlLineWidth}px ${controlLineType} ${colorSplit}`,
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,
borderRadius: `${token.controlRadiusLG}px ${token.controlRadiusLG}px 0 0`,
'> *:not(:last-child)': {
marginInlineEnd: marginXXS,

2
components/upload/style/dragger.tsx
View File

@ -13,7 +13,7 @@ const genDraggerStyle: GenerateStyle<UploadToken> = token => {
textAlign: 'center',
background: token.colorFillAlter,
border: `${token.controlLineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.radiusBase,
borderRadius: token.controlRadiusLG,
cursor: 'pointer',
transition: `border-color ${token.motionDurationSlow}`,

4
components/upload/style/picture.tsx
View File

@ -17,7 +17,7 @@ const genPictureStyle: GenerateStyle<UploadToken> = token => {
height: uploadThumbnailSize + token.controlLineWidth * 2 + token.paddingXS * 2,
padding: token.paddingXS,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
borderRadius: token.radiusBase,
borderRadius: token.controlRadiusLG,
'&:hover': {
background: 'transparent',
@ -101,7 +101,7 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = token => {
verticalAlign: 'top',
backgroundColor: token.colorFillAlter,
border: `${token.controlLineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.radiusBase,
borderRadius: token.controlRadiusLG,
cursor: 'pointer',
transition: `border-color ${token.motionDurationSlow}`,