@kdcloudjs/kdesign 1.3.2 → 1.3.5

package/es/menu/menuItem.js

@@ -21,14 +21,7 @@ import { getCompProps } from '../_utils';
 import classNames from 'classnames';
 import { renderReactNodeFunction, DEFAUTL_PADDING } from './util';
 import devWarning from '../_utils/devwarning';
-
-var renderItemChildren = function renderItemChildren(children) {
-  if (typeof children === 'string') {
-    return /*#__PURE__*/React.createElement("span", null, children);
-  }
-
-  return renderReactNodeFunction(children);
-};
+export var MENU_ITEM_CONTAINER_NAME = 'menu-item-content-container';
 
 var InternalMenuItem = function InternalMenuItem(props, ref) {
   var _classNames;
@@ -63,9 +56,20 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
   var prefixCls = getPrefixCls(pkgPrefixCls, 'menu-item', customPrefixcls);
   var menuItemRef = ref || /*#__PURE__*/React.createRef();
 
+  var renderItemChildren = function renderItemChildren(children) {
+    if (typeof children === 'string') {
+      return /*#__PURE__*/React.createElement("span", {
+        className: MENU_ITEM_CONTAINER_NAME
+      }, children);
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: MENU_ITEM_CONTAINER_NAME
+    }, typeof children === 'function' ? children() : children);
+  };
+
   var preventClick = function preventClick() {
-    if (disabled || mode === 'inline') return true;
-    return false;
+    return !!(disabled || mode === 'inline');
   };
 
   var handleOnMouseEnter = function handleOnMouseEnter(e) {

package/es/menu/style/index.css

@@ -109,13 +109,37 @@
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
 .light-hover {
-  background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff));
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+}
+.light-active {
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
 }
 .light-default {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
+.light {
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #ffffff;
+}
+.light .kd-menu-submenu-hover,
+.light .kd-menu-submenu-sub {
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #ffffff;
+}
+.light .kd-menu-submenu-title:hover {
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+}
+.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+}
+.light .kd-menu-item:not(.kd-menu-item-disabled):hover {
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+}
 .kd-menu {
   position: relative;
   width: 100%;
@@ -138,50 +162,15 @@
 .kd-menu-inline .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
   color: var(--kd-c-menu-inline-color-active, var(--kd-g-color-white, #fff));
 }
+.kd-menu-collapsed {
+  width: 50px;
+  min-width: auto;
+}
 .kd-menu-vertical .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover,
 .kd-menu-vertical .kd-menu-submenu-hover {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
-.kd-menu-vertical .kd-menu-submenu {
-  padding-right: 0;
-}
-.kd-menu-vertical .kd-menu-submenu-sub {
-  background: var(--kd-c-menu-sub-color-background, #121319);
-}
-.kd-menu-vertical .kd-menu-submenu-sub .kd-menu-item:hover,
-.kd-menu-vertical .kd-menu-submenu-sub .kd-menu-item-active {
-  color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
-}
-.kd-menu-vertical .kd-menu-submenu-sub-second,
-.kd-menu-vertical .kd-menu-submenu-sub-third {
-  -webkit-animation: kdZoomTopLeftIn calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-          animation: kdZoomTopLeftIn calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-  opacity: 1;
-  visibility: visible;
-  -webkit-transition: opacity, visibility;
-  transition: opacity, visibility;
-  -webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-          transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-}
-.kd-menu-vertical .kd-menu-submenu-sub-hide {
-  opacity: 0;
-  visibility: hidden;
-  -webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-          animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-  -webkit-transition: opacity, visibility;
-  transition: opacity, visibility;
-  -webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-          transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-}
-.kd-menu-collapsed {
-  width: 50px;
-  min-width: auto;
-}
 .kd-menu-light {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
@@ -192,32 +181,28 @@
   background: #ffffff;
 }
 .kd-menu-light .kd-menu-submenu-title:hover {
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
 }
 .kd-menu-light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
-}
-.kd-menu-light .kd-menu-item-active {
-  background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff));
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
 }
 .kd-menu-light .kd-menu-item:not(.kd-menu-item-disabled):hover {
-  background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff));
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
 }
 .kd-menu-light.kd-menu-vertical .kd-menu-submenu-sub {
   -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
           box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
 .kd-menu-light.kd-menu-vertical .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
-  background: #fff;
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
   border: none;
 }
 .kd-menu-light.kd-menu-vertical .kd-menu-item-active {
   color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
-  background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff));
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
   border: none !important;
 }
 .kd-menu-item {
@@ -383,6 +368,7 @@
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
 .kd-menu-submenu-hover {
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
 .kd-menu-submenu-sub {
@@ -488,3 +474,103 @@
 .kd-menu-dark .kd-menu-submenu-sub-third {
   background: var(--kd-c-menu-sub-color-background, #121319);
 }
+.kd-menu-light .kd-menu-submenu-active,
+.kd-menu-light .kd-menu-item-active {
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+}
+.kd-menu-popper .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover,
+.kd-menu-popper .kd-menu-submenu-hover {
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-popper.hidden {
+  opacity: 0;
+  visibility: hidden;
+  display: none;
+  -webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  -webkit-transition: opacity, visibility;
+  transition: opacity, visibility;
+  -webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+          transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-menu-popper .kd-menu-submenu {
+  padding-right: 0;
+}
+.kd-menu-popper .kd-menu-submenu-sub {
+  background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
+}
+.kd-menu-popper .kd-menu-submenu-sub .kd-menu-item:hover,
+.kd-menu-popper .kd-menu-submenu-sub .kd-menu-item-active {
+  color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
+}
+.kd-menu-popper .kd-menu-submenu-sub-second,
+.kd-menu-popper .kd-menu-submenu-sub-third {
+  -webkit-animation: kdZoomTopLeftIn calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: kdZoomTopLeftIn calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  opacity: 1;
+  visibility: visible;
+  -webkit-transition: opacity, visibility;
+  transition: opacity, visibility;
+  -webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+          transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-menu-popper .kd-menu-submenu-sub-hide {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  -webkit-transition: opacity, visibility;
+  transition: opacity, visibility;
+  -webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+          transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-menu-popper.light {
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #ffffff;
+}
+.kd-menu-popper.light .kd-menu-submenu-hover,
+.kd-menu-popper.light .kd-menu-submenu-sub {
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #ffffff;
+}
+.kd-menu-popper.light .kd-menu-submenu-title:hover {
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+}
+.kd-menu-popper.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+}
+.kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):hover {
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+}
+.kd-menu-popper.light .kd-menu-submenu-sub {
+  -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+.kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover,
+.kd-menu-popper.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+  border: none;
+}
+.kd-menu-popper.light .kd-menu-item-hover,
+.kd-menu-popper.light .kd-menu-submenu-hover {
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+  border: none;
+}
+.kd-menu-popper.light .kd-menu-item-active,
+.kd-menu-popper.light .kd-menu-submenu-active {
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  border: none;
+}

package/es/menu/style/index.less

@@ -4,6 +4,9 @@
 
 @menu-prefix-cls: ~'@{kd-prefix}-menu';
 @menuitem-prefix-cls: ~'@{menu-prefix-cls}-item';
+@menu-dark-prefix-cls: ~'@{menu-prefix-cls}-dark';
+@menu-light-prefix-cls: ~'@{menu-prefix-cls}-light';
+@menu-popper-prefix-cls: ~'@{menu-prefix-cls}-popper';
 @submenu-prefix-cls: ~'@{menu-prefix-cls}-submenu';
 
 .@{menu-prefix-cls} {
@@ -27,77 +30,20 @@
     }
   }
 
+  &-collapsed {
+    width: 50px;
+    min-width: auto;
+  }
+
   &-vertical {
     .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
     .@{submenu-prefix-cls}-hover {
       .hover();
     }
-
-    .@{submenu-prefix-cls} {
-      padding-right: 0;
-
-      &-sub {
-        background: @menu-sub-color-background;
-
-        .@{menuitem-prefix-cls} {
-          &:hover,
-          &-active {
-            color: @menu-sub-color-active;
-          }
-        }
-
-        &-second,
-        &-third {
-          animation: kdZoomTopLeftIn calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
-          opacity: 1;
-          visibility: visible;
-          transition: opacity, visibility;
-          transition-duration: calc(@menu-motion-duration - 0.1s);
-          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-        }
-
-        &-hide {
-          opacity: 0;
-          visibility: hidden;
-          animation: kdZoomTopLeftOut calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
-          transition: opacity, visibility;
-          transition-duration: calc(@menu-motion-duration - 0.1s);
-          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-        }
-      }
-    }
-  }
-
-  &-collapsed {
-    width: 50px;
-    min-width: auto;
   }
 
   &-light {
-    .light-default;
-
-    .@{submenu-prefix-cls}-hover,
-    .@{submenu-prefix-cls}-sub {
-      .light-default;
-    }
-
-    .@{submenu-prefix-cls}-title:hover {
-      color: @menu-light-color-hover;
-    }
-
-    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
-      .light-default;
-    }
-
-    .@{menuitem-prefix-cls} {
-      &-active {
-        .light-hover();
-      }
-    }
-
-    .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):hover {
-      .light-hover();
-    }
+    .light()
   }
 
   &-light&-vertical {
@@ -108,14 +54,13 @@
 
     .@{menuitem-prefix-cls} {
       &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
-        color: @menu-light-color-hover;
-        background: #fff;
+        .light-hover();
         border: none;
       }
 
       &-active {
         color: @menu-light-color-active;
-        background-color: @menu-light-color-background;
+        background-color: @menu-light-color-background-active;
         border: none !important;
       }
     }
@@ -142,7 +87,7 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
 
   &-hover {
-    color: @menu-sub-color-hover;
+    .hover();
   }
 
   &-sub {
@@ -223,15 +168,102 @@
   }
 }
 
-.@{menu-prefix-cls}-dark {
+.@{menu-dark-prefix-cls} {
   .@{submenu-prefix-cls}-sub {
     background: @menu-sub-inline-color-background;
   }
 
-  .@{submenu-prefix-cls}-sub-second,.@{submenu-prefix-cls}-sub-third  {
+  .@{submenu-prefix-cls}-sub-second, .@{submenu-prefix-cls}-sub-third {
     background: @menu-sub-color-background;
   }
 }
 
+.@{menu-light-prefix-cls} {
+  .@{submenu-prefix-cls}-active,.@{menuitem-prefix-cls}-active {
+    .light-active()
+  }
+}
+
+.@{menu-popper-prefix-cls} {
+  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
+  .@{submenu-prefix-cls}-hover {
+    .hover();
+  }
+
+  &.hidden {
+    opacity: 0;
+    visibility: hidden;
+    display: none;
+    animation: kdZoomTopLeftOut calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
+    transition: opacity, visibility;
+    transition-duration: calc(@menu-motion-duration - 0.1s);
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+  }
+
+  .@{submenu-prefix-cls} {
+    padding-right: 0;
+
+    &-sub {
+      background: @menu-sub-inline-color-background;
+
+      .@{menuitem-prefix-cls} {
+        &:hover,
+        &-active {
+          color: @menu-sub-color-active;
+        }
+      }
+
+      &-second,
+      &-third {
+        animation: kdZoomTopLeftIn calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
+        opacity: 1;
+        visibility: visible;
+        transition: opacity, visibility;
+        transition-duration: calc(@menu-motion-duration - 0.1s);
+        transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+      }
+
+      &-hide {
+        opacity: 0;
+        visibility: hidden;
+        animation: kdZoomTopLeftOut calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
+        transition: opacity, visibility;
+        transition-duration: calc(@menu-motion-duration - 0.1s);
+        transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+      }
+    }
+  }
+
+  &.light {
+    .light();
+
+    .@{submenu-prefix-cls}-sub {
+      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    }
+
+    .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
+    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
+      .light-hover();
+      border: none;
+    }
+
+    .@{menuitem-prefix-cls}-hover,.@{submenu-prefix-cls}-hover {
+      .light-hover();
+      border: none;
+    }
+
+    .@{menuitem-prefix-cls}-active,.@{submenu-prefix-cls}-active {
+      .light-active();
+      border: none;
+    }
+  }
+}
+
+
+
+
+
+
 
 

package/es/menu/style/mixin.less

@@ -1,5 +1,10 @@
 @import './token.less';
 
+@menu-prefix-cls: ~'@{kd-prefix}-menu';
+@menuitem-prefix-cls: ~'@{menu-prefix-cls}-item';
+@menu-vertical-prefix-cls: ~'@{menu-prefix-cls}-vertical';
+@submenu-prefix-cls: ~'@{menu-prefix-cls}-submenu';
+
 // 菜单默认样式
 .menu() {
   position: relative;
@@ -77,10 +82,15 @@
 }
 
 .light-hover {
-  background-color: @menu-light-color-background;
+  background-color: @menu-light-color-background-hover;
   color: @menu-light-color-hover;
 }
 
+.light-active {
+  background-color: @menu-light-color-background-active;
+  color: @menu-light-color-active;
+}
+
 .light-default {
   color: @menu-light-color;
   background: #ffffff;
@@ -95,3 +105,25 @@
     .ellipsis();
   }
 }
+
+
+.light {
+  .light-default();
+
+  .@{submenu-prefix-cls}-hover,
+  .@{submenu-prefix-cls}-sub {
+    .light-default();
+  }
+
+  .@{submenu-prefix-cls}-title:hover {
+    color: @menu-light-color-hover;
+  }
+
+  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
+    .light-hover();
+  }
+
+  .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):hover {
+    .light-hover();
+  }
+}

