feat: input token (#44325)

* feat: input token

* feat: input number token

* feat: input token

* fix: date-picker & calendar

* fix: calendar style

* fix: token use

components/calendar/style/index.ts

@@ -1,8 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { PickerPanelToken } from '../../date-picker/style';
 import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style';
-import type { InputToken } from '../../input/style';
-import { initInputToken } from '../../input/style';
 import { resetComponent } from '../../style';
 import type { FullToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@@ -40,7 +38,7 @@ export interface ComponentToken {
   itemActiveBg: string;
 }
 
-interface CalendarToken extends InputToken<FullToken<'Calendar'>>, PickerPanelToken {
+interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken {
   calendarCls: string;
   dateValueHeight: number;
   weekHeight: number;
@@ -215,18 +213,14 @@ export default genComponentStyleHook(
   'Calendar',
   (token) => {
     const calendarCls = `${token.componentCls}-calendar`;
-    const calendarToken = mergeToken<CalendarToken>(
+    const calendarToken = mergeToken<CalendarToken>(token, initPickerPanelToken(token), {
-      initInputToken<FullToken<'Calendar'>>(token),
-      initPickerPanelToken(token),
-      {
       calendarCls,
       pickerCellInnerCls: `${token.componentCls}-cell-inner`,
       dateValueHeight: token.controlHeightSM,
       weekHeight: token.controlHeightSM * 0.75,
       dateContentHeight:
         (token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2,
-      },
+    });
-    );
 
     return [genCalendarStyles(calendarToken)];
   },

components/date-picker/style/index.ts

@@ -1,10 +1,11 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import type { InputToken } from '../../input/style';
+import type { SharedComponentToken, SharedInputToken } from '../../input/style';
 import {
   genActiveStyle,
   genBasicInputStyle,
   genHoverStyle,
+  initComponentToken,
   initInputToken,
 } from '../../input/style';
 import { resetComponent, roundedArrow, textEllipsis } from '../../style';
@@ -22,7 +23,7 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 
-export interface ComponentToken {
+export interface ComponentToken extends Exclude<SharedComponentToken, 'addonBg'> {
   /**
    * @desc 预设区域宽度
    * @descEN Width of preset area
@@ -61,9 +62,9 @@ export type PickerPanelToken = {
   pickerControlIconBorderWidth: number;
 };
 
-type PickerToken = InputToken<FullToken<'DatePicker'>> & PickerPanelToken;
+type PickerToken = FullToken<'DatePicker'> & PickerPanelToken & SharedInputToken;
 
-type SharedPickerToken = Omit<PickerToken, 'zIndexPopup' | 'presetsWidth' | 'presetsMaxWidth'>;
+type SharedPickerToken = TokenWithCommonCls<GlobalToken> & PickerPanelToken;
 
 const genPikerPadding = (
   token: PickerToken,
@@ -951,8 +952,8 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
         [`&${componentCls}-focused, &:focus`]: {
           ...genActiveStyle(
             mergeToken<PickerToken>(token, {
-              inputBorderActiveColor: colorError,
+              activeBorderColor: colorError,
-              inputBorderHoverColor: colorError,
+              hoverBorderColor: colorError,
               controlOutline: colorErrorOutline,
             }),
           ),
@@ -972,8 +973,8 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
         [`&${componentCls}-focused, &:focus`]: {
           ...genActiveStyle(
             mergeToken<PickerToken>(token, {
-              inputBorderActiveColor: colorWarning,
+              activeBorderColor: colorWarning,
-              inputBorderHoverColor: colorWarning,
+              hoverBorderColor: colorWarning,
               controlOutline: colorWarningOutline,
             }),
           ),
@@ -993,7 +994,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
     antCls,
     controlHeight,
     fontSize,
-    inputPaddingHorizontal,
+    paddingInline,
     colorBgContainer,
     lineWidth,
     lineType,
@@ -1006,7 +1007,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
     controlHeightLG,
     fontSizeLG,
     controlHeightSM,
-    inputPaddingHorizontalSM,
+    paddingInlineSM,
     paddingXS,
     marginXS,
     colorTextDescription,
@@ -1039,7 +1040,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
     {
       [componentCls]: {
         ...resetComponent(token),
-        ...genPikerPadding(token, controlHeight, fontSize, inputPaddingHorizontal),
+        ...genPikerPadding(token, controlHeight, fontSize, paddingInline),
         position: 'relative',
         display: 'inline-flex',
         alignItems: 'center',
@@ -1117,7 +1118,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
 
         // Size
         '&-large': {
-          ...genPikerPadding(token, controlHeightLG, fontSizeLG, inputPaddingHorizontal),
+          ...genPikerPadding(token, controlHeightLG, fontSizeLG, paddingInline),
 
           [`${componentCls}-input > input`]: {
             fontSize: fontSizeLG,
@@ -1125,7 +1126,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
         },
 
         '&-small': {
-          ...genPikerPadding(token, controlHeightSM, fontSize, inputPaddingHorizontalSM),
+          ...genPikerPadding(token, controlHeightSM, fontSize, paddingInlineSM),
         },
 
         [`${componentCls}-suffix`]: {
@@ -1195,7 +1196,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
 
           // Clear
           [`${componentCls}-clear`]: {
-            insetInlineEnd: inputPaddingHorizontal,
+            insetInlineEnd: paddingInline,
           },
 
           '&:hover': {
@@ -1208,7 +1209,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
           [`${componentCls}-active-bar`]: {
             bottom: -lineWidth,
             height: lineWidthBold,
-            marginInlineStart: inputPaddingHorizontal,
+            marginInlineStart: paddingInline,
             background: colorPrimary,
             opacity: 0,
             transition: `all ${motionDurationSlow} ease-out`,
@@ -1229,11 +1230,11 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
 
           [`&${componentCls}-small`]: {
             [`${componentCls}-clear`]: {
-              insetInlineEnd: inputPaddingHorizontalSM,
+              insetInlineEnd: paddingInlineSM,
             },
 
             [`${componentCls}-active-bar`]: {
-              marginInlineStart: inputPaddingHorizontalSM,
+              marginInlineStart: paddingInlineSM,
             },
           },
         },
@@ -1342,7 +1343,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
             position: 'absolute',
             zIndex: 1,
             display: 'none',
-            marginInlineStart: inputPaddingHorizontal * 1.5,
+            marginInlineStart: paddingInline * 1.5,
             transition: `left ${motionDurationSlow} ease-out`,
             ...roundedArrow(
               sizePopupArrow,
@@ -1501,10 +1502,7 @@ export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): Pi
 export default genComponentStyleHook(
   'DatePicker',
   (token) => {
-    const pickerToken = mergeToken<PickerToken>(
+    const pickerToken = mergeToken<PickerToken>(initInputToken(token), initPickerPanelToken(token));
-      initInputToken<FullToken<'DatePicker'>>(token),
-      initPickerPanelToken(token),
-    );
     return [
       genPickerStyle(pickerToken),
       genPickerStatusStyle(pickerToken),
@@ -1517,6 +1515,7 @@ export default genComponentStyleHook(
     ];
   },
   (token) => ({
+    ...initComponentToken(token),
     presetsWidth: 120,
     presetsMaxWidth: 200,
     zIndexPopup: token.zIndexPopupBase + 50,

components/input-number/style/index.ts

@@ -1,5 +1,7 @@
-import type { InputToken } from '../../input/style';
+import type { SharedInputToken, SharedComponentToken } from '../../input/style';
 import {
+  initComponentToken,
+  initInputToken,
   genActiveStyle,
   genBasicInputStyle,
   genDisabledStyle,
@@ -7,14 +9,13 @@ import {
   genInputGroupStyle,
   genPlaceholderStyle,
   genStatusStyle,
-  initInputToken,
 } from '../../input/style';
 import { resetComponent, resetIcon } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
-export interface ComponentToken {
+export interface ComponentToken extends SharedComponentToken {
   /**
    * @desc 输入框宽度
    * @descEN Width of input
@@ -36,9 +37,29 @@ export interface ComponentToken {
    * @descEN Handle visible
    */
   handleVisible: 'auto' | true;
+  /**
+   * @desc 操作按钮背景色
+   * @descEN Background color of handle
+   */
+  handleBg: string;
+  /**
+   * @desc 操作按钮激活背景色
+   * @descEN Active background color of handle
+   */
+  handleActiveBg: string;
+  /**
+   * @desc 操作按钮悬浮颜色
+   * @descEN Hover color of handle
+   */
+  handleHoverColor: string;
+  /**
+   * @desc 操作按钮边框颜色
+   * @descEN Border color of handle
+   */
+  handleBorderColor: string;
 }
 
-type InputNumberToken = InputToken<FullToken<'InputNumber'>>;
+type InputNumberToken = FullToken<'InputNumber'> & SharedInputToken;
 
 export const genRadiusStyle = (
   { componentCls, borderRadiusSM, borderRadiusLG }: InputNumberToken,
@@ -72,18 +93,20 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
     controlHeightLG,
     controlHeightSM,
     colorError,
-    inputPaddingHorizontalSM,
+    paddingInlineSM,
     colorTextDescription,
     motionDurationMid,
-    colorPrimary,
+    handleHoverColor,
-    inputPaddingHorizontal,
+    paddingInline,
-    inputPaddingVertical,
+    paddingBlock,
-    colorBgContainer,
+    handleBg,
+    handleActiveBg,
     colorTextDisabled,
     borderRadiusSM,
     borderRadiusLG,
     controlWidth,
     handleVisible,
+    handleBorderColor,
   } = token;
 
   return [
@@ -124,7 +147,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
 
           [`input${componentCls}-input`]: {
             height: controlHeightSM - 2 * lineWidth,
-            padding: `0 ${inputPaddingHorizontalSM}px`,
+            padding: `0 ${paddingInlineSM}px`,
           },
         },
 
@@ -186,7 +209,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
           '&-input': {
             ...resetComponent(token),
             width: '100%',
-            padding: `${inputPaddingVertical}px ${inputPaddingHorizontal}px`,
+            padding: `${paddingBlock}px ${paddingInline}px`,
             textAlign: 'start',
             backgroundColor: 'transparent',
             border: 0,
@@ -222,7 +245,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
           insetInlineEnd: 0,
           width: token.handleWidth,
           height: '100%',
-          background: colorBgContainer,
+          background: handleBg,
           borderStartStartRadius: 0,
           borderStartEndRadius: borderRadius,
           borderEndEndRadius: borderRadius,
@@ -261,10 +284,10 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
           lineHeight: 0,
           textAlign: 'center',
           cursor: 'pointer',
-          borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`,
+          borderInlineStart: `${lineWidth}px ${lineType} ${handleBorderColor}`,
           transition: `all ${motionDurationMid} linear`,
           '&:active': {
-            background: token.colorFillAlter,
+            background: handleActiveBg,
           },
 
           // Hover
@@ -275,7 +298,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
               ${componentCls}-handler-up-inner,
               ${componentCls}-handler-down-inner
             `]: {
-              color: colorPrimary,
+              color: handleHoverColor,
             },
           },
 
@@ -293,7 +316,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
         },
 
         [`${componentCls}-handler-down`]: {
-          borderBlockStart: `${lineWidth}px ${lineType} ${colorBorder}`,
+          borderBlockStart: `${lineWidth}px ${lineType} ${handleBorderColor}`,
           borderEndEndRadius: borderRadius,
         },
 
@@ -344,8 +367,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
 const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
   const {
     componentCls,
-    inputPaddingVertical,
+    paddingBlock,
-    inputPaddingHorizontal,
+    paddingInline,
     inputAffixPadding,
     controlWidth,
     borderRadiusLG,
@@ -361,7 +384,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
       display: 'inline-flex',
       width: controlWidth,
       padding: 0,
-      paddingInlineStart: inputPaddingHorizontal,
+      paddingInlineStart: paddingInline,
 
       '&-lg': {
         borderRadius: borderRadiusLG,
@@ -395,7 +418,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
       },
 
       [`input${componentCls}-input`]: {
-        padding: `${inputPaddingVertical}px 0`,
+        padding: `${paddingBlock}px 0`,
       },
 
       '&::before': {
@@ -427,7 +450,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
           insetInlineEnd: 0,
           zIndex: 1,
           height: '100%',
-          marginInlineEnd: inputPaddingHorizontal,
+          marginInlineEnd: paddingInline,
           marginInlineStart: inputAffixPadding,
         },
       },
@@ -439,7 +462,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
 export default genComponentStyleHook(
   'InputNumber',
   (token) => {
-    const inputNumberToken = initInputToken<FullToken<'InputNumber'>>(token);
+    const inputNumberToken = mergeToken<InputNumberToken>(token, initInputToken(token));
     return [
       genInputNumberStyles(inputNumberToken),
       genAffixWrapperStyles(inputNumberToken),
@@ -450,9 +473,14 @@ export default genComponentStyleHook(
     ];
   },
   (token) => ({
+    ...initComponentToken(token),
     controlWidth: 90,
     handleWidth: token.controlHeightSM - token.lineWidth * 2,
     handleFontSize: token.fontSize / 2,
     handleVisible: 'auto',
+    handleActiveBg: token.colorFillAlter,
+    handleBg: token.colorBgContainer,
+    handleHoverColor: token.colorPrimary,
+    handleBorderColor: token.colorBorder,
   }),
 );

components/input/style/index.ts

@@ -5,17 +5,61 @@ import type { GlobalToken } from '../../theme/interface';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
-export type InputToken<T extends GlobalToken = FullToken<'Input'>> = T & {
+export interface SharedComponentToken {
+  /**
+   * @desc 输入框横向内边距
+   * @descEN Horizontal padding of input
+   */
+  paddingInline: number;
+  /**
+   * @desc 小号输入框横向内边距
+   * @descEN Horizontal padding of small input
+   */
+  paddingInlineSM: number;
+  /**
+   * @desc 大号输入框横向内边距
+   * @descEN Horizontal padding of large input
+   */
+  paddingInlineLG: number;
+  /**
+   * @desc 输入框纵向内边距
+   * @descEN Vertical padding of input
+   */
+  paddingBlock: number;
+  /**
+   * @desc 小号输入框纵向内边距
+   * @descEN Vertical padding of small input
+   */
+  paddingBlockSM: number;
+  /**
+   * @desc 大号输入框纵向内边距
+   * @descEN Vertical padding of large input
+   */
+  paddingBlockLG: number;
+  /**
+   * @desc 前/后置标签背景色
+   * @descEN Background color of addon
+   */
+  addonBg: string;
+  /**
+   * @desc 悬浮态边框色
+   * @descEN Hover border color
+   */
+  hoverBorderColor: string;
+  /**
+   * @desc 激活态边框色
+   * @descEN Active border color
+   */
+  activeBorderColor: string;
+}
+
+export interface ComponentToken extends SharedComponentToken {}
+
+export interface SharedInputToken {
   inputAffixPadding: number;
-  inputPaddingVertical: number;
+}
-  inputPaddingVerticalLG: number;
+
-  inputPaddingVerticalSM: number;
+interface InputToken extends FullToken<'Input'>, SharedInputToken {}
-  inputPaddingHorizontal: number;
-  inputPaddingHorizontalLG: number;
-  inputPaddingHorizontalSM: number;
-  inputBorderHoverColor: string;
-  inputBorderActiveColor: string;
-};
 
 export const genPlaceholderStyle = (color: string): CSSObject => ({
   // Firefox
@@ -32,12 +76,12 @@ export const genPlaceholderStyle = (color: string): CSSObject => ({
 });
 
 export const genHoverStyle = (token: InputToken): CSSObject => ({
-  borderColor: token.inputBorderHoverColor,
+  borderColor: token.hoverBorderColor,
   borderInlineEndWidth: token.lineWidth,
 });
 
 export const genActiveStyle = (token: InputToken) => ({
-  borderColor: token.inputBorderHoverColor,
+  borderColor: token.activeBorderColor,
   boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
   borderInlineEndWidth: token.lineWidth,
   outline: 0,
@@ -52,21 +96,15 @@ export const genDisabledStyle = (token: InputToken): CSSObject => ({
   opacity: 1,
 
   '&:hover': {
-    ...genHoverStyle(mergeToken<InputToken>(token, { inputBorderHoverColor: token.colorBorder })),
+    ...genHoverStyle(mergeToken<InputToken>(token, { hoverBorderColor: token.colorBorder })),
   },
 });
 
 const genInputLargeStyle = (token: InputToken): CSSObject => {
-  const {
+  const { paddingBlockLG, fontSizeLG, lineHeightLG, borderRadiusLG, paddingInlineLG } = token;
-    inputPaddingVerticalLG,
-    fontSizeLG,
-    lineHeightLG,
-    borderRadiusLG,
-    inputPaddingHorizontalLG,
-  } = token;
 
   return {
-    padding: `${inputPaddingVerticalLG}px ${inputPaddingHorizontalLG}px`,
+    padding: `${paddingBlockLG}px ${paddingInlineLG}px`,
     fontSize: fontSizeLG,
     lineHeight: lineHeightLG,
     borderRadius: borderRadiusLG,
@@ -74,7 +112,7 @@ const genInputLargeStyle = (token: InputToken): CSSObject => {
 };
 
 export const genInputSmallStyle = (token: InputToken): CSSObject => ({
-  padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`,
+  padding: `${token.paddingBlockSM}px ${token.paddingInlineSM}px`,
   borderRadius: token.borderRadiusSM,
 });
 
@@ -100,8 +138,8 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject
       '&:focus, &-focused': {
         ...genActiveStyle(
           mergeToken<InputToken>(token, {
-            inputBorderActiveColor: colorError,
+            activeBorderColor: colorError,
-            inputBorderHoverColor: colorError,
+            hoverBorderColor: colorError,
             controlOutline: colorErrorOutline,
           }),
         ),
@@ -121,8 +159,8 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject
       '&:focus, &-focused': {
         ...genActiveStyle(
           mergeToken<InputToken>(token, {
-            inputBorderActiveColor: colorWarning,
+            activeBorderColor: colorWarning,
-            inputBorderHoverColor: colorWarning,
+            hoverBorderColor: colorWarning,
             controlOutline: colorWarningOutline,
           }),
         ),
@@ -140,7 +178,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
   display: 'inline-block',
   width: '100%',
   minWidth: 0,
-  padding: `${token.inputPaddingVertical}px ${token.inputPaddingHorizontal}px`,
+  padding: `${token.paddingBlock}px ${token.paddingInline}px`,
   color: token.colorText,
   fontSize: token.fontSize,
   lineHeight: token.lineHeight,
@@ -265,7 +303,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
 
       '&-addon': {
         position: 'relative',
-        padding: `0 ${token.inputPaddingHorizontal}px`,
+        padding: `0 ${token.paddingInline}px`,
         color: token.colorText,
         fontWeight: 'normal',
         fontSize: token.fontSize,
@@ -278,7 +316,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
 
         // Reset Select's style in addon
         [`${antCls}-select`]: {
-          margin: `-${token.inputPaddingVertical + 1}px -${token.inputPaddingHorizontal}px`,
+          margin: `-${token.paddingBlock + 1}px -${token.paddingInline}px`,
 
           [`&${antCls}-select-single:not(${antCls}-select-customize-input)`]: {
             [`${antCls}-select-selector`]: {
@@ -297,7 +335,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
 
         // https://github.com/ant-design/ant-design/issues/31333
         [`${antCls}-cascader-picker`]: {
-          margin: `-9px -${token.inputPaddingHorizontal}px`,
+          margin: `-9px -${token.paddingInline}px`,
           backgroundColor: 'transparent',
           [`${antCls}-cascader-input`]: {
             textAlign: 'start',
@@ -870,31 +908,6 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
   };
 };
 
-export function initInputToken<T extends GlobalToken = GlobalToken>(token: T): InputToken<T> {
-  // @ts-ignore
-  return mergeToken<InputToken<T>>(token, {
-    inputAffixPadding: token.paddingXXS,
-    inputPaddingVertical: Math.max(
-      Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
-        token.lineWidth,
-      3,
-    ),
-    inputPaddingVerticalLG:
-      Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeightLG) / 2) * 10) / 10 -
-      token.lineWidth,
-    inputPaddingVerticalSM: Math.max(
-      Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
-        token.lineWidth,
-      0,
-    ),
-    inputPaddingHorizontal: token.paddingSM - token.lineWidth,
-    inputPaddingHorizontalSM: token.paddingXS - token.lineWidth,
-    inputPaddingHorizontalLG: token.controlPaddingHorizontal - token.lineWidth,
-    inputBorderHoverColor: token.colorPrimaryHover,
-    inputBorderActiveColor: token.colorPrimaryHover,
-  });
-}
-
 const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
   const { componentCls, paddingLG } = token;
   const textareaPrefixCls = `${componentCls}-textarea`;
@@ -962,7 +975,7 @@ const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
           [`${textareaPrefixCls}-suffix`]: {
             position: 'absolute',
             top: 0,
-            insetInlineEnd: token.inputPaddingHorizontal,
+            insetInlineEnd: token.paddingInline,
             bottom: 0,
             zIndex: 1,
             display: 'inline-flex',
@@ -976,9 +989,54 @@ const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
   };
 };
 
+export function initInputToken(token: GlobalToken): SharedInputToken {
+  return mergeToken<InputToken>(token, {
+    inputAffixPadding: token.paddingXXS,
+  });
+}
+
+export const initComponentToken = (token: GlobalToken): SharedComponentToken => {
+  const {
+    controlHeight,
+    fontSize,
+    lineHeight,
+    lineWidth,
+    controlHeightSM,
+    controlHeightLG,
+    fontSizeLG,
+    lineHeightLG,
+    paddingSM,
+    controlPaddingHorizontalSM,
+    controlPaddingHorizontal,
+    colorFillAlter,
+    colorPrimaryHover,
+  } = token;
+
+  return {
+    paddingBlock: Math.max(
+      Math.round(((controlHeight - fontSize * lineHeight) / 2) * 10) / 10 - lineWidth,
+      3,
+    ),
+    paddingBlockSM: Math.max(
+      Math.round(((controlHeightSM - fontSize * lineHeight) / 2) * 10) / 10 - lineWidth,
+      0,
+    ),
+    paddingBlockLG:
+      Math.ceil(((controlHeightLG - fontSizeLG * lineHeightLG) / 2) * 10) / 10 - lineWidth,
+    paddingInline: paddingSM - lineWidth,
+    paddingInlineSM: controlPaddingHorizontalSM - lineWidth,
+    paddingInlineLG: controlPaddingHorizontal - lineWidth,
+    addonBg: colorFillAlter,
+    activeBorderColor: colorPrimaryHover,
+    hoverBorderColor: colorPrimaryHover,
+  };
+};
+
 // ============================== Export ==============================
-export default genComponentStyleHook('Input', (token) => {
+export default genComponentStyleHook(
-  const inputToken = initInputToken<FullToken<'Input'>>(token);
+  'Input',
+  (token) => {
+    const inputToken = mergeToken<InputToken>(token, initInputToken(token));
 
     return [
       genInputStyle(inputToken),
@@ -991,4 +1049,6 @@ export default genComponentStyleHook('Input', (token) => {
       // =====================================================
       genCompactItemStyle(inputToken),
     ];
-});
+  },
+  initComponentToken,
+);

components/mentions/style/index.ts

@@ -1,17 +1,18 @@
-import type { InputToken } from '../../input/style';
+import type { SharedComponentToken, SharedInputToken } from '../../input/style';
 import {
   genActiveStyle,
   genBasicInputStyle,
   genDisabledStyle,
   genPlaceholderStyle,
   genStatusStyle,
+  initComponentToken,
   initInputToken,
 } from '../../input/style';
 import { resetComponent, textEllipsis } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
-export interface ComponentToken {
+export interface ComponentToken extends SharedComponentToken {
   /**
    * @desc 弹层 z-index
    * @descEN z-index of popup
@@ -29,7 +30,7 @@ export interface ComponentToken {
   controlItemWidth: number;
 }
 
-type MentionsToken = InputToken<FullToken<'Mentions'>>;
+type MentionsToken = FullToken<'Mentions'> & SharedInputToken;
 
 const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
   const {
@@ -41,8 +42,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
     motionDurationSlow,
     lineHeight,
     controlHeight,
-    inputPaddingHorizontal,
+    paddingInline,
-    inputPaddingVertical,
+    paddingBlock,
     fontSize,
     colorBgElevated,
     paddingXXS,
@@ -84,7 +85,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
       [`&-affix-wrapper ${componentCls}-suffix`]: {
         position: 'absolute',
         top: 0,
-        insetInlineEnd: inputPaddingHorizontal,
+        insetInlineEnd: paddingInline,
         bottom: 0,
         zIndex: 1,
         display: 'inline-flex',
@@ -98,7 +99,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
         boxSizing: 'border-box',
         minHeight: controlHeight - 2,
         margin: 0,
-        padding: `${inputPaddingVertical}px ${inputPaddingHorizontal}px`,
+        padding: `${paddingBlock}px ${paddingInline}px`,
         overflow: 'inherit',
         overflowX: 'hidden',
         overflowY: 'auto',
@@ -223,10 +224,11 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
 export default genComponentStyleHook(
   'Mentions',
   (token) => {
-    const mentionsToken = initInputToken<FullToken<'Mentions'>>(token);
+    const mentionsToken = mergeToken<MentionsToken>(token, initInputToken(token));
     return [genMentionsStyle(mentionsToken)];
   },
   (token) => ({
+    ...initComponentToken(token),
     dropdownHeight: 250,
     controlItemWidth: 100,
     zIndexPopup: token.zIndexPopupBase + 50,

components/pagination/style/index.ts

@@ -2,9 +2,10 @@ import type { CSSObject } from '@ant-design/cssinjs';
 import {
   genBasicInputStyle,
   genInputSmallStyle,
+  initComponentToken,
   initInputToken,
-  type InputToken,
 } from '../../input/style';
+import type { SharedComponentToken, SharedInputToken } from '../../input/style';
 import { genFocusOutline, genFocusStyle, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@@ -57,7 +58,7 @@ export interface ComponentToken {
   miniOptionsSizeChangerTop: number;
 }
 
-interface PaginationToken extends InputToken<FullToken<'Pagination'>> {
+interface PaginationToken extends FullToken<'Pagination'>, SharedComponentToken, SharedInputToken {
   inputOutlineOffset: number;
   paginationMiniOptionsMarginInlineStart: number;
   paginationMiniQuickJumperInputWidth: number;
@@ -751,6 +752,7 @@ export default genComponentStyleHook(
         paginationEllipsisTextIndent: '0.13em', // magic for ui experience
       },
       initInputToken(token),
+      initComponentToken(token),
     );
     return [
       genPaginationStyle(paginationToken),

components/theme/interface/components.ts

@@ -22,6 +22,7 @@ import type { ComponentToken as DropdownComponentToken } from '../../dropdown/st
 import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
 import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style';
 import type { ComponentToken as ImageComponentToken } from '../../image/style';
+import type { ComponentToken as InputComponentToken } from '../../input/style';
 import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style';
 import type { ComponentToken as LayoutComponentToken } from '../../layout/style';
 import type { ComponentToken as ListComponentToken } from '../../list/style';
@@ -84,7 +85,7 @@ export interface ComponentTokenMap {
   Form?: {};
   Grid?: {};
   Image?: ImageComponentToken;
-  Input?: {};
+  Input?: InputComponentToken;
   InputNumber?: InputNumberComponentToken;
   Layout?: LayoutComponentToken;
   List?: ListComponentToken;

components/typography/style/mixins.ts

@@ -10,7 +10,6 @@
 import { gold } from '@ant-design/colors';
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { TypographyToken } from '.';
-import { initInputToken } from '../../input/style';
 import { operationUnit } from '../../style';
 import type { GenerateStyle } from '../../theme/internal';
 
@@ -187,10 +186,9 @@ export const getResetStyles: GenerateStyle<TypographyToken, CSSObject> = (token)
 });
 
 export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = (token) => {
-  const { componentCls } = token;
+  const { componentCls, paddingSM } = token;
 
-  const inputToken = initInputToken(token);
+  const inputShift = paddingSM;
-  const inputShift = inputToken.inputPaddingVertical + 1;
   return {
     '&-edit-content': {
       position: 'relative',

docs/react/migrate-less-variables.en-US.md

@@ -338,7 +338,43 @@ export default App;
 | `@image-preview-operation-color` | `previewOperationColor` | - |
 | `@image-preview-operation-disabled-color` | `previewOperationColorDisabled` | - |
 
-<!-- ### Input -->
+### Input
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@input-height-base` | `controlHeight` | Global Token |
+| `@input-height-lg` | `controlHeightLG` | Global Token |
+| `@input-height-sm` | `controlHeightSM` | Global Token |
+| `@input-padding-horizontal` | `paddingInline` | - |
+| `@input-padding-horizontal-base` | `paddingInline` | - |
+| `@input-padding-horizontal-sm` | `paddingInlineSM` | - |
+| `@input-padding-horizontal-lg` | `paddingInlineLG` | - |
+| `@input-padding-vertical-base` | `paddinBlock` | - |
+| `@input-padding-vertical-sm` | `paddingBlockSM` | - |
+| `@input-padding-vertical-lg` | `paddingBlockLG` | - |
+| `@input-placeholder-color` | `colorTextPlaceholder` | Global Token |
+| `@input-color` | `colorText` | Global Token |
+| `@input-icon-color` | - | 已废弃 |
+| `@input-border-color` | `colorBorder` | Global Token |
+| `@input-bg` | `colorBgContainer` | Global Token |
+| `@input-addon-bg` | `addonBg` | - |
+| `@input-hover-border-color` | `hoverBorderColor` | - |
+| `@input-disabled-bg` | `colorBgContainerDisabled` | Global Token |
+| `@input-outline-offset` | `activeShadow` | Control box-shadow when active |
+| `@input-icon-hover-color` | `colorIconHover` | Global Token |
+| `@input-disabled-color` | `colorTextDisabled` | Global Token |
+
+### InputNumber
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@input-number-hover-border-color` | `hoverBorderColor` | - |
+| `@input-number-handler-active-bg` | `handleActiveBg` | - |
+| `@input-number-handler-hover-bg` | `handleHoverColor` | Wrong usage in 4.x, which is actually text color |
+| `@input-number-handler-bg` | `handleBg` | - |
+| `@input-number-handler-border-color` | `handleBorderColor` | - |
 
 ### Layout
 

docs/react/migrate-less-variables.zh-CN.md

@@ -335,7 +335,43 @@ export default App;
 | `@image-preview-operation-color` | `previewOperationColor` | - |
 | `@image-preview-operation-disabled-color` | `previewOperationColorDisabled` | - |
 
-<!-- ### Input 输入框 -->
+### Input 输入框
+
+<!-- prettier-ignore -->
+| less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@input-height-base` | `controlHeight` | 全局 Token |
+| `@input-height-lg` | `controlHeightLG` | 全局 Token |
+| `@input-height-sm` | `controlHeightSM` | 全局 Token |
+| `@input-padding-horizontal` | `paddingInline` | - |
+| `@input-padding-horizontal-base` | `paddingInline` | - |
+| `@input-padding-horizontal-sm` | `paddingInlineSM` | - |
+| `@input-padding-horizontal-lg` | `paddingInlineLG` | - |
+| `@input-padding-vertical-base` | `paddinBlock` | - |
+| `@input-padding-vertical-sm` | `paddingBlockSM` | - |
+| `@input-padding-vertical-lg` | `paddingBlockLG` | - |
+| `@input-placeholder-color` | `colorTextPlaceholder` | 全局 Token |
+| `@input-color` | `colorText` | 全局 Token |
+| `@input-icon-color` | - | 已废弃 |
+| `@input-border-color` | `colorBorder` | 全局 Token |
+| `@input-bg` | `colorBgContainer` | 全局 Token |
+| `@input-addon-bg` | `addonBg` | - |
+| `@input-hover-border-color` | `hoverBorderColor` | - |
+| `@input-disabled-bg` | `colorBgContainerDisabled` | 全局 Token |
+| `@input-outline-offset` | `activeShadow` | 控制激活态阴影 |
+| `@input-icon-hover-color` | `colorIconHover` | 全局 Token |
+| `@input-disabled-color` | `colorTextDisabled` | 全局 Token |
+
+### InputNumber 数字输入框
+
+<!-- prettier-ignore -->
+| less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@input-number-hover-border-color` | `hoverBorderColor` | - |
+| `@input-number-handler-active-bg` | `handleActiveBg` | - |
+| `@input-number-handler-hover-bg` | `handleHoverColor` | 4.x 中命名有误，实际上是 color |
+| `@input-number-handler-bg` | `handleBg` | - |
+| `@input-number-handler-border-color` | `handleBorderColor` | - |
 
 ### Layout 布局