@kdcloudjs/kdesign 1.1.0 → 1.1.1

package/lib/carousel/style/index.css

@@ -204,7 +204,7 @@
   top: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
-  left: var(--kd-c-carousel-spacing-margin-left, 15px);
+  left: var(--kd-c-carousel-spacing-margin-left, 12px);
 }
 .kd-carousel-slidebar-left > li {
   margin: var(--kd-c-carousel-dots-spacing-margin, 4px) 0;
@@ -222,7 +222,7 @@
   top: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
-  right: var(--kd-c-carousel-spacing-margin-right, 15px);
+  right: var(--kd-c-carousel-spacing-margin-right, 12px);
 }
 .kd-carousel-slidebar-right > li {
   margin: var(--kd-c-carousel-dots-spacing-margin, 4px) 0;
@@ -240,7 +240,7 @@
   left: 50%;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
-  bottom: var(--kd-c-carousel-spacing-margin-bottom, 15px);
+  bottom: var(--kd-c-carousel-spacing-margin-bottom, 12px);
 }
 .kd-carousel-slidebar-bottom > li {
   margin: 0 var(--kd-c-carousel-dots-spacing-margin, 4px);
@@ -258,7 +258,7 @@
   left: 50%;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
-  top: var(--kd-c-carousel-spacing-margin-top, 15px);
+  top: var(--kd-c-carousel-spacing-margin-top, 12px);
 }
 .kd-carousel-slidebar-top > li {
   margin: 0 var(--kd-c-carousel-dots-spacing-margin, 4px);

package/lib/carousel/style/token.less

@@ -1,11 +1,8 @@
 @carousel-prefix: '--@{kd-prefix}-c-carousel';
 
-// spacing
-@carousel-dots-margin-top: var(~'@{carousel-prefix}-spacing-margin-top', 15px); // 面板指示点到边界的边距
-@carousel-dots-margin-bottom: var(~'@{carousel-prefix}-spacing-margin-bottom', 15px); // 面板指示点到边界的边距
-@carousel-dots-margin-left: var(~'@{carousel-prefix}-spacing-margin-left', 15px); // 面板指示点到边界的边距
-@carousel-dots-margin-right: var(~'@{carousel-prefix}-spacing-margin-right', 15px); // 面板指示点到边界的边距
-@carousel-dots-marigin: var(~'@{carousel-prefix}-dots-spacing-margin', 4px); // 面板指示点的间距
+// color
+@carousel-dots-color-background: var(~'@{carousel-prefix}-dots-color-background', #D8D8D8); // 面板指示点的背景色
+@carousel-dots-color-background-active: var(~'@{carousel-prefix}-dots-color-hover', #666666); // 面板指示点的背景色
 
 // radius
 @carousel-dots-boder-radius: var(~'@{carousel-prefix}-dots-border-radius', 2px); // 面板指示点的圆角
@@ -15,6 +12,10 @@
 @carousel-dots-width: var(~'@{carousel-prefix}-dots-sizing-width', 12px); // 面板指示点的宽度
 @carousel-dots-height: var(~'@{carousel-prefix}-dots-sizing-height', 4px); // 面板指示点的高度
 
-// color
-@carousel-dots-color-background: var(~'@{carousel-prefix}-dots-color-background', #D8D8D8); // 面板指示点的背景色
-@carousel-dots-color-background-active: var(~'@{carousel-prefix}-dots-color-hover', #666666); // 面板指示点的背景色
+// spacing
+@carousel-dots-margin-top: var(~'@{carousel-prefix}-spacing-margin-top', 12px); // 面板指示点到边界的边距
+@carousel-dots-margin-bottom: var(~'@{carousel-prefix}-spacing-margin-bottom', 12px); // 面板指示点到边界的边距
+@carousel-dots-margin-left: var(~'@{carousel-prefix}-spacing-margin-left', 12px); // 面板指示点到边界的边距
+@carousel-dots-margin-right: var(~'@{carousel-prefix}-spacing-margin-right', 12px); // 面板指示点到边界的边距
+@carousel-dots-marigin: var(~'@{carousel-prefix}-dots-spacing-margin', 4px); // 面板指示点的间距
+

package/lib/city-picker/style/token.less

@@ -10,16 +10,16 @@
 @city-picker-background-color: var(~'@{city-picker-prefix}-color-background', @color-background-contain);
 @city-picker-background-hover-color: var(~'@{city-picker-prefix}-color-background-hover', @color-hover);
 
-// sizing
-@city-picker-panel-sizing-width: var(~'@{city-picker-prefix}-panel-sizing-width', 460px);
-@city-picker-panel-sizing-height: var(~'@{city-picker-prefix}-panel-sizing-height', 373px);
-// spacing
-// motion
 
 // font
 @city-picker-panel-font-size: var(~'@{city-picker-prefix}-panel-font-size', 12px);
 
 // radius
 @city-picker-panel-radius-border: var(~'@{city-picker-prefix}-panel-radius-border', @radius-border);
-// line-height
-// z-index
+
+// sizing
+@city-picker-panel-sizing-width: var(~'@{city-picker-prefix}-panel-sizing-width', 460px);
+@city-picker-panel-sizing-height: var(~'@{city-picker-prefix}-panel-sizing-height', 373px);
+
+
+

package/lib/form/Field.js

@@ -159,7 +159,9 @@ var Field = function Field(props) {
   });
   var mergedRequired = required || !!rulesRequired;
 
-  if (rules.length === 0 && required) {
+  if (Array.isArray(rules) && !rules.some(function (rule) {
+    return Object.prototype.hasOwnProperty.call(rule, 'required');
+  }) && required) {
     rules.push({
       required: true
     });
@@ -167,7 +169,7 @@ var Field = function Field(props) {
 
   var mergeRules = rules;
 
-  if (Array.isArray(mergeRules) && mergeRules.length) {
+  if (mergeRules.length) {
     mergeRules = (0, _map.default)(rules).call(rules, function (r) {
       if (typeof r === 'function') {
         return r(fieldContext);

package/lib/form/style/index.css

@@ -174,13 +174,12 @@
 }
 .kd-form-field-wrapper-message {
   position: absolute;
-  left: 0;
+  left: -7px;
   right: 0;
   padding: var(--kd-c-form-field-message-spacing-padding-horizontal, 2px) var(--kd-c-form-field-message-spacing-padding-vertical, 8px);
   font-size: var(--kd-c-form-field-message-font-size, 12px);
   line-height: var(--kd-c-form-field-message-line-height, 18px);
   color: var(--kd-c-form-error-color, var(--kd-g-color-error, #fb2323));
-  background-color: var(--kd-c-form-error-color-background, var(--kd-g-color-background-error, #fff2f4));
   word-break: break-word;
   overflow: hidden;
   white-space: nowrap;

package/lib/form/style/index.less

@@ -72,13 +72,12 @@
   position: relative;
   &-message {
     position: absolute;
-    left: 0;
+    left: -7px;
     right: 0;
     padding: @form-field-message-spacing-padding-horizontal @form-field-message-spacing-padding-vertical;
     font-size: @form-field-message-font-size;
     line-height: @form-field-message-line-height;
     color: @form-error-color;
-    background-color: @form-error-color-background;
     word-break: break-word;
     overflow: hidden;
     white-space: nowrap;

package/lib/form/style/token.less

@@ -2,26 +2,21 @@
 
 @form-prefix: '--@{kd-prefix}-c-form';
 
-// shadow
 // color
 @form-field-color: var(~'@{form-prefix}-field-color', @color-text-secondary);
 @form-error-color: var(~'@{form-prefix}-error-color', @color-error);
-@form-error-color-background: var(~'@{form-prefix}-error-color-background', @color-background-error);
 
-// sizing
-// spacing
-@form-field-spacing-margin-right: var(~'@{form-prefix}-field-spacing-margin-right', 30px);
-@form-field-spacing-margin-bottom: var(~'@{form-prefix}-field-spacing-margin-bottom', 22px);
-@form-field-message-spacing-padding-horizontal: var(~'@{form-prefix}-field-message-spacing-padding-horizontal', 2px);
-@form-field-message-spacing-padding-vertical: var(~'@{form-prefix}-field-message-spacing-padding-vertical', 8px);
-
-// motion
 // font
 @form-field-label-font-size: var(~'@{form-prefix}-field-label-font-size',12px);
 @form-field-message-font-size: var(~'@{form-prefix}-field-message-font-size', 12px);
 
-// radius
 // line-height
 @form-field-label-line-height: var(~'@{form-prefix}-field-label-line-height', 18px);
 @form-field-message-line-height: var(~'@{form-prefix}-field-message-line-height', 18px);
-// z-index
+
+// spacing
+@form-field-spacing-margin-right: var(~'@{form-prefix}-field-spacing-margin-right', 30px);
+@form-field-spacing-margin-bottom: var(~'@{form-prefix}-field-spacing-margin-bottom', 22px);
+@form-field-message-spacing-padding-horizontal: var(~'@{form-prefix}-field-message-spacing-padding-horizontal', 2px);
+@form-field-message-spacing-padding-vertical: var(~'@{form-prefix}-field-message-spacing-padding-vertical', 8px);
+

package/lib/image/style/token.less

@@ -2,24 +2,11 @@
 
 @image-prefix: '--@{kd-prefix}-c-image';
 
-
-
-
-
-
-
 @image-transition-duration: var(~'@{image-prefix}-transition-duration',@transition-duration);
-
 @image-motion-ease-out: var(~'@{image-prefix}-motion-ease-out',@motion-ease-out);
 @image-motion-ease-in: var(~'@{image-prefix}-motion-ease-out',@motion-ease-in);
-
-
-
 @image-z-index-masker: var(~'@{image-prefix}-z-index-masker',@z-index-masker);
-
 @image-border-radius: var(~'@{image-prefix}-radius-border',@radius-border);
-
-
 @image-action-transition: var(~'@{image-prefix}-action-transition',@duration-quickly);
 
 

package/lib/menu/menu.js

@@ -178,7 +178,7 @@ var Menu = function Menu(props) {
     onMouseEnter: handleMouseEnterMenu
   };
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
-    className: (0, _classnames.default)(prefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-inline"), mode === 'inline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-vertical"), mode !== 'inline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-collapsed"), true), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, theme === 'light' ? 'light' : 'dark'), true), _classNames)),
+    className: (0, _classnames.default)(prefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-inline"), mode === 'inline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-vertical"), mode !== 'inline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-collapsed"), collapsed), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, theme === 'light' ? 'light' : 'dark'), true), _classNames)),
     role: "menu",
     style: style
   }, mouseEvent), children && renderMenu(), additionalTools);

package/lib/menu/style/index.css

@@ -104,14 +104,9 @@
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
-.hover {
-  background-color: var(--kd-c-menu-sub-color-background, #21242d);
-  color: var(--kd-c-menu-sub-color-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-hover, var(--kd-g-color-ongoing, #276ff5));
-  border-right: 2px solid var(--kd-c-menu-light-color-active, var(--kd-g-color-theme, #5582f3));
+  background-color: var(--kd-c-menu-light-color-background, #f5f5f5);
+  color: var(--kd-c-menu-light-color-hover, var(--kd-g-color-text-primary, #212121));
 }
 .light-default {
   color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
@@ -120,6 +115,7 @@
 .kd-menu {
   position: relative;
   width: 100%;
+  min-width: 138px;
   height: 100%;
   background-color: var(--kd-c-menu-color-background, #343848);
   color: var(--kd-c-menu-sub-color, rgba(255, 255, 255, 0.65));
@@ -135,24 +131,9 @@
 .kd-menu-inline .kd-menu-submenu {
   padding-right: 0;
 }
-.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-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, #21242d);
-  color: var(--kd-c-menu-sub-color-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, #21242d);
-}
-.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-active, var(--kd-g-color-theme, #5582f3));
-}
 .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;
@@ -180,6 +161,7 @@
 }
 .kd-menu-collapsed {
   width: 50px;
+  min-width: auto;
 }
 .kd-menu-light {
   color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
@@ -190,36 +172,13 @@
   color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
-.kd-menu-light .kd-menu-submenu-title:hover {
-  color: var(--kd-c-menu-light-color-hover, var(--kd-g-color-ongoing, #276ff5));
-}
-.kd-menu-light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
-  color: var(--kd-c-menu-light-color, 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-hover, var(--kd-g-color-ongoing, #276ff5));
-  border-right: 2px solid var(--kd-c-menu-light-color-active, var(--kd-g-color-theme, #5582f3));
-}
 .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-hover, var(--kd-g-color-ongoing, #276ff5));
-  border-right: 2px solid var(--kd-c-menu-light-color-active, var(--kd-g-color-theme, #5582f3));
+  background-color: var(--kd-c-menu-light-color-background, #f5f5f5);
+  color: var(--kd-c-menu-light-color-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-hover, var(--kd-g-color-ongoing, #276ff5));
-  background: #fff;
-  border: none;
-}
-.kd-menu-light.kd-menu-vertical .kd-menu-item-active {
-  color: var(--kd-c-menu-light-color-active, var(--kd-g-color-theme, #5582f3));
-  background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff));
-  border: none !important;
+  -webkit-box-shadow: 0 4px 10px 0 #f5f5f5;
+          box-shadow: 0 4px 10px 0 #f5f5f5;
 }
 .kd-menu-item {
   position: relative;
@@ -276,10 +235,6 @@
   cursor: not-allowed;
   color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
-.kd-menu-item-active {
-  background-color: var(--kd-c-menu-sub-color-background, #21242d);
-  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
-}
 .kd-menu-item-arrow {
   margin-left: auto;
   font-size: 16px;
@@ -300,10 +255,6 @@
   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);
   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-item:not(.kd-menu-item-disabled):hover {
-  background-color: var(--kd-c-menu-sub-color-background, #21242d);
-  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
-}
 .kd-menu-submenu {
   position: static;
   cursor: pointer;
@@ -359,10 +310,6 @@
   cursor: not-allowed;
   color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
-.kd-menu-submenu-active {
-  background-color: var(--kd-c-menu-sub-color-background, #21242d);
-  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
-}
 .kd-menu-submenu-arrow {
   margin-left: auto;
   font-size: 16px;
@@ -383,12 +330,10 @@
   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);
   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 {
-  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
-}
 .kd-menu-submenu-sub {
   line-height: var(--kd-c-menu-item-sizing-height, 50px);
   color: var(--kd-c-menu-sub-color, rgba(255, 255, 255, 0.65));
+  min-width: 130px;
 }
 .kd-menu-submenu-thrid {
   display: -webkit-box;
@@ -397,7 +342,6 @@
   max-width: 810px;
   max-height: 492px;
   padding-left: 24px;
-  background: var(--kd-c-menu-sub-color-background, #21242d);
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   overflow-y: auto;
@@ -468,9 +412,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.kd-menu-submenu-thrid-list > li:hover {
-  color: var(--kd-c-menu-sub-color-active, var(--kd-g-color-theme, #5582f3));
-}
 .kd-menu-submenu-thrid-list > li > span {
   white-space: nowrap;
   overflow: hidden;
@@ -480,5 +421,108 @@
   height: auto;
 }
 .kd-menu-submenu-thrid-list > .kd-menu-item-active {
-  color: var(--kd-c-menu-sub-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-menu-sub-color-active, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark .kd-menu-item:not(.kd-menu-item-disabled) :hover,
+.kd-menu-dark .kd-menu-submenu:not(.kd-menu-submenu-hover) :hover {
+  background: var(--kd-c-menu-sub-base-color-background-hover, #1f212b);
+  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark.kd-menu-inline > ul > li.kd-menu-submenu .kd-menu-submenu-sub {
+  background: var(--kd-c-menu-sub-base-color-background-hover, #1f212b);
+  color: var(--kd-c-menu-sub-base-color-hover, #b2b3b7);
+}
+.kd-menu-dark.kd-menu-inline > ul > li.kd-menu-submenu .kd-menu-submenu-sub :hover {
+  background: var(--kd-c-menu-sub-color-background-hover, #121319) !important;
+  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark .kd-menu-item.kd-menu-item-active {
+  background: var(--kd-c-menu-sub-base-color-background-hover, #1f212b);
+  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark .kd-menu-submenu-sub {
+  background: var(--kd-c-menu-sub-base-color-background-hover, #1f212b);
+  color: var(--kd-c-menu-sub-base-color-hover, #b2b3b7);
+}
+.kd-menu-dark .kd-menu-submenu .kd-menu-item.kd-menu-item-active {
+  background: var(--kd-c-menu-sub-color-background-hover, #121319) !important;
+  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark > .kd-menu-submenu :hover {
+  background: var(--kd-c-menu-sub-base-color-background-hover, #1f212b);
+  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark > .kd-menu-item:not(.kd-menu-item-disabled) :hover,
+.kd-menu-dark .kd-menu-submenu-collapsed :hover {
+  background: var(--kd-c-menu-sub-base-color-background-hover, #1f212b);
+  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark .kd-menu-submenu-sub-second > li:hover {
+  background: var(--kd-c-menu-sub-color-background-hover, #121319) !important;
+  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark .kd-menu-submenu-sub-third .kd-menu-item:hover {
+  background: var(--kd-c-menu-sub-color-background-hover, #121319) !important;
+  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-light.kd-menu-inline > ul > li.kd-menu-submenu .kd-menu-submenu-sub {
+  background: var(--kd-c-menu-light-color-background, #f5f5f5);
+  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+}
+.kd-menu-light.kd-menu-inline > ul > li.kd-menu-submenu .kd-menu-submenu-sub :hover {
+  background: var(--kd-c-menu-light-color-background-hover, #eaeaea);
+  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+}
+.kd-menu-light .kd-menu-item.kd-menu-item-active {
+  background: var(--kd-c-menu-light-color-background, #f5f5f5);
+  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+}
+.kd-menu-light .kd-menu-submenu-sub {
+  background: var(--kd-c-menu-light-color-background, #f5f5f5);
+  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+}
+.kd-menu-light .kd-menu-submenu .kd-menu-item.kd-menu-item-active {
+  background: var(--kd-c-menu-light-color-background-hover, #eaeaea);
+  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+}
+.kd-menu-light > .kd-menu-submenu :hover {
+  background: var(--kd-c-menu-light-color-background, #f5f5f5);
+  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+}
+.kd-menu-light > .kd-menu-item:not(.kd-menu-item-disabled) :hover,
+.kd-menu-light .kd-menu-submenu-collapsed :hover {
+  background: var(--kd-c-menu-light-color-background, #f5f5f5);
+  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+}
+.kd-menu-light .kd-menu-submenu-sub-second > li:hover {
+  background: var(--kd-c-menu-light-color-background-hover, #eaeaea);
+  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+}
+.kd-menu-light .kd-menu-submenu-sub-third .kd-menu-item:hover {
+  background: var(--kd-c-menu-light-color-background-hover, #eaeaea);
+  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+}
+.hover-sub {
+  background: var(--kd-c-menu-sub-base-color-background-hover, #1f212b);
+  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+}
+.base-sub {
+  background: var(--kd-c-menu-sub-base-color-background-hover, #1f212b);
+  color: var(--kd-c-menu-sub-base-color-hover, #b2b3b7);
+}
+.hover-third {
+  background: var(--kd-c-menu-sub-color-background-hover, #121319) !important;
+  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+}
+.hover-sub-light {
+  background: var(--kd-c-menu-light-color-background, #f5f5f5);
+  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+}
+.base-sub-light {
+  background: var(--kd-c-menu-light-color-background, #f5f5f5);
+  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+}
+.hover-third-light {
+  background: var(--kd-c-menu-light-color-background-hover, #eaeaea);
+  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
 }