feat: Input support inputFontSize token (#46875)

* feat: Input support contentFontSize contentLineHeight token

* feat: rename inputFontSize

components/input/demo/component-token.tsx

@@ -2,9 +2,17 @@ import React from 'react';
 import { ConfigProvider, Input } from 'antd';
 
 const App: React.FC = () => (
-  <ConfigProvider theme={{ token: { controlHeight: 28 } }}>
-    <Input placeholder="Basic usage" />
-  </ConfigProvider>
+  <>
+    <ConfigProvider theme={{ token: { controlHeight: 28 } }}>
+      <Input placeholder="Basic usage" />
+    </ConfigProvider>
+    <ConfigProvider
+      componentSize="small"
+      theme={{ token: {}, components: { Input: { inputFontSizeSM: 12 } } }}
+    >
+      <Input placeholder="Basic usage" />
+    </ConfigProvider>
+  </>
 );
 
 export default App;

components/input/style/index.ts

@@ -5,6 +5,8 @@ import { clearFix, resetComponent } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import type { GenerateStyle } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
+import type { ComponentToken, InputToken } from './token';
+import { initComponentToken, initInputToken } from './token';
 import {
   genBorderlessStyle,
   genFilledGroupStyle,
@@ -12,8 +14,6 @@ import {
   genOutlinedGroupStyle,
   genOutlinedStyle,
 } from './variants';
-import type { ComponentToken, InputToken } from './token';
-import { initComponentToken, initInputToken } from './token';
 
 export type { ComponentToken };
 export { initComponentToken, initInputToken };
@@ -40,11 +40,11 @@ export const genActiveStyle = (token: InputToken) => ({
 });
 
 const genInputLargeStyle = (token: InputToken): CSSObject => {
-  const { paddingBlockLG, fontSizeLG, lineHeightLG, borderRadiusLG, paddingInlineLG } = token;
+  const { paddingBlockLG, lineHeightLG, borderRadiusLG, paddingInlineLG } = token;
 
   return {
     padding: `${unit(paddingBlockLG)} ${unit(paddingInlineLG)}`,
-    fontSize: fontSizeLG,
+    fontSize: token.inputFontSizeLG,
     lineHeight: lineHeightLG,
     borderRadius: borderRadiusLG,
   };
@@ -52,6 +52,7 @@ const genInputLargeStyle = (token: InputToken): CSSObject => {
 
 export const genInputSmallStyle = (token: InputToken): CSSObject => ({
   padding: `${unit(token.paddingBlockSM)} ${unit(token.paddingInlineSM)}`,
+  fontSize: token.inputFontSizeSM,
   borderRadius: token.borderRadiusSM,
 });
 
@@ -62,7 +63,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
   minWidth: 0,
   padding: `${unit(token.paddingBlock)} ${unit(token.paddingInline)}`,
   color: token.colorText,
-  fontSize: token.fontSize,
+  fontSize: token.inputFontSize,
   lineHeight: token.lineHeight,
   borderRadius: token.borderRadius,
   transition: `all ${token.motionDurationMid}`,
@@ -163,7 +164,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
         padding: `0 ${unit(token.paddingInline)}`,
         color: token.colorText,
         fontWeight: 'normal',
-        fontSize: token.fontSize,
+        fontSize: token.inputFontSize,
         textAlign: 'center',
         borderRadius: token.borderRadius,
         transition: `all ${token.motionDurationSlow}`,
@@ -590,7 +591,7 @@ const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
         '&-lg': {
           [`${componentCls}-group-addon`]: {
             borderRadius: borderRadiusLG,
-            fontSize: token.fontSizeLG,
+            fontSize: token.inputFontSizeLG,
           },
         },
         '&-sm': {

components/input/style/token.ts

@@ -72,6 +72,21 @@ export interface SharedComponentToken {
    * @descEN Background color when the input box is activated
    */
   activeBg: string;
+  /**
+   * @desc 字体大小
+   * @descEN Font size
+   */
+  inputFontSize: number;
+  /**
+   * @desc 大号字体大小
+   * @descEN Font size of large
+   */
+  inputFontSizeLG: number;
+  /**
+   * @desc 小号字体大小
+   * @descEN Font size of small
+   */
+  inputFontSizeSM: number;
 }
 
 export interface ComponentToken extends SharedComponentToken {}
@@ -132,5 +147,8 @@ export const initComponentToken = (token: AliasToken): SharedComponentToken => {
     warningActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorWarningOutline}`,
     hoverBg: '',
     activeBg: '',
+    inputFontSize: fontSize,
+    inputFontSizeLG: fontSizeLG,
+    inputFontSizeSM: fontSize,
   };
 };