@kdcloudjs/kdesign 1.1.0 → 1.1.3

package/es/input/style/index.css

@@ -117,7 +117,7 @@ textarea {
   min-width: 0;
   border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
   border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
-  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-input-color-text, var(--kd-g-color-text-primary, #212121));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
@@ -131,13 +131,13 @@ textarea {
   transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-input::-webkit-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input::-moz-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input::-ms-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input:focus {
   -webkit-box-shadow: none;
@@ -161,7 +161,7 @@ textarea {
   min-width: 0;
   border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
   border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
-  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-input-color-text, var(--kd-g-color-text-primary, #212121));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
@@ -178,13 +178,13 @@ textarea {
   vertical-align: bottom;
 }
 .kd-input-textarea::-webkit-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-textarea::-moz-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-textarea::-ms-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-textarea:focus {
   -webkit-box-shadow: none;
@@ -203,8 +203,8 @@ textarea {
   right: 0;
   top: calc(100% + 1px);
   z-index: 1;
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999));
-  font-size: var(--kd-c-input-small-font-size, var(--kd-g-font-size-small, 12px));
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc));
+  font-size: var(--kd-c-input-font-size-small, var(--kd-g-font-size-small, 12px));
 }
 .kd-input-no-resize {
   resize: none;
@@ -225,37 +225,38 @@ textarea {
 .kd-input-disabled {
   background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
   cursor: not-allowed;
 }
 .kd-input-underline.kd-input-disabled {
+  color: var(--kd-c-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
-  border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+  border-color: var(--kd-c-input-underline-color-border-disabled, var(--kd-g-color-border-weak, #e5e5e5));
 }
 .kd-input-size-small {
-  height: var(--kd-c-input-small-sizing-height, 20px);
-  line-height: calc(var(--kd-c-input-small-sizing-height, 20px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
-  font-size: var(--kd-c-input-small-font-size, var(--kd-g-font-size-small, 12px));
-  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-small-spacing-padding-horizontal, 9px);
+  height: var(--kd-c-input-sizing-height-small, 20px);
+  line-height: calc(var(--kd-c-input-sizing-height-small, 20px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-font-size-small, var(--kd-g-font-size-small, 12px));
+  padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
 }
 .kd-input-size-middle {
-  height: var(--kd-c-input-middle-sizing-height, 30px);
-  line-height: calc(var(--kd-c-input-middle-sizing-height, 30px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
-  font-size: var(--kd-c-input-middle-font-size, var(--kd-g-font-size-middle, 14px));
-  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-small-spacing-padding-horizontal, 9px);
+  height: var(--kd-c-input-sizing-height-middle, 30px);
+  line-height: calc(var(--kd-c-input-sizing-height-middle, 30px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-font-size-middle, var(--kd-g-font-size-middle, 14px));
+  padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
 }
 .kd-input-size-large {
-  height: var(--kd-c-input-large-sizing-height, 36px);
-  line-height: calc(var(--kd-c-input-large-sizing-height, 36px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
-  font-size: var(--kd-c-input-large-font-size, var(--kd-g-font-size-large, 16px));
-  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-small-spacing-padding-horizontal, 9px);
+  height: var(--kd-c-input-sizing-height-large, 36px);
+  line-height: calc(var(--kd-c-input-sizing-height-large, 36px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-font-size-large, var(--kd-g-font-size-large, 16px));
+  padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
 }
 .kd-input-wrapper {
   width: 100%;
   min-width: 0;
   border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
   border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
-  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-input-color-text, var(--kd-g-color-text-primary, #212121));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
@@ -276,13 +277,13 @@ textarea {
   overflow: hidden;
 }
 .kd-input-wrapper::-webkit-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-wrapper::-moz-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-wrapper::-ms-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-wrapper:focus {
   -webkit-box-shadow: none;
@@ -317,6 +318,7 @@ textarea {
       -ms-flex-pack: center;
           justify-content: center;
   word-break: keep-all;
+  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
 }
 .kd-input-wrapper .kd-input-suffix {
   margin-left: 4px;
@@ -325,22 +327,22 @@ textarea {
   margin-right: 4px;
 }
 .kd-input-wrapper-size-small {
-  height: var(--kd-c-input-small-sizing-height, 20px);
-  line-height: calc(var(--kd-c-input-small-sizing-height, 20px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
-  font-size: var(--kd-c-input-small-font-size, var(--kd-g-font-size-small, 12px));
-  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-small-spacing-padding-horizontal, 9px);
+  height: var(--kd-c-input-sizing-height-small, 20px);
+  line-height: calc(var(--kd-c-input-sizing-height-small, 20px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-font-size-small, var(--kd-g-font-size-small, 12px));
+  padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
 }
 .kd-input-wrapper-size-middle {
-  height: var(--kd-c-input-middle-sizing-height, 30px);
-  line-height: calc(var(--kd-c-input-middle-sizing-height, 30px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
-  font-size: var(--kd-c-input-middle-font-size, var(--kd-g-font-size-middle, 14px));
-  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-middle-spacing-padding-horizontal, 9px);
+  height: var(--kd-c-input-sizing-height-middle, 30px);
+  line-height: calc(var(--kd-c-input-sizing-height-middle, 30px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-font-size-middle, var(--kd-g-font-size-middle, 14px));
+  padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-middle, 9px);
 }
 .kd-input-wrapper-size-large {
-  height: var(--kd-c-input-large-sizing-height, 36px);
-  line-height: calc(var(--kd-c-input-large-sizing-height, 36px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
-  font-size: var(--kd-c-input-large-font-size, var(--kd-g-font-size-large, 16px));
-  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-large-spacing-padding-horizontal, 9px);
+  height: var(--kd-c-input-sizing-height-large, 36px);
+  line-height: calc(var(--kd-c-input-sizing-height-large, 36px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-font-size-large, var(--kd-g-font-size-large, 16px));
+  padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-large, 9px);
 }
 .kd-input-wrapper-borderless {
   border: none !important;
@@ -349,6 +351,7 @@ textarea {
   border: none;
   border-bottom: 1px solid var(--kd-c-input-color-border, #999);
   border-radius: 0 !important;
+  padding-left: 0;
 }
 .kd-input-wrapper-focused {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
@@ -358,7 +361,7 @@ textarea {
   min-width: 0;
   border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
   border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
-  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-input-color-text, var(--kd-g-color-text-primary, #212121));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
@@ -373,13 +376,13 @@ textarea {
   display: inline-block;
 }
 .kd-input-wrapper-textarea::-webkit-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-wrapper-textarea::-moz-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-wrapper-textarea::-ms-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-wrapper-textarea:focus {
   -webkit-box-shadow: none;
@@ -452,7 +455,7 @@ textarea {
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon {
   position: relative;
-  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
   padding: 0 9px;
   font-weight: 400;
   font-size: 14px;
@@ -468,7 +471,7 @@ textarea {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  height: var(--kd-c-input-middle-sizing-height, 30px);
+  height: var(--kd-c-input-sizing-height-middle, 30px);
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon:first-child {
   border-top-right-radius: 0;
@@ -487,21 +490,21 @@ textarea {
   border: none;
   border-bottom: 1px solid var(--kd-c-input-color-border, #999);
   border-radius: 0 !important;
+  padding-left: 0;
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon-disabled {
   background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-input-group-wrapper .kd-input-group-size-small .kd-input-group-addon {
-  height: var(--kd-c-input-small-sizing-height, 20px);
+  height: var(--kd-c-input-sizing-height-small, 20px);
 }
 .kd-input-group-wrapper .kd-input-group-middle-small .kd-input-group-addon {
-  height: var(--kd-c-input-middle-sizing-height, 30px);
+  height: var(--kd-c-input-sizing-height-middle, 30px);
 }
 .kd-input-group-wrapper .kd-input-group-large-small .kd-input-group-addon {
-  height: var(--kd-c-input-large-sizing-height, 36px);
+  height: var(--kd-c-input-sizing-height-large, 36px);
 }
 .kd-input-allowClear-spacing {
   padding-right: 20px;

package/es/input/style/index.less

@@ -58,12 +58,13 @@ textarea {
 	&-disabled {
 		background-color: @input-background-color-disabled-inner;
 		border-color: @input-border-color-disabled-inner;
-		color: @input-color-disabled-inner;
+    color: @input-affix-color;
 		cursor: not-allowed;
 	}
 	&-underline&-disabled {
+    color: @input-color-disabled-inner;
 		background-color: @input-background-color-inner;
-		border-color: @input-border-color-disabled-inner;
+		border-color: @input-underline-border-color-disabled-inner;
 	}
 	&-size-small {
 		.input-size(@input-small-height-inner, @input-small-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
@@ -93,6 +94,7 @@ textarea {
 				align-items: center;
 				justify-content: center;
 				word-break: keep-all;
+        color: @input-affix-color;
 			}
 			&-suffix {
 				margin-left: 4px;
@@ -181,7 +183,7 @@ textarea {
 				}
 				.@{input-prefix-cls}-group-addon {
 					position: relative;
-					color: @input-font-color-inner;
+					color: @input-affix-color;
 					padding: 0 9px;
 					font-weight: 400;
 					font-size: 14px;
@@ -213,7 +215,6 @@ textarea {
 					&-disabled {
 						background-color: @input-background-color-disabled-inner;
 						border-color: @input-border-color-disabled-inner;
-						color: @input-color-disabled-inner;
 						cursor: not-allowed;
 					}
 				}

package/es/input/style/mixin.less

@@ -63,4 +63,5 @@
   border: none;
   border-bottom: 1px solid @input-color-border;
   border-radius: 0 !important;
+  padding-left: 0;
 }

package/es/input/style/token.less

@@ -4,40 +4,43 @@
 
 
 // color
-@input-font-color-inner: var(~'@{input-prefix}-color', @color-text-secondary);
-@input-placeholder-color-inner: var(~'@{input-prefix}-color-placeholder', @color-text-third);
+@input-font-color-inner: var(~'@{input-prefix}-color-text', @color-text-primary);
+@input-placeholder-color-inner: var(~'@{input-prefix}-placeholder-color-text', @color-text-placeholder);
 @input-color-border: var(~'@{input-prefix}-color-border', #999);
 @input-background-color-inner: var(~'@{input-prefix}-color-background', @color-white);
 @input-background-color-disabled-inner: var(~'@{input-prefix}-color-background-disabled', @color-background-contain-disabled);
 @input-border-color-focused: var(~'@{input-prefix}-color-border-focused', @color-theme);
 @input-border-color-disabled-inner: var(~'@{input-prefix}-color-border-disabled', @color-border-strong);
+@input-underline-border-color-disabled-inner: var(~'@{input-prefix}-underline-color-border-disabled', @color-border-weak);
 @input-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
+@input-affix-color: var(~'@{input-prefix}-affix-color-text', @color-text-primary);
 
-// sizing
-@input-small-height-inner: var(~'@{input-prefix}-small-sizing-height', 20px);
-@input-middle-height-inner: var(~'@{input-prefix}-middle-sizing-height', 30px);
-@input-large-height-inner: var(~'@{input-prefix}-large-sizing-height', 36px);
-@input-border-width-inner: var(~'@{input-prefix}-sizing-border', 1px);
-
-// spacing
-@input-small-padding-vertical-inner: var(~'@{input-prefix}-small-spacing-padding-vertical', 3px);
-@input-small-padding-horizontal-inner: var(~'@{input-prefix}-small-spacing-padding-horizontal', 9px);
-@input-middle-padding-vertical-inner: var(~'@{input-prefix}-middle-spacing-padding-vertical', 5px);
-@input-middle-padding-horizontal-inner: var(~'@{input-prefix}-middle-spacing-padding-horizontal', 9px);
-@input-large-padding-vertical-inner: var(~'@{input-prefix}-large-spacing-padding-vertical', 8px);
-@input-large-padding-horizontal-inner: var(~'@{input-prefix}-large-spacing-padding-horizontal', 9px);
+// font
+@input-small-font-size-inner: var(~'@{input-prefix}-font-size-small', @font-size-small);
+@input-middle-font-size-inner: var(~'@{input-prefix}-font-size-middle', @font-size-middle);
+@input-large-font-size-inner: var(~'@{input-prefix}-font-size-large', @font-size-large);
 
 // motion
 @transition-duration-inner: var(~'@{input-prefix}-motion-duration', @duration-promptly);
 
-// font
-@input-small-font-size-inner: var(~'@{input-prefix}-small-font-size', @font-size-small);
-@input-middle-font-size-inner: var(~'@{input-prefix}-middle-font-size', @font-size-middle);
-@input-large-font-size-inner: var(~'@{input-prefix}-large-font-size', @font-size-large);
-
 // radius
 @input-border-radius-inner: var(~'@{input-prefix}-radius-border', @radius-border);
 
+// sizing
+@input-small-height-inner: var(~'@{input-prefix}-sizing-height-small', 20px);
+@input-middle-height-inner: var(~'@{input-prefix}-sizing-height-middle', 30px);
+@input-large-height-inner: var(~'@{input-prefix}-sizing-height-large', 36px);
+@input-border-width-inner: var(~'@{input-prefix}-sizing-border', 1px);
+
+// spacing
+@input-small-padding-vertical-inner: var(~'@{input-prefix}-spacing-padding-vertical-small', 3px);
+@input-small-padding-horizontal-inner: var(~'@{input-prefix}-spacing-padding-horizontal-small', 9px);
+@input-middle-padding-vertical-inner: var(~'@{input-prefix}-spacing-padding-vertical-middle', 5px);
+@input-middle-padding-horizontal-inner: var(~'@{input-prefix}-spacing-padding-horizontal-middle', 9px);
+@input-large-padding-vertical-inner: var(~'@{input-prefix}-spacing-padding-vertical-large', 8px);
+@input-large-padding-horizontal-inner: var(~'@{input-prefix}-spacing-padding-horizontal-large', 9px);
+
+
 
 
 

package/es/layout/style/index.css

@@ -186,7 +186,7 @@
   padding: 0 16px;
   color: var(--kd-c-layout-trigger-color-text, var(--kd-g-color-white, #fff));
   height: var(--kd-c-layout-trigger-sizing-height, 50px);
-  line-height: calc(var(--kd-c-layout-trigger-sizing-height, 50px) - 2px);
+  line-height: calc(var(--kd-c-layout-trigger-sizing-height, 50px) - 4px);
   font-size: 20px;
   background: var(--kd-c-layout-trigger-color-background, #343848);
   cursor: pointer;

package/es/layout/style/index.less

@@ -78,7 +78,7 @@
       padding: 0 16px;
       color: @layout-trigger-color;
       height: @layout-trigger-height;
-      line-height: calc(@layout-trigger-height - 2px);
+      line-height: calc(@layout-trigger-height - 4px);
       font-size: 20px;
       background: @layout-trigger-background;
       cursor: pointer;

package/es/layout/style/token.less

@@ -19,12 +19,12 @@
 @layout-trigger-background-light: var(~'@{layout-custom-prefix}-trigger-color-background-light', @color-background);
 @layout-trigger-color-light: var(~'@{layout-custom-prefix}-trigger-color-text-light', @color-text-primary);
 
-// spacing
-@layout-header-padding: var(~'@{layout-custom-prefix}-header-spacing-padding', 0 20px 0 35px);
-@layout-footer-padding: var(~'@{layout-custom-prefix}-footer-spacing-padding', 24px 50px);
-
 // sizing
 @layout-header-height: var(~'@{layout-custom-prefix}-header-sizing-height', 52px);
 @layout-trigger-height: var(~'@{layout-custom-prefix}-trigger-sizing-height', 50px);
 @layout-zero-trigger-width: var(~'@{layout-custom-prefix}-trigger-sizing-width', 36px);
-@layout-zero-trigger-height: var(~'@{layout-custom-prefix}-trigger-sizing-height', 42px);
+@layout-zero-trigger-height: var(~'@{layout-custom-prefix}-trigger-sizing-height', 42px);
+
+// spacing
+@layout-header-padding: var(~'@{layout-custom-prefix}-header-spacing-padding', 0 20px 0 35px);
+@layout-footer-padding: var(~'@{layout-custom-prefix}-footer-spacing-padding', 24px 50px);

package/es/menu/menu.js

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

package/es/menu/style/index.css

@@ -105,24 +105,24 @@
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
 .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));
+  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));
 }
 .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));
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
 }
 .light-default {
-  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
 .kd-menu {
   position: relative;
   width: 100%;
   height: 100%;
+  min-width: 138px;
   background-color: var(--kd-c-menu-color-background, #343848);
-  color: var(--kd-c-menu-sub-color, rgba(255, 255, 255, 0.65));
+  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
 }
 .kd-menu-inline .kd-menu-item {
   white-space: nowrap;
@@ -140,18 +140,18 @@
 }
 .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));
+  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, #21242d);
+  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-active, var(--kd-g-color-theme, #5582f3));
+  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 {
@@ -180,44 +180,43 @@
 }
 .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));
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
 .kd-menu-light .kd-menu-submenu-hover,
 .kd-menu-light .kd-menu-submenu-sub {
-  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-menu-light-color-text, 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));
+  color: var(--kd-c-menu-light-color-text-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));
+  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-hover, var(--kd-g-color-ongoing, #276ff5));
-  border-right: 2px solid var(--kd-c-menu-light-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
 }
 .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));
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
 }
 .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));
+  color: var(--kd-c-menu-light-color-text-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));
+  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));
   border: none !important;
 }
@@ -277,8 +276,8 @@
   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));
+  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-item-arrow {
   margin-left: auto;
@@ -301,8 +300,8 @@
   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));
+  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 {
   position: static;
@@ -360,8 +359,8 @@
   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));
+  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-arrow {
   margin-left: auto;
@@ -384,11 +383,11 @@
   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));
+  color: var(--kd-c-menu-sub-color-text-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));
+  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
 }
 .kd-menu-submenu-thrid {
   display: -webkit-box;
@@ -397,7 +396,7 @@
   max-width: 810px;
   max-height: 492px;
   padding-left: 24px;
-  background: var(--kd-c-menu-sub-color-background, #21242d);
+  background: var(--kd-c-menu-sub-color-background, #121319);
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   overflow-y: auto;
@@ -469,7 +468,7 @@
   text-overflow: ellipsis;
 }
 .kd-menu-submenu-thrid-list > li:hover {
-  color: var(--kd-c-menu-sub-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
 }
 .kd-menu-submenu-thrid-list > li > span {
   white-space: nowrap;
@@ -480,5 +479,12 @@
   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-text-active, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark .kd-menu-submenu-sub {
+  background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
+}
+.kd-menu-dark .kd-menu-submenu-sub-second,
+.kd-menu-dark .kd-menu-submenu-sub-third {
+  background: var(--kd-c-menu-sub-color-background, #121319);
 }

package/es/menu/style/index.less

@@ -70,6 +70,7 @@
 
   &-collapsed {
     width: 50px;
+    min-width: auto;
   }
 
   &-light {
@@ -221,3 +222,16 @@
     }
   }
 }
+
+.@{menu-prefix-cls}-dark {
+  .@{submenu-prefix-cls}-sub {
+    background: @menu-sub-inline-color-background;
+  }
+
+  .@{submenu-prefix-cls}-sub-second,.@{submenu-prefix-cls}-sub-third  {
+    background: @menu-sub-color-background;
+  }
+}
+
+
+

package/es/menu/style/mixin.less

@@ -5,6 +5,7 @@
   position: relative;
   width: 100%;
   height: 100%;
+  min-width: 138px;
   background-color: @menu-color-background;
   color: @menu-sub-color;
 }
@@ -78,7 +79,6 @@
 .light-hover {
   background-color: @menu-light-color-background;
   color: @menu-light-color-hover;
-  border-right: 2px solid @menu-light-color-active;
 }
 
 .light-default {