@sdata/web-vue 1.9.0 → 1.11.0

package/es/menu/style/index.css

@@ -108,86 +108,6 @@
 .sd-menu-light {
   background-color: var(--color-menu-light-bg);
 }
-.sd-menu-light .sd-menu-item,
-.sd-menu-light .sd-menu-group-title,
-.sd-menu-light .sd-menu-pop-header,
-.sd-menu-light .sd-menu-inline-header {
-  color: var(--color-text-2);
-  background-color: var(--color-menu-light-bg);
-}
-.sd-menu-light .sd-menu-item .sd-icon,
-.sd-menu-light .sd-menu-item .sd-menu-icon,
-.sd-menu-light .sd-menu-group-title .sd-icon,
-.sd-menu-light .sd-menu-group-title .sd-menu-icon,
-.sd-menu-light .sd-menu-pop-header .sd-icon,
-.sd-menu-light .sd-menu-pop-header .sd-menu-icon,
-.sd-menu-light .sd-menu-inline-header .sd-icon,
-.sd-menu-light .sd-menu-inline-header .sd-menu-icon {
-  color: var(--color-text-3);
-}
-.sd-menu-light .sd-menu-item:hover,
-.sd-menu-light .sd-menu-group-title:hover,
-.sd-menu-light .sd-menu-pop-header:hover,
-.sd-menu-light .sd-menu-inline-header:hover {
-  color: var(--color-text-2);
-  background-color: var(--color-fill-2);
-}
-.sd-menu-light .sd-menu-item:hover .sd-icon,
-.sd-menu-light .sd-menu-item:hover .sd-menu-icon,
-.sd-menu-light .sd-menu-group-title:hover .sd-icon,
-.sd-menu-light .sd-menu-group-title:hover .sd-menu-icon,
-.sd-menu-light .sd-menu-pop-header:hover .sd-icon,
-.sd-menu-light .sd-menu-pop-header:hover .sd-menu-icon,
-.sd-menu-light .sd-menu-inline-header:hover .sd-icon,
-.sd-menu-light .sd-menu-inline-header:hover .sd-menu-icon {
-  color: var(--color-text-3);
-}
-.sd-menu-light .sd-menu-item.sd-menu-selected,
-.sd-menu-light .sd-menu-group-title.sd-menu-selected,
-.sd-menu-light .sd-menu-pop-header.sd-menu-selected,
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected {
-  color: rgb(var(--primary-6));
-}
-.sd-menu-light .sd-menu-item.sd-menu-selected .sd-icon,
-.sd-menu-light .sd-menu-item.sd-menu-selected .sd-menu-icon,
-.sd-menu-light .sd-menu-group-title.sd-menu-selected .sd-icon,
-.sd-menu-light .sd-menu-group-title.sd-menu-selected .sd-menu-icon,
-.sd-menu-light .sd-menu-pop-header.sd-menu-selected .sd-icon,
-.sd-menu-light .sd-menu-pop-header.sd-menu-selected .sd-menu-icon,
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected .sd-icon,
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected .sd-menu-icon {
-  color: rgb(var(--primary-6));
-}
-.sd-menu-light .sd-menu-item.sd-menu-disabled,
-.sd-menu-light .sd-menu-group-title.sd-menu-disabled,
-.sd-menu-light .sd-menu-pop-header.sd-menu-disabled,
-.sd-menu-light .sd-menu-inline-header.sd-menu-disabled {
-  color: var(--color-text-4);
-  background-color: var(--color-menu-light-bg);
-}
-.sd-menu-light .sd-menu-item.sd-menu-disabled .sd-icon,
-.sd-menu-light .sd-menu-item.sd-menu-disabled .sd-menu-icon,
-.sd-menu-light .sd-menu-group-title.sd-menu-disabled .sd-icon,
-.sd-menu-light .sd-menu-group-title.sd-menu-disabled .sd-menu-icon,
-.sd-menu-light .sd-menu-pop-header.sd-menu-disabled .sd-icon,
-.sd-menu-light .sd-menu-pop-header.sd-menu-disabled .sd-menu-icon,
-.sd-menu-light .sd-menu-inline-header.sd-menu-disabled .sd-icon,
-.sd-menu-light .sd-menu-inline-header.sd-menu-disabled .sd-menu-icon {
-  color: var(--color-text-4);
-}
-.sd-menu-light .sd-menu-item.sd-menu-selected {
-  background-color: var(--color-fill-2);
-}
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected {
-  color: rgb(var(--primary-6));
-}
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected .sd-icon,
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected .sd-menu-icon {
-  color: rgb(var(--primary-6));
-}
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected:hover {
-  background-color: var(--color-fill-2);
-}
 .sd-menu-light.sd-menu-horizontal .sd-menu-item.sd-menu-selected,
 .sd-menu-light.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected,
 .sd-menu-light.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected,
