@kdcloudjs/kdesign 1.1.1 → 1.2.0

package/lib/empty/illustrationEmptyImg.js

@@ -17,6 +17,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
 
+var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -27,6 +29,7 @@ function IllustrationEmptyImg() {
       prefixCls = _useContext.prefixCls;
 
   var emptyPrefixCls = getPrefixCls(prefixCls, 'empty');
+  var linearGradientId = (0, _uniqueId.default)(emptyPrefixCls + '-illus-linearGradient-');
   return /*#__PURE__*/_react.default.createElement("svg", {
     className: "".concat(emptyPrefixCls, "-image"),
     width: "200px",
@@ -45,7 +48,7 @@ function IllustrationEmptyImg() {
     y1: "0%",
     x2: "50%",
     y2: "100%",
-    id: "linearGradient-3"
+    id: linearGradientId
   }, /*#__PURE__*/_react.default.createElement("stop", {
     stopColor: "#F2F5FA",
     offset: "0%"
@@ -58,7 +61,7 @@ function IllustrationEmptyImg() {
     y1: "0%",
     x2: "50%",
     y2: "100%",
-    id: "linearGradient-4"
+    id: "".concat(linearGradientId, "-1")
   }, /*#__PURE__*/_react.default.createElement("stop", {
     stopColor: "#F2F5FA",
     offset: "0%"
@@ -112,7 +115,7 @@ function IllustrationEmptyImg() {
     transform: "translate(11.428571, 37.050000)"
   }, /*#__PURE__*/_react.default.createElement("g", {
     transform: "translate(34.285714, 34.200000) scale(-1, 1) translate(-34.285714, -34.200000) ",
-    fill: "url(#linearGradient-3)",
+    fill: "url(#".concat(linearGradientId, ")"),
     id: "\u5F62\u72B6\u7ED3\u5408"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M4.28571429,55.575 L4.28571429,34.2535714 C4.28571429,22.4188982 13.8796125,12.825 25.7142857,12.825 C36.3598894,12.825 45.1923741,20.587885 46.8597669,30.7616821 C48.2786739,30.2207368 49.8190861,29.925 51.4285714,29.925 C58.5293754,29.925 64.2857143,35.6813389 64.2857143,42.7821429 L64.2857143,55.575 L4.28571429,55.575 Z"
@@ -121,7 +124,7 @@ function IllustrationEmptyImg() {
     id: "\u80CC\u666F/\u4E91"
   }, /*#__PURE__*/_react.default.createElement("g", {
     transform: "translate(142.857143, 51.300000)",
-    fill: "url(#linearGradient-4)",
+    fill: "url(#".concat(linearGradientId, "-1)"),
     id: "\u5F62\u72B6\u7ED3\u5408"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M17.1428571,8.55 C24.2401777,8.55 30.1286667,13.7256234 31.2399627,20.508509 C32.186033,20.1471098 33.2128549,19.95 34.2857143,19.95 C39.0195836,19.95 42.8571429,23.7875593 42.8571429,28.5214286 L42.8571429,37.05 L31.4281429,37.049 L31.4285714,37.05 L2.85714286,37.05 L2.85714286,22.8357143 C2.85714286,14.9459321 9.253075,8.55 17.1428571,8.55 Z"

package/lib/icon/interface.js

@@ -11,7 +11,7 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _type = require("../_utils/type");
 
-var BaseIcon = ['arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'first', 'last', 'double-arrow-left', 'double-arrow-right', 'push-down', 'put-top', 'put-bottom', 'put-on', 'put-off', 'switch-up', 'switch-down', 'all-border', 'top-border', 'right-border', 'bottom-border', 'left-border', 'left-extension', 'right-extension', 'left-unfold', 'right-unfold', 'enlarge', 'expand', 'close-full-screen', 'split', 'back', 'arrow', 'no-border', 'border', 'rough-border', 'align-left', 'align-right', 'align-center', 'vertical-center', 'delete-indentation', 'equal', 'greater-equal', 'not-equal', 'male', 'female', 'copy', 'print', 'lock', 'scanning', 'like', 'project', 'user-info', 'shutdown', 'image', 'delete-line', 'add-line', 'job-info', 'detect', 'cancel', 'stop', 'cell', 'fixed-shrink', 'attachment', 'location', 'reduce', 'resign-report', 'forbid', 'education', 'unlock', 'contract', 'filter', 'more', 'operating-element', 'fail', 'edit', 'have-attachment', 'hide', 'preview', 'unfold-all', 'wrap', 'filter-switch', 'qualification-info', 'cn', 'en', 'git', 'svn', 'reset', 'preview-view', 'unfold', 'unfoldmenu', 'foldmenu', 'comment', 'shoppingcart', 'add-child', 'save', 'detail', 'table-setting', 'edit-view', 'edit-border', 'hyperlink', 'code', 'import', 'address', 'analysis', 'share', 'chart', 'fixed-window', 'order', 'phone', 'classify', 'feedback', 'meun', 'voice', 'search-border', 'material', 'finish', 'more-info', 'fixed', 'change', 'copy-code', 'return', 'qrcode', 'counterclockwise', 'list', 'switch', 'task-process', 'add', 'delete', 'add-word', 'two-window', 'spin', 'ordered-list', 'cooperation', 'quit', 'shrink', 'zoom', 'graffiti', 'experience', 'litte-k', 'medical-report', 'bankcard', 'yunzhijia', 'customize', 'refresh', 'search', 'loadding', 'loadding-circle', 'right', 'close', 'upload', 'download', 'upload-cloud', 'waiting', 'warning', 'exclamatory', 'tips', 'setting'];
+var BaseIcon = ['arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'first', 'last', 'double-arrow-left', 'double-arrow-right', 'push-down', 'put-top', 'put-bottom', 'put-on', 'put-off', 'switch-up', 'switch-down', 'all-border', 'top-border', 'right-border', 'bottom-border', 'left-border', 'left-extension', 'right-extension', 'left-unfold', 'right-unfold', 'unfoldmenu', 'foldmenu', 'enlarge', 'expand', 'close-full-screen', 'split', 'back', 'arrow', 'no-border', 'border', 'rough-border', 'align-left', 'align-right', 'align-center', 'vertical-center', 'delete-indentation', 'equal', 'greater-equal', 'not-equal', 'male', 'female', 'copy', 'print', 'lock', 'scanning', 'like', 'project', 'user-info', 'shutdown', 'image', 'delete-line', 'add-line', 'job-info', 'detect', 'cancel', 'stop', 'cell', 'fixed-shrink', 'attachment', 'location', 'reduce', 'resign-report', 'forbid', 'education', 'unlock', 'contract', 'filter', 'more', 'operating-element', 'fail', 'edit', 'have-attachment', 'hide', 'preview', 'unfold-all', 'wrap', 'filter-switch', 'qualification-info', 'cn', 'en', 'git', 'reset', 'preview-view', 'unfold', 'comment', 'shoppingcart', 'add-child', 'save', 'detail', 'table-setting', 'edit-view', 'edit-border', 'hyperlink', 'code', 'import', 'address', 'analysis', 'share', 'chart', 'fixed-window', 'order', 'phone', 'classify', 'feedback', 'menu', 'voice', 'search-border', 'material', 'finish', 'more-info', 'fixed', 'change', 'copy-code', 'return', 'qrcode', 'counterclockwise', 'list', 'switch', 'task-process', 'add', 'delete', 'add-word', 'two-window', 'spin', 'ordered-list', 'cooperation', 'quit', 'shrink', 'zoom', 'graffiti', 'experience', 'medical-report', 'bankcard', 'yunzhijia', 'customize', 'refresh', 'search', 'loadding', 'loadding-circle', 'right', 'close', 'upload', 'download', 'upload-cloud', 'waiting', 'warning', 'exclamatory', 'tips', 'setting', 'chart-display', 'date', 'more-item', 'international', 'little-k', 'bellOutlined', 'sigma'];
 exports.BaseIcon = BaseIcon;
 var SolidIcon = ['arrow-up-solid', 'arrow-right-solid', 'arrow-down-solid', 'arrow-left-solid', 'left-unfold-solid', 'right-unfold-solid', 'unlock-solid', 'multiply', 'division-solid', 'title-solid', 'communication-solid', 'fixed-solid', 'more-info-solid', 'timezone-solid', 'mosaic-solid', 'strike-solid', 'lock-solid', 'filter-solid', 'person-solid', 'bold-solid', 'delete-solid', 'processing-solid', 'tips-solid', 'quote-solid', 'oblique-solid', 'sun-solid', 'underline-solid', 'font-background-solid', 'eliminate-solid', 'font-color-solid', 'fx', 'refresh-solid', 'right-solid', 'location-solid', 'add-solid', 'warning-solid', 'close-solid', 'right-bold', 'close-bold', 'workbench', 'star', 'notice'];
 exports.SolidIcon = SolidIcon;

package/lib/image/preview.js

@@ -201,7 +201,7 @@ var Preview = function Preview(props) {
   }, operations, /*#__PURE__*/React.createElement("span", {
     onClick: onClose
   }, /*#__PURE__*/React.createElement(_icon.default, {
-    type: "close"
+    type: "close-solid"
   }), "\u5173\u95ED"))));
   return /*#__PURE__*/_reactDom.default.createPortal(peviewContainer, document.body);
 };

package/lib/image/style/index.css

@@ -137,8 +137,8 @@
   opacity: 0;
   -webkit-transform: translateY(100%);
           transform: translateY(100%);
-  -webkit-transition: all var(--kd-c-image-action-transition, var(--kd-g-duration-quickly, 0.2s)) ease-out;
-  transition: all var(--kd-c-image-action-transition, var(--kd-g-duration-quickly, 0.2s)) ease-out;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
   background-color: var(--kd-c-image-action-color-background, rgba(0, 0, 0, 0.5));
 }
 .kd-image-action > * {
@@ -151,7 +151,7 @@
   margin-left: 20px;
 }
 .kd-image-preview {
-  z-index: var(--kd-c-image-z-index-masker, var(--kd-g-z-index-masker, 3000));
+  z-index: 3000;
   position: fixed;
   top: 0;
   right: 0;
@@ -161,8 +161,8 @@
   -webkit-transform: scale(0.15);
           transform: scale(0.15);
   visibility: hidden;
-  -webkit-transition: all calc(var(--kd-c-image-transition-duration, 0.3s) - 0.1s) var(--kd-c-image-motion-ease-out, var(--kd-g-ease-in, cubic-bezier(0.4, 0, 1, 0.6)));
-  transition: all calc(var(--kd-c-image-transition-duration, 0.3s) - 0.1s) var(--kd-c-image-motion-ease-out, var(--kd-g-ease-in, cubic-bezier(0.4, 0, 1, 0.6)));
+  -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 1, 0.6);
+  transition: all 0.2s cubic-bezier(0.4, 0, 1, 0.6);
   -webkit-overflow-scrolling: touch;
 }
 .kd-image-preview.show {
@@ -170,8 +170,8 @@
   -webkit-transform: scale(1);
           transform: scale(1);
   visibility: visible;
-  -webkit-transition: all calc(var(--kd-c-image-transition-duration, 0.3s) - 0.1s) var(--kd-c-image-motion-ease-out, var(--kd-g-ease-out, cubic-bezier(0, 0.4, 0.4, 1)));
-  transition: all calc(var(--kd-c-image-transition-duration, 0.3s) - 0.1s) var(--kd-c-image-motion-ease-out, var(--kd-g-ease-out, cubic-bezier(0, 0.4, 0.4, 1)));
+  -webkit-transition: all 0.2s cubic-bezier(0, 0.4, 0.4, 1);
+  transition: all 0.2s cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-image-preview-mask {
   position: fixed;
@@ -255,7 +255,7 @@
 }
 .kd-image-preview-action i {
   color: var(--kd-c-image-icon-color, var(--kd-g-color-white, #fff));
-  font-size: var(--kd-c-image-icon-font-size, 27px);
+  font-size: var(--kd-c-image-icon-font-size, 26px);
   cursor: pointer;
 }
 .kd-image-preview-action i:hover,

package/lib/image/style/index.less

@@ -41,7 +41,7 @@
     text-align: center;
     opacity: 0;
     transform: translateY(100%);
-    transition: all @image-action-transition ease-out;
+    transition: all 0.2s ease-out;
     background-color: @image-action-background-color;
 
     >* {
@@ -58,7 +58,7 @@
 }
 
 .@{image-preview-prefix-cls} {
-  z-index: @image-z-index-masker;
+  z-index: 3000;
   position: fixed;
   top: 0;
   right: 0;
@@ -67,14 +67,14 @@
   opacity: 0;
   transform: scale(0.15);
   visibility: hidden;
-  transition: all calc(@image-transition-duration - 0.1s) @image-motion-ease-in;
+  transition: all 0.2s cubic-bezier(0.4,0,1,0.6);
   -webkit-overflow-scrolling: touch;
 
   &.show {
     opacity: 1;
     transform: scale(1);
     visibility: visible;
-    transition: all calc(@image-transition-duration - 0.1s) @image-motion-ease-out;
+    transition: all 0.2s cubic-bezier(0,.4,.4,1);
   }
 
   &-mask {
@@ -104,7 +104,7 @@
 
     &:hover,
     &:active {
-      color: @theme-color;
+      color: #5582f3;
     }
   }
 

package/lib/image/style/token.less

@@ -2,31 +2,18 @@
 
 @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);
-
-
-
-
 // color
-@image-icon-color: var(~'@{image-prefix}-icon-color',@color-white);//图片预览 图标颜色
-@image-close-color-background: var(~'@{image-prefix}-close-color-background',#666666);//删除图标 背景色
-@image-action-background-color: var(~'@{image-prefix}-action-color-background',rgba(0, 0, 0, 0.5));
-
-
+@image-icon-color: var(~'@{image-prefix}-icon-color', @color-white); //图片预览 图标颜色
+@image-close-color-background: var(~'@{image-prefix}-close-color-background', #666666); //删除图标 背景色
+@image-action-background-color: var(~'@{image-prefix}-action-color-background', rgba(0, 0, 0, 0.5));
 // font
-@image-icon-font-size: var(~'@{image-prefix}-icon-font-size',27px);//图片预览 图标大小
-@image-preview-close-font-size: var(~'@{image-prefix}-preview-font-size',28px);
-@image-font-size-x-large: var(~'@{image-prefix}-font-size-x-large',@font-size-x-large);
-
+@image-icon-font-size: var(~'@{image-prefix}-icon-font-size', 26px); //图片预览 图标大小
+@image-preview-close-font-size: var(~'@{image-prefix}-preview-font-size', 28px);
+@image-font-size-x-large: var(~'@{image-prefix}-font-size-x-large', @font-size-x-large);
+// radius
+@image-border-radius: var(~'@{image-prefix}-radius-border', @radius-border);
 // sizing
-@image-action-width: var(~'@{image-prefix}-action-sizing-width',100%);
-@image-preview-close-width: var(~'@{image-prefix}-preview-sizing-width',18px);
-@image-preview-close-height: var(~'@{image-prefix}-preview-sizing-height',18px);
-@image-action-height: var(~'@{image-prefix}-action-sizing-height',28px);
-
-
+@image-action-width: var(~'@{image-prefix}-action-sizing-width', 100%);
+@image-preview-close-width: var(~'@{image-prefix}-preview-sizing-width', 18px);
+@image-preview-close-height: var(~'@{image-prefix}-preview-sizing-height', 18px);
+@image-action-height: var(~'@{image-prefix}-action-sizing-height', 28px);

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;
 }

package/lib/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/lib/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/lib/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/lib/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);