@sdata/web-vue 1.9.0 → 1.11.0

package/es/form/index.d.ts

@@ -74,7 +74,7 @@ declare const Form: {
         innerResetFields: (field?: string | string[]) => void;
         innerClearValidate: (field?: string | string[]) => void;
         innerSetFields: (data: Record<string, import("./interface").FieldData>) => void;
-        innerScrollToField: (field: string, options?: import("scroll-into-view-if-needed").Options) => void;
+        innerScrollToField: (field: string, options?: Parameters<typeof import("scroll-into-view-if-needed").default>[1]) => void;
     }, {}, {}, {
         validate(callback?: (errors: undefined | Record<string, import("./interface").ValidatedError>) => void): Promise<undefined | Record<string, import("./interface").ValidatedError>>;
         validateField(field: string | string[], callback?: (errors: undefined | Record<string, import("./interface").ValidatedError>) => void): Promise<undefined | Record<string, import("./interface").ValidatedError>>;
@@ -178,7 +178,7 @@ declare const Form: {
         innerResetFields: (field?: string | string[]) => void;
         innerClearValidate: (field?: string | string[]) => void;
         innerSetFields: (data: Record<string, import("./interface").FieldData>) => void;
-        innerScrollToField: (field: string, options?: import("scroll-into-view-if-needed").Options) => void;
+        innerScrollToField: (field: string, options?: Parameters<typeof import("scroll-into-view-if-needed").default>[1]) => void;
     }, {}, {}, {
         validate(callback?: (errors: undefined | Record<string, import("./interface").ValidatedError>) => void): Promise<undefined | Record<string, import("./interface").ValidatedError>>;
         validateField(field: string | string[], callback?: (errors: undefined | Record<string, import("./interface").ValidatedError>) => void): Promise<undefined | Record<string, import("./interface").ValidatedError>>;
@@ -269,7 +269,7 @@ declare const Form: {
     innerResetFields: (field?: string | string[]) => void;
     innerClearValidate: (field?: string | string[]) => void;
     innerSetFields: (data: Record<string, import("./interface").FieldData>) => void;
-    innerScrollToField: (field: string, options?: import("scroll-into-view-if-needed").Options) => void;
+    innerScrollToField: (field: string, options?: Parameters<typeof import("scroll-into-view-if-needed").default>[1]) => void;
 }, {}, {}, {
     validate(callback?: (errors: undefined | Record<string, import("./interface").ValidatedError>) => void): Promise<undefined | Record<string, import("./interface").ValidatedError>>;
     validateField(field: string | string[], callback?: (errors: undefined | Record<string, import("./interface").ValidatedError>) => void): Promise<undefined | Record<string, import("./interface").ValidatedError>>;
@@ -913,9 +913,9 @@ declare const Form: {
                         }>> & Readonly<{
                             onResize?: (() => any) | undefined;
                             onHide?: (() => any) | undefined;
-                            onShow?: (() => any) | undefined;
                             "onUpdate:popupVisible"?: ((_visible: boolean) => any) | undefined;
                             onPopupVisibleChange?: ((_visible: boolean) => any) | undefined;
+                            onShow?: (() => any) | undefined;
                         }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                             'update:popupVisible': (_visible: boolean) => true;
                             popupVisibleChange: (_visible: boolean) => true;
@@ -927,6 +927,7 @@ declare const Form: {
                             unmountOnClose: boolean;
                             renderToBody: boolean;
                             position: "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb";
+                            animationName: string;
                             autoFitPosition: boolean;
                             popupVisible: boolean;
                             defaultPopupVisible: boolean;
@@ -938,7 +939,6 @@ declare const Form: {
                             blurToClose: boolean;
                             clickToClose: boolean;
                             clickOutsideToClose: boolean;
-                            animationName: string;
                             mouseEnterDelay: number;
                             mouseLeaveDelay: number;
                             focusDelay: number;
@@ -1104,14 +1104,15 @@ declare const Form: {
                         }>> & Readonly<{
                             onResize?: (() => any) | undefined;
                             onHide?: (() => any) | undefined;
-                            onShow?: (() => any) | undefined;
                             "onUpdate:popupVisible"?: ((_visible: boolean) => any) | undefined;
                             onPopupVisibleChange?: ((_visible: boolean) => any) | undefined;
+                            onShow?: (() => any) | undefined;
                         }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
                             disabled: boolean;
                             unmountOnClose: boolean;
                             renderToBody: boolean;
                             position: "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb";
+                            animationName: string;
                             autoFitPosition: boolean;
                             popupVisible: boolean;
                             defaultPopupVisible: boolean;
@@ -1123,7 +1124,6 @@ declare const Form: {
                             blurToClose: boolean;
                             clickToClose: boolean;
                             clickOutsideToClose: boolean;
-                            animationName: string;
                             mouseEnterDelay: number;
                             mouseLeaveDelay: number;
                             focusDelay: number;
@@ -1286,9 +1286,9 @@ declare const Form: {
                     }>> & Readonly<{
                         onResize?: (() => any) | undefined;
                         onHide?: (() => any) | undefined;
-                        onShow?: (() => any) | undefined;
                         "onUpdate:popupVisible"?: ((_visible: boolean) => any) | undefined;
                         onPopupVisibleChange?: ((_visible: boolean) => any) | undefined;
+                        onShow?: (() => any) | undefined;
                     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                         'update:popupVisible': (_visible: boolean) => true;
                         popupVisibleChange: (_visible: boolean) => true;
@@ -1300,6 +1300,7 @@ declare const Form: {
                         unmountOnClose: boolean;
                         renderToBody: boolean;
                         position: "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb";
+                        animationName: string;
                         autoFitPosition: boolean;
                         popupVisible: boolean;
                         defaultPopupVisible: boolean;
@@ -1311,7 +1312,6 @@ declare const Form: {
                         blurToClose: boolean;
                         clickToClose: boolean;
                         clickOutsideToClose: boolean;
-                        animationName: string;
                         mouseEnterDelay: number;
                         mouseLeaveDelay: number;
                         focusDelay: number;
@@ -1603,9 +1603,9 @@ declare const Form: {
                     }>> & Readonly<{
                         onResize?: (() => any) | undefined;
                         onHide?: (() => any) | undefined;
-                        onShow?: (() => any) | undefined;
                         "onUpdate:popupVisible"?: ((_visible: boolean) => any) | undefined;
                         onPopupVisibleChange?: ((_visible: boolean) => any) | undefined;
+                        onShow?: (() => any) | undefined;
                     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                         'update:popupVisible': (_visible: boolean) => true;
                         popupVisibleChange: (_visible: boolean) => true;
@@ -1617,6 +1617,7 @@ declare const Form: {
                         unmountOnClose: boolean;
                         renderToBody: boolean;
                         position: "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb";
+                        animationName: string;
                         autoFitPosition: boolean;
                         popupVisible: boolean;
                         defaultPopupVisible: boolean;
@@ -1628,7 +1629,6 @@ declare const Form: {
                         blurToClose: boolean;
                         clickToClose: boolean;
                         clickOutsideToClose: boolean;
-                        animationName: string;
                         mouseEnterDelay: number;
                         mouseLeaveDelay: number;
                         focusDelay: number;
@@ -1794,14 +1794,15 @@ declare const Form: {
                     }>> & Readonly<{
                         onResize?: (() => any) | undefined;
                         onHide?: (() => any) | undefined;
-                        onShow?: (() => any) | undefined;
                         "onUpdate:popupVisible"?: ((_visible: boolean) => any) | undefined;
                         onPopupVisibleChange?: ((_visible: boolean) => any) | undefined;
+                        onShow?: (() => any) | undefined;
                     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
                         disabled: boolean;
                         unmountOnClose: boolean;
                         renderToBody: boolean;
                         position: "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb";
+                        animationName: string;
                         autoFitPosition: boolean;
                         popupVisible: boolean;
                         defaultPopupVisible: boolean;
@@ -1813,7 +1814,6 @@ declare const Form: {
                         blurToClose: boolean;
                         clickToClose: boolean;
                         clickOutsideToClose: boolean;
-                        animationName: string;
                         mouseEnterDelay: number;
                         mouseLeaveDelay: number;
                         focusDelay: number;
@@ -1976,9 +1976,9 @@ declare const Form: {
                 }>> & Readonly<{
                     onResize?: (() => any) | undefined;
                     onHide?: (() => any) | undefined;
-                    onShow?: (() => any) | undefined;
                     "onUpdate:popupVisible"?: ((_visible: boolean) => any) | undefined;
                     onPopupVisibleChange?: ((_visible: boolean) => any) | undefined;
+                    onShow?: (() => any) | undefined;
                 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                     'update:popupVisible': (_visible: boolean) => true;
                     popupVisibleChange: (_visible: boolean) => true;
@@ -1990,6 +1990,7 @@ declare const Form: {
                     unmountOnClose: boolean;
                     renderToBody: boolean;
                     position: "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb";
+                    animationName: string;
                     autoFitPosition: boolean;
                     popupVisible: boolean;
                     defaultPopupVisible: boolean;
@@ -2001,7 +2002,6 @@ declare const Form: {
                     blurToClose: boolean;
                     clickToClose: boolean;
                     clickOutsideToClose: boolean;
-                    animationName: string;
                     mouseEnterDelay: number;
                     mouseLeaveDelay: number;
                     focusDelay: number;
@@ -2048,6 +2048,7 @@ declare const Form: {
                         [x: string]: boolean;
                     })[]>;
                     innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+                    svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
                     onClick: (ev: MouseEvent) => void;
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                     click: (ev: MouseEvent) => true;
@@ -2090,6 +2091,7 @@ declare const Form: {
                         [x: string]: boolean;
                     })[]>;
                     innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+                    svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
                     onClick: (ev: MouseEvent) => void;
                 }, {}, {}, {}, {
                     spin: boolean;
@@ -2127,6 +2129,7 @@ declare const Form: {
                     [x: string]: boolean;
                 })[]>;
                 innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+                svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
                 onClick: (ev: MouseEvent) => void;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                 click: (ev: MouseEvent) => true;

package/es/form/style/index.css

@@ -15,216 +15,52 @@
 /******** link *******/
 /******** radius *******/
 /********* icon hover *********/
-.sd-form-item-status-validating .sd-input-wrapper:not(.sd-input-disabled),
-.sd-form-item-status-validating .sd-textarea-wrapper:not(.sd-textarea-disabled) {
-  background-color: var(--color-fill-2);
-  border-color: transparent;
-}
-.sd-form-item-status-validating .sd-input-wrapper:not(.sd-input-disabled):hover,
-.sd-form-item-status-validating .sd-textarea-wrapper:not(.sd-textarea-disabled):hover {
-  background-color: var(--color-fill-3);
-  border-color: transparent;
-}
 .sd-form-item-status-validating .sd-input-wrapper:not(.sd-input-disabled).sd-input-focus,
 .sd-form-item-status-validating .sd-textarea-wrapper:not(.sd-textarea-disabled).sd-textarea-focus {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--primary-6));
-  box-shadow: 0 0 0 0 var(--color-primary-light-2);
-}
-.sd-form-item-status-validating .sd-select-view:not(.sd-select-view-disabled),
-.sd-form-item-status-validating .sd-input-tag:not(.sd-input-tag-disabled) {
-  background-color: var(--color-fill-2);
-  border-color: transparent;
-}
-.sd-form-item-status-validating .sd-select-view:not(.sd-select-view-disabled):hover,
-.sd-form-item-status-validating .sd-input-tag:not(.sd-input-tag-disabled):hover {
-  background-color: var(--color-fill-3);
-  border-color: transparent;
+  box-shadow: 0 0 0;
 }
 .sd-form-item-status-validating .sd-select-view:not(.sd-select-view-disabled).sd-select-view-focus,
 .sd-form-item-status-validating .sd-input-tag:not(.sd-input-tag-disabled).sd-input-tag-focus {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--primary-6));
-  box-shadow: 0 0 0 0 var(--color-primary-light-2);
-}
-.sd-form-item-status-validating .sd-picker:not(.sd-picker-disabled) {
-  background-color: var(--color-fill-2);
-  border-color: transparent;
-}
-.sd-form-item-status-validating .sd-picker:not(.sd-picker-disabled):hover {
-  background-color: var(--color-fill-3);
-  border-color: transparent;
+  box-shadow: 0 0 0;
 }
 .sd-form-item-status-validating .sd-picker-focused:not(.sd-picker-disabled), .sd-form-item-status-validating .sd-picker-focused:not(.sd-picker-disabled):hover {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--primary-6));
-  box-shadow: 0 0 0 0 var(--color-primary-light-2);
+  box-shadow: 0 0 0;
 }
 
-.sd-form-item-status-validating .sd-form-item-message-help {
-  color: rgb(var(--primary-6));
-}
-.sd-form-item-status-validating .sd-form-item-feedback {
-  color: rgb(var(--primary-6));
-}
-
-.sd-form-item-status-success .sd-input-wrapper:not(.sd-input-disabled),
-.sd-form-item-status-success .sd-textarea-wrapper:not(.sd-textarea-disabled) {
-  background-color: var(--color-fill-2);
-  border-color: transparent;
-}
-.sd-form-item-status-success .sd-input-wrapper:not(.sd-input-disabled):hover,
-.sd-form-item-status-success .sd-textarea-wrapper:not(.sd-textarea-disabled):hover {
-  background-color: var(--color-fill-3);
-  border-color: transparent;
-}
 .sd-form-item-status-success .sd-input-wrapper:not(.sd-input-disabled).sd-input-focus,
 .sd-form-item-status-success .sd-textarea-wrapper:not(.sd-textarea-disabled).sd-textarea-focus {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--success-6));
-  box-shadow: 0 0 0 0 var(--color-success-light-2);
-}
-.sd-form-item-status-success .sd-select-view:not(.sd-select-view-disabled),
-.sd-form-item-status-success .sd-input-tag:not(.sd-input-tag-disabled) {
-  background-color: var(--color-fill-2);
-  border-color: transparent;
-}
-.sd-form-item-status-success .sd-select-view:not(.sd-select-view-disabled):hover,
-.sd-form-item-status-success .sd-input-tag:not(.sd-input-tag-disabled):hover {
-  background-color: var(--color-fill-3);
-  border-color: transparent;
+  box-shadow: 0 0 0;
 }
 .sd-form-item-status-success .sd-select-view:not(.sd-select-view-disabled).sd-select-view-focus,
 .sd-form-item-status-success .sd-input-tag:not(.sd-input-tag-disabled).sd-input-tag-focus {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--success-6));
-  box-shadow: 0 0 0 0 var(--color-success-light-2);
-}
-.sd-form-item-status-success .sd-picker:not(.sd-picker-disabled) {
-  background-color: var(--color-fill-2);
-  border-color: transparent;
-}
-.sd-form-item-status-success .sd-picker:not(.sd-picker-disabled):hover {
-  background-color: var(--color-fill-3);
-  border-color: transparent;
+  box-shadow: 0 0 0;
 }
 .sd-form-item-status-success .sd-picker-focused:not(.sd-picker-disabled), .sd-form-item-status-success .sd-picker-focused:not(.sd-picker-disabled):hover {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--success-6));
-  box-shadow: 0 0 0 0 var(--color-success-light-2);
+  box-shadow: 0 0 0;
 }
 
-.sd-form-item-status-success .sd-form-item-message-help {
-  color: rgb(var(--success-6));
-}
-.sd-form-item-status-success .sd-form-item-feedback {
-  color: rgb(var(--success-6));
-}
-
-.sd-form-item-status-warning .sd-input-wrapper:not(.sd-input-disabled),
-.sd-form-item-status-warning .sd-textarea-wrapper:not(.sd-textarea-disabled) {
-  background-color: var(--color-warning-light-1);
-  border-color: transparent;
-}
-.sd-form-item-status-warning .sd-input-wrapper:not(.sd-input-disabled):hover,
-.sd-form-item-status-warning .sd-textarea-wrapper:not(.sd-textarea-disabled):hover {
-  background-color: var(--color-warning-light-2);
-  border-color: transparent;
-}
 .sd-form-item-status-warning .sd-input-wrapper:not(.sd-input-disabled).sd-input-focus,
 .sd-form-item-status-warning .sd-textarea-wrapper:not(.sd-textarea-disabled).sd-textarea-focus {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--warning-6));
-  box-shadow: 0 0 0 0 var(--color-warning-light-2);
-}
-.sd-form-item-status-warning .sd-select-view:not(.sd-select-view-disabled),
-.sd-form-item-status-warning .sd-input-tag:not(.sd-input-tag-disabled) {
-  background-color: var(--color-warning-light-1);
-  border-color: transparent;
-}
-.sd-form-item-status-warning .sd-select-view:not(.sd-select-view-disabled):hover,
-.sd-form-item-status-warning .sd-input-tag:not(.sd-input-tag-disabled):hover {
-  background-color: var(--color-warning-light-2);
-  border-color: transparent;
+  box-shadow: 0 0 0;
 }
 .sd-form-item-status-warning .sd-select-view:not(.sd-select-view-disabled).sd-select-view-focus,
 .sd-form-item-status-warning .sd-input-tag:not(.sd-input-tag-disabled).sd-input-tag-focus {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--warning-6));
