@sdata/web-vue 1.10.0 → 1.11.0

package/es/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="./components.d.ts" />
 export { default } from './sd-vue';
 export { addI18nMessages, useLocale, getLocale } from './locale';
 export type { Size, Status, MessageType, Direction } from './_utils/constant';
@@ -8,7 +9,7 @@ export type { AlertInstance } from './alert';
 export { default as Anchor, AnchorLink } from './anchor';
 export type { AnchorInstance, AnchorLinkInstance } from './anchor';
 export { default as AutoComplete } from './auto-complete';
-export type { AutoCompleteInstance } from './auto-complete';
+export type { AutoCompleteChangeHandler, AutoCompleteClearHandler, AutoCompleteData, AutoCompleteDropdownReachBottomHandler, AutoCompleteDropdownScrollHandler, AutoCompleteFilterOption, AutoCompleteInstance, AutoCompleteSearchHandler, AutoCompleteSelectHandler, } from './auto-complete';
 export { default as Avatar, AvatarGroup } from './avatar';
 export type { AvatarInstance, AvatarGroupInstance } from './avatar';
 export { default as BackTop } from './back-top';
@@ -23,9 +24,9 @@ export { default as Card, CardGrid, CardMeta } from './card';
 export { default as Calendar } from './calendar';
 export type { CardGridInstance, CardInstance, CardMetaInstance } from './card';
 export { default as Carousel, CarouselItem } from './carousel';
-export type { CarouselInstance, CarouselItemInstance } from './carousel';
+export type { CarouselArrowType, CarouselAutoPlayConfig, CarouselIndicatorPosition, CarouselIndicatorType, CarouselInstance, CarouselItemInstance, CarouselTriggerEvent, } from './carousel';
 export { default as Cascader, CascaderPanel } from './cascader';
-export type { CascaderFieldNames, CascaderInstance, CascaderPanelInstance, CascaderOption, } from './cascader';
+export type { CascaderChangeHandler, CascaderFallback, CascaderFieldNames, CascaderFormatLabel, CascaderInstance, CascaderLoadMore, CascaderModelValue, CascaderPanelInstance, CascaderOption, CascaderOptionValue, CascaderPathValue, CascaderSearchHandler, CascaderSingleValue, } from './cascader';
 export { default as Checkbox, CheckboxGroup } from './checkbox';
 export type { CheckboxGroupInstance, CheckboxInstance, CheckboxOption } from './checkbox';
 export { default as Collapse, CollapseItem } from './collapse';
@@ -35,13 +36,13 @@ export type { CommentInstance } from './comment';
 export { default as ColorPicker } from './color-picker';
 export type { ColorPickerInstance } from './color-picker';
 export { default as ConfigProvider } from './config-provider';
-export type { ConfigProviderInstance } from './config-provider';
+export type { ConfigProviderInstance, SDThemeConfig, SDThemeMeta, SDThemeMode, ThemeTokenMap, ThemeTokenValue, } from './config-provider';
 export { default as ThemeProvider } from './theme-provider';
 export type { ThemeProviderInstance } from './theme-provider';
 export { default as DatePicker, MonthPicker, QuarterPicker, WeekPicker, YearPicker, RangePicker, } from './date-picker';
-export type { DatePickerInstance, MonthPickerInstance, QuarterPickerInstance, RangePickerInstance, ShortcutType, WeekPickerInstance, YearPickerInstance, } from './date-picker';
+export type { CalendarValue, DatePickerChangeHandler, DatePickerInstance, DatePickerOkHandler, DatePickerProps, DatePickerSelectHandler, DisabledDate, DisabledTime, DisabledTimeProps, FormatFunc, MonthPickerProps, MonthPickerInstance, PickerProps, QuarterPickerProps, QuarterPickerInstance, RangeDisabledDate, RangeDisabledTime, RangePickerChangeHandler, RangePickerInstance, RangePickerOkHandler, RangePickerProps, RangePickerSelectHandler, ShortcutType, ValueFormat, WeekPickerProps, WeekPickerInstance, YearPickerProps, YearPickerInstance, } from './date-picker';
 export { default as Descriptions, DescriptionsItem } from './descriptions';
-export type { DescData, DescriptionsInstance, DescriptionsItemInstance } from './descriptions';
+export type { DescData, DescLayout, DescriptionsInstance, DescriptionsItemInstance, } from './descriptions';
 export { default as Divider } from './divider';
 export { default as Drawer } from './drawer';
 export type { DrawerConfig, DrawerInstance, DrawerMethod, DrawerReturn } from './drawer';