@@ -195,12 +115,6 @@
   background: none;
   transition: color 0.2s cubic-bezier(0, 0, 1, 1);
 }
-.sd-menu-light.sd-menu-horizontal .sd-menu-item.sd-menu-selected:hover,
-.sd-menu-light.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected:hover,
-.sd-menu-light.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected:hover,
-.sd-menu-light.sd-menu-horizontal .sd-menu-inline-header.sd-menu-selected:hover {
-  background-color: var(--color-fill-2);
-}
 .sd-menu-light .sd-menu-group-title {
   color: var(--color-text-3);
   pointer-events: none;
@@ -209,92 +123,9 @@
   color: var(--color-text-3);
   background-color: var(--color-fill-1);
 }
-.sd-menu-light .sd-menu-collapse-button:hover {
-  background-color: var(--color-fill-3);
-}
 .sd-menu-dark {
   background-color: var(--color-menu-dark-bg);
 }
-.sd-menu-dark .sd-menu-item,
-.sd-menu-dark .sd-menu-group-title,
-.sd-menu-dark .sd-menu-pop-header,
-.sd-menu-dark .sd-menu-inline-header {
-  color: var(--color-text-4);
-  background-color: var(--color-menu-dark-bg);
-}
-.sd-menu-dark .sd-menu-item .sd-icon,
-.sd-menu-dark .sd-menu-item .sd-menu-icon,
-.sd-menu-dark .sd-menu-group-title .sd-icon,
-.sd-menu-dark .sd-menu-group-title .sd-menu-icon,
-.sd-menu-dark .sd-menu-pop-header .sd-icon,
-.sd-menu-dark .sd-menu-pop-header .sd-menu-icon,
-.sd-menu-dark .sd-menu-inline-header .sd-icon,
-.sd-menu-dark .sd-menu-inline-header .sd-menu-icon {
-  color: var(--color-text-3);
-}
-.sd-menu-dark .sd-menu-item:hover,
-.sd-menu-dark .sd-menu-group-title:hover,
-.sd-menu-dark .sd-menu-pop-header:hover,
-.sd-menu-dark .sd-menu-inline-header:hover {
-  color: var(--color-text-4);
-  background-color: var(--color-menu-dark-hover);
-}
-.sd-menu-dark .sd-menu-item:hover .sd-icon,
-.sd-menu-dark .sd-menu-item:hover .sd-menu-icon,
-.sd-menu-dark .sd-menu-group-title:hover .sd-icon,
-.sd-menu-dark .sd-menu-group-title:hover .sd-menu-icon,
-.sd-menu-dark .sd-menu-pop-header:hover .sd-icon,
-.sd-menu-dark .sd-menu-pop-header:hover .sd-menu-icon,
-.sd-menu-dark .sd-menu-inline-header:hover .sd-icon,
-.sd-menu-dark .sd-menu-inline-header:hover .sd-menu-icon {
-  color: var(--color-text-3);
-}
-.sd-menu-dark .sd-menu-item.sd-menu-selected,
-.sd-menu-dark .sd-menu-group-title.sd-menu-selected,
-.sd-menu-dark .sd-menu-pop-header.sd-menu-selected,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected {
-  color: var(--color-white);
-}
-.sd-menu-dark .sd-menu-item.sd-menu-selected .sd-icon,
-.sd-menu-dark .sd-menu-item.sd-menu-selected .sd-menu-icon,
-.sd-menu-dark .sd-menu-group-title.sd-menu-selected .sd-icon,
-.sd-menu-dark .sd-menu-group-title.sd-menu-selected .sd-menu-icon,
-.sd-menu-dark .sd-menu-pop-header.sd-menu-selected .sd-icon,
-.sd-menu-dark .sd-menu-pop-header.sd-menu-selected .sd-menu-icon,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected .sd-icon,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected .sd-menu-icon {
-  color: var(--color-white);
-}
-.sd-menu-dark .sd-menu-item.sd-menu-disabled,
-.sd-menu-dark .sd-menu-group-title.sd-menu-disabled,
-.sd-menu-dark .sd-menu-pop-header.sd-menu-disabled,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-disabled {
-  color: var(--color-text-2);
-  background-color: var(--color-menu-dark-bg);
-}
-.sd-menu-dark .sd-menu-item.sd-menu-disabled .sd-icon,
-.sd-menu-dark .sd-menu-item.sd-menu-disabled .sd-menu-icon,
-.sd-menu-dark .sd-menu-group-title.sd-menu-disabled .sd-icon,
-.sd-menu-dark .sd-menu-group-title.sd-menu-disabled .sd-menu-icon,
-.sd-menu-dark .sd-menu-pop-header.sd-menu-disabled .sd-icon,
-.sd-menu-dark .sd-menu-pop-header.sd-menu-disabled .sd-menu-icon,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-disabled .sd-icon,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-disabled .sd-menu-icon {
-  color: var(--color-text-2);
-}
-.sd-menu-dark .sd-menu-item.sd-menu-selected {
-  background-color: var(--color-menu-dark-hover);
-}
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected {
-  color: rgb(var(--primary-6));
-}
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected .sd-icon,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected .sd-menu-icon {
-  color: rgb(var(--primary-6));
-}
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected:hover {
-  background-color: var(--color-menu-dark-hover);
-}
 .sd-menu-dark.sd-menu-horizontal .sd-menu-item.sd-menu-selected,
 .sd-menu-dark.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected,
 .sd-menu-dark.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected,
