perf: token update (#39428)

* fix: token update

* refactor: font map token

* chore: code clean

* chore: code clean

* chore: code clean

* chore: update snapshot

* chore: menu style

components/input/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -46,7 +46,7 @@ exports[`renders ./components/input/demo/addon.tsx extend context correctly 1`]
           class="ant-input-group-addon"
         >
           <div
-            class="ant-select select-before ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -196,7 +196,7 @@ exports[`renders ./components/input/demo/addon.tsx extend context correctly 1`]
           class="ant-input-group-addon"
         >
           <div
-            class="ant-select select-after ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"

components/input/__tests__/__snapshots__/demo.test.ts.snap

@@ -46,7 +46,7 @@ exports[`renders ./components/input/demo/addon.tsx correctly 1`] = `
           class="ant-input-group-addon"
         >
           <div
-            class="ant-select select-before ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"
@@ -114,7 +114,7 @@ exports[`renders ./components/input/demo/addon.tsx correctly 1`] = `
           class="ant-input-group-addon"
         >
           <div
-            class="ant-select select-after ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"

components/input/demo/addon.md

@@ -5,21 +5,3 @@
 ## en-US
 
 Using pre & post tabs example.
-
-```css
-.select-before {
-  width: 90px;
-}
-
-.select-after {
-  width: 80px;
-}
-
-[data-theme='compact'] .select-before {
-  width: 71px;
-}
-
-[data-theme='compact'] .select-after {
-  width: 65px;
-}
-```

components/input/demo/addon.tsx

@@ -5,13 +5,13 @@ import { Cascader, Input, Select, Space } from 'antd';
 const { Option } = Select;
 
 const selectBefore = (
-  <Select defaultValue="http://" className="select-before">
+  <Select defaultValue="http://">
     <Option value="http://">http://</Option>
     <Option value="https://">https://</Option>
   </Select>
 );
 const selectAfter = (
-  <Select defaultValue=".com" className="select-after">
+  <Select defaultValue=".com">
     <Option value=".com">.com</Option>
     <Option value=".jp">.jp</Option>
     <Option value=".cn">.cn</Option>

components/input/style/index.tsx

@@ -11,6 +11,7 @@ export type InputToken<T extends GlobalToken = FullToken<'Input'>> = T & {
   inputPaddingVerticalLG: number;
   inputPaddingVerticalSM: number;
   inputPaddingHorizontal: number;
+  inputPaddingHorizontalLG: number;
   inputPaddingHorizontalSM: number;
   inputBorderHoverColor: string;
   inputBorderActiveColor: string;
@@ -58,14 +59,14 @@ export const genDisabledStyle = (token: InputToken): CSSObject => ({
 const genInputLargeStyle = (token: InputToken): CSSObject => {
   const {
     inputPaddingVerticalLG,
-    inputPaddingHorizontal,
     fontSizeLG,
     lineHeightLG,
     borderRadiusLG,
+    inputPaddingHorizontalLG,
   } = token;
 
   return {
-    padding: `${inputPaddingVerticalLG}px ${inputPaddingHorizontal}px`,
+    padding: `${inputPaddingVerticalLG}px ${inputPaddingHorizontalLG}px`,
     fontSize: fontSizeLG,
     lineHeight: lineHeightLG,
     borderRadius: borderRadiusLG,
@@ -860,8 +861,9 @@ export function initInputToken<T extends GlobalToken = GlobalToken>(token: T): I
         token.lineWidth,
       0,
     ),
-    inputPaddingHorizontal: token.controlPaddingHorizontal - token.lineWidth,
+    inputPaddingHorizontal: token.paddingSM - token.lineWidth,
-    inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.lineWidth,
+    inputPaddingHorizontalSM: token.paddingXS - token.lineWidth,
+    inputPaddingHorizontalLG: token.controlPaddingHorizontal - token.lineWidth,
     inputBorderHoverColor: token.colorPrimaryHover,
     inputBorderActiveColor: token.colorPrimaryHover,
   });

components/message/style/index.tsx

@@ -167,7 +167,7 @@ export default genComponentStyleHook(
     const combinedToken = mergeToken<MessageToken>(token, {
       messageNoticeContentPadding: `${
         (token.controlHeightLG - token.fontSize * token.lineHeight) / 2
-      }px ${token.paddingContentVertical}px`,
+      }px ${token.paddingSM}px`,
     });
     return [genMessageStyle(combinedToken)];
   },

components/radio/style/index.tsx

@@ -497,6 +497,7 @@ export default genComponentStyleHook('Radio', (token) => {
     colorPrimary,
     marginXS,
     controlOutlineWidth,
+    colorTextLightSolid,
     wireframe,
   } = token;
 
@@ -528,7 +529,7 @@ export default genComponentStyleHook('Radio', (token) => {
     radioDotDisabledSize,
     radioCheckedColor,
     radioDotDisabledColor: colorTextDisabled,
-    radioSolidCheckedColor: colorBgContainer,
+    radioSolidCheckedColor: colorTextLightSolid,
     radioButtonBg: colorBgContainer,
     radioButtonCheckedBg: colorBgContainer,
     radioButtonColor,

components/select/style/index.tsx

@@ -329,7 +329,7 @@ export default genComponentStyleHook(
   (token, { rootPrefixCls }) => {
     const selectToken: SelectToken = mergeToken<SelectToken>(token, {
       rootPrefixCls,
-      inputPaddingHorizontalBase: token.controlPaddingHorizontal - 1,
+      inputPaddingHorizontalBase: token.paddingSM - 1,
     });
 
     return [genSelectStyle(selectToken)];

components/slider/style/index.tsx

@@ -111,7 +111,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
           insetInlineStart: 0,
           width: token.handleSize,
           height: token.handleSize,
-          backgroundColor: token.colorBgContainer,
+          backgroundColor: token.colorBgElevated,
           boxShadow: `0 0 0 ${token.handleLineWidth}px ${token.colorPrimaryBorder}`,
           borderRadius: '50%',
           cursor: 'pointer',
@@ -177,8 +177,8 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
         position: 'absolute',
         width: dotSize,
         height: dotSize,
-        backgroundColor: token.colorBgContainer,
+        backgroundColor: token.colorBgElevated,
-        border: `${token.handleLineWidth}px solid ${token.colorSplit}`,
+        border: `${token.handleLineWidth}px solid ${token.colorBorderSecondary}`,
         borderRadius: '50%',
         cursor: 'pointer',
         transition: `border-color ${token.motionDurationSlow}`,
@@ -202,14 +202,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
         [`
           ${componentCls}-dot
         `]: {
-          backgroundColor: token.colorBgContainer,
+          backgroundColor: token.colorBgElevated,
           borderColor: token.colorTextDisabled,
           boxShadow: 'none',
           cursor: 'not-allowed',
         },
 
         [`${componentCls}-handle::after`]: {
-          backgroundColor: token.colorBgContainer,
+          backgroundColor: token.colorBgElevated,
           cursor: 'not-allowed',
           width: token.handleSize,
           height: token.handleSize,
@@ -335,7 +335,7 @@ export default genComponentStyleHook(
       railSize: 4,
       handleSize: controlSize,
       handleSizeHover: controlSizeHover,
-      dotSize: (controlSize / 3) * 2,
+      dotSize: 8,
       handleLineWidth,
       handleLineWidthHover,
     };

components/theme/interface/alias.ts

@@ -48,58 +48,12 @@ export interface AliasToken extends MapToken {
   colorErrorOutline: string;
 
   // Font
-  fontSizeSM: number;
-  fontSize: number;
-  fontSizeLG: number;
-  fontSizeXL: number;
   /** Operation icon in Select, Cascader, etc. icon fontSize. Normal is same as fontSizeSM */
   fontSizeIcon: number;
 
-  /**
-   * @nameZH 一级标题字号
-   * @desc H1 标签所使用的字号
-   * @default 38
-   */
-  fontSizeHeading1: number;
-  /**
-   * @nameZH 二级标题字号
-   * @desc h2 标签所使用的字号
-   * @default 30
-   */
-  fontSizeHeading2: number;
-  /**
-   * @nameZH 三级标题字号
-   * @desc h3 标签使用的字号
-   * @default 24
-   */
-  fontSizeHeading3: number;
-  /**
-   * @nameZH 四级标题字号
-   * @desc h4 标签使用的字号
-   * @default 20
-   */
-  fontSizeHeading4: number;
-  /**
-   * @nameZH 五级标题字号
-   * @desc h5 标签使用的字号
-   * @default 16
-   */
-  fontSizeHeading5: number;
-
   /** For heading like h1, h2, h3 or option selected item */
   fontWeightStrong: number;
 
-  // LineHeight
-  lineHeight: number;
-  lineHeightLG: number;
-  lineHeightSM: number;
-
-  lineHeightHeading1: number;
-  lineHeightHeading2: number;
-  lineHeightHeading3: number;
-  lineHeightHeading4: number;
-  lineHeightHeading5: number;
-
   // Control
   controlOutlineWidth: number;
   controlItemBgHover: string; // Note. It also is a color

components/theme/interface/index.ts

@@ -18,7 +18,7 @@ export type {
   CommonMapToken,
   HeightMapToken,
   SizeMapToken,
-  FontSizeMapToken,
+  FontMapToken,
   StyleMapToken,
 } from './maps';
 export type { AliasToken } from './alias';

components/theme/interface/maps/font.ts

@@ -0,0 +1,49 @@
+export interface FontMapToken {
+  // Font Size
+  fontSizeSM: number;
+  fontSize: number;
+  fontSizeLG: number;
+  fontSizeXL: number;
+
+  /**
+   * @nameZH 一级标题字号
+   * @desc H1 标签所使用的字号
+   * @default 38
+   */
+  fontSizeHeading1: number;
+  /**
+   * @nameZH 二级标题字号
+   * @desc h2 标签所使用的字号
+   * @default 30
+   */
+  fontSizeHeading2: number;
+  /**
+   * @nameZH 三级标题字号
+   * @desc h3 标签使用的字号
+   * @default 24
+   */
+  fontSizeHeading3: number;
+  /**
+   * @nameZH 四级标题字号
+   * @desc h4 标签使用的字号
+   * @default 20
+   */
+  fontSizeHeading4: number;
+  /**
+   * @nameZH 五级标题字号
+   * @desc h5 标签使用的字号
+   * @default 16
+   */
+  fontSizeHeading5: number;
+
+  // LineHeight
+  lineHeight: number;
+  lineHeightLG: number;
+  lineHeightSM: number;
+
+  lineHeightHeading1: number;
+  lineHeightHeading2: number;
+  lineHeightHeading3: number;
+  lineHeightHeading4: number;
+  lineHeightHeading5: number;
+}

components/theme/interface/maps/index.ts

@@ -1,14 +1,16 @@
 import type { ColorPalettes } from '../presetColors';
 import type { SeedToken } from '../seeds';
-import type { SizeMapToken, HeightMapToken, FontSizeMapToken } from './size';
+import type { SizeMapToken, HeightMapToken } from './size';
 import type { ColorMapToken } from './colors';
 import type { StyleMapToken } from './style';
+import type { FontMapToken } from './font';
 
 export * from './colors';
 export * from './style';
 export * from './size';
+export * from './font';
 
-export interface CommonMapToken extends FontSizeMapToken, StyleMapToken {
+export interface CommonMapToken extends StyleMapToken {
   // Motion
   motionDurationFast: string;
   motionDurationMid: string;
@@ -27,4 +29,5 @@ export interface MapToken
     SizeMapToken,
     HeightMapToken,
     StyleMapToken,
+    FontMapToken,
     CommonMapToken {}

components/theme/interface/maps/size.ts

@@ -53,15 +53,3 @@ export interface HeightMapToken {
   /** @internal */
   controlHeightLG: number;
 }
-
-// Font
-export interface FontSizeMapToken {
-  /**
-   * @internal
-   */
-  fontSizes: number[];
-  /**
-   * @internal
-   */
-  lineHeights: number[];
-}

components/theme/themes/compact/index.ts

@@ -1,15 +1,14 @@
 import type { DerivativeFunc } from '@ant-design/cssinjs';
 import genControlHeight from '../shared/genControlHeight';
-import type { SeedToken, MapToken } from '../../interface';
+import type { MapToken, SeedToken } from '../../interface';
 import defaultAlgorithm from '../default';
 import genCompactSizeMapToken from './genCompactSizeMapToken';
-import getFontSizes from '../shared/genFontSizes';
+import genFontMapToken from '../shared/genFontMapToken';
 
 const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
   const mergedMapToken = mapToken ?? defaultAlgorithm(token);
 
-  const fontSize = mergedMapToken.fontSizes[0]; // Smaller size font-size as base
+  const fontSize = mergedMapToken.fontSizeSM; // Smaller size font-size as base
-  const fontSizes = getFontSizes(fontSize);
   const controlHeight = mergedMapToken.controlHeight - 4;
 
   return {
@@ -17,8 +16,7 @@ const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
     ...genCompactSizeMapToken(mapToken ?? token),
 
     // font
-    fontSizes: fontSizes.map((fs) => fs.size),
+    ...genFontMapToken(fontSize),
-    lineHeights: fontSizes.map((fs) => fs.lineHeight),
 
     // controlHeight
     controlHeight,

components/theme/themes/default/index.ts

@@ -6,6 +6,7 @@ import { defaultPresetColors } from '../seed';
 import genColorMapToken from '../shared/genColorMapToken';
 import genCommonMapToken from '../shared/genCommonMapToken';
 import { generateColorPalettes, generateNeutralColorPalettes } from './colors';
+import genFontMapToken from '../shared/genFontMapToken';
 
 export default function derivative(token: SeedToken): MapToken {
   const colorPalettes = Object.keys(defaultPresetColors)
@@ -33,6 +34,8 @@ export default function derivative(token: SeedToken): MapToken {
       generateColorPalettes,
       generateNeutralColorPalettes,
     }),
+    // Font
+    ...genFontMapToken(token.fontSize),
     // Size
     ...genSizeMapToken(token),
     // Height

components/theme/themes/shared/genCommonMapToken.ts

@@ -1,11 +1,8 @@
 import type { CommonMapToken, SeedToken } from '../../interface';
-import genFontSizes from './genFontSizes';
 import genRadius from './genRadius';
 
 export default function genCommonMapToken(token: SeedToken): CommonMapToken {
-  const { motionUnit, motionBase, fontSize, borderRadius, lineWidth } = token;
+  const { motionUnit, motionBase, borderRadius, lineWidth } = token;
-
-  const fontSizes = genFontSizes(fontSize);
 
   return {
     // motion
@@ -13,10 +10,6 @@ export default function genCommonMapToken(token: SeedToken): CommonMapToken {
     motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`,
     motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`,
 
-    // font
-    fontSizes: fontSizes.map((fs) => fs.size),
-    lineHeights: fontSizes.map((fs) => fs.lineHeight),
-
     // line
     lineWidthBold: lineWidth + 1,
 

components/theme/themes/shared/genFontMapToken.ts

@@ -0,0 +1,33 @@
+import type { FontMapToken } from '../../interface';
+import genFontSizes from './genFontSizes';
+
+const genFontMapToken = (fontSize: number): FontMapToken => {
+  const fontSizePairs = genFontSizes(fontSize);
+  const fontSizes = fontSizePairs.map((pair) => pair.size);
+  const lineHeights = fontSizePairs.map((pair) => pair.lineHeight);
+
+  return {
+    fontSizeSM: fontSizes[0],
+    fontSize: fontSizes[1],
+    fontSizeLG: fontSizes[2],
+    fontSizeXL: fontSizes[3],
+
+    fontSizeHeading1: fontSizes[6],
+    fontSizeHeading2: fontSizes[5],
+    fontSizeHeading3: fontSizes[4],
+    fontSizeHeading4: fontSizes[3],
+    fontSizeHeading5: fontSizes[2],
+
+    lineHeight: lineHeights[1],
+    lineHeightLG: lineHeights[2],
+    lineHeightSM: lineHeights[0],
+
+    lineHeightHeading1: lineHeights[6],
+    lineHeightHeading2: lineHeights[5],
+    lineHeightHeading3: lineHeights[4],
+    lineHeightHeading4: lineHeights[3],
+    lineHeightHeading5: lineHeights[2],
+  };
+};
+
+export default genFontMapToken;

components/theme/util/alias.ts

@@ -24,7 +24,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     ...overrideTokens,
   };
 
-  const { fontSizes, lineHeights } = mergedToken;
   const screenXS = 480;
   const screenSM = 576;
   const screenMD = 768;
@@ -32,8 +31,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
   const screenXL = 1200;
   const screenXXL = 1600;
 
-  const fontSizeSM = fontSizes[0];
-
   // Generate alias token
   const aliasToken: AliasToken = {
     ...mergedToken,
@@ -70,26 +67,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     colorWarningOutline: getAlphaColor(mergedToken.colorWarningBg, mergedToken.colorBgContainer),
 
     // Font
-    fontSizeSM,
+    fontSizeIcon: mergedToken.fontSizeSM,
-    fontSize: fontSizes[1],
-    fontSizeLG: fontSizes[2],
-    fontSizeXL: fontSizes[3],
-    fontSizeHeading1: fontSizes[6],
-    fontSizeHeading2: fontSizes[5],
-    fontSizeHeading3: fontSizes[4],
-    fontSizeHeading4: fontSizes[3],
-    fontSizeHeading5: fontSizes[2],
-    fontSizeIcon: fontSizeSM,
-
-    lineHeight: lineHeights[1],
-    lineHeightLG: lineHeights[2],
-    lineHeightSM: lineHeights[0],
-
-    lineHeightHeading1: lineHeights[6],
-    lineHeightHeading2: lineHeights[5],
-    lineHeightHeading3: lineHeights[4],
-    lineHeightHeading4: lineHeights[3],
-    lineHeightHeading5: lineHeights[2],
 
     // Control
     lineWidth: mergedToken.lineWidth,