@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/button/button.js

@@ -52,7 +52,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 
-var ButtonTypes = (0, _type.tuple)('second', 'primary', 'ghost', 'link', 'text');
+var ButtonTypes = (0, _type.tuple)('second', 'primary', 'ghost', 'text');
 exports.ButtonTypes = ButtonTypes;
 var ButtonSizes = (0, _type.tuple)('large', 'middle', 'small');
 exports.ButtonSizes = ButtonSizes;
@@ -78,8 +78,6 @@ var InternalButton = function InternalButton(props, ref) {
       children = buttonProps.children,
       className = buttonProps.className,
       customPrefixcls = buttonProps.prefixCls,
-      target = buttonProps.target,
-      href = buttonProps.href,
       size = buttonProps.size,
       loading = buttonProps.loading,
       shape = buttonProps.shape,
@@ -91,7 +89,7 @@ var InternalButton = function InternalButton(props, ref) {
       disabled = buttonProps.disabled,
       _buttonProps$htmlType = buttonProps.htmlType,
       htmlType = _buttonProps$htmlType === void 0 ? 'button' : _buttonProps$htmlType,
-      others = __rest(buttonProps, ["type", "iconPlace", "children", "className", "prefixCls", "target", "href", "size", "loading", "shape", "bordered", "onClick", "icon", "ghost", "block", "disabled", "htmlType"]);
+      others = __rest(buttonProps, ["type", "iconPlace", "children", "className", "prefixCls", "size", "loading", "shape", "bordered", "onClick", "icon", "ghost", "block", "disabled", "htmlType"]);
 
   (0, _devwarning.default)(ButtonTypes.indexOf(type) === -1, 'button', "cannot found button type '".concat(type, "'"));
   var btnPrefixCls = getPrefixCls(prefixCls, 'btn', customPrefixcls); // 按钮样式前缀
@@ -142,7 +140,7 @@ var InternalButton = function InternalButton(props, ref) {
     return child;
   };
 
-  var isTextBtn = type === 'link' || type === 'text'; // 判断按钮是否文本或链接类型。这些类型下有部分样式不适用
+  var isTextBtn = type === 'text'; // 判断按钮是否文本类型。这些类型下有部分样式不适用
 
   var btnClasses = (0, _classnames.default)(btnPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(btnPrefixCls, "-")).call(_context, type), type), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(btnPrefixCls, "-size-")).call(_context2, size), size), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context3 = "".concat(btnPrefixCls, "-shape-")).call(_context3, shape), shape && !isTextBtn), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-no-border"), !bordered), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-background-ghost"), ghost && !disabled), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-loading"), loading && !isTextBtn), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-block"), block && !shape), _classNames));
   var iconWrapperClassName = (0, _concat.default)(_context4 = "".concat(btnPrefixCls, "-iconWrapper-")).call(_context4, iconPlace === 'left' ? 'left' : 'right');
