feat: v5 radius (#37146)

* feat: v5 radius

* test: fix test

components/alert/style/index.tsx

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

components/avatar/style/index.tsx

@@ -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),
+        ...avatarSizeStyle(avatarSizeSM, avatarFontSizeSM, controlRadiusSM),
-      },
-
-      [`&-square`]: {
-        borderRadius: avatarBorderRadius,
       },
 
       '> 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,

components/badge/style/index.tsx

@@ -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',

components/button/style/index.tsx

@@ -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`);

components/calendar/demo/card.md

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

components/calendar/style/index.tsx

@@ -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,

components/card/style/index.tsx

@@ -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`,
         },
       },
 

components/checkbox/style/index.tsx

@@ -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,

components/collapse/style/index.tsx

@@ -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 [

components/date-picker/style/index.tsx

@@ -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,
+        borderStartStartRadius: token.controlRadiusSM,
-        borderEndStartRadius: token.radiusBase,
+        borderEndStartRadius: token.controlRadiusSM,
         borderStartEndRadius: 0,
         borderEndEndRadius: 0,
       },
@@ -198,8 +198,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
       {
         borderStartStartRadius: 0,
         borderEndStartRadius: 0,
-        borderStartEndRadius: token.radiusBase,
+        borderStartEndRadius: token.controlRadiusSM,
-        borderEndEndRadius: token.radiusBase,
+        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,
+          borderStartStartRadius: token.controlRadiusSM,
-          borderBottomStartRadius: token.radiusBase,
+          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,
+            borderStartEndRadius: token.controlRadiusSM,
-            borderBottomEndRadius: token.radiusBase,
+            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,
+          borderStartEndRadius: token.controlRadius,
-          borderBottomEndRadius: token.radiusBase,
+          borderBottomEndRadius: token.controlRadius,
 
           [`${componentCls}-panel-rtl &`]: {
             insetInlineStart: hoverCellFixedDistance,
             borderInlineStart: `${token.controlLineWidth}px dashed ${token.pickerDateHoverRangeBorderColor}`,
-            borderStartStartRadius: token.radiusBase,
+            borderStartStartRadius: token.controlRadius,
-            borderBottomStartRadius: token.radiusBase,
+            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}`,
 

components/descriptions/style/index.tsx

@@ -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',

components/dropdown/style/index.tsx

@@ -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,
 

components/input-number/index.tsx

@@ -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-sm`]: mergeSize === 'small',
-        [`${prefixCls}-affix-wrapper-lg`]: size === 'large',
+        [`${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-sm`]: mergeSize === 'small',
-        [`${prefixCls}-group-wrapper-lg`]: size === 'large',
+        [`${prefixCls}-group-wrapper-lg`]: mergeSize === 'large',
         [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
       },
       getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback),

components/input-number/style/index.tsx

@@ -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,

components/input/style/index.tsx

@@ -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`]: {

components/list/style/index.tsx

@@ -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,
       },

components/mentions/style/index.tsx

@@ -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,
+              borderStartStartRadius: controlRadiusLG,
-              borderStartEndRadius: controlRadius,
+              borderStartEndRadius: controlRadiusLG,
               borderEndStartRadius: 0,
               borderEndEndRadius: 0,
             },
@@ -186,8 +186,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
             '&:last-child': {
               borderStartStartRadius: 0,
               borderStartEndRadius: 0,
-              borderEndStartRadius: controlRadius,
+              borderEndStartRadius: controlRadiusLG,
-              borderEndEndRadius: controlRadius,
+              borderEndEndRadius: controlRadiusLG,
             },
 
             '&-disabled': {

components/message/style/index.tsx

@@ -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',
         },

components/modal/style/index.tsx

@@ -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,

components/notification/style/index.tsx

@@ -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`]: {

components/popover/style/index.tsx

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

components/radio/style/index.tsx

@@ -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,

components/segmented/style/index.tsx

@@ -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`]: {
+      '&&-lg': {
-        minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
+        borderRadius: token.controlRadiusLG,
-        lineHeight: `${token.controlHeightLG - token.segmentedContainerPadding * 2}px`,
+        [`${componentCls}-item-label`]: {
-        padding: `0 ${token.segmentedPaddingHorizontal}px`,
+          minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
-        fontSize: token.fontSizeLG,
+          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`]: {
+      '&&-sm': {
-        minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
+        borderRadius: token.controlRadiusSM,
-        lineHeight: `${token.controlHeightSM - token.segmentedContainerPadding * 2}px`,
+        [`&&-sm ${componentCls}-item-label`]: {
-        padding: `0 ${token.segmentedPaddingHorizontalSM}px`,
+          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

components/select/style/dropdown.tsx

@@ -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,
 

components/select/style/index.tsx

@@ -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: {

components/select/style/multiple.tsx

@@ -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',
     ),

components/select/style/single.tsx

@@ -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',
     ),

components/skeleton/style/index.tsx

@@ -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

components/slider/style/index.tsx

@@ -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}`,
       },
 

components/style/placementArrow.tsx

@@ -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,

components/style/roundedArrow.tsx

@@ -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')`,
     },
   };
 };

components/table/style/index.tsx

@@ -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,

components/tabs/style/index.tsx

@@ -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}`,

components/tag/style/index.tsx

@@ -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',

components/theme/interface.ts

@@ -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

components/theme/themes/seed.ts

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

components/theme/themes/shared/genCommonMapToken.ts

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

components/theme/util/alias.ts

@@ -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,
 

components/tooltip/style/index.tsx

@@ -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
     {

components/transfer/style/index.tsx

@@ -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,

components/upload/style/dragger.tsx

@@ -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}`,
 

components/upload/style/picture.tsx

@@ -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}`,