refactor: Input support css var (#45782)

* refactor: Input support css var

* chore: update type

components/input/Group.tsx

@@ -7,6 +7,7 @@ import { ConfigContext } from '../config-provider';
 import type { FormItemStatusContextProps } from '../form/context';
 import { FormItemInputContext } from '../form/context';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 export interface GroupProps {
   className?: string;
@@ -26,7 +27,8 @@ const Group: React.FC<GroupProps> = (props) => {
   const { prefixCls: customizePrefixCls, className } = props;
   const prefixCls = getPrefixCls('input-group', customizePrefixCls);
   const inputPrefixCls = getPrefixCls('input');
-  const [wrapSSR, hashId] = useStyle(inputPrefixCls);
+  const [, hashId] = useStyle(inputPrefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
   const cls = classNames(
     prefixCls,
     {
@@ -55,7 +57,7 @@ const Group: React.FC<GroupProps> = (props) => {
     warning.deprecated(false, 'Input.Group', 'Space.Compact');
   }
 
-  return wrapSSR(
+  return wrapCSSVar(
     <span
       className={cls}
       style={props.style}

components/input/Input.tsx

@@ -17,7 +17,9 @@ import { FormItemInputContext, NoFormStyle } from '../form/context';
 import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
 import useRemovePasswordTimeout from './hooks/useRemovePasswordTimeout';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 import { hasPrefixSuffix } from './utils';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export interface InputFocusOptions extends FocusOptions {
   cursor?: 'start' | 'end' | 'all';
@@ -94,7 +96,9 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const inputRef = useRef<InputRef>(null);
 
   // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const cssVarCls = useCSSVarCls(prefixCls);
+  const wrapCSSVar = useCSSVar(cssVarCls);
 
   // ===================== Compact Item =====================
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
@@ -164,7 +168,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     mergedAllowClear = { clearIcon: <CloseCircleFilled /> };
   }
 
-  return wrapSSR(
+  return wrapCSSVar(
     <RcInput
       ref={composeRef(ref, inputRef)}
       prefixCls={prefixCls}
@@ -177,7 +181,14 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       styles={{ ...input?.styles, ...styles }}
       suffix={suffixNode}
       allowClear={mergedAllowClear}
-      className={classNames(className, rootClassName, compactItemClassnames, input?.className)}
+      className={classNames(
+        className,
+        rootClassName,
+        cssVarCls,
+        hashId,
+        compactItemClassnames,
+        input?.className,
+      )}
       onChange={handleChange}
       addonAfter={
         addonAfter && (

components/input/TextArea.tsx

@@ -17,6 +17,8 @@ import { FormItemInputContext } from '../form/context';
 import type { InputFocusOptions } from './Input';
 import { triggerFocus } from './Input';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export interface TextAreaProps extends Omit<RcTextAreaProps, 'suffix'> {
   bordered?: boolean;
@@ -83,14 +85,16 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
   }
 
   // ===================== Style =====================
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const cssVarCls = useCSSVarCls(prefixCls);
+  const wrapCSSVar = useCSSVar(cssVarCls);
 
-  return wrapSSR(
+  return wrapCSSVar(
     <RcTextArea
       {...rest}
       disabled={mergedDisabled}
       allowClear={mergedAllowClear}
-      className={classNames(className, rootClassName)}
+      className={classNames(cssVarCls, className, rootClassName)}
       classes={{
         affixWrapper: classNames(
           `${prefixCls}-textarea-affix-wrapper`,

components/input/style/cssVar.ts

@@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { initComponentToken } from '.';
+
+export default genCSSVarRegister('Input', initComponentToken);

components/input/style/index.ts

@@ -5,6 +5,7 @@ import { genCompactItemStyle } from '../../style/compact-item';
 import type { GlobalToken } from '../../theme/interface';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { unit } from '@ant-design/cssinjs';
 
 export interface SharedComponentToken {
   /**
@@ -135,7 +136,7 @@ const genInputLargeStyle = (token: InputToken): CSSObject => {
   const { paddingBlockLG, fontSizeLG, lineHeightLG, borderRadiusLG, paddingInlineLG } = token;
 
   return {
-    padding: `${paddingBlockLG}px ${paddingInlineLG}px`,
+    padding: `${unit(paddingBlockLG)} ${unit(paddingInlineLG)}`,
     fontSize: fontSizeLG,
     lineHeight: lineHeightLG,
     borderRadius: borderRadiusLG,
@@ -143,7 +144,7 @@ const genInputLargeStyle = (token: InputToken): CSSObject => {
 };
 
 export const genInputSmallStyle = (token: InputToken): CSSObject => ({
-  padding: `${token.paddingBlockSM}px ${token.paddingInlineSM}px`,
+  padding: `${unit(token.paddingBlockSM)} ${unit(token.paddingInlineSM)}`,
   borderRadius: token.borderRadiusSM,
 });
 
@@ -207,7 +208,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
   display: 'inline-block',
   width: '100%',
   minWidth: 0,
-  padding: `${token.paddingBlock}px ${token.paddingInline}px`,
+  padding: `${unit(token.paddingBlock)} ${unit(token.paddingInline)}`,
   color: token.colorText,
   fontSize: token.fontSize,
   lineHeight: token.lineHeight,
@@ -331,26 +332,28 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
 
       '&-addon': {
         position: 'relative',
-        padding: `0 ${token.paddingInline}px`,
+        padding: `0 ${unit(token.paddingInline)}`,
         color: token.colorText,
         fontWeight: 'normal',
         fontSize: token.fontSize,
         textAlign: 'center',
         backgroundColor: token.addonBg,
-        border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
+        border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
         borderRadius: token.borderRadius,
         transition: `all ${token.motionDurationSlow}`,
         lineHeight: 1,
 
         // Reset Select's style in addon
         [`${antCls}-select`]: {
-          margin: `-${token.paddingBlock + 1}px -${token.paddingInline}px`,
+          margin: `${unit(token.calc(token.paddingBlock).add(1).mul(-1).equal())} ${unit(
+            token.calc(token.paddingInline).mul(-1).equal(),
+          )}`,
 
           [`&${antCls}-select-single:not(${antCls}-select-customize-input):not(${antCls}-pagination-size-changer)`]:
             {
               [`${antCls}-select-selector`]: {
                 backgroundColor: 'inherit',
-                border: `${token.lineWidth}px ${token.lineType} transparent`,
+                border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
                 boxShadow: 'none',
               },
             },
@@ -364,7 +367,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
 
         // https://github.com/ant-design/ant-design/issues/31333
         [`${antCls}-cascader-picker`]: {
-          margin: `-9px -${token.paddingInline}px`,
+          margin: `-9px ${unit(token.calc(token.paddingInline).mul(-1).equal())}`,
           backgroundColor: 'transparent',
           [`${antCls}-cascader-input`]: {
             textAlign: 'start',
@@ -488,7 +491,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
       },
 
       '& > *:not(:last-child)': {
-        marginInlineEnd: -token.lineWidth,
+        marginInlineEnd: token.calc(token.lineWidth).mul(-1).equal(),
         borderInlineEndWidth: token.lineWidth,
       },
 
@@ -546,7 +549,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
       },
 
       [`${componentCls}-group-wrapper + ${componentCls}-group-wrapper`]: {
-        marginInlineStart: -token.lineWidth,
+        marginInlineStart: token.calc(token.lineWidth).mul(-1).equal(),
         [`${componentCls}-affix-wrapper`]: {
           borderRadius: 0,
         },
@@ -571,10 +574,14 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
 };
 
 const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
-  const { componentCls, controlHeightSM, lineWidth } = token;
+  const { componentCls, controlHeightSM, lineWidth, calc } = token;
 
   const FIXED_CHROME_COLOR_HEIGHT = 16;
-  const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
+  const colorSmallPadding = calc(controlHeightSM)
+    .sub(calc(lineWidth).mul(2))
+    .sub(FIXED_CHROME_COLOR_HEIGHT)
+    .div(2)
+    .equal();
 
   return {
     [componentCls]: {
@@ -630,7 +637,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
       },
 
       '&-has-suffix': {
-        margin: `0 ${token.inputAffixPadding}px`,
+        margin: `0 ${unit(token.inputAffixPadding)}`,
       },
     },
   };
@@ -844,7 +851,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
       // fix slight height diff in Firefox:
       // https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
       [`${componentCls}-lg`]: {
-        lineHeight: token.lineHeightLG - 0.0002,
+        lineHeight: token.calc(token.lineHeightLG).sub(0.0002).equal({ unit: false }),
       },
 
       [`> ${componentCls}-group`]: {
@@ -909,7 +916,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
         [`&:not(${componentCls}-compact-last-item)`]: {
           [`${componentCls}-group-addon`]: {
             [`${componentCls}-search-button`]: {
-              marginInlineEnd: -token.lineWidth,
+              marginInlineEnd: token.calc(token.lineWidth).mul(-1).equal(),
               borderRadius: 0,
             },
           },
@@ -953,7 +960,7 @@ const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
 
         [`${componentCls}-data-count`]: {
           position: 'absolute',
-          bottom: -token.fontSize * token.lineHeight,
+          bottom: token.calc(token.fontSize).mul(token.lineHeight).mul(-1).equal(),
           insetInlineEnd: 0,
           color: token.colorTextDescription,
           whiteSpace: 'nowrap',