@@ -302,12 +133,6 @@
   background: none;
   transition: color 0.2s cubic-bezier(0, 0, 1, 1);
 }
-.sd-menu-dark.sd-menu-horizontal .sd-menu-item.sd-menu-selected:hover,
-.sd-menu-dark.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected:hover,
-.sd-menu-dark.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected:hover,
-.sd-menu-dark.sd-menu-horizontal .sd-menu-inline-header.sd-menu-selected:hover {
-  background-color: var(--color-menu-dark-hover);
-}
 .sd-menu-dark .sd-menu-group-title {
   color: var(--color-text-3);
   pointer-events: none;
@@ -316,9 +141,6 @@
   color: var(--color-white);
   background-color: rgb(var(--primary-6));
 }
-.sd-menu-dark .sd-menu-collapse-button:hover {
-  background-color: rgb(var(--primary-7));
-}
 .sd-menu a,
 .sd-menu a:hover,
 .sd-menu a:focus,

package/es/menu/style/index.scss

@@ -2,129 +2,26 @@
 @use '@style/theme/index.scss' as global;
 @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/menu/style/token.scss' as token;
 @use '@components/menu/style/token.scss' as *;
+@use '@components/dropdown/style/token.scss' as dropdownToken;
 @use '@components/dropdown/style/token.scss' as *;
 
 $menu-prefix-cls: string.unquote('#{theme.$prefix}-menu');
 $trigger-menu-prefix-cls: string.unquote('#{theme.$prefix}-trigger-menu');
 