-  box-shadow: 0 0 0 0 var(--color-warning-light-2);
-}
-.sd-form-item-status-warning .sd-picker:not(.sd-picker-disabled) {
-  background-color: var(--color-warning-light-1);
-  border-color: transparent;
-}
-.sd-form-item-status-warning .sd-picker:not(.sd-picker-disabled):hover {
-  background-color: var(--color-warning-light-2);
-  border-color: transparent;
+  box-shadow: 0 0 0;
 }
 .sd-form-item-status-warning .sd-picker-focused:not(.sd-picker-disabled), .sd-form-item-status-warning .sd-picker-focused:not(.sd-picker-disabled):hover {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--warning-6));
-  box-shadow: 0 0 0 0 var(--color-warning-light-2);
+  box-shadow: 0 0 0;
 }
 
-.sd-form-item-status-warning .sd-form-item-message-help {
-  color: rgb(var(--warning-6));
-}
-.sd-form-item-status-warning .sd-form-item-feedback {
-  color: rgb(var(--warning-6));
-}
-
-.sd-form-item-status-error .sd-input-wrapper:not(.sd-input-disabled),
-.sd-form-item-status-error .sd-textarea-wrapper:not(.sd-textarea-disabled) {
-  background-color: var(--color-danger-light-1);
-  border-color: transparent;
-}
-.sd-form-item-status-error .sd-input-wrapper:not(.sd-input-disabled):hover,
-.sd-form-item-status-error .sd-textarea-wrapper:not(.sd-textarea-disabled):hover {
-  background-color: var(--color-danger-light-2);
-  border-color: transparent;
-}
 .sd-form-item-status-error .sd-input-wrapper:not(.sd-input-disabled).sd-input-focus,
 .sd-form-item-status-error .sd-textarea-wrapper:not(.sd-textarea-disabled).sd-textarea-focus {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--danger-6));
