@kdcloudjs/kdesign 1.1.3 → 1.2.0

package/dist/kdesign-complete.less

@@ -235,7 +235,7 @@
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        padding: 0 6px;
+        padding: 0 4px;
         line-height: 1.5;
         vertical-align: middle;
       }
@@ -253,7 +253,7 @@
 
   &-advanced-arrows {
     color: @anchor-advanced-arrows-color;
-    font-size: @anchor-icon-font-size;
+    font-size: @anchor-advanced-arrows-font-size;
     cursor: pointer;
     &:hover {
       color: @anchor-color-theme;
@@ -317,6 +317,10 @@
   &-link {
     padding: @anchor-link-padding;
 
+    &>.@{anchor-prefix-cls}-link {
+      padding: @anchor-link-secondary-padding;
+    }
+
     &-title {
       text-decoration: none;
       color: @anchor-primary-text-color;
@@ -385,6 +389,7 @@
 @anchor-link-top: var(~'@{anchor-prefix}-spacing-vertical', 7px);
 @anchor-link-left: var(~'@{anchor-prefix}-spacing-horizontal', 7px);
 @anchor-link-padding: var(~'@{anchor-prefix}-spacing-padding', 7px 8px);
+@anchor-link-secondary-padding: var(~'@{anchor-prefix}-secondary-spacing-padding', 12px 8px);
 @anchor-advanced-padding-top: var(~'@{anchor-prefix}-advanced-spacing-padding-top', 8px);
 @anchor-advanced-padding-bottom: var(~'@{anchor-prefix}-advanced-spacing-padding-bottom', 7px);
 @anchor-ink-line-width: var(~'@{anchor-prefix}-ink-line-spacing-width', 1px);
@@ -394,7 +399,7 @@
 @anchor-advanced-lock-size: var(~'@{anchor-prefix}-advanced-lock-font-size', 16px);
 @anchor-font-size: var(~'@{anchor-prefix}-font-size', @font-size-small);
 @anchor-icon-font-size: var(~'@{anchor-prefix}-icon-font-size', 16px);
-
+@anchor-advanced-arrows-font-size: var(~'@{anchor-prefix}-advanced-arrows-font-size', 24px);
 // motion
 @anchor-transition-duration: var(~'@{anchor-prefix}-duration-duration', @duration-promptly);
 
@@ -882,199 +887,339 @@
 
 
 @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;
-	}
+  .btn;
 
-	// 次要按钮
-	&-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);
-	}
+  // 按钮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;
+  }
 
-	// 圆形按钮
-	&-shape-circle {
-		border-radius: 50%;
-		min-width: auto;
-	}
+  // 次要按钮
+  &-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;
+    }
+  }
 
-	// 圆形小号尺寸按钮宽度等同其高度
-	&-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);
-	}
+  // 幽灵按钮
+  &-ghost {
+    .btn-type(@btn-ghost-border-color, @btn-ghost-background-color, @btn-ghost-font-color);
 
-	// 椭圆形小号尺寸按钮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;
-	}
+    &: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;
+    }
 
-	// 文本类型按钮
-	&-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;
-		}
-	}
+    &: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;
+    }
 
-	// 按钮不带边框
-	&-no-border {
-		border: none;
-	}
+    &:disabled {
+      background-color: @btn-ghost-background-color-disabled !important;
+      border-color: @btn-ghost-border-color-disabled !important;
+      color: @btn-ghost-font-color-disabled !important;
+    }
+  }
 
-	// 不可用按钮部分样式
-	&: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;
-	}
+  &-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;
+  }
 }
 
 
@@ -1135,33 +1280,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); // 禁用状态 边框颜色
@@ -1176,6 +1324,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);
@@ -1183,13 +1338,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); //圆角
 
@@ -1201,6 +1358,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); // 小号 内间距 纵向
@@ -1209,6 +1368,9 @@
 @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-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);
+
 
 
 
@@ -4225,7 +4387,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;
 
     >* {
@@ -4242,7 +4404,7 @@
 }
 
 .@{image-preview-prefix-cls} {
-  z-index: @image-z-index-masker;
+  z-index: 3000;
   position: fixed;
   top: 0;
   right: 0;
@@ -4251,14 +4413,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 {
@@ -4288,7 +4450,7 @@
 
     &:hover,
     &:active {
-      color: @theme-color;
+      color: #5582f3;
     }
   }
 
@@ -4410,34 +4572,21 @@
 
 @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);
 
 
 