-$__less-vars: (
-  'dropdown-border-radius': $dropdown-border-radius,
-  'dropdown-box-shadow': $dropdown-box-shadow,
-  'dropdown-color-bg': $dropdown-color-bg,
-  'dropdown-color-border': $dropdown-color-border,
-  'dropdown-dark-color-bg': $dropdown-dark-color-bg,
-  'dropdown-dark-color-border': $dropdown-dark-color-border,
-  'dropdown-dark-group-title-color-text': $dropdown-dark-group-title-color-text,
-  'dropdown-dark-option-color-bg_default': $dropdown-dark-option-color-bg_default,
-  'dropdown-dark-option-color-bg_disabled': $dropdown-dark-option-color-bg_disabled,
-  'dropdown-dark-option-color-bg_hover': $dropdown-dark-option-color-bg_hover,
-  'dropdown-dark-option-color-bg_selected': $dropdown-dark-option-color-bg_selected,
-  'dropdown-dark-option-color-text_default': $dropdown-dark-option-color-text_default,
-  'dropdown-dark-option-color-text_disabled': $dropdown-dark-option-color-text_disabled,
-  'dropdown-dark-option-color-text_hover': $dropdown-dark-option-color-text_hover,
-  'dropdown-dark-option-color-text_selected': $dropdown-dark-option-color-text_selected,
-  'dropdown-font-size': $dropdown-font-size,
-  'dropdown-group-title-color-text': $dropdown-group-title-color-text,
-  'dropdown-group-title-font-size': $dropdown-group-title-font-size,
-  'dropdown-group-title-height': $dropdown-group-title-height,
-  'dropdown-group-title-padding-horizontal': $dropdown-group-title-padding-horizontal,
-  'dropdown-group-title-padding-top': $dropdown-group-title-padding-top,
-  'dropdown-margin-left-suffix-icon': $dropdown-margin-left-suffix-icon,
-  'dropdown-max-height': $dropdown-max-height,
-  'dropdown-option-color-bg_default': $dropdown-option-color-bg_default,
-  'dropdown-option-color-bg_disabled': $dropdown-option-color-bg_disabled,
-  'dropdown-option-color-bg_hover': $dropdown-option-color-bg_hover,
-  'dropdown-option-color-bg_selected': $dropdown-option-color-bg_selected,
-  'dropdown-option-color-text_default': $dropdown-option-color-text_default,
-  'dropdown-option-color-text_disabled': $dropdown-option-color-text_disabled,
-  'dropdown-option-color-text_hover': $dropdown-option-color-text_hover,
-  'dropdown-option-color-text_selected': $dropdown-option-color-text_selected,
-  'dropdown-option-font-weight_selected': $dropdown-option-font-weight_selected,
-  'dropdown-option-height': $dropdown-option-height,
-  'dropdown-option-padding-horizontal': $dropdown-option-padding-horizontal,
-  'dropdown-padding-vertical': $dropdown-padding-vertical,
-  'menu-border-radius': $menu-border-radius,
-  'menu-border-radius-collapse-button': $menu-border-radius-collapse-button,
-  'menu-collapse-padding-horizontal': $menu-collapse-padding-horizontal,
-  'menu-collapse-padding-vertical': $menu-collapse-padding-vertical,
-  'menu-collapse-width': $menu-collapse-width,
-  'menu-color-border-popup': $menu-color-border-popup,
-  'menu-color-label-item-selected': $menu-color-label-item-selected,
-  'menu-dark-color-bg': $menu-dark-color-bg,
-  'menu-dark-color-button': $menu-dark-color-button,
-  'menu-dark-color-bg-button': $menu-dark-color-bg-button,
-  'menu-dark-color-bg-button_hover': $menu-dark-color-bg-button_hover,
-  'menu-dark-color-group-title': $menu-dark-color-group-title,
-  'menu-dark-color-bg-item_default': $menu-dark-color-bg-item_default,
-  'menu-dark-color-bg-item_disabled': $menu-dark-color-bg-item_disabled,
-  'menu-dark-color-bg-item_hover': $menu-dark-color-bg-item_hover,
-  'menu-dark-color-bg-item_selected': $menu-dark-color-bg-item_selected,
-  'menu-dark-color-bg-submenu_selected_hover': $menu-dark-color-bg-submenu_selected_hover,
-  'menu-dark-color-icon_default': $menu-dark-color-icon_default,
-  'menu-dark-color-icon_disabled': $menu-dark-color-icon_disabled,
-  'menu-dark-color-icon_hover': $menu-dark-color-icon_hover,
-  'menu-dark-color-icon_selected': $menu-dark-color-icon_selected,
-  'menu-dark-color-item_default': $menu-dark-color-item_default,
-  'menu-dark-color-item_disabled': $menu-dark-color-item_disabled,
-  'menu-dark-color-item_hover': $menu-dark-color-item_hover,
-  'menu-dark-color-item_selected': $menu-dark-color-item_selected,
-  'menu-dark-color-submenu_selected': $menu-dark-color-submenu_selected,
-  'menu-font-size': $menu-font-size,
-  'menu-font-weight-item-selected': $menu-font-weight-item-selected,
-  'menu-height-collapse-button': $menu-height-collapse-button,
-  'menu-height-label-item-selected': $menu-height-label-item-selected,
-  'menu-horizontal-item-gap': $menu-horizontal-item-gap,
-  'menu-horizontal-item-height': $menu-horizontal-item-height,
-  'menu-horizontal-item-padding-horizontal': $menu-horizontal-item-padding-horizontal,
-  'menu-horizontal-margin-right-item-prefix-icon': $menu-horizontal-margin-right-item-prefix-icon,
-  'menu-horizontal-padding-horizontal': $menu-horizontal-padding-horizontal,
-  'menu-horizontal-padding-vertical': $menu-horizontal-padding-vertical,
-  'menu-item-gap': $menu-item-gap,
-  'menu-item-indent-spacing': $menu-item-indent-spacing,
-  'menu-light-color-bg': $menu-light-color-bg,
-  'menu-light-color-button': $menu-light-color-button,
-  'menu-light-color-bg-button': $menu-light-color-bg-button,
-  'menu-light-color-bg-button_hover': $menu-light-color-bg-button_hover,
-  'menu-light-color-bg-item_default': $menu-light-color-bg-item_default,
-  'menu-light-color-bg-item_disabled': $menu-light-color-bg-item_disabled,
-  'menu-light-color-bg-item_hover': $menu-light-color-bg-item_hover,
-  'menu-light-color-bg-item_selected': $menu-light-color-bg-item_selected,
-  'menu-light-color-bg-submenu_selected_hover': $menu-light-color-bg-submenu_selected_hover,
-  'menu-light-color-icon_default': $menu-light-color-icon_default,
-  'menu-light-color-icon_disabled': $menu-light-color-icon_disabled,
-  'menu-light-color-icon_hover': $menu-light-color-icon_hover,
-  'menu-light-color-icon_selected': $menu-light-color-icon_selected,
-  'menu-light-color-group-title': $menu-light-color-group-title,
-  'menu-light-color-item_default': $menu-light-color-item_default,
-  'menu-light-color-item_disabled': $menu-light-color-item_disabled,
-  'menu-light-color-item_hover': $menu-light-color-item_hover,
-  'menu-light-color-item_selected': $menu-light-color-item_selected,
-  'menu-light-color-submenu_selected': $menu-light-color-submenu_selected,
-  'menu-line-height': $menu-line-height,
-  'menu-margin-left-item-suffix-icon': $menu-margin-left-item-suffix-icon,
-  'menu-margin-right-item-prefix-icon': $menu-margin-right-item-prefix-icon,
-  'menu-pop-button-border-color': $menu-pop-button-border-color,
-  'menu-pop-button-box-shadow': $menu-pop-button-box-shadow,
-  'menu-pop-button-margin-bottom': $menu-pop-button-margin-bottom,
-  'menu-pop-button-size': $menu-pop-button-size,
-  'menu-vertical-item-padding-horizontal': $menu-vertical-item-padding-horizontal,
-  'menu-vertical-item-height': $menu-vertical-item-height,
-  'menu-vertical-padding-horizontal': $menu-vertical-padding-horizontal,
-  'menu-vertical-padding-vertical': $menu-vertical-padding-vertical,
-  'menu-width-collapse-button': $menu-width-collapse-button,
-  'prefix': theme.$prefix,
-  'sd-cssvars-prefix': global.$sd-cssvars-prefix,
-  'transition-duration-1': theme.$transition-duration-1,
-  'transition-duration-2': theme.$transition-duration-2,
-  'transition-timing-function-linear': theme.$transition-timing-function-linear,
-  'transition-timing-function-standard': theme.$transition-timing-function-standard,
-);
-
-@function less-var($name, $fallback: null) {
-  @return legacyLessVar.get($__less-vars, $name, $fallback);
+$token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-variables('token'));
+
+@function token-var($name, $fallback: null) {
+  $value: map.get($token-vars, $name);
+
+  @if $value == null {
+    @return $fallback;
+  }
+
+  @return $value;
 }
 
 @mixin applyStyleToItem() {
@@ -176,8 +73,8 @@ $__less-vars: (
 
 @mixin menu-item-mode($mode) {
   @include applyStyleToItem() {
-    padding: 0 less-var('menu-#{$mode}-item-padding-horizontal');
-    line-height: less-var('menu-#{$mode}-item-height');
+    padding: 0 token-var('menu-#{$mode}-item-padding-horizontal');
+    line-height: token-var('menu-#{$mode}-item-height');
 
     .#{$menu-prefix-cls}-icon-suffix .#{theme.$prefix}-icon {
       margin-right: 0;
@@ -236,61 +133,61 @@ $__less-vars: (
 
 @mixin menu-theme($theme) {
   &-#{$theme} {
-    background-color: less-var('menu-#{$theme}-color-bg');
+    background-color: token-var('menu-#{$theme}-color-bg');
 
     @include applyStyleToItem() {
-      color: less-var('menu-#{$theme}-color-item_default');
-      background-color: less-var('menu-#{$theme}-color-bg-item_default');
+      color: token-var('menu-#{$theme}-color-item_default');
+      background-color: token-var('menu-#{$theme}-color-bg-item_default');
 
       .#{theme.$prefix}-icon,
       .#{$menu-prefix-cls}-icon {
-        color: less-var('menu-#{$theme}-color-icon_default');
+        color: token-var('menu-#{$theme}-color-icon_default');
       }
 
       &:hover {
-        color: less-var('menu-#{$theme}-color-item_hover');
-        background-color: less-var('menu-#{$theme}-color-bg-item_hover');
+        color: token-var('menu-#{$theme}-color-item_hover');
+        background-color: token-var('menu-#{$theme}-color-bg-item_hover');
 
         .#{theme.$prefix}-icon,
         .#{$menu-prefix-cls}-icon {
-          color: less-var('menu-#{$theme}-color-icon_hover');
+          color: token-var('menu-#{$theme}-color-icon_hover');
         }
       }
 
       &.#{$menu-prefix-cls}-selected {
-        color: less-var('menu-#{$theme}-color-item_selected');
+        color: token-var('menu-#{$theme}-color-item_selected');
 
         .#{theme.$prefix}-icon,
         .#{$menu-prefix-cls}-icon {
-          color: less-var('menu-#{$theme}-color-icon_selected');
+          color: token-var('menu-#{$theme}-color-icon_selected');
         }
       }
 
       &.#{$menu-prefix-cls}-disabled {
-        color: less-var('menu-#{$theme}-color-item_disabled');
-        background-color: less-var('menu-#{$theme}-color-bg-item_disabled');
+        color: token-var('menu-#{$theme}-color-item_disabled');
+        background-color: token-var('menu-#{$theme}-color-bg-item_disabled');
 
         .#{theme.$prefix}-icon,
         .#{$menu-prefix-cls}-icon {
-          color: less-var('menu-#{$theme}-color-icon_disabled');
+          color: token-var('menu-#{$theme}-color-icon_disabled');
         }
       }
     }
 
     .#{$menu-prefix-cls}-item.#{$menu-prefix-cls}-selected {
