@sdata/web-vue 4.7.1 → 5.0.0

package/es/index.d.ts

@@ -49,6 +49,9 @@ export type { ColorPickerInstance } from './color-picker';
 export { default as ConfigProvider } from './config-provider';
 export type { ConfigProviderInstance, SdThemeConfig, SdThemeMeta, SdThemeMode, ThemeTokenMap, ThemeTokenValue, } from './config-provider';
 export { default as ThemeProvider } from './theme-provider';
+export { normalizeTheme, getThemeCSSVariables, normalizeTokenKey } from './config-provider/theme';
+export type { SdThemeSeed } from './config-provider/algorithms';
+export { validateThemeConfig, parseThemeConfig } from './config-provider/theme-config';
 export type { ThemeProviderInstance } from './theme-provider';
 export { default as Copy } from './copy';
 export type { CopyButtonProps, CopyComponentType, CopyInstance, CopyLinkProps, CopyProps, } from './copy';

package/es/index.js

@@ -101,6 +101,8 @@ import collapse_item_default from "./collapse/collapse-item.js";
 import Collapse from "./collapse/index.js";
 import ColorPicker from "./color-picker/index.js";
 import Comment from "./comment/index.js";
+import { normalizeTokenKey } from "./config-provider/token-key.js";
+import { getThemeCSSVariables, normalizeTheme } from "./config-provider/theme.js";
 import ConfigProvider from "./config-provider/index.js";
 import Message from "./message/index.js";
 import Copy from "./copy/index.js";
@@ -177,4 +179,5 @@ import Typography from "./typography/index.js";
 import Upload from "./upload/index.js";
 import Watermark from "./watermark/index.js";
 import SDVue from "./sd-vue.js";
-export { $createInlineComponentNode, $isInlineComponentNode, A2UI_0_9_1, Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, avatar_group_default as AvatarGroup, BackTop, Badge, BasicCrudTable, BloomMenu, BorderBeam, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, Copy, countdown_default as Countdown, Cropper, DEFAULT_LOCALE, DEFAULT_LOCALE_KEY, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Ellipsis, Empty, FilePreviewer, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, InlineClamp, InlineComponentNode, Input, input_group_default as InputGroup, InputMask, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, JsonForm, KvList, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, LineClamp, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, MODEL_SELECTOR_PROVIDERS, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, ModelSelector, model_selector_content_default as ModelSelectorContent, model_selector_dialog_default as ModelSelectorDialog, model_selector_empty_default as ModelSelectorEmpty, model_selector_group_default as ModelSelectorGroup, model_selector_input_default as ModelSelectorInput, model_selector_item_default as ModelSelectorItem, model_selector_list_default as ModelSelectorList, model_selector_logo_default as ModelSelectorLogo, model_selector_logo_group_default as ModelSelectorLogoGroup, model_selector_name_default as ModelSelectorName, model_selector_separator_default as ModelSelectorSeparator, model_selector_shortcut_default as ModelSelectorShortcut, model_selector_trigger_default as ModelSelectorTrigger, month_picker_default as MonthPicker, Notification, NumberFlow, NumberFlowGroup, PageHeader, Pagination, Panel, PanelGroup, PanelSeparator, PerformantEllipsis, Popconfirm, Popover, Progress, QrCode, quarter_picker_default as QuarterPicker, RICH_TEXT_EDITOR_BUILT_IN_NODE_NAMES, RICH_TEXT_EDITOR_JSON_FORM_NODE_NAMES, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, recorder_core_default as RecorderCore, RegexVis, Result, RichLineClamp, RichTextEditor, grid_row_default as Row, Scrollbar, Secret, Select, SelectableCard, Sender, SenderHeader, SenderSwitch, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, sub_menu_default as SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, TagGroup, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, ThemeProvider, ThinkingOrb, TimePicker, Timeline, item_default$1 as TimelineItem, Toolbar, Tooltip, Tour, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, WrapClamp, year_picker_default as YearPicker, addI18nMessages, continuous, SDVue as default, defaultInputMaskFormatChars, defineJsonFormComponents, defineJsonFormSchemas, formatInputMask, getCssVarToken, getLocale, inputMaskPresets, useCanAnimate, useFormItem, useLocale };
+import { parseThemeConfig, validateThemeConfig } from "./config-provider/theme-config.js";
+export { $createInlineComponentNode, $isInlineComponentNode, A2UI_0_9_1, Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, avatar_group_default as AvatarGroup, BackTop, Badge, BasicCrudTable, BloomMenu, BorderBeam, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, Copy, countdown_default as Countdown, Cropper, DEFAULT_LOCALE, DEFAULT_LOCALE_KEY, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Ellipsis, Empty, FilePreviewer, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, InlineClamp, InlineComponentNode, Input, input_group_default as InputGroup, InputMask, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, JsonForm, KvList, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, LineClamp, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, MODEL_SELECTOR_PROVIDERS, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, ModelSelector, model_selector_content_default as ModelSelectorContent, model_selector_dialog_default as ModelSelectorDialog, model_selector_empty_default as ModelSelectorEmpty, model_selector_group_default as ModelSelectorGroup, model_selector_input_default as ModelSelectorInput, model_selector_item_default as ModelSelectorItem, model_selector_list_default as ModelSelectorList, model_selector_logo_default as ModelSelectorLogo, model_selector_logo_group_default as ModelSelectorLogoGroup, model_selector_name_default as ModelSelectorName, model_selector_separator_default as ModelSelectorSeparator, model_selector_shortcut_default as ModelSelectorShortcut, model_selector_trigger_default as ModelSelectorTrigger, month_picker_default as MonthPicker, Notification, NumberFlow, NumberFlowGroup, PageHeader, Pagination, Panel, PanelGroup, PanelSeparator, PerformantEllipsis, Popconfirm, Popover, Progress, QrCode, quarter_picker_default as QuarterPicker, RICH_TEXT_EDITOR_BUILT_IN_NODE_NAMES, RICH_TEXT_EDITOR_JSON_FORM_NODE_NAMES, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, recorder_core_default as RecorderCore, RegexVis, Result, RichLineClamp, RichTextEditor, grid_row_default as Row, Scrollbar, Secret, Select, SelectableCard, Sender, SenderHeader, SenderSwitch, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, sub_menu_default as SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, TagGroup, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, ThemeProvider, ThinkingOrb, TimePicker, Timeline, item_default$1 as TimelineItem, Toolbar, Tooltip, Tour, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, WrapClamp, year_picker_default as YearPicker, addI18nMessages, continuous, SDVue as default, defaultInputMaskFormatChars, defineJsonFormComponents, defineJsonFormSchemas, formatInputMask, getCssVarToken, getLocale, getThemeCSSVariables, inputMaskPresets, normalizeTheme, normalizeTokenKey, parseThemeConfig, useCanAnimate, useFormItem, useLocale, validateThemeConfig };

