feat: input token

ant-design · Aug 21, 2023 · 161b037 · 161b037
1 parent e5d5de6
commit 161b037
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 25 deletions.
diff --git a/components/input-number/style/index.ts b/components/input-number/style/index.ts
@@ -37,6 +37,26 @@ export interface ComponentToken extends SharedComponentToken {
    * @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 = FullToken<'InputNumber'> & SharedInputToken;
@@ -76,15 +96,17 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
     paddingInlineSM,
     colorTextDescription,
     motionDurationMid,
-    colorPrimary,
+    handleHoverColor,
     paddingInline,
     paddingBlock,
-    colorBgContainer,
+    handleBg,
+    handleActiveBg,
     colorTextDisabled,
     borderRadiusSM,
     borderRadiusLG,
     controlWidth,
     handleVisible,
+    handleBorderColor,
   } = token;
 
   return [
@@ -223,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,
@@ -262,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
@@ -276,7 +298,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
               ${componentCls}-handler-up-inner,
               ${componentCls}-handler-down-inner
             `]: {
-              color: colorPrimary,
+              color: handleHoverColor,
             },
           },
 
@@ -294,7 +316,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
         },
 
         [`${componentCls}-handler-down`]: {
-          borderBlockStart: `${lineWidth}px ${lineType} ${colorBorder}`,
+          borderBlockStart: `${lineWidth}px ${lineType} ${handleBorderColor}`,
           borderEndEndRadius: borderRadius,
         },
 
@@ -456,5 +478,9 @@ export default genComponentStyleHook(
     handleWidth: token.controlHeightSM - token.lineWidth * 2,
     handleFontSize: token.fontSize / 2,
     handleVisible: 'auto',
+    handleActiveBg: token.colorFillAlter,
+    handleBg: token.colorBgContainer,
+    handleHoverColor: token.colorPrimary,
+    handleBorderColor: token.colorBorder,
   }),
 );
diff --git a/components/input/style/index.ts b/components/input/style/index.ts
@@ -6,14 +6,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 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;
 }
 
@@ -1014,5 +1050,5 @@ export default genComponentStyleHook(
       genCompactItemStyle(inputToken),
     ];
   },
-  initSharedToken,
+  initComponentToken,
 );
diff --git a/components/mentions/style/index.ts b/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,
-    inputPaddingVertical,
+    paddingInline,
+    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,

diff --git a/components/pagination/style/index.ts b/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),

diff --git a/components/typography/style/mixins.ts b/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 = inputToken.inputPaddingVertical + 1;
+  const inputShift = paddingSM;
   return {
     '&-edit-content': {
       position: 'relative',

diff --git a/docs/react/migrate-less-variables.en-US.md b/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
 

diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
@@ -369,7 +369,8 @@ export default App;
 | --- | --- | --- |
 | `@input-number-hover-border-color` | `hoverBorderColor` | - |
 | `@input-number-handler-active-bg` | `handleActiveBg` | - |
-| `@input-number-handler-hover-bg` | `handleHoverBg` | - |
+| `@input-number-handler-hover-bg` | `handleHoverColor` | 4.x 中命名有误，实际上是 color |
+| `@input-number-handler-bg` | `handleBg` | - |
 | `@input-number-handler-border-color` | `handleBorderColor` | - |
 
 ### Layout 布局