@kdcloudjs/kdesign 1.1.0 → 1.1.1

package/dist/kdesign-complete.less

@@ -474,12 +474,8 @@
 }
 @avatar-custom-prefix: '--@{kd-prefix}-c-avatar';
 
-
-// sizing
-@avatar-size-x-small: var(~'@{avatar-custom-prefix}-size-x-small', 24px);
-@avatar-size-small: var(~'@{avatar-custom-prefix}-size-small', 32px);
-@avatar-size-base: var(~'@{avatar-custom-prefix}-size-base', 40px);
-@avatar-size-large: var(~'@{avatar-custom-prefix}-size-large', 60px);
+// color
+@avatar-color-background: var(~'@{avatar-custom-prefix}-color-background', #B2B2B2);
 
 // font
 @avatar-font-size-x-small: var(~'@{avatar-custom-prefix}-font-size-x-small', 14px);
@@ -487,11 +483,20 @@
 @avatar-font-size-base: var(~'@{avatar-custom-prefix}-font-size-base', 22px);
 @avatar-font-size-large: var(~'@{avatar-custom-prefix}-font-size-large', 36px);
 
+
 // radius
 @avatar-border-radius: var(~'@{avatar-custom-prefix}-border-radius', 2px);
 
-// color
-@avatar-color-background: var(~'@{avatar-custom-prefix}-color-background', #B2B2B2);
+// sizing
+@avatar-size-x-small: var(~'@{avatar-custom-prefix}-size-x-small', 24px);
+@avatar-size-small: var(~'@{avatar-custom-prefix}-size-small', 32px);
+@avatar-size-base: var(~'@{avatar-custom-prefix}-size-base', 40px);
+@avatar-size-large: var(~'@{avatar-custom-prefix}-size-large', 60px);
+
+
+
+
+
 
 
 
@@ -700,15 +705,20 @@
     background: @base-data-dropdown-color-background;
     overflow: auto;
     max-height: @base-data-dropdown-height;
+    color: @base-data-color-text;
 
     &-columns,
     &-options {
       display: flex;
       align-items: center;
 
+      &.selected {
+        color: @base-data-option-color-text-active;
+      }
+
       &-item {
         flex: 1;
-        padding: 0 12px;
+        padding: 0 @base-data-option-spacing-padding-vertical;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -752,7 +762,7 @@
     }
 
     &-columns {
-      height: 36px;
+      height: @base-data-dropdown-columns-height;
       background: @base-data-hover-bg;
     }
 
@@ -769,7 +779,7 @@
     }
 
     &-footer {
-      height: 40px;
+      height: @base-data-dropdown-footer-height;
       border-top: 1px solid @base-data-footer-color-border;
 
       &-btn {
@@ -842,6 +852,7 @@
 // color
 @base-data-border-color: var(~'@{base-data-custom-prefix}-color-border', #999);
 @base-data-hover-bg: var(~'@{base-data-custom-prefix}-color-background-hover', @color-hover);
+@base-data-color-text: var(~'@{base-data-custom-prefix}-color-text', #212121);
 @base-data-color-border-hover: var(~'@{base-data-custom-prefix}-border-color-hover', @color-theme);
 @base-data-dropdown-color-background: var(~'@{base-data-custom-prefix}-dropdown-radius-border', @color-background);
 @base-data-dropdown-icon-text-color: var(~'@{base-data-custom-prefix}-dropdown-icon-color-text', @color-warning);
@@ -851,6 +862,7 @@
 @base-data-footer-color-border: var(~'@{base-data-custom-prefix}-footer-color-border', @color-border-strong);
 @base-data-icon-text-color-hover: var(~'@{base-data-custom-prefix}-icon-color-text-hover', @color-theme);
 @base-data-footer-btn-text-color: var(~'@{base-data-custom-prefix}-footer-btn-color-text', @color-text-link);
+@base-data-option-color-text-active: var(~'@{base-data-custom-prefix}-option-color-text-active', @color-theme);
 
 // radius
 @base-data-dropdown-radius-border: var(~'@{base-data-custom-prefix}-dropdown-radius-border', @radius-border);
@@ -859,6 +871,11 @@
 @base-data-width: var(~'@{base-data-custom-prefix}-sizing-width', 230px);
 @base-data-dropdown-height: var(~'@{base-data-custom-prefix}-dropdown-sizing-height', 400px);
 @base-data-dropdown-options-height: var(~'@{base-data-custom-prefix}-dropdown-options-sizing-height', 32px);
+@base-data-dropdown-columns-height: var(~'@{base-data-custom-prefix}-dropdown-columns-height', 36px);
+@base-data-dropdown-footer-height: var(~'@{base-data-custom-prefix}-dropdown-footer-height', 40px);
+
+// spacing
+@base-data-option-spacing-padding-vertical: var(~'@{base-data-custom-prefix}-option-spacing-padding-vertical', 12px);
 
 // z-index
 @base-data-dropdown-z-index: var(~'@{base-data-custom-prefix}-dropdown-z-index', @z-index-popper);
@@ -1160,17 +1177,19 @@
 @btn-background-ghost-g-text-color: var(~'@{button-custom-prefix}-background-ghost-color-text', @color-theme);
 @btn-background-ghost-g-text-color-hover: var(~'@{button-custom-prefix}-background-ghost-color-text-hover', @color-white);
 
-// duration
-@btn-transition-fn: var(~'@{button-custom-prefix}-motion-timing-function', cubic-bezier(0.075, 0.82, 0.165, 1));
-@btn-duration-fade: var(~'@{button-custom-prefix}-motion-duration-fade', @duration-slowly);
-@btn-duration-wave: var(~'@{button-custom-prefix}-motion-duration-wave', @duration-quickly);
-
 // font
 @btn-g-font-weight: var(~'@{button-custom-prefix}-font-weight', @font-weight-light);
 @btn-small-font-size: var(~'@{button-custom-prefix}-font-size-small', @font-size-small); // 小号 文字大小
 @btn-middle-font-size: var(~'@{button-custom-prefix}-font-size-middle', @font-size-small); // 中号 文字大小
 @btn-large-font-size: var(~'@{button-custom-prefix}-font-size-large', @font-size-large); // 大号 文字大小
 
+// motion
+@btn-transition-fn: var(~'@{button-custom-prefix}-motion-timing-function', cubic-bezier(0.075, 0.82, 0.165, 1));
+@btn-duration-fade: var(~'@{button-custom-prefix}-motion-duration-fade', @duration-slowly);
+@btn-duration-wave: var(~'@{button-custom-prefix}-motion-duration-wave', @duration-quickly);
+
+
+
 // radius
 @btn-g-radius-border: var(~'@{button-custom-prefix}-radius-border', @radius-border); //圆角
 
@@ -1312,7 +1331,7 @@
 
 @card-prefix: '--@{kd-prefix}-c-card';
 
-// shadow
+
 // color
 @card-color-background: var(~'@{card-prefix}-color-background', @color-white);
 @card-actions-color: var(~'@{card-prefix}-actions-color', @color-theme);
@@ -1321,21 +1340,21 @@
 @card-title-color: var(~'@{card-prefix}-title-color', @color-text-primary);
 @card-content-color: var(~'@{card-prefix}-content-color', @color-text-secondary);
 
+// font
+@card-title-font-size: var(~'@{card-prefix}-title-font-size', @font-size-middle);
+@card-content-font-size: var(~'@{card-prefix}-content-font-size', @font-size-small);
 
 // sizing
 @card-sizing-title-height: var(~'@{card-prefix}-sizing-title-height', 40px);
+
 // spacing
 @card-spacing-padding-horizontal: var(~'@{card-prefix}-spacing-padding-horizontal', 12px);
 @card-spacing-padding-vertical: var(~'@{card-prefix}-spacing-padding-vertical', 8px);
 
-// motion
-// font
-@card-title-font-size: var(~'@{card-prefix}-title-font-size', @font-size-middle);
-@card-content-font-size: var(~'@{card-prefix}-content-font-size', @font-size-small);
 
-// radius
-// line-height
-// z-index
+
+
+
 
 
 
@@ -1488,12 +1507,9 @@
 
 @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); // 面板指示点的圆角
@@ -1503,9 +1519,14 @@
 @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); // 面板指示点的间距
+
+
 
 
 
@@ -2304,19 +2325,19 @@
 @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);
+
+
+
 
 
 
@@ -4099,13 +4120,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;
@@ -4117,29 +4137,24 @@
 
 @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);
+
 
 
 
@@ -4407,24 +4422,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);
 
 
@@ -5528,31 +5530,13 @@ textarea {
     .@{submenu-prefix-cls} {
       padding-right: 0;
     }
-
-    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
-      color: @menu-inline-color-active;
-    }
   }
 
   &-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;