-  box-shadow: 0 0 0 0 var(--color-danger-light-2);
-}
-.sd-form-item-status-error .sd-select-view:not(.sd-select-view-disabled),
-.sd-form-item-status-error .sd-input-tag:not(.sd-input-tag-disabled) {
-  background-color: var(--color-danger-light-1);
-  border-color: transparent;
-}
-.sd-form-item-status-error .sd-select-view:not(.sd-select-view-disabled):hover,
-.sd-form-item-status-error .sd-input-tag:not(.sd-input-tag-disabled):hover {
-  background-color: var(--color-danger-light-2);
-  border-color: transparent;
+  box-shadow: 0 0 0;
 }
 .sd-form-item-status-error .sd-select-view:not(.sd-select-view-disabled).sd-select-view-focus,
 .sd-form-item-status-error .sd-input-tag:not(.sd-input-tag-disabled).sd-input-tag-focus {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--danger-6));
-  box-shadow: 0 0 0 0 var(--color-danger-light-2);
-}
-.sd-form-item-status-error .sd-picker:not(.sd-picker-disabled) {
-  background-color: var(--color-danger-light-1);
-  border-color: transparent;
-}
-.sd-form-item-status-error .sd-picker:not(.sd-picker-disabled):hover {
-  background-color: var(--color-danger-light-2);
-  border-color: transparent;
+  box-shadow: 0 0 0;
 }
 .sd-form-item-status-error .sd-picker-focused:not(.sd-picker-disabled), .sd-form-item-status-error .sd-picker-focused:not(.sd-picker-disabled):hover {
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--danger-6));
-  box-shadow: 0 0 0 0 var(--color-danger-light-2);
-}
-
-.sd-form-item-status-error .sd-form-item-message-help {
-  color: rgb(var(--danger-6));
-}
-.sd-form-item-status-error .sd-form-item-feedback {
-  color: rgb(var(--danger-6));
+  box-shadow: 0 0 0;
 }
 
 .sd-form-item-control-children {

package/es/form/style/status.scss

@@ -1,58 +1,21 @@
 @use '@style/theme/index.scss' as theme;
 @use 'sass:string';
 @use 'sass:map';
-@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use 'sass:meta';
+@use '@components/form/style/token.scss' as token;
 @use '@components/form/style/token.scss' as *;
 
 $form-prefix-cls: string.unquote('#{theme.$prefix}-form');
 
 // for input & textarea
-$__less-vars: (
-  'form-color-bg_error': $form-color-bg_error,
-  'form-color-bg_error_focus': $form-color-bg_error_focus,
-  'form-color-bg_error_hover': $form-color-bg_error_hover,
-  'form-color-bg_success': $form-color-bg_success,
-  'form-color-bg_success_focus': $form-color-bg_success_focus,
-  'form-color-bg_success_hover': $form-color-bg_success_hover,
-  'form-color-bg_validating': $form-color-bg_validating,
-  'form-color-bg_validating_focus': $form-color-bg_validating_focus,
-  'form-color-bg_validating_hover': $form-color-bg_validating_hover,
-  'form-color-bg_warning': $form-color-bg_warning,
-  'form-color-bg_warning_focus': $form-color-bg_warning_focus,
-  'form-color-bg_warning_hover': $form-color-bg_warning_hover,
-  'form-color-border_error': $form-color-border_error,
-  'form-color-border_error_focus': $form-color-border_error_focus,
-  'form-color-border_error_hover': $form-color-border_error_hover,
-  'form-color-border_success': $form-color-border_success,
-  'form-color-border_success_focus': $form-color-border_success_focus,
-  'form-color-border_success_hover': $form-color-border_success_hover,
-  'form-color-border_validating': $form-color-border_validating,
-  'form-color-border_validating_focus': $form-color-border_validating_focus,
-  'form-color-border_validating_hover': $form-color-border_validating_hover,
-  'form-color-border_warning': $form-color-border_warning,
-  'form-color-border_warning_focus': $form-color-border_warning_focus,
-  'form-color-border_warning_hover': $form-color-border_warning_hover,
-  'form-color-shadow_error_focus': $form-color-shadow_error_focus,
-  'form-color-shadow_success_focus': $form-color-shadow_success_focus,
-  'form-color-shadow_validating_focus': $form-color-shadow_validating_focus,
-  'form-color-shadow_warning_focus': $form-color-shadow_warning_focus,
-  'form-color-tip-icon-text_error': $form-color-tip-icon-text_error,
-  'form-color-tip-icon-text_success': $form-color-tip-icon-text_success,
-  'form-color-tip-icon-text_validating': $form-color-tip-icon-text_validating,
-  'form-color-tip-icon-text_warning': $form-color-tip-icon-text_warning,
-  'form-color-tip-text_error': $form-color-tip-text_error,
-  'form-color-tip-text_success': $form-color-tip-text_success,
-  'form-color-tip-text_validating': $form-color-tip-text_validating,
-  'form-color-tip-text_warning': $form-color-tip-text_warning,
-  'form-size-shadow_error_focus': $form-size-shadow_error_focus,
-  'form-size-shadow_success_focus': $form-size-shadow_success_focus,
-  'form-size-shadow_validating_focus': $form-size-shadow_validating_focus,
-  'form-size-shadow_warning_focus': $form-size-shadow_warning_focus,
-  'prefix': theme.$prefix,
-);
-
-@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-status($status) {
@@ -61,12 +24,12 @@ $__less-vars: (
 
   .#{$input-prefix-cls}-wrapper:not(.#{$input-prefix-cls}-disabled),
   .#{$textarea-prefix-cls}-wrapper:not(.#{$textarea-prefix-cls}-disabled) {
-    background-color: less-var('form-color-bg_#{$status}');
-    border-color: less-var('form-color-border_#{$status}');
+    background-color: token-var('form-color-bg_#{$status}');
+    border-color: token-var('form-color-border_#{$status}');
 
     &:hover {
-      background-color: less-var('form-color-bg_#{$status}_hover');
-      border-color: less-var('form-color-border_#{$status}_hover');
+      background-color: token-var('form-color-bg_#{$status}_hover');
+      border-color: token-var('form-color-border_#{$status}_hover');
     }
   }
 
@@ -74,10 +37,10 @@ $__less-vars: (
   .#{$textarea-prefix-cls}-wrapper:not(
       .#{$textarea-prefix-cls}-disabled
     ).#{$textarea-prefix-cls}-focus {
-    background-color: less-var('form-color-bg_#{$status}_focus');
-    border-color: less-var('form-color-border_#{$status}_focus');
-    box-shadow: 0 0 0 less-var('form-size-shadow_#{$status}_focus')
-      less-var('form-color-shadow_#{$status}_focus');
+    background-color: token-var('form-color-bg_#{$status}_focus');
+    border-color: token-var('form-color-border_#{$status}_focus');
+    box-shadow: 0 0 0 token-var('form-size-shadow_#{$status}_focus')
+      token-var('form-color-shadow_#{$status}_focus');
   }
 }
 
