feat: radius token algorithm (#37341)

* feat: radius token

* test: add test case

* feat: linear after 16

* test: more test case

components/theme/__tests__/token.test.tsx

@@ -1,5 +1,6 @@
 import { Theme } from '@ant-design/cssinjs';
 import * as React from 'react';
+import genRadius from '../themes/shared/genRadius';
 import { render, renderHook } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import theme from '../export';
@@ -46,4 +47,27 @@ describe('Theme', () => {
       }),
     );
   });
+
+  describe('radius should be computed as expected', () => {
+    const radiusGroup = {
+      0: { radiusBase: 0, radiusLG: 0, radiusSM: 0, radiusXS: 0, radiusOuter: 0 },
+      2: { radiusBase: 2, radiusLG: 2, radiusSM: 2, radiusXS: 1, radiusOuter: 2 },
+      4: { radiusBase: 4, radiusLG: 4, radiusSM: 4, radiusXS: 1, radiusOuter: 4 },
+      5: { radiusBase: 5, radiusLG: 6, radiusSM: 4, radiusXS: 1, radiusOuter: 4 },
+      6: { radiusBase: 6, radiusLG: 8, radiusSM: 4, radiusXS: 2, radiusOuter: 4 },
+      7: { radiusBase: 7, radiusLG: 9, radiusSM: 5, radiusXS: 2, radiusOuter: 4 },
+      8: { radiusBase: 8, radiusLG: 10, radiusSM: 6, radiusXS: 2, radiusOuter: 6 },
+      10: { radiusBase: 10, radiusLG: 12, radiusSM: 6, radiusXS: 2, radiusOuter: 6 },
+      12: { radiusBase: 12, radiusLG: 14, radiusSM: 6, radiusXS: 2, radiusOuter: 6 },
+      14: { radiusBase: 14, radiusLG: 16, radiusSM: 7, radiusXS: 2, radiusOuter: 6 },
+      16: { radiusBase: 16, radiusLG: 16, radiusSM: 8, radiusXS: 2, radiusOuter: 6 },
+      20: { radiusBase: 20, radiusLG: 20, radiusSM: 10, radiusXS: 2, radiusOuter: 6 },
+    };
+
+    Object.entries(radiusGroup).forEach(([base, result]) => {
+      it(`base ${base}`, () => {
+        expect(genRadius(Number(base))).toMatchObject(result);
+      });
+    });
+  });
 });

components/theme/themes/shared/genCommonMapToken.ts

@@ -1,5 +1,6 @@
 import type { CommonMapToken, SeedToken } from '../../interface';
 import genFontSizes from './genFontSizes';
+import genRadius from './genRadius';
 
 export default function genCommonMapToken(token: SeedToken): CommonMapToken {
   const {
@@ -44,10 +45,7 @@ export default function genCommonMapToken(token: SeedToken): CommonMapToken {
     lineWidthBold: lineWidth + 1,
 
     // radius
-    radiusXS: radiusBase / 3,
+    ...genRadius(radiusBase),
-    radiusSM: (radiusBase * 2) / 3,
-    radiusLG: (radiusBase * 4) / 3,
-    radiusOuter: (radiusBase * 4) / 3,
 
     // control
     controlHeightSM: controlHeight * 0.75,

components/theme/themes/shared/genRadius.ts

@@ -0,0 +1,56 @@
+import type { MapToken } from '../../interface';
+
+const genRadius = (
+  radiusBase: number,
+): Pick<MapToken, 'radiusXS' | 'radiusSM' | 'radiusLG' | 'radiusBase' | 'radiusOuter'> => {
+  let radiusLG = radiusBase;
+  let radiusSM = radiusBase;
+  let radiusXS = radiusBase;
+  let radiusOuter = radiusBase;
+
+  // radiusLG
+  if (radiusBase < 6 && radiusBase >= 5) {
+    radiusLG = radiusBase + 1;
+  } else if (radiusBase < 16 && radiusBase >= 6) {
+    radiusLG = radiusBase + 2;
+  } else if (radiusBase >= 16) {
+    radiusLG = radiusBase;
+  }
+
+  // radiusSM
+  if (radiusBase < 7 && radiusBase >= 5) {
+    radiusSM = 4;
+  } else if (radiusBase < 8 && radiusBase >= 7) {
+    radiusSM = 5;
+  } else if (radiusBase < 14 && radiusBase >= 8) {
+    radiusSM = 6;
+  } else if (radiusBase < 16 && radiusBase >= 14) {
+    radiusSM = 7;
+  } else if (radiusBase >= 16) {
+    radiusSM = radiusBase / 2;
+  }
+
+  // radiusXS
+  if (radiusBase < 6 && radiusBase >= 2) {
+    radiusXS = 1;
+  } else if (radiusBase >= 6) {
+    radiusXS = 2;
+  }
+
+  // radiusOuter
+  if (radiusBase > 4 && radiusBase < 8) {
+    radiusOuter = 4;
+  } else if (radiusBase >= 8) {
+    radiusOuter = 6;
+  }
+
+  return {
+    radiusBase,
+    radiusXS,
+    radiusSM,
+    radiusLG,
+    radiusOuter,
+  };
+};
+
+export default genRadius;

components/theme/themes/v4/dark.ts

@@ -60,12 +60,6 @@ const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
   return {
     ...mergedMapToken,
 
-    // Radius
-    radiusLG: token.radiusBase,
-    radiusSM: token.radiusBase,
-    radiusXS: token.radiusBase,
-    radiusOuter: 5,
-
     // Colors
     ...genColorMapToken(token, {
       generateColorPalettes,

components/theme/themes/v4/default.ts

@@ -60,12 +60,6 @@ const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
   return {
     ...mergedMapToken,
 
-    // Radius
-    radiusLG: token.radiusBase,
-    radiusSM: token.radiusBase,
-    radiusXS: token.radiusBase,
-    radiusOuter: 5,
-
     // Colors
     ...genColorMapToken(token, {
       generateColorPalettes,

components/tooltip/style/index.tsx

@@ -21,6 +21,7 @@ interface TooltipToken extends FullToken<'Tooltip'> {
   tooltipColor: string;
   tooltipBg: string;
   tooltipBorderRadius: number;
+  tooltipRadiusOuter: number;
 }
 
 const generatorTooltipPresetColor: GenerateStyle<TooltipToken, CSSObject> = token => {
@@ -52,6 +53,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
     boxShadowSecondary,
     paddingSM,
     paddingXS,
+    tooltipRadiusOuter,
   } = token;
 
   return [
@@ -99,9 +101,9 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
     },
 
     // Arrow Style
-    getArrowStyle(
+    getArrowStyle<TooltipToken>(
-      mergeToken(token, {
+      mergeToken<TooltipToken>(token, {
-        radiusOuter: 5,
+        radiusOuter: tooltipRadiusOuter,
       }),
       'var(--antd-arrow-background-color)',
       '',
@@ -128,7 +130,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         return [];
       }
 
-      const { radiusBase, colorTextLightSolid, colorBgDefault } = token;
+      const { radiusBase, colorTextLightSolid, colorBgDefault, radiusOuter } = token;
 
       const TooltipToken = mergeToken<TooltipToken>(token, {
         // default variables
@@ -136,6 +138,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         tooltipColor: colorTextLightSolid,
         tooltipBorderRadius: radiusBase,
         tooltipBg: colorBgDefault,
+        tooltipRadiusOuter: radiusOuter > 4 ? 4 : radiusOuter,
       });
 
       return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];