@sdata/web-vue 4.7.1 → 5.0.0

package/es/menu/style/index.css

@@ -50,16 +50,13 @@
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  font-size: 14px;
-  line-height: 1.5715;
+  font-size: var(--component-menu-menu-font-size, var(--component-menu-font-size, 14px));
+  line-height: var(--component-menu-menu-line-height, var(--component-menu-line-height, 1.5715));
   transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
-.sd-menu:focus-visible {
-  outline: 3px solid var(--sd-color-primary-light-2);
-}
 .sd-menu-indent {
   display: inline-block;
-  width: 20px;
+  width: var(--component-menu-menu-item-indent-spacing, var(--component-menu-item-indent-spacing, var(--spacing-8, 20px)));
 }
 .sd-menu-ellipsis-wrapper {
   display: inline-flex;
@@ -76,7 +73,7 @@
 .sd-menu .sd-menu-inline-header {
   position: relative;
   box-sizing: border-box;
-  border-radius: var(--sd-border-radius-small);
+  border-radius: var(--component-menu-menu-border-radius, var(--component-menu-border-radius, var(--sd-border-radius-small)));
   cursor: pointer;
 }
 .sd-menu .sd-menu-item.sd-menu-disabled,
@@ -89,7 +86,7 @@
 .sd-menu .sd-menu-group-title.sd-menu-selected,
 .sd-menu .sd-menu-pop-header.sd-menu-selected,
 .sd-menu .sd-menu-inline-header.sd-menu-selected {
-  font-weight: 500;
+  font-weight: var(--component-menu-menu-font-weight-item-selected, var(--component-menu-font-weight-item-selected, var(--font-weight-500, 500)));
   transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-menu .sd-menu-item.sd-menu-selected svg,
@@ -115,14 +112,14 @@
   margin-right: 0;
 }
 .sd-menu-light {
-  background-color: var(--sd-color-menu-light-bg);
+  background-color: var(--component-menu-menu-light-color-bg, var(--component-menu-light-color-bg, var(--sd-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(--sd-color-text-2);
-  background-color: var(--sd-color-menu-light-bg);
+  color: var(--component-menu-menu-light-color-item-default, var(--component-menu-light-color-item-default, var(--sd-color-text-2)));
+  background-color: var(--component-menu-menu-light-color-bg-item-default, var(--component-menu-light-color-bg-item-default, var(--component-menu-menu-light-color-bg, var(--component-menu-light-color-bg, var(--sd-color-menu-light-bg)))));
 }
 .sd-menu-light .sd-menu-item .sd-icon,
 .sd-menu-light .sd-menu-item .sd-menu-icon,
@@ -132,14 +129,14 @@
 .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(--sd-color-text-3);
+  color: var(--component-menu-menu-light-color-icon-default, var(--component-menu-light-color-icon-default, var(--sd-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(--sd-color-text-2);
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-menu-menu-light-color-item-hover, var(--component-menu-light-color-item-hover, var(--sd-color-text-2)));
+  background-color: var(--component-menu-menu-light-color-bg-item-hover, var(--component-menu-light-color-bg-item-hover, var(--sd-color-fill-2)));
 }
 .sd-menu-light .sd-menu-item:hover .sd-icon,
 .sd-menu-light .sd-menu-item:hover .sd-menu-icon,
@@ -149,13 +146,31 @@
 .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(--sd-color-text-3);
+  color: var(--component-menu-menu-light-color-icon-hover, var(--component-menu-light-color-icon-hover, var(--sd-color-text-3)));
+}
+.sd-menu-light .sd-menu-item:focus-visible,
+.sd-menu-light .sd-menu-group-title:focus-visible,
+.sd-menu-light .sd-menu-pop-header:focus-visible,
+.sd-menu-light .sd-menu-inline-header:focus-visible {
+  color: var(--component-menu-menu-light-color-item-hover, var(--component-menu-light-color-item-hover, var(--sd-color-text-2)));
+  background-color: var(--component-menu-menu-light-color-bg-item-hover, var(--component-menu-light-color-bg-item-hover, var(--sd-color-fill-2)));
+  outline: none;
+}
+.sd-menu-light .sd-menu-item:focus-visible .sd-icon,
+.sd-menu-light .sd-menu-item:focus-visible .sd-menu-icon,
+.sd-menu-light .sd-menu-group-title:focus-visible .sd-icon,
+.sd-menu-light .sd-menu-group-title:focus-visible .sd-menu-icon,
+.sd-menu-light .sd-menu-pop-header:focus-visible .sd-icon,
+.sd-menu-light .sd-menu-pop-header:focus-visible .sd-menu-icon,
+.sd-menu-light .sd-menu-inline-header:focus-visible .sd-icon,
+.sd-menu-light .sd-menu-inline-header:focus-visible .sd-menu-icon {
+  color: var(--component-menu-menu-light-color-icon-hover, var(--component-menu-light-color-icon-hover, var(--sd-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(--sd-primary-6));
+  color: var(--component-menu-menu-light-color-item-selected, var(--component-menu-light-color-item-selected, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-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,
@@ -165,14 +180,14 @@
 .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(--sd-primary-6));
+  color: var(--component-menu-menu-light-color-icon-selected, var(--component-menu-light-color-icon-selected, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-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(--sd-color-text-4);
-  background-color: var(--sd-color-menu-light-bg);
+  color: var(--component-menu-menu-light-color-item-disabled, var(--component-menu-light-color-item-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-menu-menu-light-color-bg-item-disabled, var(--component-menu-light-color-bg-item-disabled, var(--component-menu-menu-light-color-bg, var(--component-menu-light-color-bg, var(--sd-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,
@@ -182,20 +197,20 @@
 .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(--sd-color-text-4);
+  color: var(--component-menu-menu-light-color-icon-disabled, var(--component-menu-light-color-icon-disabled, var(--sd-color-text-4)));
 }
 .sd-menu-light .sd-menu-item.sd-menu-selected {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-menu-menu-light-color-bg-item-selected, var(--component-menu-light-color-bg-item-selected, var(--sd-color-fill-2)));
 }
 .sd-menu-light .sd-menu-inline-header.sd-menu-selected {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-menu-menu-light-color-submenu-selected, var(--component-menu-light-color-submenu-selected, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-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(--sd-primary-6));
+  color: var(--component-menu-menu-light-color-submenu-selected, var(--component-menu-light-color-submenu-selected, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-menu-light .sd-menu-inline-header.sd-menu-selected:hover {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-menu-menu-light-color-bg-submenu-selected-hover, var(--component-menu-light-color-bg-submenu-selected-hover, var(--sd-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,
@@ -208,28 +223,28 @@
 .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(--sd-color-fill-2);
+  background-color: var(--component-menu-menu-light-color-bg-item-hover, var(--component-menu-light-color-bg-item-hover, var(--sd-color-fill-2)));
 }
 .sd-menu-light .sd-menu-group-title {
-  color: var(--sd-color-text-3);
+  color: var(--component-menu-menu-light-color-group-title, var(--component-menu-light-color-group-title, var(--sd-color-text-3)));
   pointer-events: none;
 }
 .sd-menu-light .sd-menu-collapse-button {
-  color: var(--sd-color-text-3);
-  background-color: var(--sd-color-fill-1);
+  color: var(--component-menu-menu-light-color-button, var(--component-menu-light-color-button, var(--sd-color-text-3)));
+  background-color: var(--component-menu-menu-light-color-bg-button, var(--component-menu-light-color-bg-button, var(--sd-color-fill-1)));
 }
 .sd-menu-light .sd-menu-collapse-button:hover {
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-menu-menu-light-color-bg-button-hover, var(--component-menu-light-color-bg-button-hover, var(--sd-color-fill-3)));
 }
 .sd-menu-dark {
-  background-color: var(--sd-color-menu-dark-bg);
+  background-color: var(--component-menu-menu-dark-color-bg, var(--component-menu-dark-color-bg, var(--sd-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(--sd-color-text-4);
-  background-color: var(--sd-color-menu-dark-bg);
+  color: var(--component-menu-menu-dark-color-item-default, var(--component-menu-dark-color-item-default, var(--sd-color-text-4)));
+  background-color: var(--component-menu-menu-dark-color-bg-item-default, var(--component-menu-dark-color-bg-item-default, var(--component-menu-menu-dark-color-bg, var(--component-menu-dark-color-bg, var(--sd-color-menu-dark-bg)))));
 }
 .sd-menu-dark .sd-menu-item .sd-icon,
 .sd-menu-dark .sd-menu-item .sd-menu-icon,
@@ -239,14 +254,14 @@
 .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(--sd-color-text-3);
+  color: var(--component-menu-menu-dark-color-icon-default, var(--component-menu-dark-color-icon-default, var(--sd-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(--sd-color-text-4);
-  background-color: var(--sd-color-menu-dark-hover);
+  color: var(--component-menu-menu-dark-color-item-hover, var(--component-menu-dark-color-item-hover, var(--sd-color-text-4)));
+  background-color: var(--component-menu-menu-dark-color-bg-item-hover, var(--component-menu-dark-color-bg-item-hover, var(--sd-color-menu-dark-hover)));
 }
 .sd-menu-dark .sd-menu-item:hover .sd-icon,
 .sd-menu-dark .sd-menu-item:hover .sd-menu-icon,
@@ -256,13 +271,31 @@
 .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(--sd-color-text-3);
+  color: var(--component-menu-menu-dark-color-icon-hover, var(--component-menu-dark-color-icon-hover, var(--sd-color-text-3)));
+}
+.sd-menu-dark .sd-menu-item:focus-visible,
+.sd-menu-dark .sd-menu-group-title:focus-visible,
+.sd-menu-dark .sd-menu-pop-header:focus-visible,
+.sd-menu-dark .sd-menu-inline-header:focus-visible {
+  color: var(--component-menu-menu-dark-color-item-hover, var(--component-menu-dark-color-item-hover, var(--sd-color-text-4)));
+  background-color: var(--component-menu-menu-dark-color-bg-item-hover, var(--component-menu-dark-color-bg-item-hover, var(--sd-color-menu-dark-hover)));
+  outline: none;
+}
+.sd-menu-dark .sd-menu-item:focus-visible .sd-icon,
+.sd-menu-dark .sd-menu-item:focus-visible .sd-menu-icon,
+.sd-menu-dark .sd-menu-group-title:focus-visible .sd-icon,
+.sd-menu-dark .sd-menu-group-title:focus-visible .sd-menu-icon,
+.sd-menu-dark .sd-menu-pop-header:focus-visible .sd-icon,
+.sd-menu-dark .sd-menu-pop-header:focus-visible .sd-menu-icon,
+.sd-menu-dark .sd-menu-inline-header:focus-visible .sd-icon,
+.sd-menu-dark .sd-menu-inline-header:focus-visible .sd-menu-icon {
+  color: var(--component-menu-menu-dark-color-icon-hover, var(--component-menu-dark-color-icon-hover, var(--sd-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(--sd-color-white);
+  color: var(--component-menu-menu-dark-color-item-selected, var(--component-menu-dark-color-item-selected, var(--sd-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,
@@ -272,14 +305,14 @@
 .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(--sd-color-white);
+  color: var(--component-menu-menu-dark-color-icon-selected, var(--component-menu-dark-color-icon-selected, var(--sd-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(--sd-color-text-2);
-  background-color: var(--sd-color-menu-dark-bg);
+  color: var(--component-menu-menu-dark-color-item-disabled, var(--component-menu-dark-color-item-disabled, var(--sd-color-text-2)));
+  background-color: var(--component-menu-menu-dark-color-bg-item-disabled, var(--component-menu-dark-color-bg-item-disabled, var(--component-menu-menu-dark-color-bg, var(--component-menu-dark-color-bg, var(--sd-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,
@@ -289,20 +322,20 @@
 .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(--sd-color-text-2);
+  color: var(--component-menu-menu-dark-color-icon-disabled, var(--component-menu-dark-color-icon-disabled, var(--sd-color-text-2)));
 }
 .sd-menu-dark .sd-menu-item.sd-menu-selected {
-  background-color: var(--sd-color-menu-dark-hover);
+  background-color: var(--component-menu-menu-dark-color-bg-item-selected, var(--component-menu-dark-color-bg-item-selected, var(--sd-color-menu-dark-hover)));
 }
 .sd-menu-dark .sd-menu-inline-header.sd-menu-selected {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-menu-menu-dark-color-submenu-selected, var(--component-menu-dark-color-submenu-selected, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-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(--sd-primary-6));
+  color: var(--component-menu-menu-dark-color-submenu-selected, var(--component-menu-dark-color-submenu-selected, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-menu-dark .sd-menu-inline-header.sd-menu-selected:hover {
-  background-color: var(--sd-color-menu-dark-hover);
+  background-color: var(--component-menu-menu-dark-color-bg-submenu-selected-hover, var(--component-menu-dark-color-bg-submenu-selected-hover, var(--sd-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,
@@ -315,18 +348,18 @@
 .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(--sd-color-menu-dark-hover);
+  background-color: var(--component-menu-menu-dark-color-bg-item-hover, var(--component-menu-dark-color-bg-item-hover, var(--sd-color-menu-dark-hover)));
 }
 .sd-menu-dark .sd-menu-group-title {
-  color: var(--sd-color-text-3);
+  color: var(--component-menu-menu-dark-color-group-title, var(--component-menu-dark-color-group-title, var(--sd-color-text-3)));
   pointer-events: none;
 }
 .sd-menu-dark .sd-menu-collapse-button {
-  color: var(--sd-color-white);
-  background-color: rgb(var(--sd-primary-6));
+  color: var(--component-menu-menu-dark-color-button, var(--component-menu-dark-color-button, var(--sd-color-white)));
+  background-color: var(--component-menu-menu-dark-color-bg-button, var(--component-menu-dark-color-bg-button, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-menu-dark .sd-menu-collapse-button:hover {
-  background-color: rgb(var(--sd-primary-7));
+  background-color: var(--component-menu-menu-dark-color-bg-button-hover, var(--component-menu-dark-color-bg-button-hover, var(--color-primary-7, var(--sd-color-primary-7, rgb(var(--sd-primary-7))))));
 }
 .sd-menu a,
 .sd-menu a:hover,
@@ -350,7 +383,7 @@
 .sd-menu-vertical .sd-menu-pop-header,
 .sd-menu-vertical .sd-menu-inline-header {
   padding: 0 12px;
-  line-height: 40px;
+  line-height: var(--component-menu-menu-vertical-item-height, var(--component-menu-vertical-item-height, 40px));
 }
 .sd-menu-vertical .sd-menu-item .sd-menu-icon-suffix .sd-icon,
 .sd-menu-vertical .sd-menu-group-title .sd-menu-icon-suffix .sd-icon,
@@ -362,7 +395,7 @@
 .sd-menu-vertical .sd-menu-group-title,
 .sd-menu-vertical .sd-menu-pop-header,
 .sd-menu-vertical .sd-menu-inline-header {
-  margin-bottom: 4px;
+  margin-bottom: var(--component-menu-menu-item-gap, var(--component-menu-item-gap, var(--spacing-2, 4px)));
 }
 .sd-menu-vertical .sd-menu-item:not(.sd-menu-has-icon),
 .sd-menu-vertical .sd-menu-group-title:not(.sd-menu-has-icon),
@@ -426,7 +459,7 @@
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .sd-menu-vertical .sd-menu-inner {
-  padding: 4px 8px;
+  padding: var(--component-menu-menu-vertical-padding-vertical, var(--component-menu-vertical-padding-vertical, var(--spacing-2, 4px))) var(--component-menu-menu-vertical-padding-horizontal, var(--component-menu-vertical-padding-horizontal, var(--spacing-4, 8px)));
 }
 .sd-menu-vertical .sd-menu-item.sd-menu-item-indented {
   display: flex;
@@ -450,8 +483,8 @@
 .sd-menu-horizontal .sd-menu-group-title,
 .sd-menu-horizontal .sd-menu-pop-header,
 .sd-menu-horizontal .sd-menu-inline-header {
-  padding: 0 12px;
-  line-height: 30px;
+  padding: 0 var(--component-menu-menu-horizontal-item-padding-horizontal, var(--component-menu-horizontal-item-padding-horizontal, var(--spacing-6, 12px)));
+  line-height: var(--component-menu-menu-horizontal-item-height, var(--component-menu-horizontal-item-height, 30px));
 }
 .sd-menu-horizontal .sd-menu-item .sd-menu-icon-suffix .sd-icon,
 .sd-menu-horizontal .sd-menu-group-title .sd-menu-icon-suffix .sd-icon,
@@ -473,12 +506,12 @@
 .sd-menu-horizontal .sd-menu-group-title .sd-menu-icon-suffix,
 .sd-menu-horizontal .sd-menu-pop-header .sd-menu-icon-suffix,
 .sd-menu-horizontal .sd-menu-inline-header .sd-menu-icon-suffix {
-  margin-left: 6px;
+  margin-left: var(--component-menu-menu-margin-left-item-suffix-icon, var(--component-menu-margin-left-item-suffix-icon, var(--spacing-3, 6px)));
 }
 .sd-menu-horizontal .sd-menu-inner {
   display: flex;
   align-items: center;
-  padding: 14px 20px;
+  padding: var(--component-menu-menu-horizontal-padding-vertical, var(--component-menu-horizontal-padding-vertical, 14px)) var(--component-menu-menu-horizontal-padding-horizontal, var(--component-menu-horizontal-padding-horizontal, var(--spacing-8, 20px)));
 }
 .sd-menu-horizontal .sd-menu-item,
 .sd-menu-horizontal .sd-menu-pop {
@@ -488,14 +521,14 @@
 }
 .sd-menu-horizontal .sd-menu-item:not(:first-child),
 .sd-menu-horizontal .sd-menu-pop:not(:first-child) {
-  margin-left: 12px;
+  margin-left: var(--component-menu-menu-horizontal-item-gap, var(--component-menu-horizontal-item-gap, var(--spacing-6, 12px)));
 }
 .sd-menu-horizontal .sd-menu-pop::after {
   position: absolute;
-  bottom: -14px;
+  bottom: -var(--component-menu-menu-horizontal-padding-vertical, var(--component-menu-horizontal-padding-vertical, 14px));
   left: 0;
   width: 100%;
-  height: 14px;
+  height: var(--component-menu-menu-horizontal-padding-vertical, var(--component-menu-horizontal-padding-vertical, 14px));
   content: " ";
 }
 .sd-menu-overflow-wrap {
@@ -512,11 +545,11 @@
 }
 .sd-menu-selected-label {
   position: absolute;
-  right: 12px;
-  bottom: -14px;
-  left: 12px;
-  height: 3px;
-  background-color: rgb(var(--sd-primary-6));
+  right: var(--component-menu-menu-horizontal-item-padding-horizontal, var(--component-menu-horizontal-item-padding-horizontal, var(--spacing-6, 12px)));
+  bottom: -var(--component-menu-menu-horizontal-padding-vertical, var(--component-menu-horizontal-padding-vertical, 14px));
+  left: var(--component-menu-menu-horizontal-item-padding-horizontal, var(--component-menu-horizontal-item-padding-horizontal, var(--spacing-6, 12px)));
+  height: var(--component-menu-menu-height-label-item-selected, var(--component-menu-height-label-item-selected, 3px));
+  background-color: var(--component-menu-menu-color-label-item-selected, var(--component-menu-color-label-item-selected, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   animation: sd-menu-selected-item-label-enter 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-menu-pop-button {
@@ -531,19 +564,19 @@
 .sd-menu-pop-button .sd-menu-group-title,
 .sd-menu-pop-button .sd-menu-pop-header,
 .sd-menu-pop-button .sd-menu-inline-header {
-  width: 40px;
-  height: 40px;
-  margin-bottom: 16px;
-  line-height: 40px;
-  border: 1px solid transparent;
+  width: var(--component-menu-menu-pop-button-size, var(--component-menu-pop-button-size, var(--size-10, 40px)));
+  height: var(--component-menu-menu-pop-button-size, var(--component-menu-pop-button-size, var(--size-10, 40px)));
+  margin-bottom: var(--component-menu-menu-pop-button-margin-bottom, var(--component-menu-pop-button-margin-bottom, var(--spacing-7, 16px)));
+  line-height: var(--component-menu-menu-pop-button-size, var(--component-menu-pop-button-size, var(--size-10, 40px)));
+  border: 1px solid var(--component-menu-menu-pop-button-border-color, var(--component-menu-pop-button-border-color, var(--color-transparent, var(--sd-color-transparent, transparent))));
   border-radius: 50%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--component-menu-menu-pop-button-box-shadow, var(--component-menu-pop-button-box-shadow, 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08)));
 }
 .sd-menu-collapsed {
-  width: 48px;
+  width: var(--component-menu-menu-collapse-width, var(--component-menu-collapse-width, var(--size-12, 48px)));
 }
 .sd-menu-collapsed .sd-menu-inner {
-  padding: 4px 4px;
+  padding: var(--component-menu-menu-collapse-padding-vertical, var(--component-menu-collapse-padding-vertical, var(--spacing-2, 4px))) var(--component-menu-menu-collapse-padding-horizontal, var(--component-menu-collapse-padding-horizontal, var(--spacing-2, 4px)));
 }
 .sd-menu-collapsed .sd-menu-icon-suffix {
   display: none;
@@ -565,7 +598,7 @@
 }
 .sd-menu.sd-menu-in-sider-rail.sd-menu-collapsed .sd-menu-icon {
   margin-right: 0;
-  line-height: 40px;
+  line-height: var(--component-menu-menu-vertical-item-height, var(--component-menu-vertical-item-height, 40px));
 }
 .sd-menu-collapse-button {
   position: absolute;
@@ -574,9 +607,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: var(--sd-border-radius-small);
+  width: var(--component-menu-menu-width-collapse-button, var(--component-menu-width-collapse-button, var(--size-6, 24px)));
+  height: var(--component-menu-menu-height-collapse-button, var(--component-menu-height-collapse-button, var(--size-6, 24px)));
+  border-radius: var(--component-menu-menu-border-radius-collapse-button, var(--component-menu-border-radius-collapse-button, var(--sd-border-radius-small)));
   cursor: pointer;
 }
 .sd-menu-inline-content {
@@ -595,36 +628,36 @@
   color: inherit;
 }
 .sd-menu-pop-trigger.sd-trigger-position-bl {
-  margin-top: 14px;
+  margin-top: var(--component-menu-menu-horizontal-padding-vertical, var(--component-menu-horizontal-padding-vertical, 14px));
 }
 .sd-menu-pop-trigger.sd-trigger-position-bl .sd-trigger-arrow {
   z-index: 0;
-  border-top: 1px solid var(--sd-color-neutral-3);
-  border-left: 1px solid var(--sd-color-neutral-3);
+  border-top: 1px solid var(--component-menu-menu-color-border-popup, var(--component-menu-color-border-popup, var(--sd-color-neutral-3)));
+  border-left: 1px solid var(--component-menu-menu-color-border-popup, var(--component-menu-color-border-popup, var(--sd-color-neutral-3)));
 }
 .sd-menu-pop-trigger.sd-trigger-position-rt {
-  margin-left: 8px;
+  margin-left: var(--component-menu-menu-vertical-padding-horizontal, var(--component-menu-vertical-padding-horizontal, var(--spacing-4, 8px)));
 }
 .sd-menu-pop-trigger.sd-trigger-position-rt .sd-trigger-arrow {
   z-index: 0;
-  border-bottom: 1px solid var(--sd-color-neutral-3);
-  border-left: 1px solid var(--sd-color-neutral-3);
+  border-bottom: 1px solid var(--component-menu-menu-color-border-popup, var(--component-menu-color-border-popup, var(--sd-color-neutral-3)));
+  border-left: 1px solid var(--component-menu-menu-color-border-popup, var(--component-menu-color-border-popup, var(--sd-color-neutral-3)));
 }
 .sd-menu-pop-trigger.sd-menu-pop-trigger-dark .sd-trigger-arrow {
-  background-color: var(--sd-color-menu-dark-bg);
-  border-color: var(--sd-color-menu-dark-bg);
+  background-color: var(--component-menu-menu-dark-color-bg, var(--component-menu-dark-color-bg, var(--sd-color-menu-dark-bg)));
+  border-color: var(--component-menu-menu-dark-color-bg, var(--component-menu-dark-color-bg, var(--sd-color-menu-dark-bg)));
 }
 
 .sd-trigger-menu {
   position: relative;
   box-sizing: border-box;
-  max-height: 200px;
+  max-height: var(--component-dropdown-dropdown-max-height, var(--component-dropdown-max-height, var(--size-50, 200px)));
   padding: 4px 0;
   overflow: auto;
-  background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-fill-3);
-  border-radius: var(--sd-border-radius-medium);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
+  background-color: var(--component-dropdown-dropdown-color-bg, var(--component-dropdown-color-bg, var(--sd-color-bg-popup)));
+  border: 1px solid var(--component-dropdown-dropdown-color-border, var(--component-dropdown-color-border, var(--sd-color-fill-3)));
+  border-radius: var(--component-dropdown-dropdown-border-radius, var(--component-dropdown-border-radius, var(--sd-border-radius-medium)));
+  box-shadow: var(--component-dropdown-dropdown-box-shadow, var(--component-dropdown-box-shadow, 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08)));
 }
 .sd-trigger-menu-hidden {
   display: none;
@@ -634,31 +667,31 @@
   z-index: 1;
   box-sizing: border-box;
   width: 100%;
-  height: 36px;
-  padding: 0 12px;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
-  line-height: 36px;
+  height: var(--component-dropdown-dropdown-option-height, var(--component-dropdown-option-height, var(--size-9, 36px)));
+  padding: 0 var(--component-dropdown-dropdown-option-padding-horizontal, var(--component-dropdown-option-padding-horizontal, var(--spacing-6, 12px)));
+  color: var(--component-dropdown-dropdown-option-color-text-default, var(--component-dropdown-option-color-text-default, var(--sd-color-text-1)));
+  font-size: var(--component-dropdown-dropdown-font-size, var(--component-dropdown-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-dropdown-dropdown-option-height, var(--component-dropdown-option-height, var(--size-9, 36px)));
   text-align: left;
-  background-color: transparent;
+  background-color: var(--component-dropdown-dropdown-option-color-bg-default, var(--component-dropdown-option-color-bg-default, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: pointer;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .sd-trigger-menu-item.sd-trigger-menu-selected, .sd-trigger-menu-pop-header.sd-trigger-menu-selected {
-  color: var(--sd-color-text-1);
-  font-weight: 500;
-  background-color: transparent;
+  color: var(--component-dropdown-dropdown-option-color-text-selected, var(--component-dropdown-option-color-text-selected, var(--sd-color-text-1)));
+  font-weight: var(--component-dropdown-dropdown-option-font-weight-selected, var(--component-dropdown-option-font-weight-selected, var(--font-weight-500, 500)));
+  background-color: var(--component-dropdown-dropdown-option-color-bg-selected, var(--component-dropdown-option-color-bg-selected, var(--color-transparent, var(--sd-color-transparent, transparent))));
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-trigger-menu-item:hover, .sd-trigger-menu-pop-header:hover {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-fill-2);
+  color: var(--component-dropdown-dropdown-option-color-text-hover, var(--component-dropdown-option-color-text-hover, var(--sd-color-text-1)));
+  background-color: var(--component-dropdown-dropdown-option-color-bg-hover, var(--component-dropdown-option-color-bg-hover, var(--sd-color-fill-2)));
 }
 .sd-trigger-menu-item.sd-trigger-menu-disabled, .sd-trigger-menu-pop-header.sd-trigger-menu-disabled {
-  color: var(--sd-color-text-4);
-  background-color: transparent;
+  color: var(--component-dropdown-dropdown-option-color-text-disabled, var(--component-dropdown-option-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-dropdown-dropdown-option-color-bg-disabled, var(--component-dropdown-option-color-bg-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: not-allowed;
 }
 .sd-trigger-menu .sd-trigger-menu-has-icon {
@@ -684,7 +717,7 @@
   justify-content: space-between;
 }
 .sd-trigger-menu-pop-header .sd-trigger-menu-icon-suffix {
-  margin-left: 12px;
+  margin-left: var(--component-dropdown-dropdown-margin-left-suffix-icon, var(--component-dropdown-margin-left-suffix-icon, var(--spacing-6, 12px)));
 }
 .sd-trigger-menu-group:first-child .sd-trigger-menu-group-title {
   padding-top: 4px;
@@ -692,10 +725,10 @@
 .sd-trigger-menu-group-title {
   box-sizing: border-box;
   width: 100%;
-  padding: 8px 12px 0 12px;
-  color: var(--sd-color-text-3);
-  font-size: 12px;
-  line-height: 20px;
+  padding: 8px var(--component-dropdown-dropdown-group-title-padding-horizontal, var(--component-dropdown-group-title-padding-horizontal, var(--spacing-6, 12px))) 0 var(--component-dropdown-dropdown-group-title-padding-horizontal, var(--component-dropdown-group-title-padding-horizontal, var(--spacing-6, 12px)));
+  color: var(--component-dropdown-dropdown-group-title-color-text, var(--component-dropdown-group-title-color-text, var(--sd-color-text-3)));
+  font-size: var(--component-dropdown-dropdown-group-title-font-size, var(--component-dropdown-group-title-font-size, var(--font-size-body-1, 12px)));
+  line-height: var(--component-dropdown-dropdown-group-title-height, var(--component-dropdown-group-title-height, var(--size-5, 20px)));
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -704,33 +737,33 @@
   display: none;
 }
 .sd-trigger-menu-dark {
-  background-color: var(--sd-color-menu-dark-bg);
-  border-color: var(--sd-color-menu-dark-bg);
+  background-color: var(--component-menu-dropdown-dark-color-bg, var(--component-menu-dark-color-bg, var(--sd-color-menu-dark-bg)));
+  border-color: var(--component-menu-dropdown-dark-color-border, var(--component-menu-dark-color-border, var(--component-menu-dropdown-dark-color-bg, var(--component-menu-dark-color-bg, var(--sd-color-menu-dark-bg)))));
 }
 .sd-trigger-menu-dark .sd-trigger-menu-item,
 .sd-trigger-menu-dark .sd-trigger-menu-pop-header {
-  color: var(--sd-color-text-4);
-  background-color: transparent;
+  color: var(--component-menu-dropdown-dark-option-color-text-default, var(--component-menu-dark-option-color-text-default, var(--sd-color-text-4)));
+  background-color: var(--component-menu-dropdown-dark-option-color-bg-default, var(--component-menu-dark-option-color-bg-default, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-trigger-menu-dark .sd-trigger-menu-item.sd-trigger-menu-selected,
 .sd-trigger-menu-dark .sd-trigger-menu-pop-header.sd-trigger-menu-selected {
-  color: var(--sd-color-white);
-  background-color: transparent;
+  color: var(--component-menu-dropdown-dark-option-color-text-selected, var(--component-menu-dark-option-color-text-selected, var(--sd-color-white)));
+  background-color: var(--component-menu-dropdown-dark-option-color-bg-selected, var(--component-menu-dark-option-color-bg-selected, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-trigger-menu-dark .sd-trigger-menu-item.sd-trigger-menu-selected:hover,
 .sd-trigger-menu-dark .sd-trigger-menu-pop-header.sd-trigger-menu-selected:hover {
-  color: var(--sd-color-white);
+  color: var(--component-menu-dropdown-dark-option-color-text-selected, var(--component-menu-dark-option-color-text-selected, var(--sd-color-white)));
 }
 .sd-trigger-menu-dark .sd-trigger-menu-item:hover,
 .sd-trigger-menu-dark .sd-trigger-menu-pop-header:hover {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-menu-dark-hover);
+  color: var(--component-menu-dropdown-dark-option-color-text-hover, var(--component-menu-dark-option-color-text-hover, var(--sd-color-text-4)));
+  background-color: var(--component-menu-dropdown-dark-option-color-bg-hover, var(--component-menu-dark-option-color-bg-hover, var(--sd-color-menu-dark-hover)));
 }
 .sd-trigger-menu-dark .sd-trigger-menu-item.sd-trigger-menu-disabled,
 .sd-trigger-menu-dark .sd-trigger-menu-pop-header.sd-trigger-menu-disabled {
-  color: var(--sd-color-text-2);
-  background-color: transparent;
+  color: var(--component-menu-dropdown-dark-option-color-text-disabled, var(--component-menu-dark-option-color-text-disabled, var(--sd-color-text-2)));
+  background-color: var(--component-menu-dropdown-dark-option-color-bg-disabled, var(--component-menu-dark-option-color-bg-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-trigger-menu-dark .sd-trigger-menu-group-title {
-  color: var(--sd-color-text-3);
+  color: var(--component-menu-dropdown-dark-group-title-color-text, var(--component-menu-dark-group-title-color-text, var(--sd-color-text-3)));
 }

package/es/menu/style/index.scss

@@ -182,6 +182,18 @@ $token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-varia
         }
       }
 
+      // 键盘焦点与 hover 保持同一视觉（item/header 均在 base-menu 键盘导航范围内）
+      &:focus-visible {
+        color: token-var('menu-#{$theme}-color-item_hover');
+        background-color: token-var('menu-#{$theme}-color-bg-item_hover');
+        outline: none;
+
+        .#{theme.$prefix}-icon,
+        .#{$menu-prefix-cls}-icon {
+          color: token-var('menu-#{$theme}-color-icon_hover');
+        }
+      }
+
       &.#{$menu-prefix-cls}-selected {
         color: token-var('menu-#{$theme}-color-item_selected');
 
@@ -267,10 +279,6 @@ $token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-varia
   line-height: $menu-line-height;
   transition: width theme.$transition-duration-2 theme.$transition-timing-function-standard;
 
-  &:focus-visible {
-    outline: 3px solid var(string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-2'));
-  }
-
   // 设置菜单层级的缩进
   &-indent {
     display: inline-block;