@kdcloudjs/kdesign 1.1.3 → 1.2.0

package/es/button/style/index.less

@@ -1,197 +1,337 @@
 @import '../../style/themes/index';
 @import './mixin.less';
 @btn-prefix-cls: ~'@{kd-prefix}-btn';
+
 .@{btn-prefix-cls} {
-	.btn;
-
-	// 按钮wave动效
-	transition: color @transition-duration, background-color @transition-duration, border-color @transition-duration;
-	&:not(&-text)::after{
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		border-radius: inherit;
-		box-shadow: 0 0 0 0 @color-theme;
-		opacity: 0.2;
-		content: '';
-		pointer-events: none;
-		clear: both;
-	}
-	&: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 {
-			&: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: @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-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: @btn-primary-background-color-hover;
-			border-color: @btn-primary-border-color-hover;
-		}
-		&:active:not(.@{btn-prefix-cls}-loading) {
-			border-color: @btn-primary-border-color-active;
-			background-color: @btn-primary-background-color-active;
-		}
-		&:disabled {
-			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: @btn-ghost-border-color-hover;
-			color: @btn-ghost-font-color-hover;
-		}
-		&:active:not(.@{btn-prefix-cls}-loading) {
-			border-color: @btn-ghost-border-color-hover;
-			color: @btn-ghost-font-color-active;
-		}
-		&:disabled {
-			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 {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		float: left;
-	}
-	&-iconWrapper-right {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		float: right;
-	}
-	&-loadingIcon {
-		color: @btn-g-text-color-loading;
-	}
-	&-primary-loadingIcon {
-		color: @btn-primary-g-text-color-loading;
-	}
-	// 小号尺寸按钮
-	&-size-small {
-		.btn-size(@btn-small-height, @btn-small-font-size, @btn-small-padding-vertical, @btn-small-padding-horizontal, @btn-small-min-width);
-	}
-	// 中号尺寸按钮
-	&-size-middle {
-		.btn-size(@btn-middle-height, @btn-middle-font-size, @btn-middle-padding-vertical, @btn-middle-padding-horizontal, @btn-middle-min-width);
-	}
-	// 大号尺寸按钮
-	&-size-large {
-		.btn-size(@btn-large-height, @btn-large-font-size, @btn-large-padding-vertical, @btn-large-padding-horizontal, @btn-large-min-width);
-	}
-
-	// 圆形按钮
-	&-shape-circle {
-		border-radius: 50%;
-		min-width: auto;
-	}
-
-	// 圆形小号尺寸按钮宽度等同其高度
-	&-shape-circle&-size-small {
-		.btn-shape-circle-width(@btn-small-height);
-	}
-	// 圆形中号尺寸按钮宽度等同其高度
-	&-shape-circle&-size-middle {
-		.btn-shape-circle-width(@btn-middle-height);
-	}
-	// 圆形大号尺寸按钮宽度等同其高度
-	&-shape-circle&-size-large {
-		.btn-shape-circle-width(@btn-large-height);
-	}
-
-	// 椭圆形小号尺寸按钮border-radius等同其高度
-	&-shape-round&-size-small {
-		border-radius: @btn-small-height;
-	}
-	// 椭圆形中号尺寸按钮border-radius等同其高度
-	&-shape-round&-size-middle {
-		border-radius: @btn-middle-height;
-	}
-	// 椭圆形大号尺寸按钮border-radius等同其高度
-	&-shape-round&-size-large {
-		border-radius: @btn-large-height;
-	}
-
-	// 文本类型按钮
-	&-text {
-		height: auto;
-		width: auto;
-		color: @btn-text-g-text-color;
-		padding: 0;
-		min-width: auto;
-		&:hover {
-			color: @btn-text-g-text-color-hover;
-		}
-		&:active {
-			color: @btn-text-g-text-color-active;
-		}
-		&[disabled] {
-			color: @btn-text-g-text-color-disabled !important;
-		}
-	}
-
-	// 按钮不带边框
-	&-no-border {
-		border: none;
-	}
-
-	// 不可用按钮部分样式
-	&:disabled, &[disabled] {
-		cursor: not-allowed;
-	}
-	// 按钮开启幽灵化
-	&-background-ghost {
-		&, &:hover, &:active {
-			background-color: transparent;
-		}
-		&.@{btn-prefix-cls}-primary {
-			color: @btn-background-ghost-g-text-color;
-			&:hover {
-				color: @btn-background-ghost-g-text-color-hover;
-			}
-		}
-	}
-	// 加载中按钮
-	&-loading {
-		cursor: default;
-	}
-	// 按钮开启块化撑满父元素
-	&-block {
-		width: 100%;
-	}
-	// 图标与文本之间的间隔
-	.btn-space {
-		margin-left: 5px;
-	}
+  .btn;
+
+  // 按钮wave动效
+  transition: color @transition-duration, background-color @transition-duration, border-color @transition-duration;
+  &:not(&-text)::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: inherit;
+    box-shadow: 0 0 0 0 @color-theme;
+    opacity: 0.2;
+    content: '';
+    pointer-events: none;
+    clear: both;
+  }
+  &: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 {
+      &: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: @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-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: @btn-primary-background-color-hover;
+      border-color: @btn-primary-border-color-hover;
+    }
+    &:active:not(.@{btn-prefix-cls}-loading) {
+      border-color: @btn-primary-border-color-active;
+      background-color: @btn-primary-background-color-active;
+    }
+    &:disabled {
+      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) {
+      background-color: @btn-ghost-background-color-hover;
+      border-color: @btn-ghost-border-color-hover;
+      color: @btn-ghost-font-color-hover;
+    }
+
+    &:active:not(.@{btn-prefix-cls}-loading) {
+      background-color: @btn-ghost-background-color-active;
+      border-color: @btn-ghost-border-color-hover;
+      color: @btn-ghost-font-color-active;
+    }
+
+    &:disabled {
+      background-color: @btn-ghost-background-color-disabled !important;
+      border-color: @btn-ghost-border-color-disabled !important;
+      color: @btn-ghost-font-color-disabled !important;
+    }
+  }
+
+  &-iconWrapper-left {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    float: left;
+  }
+  &-iconWrapper-right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    float: right;
+  }
+
+  &-loadingIcon {
+    color: @btn-g-text-color-loading;
+  }
+
+  &-primary-loadingIcon {
+    color: @btn-primary-g-text-color-loading;
+  }
+
+  // 小号尺寸按钮
+  &-size-small {
+    .btn-size(@btn-small-height, @btn-small-font-size, @btn-small-padding-vertical, @btn-small-padding-horizontal, @btn-small-min-width);
+    &.@{btn-prefix-cls}-icon-only {
+      font-size: @btn-icon-small-font-size;
+      padding: 0 @btn-icon-padding-horizontal;
+    }
+
+    .@{btn-prefix-cls}-group-basic-icon {
+      font-size: @btn-icon-small-font-size;
+    }
+  }
+
+  // 中号尺寸按钮
+  &-size-middle {
+    .btn-size(@btn-middle-height, @btn-middle-font-size, @btn-middle-padding-vertical, @btn-middle-padding-horizontal, @btn-middle-min-width);
+    &.@{btn-prefix-cls}-icon-only {
+      font-size: @btn-icon-middle-font-size;
+      padding: 0 @btn-icon-padding-horizontal;
+    }
+
+    .@{btn-prefix-cls}-group-basic-icon {
+      font-size: @btn-icon-middle-font-size;
+    }
+  }
+
+  // 大号尺寸按钮
+  &-size-large {
+    .btn-size(@btn-large-height, @btn-large-font-size, @btn-large-padding-vertical, @btn-large-padding-horizontal, @btn-large-min-width);
+    &.@{btn-prefix-cls}-icon-only {
+      font-size: @btn-icon-large-font-size;
+      padding: 0 @btn-icon-padding-horizontal;
+    }
+
+    .@{btn-prefix-cls}-group-basic-icon {
+      font-size: @btn-icon-large-font-size;
+    }
+  }
+
+  // 圆形按钮
+  &-shape-circle {
+    border-radius: 50%;
+    min-width: auto;
+  }
+
+  // 圆形小号尺寸按钮宽度等同其高度
+  &-shape-circle&-size-small {
+    .btn-shape-circle-width(@btn-small-height);
+  }
+  // 圆形中号尺寸按钮宽度等同其高度
+  &-shape-circle&-size-middle {
+    .btn-shape-circle-width(@btn-middle-height);
+  }
+  // 圆形大号尺寸按钮宽度等同其高度
+  &-shape-circle&-size-large {
+    .btn-shape-circle-width(@btn-large-height);
+  }
+
+  // 椭圆形小号尺寸按钮border-radius等同其高度
+  &-shape-round&-size-small {
+    border-radius: @btn-small-height;
+  }
+  // 椭圆形中号尺寸按钮border-radius等同其高度
+  &-shape-round&-size-middle {
+    border-radius: @btn-middle-height;
+  }
+  // 椭圆形大号尺寸按钮border-radius等同其高度
+  &-shape-round&-size-large {
+    border-radius: @btn-large-height;
+  }
+
+  // 直角按钮
+  &-shape-none {
+    border-radius: 0;
+  }
+
+  // 文本类型按钮
+  &-text {
+    height: auto;
+    width: auto;
+    color: @btn-text-g-text-color;
+    padding: 0;
+    min-width: auto;
+
+    &:hover {
+      color: @btn-text-g-text-color-hover;
+    }
+
+    &:active {
+      color: @btn-text-g-text-color-active;
+    }
+
+    &[disabled] {
+      color: @btn-text-g-text-color-disabled !important;
+    }
+  }
+
+  // 按钮不带边框
+  &-no-border {
+    border: none;
+  }
+
+  // 不可用按钮部分样式
+  &:disabled,
+  &[disabled] {
+    cursor: not-allowed;
+  }
+  // 按钮开启幽灵化
+  &-background-ghost {
+    &,
+    &:hover,
+    &:active {
+      background-color: transparent;
+    }
+
+    &.@{btn-prefix-cls}-primary {
+      color: @btn-background-ghost-g-text-color;
+
+      &:hover {
+        color: @btn-background-ghost-g-text-color-hover;
+      }
+    }
+  }
+  // 加载中按钮
+  &-loading {
+    cursor: default;
+  }
+  // 按钮开启块化撑满父元素
+  &-block {
+    width: 100%;
+  }
+  // 图标与文本之间的间隔
+  .btn-space {
+    margin-left: 4px;
+  }
+}
+
+.@{btn-prefix-cls}-group {
+  display: inline-block;
+
+  &-basic {
+    .@{btn-prefix-cls} {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &-icon {
+      margin-left: 4px;
+    }
+  }
+
+  &-trigger {
+    .@{btn-prefix-cls}-primary {
+      background: @btn-group-trigger-color-background;
+      &:hover {
+        background: @btn-group-trigger-color-background-hover;
+        border-color: @btn-group-trigger-color-background-hover;
+      }
+
+      &:active {
+        background: @btn-group-trigger-color-background-active;
+      }
+
+      &:disabled {
+        background: @btn-group-trigger-color-background-disabled !important;
+      }
+    }
+
+    .@{btn-prefix-cls} {
+      margin-left: -1px;
+    }
+  }
+
+  .@{btn-prefix-cls} {
+    &-size-small,
+    &-size-middle,
+    &-size-large {
+      min-width: unset;
+    }
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .@{kd-prefix}-dropdown {
+    &-menu {
+      padding: 0;
+    }
+  }
+
+  &-dropdown {
+    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+    background: @btn-group-dropdown-color-background;
+    color: #333333;
+    min-width: @btn-group-dropdown-min-width;
+
+    &-item {
+      height: @btn-group-dropdown-item-height;
+      line-height: @btn-group-dropdown-item-height;
+      cursor: pointer;
+      padding: 0 @btn-group-dropdown-item-horizontal;
+      &:hover {
+        background: @btn-group-dropdown-item-color-background-hover;
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid @btn-group-dropdown-item-border-color;
+      }
+    }
+  }
+
+  &.topLeft.hidden,
+  &.bottomLeft.hidden,
+  &.topRight.hidden,
+  &.bottomRight.hidden {
+    opacity: 0;
+    visibility: hidden;
+    transition: all calc(@transition-duration - 0.1s) @ease;
+  }
 }

package/es/button/style/token.less

@@ -14,33 +14,36 @@
 @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-border-color: var(~'@{button-custom-prefix}-ghost-color-border', @color-theme-6); //幽灵边框颜色
+@btn-ghost-font-color: var(~'@{button-custom-prefix}-ghost-color-text', #5582F3); // 幽灵按钮文字颜色
+@btn-ghost-background-color-hover: var(~'@{button-custom-prefix}-ghost-color-background-hover', @color-theme-5); //幽灵hover背景颜色
+@btn-ghost-border-color-hover: var(~'@{button-custom-prefix}-ghost-color-border-hover', transparent); //幽灵hover边框颜色
+@btn-ghost-font-color-hover: var(~'@{button-custom-prefix}-ghost-color-text-hover',#ffffff); // 幽灵hover按钮文字颜色
+@btn-ghost-font-color-active: var(~'@{button-custom-prefix}-ghost-color-text-active', #ffffff); // 幽灵active按钮文字颜色
+@btn-ghost-background-color-active: var(~'@{button-custom-prefix}-ghost-color-background-active', @color-theme-7); //幽灵active背景颜色
+@btn-ghost-border-color-active: var(~'@{button-custom-prefix}-ghost-color-border-active', transparent); //幽灵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-ghost-border-color-disabled: var(~'@{button-custom-prefix}-ghost-color-border-disabled', #D9D9D9); //幽灵disabled边框颜色
+@btn-ghost-font-color-disabled: var(~'@{button-custom-prefix}-ghost-color-text-disabled', #B2B2B2); // 幽灵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: var(~'@{button-custom-prefix}-second-color-background', transparent); // 次要背景颜色
+@btn-second-border-color: var(~'@{button-custom-prefix}-second-color-border', #D9D9D9); // 次要边框颜色
+@btn-second-font-color: var(~'@{button-custom-prefix}-second-color-text', #212121); // 次要文字颜色
 @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-border-color-hover: var(~'@{button-custom-prefix}-second-color-border-hover', @color-theme); // 次要hover边框颜色
+@btn-second-font-color-hover: var(~'@{button-custom-prefix}-second-color-text-hover', @color-theme); // 次要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-second-border-color-active: var(~'@{button-custom-prefix}-second-color-border-active', @color-theme-click); // 次要active边框颜色
+@btn-second-font-color-active: var(~'@{button-custom-prefix}-second-color-text-active', @color-theme-click); // 次要active文字颜色
+@btn-second-background-color-disabled: var(~'@{button-custom-prefix}-second-color-background-disabled', @color-background-contain-disabled); // 次要disabled背景颜色
+@btn-second-border-color-disabled: var(~'@{button-custom-prefix}-second-color-border-disabled', #D9D9D9); // 次要disabled边框颜色
+@btn-second-font-color-disabled: var(~'@{button-custom-prefix}-second-color-text-disabled', #B2B2B2); // 次要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-text-g-text-color: var(~'@{button-custom-prefix}-text-color-text', @color-theme-6);
+@btn-text-g-text-color-hover: var(~'@{button-custom-prefix}-text-color-text-hover', @color-theme-5);
+@btn-text-g-text-color-active: var(~'@{button-custom-prefix}-text-color-text-active', @color-theme-7);
+@btn-text-g-text-color-disabled: var(~'@{button-custom-prefix}-text-color-text-disabled', @color-theme-4);
 
 @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); // 禁用状态 边框颜色
@@ -55,6 +58,13 @@
 
 @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);
+@btn-group-dropdown-item-border-color: var(~'@{button-custom-prefix}-group-dropdown-item-border-color', #E5E5E5); // 集合按钮 下拉边框颜色
+@btn-group-dropdown-item-color-background-hover: var(~'@{button-custom-prefix}-group-dropdown-item-color-background-hover', #F5F5F5); // 集合按钮 下拉hover背景颜色
+@btn-group-dropdown-color-background: var(~'@{button-custom-prefix}-group-dropdown-color-background', #fff); // 集合按钮 下拉菜单背景颜色
+@btn-group-trigger-color-background: var(~'@{button-custom-prefix}-group-trigger-color-background', #4367c1);
+@btn-group-trigger-color-background-hover: var(~'@{button-custom-prefix}-group-trigger-color-background-hover', #4c74da);
+@btn-group-trigger-color-background-active: var(~'@{button-custom-prefix}-group-trigger-color-background-active', #3B5AA9);
+@btn-group-trigger-color-background-disabled: var(~'@{button-custom-prefix}-group-trigger-color-background-disabled', #95a4c8);
 
 // font
 @btn-g-font-weight: var(~'@{button-custom-prefix}-font-weight', @font-weight-light);
@@ -62,13 +72,15 @@
 @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); // 大号 文字大小
 
+@btn-icon-small-font-size: var(~'@{button-custom-prefix}-icon-font-size-small', 14px); // 小号 图标大小
+@btn-icon-middle-font-size: var(~'@{button-custom-prefix}-icon-font-size-middle', 16px); // 中号 图标大小
+@btn-icon-large-font-size: var(~'@{button-custom-prefix}-icon-font-size-large', 18px); // 大号 图标大小
+
 // motion
 @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);
 
-
-
 // radius
 @btn-g-radius-border: var(~'@{button-custom-prefix}-radius-border', @radius-border); //圆角
 
@@ -80,6 +92,8 @@
 @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); // 大号 最小宽度
+@btn-group-dropdown-item-height: var(~'@{button-custom-prefix}--group-dropdown-item-height', 30px);
+@btn-group-dropdown-min-width: var(~'@{button-custom-prefix}-group-dropdown-min-width', 80px);
 
 // spacing
 @btn-small-padding-vertical: var(~'@{button-custom-prefix}-spacing-padding-vertical-small', 3px); // 小号 内间距 纵向
@@ -87,4 +101,6 @@
 @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); // 大号 内间距 横向
+@btn-large-padding-horizontal: var(~'@{button-custom-prefix}-spacing-padding-horizontal-large', 8px); // 大号 内间距 横向
+@btn-group-dropdown-item-horizontal: var(~'@{button-custom-prefix}-group-dropdown-item-horizonta', 12px);
+@btn-icon-padding-horizontal: var(~'@{button-custom-prefix}-icon-spacing-padding-horizontal', 4px);

package/es/carousel/carousel.js

@@ -155,6 +155,10 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     if (autoplay) {
       play();
     }
+
+    return function () {
+      autoplayRef.current && clearTimeout(autoplayRef.current);
+    };
   }, [currentIndex, autoplay, intervalTime, play]);
 
   var showDot = function showDot() {