@@ -87,12 +50,12 @@ $__less-vars: (
 
   .#{$select-view-prefix-cls}:not(.#{$select-view-prefix-cls}-disabled),
   .#{$input-prefix-cls}:not(.#{$input-prefix-cls}-disabled) {
-    background-color: less-var('form-color-bg_#{$status}');
-    border-color: less-var('form-color-border_#{$status}');
+    background-color: token-var('form-color-bg_#{$status}');
+    border-color: token-var('form-color-border_#{$status}');
 
     &:hover {
-      background-color: less-var('form-color-bg_#{$status}_hover');
-      border-color: less-var('form-color-border_#{$status}_hover');
+      background-color: token-var('form-color-bg_#{$status}_hover');
+      border-color: token-var('form-color-border_#{$status}_hover');
     }
   }
 
@@ -100,32 +63,32 @@ $__less-vars: (
       .#{$select-view-prefix-cls}-disabled
     ).#{$select-view-prefix-cls}-focus,
   .#{$input-prefix-cls}:not(.#{$input-prefix-cls}-disabled).#{$input-prefix-cls}-focus {
-    background-color: less-var('form-color-bg_#{$status}_focus');
-    border-color: less-var('form-color-border_#{$status}_focus');
-    box-shadow: 0 0 0 less-var('form-size-shadow_#{$status}_focus')
-      less-var('form-color-shadow_#{$status}_focus');
+    background-color: token-var('form-color-bg_#{$status}_focus');
+    border-color: token-var('form-color-border_#{$status}_focus');
+    box-shadow: 0 0 0 token-var('form-size-shadow_#{$status}_focus')
+      token-var('form-color-shadow_#{$status}_focus');
   }
 }
 
 // datepicker
 @mixin picker($status) {
   .#{theme.$prefix}-picker:not(.#{theme.$prefix}-picker-disabled) {
-    background-color: less-var('form-color-bg_#{$status}');
-    border-color: less-var('form-color-border_#{$status}');
+    background-color: token-var('form-color-bg_#{$status}');
+    border-color: token-var('form-color-border_#{$status}');
 
     &:hover {
-      background-color: less-var('form-color-bg_#{$status}_hover');
-      border-color: less-var('form-color-border_#{$status}_hover');
+      background-color: token-var('form-color-bg_#{$status}_hover');
+      border-color: token-var('form-color-border_#{$status}_hover');
     }
   }
 
   .#{theme.$prefix}-picker-focused:not(.#{theme.$prefix}-picker-disabled) {
     &,
     &:hover {
-      background-color: less-var('form-color-bg_#{$status}_focus');
-      border-color: less-var('form-color-border_#{$status}_focus');
-      box-shadow: 0 0 0 less-var('form-size-shadow_#{$status}_focus')
-        less-var('form-color-shadow_#{$status}_focus');
+      background-color: token-var('form-color-bg_#{$status}_focus');
+      border-color: token-var('form-color-border_#{$status}_focus');
+      box-shadow: 0 0 0 token-var('form-size-shadow_#{$status}_focus')
+        token-var('form-color-shadow_#{$status}_focus');
     }
   }
 }