@@ -158,16 +156,6 @@ var InternalButton = function InternalButton(props, ref) {
   var btnChild = handleChild(children);
 
   switch (type) {
-    case 'link':
-      return /*#__PURE__*/_react.default.createElement("a", (0, _extends2.default)({
-        ref: buttonRef,
-        target: target,
-        href: href,
-        className: btnClasses,
-        disabled: disabled,
-        onClick: handleClick
-      }, others), children);
-
     case 'text':
       return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
         ref: buttonRef,

package/lib/button/style/index.css

@@ -92,6 +92,15 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-btn {
   padding: 0;
   position: relative;
@@ -99,13 +108,13 @@
   vertical-align: middle;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  font-weight: 400;
-  border: 1px solid transparent;
+  font-weight: var(--kd-c-button-font-weight, var(--kd-g-font-weight, 400));
+  border: var(--kd-c-button-sizing-border, 1px) solid transparent;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  border-radius: 2px;
+  border-radius: var(--kd-c-button-radius-border, var(--kd-g-radius-border, 2px));
   text-align: center;
   background-color: transparent;
   cursor: pointer;
@@ -117,74 +126,78 @@
 .kd-btn:focus {
   outline: 0;
 }
-.kd-btn:not(.kd-btn-link):not(.kd-btn-text)::after {
+.kd-btn:not(.kd-btn-text)::after {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   border-radius: inherit;
-  -webkit-box-shadow: 0 0 0 0 #5582f3;
-          box-shadow: 0 0 0 0 #5582f3;
+  -webkit-box-shadow: 0 0 0 0 var(--kd-g-color-theme, #5582f3);
+          box-shadow: 0 0 0 0 var(--kd-g-color-theme, #5582f3);
   opacity: 0.2;
   content: '';
   pointer-events: none;
   clear: both;
 }
-.kd-btn:not(.kd-btn-link):not(.kd-btn-text)[click-animating-wave='true']::after {
-  -webkit-animation: fadeEffect calc(0.3s + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-          animation: fadeEffect calc(0.3s + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+.kd-btn:not(.kd-btn-text)[click-animating-wave='true']::after {
+  -webkit-animation: fadeEffect var(--kd-c-button-motion-duration-fade, var(--kd-g-duration-slowly, 0.4s)) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect var(--kd-c-button-motion-duration-wave, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: fadeEffect var(--kd-c-button-motion-duration-fade, var(--kd-g-duration-slowly, 0.4s)) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect var(--kd-c-button-motion-duration-wave, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
 }
 .kd-btn-second {
-  border-color: rgba(217, 217, 217, 0.65);
-  background-color: rgba(255, 255, 255, 0.65);
-  color: rgba(102, 102, 102, 0.65);
+  border-color: var(--kd-c-button-second-color-border, var(--kd-g-color-border-strong-3, rgba(217, 217, 217, 0.65)));
+  background-color: var(--kd-c-button-second-color-background, var(--kd-g-color-background-3, rgba(255, 255, 255, 0.65)));
+  color: var(--kd-c-button-second-color-text, var(--kd-g-color-text-secondary-3, rgba(102, 102, 102, 0.65)));
+}
+.kd-btn-second:hover:not(.kd-btn-loading) {
+  background-color: var(--kd-c-button-second-color-background-hover, var(--kd-g-color-white, #fff));
+  border-color: var(--kd-c-button-second-color-border-hover, var(--kd-g-color-border-strong, #d9d9d9));
+  color: var(--kd-c-button-second-color-text-hover, var(--kd-g-color-text-secondary, #666));
 }
-.kd-btn-second:hover:not(.kd-btn-loading),
 .kd-btn-second:active:not(.kd-btn-loading) {
-  background-color: #fff;
-  border-color: #d9d9d9;
-  color: #666;
+  background-color: var(--kd-c-button-second-color-background-active, var(--kd-g-color-white, #fff));
+  border-color: var(--kd-c-button-second-color-border-active, var(--kd-g-color-border-strong, #d9d9d9));
+  color: var(--kd-c-button-second-color-text-active, var(--kd-g-color-text-secondary, #666));
 }
 .kd-btn-second:disabled {
-  border-color: rgba(217, 217, 217, 0.65) !important;
-  background-color: rgba(255, 255, 255, 0.65) !important;
-  color: rgba(102, 102, 102, 0.65) !important;
+  border-color: var(--kd-c-button-second-color-border-disabled, var(--kd-g-color-text-secondary-3, rgba(102, 102, 102, 0.65))) !important;
+  background-color: var(--kd-c-button-second-color-background-disabled, var(--kd-g-color-background-3, rgba(255, 255, 255, 0.65))) !important;
+  color: var(--kd-c-button-second-color-text-disabled, var(--kd-g-color-text-secondary-3, rgba(102, 102, 102, 0.65))) !important;
 }
 .kd-btn-primary {
-  border-color: #5582f3;
-  background-color: #5582f3;
-  color: #fff;
+  border-color: var(--kd-c-button-primary-color-border, var(--kd-g-color-theme, #5582f3));
+  background-color: var(--kd-c-button-primary-color-background, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-button-primary-color-text, var(--kd-g-color-white, #fff));
 }
 .kd-btn-primary:hover:not(.kd-btn-loading) {
-  background-color: #87adff;
-  border-color: #87adff;
+  background-color: var(--kd-c-button-primary-color-background-hover, var(--kd-g-color-theme-5, #87adff));
+  border-color: var(--kd-c-button-primary-color-border-hover, var(--kd-g-color-theme-5, #87adff));
 }
 .kd-btn-primary:active:not(.kd-btn-loading) {
-  border-color: #375cca;
-  background-color: #375cca;
+  border-color: var(--kd-c-button-primary-color-border-active, var(--kd-g-color-theme, #5582f3));
+  background-color: var(--kd-c-button-primary-color-background-active, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-btn-primary:disabled {
-  background-color: #e3eeff !important;
-  border-color: #e3eeff !important;
+  background-color: var(--kd-c-button-primary-color-background-disabled, var(--kd-g-color-theme-3, #e3eeff)) !important;
+  border-color: var(--kd-c-button-primary-color-border-disabled, var(--kd-g-color-theme-3, #e3eeff)) !important;
 }
 .kd-btn-ghost {
-  border-color: #d9d9d9;
-  background-color: transparent;
-  color: #666;
+  border-color: var(--kd-c-button-ghost-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  background-color: var(--kd-c-button-ghost-color-background, transparent);
+  color: var(--kd-c-button-ghost-color-text, var(--kd-g-color-text-secondary, #666));
 }
 .kd-btn-ghost:hover:not(.kd-btn-loading) {
-  border-color: #5582f3;
-  color: #5582f3;
+  border-color: var(--kd-c-button-ghost-color-border-hover, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-button-ghost-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-btn-ghost:active:not(.kd-btn-loading) {
-  border-color: #375cca;
-  color: #375cca;
+  border-color: var(--kd-c-button-ghost-color-border-hover, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-button-ghost-color-text-active, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-btn-ghost:disabled {
-  background-color: #f5f5f5 !important;
-  border-color: #b2b2b2 !important;
-  color: #b2b2b2 !important;
+  background-color: var(--kd-c-button-ghost-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
+  border-color: var(--kd-c-button-ghost-color-border-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  color: var(--kd-c-button-ghost-color-border-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
 }
 .kd-btn-iconWrapper-left {
   display: -webkit-box;
@@ -211,86 +224,72 @@
   float: right;
 }
 .kd-btn-loadingIcon {
-  color: #5582f3;
+  color: var(--kd-c-button-text-color-loading, var(--kd-g-color-theme, #5582f3));
 }
 .kd-btn-primary-loadingIcon {
-  color: #fff;
+  color: var(--kd-c-button-primary-color-text-loading, var(--kd-g-color-white, #fff));
 }
 .kd-btn-size-small {
-  height: 24px;
-  min-width: 60px;
-  line-height: 16px;
-  font-size: 12px;
-  padding: 3px 8px;
+  height: var(--kd-c-button-sizing-height-small, 24px);
+  min-width: var(--kd-c-button-sizing-min-width-small, 60px);
+  line-height: calc(var(--kd-c-button-sizing-height-small, 24px) - (var(--kd-c-button-spacing-padding-vertical-small, 3px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
+  font-size: var(--kd-c-button-font-size-small, var(--kd-g-font-size-small, 12px));
+  padding: var(--kd-c-button-spacing-padding-vertical-small, 3px) var(--kd-c-button-spacing-padding-horizontal-small, 8px);
 }
 .kd-btn-size-middle {
-  height: 28px;
-  min-width: 60px;
-  line-height: 16px;
-  font-size: 12px;
-  padding: 5px 8px;
+  height: var(--kd-c-button-sizing-height-middle, 28px);
+  min-width: var(--kd-c-button-sizing-min-width-middle, 60px);
+  line-height: calc(var(--kd-c-button-sizing-height-middle, 28px) - (var(--kd-c-button-spacing-padding-vertical-middle, 5px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
+  font-size: var(--kd-c-button-font-size-middle, var(--kd-g-font-size-small, 12px));
+  padding: var(--kd-c-button-spacing-padding-vertical-middle, 5px) var(--kd-c-button-spacing-padding-horizontal-middle, 8px);
 }
 .kd-btn-size-large {
-  height: 32px;
-  min-width: 80px;
-  line-height: 18px;
-  font-size: 16px;
-  padding: 6px 8px;
+  height: var(--kd-c-button-sizing-height-large, 32px);
+  min-width: var(--kd-c-button-sizing-min-width-large, 80px);
+  line-height: calc(var(--kd-c-button-sizing-height-large, 32px) - (var(--kd-c-button-spacing-padding-vertical-large, 6px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
+  font-size: var(--kd-c-button-font-size-large, var(--kd-g-font-size-large, 16px));
+  padding: var(--kd-c-button-spacing-padding-vertical-large, 6px) var(--kd-c-button-spacing-padding-horizontal-large, 8px);
 }
 .kd-btn-shape-circle {
   border-radius: 50%;
   min-width: auto;
 }
 .kd-btn-shape-circle.kd-btn-size-small {
-  width: 24px;
+  width: var(--kd-c-button-sizing-height-small, 24px);
   padding: 0;
 }
 .kd-btn-shape-circle.kd-btn-size-middle {
-  width: 28px;
+  width: var(--kd-c-button-sizing-height-middle, 28px);
   padding: 0;
 }
 .kd-btn-shape-circle.kd-btn-size-large {
-  width: 32px;
+  width: var(--kd-c-button-sizing-height-large, 32px);
   padding: 0;
 }
 .kd-btn-shape-round.kd-btn-size-small {
-  border-radius: 24px;
+  border-radius: var(--kd-c-button-sizing-height-small, 24px);
 }
 .kd-btn-shape-round.kd-btn-size-middle {
-  border-radius: 28px;
+  border-radius: var(--kd-c-button-sizing-height-middle, 28px);
 }
 .kd-btn-shape-round.kd-btn-size-large {
-  border-radius: 32px;
+  border-radius: var(--kd-c-button-sizing-height-large, 32px);
 }
 .kd-btn-text {
   height: auto;
   width: auto;
-  color: #666;
+  color: var(--kd-c-button-text-color-text, var(--kd-g-color-theme, #5582f3));
   padding: 0;
   min-width: auto;
 }
 .kd-btn-text:hover {
-  color: #5582f3;
+  color: var(--kd-c-button-text-color-text-hover, var(--kd-g-color-theme-5, #87adff));
 }
 .kd-btn-text:active {
-  color: #375cca;
+  color: var(--kd-c-button-text-color-text-active, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-btn-text[disabled] {
-  color: #b2b2b2 !important;
-}
-.kd-btn-link {
-  height: auto;
-  width: auto;
-  text-decoration: none;
-  color: #0e5fd8;
-  padding: 0;
-  min-width: auto;
-}
-.kd-btn-link:hover {
-  color: #3987ed;
-}
-.kd-btn-link:active {
-  color: #0041b0;
+  color: var(--kd-c-button-text-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
 }
 .kd-btn-no-border {
   border: none;
@@ -305,10 +304,10 @@
   background-color: transparent;
 }
 .kd-btn-background-ghost.kd-btn-primary {
-  color: #5582f3;
+  color: var(--kd-c-button-background-ghost-color-text, var(--kd-g-color-theme, #5582f3));
 }
 .kd-btn-background-ghost.kd-btn-primary:hover {
-  color: #fff;
+  color: var(--kd-c-button-background-ghost-color-text-hover, var(--kd-g-color-white, #fff));
 }
 .kd-btn-loading {
   cursor: default;

package/lib/button/style/index.less

@@ -6,71 +6,78 @@
 
 	// 按钮wave动效
 	transition: color @transition-duration, background-color @transition-duration, border-color @transition-duration;
-	&:not(&-link):not(&-text)::after{
+	&:not(&-text)::after{
 		position: absolute;
 		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
 		border-radius: inherit;
-		box-shadow: 0 0 0 0 @theme-color;
+		box-shadow: 0 0 0 0 @color-theme;
 		opacity: 0.2;
 		content: '';
 		pointer-events: none;
 		clear: both;
 	}
-	&:not(&-link):not(&-text)[click-animating-wave='true']::after {
-		animation: fadeEffect calc(@transition-duration + 0.1s) @ease-out forwards,
-        waveEffect calc(@transition-duration - 0.1s) @ease-out forwards;
+	&:not(&-text)[click-animating-wave='true']::after {
+		animation: fadeEffect @btn-duration-fade @ease-out forwards,
+        waveEffect @btn-duration-wave @ease-out forwards;
 	}
 
 	// 次要按钮
 	&-second {
 		.btn-type(@btn-second-border-color, @btn-second-background-color, @btn-second-font-color);
-		&:hover,&:active {
+		&:hover {
+			&:not(.@{btn-prefix-cls}-loading) {
+				background-color: @btn-second-background-color-hover;
+				border-color: @btn-second-border-color-hover;
+				color: @btn-second-font-color-hover;
+			}
+		}
+		&:active {
 			&:not(.@{btn-prefix-cls}-loading) {
-				background-color: @white;
-				border-color: @strong-border-color;
-				color: @secondary-text-color
+				background-color: @btn-second-background-color-active;
+				border-color: @btn-second-border-color-active;
+				color: @btn-second-font-color-active;
 			}
 		}
 		&:disabled {
-			border-color: @btn-second-border-color !important;
-			background-color: @btn-second-background-color !important;
-			color: @btn-second-font-color !important;
+			border-color: @btn-second-border-color-disabled !important;
+			background-color: @btn-second-background-color-disabled !important;
+			color: @btn-second-font-color-disabled !important;
 		}
 	}
 	// 主要按钮
 	&-primary {
 		.btn-type(@btn-primary-border-color, @btn-primary-background-color, @btn-primary-font-color);
 		&:hover:not(.@{btn-prefix-cls}-loading) {
-			background-color: @theme-color-hover;
-			border-color: @theme-color-hover;
+			background-color: @btn-primary-background-color-hover;
+			border-color: @btn-primary-border-color-hover;
 		}
 		&:active:not(.@{btn-prefix-cls}-loading) {
-			border-color: @theme-color-click;
-			background-color: @theme-color-click;
+			border-color: @btn-primary-border-color-active;
+			background-color: @btn-primary-background-color-active;
 		}
 		&:disabled {
-			background-color: @theme-color-disabled !important;
-			border-color: @theme-color-disabled !important;
+			background-color: @btn-primary-background-color-disabled !important;
+			border-color: @btn-primary-border-color-disabled !important;
 		}
 	}
 	// 幽灵按钮
 	&-ghost {
 		.btn-type(@btn-ghost-border-color, @btn-ghost-background-color, @btn-ghost-font-color);
 		&:hover:not(.@{btn-prefix-cls}-loading) {
-			border-color: @theme-color;
-			color: @theme-color;
+			border-color: @btn-ghost-border-color-hover;
+			color: @btn-ghost-font-color-hover;
 		}
 		&:active:not(.@{btn-prefix-cls}-loading) {
-			border-color: @theme-color-click;
-			color: @theme-color-click;
+			border-color: @btn-ghost-border-color-hover;
+			color: @btn-ghost-font-color-active;
 		}
 		&:disabled {
-			background-color: @disabled-contain-bg !important;
-			border-color: @disabled-color !important;
-			color: @disabled-color !important;
+			background-color: @btn-ghost-background-color-disabled !important;
+			border-color: @btn-ghost-border-color-disabled !important;
+			color: @btn-ghost-border-color-disabled !important;
 		}
 	}
 	&-iconWrapper-left {
@@ -86,10 +93,10 @@
 		float: right;
 	}
 	&-loadingIcon {
-		color: @theme-color;
+		color: @btn-g-text-color-loading;
 	}
 	&-primary-loadingIcon {
-		color: @white;
+		color: @btn-primary-g-text-color-loading;
 	}
 	// 小号尺寸按钮
 	&-size-small {
@@ -140,40 +147,25 @@
 	&-text {
 		height: auto;
 		width: auto;
-		color: @secondary-text-color;
+		color: @btn-text-g-text-color;
 		padding: 0;
 		min-width: auto;
 		&:hover {
-			color: @theme-color;
+			color: @btn-text-g-text-color-hover;
 		}
 		&:active {
-			color: @theme-color-click;
+			color: @btn-text-g-text-color-active;
 		}
 		&[disabled] {
-			color: @disabled-color !important;
-		}
-	}
-	// 链接类型按钮
-	&-link {
-		height: auto;
-		width: auto;
-		text-decoration: none;
-		color: @link-color;
-		padding: 0;
-		min-width: auto;
-		&:hover {
-			color: @link-color-hover;
-		}
-		&:active {
-			color: @link-color-active;
+			color: @btn-text-g-text-color-disabled !important;
 		}
 	}
-	
+
 	// 按钮不带边框
 	&-no-border {
 		border: none;
 	}
-	
+
 	// 不可用按钮部分样式
 	&:disabled, &[disabled] {
 		cursor: not-allowed;
@@ -184,9 +176,9 @@
 			background-color: transparent;
 		}
 		&.@{btn-prefix-cls}-primary {
-			color: @theme-color;
+			color: @btn-background-ghost-g-text-color;
 			&:hover {
-				color: @white;
+				color: @btn-background-ghost-g-text-color-hover;
 			}
 		}
 	}
@@ -202,4 +194,4 @@
 	.btn-space {
 		margin-left: 5px;
 	}
-}
+}

package/lib/button/style/mixin.less

@@ -1,3 +1,5 @@
+@import './token.less';
+
 // 按钮默认样式Mixins
 .btn() {
 	padding: 0;
@@ -5,10 +7,10 @@
 	display: inline-block;
 	vertical-align: middle;
 	box-sizing: border-box;
-	font-weight: @font-weight;
-	border: @btn-border-width @btn-border-style transparent;
+	font-weight: @btn-g-font-weight;
+	border: @btn-border-width solid transparent;
 	user-select: none;
-	border-radius: @radius-size;
+	border-radius: @btn-g-radius-border;
 	text-align: center;
 	background-color: transparent;
 	cursor: pointer;
@@ -28,7 +30,7 @@
 .btn-size(@height, @font-size, @padding-vertical, @padding-horizontal, @min-width) {
 	height: @height;
 	min-width: @min-width;
-	line-height: @height - (@padding-vertical * 2) - (@btn-border-width * 2);
+	line-height: calc(@height - (@padding-vertical * 2) - (@btn-border-width * 2));
 	font-size: @font-size;
 	padding: @padding-vertical @padding-horizontal;
 }

package/lib/button/style/token.less

@@ -0,0 +1,88 @@
+@import '../../style/themes/token.less';
+
+@button-custom-prefix: ~'--@{kd-prefix}-c-button';
+
+// color
+@btn-primary-background-color: var(~'@{button-custom-prefix}-primary-color-background', @color-theme); // 基础背景颜色
+@btn-primary-border-color: var(~'@{button-custom-prefix}-primary-color-border', @color-theme); // 基础边框颜色
+@btn-primary-font-color: var(~'@{button-custom-prefix}-primary-color-text', @color-white); // 基础文字颜色
+@btn-primary-background-color-hover: var(~'@{button-custom-prefix}-primary-color-background-hover', @color-theme-hover); // 基础hover背景颜色
+@btn-primary-border-color-hover: var(~'@{button-custom-prefix}-primary-color-border-hover', @color-theme-hover); // 基础hover边框颜色
+@btn-primary-background-color-active: var(~'@{button-custom-prefix}-primary-color-background-active', @color-theme-click); // 基础active背景颜色
+@btn-primary-border-color-active: var(~'@{button-custom-prefix}-primary-color-border-active', @color-theme); // 基础active边框颜色
+@btn-primary-background-color-disabled: var(~'@{button-custom-prefix}-primary-color-background-disabled', @color-theme-disabled); // 基础disabled背景颜色   禁用状态
+@btn-primary-border-color-disabled: var(~'@{button-custom-prefix}-primary-color-border-disabled', @color-theme-disabled); // 基础disabled边框颜色
+
+@btn-ghost-background-color: var(~'@{button-custom-prefix}-ghost-color-background', transparent); // 幽灵背景颜色
+@btn-ghost-border-color: var(~'@{button-custom-prefix}-ghost-color-border', @color-border-strong); //幽灵边框颜色
+@btn-ghost-font-color: var(~'@{button-custom-prefix}-ghost-color-text', @color-text-secondary); // 幽灵按钮文字颜色
+@btn-ghost-border-color-hover: var(~'@{button-custom-prefix}-ghost-color-border-hover', @color-theme); //幽灵hover边框颜色
+@btn-ghost-font-color-hover: var(~'@{button-custom-prefix}-ghost-color-text-hover', @color-theme); // 幽灵hover按钮文字颜色
+@btn-ghost-border-color-active: var(~'@{button-custom-prefix}-ghost-color-border-active', @color-theme-click); //幽灵active边框颜色
+@btn-ghost-background-color-disabled: var(~'@{button-custom-prefix}-ghost-color-background-disabled', @color-background-contain-disabled); // 幽灵disabled背景颜色
+@btn-ghost-font-color-active: var(~'@{button-custom-prefix}-ghost-color-text-active', @color-theme-click); // 幽灵active按钮文字颜色
+@btn-ghost-border-color-disabled: var(~'@{button-custom-prefix}-ghost-color-border-disabled', @color-disabled); //幽灵disabled边框颜色
+@btn-ghost-font-color-disabled: var(~'@{button-custom-prefix}-ghost-color-text-disabled', @color-disabled); // 幽灵disabled按钮文字颜色
+
+@btn-second-background-color: var(~'@{button-custom-prefix}-second-color-background', @color-background-3); // 次要背景颜色
+@btn-second-border-color: var(~'@{button-custom-prefix}-second-color-border', @color-border-strong-3); // 次要边框颜色
+@btn-second-font-color: var(~'@{button-custom-prefix}-second-color-text', @color-text-secondary-3); // 次要文字颜色
+@btn-second-background-color-hover: var(~'@{button-custom-prefix}-second-color-background-hover', @color-white); // 次要hover背景颜色
+@btn-second-border-color-hover: var(~'@{button-custom-prefix}-second-color-border-hover', @color-border-strong); // 次要hover边框颜色
+@btn-second-font-color-hover: var(~'@{button-custom-prefix}-second-color-text-hover', @color-text-secondary); // 次要hover文字颜色
+@btn-second-background-color-active: var(~'@{button-custom-prefix}-second-color-background-active', @color-white); // 次要active背景颜色
+@btn-second-border-color-active: var(~'@{button-custom-prefix}-second-color-border-active', @color-border-strong); // 次要active边框颜色
+@btn-second-font-color-active: var(~'@{button-custom-prefix}-second-color-text-active', @color-text-secondary); // 次要active文字颜色
+@btn-second-background-color-disabled: var(~'@{button-custom-prefix}-second-color-background-disabled', @color-background-3); // 次要disabled背景颜色
+@btn-second-border-color-disabled: var(~'@{button-custom-prefix}-second-color-border-disabled', @color-text-secondary-3); // 次要disabled边框颜色
+@btn-second-font-color-disabled: var(~'@{button-custom-prefix}-second-color-text-disabled', @color-text-secondary-3); // 次要disabled文字颜色
+
+@btn-text-g-text-color: var(~'@{button-custom-prefix}-text-color-text', @color-theme);
+@btn-text-g-text-color-hover: var(~'@{button-custom-prefix}-text-color-text-hover', @color-theme-hover);
+@btn-text-g-text-color-active: var(~'@{button-custom-prefix}-text-color-text-active', @color-theme-click);
+@btn-text-g-text-color-disabled: var(~'@{button-custom-prefix}-text-color-text-disabled', @color-disabled);
+
+@btn-disabled-background-color: var(~'@{button-custom-prefix}-color-background-disabled', @color-background-contain-disabled); // 禁用状态 背景颜色
+@btn-disabled-border-color: var(~'@{button-custom-prefix}-color-border-disabled', @color-border-strong); // 禁用状态 边框颜色
+@btn-disabled-font-color: var(~'@{button-custom-prefix}-text-color-disabled', @color-white); // 禁用状态 文字颜色
+
+@btn-danger-background-color: var(~'@{button-custom-prefix}-danger-color-background', @color-error); // 危险状态 背景颜色
+@btn-danger-border-color: var(~'@{button-custom-prefix}-danger-color-border', @color-error); // 危险状态 边框颜色
+@btn-danger-font-color: var(~'@{button-custom-prefix}-danger-color-text', @color-white); // 危险状态 文字颜色
+
+@btn-g-text-color-loading: var(~'@{button-custom-prefix}-text-color-loading', @color-theme);
+@btn-primary-g-text-color-loading: var(~'@{button-custom-prefix}-primary-color-text-loading', @color-white);
+
+@btn-background-ghost-g-text-color: var(~'@{button-custom-prefix}-background-ghost-color-text', @color-theme);
+@btn-background-ghost-g-text-color-hover: var(~'@{button-custom-prefix}-background-ghost-color-text-hover', @color-white);
+
+// duration
+@btn-transition-fn: var(~'@{button-custom-prefix}-motion-timing-function', cubic-bezier(0.075, 0.82, 0.165, 1));
+@btn-duration-fade: var(~'@{button-custom-prefix}-motion-duration-fade', @duration-slowly);
+@btn-duration-wave: var(~'@{button-custom-prefix}-motion-duration-wave', @duration-quickly);
+
+// font
+@btn-g-font-weight: var(~'@{button-custom-prefix}-font-weight', @font-weight-light);
+@btn-small-font-size: var(~'@{button-custom-prefix}-font-size-small', @font-size-small); // 小号 文字大小
+@btn-middle-font-size: var(~'@{button-custom-prefix}-font-size-middle', @font-size-small); // 中号 文字大小
+@btn-large-font-size: var(~'@{button-custom-prefix}-font-size-large', @font-size-large); // 大号 文字大小
+
+// radius
+@btn-g-radius-border: var(~'@{button-custom-prefix}-radius-border', @radius-border); //圆角
+
+// sizing
+@btn-border-width: var(~'@{button-custom-prefix}-sizing-border', 1px);
+@btn-small-height: var(~'@{button-custom-prefix}-sizing-height-small', 24px); // 小号 高度
+@btn-small-min-width: var(~'@{button-custom-prefix}-sizing-min-width-small', 60px); // 小号 最小宽度
+@btn-middle-height: var(~'@{button-custom-prefix}-sizing-height-middle', 28px); // 中号 高度     高度配置
+@btn-middle-min-width: var(~'@{button-custom-prefix}-sizing-min-width-middle', 60px); // 中号 最小宽度
+@btn-large-height: var(~'@{button-custom-prefix}-sizing-height-large', 32px); // 大号 高度
+@btn-large-min-width: var(~'@{button-custom-prefix}-sizing-min-width-large', 80px); // 大号 最小宽度
+
+// spacing
+@btn-small-padding-vertical: var(~'@{button-custom-prefix}-spacing-padding-vertical-small', 3px); // 小号 内间距 纵向
+@btn-small-padding-horizontal: var(~'@{button-custom-prefix}-spacing-padding-horizontal-small', 8px); // 小号 内间距 横向
+@btn-middle-padding-vertical: var(~'@{button-custom-prefix}-spacing-padding-vertical-middle', 5px); // 中号 内间距 纵向
+@btn-middle-padding-horizontal: var(~'@{button-custom-prefix}-spacing-padding-horizontal-middle', 8px); // 中号 内间距 纵向   宽度配置
+@btn-large-padding-vertical: var(~'@{button-custom-prefix}-spacing-padding-vertical-large', 6px); // 大号 内间距 纵向
+@btn-large-padding-horizontal: var(~'@{button-custom-prefix}-spacing-padding-horizontal-large', 8px); // 大号 内间距 横向

package/lib/card/card.d.ts

@@ -19,6 +19,7 @@ export interface CardProps {
     headStyle?: React.CSSProperties;
     bodyStyle?: React.CSSProperties;
     actions?: Array<React.ReactNode>;
+    extra?: Array<React.ReactNode>;
 }
 declare const Card: React.FC<CardProps>;
 export default Card;

package/lib/card/card.js

@@ -42,6 +42,7 @@ var Card = function Card(props) {
       title = _getCompProps.title,
       avatar = _getCompProps.avatar,
       actions = _getCompProps.actions,
+      extra = _getCompProps.extra,
       children = _getCompProps.children,
       className = _getCompProps.className,
       hoverable = _getCompProps.hoverable,
@@ -81,7 +82,9 @@ var Card = function Card(props) {
     style: bodyStyle
   }, children), actions && /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-actions")
-  }, actions));
+  }, actions), extra && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-extra")
+  }, extra));
 };
 
 Card.displayName = 'Card';