@@ -62,7 +63,7 @@ export type { ImageInstance, ImagePreviewActionInstance, ImagePreviewInstance, I
 export { default as Input, InputGroup, InputPassword, InputSearch } from './input';
 export type { InputGroupInstance, InputInstance, InputPasswordInstance, InputSearchInstance, } from './input';
 export { default as InputNumber } from './input-number';
-export type { InputNumberInstance } from './input-number';
+export type { InputNumberChangeHandler, InputNumberFormatter, InputNumberInputHandler, InputNumberInstance, InputNumberParser, InputNumberValue, } from './input-number';
 export { default as InputTag } from './input-tag';
 export type { InputTagFieldNames, InputTagInstance, TagData } from './input-tag';
 export { default as Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, } from './layout';
@@ -74,7 +75,7 @@ export type { ListInstance, ListItemInstance, ListItemMetaInstance } from './lis
 export { default as Mention } from './mention';
 export type { MentionInstance } from './mention';
 export { default as Menu, MenuItem, MenuItemGroup, SubMenu } from './menu';
-export type { MenuInstance, MenuItemInstance, MenuItemGroupInstance, MenuSubMenuInstance, } from './menu';
+export type { MenuCollapseHandler, MenuCollapseTrigger, MenuData, MenuDataItem, MenuInstance, MenuItemClickHandler, MenuItemGroupProps, MenuItemInstance, MenuItemGroupInstance, MenuItemProps, MenuMode, MenuOpenKeys, MenuProps, MenuSubMenuInstance, MenuSubMenuClickHandler, MenuSelectedKeys, MenuTheme, PopupMenuMaxHeightType, SubMenuChildDataType, SubMenuProps, } from './menu';
 export { default as Message } from './message';
 export type { MessageMethod, MessageConfig, MessageReturn } from './message';
 export { default as Modal } from './modal';
@@ -92,7 +93,7 @@ export type { PopoverInstance } from './popover';
 export { default as Progress } from './progress';
 export type { ProgressInstance } from './progress';
 export { default as Radio, RadioGroup } from './radio';
-export type { RadioInstance, RadioGroupInstance } from './radio';
+export type { RadioGroupChangeHandler, RadioGroupInstance, RadioInstance, RadioOption, RadioValue, } from './radio';
 export { default as Rate } from './rate';
 export type { RateInstance } from './rate';
 export { default as ResizeBox } from './resize-box';
@@ -102,11 +103,11 @@ export type { ResultInstance } from './result';
 export { default as Scrollbar } from './scrollbar';
 export type { ScrollbarElements, ScrollbarEventListener, ScrollbarEventListenerArgs, ScrollbarEventListeners, ScrollbarExpose, ScrollbarInstance, ScrollbarOptions, ScrollbarOptionsResolved, ScrollbarPlugin, ScrollbarProps, ScrollbarReadonlyOptions, ScrollbarState, ScrollbarType, ScrollbarUpdatedEvent, } from './scrollbar';
 export { default as Select, Optgroup, Option } from './select';
-export type { FilterOption, SelectFieldNames, SelectInstance, SelectOptGroupInstance, SelectOption, SelectOptionData, SelectOptionGroup, SelectOptionInstance, SelectProps, } from './select';
+export type { FilterOption, SelectFallbackOption, SelectFieldNames, SelectInstance, SelectOptGroupInstance, SelectOption, SelectOptionData, SelectOptionGroup, SelectOptionInstance, SelectProps, } from './select';
 export { default as Skeleton, SkeletonLine, SkeletonShape } from './skeleton';
 export type { SkeletonInstance, SkeletonLineInstance, SkeletonShapeInstance } from './skeleton';
 export { default as Slider } from './slider';
-export type { SliderInstance } from './slider';
+export type { SliderChangeHandler, SliderFormatTooltip, SliderInstance, SliderValue, } from './slider';
 export { default as Space } from './space';
 export type { SpaceInstance } from './space';
 export { default as Spin } from './spin';
@@ -116,29 +117,29 @@ export type { SplitInstance } from './split';
 export { default as Statistic, Countdown } from './statistic';
 export type { CountdownInstance, StatisticInstance } from './statistic';
 export { default as Steps, Step } from './steps';
-export type { StepsInstance, StepsStepInstance } from './steps';
+export type { StepData, StepsChangeHandler, StepsInstance, StepsStepInstance, StepsType, StepStatus, } from './steps';
 export { default as Switch } from './switch';
-export type { SwitchInstance } from './switch';
+export type { SwitchBeforeChange, SwitchChangeHandler, SwitchInstance, SwitchValue, } from './switch';
 export { default as Table, Thead, Td, Th, Tr, Tbody, TableColumn } from './table';
-export type { TableBorder, TableChangeExtra, TableColumnData, TableColumnInstance, TableData, TableDraggable, TableExpandable, TableFilterable, TableFilterData, TableInstance, TableRowSelection, TableSortable, TbodyInstance, TdInstance, TheadInstance, ThInstance, TrInstance, } from './table';
+export type { TableBorder, TableChangeExtra, TableColumnData, TableColumnInstance, TableData, TableDraggable, TableExpandable, TableFilterable, TableFilterData, TableInstance, TableLoadMore, TableProps, TableRowKey, TableRowSelection, TableSortable, TableSpanMethod, TableSpanMethodContext, TableSummary, TableSummaryContext, TableSummarySpanMethod, TbodyInstance, TdInstance, TheadInstance, ThInstance, TrInstance, } from './table';
 export { default as Tabs, TabPane } from './tabs';
-export type { TabPaneInstance, TabsInstance } from './tabs';
+export type { ScrollPosition, TabPaneInstance, TabsInstance, TabsPosition, TabsType, TabTriggerEvent, } from './tabs';
 export { default as Tag } from './tag';
 export type { TagColor, TagInstance, TagProps } from './tag';
 export { default as Textarea } from './textarea';
 export type { TextareaInstance } from './textarea';
 export { default as TimePicker } from './time-picker';
-export type { TimePickerInstance } from './time-picker';
+export type { TimePickerInstance, TimeValue } from './time-picker';
 export { default as Timeline, TimelineItem } from './timeline';
-export type { TimelineInstance, TimelineItemInstance } from './timeline';
+export type { DotType, LabelPositionType, LineType, ModeType, PositionType, TimelineInstance, TimelineItemInstance, } from './timeline';
 export { default as Tooltip } from './tooltip';
 export type { TooltipInstance } from './tooltip';
 export { default as Transfer } from './transfer';
-export type { TransferInstance } from './transfer';
+export type { TransferInstance, TransferItem } from './transfer';
 export { default as Tree } from './tree';
-export type { TreeFieldNames, TreeInstance, TreeNodeData } from './tree';
+export type { CheckedStrategy, CheckableType, DropPosition, FilterTreeNode, Key2TreeNode, LoadMore, TreeCheckHandler, TreeDropHandler, TreeExpandHandler, TreeFieldNames, TreeInstance, TreeNodeData, TreeNodeKey, TreeProps, TreeSelectHandler, } from './tree';
 export { default as TreeSelect } from './tree-select';
-export type { TreeSelectInstance } from './tree-select';
+export type { LabelValue, TreeSelectChangeHandler, TreeSelectClearHandler, TreeSelectFallbackOption, TreeSelectFilterTreeNode, TreeSelectInstance, TreeSelectLoadMore, TreeSelectPopupVisibleChangeHandler, TreeSelectProps, TreeSelectSearchHandler, TreeSelectValue, } from './tree-select';
 export { default as Trigger } from './trigger';
 export type { TriggerEvent, TriggerInstance, TriggerPopupTranslate, TriggerPosition, TriggerProps, } from './trigger';
 export { default as Typography, TypographyParagraph, TypographyText, TypographyTitle, } from './typography';

package/es/input/style/input.scss

@@ -2,71 +2,19 @@
 @use 'sass:math';
 @use 'sass:string';
 @use 'sass:map';
-@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use 'sass:meta';
 @use '@style/mixins/index.scss' as *;
+@use '@components/input/style/token.scss' as token;
 @use '@components/input/style/token.scss' as *;
 
-$__less-vars: (
-  'input-border-radius': $input-border-radius,
-  'input-border-width': $input-border-width,
-  'input-color-addon-border': $input-color-addon-border,
-  'input-color-addon-border_default': $input-color-addon-border_default,
-  'input-color-bg': $input-color-bg,
-  'input-color-bg_disabled': $input-color-bg_disabled,
-  'input-color-bg_error': $input-color-bg_error,
-  'input-color-bg_error_focus': $input-color-bg_error_focus,
-  'input-color-bg_error_hover': $input-color-bg_error_hover,
-  'input-color-bg_focus': $input-color-bg_focus,
-  'input-color-bg_hover': $input-color-bg_hover,
-  'input-color-border': $input-color-border,
-  'input-color-border_disabled': $input-color-border_disabled,
-  'input-color-border_error': $input-color-border_error,
-  'input-color-border_error_focus': $input-color-border_error_focus,
-  'input-color-border_error_hover': $input-color-border_error_hover,
-  'input-color-border_focus': $input-color-border_focus,
-  'input-color-border_hover': $input-color-border_hover,
-  'input-color-icon-clear': $input-color-icon-clear,
-  'input-color-icon-clear-bg_hover': $input-color-icon-clear-bg_hover,
-  'input-color-placeholder-text': $input-color-placeholder-text,
-  'input-color-prefix-text': $input-color-prefix-text,
-  'input-color-shadow_error_focus': $input-color-shadow_error_focus,
-  'input-color-shadow_focus': $input-color-shadow_focus,
-  'input-color-suffix-text': $input-color-suffix-text,
-  'input-color-text': $input-color-text,
-  'input-color-text_disabled': $input-color-text_disabled,
-  'input-feedback-icon-color_error': $input-feedback-icon-color_error,
-  'input-feedback-icon-color_success': $input-feedback-icon-color_success,
-  'input-feedback-icon-color_validating': $input-feedback-icon-color_validating,
-  'input-feedback-icon-color_warning': $input-feedback-icon-color_warning,
-  'input-group-border-radius_compact': $input-group-border-radius_compact,
-  'input-padding-horizontal': $input-padding-horizontal,
-  'input-size-default-height': $input-size-default-height,
-  'input-size-default-font-size': $input-size-default-font-size,
-  'input-size-default-line-height': $input-size-medium-line-height,
-  'input-size-default-icon-suffix-size': $input-size-default-icon-suffix-size,
-  'input-size-icon-clear': $input-size-icon-clear,
-  'input-size-large-height': $input-size-large-height,
-  'input-size-large-font-size': $input-size-large-font-size,
-  'input-size-large-line-height': $input-size-large-line-height,
-  'input-size-medium-height': $input-size-medium-height,
-  'input-size-medium-font-size': $input-size-medium-font-size,
-  'input-size-medium-line-height': $input-size-medium-line-height,
-  'input-size-small-height': $input-size-small-height,
-  'input-size-small-font-size': $input-size-small-font-size,
-  'input-size-small-line-height': $input-size-small-line-height,
-  'input-size-shadow_error_focus': $input-size-shadow_error_focus,
-  'input-size-shadow_focus': $input-size-shadow_focus,
-  'line-height-base': theme.$line-height-base,
-  'prefix': theme.$prefix,
-  'transition-duration-1': theme.$transition-duration-1,
-  'transition-timing-function-linear': theme.$transition-timing-function-linear,
-  'input-size-mini-height': $input-size-mini-height,
-  'input-size-mini-line-height': $input-size-mini-line-height,
-  'input-size-mini-font-size': $input-size-mini-font-size,
-);
-
-@function less-var($name, $fallback: null) {
-  @return legacyLessVar.get($__less-vars, $name, $fallback);
+@function token-var($name, $fallback: null) {
+  $value: map.get(meta.module-variables('token'), $name);
+
+  @if $value == null {
+    @return $fallback;
+  }
+
+  @return $value;
 }
 
 @mixin input-suffix-feedback-icon-color() {
@@ -244,15 +192,15 @@ $__less-vars: (
 
   /* prettier-ignore */
   padding-top: math.div(
-    math.round(less-var($height) - $input-border-width * 2 - less-var($line-height) * less-var($font-size)),
+    math.round(token-var($height) - $input-border-width * 2 - token-var($line-height) * token-var($font-size)),
     2
   );
 
   /* prettier-ignore */
   padding-bottom: math.div(
-    math.round(less-var($height) - $input-border-width * 2 - less-var($line-height) * less-var($font-size)),
+    math.round(token-var($height) - $input-border-width * 2 - token-var($line-height) * token-var($font-size)),
     2
   );
-  font-size: less-var($font-size);
-  line-height: less-var($line-height);
+  font-size: token-var($font-size);
+  line-height: token-var($line-height);
 }

package/es/input-number/index.d.ts

@@ -1,6 +1,11 @@
 import type { App } from 'vue';
 import type { SDOptions } from '../_utils/types';
 import _InputNumber from './input-number';
+export type InputNumberValue = number | undefined;
+export type InputNumberFormatter = (value: string | number | undefined) => string;
+export type InputNumberParser = (value: string) => string | number;
+export type InputNumberChangeHandler = (value: InputNumberValue, event: Event) => void;
+export type InputNumberInputHandler = (value: InputNumberValue, inputValue: string, event: Event) => void;
 declare const InputNumber: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
         modelValue: NumberConstructor;

package/es/input-tag/style/index.css

@@ -99,13 +99,6 @@
   background-color: rgb(var(--red-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-red .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--red-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-red:hover {
-  background-color: rgb(var(--red-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-red.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-red.sd-tag-bordered:hover {
   border-color: rgb(var(--red-6));
@@ -118,13 +111,6 @@
   background-color: rgb(var(--orangered-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-orangered .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--orangered-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-orangered:hover {
-  background-color: rgb(var(--orangered-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-orangered.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-orangered.sd-tag-bordered:hover {
   border-color: rgb(var(--orangered-6));
@@ -137,13 +123,6 @@
   background-color: rgb(var(--orange-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-orange .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--orange-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-orange:hover {
-  background-color: rgb(var(--orange-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-orange.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-orange.sd-tag-bordered:hover {
   border-color: rgb(var(--orange-6));
@@ -156,13 +135,6 @@
   background-color: rgb(var(--gold-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-gold .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--gold-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-gold:hover {
-  background-color: rgb(var(--gold-3));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-gold.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-gold.sd-tag-bordered:hover {
   border-color: rgb(var(--gold-6));
@@ -175,13 +147,6 @@
   background-color: rgb(var(--lime-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-lime .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--lime-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-lime:hover {
-  background-color: rgb(var(--lime-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-lime.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-lime.sd-tag-bordered:hover {
   border-color: rgb(var(--lime-6));
@@ -194,13 +159,6 @@
   background-color: rgb(var(--green-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-green .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--green-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-green:hover {
-  background-color: rgb(var(--green-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-green.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-green.sd-tag-bordered:hover {
   border-color: rgb(var(--green-6));
@@ -213,13 +171,6 @@
   background-color: rgb(var(--cyan-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-cyan .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--cyan-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-cyan:hover {
-  background-color: rgb(var(--cyan-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-cyan.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-cyan.sd-tag-bordered:hover {
   border-color: rgb(var(--cyan-6));
@@ -232,13 +183,6 @@
   background-color: rgb(var(--blue-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-blue .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--blue-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-blue:hover {
-  background-color: rgb(var(--blue-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-blue.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-blue.sd-tag-bordered:hover {
   border-color: rgb(var(--blue-6));
@@ -251,13 +195,6 @@
   background-color: rgb(var(--sdblue-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-sdblue .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sdblue-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-sdblue:hover {
-  background-color: rgb(var(--sdblue-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-sdblue.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-sdblue.sd-tag-bordered:hover {
   border-color: rgb(var(--sdblue-6));
@@ -270,13 +207,6 @@
   background-color: rgb(var(--purple-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-purple .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--purple-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-purple:hover {
-  background-color: rgb(var(--purple-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-purple.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-purple.sd-tag-bordered:hover {
   border-color: rgb(var(--purple-6));
@@ -289,13 +219,6 @@
   background-color: rgb(var(--pinkpurple-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--pinkpurple-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-pinkpurple:hover {
-  background-color: rgb(var(--pinkpurple-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-pinkpurple.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-pinkpurple.sd-tag-bordered:hover {
   border-color: rgb(var(--pinkpurple-6));
@@ -308,13 +231,6 @@
   background-color: rgb(var(--magenta-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-magenta .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--magenta-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-magenta:hover {
-  background-color: rgb(var(--magenta-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-magenta.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-magenta.sd-tag-bordered:hover {
   border-color: rgb(var(--magenta-6));

package/es/input-tag/style/input-tag.scss

@@ -1,194 +1,40 @@
 @use '@style/mixins/icon-hover.scss' as icon-hover;
 @use '@style/theme/index.scss' as theme;
-@use '@components/tag/style/token.scss';
 @use 'sass:math';
 @use 'sass:string';
 @use 'sass:map';
-@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use 'sass:meta';
 @use '@style/mixins/index.scss' as *;
 @use '@components/input/style/token.scss' as *;
 @use '@components/input/style/input.scss' as *;
+@use '@components/tag/style/token.scss' as token;
 @use '@components/tag/style/index.scss' as *;
+@use '@components/input-tag/style/token.scss' as inputTagToken;
 @use '@components/input-tag/style/token.scss' as *;
 
-$less-vars: (
-  'input-color-addon-border': $input-color-addon-border,
-  'input-color-addon-border_default': $input-color-addon-border_default,
-  'input-color-bg': $input-color-bg,
-  'input-color-bg_disabled': $input-color-bg_disabled,
-  'input-color-bg_error': $input-color-bg_error,
-  'input-color-bg_error_focus': $input-color-bg_error_focus,
-  'input-color-bg_error_hover': $input-color-bg_error_hover,
-  'input-color-bg_focus': $input-color-bg_focus,
-  'input-color-bg_hover': $input-color-bg_hover,
-  'input-color-border': $input-color-border,
-  'input-color-border_disabled': $input-color-border_disabled,
-  'input-color-border_error': $input-color-border_error,
-  'input-color-border_error_focus': $input-color-border_error_focus,
-  'input-color-border_error_hover': $input-color-border_error_hover,
-  'input-color-border_focus': $input-color-border_focus,
-  'input-color-border_hover': $input-color-border_hover,
-  'input-color-icon-clear-bg_hover': $input-color-icon-clear-bg_hover,
-  'input-color-shadow_error_focus': $input-color-shadow_error_focus,
-  'input-color-shadow_focus': $input-color-shadow_focus,
-  'input-color-text': $input-color-text,
-  'input-color-text_disabled': $input-color-text_disabled,
-  'input-feedback-icon-color_error': $input-feedback-icon-color_error,
-  'input-feedback-icon-color_success': $input-feedback-icon-color_success,
-  'input-feedback-icon-color_validating': $input-feedback-icon-color_validating,
-  'input-feedback-icon-color_warning': $input-feedback-icon-color_warning,
-  'input-group-border-radius_compact': $input-group-border-radius_compact,
-  'input-padding-horizontal': $input-padding-horizontal,
-  'input-size-shadow_error_focus': $input-size-shadow_error_focus,
-  'input-size-shadow_focus': $input-size-shadow_focus,
-  'input-tag-border-width': $input-tag-border-width,
-  'input-tag-color-bg_default': $input-tag-color-bg_default,
-  'input-tag-color-bg_default_focus': $input-tag-color-bg_default_focus,
-  'input-tag-color-bg_default_hover': $input-tag-color-bg_default_hover,
-  'input-tag-color-bg_disabled': $input-tag-color-bg_disabled,
-  'input-tag-color-bg_disabled_hover': $input-tag-color-bg_disabled_hover,
-  'input-tag-color-bg_error': $input-tag-color-bg_error,
-  'input-tag-color-bg_error_focus': $input-tag-color-bg_error_focus,
-  'input-tag-color-bg_error_hover': $input-tag-color-bg_error_hover,
-  'input-tag-color-border_default': $input-tag-color-border_default,
-  'input-tag-color-border_default_focus': $input-tag-color-border_default_focus,
-  'input-tag-color-border_default_hover': $input-tag-color-border_default_hover,
-  'input-tag-color-border_disabled': $input-tag-color-border_disabled,
-  'input-tag-color-border_disabled_focus': $input-tag-color-border_disabled_focus,
-  'input-tag-color-border_disabled_hover': $input-tag-color-border_disabled_hover,
-  'input-tag-color-border_error': $input-tag-color-border_error,
-  'input-tag-color-border_error_focus': $input-tag-color-border_error_focus,
-  'input-tag-color-border_error_hover': $input-tag-color-border_error_hover,
-  'input-tag-color-icon-clear-bg_hover': $input-tag-color-icon-clear-bg_hover,
-  'input-tag-color-shadow_default_focus': $input-tag-color-shadow_default_focus,
-  'input-tag-color-shadow_error_focus': $input-tag-color-shadow_error_focus,
-  'input-tag-color-text_default': $input-tag-color-text_default,
-  'input-tag-color-text_disabled': $input-tag-color-text_disabled,
-  'input-tag-color-text_error': $input-tag-color-text_error,
-  'input-tag-padding-horizontal': $input-tag-padding-horizontal,
-  'input-tag-size-default-font-size': $input-tag-size-default-font-size,
-  'input-tag-size-default-height': $input-tag-size-default-height,
-  'input-tag-size-default-tag-height': $input-tag-size-default-tag-height,
-  'input-tag-size-icon-clear': $input-tag-size-icon-clear,
-  'input-tag-size-icon-clear_hover': $input-tag-size-icon-clear_hover,
-  'input-tag-size-large-font-size': $input-tag-size-large-font-size,
-  'input-tag-size-large-height': $input-tag-size-large-height,
-  'input-tag-size-large-tag-height': $input-tag-size-large-tag-height,
-  'input-tag-size-medium-font-size': $input-tag-size-medium-font-size,
-  'input-tag-size-medium-height': $input-tag-size-medium-height,
-  'input-tag-size-medium-tag-height': $input-tag-size-medium-tag-height,
-  'input-tag-size-mini-font-size': $input-tag-size-mini-font-size,
-  'input-tag-size-mini-height': $input-tag-size-mini-height,
-  'input-tag-size-mini-tag-height': $input-tag-size-mini-tag-height,
-  'input-tag-size-small-font-size': $input-tag-size-small-font-size,
-  'input-tag-size-small-height': $input-tag-size-small-height,
-  'input-tag-size-small-tag-height': $input-tag-size-small-tag-height,
-  'input-tag-size-shadow_default_focus': $input-tag-size-shadow_default_focus,
-  'input-tag-size-shadow_error_focus': $input-tag-size-shadow_error_focus,
-  'input-tag-tag-color-bg': $input-tag-tag-color-bg,
-  'input-tag-tag-color-bg_disabled': $input-tag-tag-color-bg_disabled,
-  'input-tag-tag-color-bg_focus': $input-tag-tag-color-bg_focus,
-  'input-tag-tag-color-border': $input-tag-tag-color-border,
-  'input-tag-tag-color-border_disabled': $input-tag-tag-color-border_disabled,
-  'input-tag-tag-color-border_focus': $input-tag-tag-color-border_focus,
-  'input-tag-tag-font-size': $input-tag-tag-font-size,
-  'input-tag-tag-margin-right': $input-tag-tag-margin-right,
-  'input-tag-tag-margin-vertical': $input-tag-tag-margin-vertical,
-  'input-tag-tag-remove-icon-color-bg': $input-tag-tag-remove-icon-color-bg,
-  'input-tag-tag-remove-icon-color-bg_focus': $input-tag-tag-remove-icon-color-bg_focus,
-  'prefix': theme.$prefix,
-  'tag-blue-color-bg': token.$tag-blue-color-bg,
-  'tag-blue-color-bg_hover': token.$tag-blue-color-bg_hover,
-  'tag-blue-color-border': token.$tag-blue-color-border,
-  'tag-blue-color-border_hover': token.$tag-blue-color-border_hover,
-  'tag-blue-color-icon-bg_hover': token.$tag-blue-color-icon-bg_hover,
-  'tag-color-bg-not-checked_hover': token.$tag-color-bg-not-checked_hover,
-  'tag-custom-color-icon-bg_hover': token.$tag-custom-color-icon-bg_hover,
-  'tag-custom-color-text': token.$tag-custom-color-text,
-  'tag-cyan-color-bg': token.$tag-cyan-color-bg,
-  'tag-cyan-color-bg_hover': token.$tag-cyan-color-bg_hover,
-  'tag-cyan-color-border': token.$tag-cyan-color-border,
-  'tag-cyan-color-border_hover': token.$tag-cyan-color-border_hover,
-  'tag-cyan-color-icon-bg_hover': token.$tag-cyan-color-icon-bg_hover,
-  'tag-default-color-bg': token.$tag-default-color-bg,
-  'tag-default-color-bg_hover': token.$tag-default-color-bg_hover,
-  'tag-default-color-border': token.$tag-default-color-border,
-  'tag-default-color-border_hover': token.$tag-default-color-border_hover,
-  'tag-gold-color-bg': token.$tag-gold-color-bg,
-  'tag-gold-color-bg_hover': token.$tag-gold-color-bg_hover,
-  'tag-gold-color-border': token.$tag-gold-color-border,
-  'tag-gold-color-border_hover': token.$tag-gold-color-border_hover,
-  'tag-gold-color-icon-bg_hover': token.$tag-gold-color-icon-bg_hover,
-  'tag-gray-color-bg': token.$tag-gray-color-bg,
-  'tag-gray-color-bg_hover': token.$tag-gray-color-bg_hover,
-  'tag-gray-color-border': token.$tag-gray-color-border,
-  'tag-gray-color-border_hover': token.$tag-gray-color-border_hover,
-  'tag-gray-color-icon-bg_hover': token.$tag-gray-color-icon-bg_hover,
-  'tag-green-color-bg': token.$tag-green-color-bg,
-  'tag-green-color-bg_hover': token.$tag-green-color-bg_hover,
-  'tag-green-color-border': token.$tag-green-color-border,
-  'tag-green-color-border_hover': token.$tag-green-color-border_hover,
-  'tag-green-color-icon-bg_hover': token.$tag-green-color-icon-bg_hover,
-  'tag-lime-color-bg': token.$tag-lime-color-bg,
-  'tag-lime-color-bg_hover': token.$tag-lime-color-bg_hover,
-  'tag-lime-color-border': token.$tag-lime-color-border,
-  'tag-lime-color-border_hover': token.$tag-lime-color-border_hover,
-  'tag-lime-color-icon-bg_hover': token.$tag-lime-color-icon-bg_hover,
-  'tag-magenta-color-bg': token.$tag-magenta-color-bg,
-  'tag-magenta-color-bg_hover': token.$tag-magenta-color-bg_hover,
-  'tag-magenta-color-border': token.$tag-magenta-color-border,
-  'tag-magenta-color-border_hover': token.$tag-magenta-color-border_hover,
-  'tag-magenta-color-icon-bg_hover': token.$tag-magenta-color-icon-bg_hover,
-  'tag-orange-color-bg': token.$tag-orange-color-bg,
-  'tag-orange-color-bg_hover': token.$tag-orange-color-bg_hover,
-  'tag-orange-color-border': token.$tag-orange-color-border,
-  'tag-orange-color-border_hover': token.$tag-orange-color-border_hover,
-  'tag-orange-color-icon-bg_hover': token.$tag-orange-color-icon-bg_hover,
-  'tag-orangered-color-bg': token.$tag-orangered-color-bg,
-  'tag-orangered-color-bg_hover': token.$tag-orangered-color-bg_hover,
-  'tag-orangered-color-border': token.$tag-orangered-color-border,
-  'tag-orangered-color-border_hover': token.$tag-orangered-color-border_hover,
-  'tag-orangered-color-icon-bg_hover': token.$tag-orangered-color-icon-bg_hover,
-  'tag-pinkpurple-color-bg': token.$tag-pinkpurple-color-bg,
-  'tag-pinkpurple-color-bg_hover': token.$tag-pinkpurple-color-bg_hover,
-  'tag-pinkpurple-color-border': token.$tag-pinkpurple-color-border,
-  'tag-pinkpurple-color-border_hover': token.$tag-pinkpurple-color-border_hover,
-  'tag-pinkpurple-color-icon-bg_hover': token.$tag-pinkpurple-color-icon-bg_hover,
-  'tag-prefix-cls': $tag-prefix-cls,
-  'tag-purple-color-bg': token.$tag-purple-color-bg,
-  'tag-purple-color-bg_hover': token.$tag-purple-color-bg_hover,
-  'tag-purple-color-border': token.$tag-purple-color-border,
-  'tag-purple-color-border_hover': token.$tag-purple-color-border_hover,
-  'tag-purple-color-icon-bg_hover': token.$tag-purple-color-icon-bg_hover,
-  'tag-red-color-bg': token.$tag-red-color-bg,
-  'tag-red-color-bg_hover': token.$tag-red-color-bg_hover,
-  'tag-red-color-border': token.$tag-red-color-border,
-  'tag-red-color-border_hover': token.$tag-red-color-border_hover,
-  'tag-red-color-icon-bg_hover': token.$tag-red-color-icon-bg_hover,
-  'tag-sdblue-color-bg': token.$tag-sdblue-color-bg,
-  'tag-sdblue-color-bg_hover': token.$tag-sdblue-color-bg_hover,
-  'tag-sdblue-color-border': token.$tag-sdblue-color-border,
-  'tag-sdblue-color-border_hover': token.$tag-sdblue-color-border_hover,
-  'tag-sdblue-color-icon-bg_hover': token.$tag-sdblue-color-icon-bg_hover,
-);
-
-@function less-var($name, $fallback: null) {
-  @return legacyLessVar.get($less-vars, $name, $fallback);
+@function token-var($name, $fallback: null) {
+  $value: map.get(meta.module-variables('inputTagToken'), $name);
+
+  @if $value == null {
+    @return $fallback;
+  }
+
+  @return $value;
 }
 
 @mixin input-tag-size($cls, $size) {
   $font-size-token: string.unquote('input-tag-size-#{$size}-font-size');
   $height-token: string.unquote('input-tag-size-#{$size}-height');
   $tag-height-token: string.unquote('input-tag-size-#{$size}-tag-height');
-  $vertical-padding: math.div(less-var($height-token), 2) - math.div(
-      less-var($tag-height-token),
+  $vertical-padding: math.div(token-var($height-token), 2) - math.div(
+      token-var($tag-height-token),
       2
     ) -
     $input-tag-border-width - math.div($input-tag-tag-margin-vertical, 2);
   $vertical-margin: math.div($input-tag-tag-margin-vertical, 2);
 
   &.#{$cls}-size-#{$size} {
-    font-size: less-var($font-size-token);
+    font-size: token-var($font-size-token);
 
     .#{$cls}-inner {
       padding-top: $vertical-padding;
@@ -199,14 +45,14 @@ $less-vars: (
     .#{$cls}-input {
       margin-top: $vertical-margin;
       margin-bottom: $vertical-margin;
-      line-height: less-var($tag-height-token) - 2;
+      line-height: token-var($tag-height-token) - 2;
       vertical-align: middle;
     }
 
     .#{$cls}-tag,
     .#{$cls}-input {
       height: auto;
-      min-height: less-var($tag-height-token);
+      min-height: token-var($tag-height-token);
     }
   }
 }