package/es/input/style/index.css

@@ -22,25 +22,25 @@
 /******** 高级配置项 end *******/
 .size-height-size-mini {
   /* prettier-ignore */
-  padding-top: 1px;
+  padding-top: calc((22px - 1.667 * var(--component-input-input-size-mini-font-size, var(--component-input-size-mini-font-size, var(--font-size-body-1, 12px)))) * 0.5);
   /* prettier-ignore */
-  padding-bottom: 1px;
-  font-size: 12px;
+  padding-bottom: calc((22px - 1.667 * var(--component-input-input-size-mini-font-size, var(--component-input-size-mini-font-size, var(--font-size-body-1, 12px)))) * 0.5);
+  font-size: var(--component-input-input-size-mini-font-size, var(--component-input-size-mini-font-size, var(--font-size-body-1, 12px)));
   line-height: 1.667;
 }
 .size-height-size-small {
   /* prettier-ignore */
-  padding-top: 2px;
+  padding-top: calc((26px - 1.5715 * var(--component-input-input-size-small-font-size, var(--component-input-size-small-font-size, var(--font-size-body-3, 14px)))) * 0.5);
   /* prettier-ignore */
-  padding-bottom: 2px;
-  font-size: 14px;
+  padding-bottom: calc((26px - 1.5715 * var(--component-input-input-size-small-font-size, var(--component-input-size-small-font-size, var(--font-size-body-3, 14px)))) * 0.5);
+  font-size: var(--component-input-input-size-small-font-size, var(--component-input-size-small-font-size, var(--font-size-body-3, 14px)));
 }
 .size-height-size-large {
   /* prettier-ignore */
-  padding-top: 6px;
+  padding-top: calc((34px - 1.5715 * var(--component-input-input-size-large-font-size, var(--component-input-size-large-font-size, var(--font-size-body-3, 14px)))) * 0.5);
   /* prettier-ignore */
-  padding-bottom: 6px;
-  font-size: 14px;
+  padding-bottom: calc((34px - 1.5715 * var(--component-input-input-size-large-font-size, var(--component-input-size-large-font-size, var(--font-size-body-3, 14px)))) * 0.5);
+  font-size: var(--component-input-input-size-large-font-size, var(--component-input-size-large-font-size, var(--font-size-body-3, 14px)));
 }
 
 .sd-input-wrapper {
@@ -49,52 +49,52 @@
   width: 100%;
   padding-right: 12px;
   padding-left: 12px;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
-  background-color: var(--sd-color-fill-2);
-  border: 1px solid transparent;
-  border-radius: var(--sd-border-radius-small);
+  color: var(--component-input-input-color-text, var(--component-input-color-text, var(--sd-color-text-1)));
+  font-size: var(--component-input-input-size-default-font-size, var(--component-input-size-default-font-size, var(--font-size-body-3, 14px)));
+  background-color: var(--component-input-input-color-bg, var(--component-input-color-bg, var(--sd-color-fill-2)));
+  border: 1px solid var(--component-input-input-color-border, var(--component-input-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
+  border-radius: var(--component-input-input-border-radius, var(--component-input-border-radius, var(--sd-border-radius-small)));
   cursor: text;
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-input-wrapper:hover {
-  background-color: var(--sd-color-fill-3);
-  border-color: transparent;
+  background-color: var(--component-input-input-color-bg-hover, var(--component-input-color-bg-hover, var(--sd-color-fill-3)));
+  border-color: var(--component-input-input-color-border-hover, var(--component-input-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-input-wrapper:focus-within, .sd-input-wrapper.sd-input-focus {
   z-index: 1;
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-primary-6));
-  box-shadow: 0 0 0 0 var(--sd-color-primary-light-2);
+  background-color: var(--component-input-input-color-bg-focus, var(--component-input-color-bg-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-input-input-color-border-focus, var(--component-input-color-border-focus, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  box-shadow: 0 0 0 var(--component-input-input-size-shadow-focus, var(--component-input-size-shadow-focus, var(--shadow-distance-none, 0))) var(--component-input-input-color-shadow-focus, var(--component-input-color-shadow-focus, var(--sd-color-primary-light-2)));
 }
 .sd-input-wrapper.sd-input-disabled {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-fill-2);
-  border-color: transparent;
+  color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-input-input-color-bg-disabled, var(--component-input-color-bg-disabled, var(--sd-color-fill-2)));
+  border-color: var(--component-input-input-color-border-disabled, var(--component-input-color-border-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: not-allowed;
 }
 .sd-input-wrapper.sd-input-disabled:hover {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-fill-2);
-  border-color: transparent;
+  color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-input-input-color-bg-disabled, var(--component-input-color-bg-disabled, var(--sd-color-fill-2)));
+  border-color: var(--component-input-input-color-border-disabled, var(--component-input-color-border-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-input-wrapper.sd-input-disabled .sd-input-prefix,
 .sd-input-wrapper.sd-input-disabled .sd-input-suffix {
   color: inherit;
 }
 .sd-input-wrapper.sd-input-error {
-  background-color: var(--sd-color-danger-light-1);
-  border-color: transparent;
+  background-color: var(--component-input-input-color-bg-error, var(--component-input-color-bg-error, var(--sd-color-danger-light-1)));
+  border-color: var(--component-input-input-color-border-error, var(--component-input-color-border-error, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-input-wrapper.sd-input-error:hover {
-  background-color: var(--sd-color-danger-light-2);
-  border-color: transparent;
+  background-color: var(--component-input-input-color-bg-error-hover, var(--component-input-color-bg-error-hover, var(--sd-color-danger-light-2)));
+  border-color: var(--component-input-input-color-border-error-hover, var(--component-input-color-border-error-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-input-wrapper.sd-input-error:focus-within, .sd-input-wrapper.sd-input-error.sd-input-wrapper-focus {
   z-index: 1;
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-danger-6));
-  box-shadow: 0 0 0 0 var(--sd-color-danger-light-2);
+  background-color: var(--component-input-input-color-bg-error-focus, var(--component-input-color-bg-error-focus, var(--component-input-input-color-bg-focus, var(--component-input-color-bg-focus, var(--sd-color-bg-2)))));
+  border-color: var(--component-input-input-color-border-error-focus, var(--component-input-color-border-error-focus, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
+  box-shadow: 0 0 0 var(--component-input-input-size-shadow-error-focus, var(--component-input-size-shadow-error-focus, var(--shadow-distance-none, 0))) var(--component-input-input-color-shadow-error-focus, var(--component-input-color-shadow-error-focus, var(--sd-color-danger-light-2)));
 }
 .sd-input-wrapper .sd-input-prefix,
 .sd-input-wrapper .sd-input-suffix {
@@ -106,7 +106,7 @@
 }
 .sd-input-wrapper .sd-input-prefix > svg,
 .sd-input-wrapper .sd-input-suffix > svg {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-default-icon-suffix-size, var(--component-input-size-default-icon-suffix-size, 14px));
 }
 .sd-input-wrapper .sd-input-prefix {
   padding-right: 12px;
@@ -114,27 +114,27 @@
 }
 .sd-input-wrapper .sd-input-suffix {
   padding-left: 12px;
-  color: var(--sd-color-text-2);
+  color: var(--component-input-input-color-suffix-text, var(--component-input-color-suffix-text, var(--sd-color-text-2)));
 }
 .sd-input-wrapper .sd-input-suffix .sd-feedback-icon {
   display: inline-flex;
 }
 .sd-input-wrapper .sd-input-suffix .sd-feedback-icon-status-validating {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-input-input-feedback-icon-color-validating, var(--component-input-feedback-icon-color-validating, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-input-wrapper .sd-input-suffix .sd-feedback-icon-status-success {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-input-input-feedback-icon-color-success, var(--component-input-feedback-icon-color-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-input-wrapper .sd-input-suffix .sd-feedback-icon-status-warning {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-input-input-feedback-icon-color-warning, var(--component-input-feedback-icon-color-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
 }
 .sd-input-wrapper .sd-input-suffix .sd-feedback-icon-status-error {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-input-input-feedback-icon-color-error, var(--component-input-feedback-icon-color-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 .sd-input-wrapper .sd-input-clear-btn {
   align-self: center;
-  color: var(--sd-color-text-2);
-  font-size: 12px;
+  color: var(--component-input-input-color-icon-clear, var(--component-input-color-icon-clear, var(--sd-color-text-2)));
+  font-size: var(--component-input-input-size-icon-clear, var(--component-input-size-icon-clear, var(--size-3, 12px)));
   visibility: hidden;
   cursor: pointer;
 }
@@ -146,7 +146,7 @@
   visibility: visible;
 }
 .sd-input-wrapper:not(.sd-input-focus) .sd-input-icon-hover:hover::before {
-  background-color: var(--sd-color-fill-4);
+  background-color: var(--component-input-input-color-icon-clear-bg-hover, var(--component-input-color-icon-clear-bg-hover, var(--sd-color-fill-4)));
 }
 .sd-input-wrapper.sd-input-fit-width {
   width: fit-content;
@@ -169,49 +169,49 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .sd-input-wrapper .sd-input::placeholder {
-  color: var(--sd-color-text-3);
+  color: var(--component-input-input-color-placeholder-text, var(--component-input-color-placeholder-text, var(--sd-color-text-3)));
 }
 .sd-input-wrapper .sd-input[disabled]::placeholder {
-  color: var(--sd-color-text-4);
+  color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
 }
 .sd-input-wrapper .sd-input[disabled] {
-  -webkit-text-fill-color: var(--sd-color-text-4);
+  -webkit-text-fill-color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
 }
 .sd-input-wrapper .sd-input.sd-input-size-mini {
   /* prettier-ignore */
-  padding-top: 1px;
+  padding-top: calc((22px - 1.667 * var(--component-input-input-size-mini-font-size, var(--component-input-size-mini-font-size, var(--font-size-body-1, 12px)))) / 2);
   /* prettier-ignore */
-  padding-bottom: 1px;
-  font-size: 12px;
+  padding-bottom: calc((22px - 1.667 * var(--component-input-input-size-mini-font-size, var(--component-input-size-mini-font-size, var(--font-size-body-1, 12px)))) / 2);
+  font-size: var(--component-input-input-size-mini-font-size, var(--component-input-size-mini-font-size, var(--font-size-body-1, 12px)));
   line-height: 1.667;
 }
 .sd-input-wrapper .sd-input.sd-input-size-small {
   /* prettier-ignore */
-  padding-top: 2px;
+  padding-top: calc((26px - 1.5715 * var(--component-input-input-size-small-font-size, var(--component-input-size-small-font-size, var(--font-size-body-3, 14px)))) / 2);
   /* prettier-ignore */
-  padding-bottom: 2px;
-  font-size: 14px;
+  padding-bottom: calc((26px - 1.5715 * var(--component-input-input-size-small-font-size, var(--component-input-size-small-font-size, var(--font-size-body-3, 14px)))) / 2);
+  font-size: var(--component-input-input-size-small-font-size, var(--component-input-size-small-font-size, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
 }
 .sd-input-wrapper .sd-input.sd-input-size-medium {
   /* prettier-ignore */
-  padding-top: 4px;
+  padding-top: calc((30px - 1.5715 * var(--component-input-input-size-medium-font-size, var(--component-input-size-medium-font-size, var(--component-input-input-size-default-font-size, var(--component-input-size-default-font-size, var(--font-size-body-3, 14px)))))) / 2);
   /* prettier-ignore */
-  padding-bottom: 4px;
-  font-size: 14px;
+  padding-bottom: calc((30px - 1.5715 * var(--component-input-input-size-medium-font-size, var(--component-input-size-medium-font-size, var(--component-input-input-size-default-font-size, var(--component-input-size-default-font-size, var(--font-size-body-3, 14px)))))) / 2);
+  font-size: var(--component-input-input-size-medium-font-size, var(--component-input-size-medium-font-size, var(--component-input-input-size-default-font-size, var(--component-input-size-default-font-size, var(--font-size-body-3, 14px)))));
   line-height: 1.5715;
 }
 .sd-input-wrapper .sd-input.sd-input-size-large {
   /* prettier-ignore */
-  padding-top: 6px;
+  padding-top: calc((34px - 1.5715 * var(--component-input-input-size-large-font-size, var(--component-input-size-large-font-size, var(--font-size-body-3, 14px)))) / 2);
   /* prettier-ignore */
-  padding-bottom: 6px;
-  font-size: 14px;
+  padding-bottom: calc((34px - 1.5715 * var(--component-input-input-size-large-font-size, var(--component-input-size-large-font-size, var(--font-size-body-3, 14px)))) / 2);
+  font-size: var(--component-input-input-size-large-font-size, var(--component-input-size-large-font-size, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
 }
 .sd-input-wrapper .sd-input-word-limit {
-  color: var(--sd-color-text-3);
-  font-size: 12px;
+  color: var(--component-input-input-color-tip-text, var(--component-input-color-tip-text, var(--sd-color-text-3)));
+  font-size: var(--component-input-input-font-tip-size, var(--component-input-font-tip-size, var(--font-size-body-1, 12px)));
 }
 
 .sd-input-outer {
@@ -232,31 +232,31 @@
   border-radius: 0;
 }
 .sd-input-outer > :first-child {
-  border-top-left-radius: var(--sd-border-radius-small);
-  border-bottom-left-radius: var(--sd-border-radius-small);
+  border-top-left-radius: var(--component-input-input-border-radius, var(--component-input-border-radius, var(--sd-border-radius-small)));
+  border-bottom-left-radius: var(--component-input-input-border-radius, var(--component-input-border-radius, var(--sd-border-radius-small)));
 }
 .sd-input-outer > :last-child {
-  border-top-right-radius: var(--sd-border-radius-small);
-  border-bottom-right-radius: var(--sd-border-radius-small);
+  border-top-right-radius: var(--component-input-input-border-radius, var(--component-input-border-radius, var(--sd-border-radius-small)));
+  border-bottom-right-radius: var(--component-input-input-border-radius, var(--component-input-border-radius, var(--sd-border-radius-small)));
 }
 .sd-input-outer.sd-input-outer-size-mini .sd-input-outer {
-  font-size: 12px;
+  font-size: var(--component-input-input-size-mini-font-size, var(--component-input-size-mini-font-size, var(--font-size-body-1, 12px)));
 }
 .sd-input-outer.sd-input-outer-size-mini .sd-input-wrapper .sd-input-prefix,
 .sd-input-outer.sd-input-outer-size-mini .sd-input-wrapper .sd-input-suffix {
-  font-size: 12px;
+  font-size: var(--component-input-input-size-mini-font-size, var(--component-input-size-mini-font-size, var(--font-size-body-1, 12px)));
 }
 .sd-input-outer.sd-input-outer-size-mini .sd-input-wrapper .sd-input-prefix > svg,
 .sd-input-outer.sd-input-outer-size-mini .sd-input-wrapper .sd-input-suffix > svg {
-  font-size: 12px;
+  font-size: var(--component-input-input-size-mini-icon-suffix-size, var(--component-input-size-mini-icon-suffix-size, var(--size-3, 12px)));
 }
 .sd-input-outer.sd-input-outer-size-mini .sd-input-prepend,
 .sd-input-outer.sd-input-outer-size-mini .sd-input-append {
-  font-size: 12px;
+  font-size: var(--component-input-input-size-mini-font-size, var(--component-input-size-mini-font-size, var(--font-size-body-1, 12px)));
 }
 .sd-input-outer.sd-input-outer-size-mini .sd-input-prepend > svg,
 .sd-input-outer.sd-input-outer-size-mini .sd-input-append > svg {
-  font-size: 12px;
+  font-size: var(--component-input-input-size-mini-icon-addon-size, var(--component-input-size-mini-icon-addon-size, var(--size-3, 12px)));
 }
 .sd-input-outer.sd-input-outer-size-mini .sd-input-prepend .sd-input {
   width: auto;
@@ -313,23 +313,23 @@
   height: 100%;
 }
 .sd-input-outer.sd-input-outer-size-small .sd-input-outer {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-small-font-size, var(--component-input-size-small-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-input-outer.sd-input-outer-size-small .sd-input-wrapper .sd-input-prefix,
 .sd-input-outer.sd-input-outer-size-small .sd-input-wrapper .sd-input-suffix {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-small-font-size, var(--component-input-size-small-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-input-outer.sd-input-outer-size-small .sd-input-wrapper .sd-input-prefix > svg,
 .sd-input-outer.sd-input-outer-size-small .sd-input-wrapper .sd-input-suffix > svg {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-small-icon-suffix-size, var(--component-input-size-small-icon-suffix-size, 14px));
 }
 .sd-input-outer.sd-input-outer-size-small .sd-input-prepend,
 .sd-input-outer.sd-input-outer-size-small .sd-input-append {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-small-font-size, var(--component-input-size-small-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-input-outer.sd-input-outer-size-small .sd-input-prepend > svg,
 .sd-input-outer.sd-input-outer-size-small .sd-input-append > svg {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-small-icon-addon-size, var(--component-input-size-small-icon-addon-size, 14px));
 }
 .sd-input-outer.sd-input-outer-size-small .sd-input-prepend .sd-input {
   width: auto;
@@ -386,23 +386,23 @@
   height: 100%;
 }
 .sd-input-outer.sd-input-outer-size-large .sd-input-outer {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-large-font-size, var(--component-input-size-large-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-input-outer.sd-input-outer-size-large .sd-input-wrapper .sd-input-prefix,
 .sd-input-outer.sd-input-outer-size-large .sd-input-wrapper .sd-input-suffix {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-large-font-size, var(--component-input-size-large-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-input-outer.sd-input-outer-size-large .sd-input-wrapper .sd-input-prefix > svg,
 .sd-input-outer.sd-input-outer-size-large .sd-input-wrapper .sd-input-suffix > svg {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-large-icon-suffix-size, var(--component-input-size-large-icon-suffix-size, 14px));
 }
 .sd-input-outer.sd-input-outer-size-large .sd-input-prepend,
 .sd-input-outer.sd-input-outer-size-large .sd-input-append {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-large-font-size, var(--component-input-size-large-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-input-outer.sd-input-outer-size-large .sd-input-prepend > svg,
 .sd-input-outer.sd-input-outer-size-large .sd-input-append > svg {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-large-icon-addon-size, var(--component-input-size-large-icon-addon-size, 14px));
 }
 .sd-input-outer.sd-input-outer-size-large .sd-input-prepend .sd-input {
   width: auto;
@@ -469,18 +469,18 @@
   align-items: center;
   box-sizing: border-box;
   padding: 0 12px;
-  color: var(--sd-color-text-1);
+  color: var(--component-input-input-color-text, var(--component-input-color-text, var(--sd-color-text-1)));
   white-space: nowrap;
-  background-color: var(--sd-color-fill-2);
-  border: 1px solid transparent;
+  background-color: var(--component-input-input-color-addon-bg, var(--component-input-color-addon-bg, var(--component-input-input-color-bg, var(--component-input-color-bg, var(--sd-color-fill-2)))));
+  border: 1px solid var(--component-input-input-color-addon-border-default, var(--component-input-color-addon-border-default, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-input-prepend > svg,
 .sd-input-append > svg {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-default-icon-addon-size, var(--component-input-size-default-icon-addon-size, 14px));
 }
 
 .sd-input-prepend {
-  border-right: 1px solid var(--sd-color-neutral-3);
+  border-right: var(--component-input-input-border-addon-separator-width, var(--component-input-border-addon-separator-width, var(--border-1, 1px))) solid var(--component-input-input-color-addon-border, var(--component-input-color-addon-border, var(--sd-color-neutral-3)));
 }
 .sd-input-prepend .sd-input {
   width: auto;
@@ -511,7 +511,7 @@
 }
 
 .sd-input-append {
-  border-left: 1px solid var(--sd-color-neutral-3);
+  border-left: var(--component-input-input-border-addon-separator-width, var(--component-input-border-addon-separator-width, var(--border-1, 1px))) solid var(--component-input-input-color-addon-border, var(--component-input-color-addon-border, var(--sd-color-neutral-3)));
 }
 .sd-input-append .sd-input {
   width: auto;
@@ -581,42 +581,42 @@
 }
 
 .sd-input-group > *:first-child, .sd-input-group > *:first-child .sd-input-group > *:first-child {
-  border-top-left-radius: var(--sd-border-radius-small);
-  border-bottom-left-radius: var(--sd-border-radius-small);
+  border-top-left-radius: var(--component-input-input-group-border-radius-compact, var(--component-input-group-border-radius-compact, var(--sd-border-radius-small)));
+  border-bottom-left-radius: var(--component-input-input-group-border-radius-compact, var(--component-input-group-border-radius-compact, var(--sd-border-radius-small)));
 }
 
 .sd-input-group > *:first-child .sd-select-view, .sd-input-group > *:first-child .sd-input-group > *:first-child .sd-select-view {
-  border-top-left-radius: var(--sd-border-radius-small);
-  border-bottom-left-radius: var(--sd-border-radius-small);
+  border-top-left-radius: var(--component-input-input-group-border-radius-compact, var(--component-input-group-border-radius-compact, var(--sd-border-radius-small)));
+  border-bottom-left-radius: var(--component-input-input-group-border-radius-compact, var(--component-input-group-border-radius-compact, var(--sd-border-radius-small)));
 }
 
 .sd-input-group > *:last-child, .sd-input-group > *:last-child .sd-input-outer > *:last-child {
-  border-top-right-radius: var(--sd-border-radius-small);
-  border-bottom-right-radius: var(--sd-border-radius-small);
+  border-top-right-radius: var(--component-input-input-group-border-radius-compact, var(--component-input-group-border-radius-compact, var(--sd-border-radius-small)));
+  border-bottom-right-radius: var(--component-input-input-group-border-radius-compact, var(--component-input-group-border-radius-compact, var(--sd-border-radius-small)));
 }
 
 .sd-input-group > *:last-child .sd-select-view, .sd-input-group > *:last-child .sd-input-outer > *:last-child .sd-select-view {
-  border-top-right-radius: var(--sd-border-radius-small);
-  border-bottom-right-radius: var(--sd-border-radius-small);
+  border-top-right-radius: var(--component-input-input-group-border-radius-compact, var(--component-input-group-border-radius-compact, var(--sd-border-radius-small)));
+  border-bottom-right-radius: var(--component-input-input-group-border-radius-compact, var(--component-input-group-border-radius-compact, var(--sd-border-radius-small)));
 }
 
 .sd-input-group > .sd-input-wrapper:not(:last-child),
 .sd-input-group > .sd-input-outer:not(:last-child),
 .sd-input-group > .sd-input-tag:not(:last-child),
 .sd-input-group > .sd-select-view:not(:last-child) {
-  margin-right: -1px;
-  border-right: 1px solid var(--sd-color-neutral-3);
+  margin-right: -var(--component-input-input-group-border-separator-width, var(--component-input-group-border-separator-width, var(--border-1, 1px)));
+  border-right: var(--component-input-input-group-border-separator-width, var(--component-input-group-border-separator-width, var(--border-1, 1px))) solid var(--component-input-input-group-color-separator-border, var(--component-input-group-color-separator-border, var(--sd-color-neutral-3)));
 }
 
 .sd-input-group > .sd-input-wrapper:not(:last-child):focus-within,
 .sd-input-group > .sd-input-outer:not(:last-child):focus-within,
 .sd-input-group > .sd-input-tag:not(:last-child):focus-within,
 .sd-input-group > .sd-select-view:not(:last-child):focus-within {
-  border-right-color: rgb(var(--sd-primary-6));
+  border-right-color: var(--component-input-input-color-border-focus, var(--component-input-color-border-focus, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 
 .sd-input-group > .sd-input-wrapper.sd-input-error:not(:last-child):focus-within {
-  border-right-color: rgb(var(--sd-danger-6));
+  border-right-color: var(--component-input-input-color-border-error-focus, var(--component-input-color-border-error-focus, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 
 /******** borderSize *******/
@@ -657,18 +657,18 @@
 .sd-textarea-word-limit {
   position: absolute;
   right: 10px;
-  bottom: 6px;
-  color: var(--sd-color-text-3);
-  font-size: 12px;
+  bottom: var(--component-input-textarea-layout-tip-bottom, var(--component-input-layout-tip-bottom, var(--spacing-3, 6px)));
+  color: var(--component-input-textarea-color-tip-text, var(--component-input-color-tip-text, var(--sd-color-text-3)));
+  font-size: var(--component-input-textarea-font-tip-size, var(--component-input-font-tip-size, var(--font-size-body-1, 12px)));
   user-select: none;
 }
 
 .sd-textarea-clear-icon {
   position: absolute;
-  top: 10px;
+  top: var(--component-input-textarea-layout-top-icon-clear, var(--component-input-layout-top-icon-clear, var(--spacing-5, 10px)));
   right: 10px;
   display: none;
-  font-size: 12px;
+  font-size: var(--component-input-textarea-size-icon-clear, var(--component-input-size-icon-clear, var(--font-size-body-1, 12px)));
 }
 
 /******** borderSize *******/
@@ -698,8 +698,8 @@
 }
 
 .sd-input-search .sd-input-suffix {
-  color: var(--sd-color-text-2);
-  font-size: 14px;
+  color: var(--component-input-search-color-icon, var(--component-input-color-icon, var(--sd-color-text-2)));
+  font-size: var(--component-input-search-size-icon, var(--component-input-size-icon, 14px));
 }
 
 .sd-input-search .sd-input-search-btn {
@@ -729,7 +729,7 @@
 /******** 高级配置项 *******/
 /******** 高级配置项 end *******/
 .sd-input-wrapper.sd-input-password:not(.sd-input-disabled) .sd-input-suffix {
-  color: var(--sd-color-text-2);
-  font-size: 12px;
+  color: var(--component-input-password-color-eye-icon, var(--component-input-color-eye-icon, var(--sd-color-text-2)));
+  font-size: var(--component-input-password-size-eye-icon, var(--component-input-size-eye-icon, var(--size-3, 12px)));
   cursor: pointer;
 }

package/es/input/style/input.scss

@@ -191,16 +191,10 @@
   $line-height: string.unquote('input-size-#{$size}-line-height');
 
   /* prettier-ignore */
-  padding-top: math.div(
-    math.round(token-var($height) - $input-border-width * 2 - token-var($line-height) * token-var($font-size)),
-    2
-  );
+  padding-top: calc((token-var($height) - $input-border-width * 2 - token-var($line-height) * token-var($font-size)) / 2);
 
   /* prettier-ignore */
-  padding-bottom: math.div(
-    math.round(token-var($height) - $input-border-width * 2 - token-var($line-height) * token-var($font-size)),
-    2
-  );
+  padding-bottom: calc((token-var($height) - $input-border-width * 2 - token-var($line-height) * token-var($font-size)) / 2);
   font-size: token-var($font-size);
   line-height: token-var($line-height);
 }

package/es/input/style/size.scss

@@ -7,10 +7,10 @@ $input-prefix-cls: string.unquote('#{theme.$prefix}-input');
 
 @mixin get-padding($input-size-height, $input-font-size) {
   /* prettier-ignore */
-  padding-top: (math.round($input-size-height - $input-border-width * 2 - theme.$line-height-base * $input-font-size) * 0.5);
+  padding-top: calc(($input-size-height - $input-border-width * 2 - theme.$line-height-base * $input-font-size) * 0.5);
 
   /* prettier-ignore */
-  padding-bottom: (math.round($input-size-height - $input-border-width * 2 - theme.$line-height-base * $input-font-size) * 0.5);
+  padding-bottom: calc(($input-size-height - $input-border-width * 2 - theme.$line-height-base * $input-font-size) * 0.5);
 }
 
 // 前置后置标签
@@ -79,10 +79,10 @@ $input-prefix-cls: string.unquote('#{theme.$prefix}-input');
 .size-height {
   &-size-mini {
     /* prettier-ignore */
-    padding-top: (math.round($input-size-mini-height - $input-border-width * 2 - 1.667 * $input-size-mini-font-size) * 0.5);
+    padding-top: calc(($input-size-mini-height - $input-border-width * 2 - 1.667 * $input-size-mini-font-size) * 0.5);
 
     /* prettier-ignore */
-    padding-bottom: (math.round($input-size-mini-height - $input-border-width * 2 - 1.667 * $input-size-mini-font-size) * 0.5);
+    padding-bottom: calc(($input-size-mini-height - $input-border-width * 2 - 1.667 * $input-size-mini-font-size) * 0.5);
     font-size: $input-size-mini-font-size;
     line-height: 1.667;
   }