@@ -5577,6 +5561,7 @@ textarea {
 
   &-collapsed {
     width: 50px;
+    min-width: auto;
   }
 
   &-light {
@@ -5587,20 +5572,6 @@ textarea {
       .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();
     }
@@ -5608,22 +5579,7 @@ textarea {
 
   &-light&-vertical {
     .@{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 {
-        color: @menu-light-color-hover;
-        background: #fff;
-        border: none;
-      }
-
-      &-active {
-        color: @menu-light-color-active;
-        background-color: @menu-light-color-background;
-        border: none !important;
-      }
+      box-shadow: 0 4px 10px 0 #f5f5f5;
     }
   }
 }
@@ -5634,10 +5590,6 @@ textarea {
   transition: color, background-color;
   transition-duration: calc(@menu-motion-duration - 0.1s);
   transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-
-  &:not(&-disabled):hover {
-    .hover();
-  }
 }
 
 .@{submenu-prefix-cls} {
@@ -5647,13 +5599,12 @@ textarea {
   transition-duration: calc(@menu-motion-duration - 0.1s);
   transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
 
-  &-hover {
-    color: @menu-sub-color-hover;
-  }
-
   &-sub {
     line-height: @menu-item-height;
     color: @menu-sub-color;
+    min-width: 130px;
+
+
   }
 
   &-thrid {
@@ -5661,7 +5612,6 @@ textarea {
     max-width: 810px;
     max-height: 492px;
     padding-left: 24px;
-    background: @menu-sub-color-background;
     flex-wrap: wrap;
     overflow-y: auto;
     cursor: default;
@@ -5709,10 +5659,6 @@ textarea {
         cursor: pointer;
         .ellipsis();
 
-        &:hover {
-          color: @menu-sub-color-active;
-        }
-
         & > span {
           .ellipsis();
         }
@@ -5729,12 +5675,157 @@ textarea {
   }
 }
 
+.@{kd-prefix}-menu-dark {
+  .@{menu-prefix-cls}-item:not(.@{menu-prefix-cls}-item-disabled) ,
+  .@{menu-prefix-cls}-submenu:not(.@{menu-prefix-cls}-submenu-hover) {
+    :hover {
+      .hover-sub()
+    }
+  }
+
+  &.@{menu-prefix-cls}-inline {
+    > ul > li.@{menu-prefix-cls}-submenu {
+
+      .@{menu-prefix-cls}-submenu-sub {
+        .base-sub();
+
+        :hover {
+          .hover-third()
+        }
+      }
+    }
+  }
+
+  .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
+    .hover-sub()
+  }
+
+  .@{menu-prefix-cls}-submenu {
+    &-sub {
+      .base-sub();
+    }
+
+    .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
+      .hover-third()
+    }
+  }
+
+  > .@{menu-prefix-cls}-submenu {
+    :hover {
+      .hover-sub();
+    }
+  }
+
+  > .@{menu-prefix-cls}-item:not(.@{menu-prefix-cls}-item-disabled), .@{menu-prefix-cls}-submenu-collapsed {
+    :hover {
+      .hover-sub()
+    }
+  }
+
+  .@{menu-prefix-cls}-submenu-sub-second {
+    > li:hover {
+      .hover-third()
+    }
+  }
+
+  .@{menu-prefix-cls}-submenu-sub-third {
+    .@{menu-prefix-cls}-item:hover {
+      .hover-third()
+    }
+  }
+}
+
+.@{kd-prefix}-menu-light {
+
+  &.@{menu-prefix-cls}-inline {
+    > ul > li.@{menu-prefix-cls}-submenu {
+
+      .@{menu-prefix-cls}-submenu-sub {
+        .base-sub-light();
+
+        :hover {
+          .hover-third-light()
+        }
+      }
+    }
+  }
+
+  .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
+    .hover-sub-light()
+  }
+
+  .@{menu-prefix-cls}-submenu {
+    &-sub {
+      .base-sub-light();
+    }
+
+    .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
+      .hover-third-light()
+    }
+  }
+
+  > .@{menu-prefix-cls}-submenu {
+    :hover {
+      .hover-sub-light();
+    }
+  }
+
+  > .@{menu-prefix-cls}-item:not(.@{menu-prefix-cls}-item-disabled), .@{menu-prefix-cls}-submenu-collapsed {
+    :hover {
+      .hover-sub-light()
+    }
+  }
+
+  .@{menu-prefix-cls}-submenu-sub-second {
+    > li:hover {
+      .hover-third-light()
+    }
+  }
+
+  .@{menu-prefix-cls}-submenu-sub-third {
+    .@{menu-prefix-cls}-item:hover {
+      .hover-third-light()
+    }
+  }
+}
+
+.hover-sub {
+  background: @menu-sub-base-color-background-hover;
+  color: @menu-sub-color-hover;
+}
+
+.base-sub {
+  background: @menu-sub-base-color-background-hover;
+  color: @menu-sub-base-color-hover;
+}
+
+.hover-third {
+  background: @menu-sub-color-background-hover !important;
+  color: @menu-sub-color-hover;
+}
+
+.hover-sub-light {
+  background: @menu-light-color-background;
+  color: @menu-light-color;
+}
+
+.base-sub-light {
+  background: @menu-light-color-background;
+  color: @menu-light-color;
+}
+
+.hover-third-light {
+  background: @menu-light-color-background-hover;
+  color: @menu-light-color;
+}
+
 
 
 // 菜单默认样式
 .menu() {
   position: relative;
   width: 100%;
+  min-width: 138px;
   height: 100%;
   background-color: @menu-color-background;
   color: @menu-sub-color;
@@ -5782,10 +5873,6 @@ textarea {
     color: @menu-color-disabled;
   }
 
-  &-active {
-    .hover();
-  }
-
   &-arrow {
     margin-left: auto;
     font-size: 16px;
@@ -5801,15 +5888,9 @@ textarea {
   }
 }
 
-.hover {
-  background-color: @menu-sub-color-background;
-  color: @menu-sub-color-hover;
-}
-
 .light-hover {
   background-color: @menu-light-color-background;
   color: @menu-light-color-hover;
-  border-right: 2px solid @menu-light-color-active;
 }
 
 .light-default {
@@ -5831,32 +5912,32 @@ textarea {
 
 @menu-prefix: '--@{kd-prefix}-c-menu';
 
-// shadow
 // color
 @menu-color-disabled: var(~'@{menu-prefix}-color-disabled', @color-disabled);
 @menu-sub-color: var(~'@{menu-prefix}-sub-color', rgba(255, 255, 255, 0.65));
 @menu-sub-color-hover: var(~'@{menu-prefix}-sub-color-hover', @color-white);
-@menu-sub-color-active: var(~'@{menu-prefix}-sub-color-active', @color-theme);
+@menu-sub-color-active: var(~'@{menu-prefix}-sub-color-active', @color-white);
 @menu-sub-color-background: var(~'@{menu-prefix}-sub-color-background', #21242d);
+@menu-sub-color-background-hover: var(~'@{menu-prefix}-sub-color-background-hover', #121319);
+@menu-sub-base-color-hover: var(~'@{menu-prefix}-sub-base-color-hover', #b2b3b7);
+@menu-sub-base-color-background-hover: var(~'@{menu-prefix}-sub-base-color-background-hover', #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', @color-text-primary);
-@menu-light-color-hover: var(~'@{menu-prefix}-light-color-hover', @color-ongoing);
-@menu-light-color-active: var(~'@{menu-prefix}-light-color-active', @color-theme);
-@menu-light-color-background: var(~'@{menu-prefix}-light-color-background', @color-background-ongoing);
+@menu-light-color-hover: var(~'@{menu-prefix}-light-color-hover', @color-text-primary);
+@menu-light-color-active: var(~'@{menu-prefix}-light-color-active', @color-text-primary);
+@menu-light-color-background: var(~'@{menu-prefix}-light-color-background', #f5f5f5);
+@menu-light-color-background-hover: var(~'@{menu-prefix}-light-color-background-hover', #eaeaea);
+
+// font
+@menu-icon-font-size: var(~'@{menu-prefix}-icon-font-size', @font-size-xx-large);
 
-// sizing
-@menu-item-height: var(~'@{menu-prefix}-item-sizing-height', 50px);
-// spacing
 // motion
 @menu-motion-duration: var(~'@{menu-prefix}-motion-duration', @duration-promptly);
 
-// font
-@menu-icon-font-size: var(~'@{menu-prefix}-icon-font-size', @font-size-xx-large);
+// sizing
+@menu-item-height: var(~'@{menu-prefix}-item-sizing-height', 50px);
 
-// radius
-// line-height
 // z-index
 @menu-z-index: var(~'@{menu-prefix}-z-index', @z-index-dialog);
 
@@ -5879,13 +5960,13 @@ textarea {
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  min-width: 280px;
-  max-width: 1000px;
-  margin: 0 auto 16px;
-  padding: 10px 20px;
+  min-width: @message-sizing-min-width;
+  max-width: @message-sizing-max-width;
+  margin: 0 auto @message-spacing-margin-bottom;
+  padding: @message-spacing-padding-horizontal @message-spacing-padding-vertical;
   color: @message-info-text-color;
   border: 1px solid @message-info-color-border;
-  border-radius: 4px;
+  border-radius: @message-border-radius;
   background-color: @message-info-color-background;
   pointer-events: all;
   animation: kdNoticeEffect calc(@transition-duration - 0.2s) @ease-out forwards;
@@ -5893,19 +5974,32 @@ textarea {
   &-content {
     display: flex;
     justify-content: space-between;
-    font-size: 12px;
+    font-size: @message-font-size;
+    line-height: @messgae-line-height;
 
     &-main{
       display: flex;
+    }
+
+    &-icon-wrapper{
+      font-size: @message-icon-font-size;
+      margin-right: @message-icon-spacing-margin-right;
+      align-self: flex-start;
+      display: inline-flex;
       align-items: center;
+    }
 
-      &>div:nth-child(1){
-        margin-right: 10px;
-      }
+    &-text {
+      max-height: @message-text-sizing-max-height;
+      overflow: auto;
     }
 
     &-close{
       cursor: pointer;
+      color: @message-close-color-text;
+      font-size: @message-close-font-size;
+      margin-left: @message-close-spacing-margin-left;
+      display: inline-flex;
 
       &:hover {
         color: @message-icon-text-color-hover;
@@ -5964,17 +6058,41 @@ textarea {
 // color
 @message-info-color-background: var(~'@{message-custom-prefix}-info-color-background', #e0efff);
 @message-info-color-border: var(~'@{message-custom-prefix}-info-color-border', #b3d5ff);
+@message-info-text-color: var(~'@{message-custom-prefix}-info-color-text', #0e5fd8);
 @message-success-color-background: var(~'@{message-custom-prefix}-success-color-background', #dcfae4);
 @message-success-color-border: var(~'@{message-custom-prefix}-success-color-border', #a1e6b5);
-@message-success-text-color: var(~'@{message-custom-prefix}-success-color-text', @color-success);
+@message-success-text-color: var(~'@{message-custom-prefix}-success-color-text', #1BA854);
 @message-warning-color-background: var(~'@{message-custom-prefix}-warning-color-background', #fff1d4);
 @message-warning-color-border: var(~'@{message-custom-prefix}-warning-color-border', #ffe0a6);
-@message-warning-text-color: var(~'@{message-custom-prefix}-warning-color-text', @color-warning);
+@message-warning-text-color: var(~'@{message-custom-prefix}-warning-color-text', #FF991C);
 @message-error-color-background: var(~'@{message-custom-prefix}-error-color-background', #ffdbe0);
 @message-error-color-border: var(~'@{message-custom-prefix}-error-color-border', #ffadb6);
-@message-error-text-color: var(~'@{message-custom-prefix}-error-color-text', @color-error);
-@message-icon-text-color-hover: var(~'@{message-custom-prefix}-icon-color-text-hover', @color-border-ongoing);
-@message-info-text-color: var(~'@{message-custom-prefix}-info-color-text', @color-text-link);
+@message-error-text-color: var(~'@{message-custom-prefix}-error-color-text', #FB2323);
+@message-close-color-text: var(~'@{message-custom-prefix}-close-color-text', #666);
+@message-icon-text-color-hover: var(~'@{message-custom-prefix}-close-color-text-hover', @color-theme-hover);
+
+// font
+@message-font-size: var(~'@{message-custom-prefix}-font-size', 14px);
+@message-icon-font-size: var(~'@{message-custom-prefix}-icon-font-size', 16px);
+@message-close-font-size: var(~'@{message-custom-prefix}-font-size', 16px);
+
+// line-height
+@messgae-line-height: var(~'@{message-custom-prefix}-line-height', 20px);
+
+// radius
+@message-border-radius: var(~'@{message-custom-prefix}-border-radius', 4px);
+
+// sizing
+@message-sizing-max-width: var(~'@{message-custom-prefix}-sizing-max-width', 1000px);
+@message-sizing-min-width: var(~'@{message-custom-prefix}-sizing-min-width', 280px);
+@message-text-sizing-max-height: var(~'@{message-custom-prefix}-text-sizing-max-height', 160px);
+
+// spacing
+@message-spacing-margin-bottom: var(~'@{message-custom-prefix}-spacing-margin-bottom', 16px);
+@message-spacing-padding-horizontal: var(~'@{message-custom-prefix}-spacing-padding-horizontal', 10px);
+@message-spacing-padding-vertical: var(~'@{message-custom-prefix}-spacing-padding-vertical', 20px);
+@message-icon-spacing-margin-right: var(~'@{message-custom-prefix}-icon-spacing-margin-right', 8px);
+@message-close-spacing-margin-left: var(~'@{message-custom-prefix}-close-spacing-margin-left', 12px);
 
 // z-index
 @message-z-index: var(~'@{message-custom-prefix}-z-index', @z-index-apex);
@@ -6938,6 +7056,10 @@ textarea {
 @pagination-border-disabled-color: var(~'@{pagination-custom-prefix}-color-border-disabled', @color-border-strong);
 @pagination-button-disabled-background-color: var(~'@{pagination-custom-prefix}-button-color-background-disabled', @color-background-contain-disabled);
 
+// font
+@pagination-font-size: var(~'@{pagination-custom-prefix}-font-size', @font-size-small);
+@pagination-icon-size: var(~'@{pagination-custom-prefix}-icon-font-size', @font-size-large);
+
 // sizing
 @pagination-size: var(~'@{pagination-custom-prefix}-sizing-square', 24px);
 @pagination-nicety-size: var(~'@{pagination-custom-prefix}-nicety-sizing-square', 30px);
@@ -6946,9 +7068,7 @@ textarea {
 // spacing
 @pagination-button-spacing: var(~'@{pagination-custom-prefix}-button-spacing', 4px);
 
-// font
-@pagination-font-size: var(~'@{pagination-custom-prefix}-font-size', @font-size-small);
-@pagination-icon-size: var(~'@{pagination-custom-prefix}-icon-font-size', @font-size-large);
+
 
 
 
@@ -7263,15 +7383,8 @@ textarea {
 
 
 @progress-prefix: '--@{kd-prefix}-c-progress';
-
-
-
 @progress-transition-fn:  cubic-bezier(0.66, 0, 0.34, 1);
 
-
-
-
-
 // color
 @progress-remaining-color: var(~'@{progress-prefix}-color-remaining', #e5e5e5);//背景色
 @progress-default-color: var(~'@{progress-prefix}-color-default', #5582f3);//进度条 默认色
@@ -7291,7 +7404,6 @@ textarea {
 @progress-border-radius: var(~'@{progress-prefix}-radius-border', 100px);//线性进度条圆角
 
 
-
 // sizing
 @progress-line-stroke-width: var(~'@{progress-prefix}-line-stroke-sizing-width', 8px);
 @progress-circle-stroke-width: var(~'@{progress-prefix}-circle-stroke-sizing-width', 4px);
@@ -7633,19 +7745,9 @@ textarea {
 
 
 
-
 @radio-prefix: '--@{kd-prefix}-c-radio';
-
-
-
-
-
-
 @radio-transition-fn:  cubic-bezier(0.075, 0.82, 0.165, 1);
 
-
-
-
 // color
 @radio-font-color: var(~'@{radio-prefix}-color-font', @color-text-primary);//单选项字体颜色
 @radio-color-theme: var(~'@{radio-prefix}-color-theme', @color-theme);//悬停/选中跟随主题色
@@ -7658,19 +7760,13 @@ textarea {
 // font
 @radio-font-size: var(~'@{radio-prefix}-font-size', @font-size-small);//单选项字体大小
 
-
-
-
 //radius
 @radio-border-width:   var(~'@{radio-prefix}-radius-border-width',1px);
 
-
-
 // sizing
 @radio-circle-size:var(~'@{radio-prefix}-square-sizing-width-height',13px);//单选图标大小
 @radio-square-height:  var(~'@{radio-prefix}-square-sizing-height',32px);//单选框 高度
 
-
 // spacing
 @radio-margin-right:   var(~'@{radio-prefix}-spacing-margin-right',8px);
 @radio-square-padding-vertical: var(~'@{radio-prefix}-square-spacing-padding-vertical',0px); //内间距 纵向
@@ -8854,7 +8950,7 @@ textarea {
 @select-g-color-border-hover: var(~'@{select-custom-prefix}-color-border-hover', @color-theme);
 @select-border-g-color-border: var(~'@{select-custom-prefix}-border-color-border', @color-border-strong);
 @select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', @color-text-third);
-@select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-ongoing);
+@select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-theme);
 @select-font-color: var(~'@{select-custom-prefix}-footer-color-text', @color-text-primary);
 @select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', @color-text-link);
 @select-g-item-text-color-disabled: var(~'@{select-custom-prefix}-item-color-text-disabled', @color-disabled);
@@ -9553,6 +9649,7 @@ textarea {
     text-align: center;
     color: @stepper-input-color;
     margin: 0 4px;
+    font-size: @stepper-input-font-size;
   }
 
   &-icon {
@@ -9673,10 +9770,8 @@ textarea {
 }
 
 
-
 @stepper-prefix: '--@{kd-prefix}-c-stepper';
 
-// shadow
 // color
 @stepper-input-color: var(~'@{stepper-prefix}-input-color', @color-text-primary);
 @stepper-icon-color: var(~'@{stepper-prefix}-icon-color', @color-text-secondary);
@@ -9684,6 +9779,14 @@ textarea {
 @stepper-color-border-strong: var(~'@{stepper-prefix}-color-border-strong', @color-border-strong);
 @stepper-embed-icon-color-background: var(~'@{stepper-prefix}-embed-icon-color-background', #f6f7f9);
 
+// font
+@stepper-input-font-size: var(~'@{stepper-prefix}-input-font-size', 12px);
+
+
+// motion
+@stepper-motion-duration: var(~'@{stepper-prefix}-motion-duration', @duration-promptly);
+
+
 // sizing
 @stepper-input-small-sizing-height: var(~'@{stepper-prefix}-input-small-sizing-height', 20px);
 @stepper-input-middle-sizing-height: var(~'@{stepper-prefix}-input-middle-sizing-height', 28px);
@@ -9692,14 +9795,6 @@ textarea {
 // spacing
 @stepper-input-spacing-padding-horizontal: var(~'@{stepper-prefix}-input-spacing-padding-horizontal', 9px);
 
-// motion
-@stepper-motion-duration: var(~'@{stepper-prefix}-motion-duration', @duration-promptly);
-
-// font
-// radius
-// line-height
-// z-index
-
 
 
 
@@ -11852,12 +11947,6 @@ template {
 @switch-prefix: '--@{kd-prefix}-c-switch';
 
 
-
-
-
-
-
-
 // color
 @switch-on-color: var(~'@{switch-prefix}-color-on', @color-theme);
 @switch-off-color: var(~'@{switch-prefix}-color-off', #999);
@@ -12863,11 +12952,7 @@ template {
 
 
 
-
-
 @timeline-prefix: '--@{kd-prefix}-c-timeline';
-
-
 @timeline-gap:  8px;
 
 // @timeline-dot-size: var(~'@{timeline-prefix}-dot-sizing',9px);
@@ -12875,10 +12960,6 @@ template {
 
 
 
-
-
-
-
 // color
 @timeline-finished-color:  var(~'@{timeline-prefix}-finished-color',@color-theme);
 @timeline-error-color:  var(~'@{timeline-prefix}-error-color',@color-error);
@@ -13289,6 +13370,10 @@ template {
     .@{tree-node-prefix-cls}-title {
       color: @tree-node-checked-text-color;
     }
+
+    .@{tree-node-prefix-cls}-icon {
+      color: @tree-node-checked-text-color;
+    }
   }
 
   &-draggabled {
@@ -13325,8 +13410,8 @@ template {
 @tree-node-disabled-color: var(~'@{tree-prefix}-node-color-disabled', @color-disabled);
 @tree-node-disabled-border-color: var(~'@{tree-prefix}-node-color-border-disabled', @color-border-disabled);
 @tree-color-theme: var(~'@{tree-prefix}-color-theme', @color-theme);
-@tree-node-checked-bg-color: var(~'@{tree-prefix}-node-color-backgroung-checked', #E3EBFF);
-@tree-node-checked-text-color: var(~'@{tree-prefix}-node-color-text-checked', @color-theme-6);
+@tree-node-checked-bg-color: var(~'@{tree-prefix}-node-color-backgroung-checked', @color-theme-3);
+@tree-node-checked-text-color: var(~'@{tree-prefix}-node-color-text-checked', @color-theme);
 @tree-node-hover-bg-color: var(~'@{tree-prefix}-node-color-backgroung-hover', @color-hover);
 @tree-node-icon-color-text: var(~'@{tree-prefix}-node-icon-color-text', #666666);