package/es/menu/style/token.less

@@ -11,10 +11,12 @@
 @menu-sub-inline-color-background: var(~'@{menu-prefix}-sub-inline-color-background', #1f212b);
 @menu-inline-color-active: var(~'@{menu-prefix}-inline-color-active', @color-white);
 @menu-color-background: var(~'@{menu-prefix}-color-background', #343848);
+
 @menu-light-color: var(~'@{menu-prefix}-light-color-text', @color-text-primary);
-@menu-light-color-hover: var(~'@{menu-prefix}-light-color-text-hover', @color-ongoing);
+@menu-light-color-hover: var(~'@{menu-prefix}-light-color-text-hover', @color-text-primary);
 @menu-light-color-active: var(~'@{menu-prefix}-light-color-text-active', @color-theme);
-@menu-light-color-background: var(~'@{menu-prefix}-light-color-background', @color-background-ongoing);
+@menu-light-color-background-hover: var(~'@{menu-prefix}-light-color-background-hover', #f5f5f5);
+@menu-light-color-background-active: var(~'@{menu-prefix}-light-color-background-active', #e3ebff);
 
 // font
 @menu-icon-font-size: var(~'@{menu-prefix}-icon-font-size', @font-size-xx-large);

package/es/menu/subMenu.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export interface MenuSubMenuProps extends React.HTMLAttributes<HTMLElement> {
     disabled?: boolean;
     icon?: React.ReactNode;