-      background-color: less-var('menu-#{$theme}-color-bg-item_selected');
+      background-color: token-var('menu-#{$theme}-color-bg-item_selected');
     }
 
     .#{$menu-prefix-cls}-inline-header.#{$menu-prefix-cls}-selected {
-      color: less-var('menu-#{$theme}-color-submenu_selected');
+      color: token-var('menu-#{$theme}-color-submenu_selected');
 
       .#{theme.$prefix}-icon,
       .#{$menu-prefix-cls}-icon {
-        color: less-var('menu-#{$theme}-color-submenu_selected');
+        color: token-var('menu-#{$theme}-color-submenu_selected');
       }
 
       &:hover {
-        background-color: less-var('menu-#{$theme}-color-bg-submenu_selected_hover');
+        background-color: token-var('menu-#{$theme}-color-bg-submenu_selected_hover');
       }
     }
 
@@ -302,23 +199,23 @@ $__less-vars: (
           @include menu-text-color-transition();
 
           &:hover {
-            background-color: less-var('menu-#{$theme}-color-bg-item_hover');
+            background-color: token-var('menu-#{$theme}-color-bg-item_hover');
           }
         }
       }
     }
 
     .#{$menu-prefix-cls}-group-title {
-      color: less-var('menu-#{$theme}-color-group-title');
+      color: token-var('menu-#{$theme}-color-group-title');
       pointer-events: none;
     }
 
     .#{$menu-prefix-cls}-collapse-button {
