@kdcloudjs/kdesign 1.1.2 → 1.1.3

package/lib/checkbox/style/index.css

@@ -120,24 +120,17 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   font-size: var(--kd-c-checkbox-font-size, var(--kd-g-font-size-small, 12px));
-  color: var(--kd-c-checkbox-color-text-primary, var(--kd-g-color-text-primary, #212121));
-  height: var(--kd-c-checkbox-sizing-height-middle, 36px);
+  color: var(--kd-c-checkbox-color-text-primary, #212121);
+  line-height: 18px;
 }
 .kd-checkbox-no-child {
-  height: var(--kd-c-checkbox-default-input-sizing-height, 16px);
-  width: var(--kd-c-checkbox-default-input-sizing-width, 16px);
-}
-.kd-checkbox-small {
-  height: var(--kd-c-checkbox-sizing-height-small, 32px);
-}
-.kd-checkbox-middle {
-  height: var(--kd-c-checkbox-sizing-height-middle, 36px);
-}
-.kd-checkbox-large {
-  height: var(--kd-c-checkbox-sizing-height-large, 40px);
+  height: var(--kd-c-checkbox-default-input-sizing-height, 14px);
+  width: var(--kd-c-checkbox-default-input-sizing-width, 14px);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .kd-checkbox-group > *:not(:last-child) {
-  margin-right: var(--kd-c-checkbox-group-spacing-margin-right, 8px);
+  margin-right: var(--kd-c-checkbox-group-spacing-margin-right, 12px);
 }
 .kd-checkbox-input {
   margin: 0;
@@ -165,8 +158,8 @@
 }
 .kd-checkbox-square {
   border-radius: 2px;
-  border: 1px solid var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-  padding: var(--kd-c-checkbox-square-spacing-padding, 0 20px);
+  border: 1px solid var(--kd-c-checkbox-color-border, #d9d9d9);
+  padding: var(--kd-c-checkbox-square-spacing-padding-horizontal, 7px) var(--kd-c-checkbox-square-spacing-padding-vertical, 12px);
   -webkit-transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
   transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
 }
@@ -234,12 +227,13 @@
           animation: kdZoomLeaveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-checkbox-square-triangle-disabled {
-  border-bottom-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  border-bottom-color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-checkbox-square-disabled,
 .kd-checkbox-square-disabled:hover {
-  border-color: var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-checkbox-color-text-primary, var(--kd-g-color-text-primary, #212121));
+  border-color: var(--kd-c-checkbox-color-border, #d9d9d9);
+  color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   cursor: not-allowed !important;
 }
 .kd-checkbox-square-checked {
@@ -258,20 +252,23 @@
           animation: kdZoomEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-checkbox-square-checked-disabled {
-  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  border-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
+  border-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
   cursor: not-allowed !important;
 }
 .kd-checkbox-square-wrapper {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: var(--kd-c-checkbox-default-input-sizing-height, 16px);
+  height: var(--kd-c-checkbox-default-input-sizing-height, 14px);
   width: 0;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   opacity: 0;
 }
+.kd-checkbox-square.checked .kd-checkbox-children {
+  color: var(--kd-c-checkbox-color-text-primary, #212121);
+}
 .kd-checkbox-default {
   border: none;
   padding: var(--kd-c-checkbox-default-spacing-padding, 0);
@@ -287,8 +284,8 @@
 .kd-checkbox-default-disabled,
 .kd-checkbox-default-disabled:hover,
 .kd-checkbox-default-disabled:hover .kd-checkbox-default-wrapper {
-  color: var(--kd-c-checkbox-color-text-primary, var(--kd-g-color-text-primary, #212121));
-  border-color: var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  border-color: var(--kd-c-checkbox-color-border, #d9d9d9);
   cursor: not-allowed !important;
 }
 .kd-checkbox-default-wrapper {
@@ -297,7 +294,7 @@
   display: -ms-inline-flexbox;
   display: inline-flex;
   background-color: var(--kd-c-checkbox-color-background, var(--kd-g-color-background, #fff));
-  border: var(--kd-c-checkbox-default-input-border-width, 1px) solid var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  border: var(--kd-c-checkbox-default-input-border-width, 1px) solid var(--kd-c-checkbox-color-border, #d9d9d9);
   border-radius: var(--kd-c-checkbox-default-input-radius-border, 2px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -317,21 +314,24 @@
           box-shadow: 0 0 0 0 var(--kd-c-checkbox-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-checkbox-default-wrapper-size {
-  height: var(--kd-c-checkbox-default-input-sizing-height, 16px);
-  width: var(--kd-c-checkbox-default-input-sizing-width, 16px);
+  height: var(--kd-c-checkbox-default-input-sizing-height, 14px);
+  width: var(--kd-c-checkbox-default-input-sizing-width, 14px);
 }
 .kd-checkbox-default-margin {
-  margin-right: var(--kd-c-checkbox-default-input-spacing-margin-right, 8px);
+  margin-right: var(--kd-c-checkbox-default-input-spacing-margin-right, 4px);
 }
 .kd-checkbox-default-no-child {
   height: 100%;
   width: 100%;
 }
 .kd-checkbox-default-checked-disabled {
-  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  border-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  background-color: var(--kd-c-checkbox-default-color-background-disabled, #e5e5e5) !important;
+  border-color: var(--kd-c-checkbox-default-color-background-disabled, #d9d9d9) !important;
   cursor: not-allowed !important;
 }
+.kd-checkbox-default-checked-disabled .kd-checkbox-default-inner {
+  color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
 .kd-checkbox-default-checked {
   background-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
   border-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
@@ -349,7 +349,7 @@
 .kd-checkbox-default-inner {
   position: absolute;
   color: var(--kd-c-checkbox-default-input-icon-color, #fff);
-  font-size: var(--kd-c-checkbox-default-input-icon-font-size, 14px);
+  font-size: var(--kd-c-checkbox-default-input-icon-font-size, 12px);
   height: 100%;
   width: 100%;
   top: 5%;
@@ -371,8 +371,8 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 8px;
-  height: 8px;
+  width: var(--kd-c-checkbox-default-indeterminate-sizing-square, 6px);
+  height: var(--kd-c-checkbox-default-indeterminate-sizing-square, 6px);
   background-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
   border: 0;
   -webkit-transform: translate(-50%, -50%) scale(1);
@@ -380,3 +380,6 @@
   opacity: 1;
   content: " ";
 }
+.kd-checkbox-default.checked .kd-checkbox-children {
+  color: var(--kd-c-checkbox-color-text-primary, #212121);
+}

package/lib/checkbox/style/index.less

@@ -16,19 +16,11 @@
   box-sizing: border-box;
   font-size: @checkbox-font-size;
   color: @checkbox-font-color;
-  height: @checkbox-middle-size-height;
+  line-height: 18px;
   &-no-child {
     height: @checkbox-default-input-height;
     width: @checkbox-default-input-width;
-  }
-  &-small {
-    height: @checkbox-small-size-height;
-  }
-  &-middle {
-    height: @checkbox-middle-size-height;
-  }
-  &-large {
-    height: @checkbox-large-size-height;
+    box-sizing: border-box;
   }
   &-group > *:not(:last-child) {
     margin-right: @checkbox-group-margin-right;
@@ -56,7 +48,7 @@
 .@{checkbox-prefix-cls}-square {
   border-radius: 2px;
   border: 1px solid @checkbox-border-color;
-  padding: @checkbox-square-padding;
+  padding: @checkbox-square-padding-horizontal @checkbox-square-padding-vertical;
   transition: color @checkbox-transition-duration, border-color @checkbox-transition-duration;
   &:not(&-disabled)::after {
     content: '';
@@ -111,13 +103,14 @@
     animation: kdZoomLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
   }
   &-triangle-disabled {
-    border-bottom-color: @checkbox-disabled-bg-color;
+    border-bottom-color: @checkbox-disabled-text-color;
   }
 
   &-disabled,
   &-disabled:hover {
     border-color: @checkbox-border-color;
-    color: @checkbox-font-color;
+    color: @checkbox-disabled-text-color;
+    background-color: @checkbox-disabled-bg-color;
     cursor: not-allowed !important;
   }
   &-checked {
@@ -145,6 +138,11 @@
     box-sizing: border-box;
     opacity: 0;
   }
+  &.checked {
+    .@{checkbox-prefix-cls}-children {
+      color: @checkbox-font-color;
+    }
+  }
 }
 
 .@{checkbox-prefix-cls}-default {
@@ -160,7 +158,7 @@
   &-disabled,
   &-disabled:hover,
   &-disabled:hover &-wrapper {
-    color: @checkbox-font-color;
+    color: @checkbox-disabled-text-color;
     border-color: @checkbox-border-color;
     cursor: not-allowed !important;
   }
@@ -198,9 +196,13 @@
     width: 100%;
   }
   &-checked-disabled {
-    background-color: @checkbox-disabled-bg-color !important;
-    border-color: @checkbox-disabled-bg-color !important;
+    background-color: @checkbox-default-disabled-color-bg !important;
+    border-color: @checkbox-default-disabled-color-border !important;
     cursor: not-allowed !important;
+
+    .@{checkbox-prefix-cls}-default-inner {
+      color: @checkbox-disabled-text-color;
+    }
   }
   &-checked {
     background-color: @checkbox-checked-border-color;
@@ -234,12 +236,17 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    width: 8px;
-    height: 8px;
+    width: @checkbox-default-indeterminate-square;
+    height: @checkbox-default-indeterminate-square;
     background-color: @checkbox-checked-border-color;
     border: 0;
     transform: translate(-50%,-50%) scale(1);
     opacity: 1;
     content: " ";
   }
+  &.checked {
+    .@{checkbox-prefix-cls}-children {
+      color: @checkbox-font-color;
+    }
+  }
 }

package/lib/checkbox/style/token.less

@@ -2,47 +2,46 @@
 
 @checkbox-prefix: '--@{kd-prefix}-c-checkbox';
 
-// font-size
-@checkbox-font-size: var(~'@{checkbox-prefix}-font-size', @font-size-small); //默认字体大小
-@checkbox-default-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 14px); // 勾选输入框勾勾图标大小
-@checkbox-square-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 12px); // 边框类型三角内勾选输入框勾勾图标大小
-
 // colors
 @checkbox-color-theme: var(~'@{checkbox-prefix}-color-theme', @color-theme);
-@checkbox-font-color: var(~'@{checkbox-prefix}-color-text-primary', @color-text-primary);
-@checkbox-border-color: var(~'@{checkbox-prefix}-color-border', @color-border-strong);
-@checkbox-checked-border-color: var(~'@{checkbox-prefix}-color-border-active',  @color-theme);
-@checkbox-checked-font-color: var(~'@{checkbox-prefix}-color-text-hover',  @color-theme);
-@checkbox-default-input-icon-color: var(~'@{checkbox-prefix}-default-input-icon-color',  #fff); // 勾选输入框边勾勾图标颜色
-@checkbox-square-input-icon-color: var(~'@{checkbox-prefix}-square-input-icon-color',  #fff); // 边框类型三角内勾选输入框勾勾图标颜色
-@checkbox-bg-color: var(~'@{checkbox-prefix}-color-background',  @color-background);
-@checkbox-disabled-bg-color: var(~'@{checkbox-prefix}-color-background-disabled',  @color-disabled);
-
-// sizing
-@checkbox-small-size-height: var(~'@{checkbox-prefix}-sizing-height-small',  32px); // 小尺寸复选框
-@checkbox-middle-size-height: var(~'@{checkbox-prefix}-sizing-height-middle',  36px); // 中尺寸复选框
-@checkbox-large-size-height: var(~'@{checkbox-prefix}-sizing-height-large',  40px); // 大尺寸复选框
+@checkbox-font-color: var(~'@{checkbox-prefix}-color-text-primary', #212121);
+@checkbox-border-color: var(~'@{checkbox-prefix}-color-border', #d9d9d9);
+@checkbox-checked-border-color: var(~'@{checkbox-prefix}-color-border-active', @color-theme);
+@checkbox-checked-font-color: var(~'@{checkbox-prefix}-color-text-hover', @color-theme);
+@checkbox-default-input-icon-color: var(~'@{checkbox-prefix}-default-input-icon-color', #fff); // 勾选输入框边勾勾图标颜色
+@checkbox-square-input-icon-color: var(~'@{checkbox-prefix}-square-input-icon-color', #fff); // 边框类型三角内勾选输入框勾勾图标颜色
+@checkbox-bg-color: var(~'@{checkbox-prefix}-color-background', @color-background);
+@checkbox-disabled-bg-color: var(~'@{checkbox-prefix}-color-background-disabled', @color-background-contain-disabled);
+@checkbox-disabled-border-color: var(~'@{checkbox-prefix}-color-border-disabled', @color-border-disabled);
+@checkbox-disabled-text-color: var(~'@{checkbox-prefix}-color-text-disabled', @color-disabled);
+@checkbox-default-disabled-color-bg: var(~'@{checkbox-prefix}-default-color-background-disabled', #e5e5e5);
+@checkbox-default-disabled-color-border: var(~'@{checkbox-prefix}-default-color-background-disabled', #d9d9d9);
+
+// font
+@checkbox-font-size: var(~'@{checkbox-prefix}-font-size', @font-size-small); //默认字体大小
+@checkbox-default-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 12px); // 勾选输入框勾勾图标大小
+@checkbox-square-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 12px); // 边框类型三角内勾选输入框勾勾图标大小
 
-// @checkbox-border-width: 1px; // 边框类型边框大小
-@checkbox-border-width: var(~'@{checkbox-prefix}-border-width',  1px); // 边框类型边框大小
+// motion
+@checkbox-transition-duration: var(~'@{checkbox-prefix}-motion-duration', @duration-promptly);
 
-@checkbox-default-input-height: var(~'@{checkbox-prefix}-default-input-sizing-height',  16px); // 勾选输入框高度
-@checkbox-default-input-width: var(~'@{checkbox-prefix}-default-input-sizing-width',  16px); // 勾选输入框宽度
+// radius
+@checkbox-default-input-border-radius: var(~'@{checkbox-prefix}-default-input-radius-border', 2px); // 勾选输入框圆角
 
-// @checkbox-default-input-border-width: 1px; // 勾选输入框边框大小
-@checkbox-default-input-border-width: var(~'@{checkbox-prefix}-default-input-border-width',  1px); // 勾选输入框边框大小 不需要
+// sizing
+@checkbox-border-width: var(~'@{checkbox-prefix}-border-width', 1px); // 边框类型边框大小
+@checkbox-default-input-height: var(~'@{checkbox-prefix}-default-input-sizing-height', 14px); // 勾选输入框高度
+@checkbox-default-input-width: var(~'@{checkbox-prefix}-default-input-sizing-width', 14px); // 勾选输入框宽度
+@checkbox-default-input-border-width: var(~'@{checkbox-prefix}-default-input-border-width', 1px); // 勾选输入框边框大小 不需要
+@checkbox-square-triangle-height: var(~'@{checkbox-prefix}-square-triangle-sizing-height', 18px); // 边框类型右下角三角高度
+@checkbox-square-triangle-width: var(~'@{checkbox-prefix}-square-triangle-sizing-width', 18px); // 边框类型右下角三角宽度
+@checkbox-default-indeterminate-square: var(~'@{checkbox-prefix}-default-indeterminate-sizing-square', 6px); // 半选框的大小
 
-@checkbox-square-triangle-height: var(~'@{checkbox-prefix}-square-triangle-sizing-height',  18px); // 边框类型右下角三角高度
-@checkbox-square-triangle-width: var(~'@{checkbox-prefix}-square-triangle-sizing-width',  18px); // 边框类型右下角三角宽度
 
 // spacing
-@checkbox-group-margin-right: var(~'@{checkbox-prefix}-group-spacing-margin-right',  8px); // 按钮组的间距
-@checkbox-default-padding: var(~'@{checkbox-prefix}-default-spacing-padding',  0); // 默认类型复选框内边距
-@checkbox-default-input-margin-right: var(~'@{checkbox-prefix}-default-input-spacing-margin-right',  8px); // 勾选输入框与右侧内容间距
-@checkbox-square-padding: var(~'@{checkbox-prefix}-square-spacing-padding',  0 20px); // 边框类型内边距
+@checkbox-group-margin-right: var(~'@{checkbox-prefix}-group-spacing-margin-right', 12px); // 按钮组的间距
+@checkbox-default-padding: var(~'@{checkbox-prefix}-default-spacing-padding', 0); // 默认类型复选框内边距
+@checkbox-default-input-margin-right: var(~'@{checkbox-prefix}-default-input-spacing-margin-right', 4px); // 勾选输入框与右侧内容间距
+@checkbox-square-padding-horizontal: var(~'@{checkbox-prefix}-square-spacing-padding-horizontal', 7px); // 边框类型内边距
+@checkbox-square-padding-vertical: var(~'@{checkbox-prefix}-square-spacing-padding-vertical', 12px); // 边框类型内边距
 
-// radius
-@checkbox-default-input-border-radius: var(~'@{checkbox-prefix}-default-input-radius-border',  2px); // 勾选输入框圆角
-
-// motion
-@checkbox-transition-duration: var(~'@{checkbox-prefix}-motion-duration', @duration-promptly);

package/lib/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/lib/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/lib/input/style/mixin.less

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