@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/es/base-data/style/index.less

@@ -1,25 +1,25 @@
 @import '../../style/themes/index';
-@import './mixin.less';
+@import './token.less';
 
 @advancedSelector-prefix-cls: ~'@{kd-prefix}-baseData';
 
 .@{advancedSelector-prefix-cls} {
-  width: @advancedSelector-width;
+  width: @base-data-width;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid @advancedSelector-border-color;
+  border-bottom: 1px solid @base-data-border-color;
 
   &-disabled {
     cursor: not-allowed;
   }
 
   &:not(.@{advancedSelector-prefix-cls}-disabled):hover {
-    border-color: @theme-color;
+    border-color: @base-data-color-border-hover;
 
     .@{advancedSelector-prefix-cls} {
       &-detail,
       &-suffix {
-        color: @theme-color;
+        color: @base-data-icon-text-color-hover;
       }
 
       &-detail {
@@ -46,12 +46,12 @@
 
   &-dropdown {
     margin: 0;
-    z-index: @zIndex-popper;
+    z-index: @base-data-dropdown-z-index;
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
-    border-radius: @radius-size;
-    background: @bg;
+    border-radius: @base-data-dropdown-radius-border;
+    background: @base-data-dropdown-color-background;
     overflow: auto;
-    max-height: @advancedSelector-dropdown-height;
+    max-height: @base-data-dropdown-height;
 
     &-columns,
     &-options {
@@ -74,10 +74,10 @@
           visibility: hidden;
 
           &-icon {
-            color: @warning-color;
+            color: @base-data-dropdown-icon-text-color;
 
             &:hover {
-              color: @warning-color;
+              color: @base-data-dropdown-icon-text-color-hover;
             }
           }
 
@@ -85,7 +85,7 @@
             color: #666;
 
             &:hover {
-              color: @warning-color;
+              color: @base-data-dropdown-text-color-hover;
             }
           }
         }
@@ -105,14 +105,14 @@
 
     &-columns {
       height: 36px;
-      background: @advancedSelector-hover-bg;
+      background: @base-data-hover-bg;
     }
 
     &-options {
-      height: @advancedSelector-dropdown-options-height;
+      height: @base-data-dropdown-options-height;
 
       &:hover {
-        background: @advancedSelector-hover-bg;
+        background: @base-data-hover-bg;
 
         .@{advancedSelector-prefix-cls}-dropdown-options-item-collect {
           visibility: visible;
@@ -122,10 +122,10 @@
 
     &-footer {
       height: 40px;
-      border-top: 1px solid @strong-border-color;
+      border-top: 1px solid @base-data-footer-color-border;
 
       &-btn {
-        color: @link-color;
+        color: @base-data-footer-btn-text-color;
         height: 100%;
         display: flex;
         align-items: center;

package/es/base-data/style/token.less

@@ -0,0 +1,27 @@
+@import '../../style/themes/token.less';
+
+@base-data-custom-prefix: ~'--@{kd-prefix}-c-base-data';
+
+// color
+@base-data-border-color: var(~'@{base-data-custom-prefix}-color-border', #999);
+@base-data-hover-bg: var(~'@{base-data-custom-prefix}-color-background-hover', @color-hover);
+@base-data-color-border-hover: var(~'@{base-data-custom-prefix}-border-color-hover', @color-theme);
+@base-data-dropdown-color-background: var(~'@{base-data-custom-prefix}-dropdown-radius-border', @color-background);
+@base-data-dropdown-icon-text-color: var(~'@{base-data-custom-prefix}-dropdown-icon-color-text', @color-warning);
+@base-data-dropdown-icon-text-color-hover: var(~'@{base-data-custom-prefix}-dropdown-icon-color-text-hover', @color-warning);
+@base-data-dropdown-text-color-hover: var(~'@{base-data-custom-prefix}-dropdown-color-text-hover', @color-warning);
+@base-data-dropdown-search-icon-text-color: var(~'@{base-data-custom-prefix}-dropdown-search-icon-color-text', @color-text-link-hover);
+@base-data-footer-color-border: var(~'@{base-data-custom-prefix}-footer-color-border', @color-border-strong);
+@base-data-icon-text-color-hover: var(~'@{base-data-custom-prefix}-icon-color-text-hover', @color-theme);
+@base-data-footer-btn-text-color: var(~'@{base-data-custom-prefix}-footer-btn-color-text', @color-text-link);
+
+// radius
+@base-data-dropdown-radius-border: var(~'@{base-data-custom-prefix}-dropdown-radius-border', @radius-border);
+
+// sizing
+@base-data-width: var(~'@{base-data-custom-prefix}-sizing-width', 230px);
+@base-data-dropdown-height: var(~'@{base-data-custom-prefix}-dropdown-sizing-height', 400px);
+@base-data-dropdown-options-height: var(~'@{base-data-custom-prefix}-dropdown-options-sizing-height', 32px);
+
+// z-index
+@base-data-dropdown-z-index: var(~'@{base-data-custom-prefix}-dropdown-z-index', @z-index-popper);

package/es/button/button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const ButtonTypes: ["second", "primary", "ghost", "link", "text"];
+export declare const ButtonTypes: ["second", "primary", "ghost", "text"];
 export declare type ButtonType = typeof ButtonTypes[number];
 export declare const ButtonSizes: ["large", "middle", "small"];
 export declare type ButtonSize = typeof ButtonSizes[number];
@@ -16,8 +16,6 @@ export interface IButtonProps {
     shape?: ButtonShape;
     style?: Record<string, unknown>;
     className?: string;
-    target?: string;
-    href?: string;
     prefixCls?: string;
     loading?: boolean;
     ghost?: boolean;

package/es/button/button.js

@@ -23,7 +23,7 @@ import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import { tuple } from '../_utils/type';
 import devWarning from '../_utils/devwarning';
-export var ButtonTypes = tuple('second', 'primary', 'ghost', 'link', 'text');
+export var ButtonTypes = tuple('second', 'primary', 'ghost', 'text');
 export var ButtonSizes = tuple('large', 'middle', 'small');
 export var ButtonShapes = tuple('circle', 'round');
 export var ButtonIconPlaces = tuple('left', 'right');
@@ -44,8 +44,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,
@@ -57,7 +55,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"]);
 
   devWarning(ButtonTypes.indexOf(type) === -1, 'button', "cannot found button type '".concat(type, "'"));
   var btnPrefixCls = getPrefixCls(prefixCls, 'btn', customPrefixcls); // 按钮样式前缀
@@ -107,7 +105,7 @@ var InternalButton = function InternalButton(props, ref) {
     return child;
   };
 
-  var isTextBtn = type === 'link' || type === 'text'; // 判断按钮是否文本或链接类型。这些类型下有部分样式不适用
+  var isTextBtn = type === 'text'; // 判断按钮是否文本类型。这些类型下有部分样式不适用
 
   var btnClasses = classNames(btnPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(btnPrefixCls, "-")).call(_context, type), type), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(btnPrefixCls, "-size-")).call(_context2, size), size), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(btnPrefixCls, "-shape-")).call(_context3, shape), shape && !isTextBtn), _defineProperty(_classNames, "".concat(btnPrefixCls, "-no-border"), !bordered), _defineProperty(_classNames, "".concat(btnPrefixCls, "-background-ghost"), ghost && !disabled), _defineProperty(_classNames, "".concat(btnPrefixCls, "-loading"), loading && !isTextBtn), _defineProperty(_classNames, "".concat(btnPrefixCls, "-block"), block && !shape), _classNames));
 
@@ -125,16 +123,6 @@ var InternalButton = function InternalButton(props, ref) {
   var btnChild = handleChild(children);
 
   switch (type) {
-    case 'link':
-      return /*#__PURE__*/React.createElement("a", _extends({
-        ref: buttonRef,
-        target: target,
-        href: href,
-        className: btnClasses,
-        disabled: disabled,
-        onClick: handleClick
-      }, others), children);
-
     case 'text':
       return /*#__PURE__*/React.createElement("span", _extends({
         ref: buttonRef,

package/es/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/es/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;
 	}
-}
+}