-      color: less-var('menu-#{$theme}-color-button');
-      background-color: less-var('menu-#{$theme}-color-bg-button');
+      color: token-var('menu-#{$theme}-color-button');
+      background-color: token-var('menu-#{$theme}-color-bg-button');
 
       &:hover {
-        background-color: less-var('menu-#{$theme}-color-bg-button_hover');
+        background-color: token-var('menu-#{$theme}-color-bg-button_hover');
       }
     }
   }

package/es/menu/sub-menu-inline.vue.d.ts

@@ -42,11 +42,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         level: number;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     ExpandTransition: import("vue").DefineComponent<{}, {
-        onBeforeEnter(el: HTMLDivElement): void;
-        onEnter(el: HTMLDivElement): void;
-        onAfterEnter(el: HTMLDivElement): void;
-        onBeforeLeave(el: HTMLDivElement): void;
-        onLeave(el: HTMLDivElement): void;
-        onAfterLeave(el: HTMLElement): void;
+        onBeforeEnter(el: Element): void;
+        onEnter(el: Element): void;
+        onAfterEnter(el: Element): void;
+        onBeforeLeave(el: Element): void;
+        onLeave(el: Element): void;
+        onAfterLeave(el: Element): void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/menu/sub-menu-pop.vue.d.ts

@@ -296,6 +296,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
                     [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;
@@ -338,6 +339,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
                     [x: string]: boolean;
                 })[]>;
                 innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+                svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
                 onClick: (ev: MouseEvent) => void;
             }, {}, {}, {}, {
                 spin: boolean;
@@ -375,6 +377,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
                 [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;
@@ -414,6 +417,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
                     [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;
@@ -456,6 +460,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
                     [x: string]: boolean;
                 })[]>;
                 innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+                svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
                 onClick: (ev: MouseEvent) => void;
             }, {}, {}, {}, {
                 spin: boolean;
@@ -493,6 +498,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
                 [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;
@@ -652,9 +658,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         }>> & 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;
@@ -666,6 +672,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             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;
@@ -677,7 +684,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             blurToClose: boolean;
             clickToClose: boolean;
             clickOutsideToClose: boolean;
-            animationName: string;
             mouseEnterDelay: number;
             mouseLeaveDelay: number;
             focusDelay: number;
@@ -843,14 +849,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         }>> & 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;
@@ -862,7 +869,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             blurToClose: boolean;
             clickToClose: boolean;
             clickOutsideToClose: boolean;
-            animationName: string;
             mouseEnterDelay: number;
             mouseLeaveDelay: number;
             focusDelay: number;
@@ -1025,9 +1031,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     }>> & 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;
@@ -1039,6 +1045,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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;
@@ -1050,7 +1057,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         blurToClose: boolean;
         clickToClose: boolean;
         clickOutsideToClose: boolean;
-        animationName: string;
         mouseEnterDelay: number;
         mouseLeaveDelay: number;
         focusDelay: number;