@@ -139,11 +102,11 @@ $__less-vars: (
 
   .#{theme.$prefix}-form-item-status-#{$status} {
     .#{$form-prefix-cls}-item-message-help {
-      color: less-var('form-color-tip-text_#{$status}');
+      color: token-var('form-color-tip-text_#{$status}');
     }
 
     .#{$form-prefix-cls}-item-feedback {
-      color: less-var('form-color-tip-icon-text_#{$status}');
+      color: token-var('form-color-tip-icon-text_#{$status}');
     }
   }
 }

package/es/icon/icon-align-center/icon-align-center.vue.d.ts

@@ -26,6 +26,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         [x: string]: boolean;
     })[]>;
     innerStyle: import("vue").ComputedRef<CSSProperties>;
+    svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
     onClick: (ev: MouseEvent) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (ev: MouseEvent) => true;

package/es/icon/icon-align-center/index.d.ts

@@ -28,6 +28,7 @@ declare const IconAlignCenter: {
             [x: string]: boolean;
         })[]>;
         innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+        svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
         onClick: (ev: MouseEvent) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         click: (ev: MouseEvent) => true;
@@ -70,6 +71,7 @@ declare const IconAlignCenter: {
             [x: string]: boolean;
         })[]>;
         innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+        svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
         onClick: (ev: MouseEvent) => void;
     }, {}, {}, {}, {
         spin: boolean;
@@ -107,6 +109,7 @@ declare const IconAlignCenter: {
         [x: string]: boolean;
     })[]>;
     innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+    svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
     onClick: (ev: MouseEvent) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (ev: MouseEvent) => true;

package/es/icon/icon-align-left/icon-align-left.vue.d.ts

@@ -26,6 +26,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         [x: string]: boolean;
     })[]>;
     innerStyle: import("vue").ComputedRef<CSSProperties>;
+    svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
     onClick: (ev: MouseEvent) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (ev: MouseEvent) => true;