@@ -7804,19 +7953,19 @@ textarea {
 @rate-prefix: '--@{kd-prefix}-c-rate';
 
 // color
-@rate-selected-color: var(~'@{rate-prefix}-color-text-selected', #fdc200);
-@rate-not-selected-color: var(~'@{rate-prefix}-color-text-not-selected', #d9d9d9);
+@rate-selected-color: var(~'@{rate-prefix}-color-text-selected', #FEC104); 
+@rate-not-selected-color: var(~'@{rate-prefix}-color-text-not-selected', #E5E5E5);
 
 // font
-@rate-small-font-size: var(~'@{rate-prefix}-font-size-small', @font-size-small);
-@rate-middle-font-size: var(~'@{rate-prefix}-font-size-middle', @font-size-middle);
-@rate-large-font-size: var(~'@{rate-prefix}-font-size-large', @font-size-large);
+@rate-small-font-size: var(~'@{rate-prefix}-font-size-small', 12px);
+@rate-middle-font-size: var(~'@{rate-prefix}-font-size-middle', 16px);
+@rate-large-font-size: var(~'@{rate-prefix}-font-size-large', 20px);
 
 // motion
 @rate-transition-duration: var(~'@{rate-prefix}-motion-duration', @duration-promptly);
 
 // spacing
-@rate-icon-margin: var(~'@{rate-prefix}-spacing-margin-right', 10px);
+@rate-icon-margin: var(~'@{rate-prefix}-spacing-margin-right', 8px);
 
 
 
@@ -9721,7 +9870,7 @@ textarea {
 @stepper-icon-color: var(~'@{stepper-prefix}-icon-color', @color-text-secondary);
 @stepper-icon-color-hover: var(~'@{stepper-prefix}-icon-color-hover', @color-theme);
 @stepper-color-border-strong: var(~'@{stepper-prefix}-color-border-strong', @color-border-strong);
-@stepper-embed-icon-color-background: var(~'@{stepper-prefix}-embed-icon-color-background', #f6f7f9);
+@stepper-embed-icon-color-background: var(~'@{stepper-prefix}-embed-icon-color-background', transparent);
 
 // font
 @stepper-input-font-size: var(~'@{stepper-prefix}-input-font-size', 12px);
@@ -11797,7 +11946,7 @@ template {
   }
 
   &-disabled {
-    background-color: @switch-disabled-bg;
+    background-color: @switch-off-disabled-bg;
     cursor: not-allowed;
   }
 
@@ -11818,7 +11967,7 @@ template {
     }
 
     &.@{switch-prefix-cls}-disabled {
-      opacity: 0.5;
+      background-color: @switch-on-disabled-bg;
     }
 
     .@{switch-prefix-cls}-inner {
@@ -11890,11 +12039,11 @@ template {
 
 @switch-prefix: '--@{kd-prefix}-c-switch';
 
-
 // color
-@switch-on-color: var(~'@{switch-prefix}-color-on', @color-theme);
-@switch-off-color: var(~'@{switch-prefix}-color-off', #999);
-@switch-disabled-bg: var(~'@{switch-prefix}-color-background-disabled', @color-disabled);
+@switch-on-color: var(~'@{switch-prefix}-color-on', @color-theme-6);
+@switch-off-color: var(~'@{switch-prefix}-color-off', #B2B2B2);
+@switch-on-disabled-bg: var(~'@{switch-prefix}-color-on-background-disabled', @color-theme-4);
+@switch-off-disabled-bg: var(~'@{switch-prefix}-color-off-background-disabled', #D9D9D9);
 @switch-loading-color: var(~'@{switch-prefix}-color-loading', @color-ongoing);
 @switch-font-color: var(~'@{switch-prefix}-color-font', @color-white);
 
@@ -11903,19 +12052,16 @@ template {
 @switch-large-font-size: var(~'@{switch-prefix}-large-font-size', @font-size-small);
 @switch-inner-small-font-size: var(~'@{switch-prefix}-inner-font-size-small', @font-size-small);
 
-
 // line-height
 @switch-large-line-height: var(~'@{switch-prefix}-large-line-height', 20px);
 @switch-small-line-height: var(~'@{switch-prefix}-small-line-height', 14px);
 
-
 //radius
-@switch-small-border-radius: var(~'@{switch-prefix}-small-radius-border', 7px);
-
+@switch-small-border-radius: var(~'@{switch-prefix}-small-radius-border', 8px);
 
 // sizing
-@switch-small-height: var(~'@{switch-prefix}-small-sizing-height', 14px);
-@switch-small-min-width: var(~'@{switch-prefix}-small-sizing-width', 28px);
+@switch-small-height: var(~'@{switch-prefix}-small-sizing-height', 16px);
+@switch-small-min-width: var(~'@{switch-prefix}-small-sizing-width', 32px);
 @switch-large-height: var(~'@{switch-prefix}-large-sizing-height', 20px);
 @switch-large-min-width: var(~'@{switch-prefix}-large-sizing-width', 40px);
 @switch-large-border-radius: var(~'@{switch-prefix}-large-sizing-border-radius', 10px);