@kdcloudjs/kdesign 1.1.1 → 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);
+
 
 
 
@@ -1749,19 +1911,11 @@
   box-sizing: border-box;
   font-size: @checkbox-font-size;
   color: @checkbox-font-color;
-  height: @checkbox-middle-size-height;
+  line-height: 18px;
   &-no-child {
     height: @checkbox-default-input-height;
     width: @checkbox-default-input-width;
-  }
-  &-small {
-    height: @checkbox-small-size-height;
-  }
-  &-middle {
-    height: @checkbox-middle-size-height;
-  }
-  &-large {
-    height: @checkbox-large-size-height;
+    box-sizing: border-box;
   }
   &-group > *:not(:last-child) {
     margin-right: @checkbox-group-margin-right;
@@ -1789,7 +1943,7 @@
 .@{checkbox-prefix-cls}-square {
   border-radius: 2px;
   border: 1px solid @checkbox-border-color;
-  padding: @checkbox-square-padding;
+  padding: @checkbox-square-padding-horizontal @checkbox-square-padding-vertical;
   transition: color @checkbox-transition-duration, border-color @checkbox-transition-duration;
   &:not(&-disabled)::after {
     content: '';
@@ -1844,13 +1998,14 @@
     animation: kdZoomLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
   }
   &-triangle-disabled {
-    border-bottom-color: @checkbox-disabled-bg-color;
+    border-bottom-color: @checkbox-disabled-text-color;
   }
 
   &-disabled,
   &-disabled:hover {
     border-color: @checkbox-border-color;
-    color: @checkbox-font-color;
+    color: @checkbox-disabled-text-color;
+    background-color: @checkbox-disabled-bg-color;
     cursor: not-allowed !important;
   }
   &-checked {
@@ -1878,6 +2033,11 @@
     box-sizing: border-box;
     opacity: 0;
   }
+  &.checked {
+    .@{checkbox-prefix-cls}-children {
+      color: @checkbox-font-color;
+    }
+  }
 }
 
 .@{checkbox-prefix-cls}-default {
@@ -1893,7 +2053,7 @@
   &-disabled,
   &-disabled:hover,
   &-disabled:hover &-wrapper {
-    color: @checkbox-font-color;
+    color: @checkbox-disabled-text-color;
     border-color: @checkbox-border-color;
     cursor: not-allowed !important;
   }
@@ -1931,9 +2091,13 @@
     width: 100%;
   }
   &-checked-disabled {
-    background-color: @checkbox-disabled-bg-color !important;
-    border-color: @checkbox-disabled-bg-color !important;
+    background-color: @checkbox-default-disabled-color-bg !important;
+    border-color: @checkbox-default-disabled-color-border !important;
     cursor: not-allowed !important;
+
+    .@{checkbox-prefix-cls}-default-inner {
+      color: @checkbox-disabled-text-color;
+    }
   }
   &-checked {
     background-color: @checkbox-checked-border-color;
@@ -1967,64 +2131,68 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    width: 8px;
-    height: 8px;
+    width: @checkbox-default-indeterminate-square;
+    height: @checkbox-default-indeterminate-square;
     background-color: @checkbox-checked-border-color;
     border: 0;
     transform: translate(-50%,-50%) scale(1);
     opacity: 1;
     content: " ";
   }
+  &.checked {
+    .@{checkbox-prefix-cls}-children {
+      color: @checkbox-font-color;
+    }
+  }
 }
 
 
 
 @checkbox-prefix: '--@{kd-prefix}-c-checkbox';
 
-// font-size
-@checkbox-font-size: var(~'@{checkbox-prefix}-font-size', @font-size-small); //默认字体大小
-@checkbox-default-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 14px); // 勾选输入框勾勾图标大小
-@checkbox-square-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 12px); // 边框类型三角内勾选输入框勾勾图标大小
-
 // colors
 @checkbox-color-theme: var(~'@{checkbox-prefix}-color-theme', @color-theme);
-@checkbox-font-color: var(~'@{checkbox-prefix}-color-text-primary', @color-text-primary);
-@checkbox-border-color: var(~'@{checkbox-prefix}-color-border', @color-border-strong);
-@checkbox-checked-border-color: var(~'@{checkbox-prefix}-color-border-active',  @color-theme);
-@checkbox-checked-font-color: var(~'@{checkbox-prefix}-color-text-hover',  @color-theme);
-@checkbox-default-input-icon-color: var(~'@{checkbox-prefix}-default-input-icon-color',  #fff); // 勾选输入框边勾勾图标颜色
-@checkbox-square-input-icon-color: var(~'@{checkbox-prefix}-square-input-icon-color',  #fff); // 边框类型三角内勾选输入框勾勾图标颜色
-@checkbox-bg-color: var(~'@{checkbox-prefix}-color-background',  @color-background);
-@checkbox-disabled-bg-color: var(~'@{checkbox-prefix}-color-background-disabled',  @color-disabled);
+@checkbox-font-color: var(~'@{checkbox-prefix}-color-text-primary', #212121);
+@checkbox-border-color: var(~'@{checkbox-prefix}-color-border', #d9d9d9);
+@checkbox-checked-border-color: var(~'@{checkbox-prefix}-color-border-active', @color-theme);
+@checkbox-checked-font-color: var(~'@{checkbox-prefix}-color-text-hover', @color-theme);
+@checkbox-default-input-icon-color: var(~'@{checkbox-prefix}-default-input-icon-color', #fff); // 勾选输入框边勾勾图标颜色
+@checkbox-square-input-icon-color: var(~'@{checkbox-prefix}-square-input-icon-color', #fff); // 边框类型三角内勾选输入框勾勾图标颜色
+@checkbox-bg-color: var(~'@{checkbox-prefix}-color-background', @color-background);
+@checkbox-disabled-bg-color: var(~'@{checkbox-prefix}-color-background-disabled', @color-background-contain-disabled);
+@checkbox-disabled-border-color: var(~'@{checkbox-prefix}-color-border-disabled', @color-border-disabled);
+@checkbox-disabled-text-color: var(~'@{checkbox-prefix}-color-text-disabled', @color-disabled);
+@checkbox-default-disabled-color-bg: var(~'@{checkbox-prefix}-default-color-background-disabled', #e5e5e5);
+@checkbox-default-disabled-color-border: var(~'@{checkbox-prefix}-default-color-background-disabled', #d9d9d9);
 
-// sizing
-@checkbox-small-size-height: var(~'@{checkbox-prefix}-sizing-height-small',  32px); // 小尺寸复选框
-@checkbox-middle-size-height: var(~'@{checkbox-prefix}-sizing-height-middle',  36px); // 中尺寸复选框
-@checkbox-large-size-height: var(~'@{checkbox-prefix}-sizing-height-large',  40px); // 大尺寸复选框
+// font
+@checkbox-font-size: var(~'@{checkbox-prefix}-font-size', @font-size-small); //默认字体大小
+@checkbox-default-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 12px); // 勾选输入框勾勾图标大小
+@checkbox-square-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 12px); // 边框类型三角内勾选输入框勾勾图标大小
 
-// @checkbox-border-width: 1px; // 边框类型边框大小
-@checkbox-border-width: var(~'@{checkbox-prefix}-border-width',  1px); // 边框类型边框大小
+// motion
+@checkbox-transition-duration: var(~'@{checkbox-prefix}-motion-duration', @duration-promptly);
 
-@checkbox-default-input-height: var(~'@{checkbox-prefix}-default-input-sizing-height',  16px); // 勾选输入框高度
-@checkbox-default-input-width: var(~'@{checkbox-prefix}-default-input-sizing-width',  16px); // 勾选输入框宽度
+// radius
+@checkbox-default-input-border-radius: var(~'@{checkbox-prefix}-default-input-radius-border', 2px); // 勾选输入框圆角
 
-// @checkbox-default-input-border-width: 1px; // 勾选输入框边框大小
-@checkbox-default-input-border-width: var(~'@{checkbox-prefix}-default-input-border-width',  1px); // 勾选输入框边框大小 不需要
+// sizing
+@checkbox-border-width: var(~'@{checkbox-prefix}-border-width', 1px); // 边框类型边框大小
+@checkbox-default-input-height: var(~'@{checkbox-prefix}-default-input-sizing-height', 14px); // 勾选输入框高度
+@checkbox-default-input-width: var(~'@{checkbox-prefix}-default-input-sizing-width', 14px); // 勾选输入框宽度
+@checkbox-default-input-border-width: var(~'@{checkbox-prefix}-default-input-border-width', 1px); // 勾选输入框边框大小 不需要
+@checkbox-square-triangle-height: var(~'@{checkbox-prefix}-square-triangle-sizing-height', 18px); // 边框类型右下角三角高度
+@checkbox-square-triangle-width: var(~'@{checkbox-prefix}-square-triangle-sizing-width', 18px); // 边框类型右下角三角宽度
+@checkbox-default-indeterminate-square: var(~'@{checkbox-prefix}-default-indeterminate-sizing-square', 6px); // 半选框的大小
 
-@checkbox-square-triangle-height: var(~'@{checkbox-prefix}-square-triangle-sizing-height',  18px); // 边框类型右下角三角高度
-@checkbox-square-triangle-width: var(~'@{checkbox-prefix}-square-triangle-sizing-width',  18px); // 边框类型右下角三角宽度
 
 // spacing
-@checkbox-group-margin-right: var(~'@{checkbox-prefix}-group-spacing-margin-right',  8px); // 按钮组的间距
-@checkbox-default-padding: var(~'@{checkbox-prefix}-default-spacing-padding',  0); // 默认类型复选框内边距
-@checkbox-default-input-margin-right: var(~'@{checkbox-prefix}-default-input-spacing-margin-right',  8px); // 勾选输入框与右侧内容间距
-@checkbox-square-padding: var(~'@{checkbox-prefix}-square-spacing-padding',  0 20px); // 边框类型内边距
+@checkbox-group-margin-right: var(~'@{checkbox-prefix}-group-spacing-margin-right', 12px); // 按钮组的间距
+@checkbox-default-padding: var(~'@{checkbox-prefix}-default-spacing-padding', 0); // 默认类型复选框内边距
+@checkbox-default-input-margin-right: var(~'@{checkbox-prefix}-default-input-spacing-margin-right', 4px); // 勾选输入框与右侧内容间距
+@checkbox-square-padding-horizontal: var(~'@{checkbox-prefix}-square-spacing-padding-horizontal', 7px); // 边框类型内边距
+@checkbox-square-padding-vertical: var(~'@{checkbox-prefix}-square-spacing-padding-vertical', 12px); // 边框类型内边距
 
-// radius
-@checkbox-default-input-border-radius: var(~'@{checkbox-prefix}-default-input-radius-border',  2px); // 勾选输入框圆角
-
-// motion
-@checkbox-transition-duration: var(~'@{checkbox-prefix}-motion-duration', @duration-promptly);
 
 
 
@@ -2571,7 +2739,7 @@
       bottom: -1px;
       height: 2px;
       margin-left: 11px;
-      background: #1890ff;
+      background: @date-bar-color-bg-active;
       opacity: 0;
       transition: all 0.3s ease-out;
       pointer-events: none;
@@ -2699,7 +2867,7 @@
 
             &:not(.@{datePicker-prefix-cls}-year-item-disabled) {
               .@{datePicker-prefix-cls}-year-text-selected {
-                background: #104ccc;
+                background: @date-square-item-color-selected;
               }
             }
           }
@@ -2755,7 +2923,7 @@
 
             &:not(.@{datePicker-prefix-cls}-month-item-disabled) {
               .@{datePicker-prefix-cls}-month-text-selected {
-                background: #104ccc;
+                background: @date-square-item-color-selected;
               }
             }
           }
@@ -2815,7 +2983,7 @@
 
             &:not(.@{datePicker-prefix-cls}-quarter-item-disabled) {
               .@{datePicker-prefix-cls}-quarter-text-selected {
-                background: #104ccc;
+                background: @date-square-item-color-selected;
               }
             }
           }
@@ -2882,7 +3050,7 @@
           }
 
           .@{datePicker-prefix-cls}-calendar-text-selected {
-            background: #104ccc !important;
+            background: @date-square-item-color-selected !important;
           }
         }
 
@@ -2945,7 +3113,7 @@
           &:hover {
             & .@{datePicker-prefix-cls}-calendar-item:not(.@{datePicker-prefix-cls}-calendar-item-disabled) {
               .@{datePicker-prefix-cls}-calendar-week-text::before {
-                background: #104ccc;
+                background: @date-square-item-color-selected;
               }
             }
           }
@@ -3061,7 +3229,7 @@
       height: 24px;
       width: 100%;
       margin: 0 -4px;
-      background: #e6f7ff;
+      background: @date-range-item-color-bg;
     }
   }
 
@@ -3155,7 +3323,7 @@
 
         .@{datePicker-prefix-cls}-time-cell-selected {
           .@{datePicker-prefix-cls}-time-cell-inner {
-            background: #e6f7ff;
+            background: @date-range-item-color-bg;
           }
         }
 
@@ -3367,7 +3535,6 @@
 
 @date-picker-custom-prefix: ~'--@{kd-prefix}-c-date-picker';
 
-// shadow
 // color
 @date-color-background-checked: var(~'@{date-picker-custom-prefix}-color-background-checked', @color-theme);
 @date-wrapper-color-background: var(~'@{date-picker-custom-prefix}-wrapper-color-background', @color-background);
@@ -3379,7 +3546,6 @@
 @date-input-color-background: var(~'@{date-picker-custom-prefix}-input-color-background', @color-white);
 @date-input-color-background-disabled: var(~'@{date-picker-custom-prefix}-input-color-background-disabled', @color-background-contain-disabled);
 @date-input-color-focus: var(~'@{date-picker-custom-prefix}-input-color-focused', @color-text-primary);
-
 @date-icon-color: var(~'@{date-picker-custom-prefix}-icon-color', @color-disabled);
 @date-clear-background-color: var(~'@{date-picker-custom-prefix}-clear-color-background', @color-background);
 @date-clear-background-color-hover: var(~'@{date-picker-custom-prefix}-clear-color-background-hover', @color-theme-5);
@@ -3387,8 +3553,10 @@
 @date-container-color: var(~'@{date-picker-custom-prefix}-container-color', @color-text-primary);
 @date-container-color-border: var(~'@{date-picker-custom-prefix}-container-color-border', @color-border-weak);
 @date-container-color-background: var(~'@{date-picker-custom-prefix}-container-color-background', @color-background-2);
-
 @date-footer-color-background: var(~'@{date-picker-custom-prefix}-footer-color-background', @color-background);
+@date-bar-color-bg-active: var(~'@{date-picker-custom-prefix}-bar-color-bg-active', @color-theme);
+@date-square-item-color-selected: var(~'@{date-picker-custom-prefix}-square-item-color-selected', @color-theme-hover);
+@date-range-item-color-bg: var(~'@{date-picker-custom-prefix}-range-item-color-bg', @color-theme-1);
 
 // sizing
 @date-width: var(~'@{date-picker-custom-prefix}-sizing-width', 230px);
@@ -3406,8 +3574,6 @@
 @date-large-padding-horizontal: var(~'@{date-picker-custom-prefix}-large-spacing-padding-horizontal', 9px); // 大号 内间距 横向
 @date-suffix-spacing-margin-left: var(~'@{date-picker-custom-prefix}-suffix-spacing-margin-left', 10px);
 
-
-// motion
 // font
 @date-container-font-size: var(~'@{date-picker-custom-prefix}-container-font-size', @font-size-small);
 @date-panel-font-size: var(~'@{date-picker-custom-prefix}-panel-font-size', @font-size-middle);
@@ -3419,22 +3585,6 @@
 @date-input-border-radius: var(~'@{date-picker-custom-prefix}-input-radius-border', @radius-border);
 @date-panel-border-radius: var(~'@{date-picker-custom-prefix}-panel-radius-border', @radius-border);
 
-// line-height
-// z-index
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -4237,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;
 
     >* {
@@ -4254,7 +4404,7 @@
 }
 
 .@{image-preview-prefix-cls} {
-  z-index: @image-z-index-masker;
+  z-index: 3000;
   position: fixed;
   top: 0;
   right: 0;
@@ -4263,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 {
@@ -4300,7 +4450,7 @@
 
     &:hover,
     &:active {
-      color: @theme-color;
+      color: #5582f3;
     }
   }
 
@@ -4422,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);
 
 
 
@@ -4837,12 +4974,13 @@ textarea {
 	&-disabled {
 		background-color: @input-background-color-disabled-inner;
 		border-color: @input-border-color-disabled-inner;
-		color: @input-color-disabled-inner;
+    color: @input-affix-color;
 		cursor: not-allowed;
 	}
 	&-underline&-disabled {
+    color: @input-color-disabled-inner;
 		background-color: @input-background-color-inner;
-		border-color: @input-border-color-disabled-inner;
+		border-color: @input-underline-border-color-disabled-inner;
 	}
 	&-size-small {
 		.input-size(@input-small-height-inner, @input-small-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
@@ -4872,6 +5010,7 @@ textarea {
 				align-items: center;
 				justify-content: center;
 				word-break: keep-all;
+        color: @input-affix-color;
 			}
 			&-suffix {
 				margin-left: 4px;
@@ -4960,7 +5099,7 @@ textarea {
 				}
 				.@{input-prefix-cls}-group-addon {
 					position: relative;
-					color: @input-font-color-inner;
+					color: @input-affix-color;
 					padding: 0 9px;
 					font-weight: 400;
 					font-size: 14px;
@@ -4992,7 +5131,6 @@ textarea {
 					&-disabled {
 						background-color: @input-background-color-disabled-inner;
 						border-color: @input-border-color-disabled-inner;
-						color: @input-color-disabled-inner;
 						cursor: not-allowed;
 					}
 				}
@@ -5084,6 +5222,7 @@ textarea {
   border: none;
   border-bottom: 1px solid @input-color-border;
   border-radius: 0 !important;
+  padding-left: 0;
 }
 
 
@@ -5092,40 +5231,43 @@ textarea {
 
 
 // color
-@input-font-color-inner: var(~'@{input-prefix}-color', @color-text-secondary);
-@input-placeholder-color-inner: var(~'@{input-prefix}-color-placeholder', @color-text-third);
+@input-font-color-inner: var(~'@{input-prefix}-color-text', @color-text-primary);
+@input-placeholder-color-inner: var(~'@{input-prefix}-placeholder-color-text', @color-text-placeholder);
 @input-color-border: var(~'@{input-prefix}-color-border', #999);
 @input-background-color-inner: var(~'@{input-prefix}-color-background', @color-white);
 @input-background-color-disabled-inner: var(~'@{input-prefix}-color-background-disabled', @color-background-contain-disabled);
 @input-border-color-focused: var(~'@{input-prefix}-color-border-focused', @color-theme);
 @input-border-color-disabled-inner: var(~'@{input-prefix}-color-border-disabled', @color-border-strong);
+@input-underline-border-color-disabled-inner: var(~'@{input-prefix}-underline-color-border-disabled', @color-border-weak);
 @input-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
+@input-affix-color: var(~'@{input-prefix}-affix-color-text', @color-text-primary);
 
-// sizing
-@input-small-height-inner: var(~'@{input-prefix}-small-sizing-height', 20px);
-@input-middle-height-inner: var(~'@{input-prefix}-middle-sizing-height', 30px);
-@input-large-height-inner: var(~'@{input-prefix}-large-sizing-height', 36px);
-@input-border-width-inner: var(~'@{input-prefix}-sizing-border', 1px);
-
-// spacing
-@input-small-padding-vertical-inner: var(~'@{input-prefix}-small-spacing-padding-vertical', 3px);
-@input-small-padding-horizontal-inner: var(~'@{input-prefix}-small-spacing-padding-horizontal', 9px);
-@input-middle-padding-vertical-inner: var(~'@{input-prefix}-middle-spacing-padding-vertical', 5px);
-@input-middle-padding-horizontal-inner: var(~'@{input-prefix}-middle-spacing-padding-horizontal', 9px);
-@input-large-padding-vertical-inner: var(~'@{input-prefix}-large-spacing-padding-vertical', 8px);
-@input-large-padding-horizontal-inner: var(~'@{input-prefix}-large-spacing-padding-horizontal', 9px);
+// font
+@input-small-font-size-inner: var(~'@{input-prefix}-font-size-small', @font-size-small);
+@input-middle-font-size-inner: var(~'@{input-prefix}-font-size-middle', @font-size-middle);
+@input-large-font-size-inner: var(~'@{input-prefix}-font-size-large', @font-size-large);
 
 // motion
 @transition-duration-inner: var(~'@{input-prefix}-motion-duration', @duration-promptly);
 
-// font
-@input-small-font-size-inner: var(~'@{input-prefix}-small-font-size', @font-size-small);
-@input-middle-font-size-inner: var(~'@{input-prefix}-middle-font-size', @font-size-middle);
-@input-large-font-size-inner: var(~'@{input-prefix}-large-font-size', @font-size-large);
-
 // radius
 @input-border-radius-inner: var(~'@{input-prefix}-radius-border', @radius-border);
 
+// sizing
+@input-small-height-inner: var(~'@{input-prefix}-sizing-height-small', 20px);
+@input-middle-height-inner: var(~'@{input-prefix}-sizing-height-middle', 30px);
+@input-large-height-inner: var(~'@{input-prefix}-sizing-height-large', 36px);
+@input-border-width-inner: var(~'@{input-prefix}-sizing-border', 1px);
+
+// spacing
+@input-small-padding-vertical-inner: var(~'@{input-prefix}-spacing-padding-vertical-small', 3px);
+@input-small-padding-horizontal-inner: var(~'@{input-prefix}-spacing-padding-horizontal-small', 9px);
+@input-middle-padding-vertical-inner: var(~'@{input-prefix}-spacing-padding-vertical-middle', 5px);
+@input-middle-padding-horizontal-inner: var(~'@{input-prefix}-spacing-padding-horizontal-middle', 9px);
+@input-large-padding-vertical-inner: var(~'@{input-prefix}-spacing-padding-vertical-large', 8px);
+@input-large-padding-horizontal-inner: var(~'@{input-prefix}-spacing-padding-horizontal-large', 9px);
+
+
 
 
 
@@ -5318,7 +5460,7 @@ textarea {
       padding: 0 16px;
       color: @layout-trigger-color;
       height: @layout-trigger-height;
-      line-height: calc(@layout-trigger-height - 2px);
+      line-height: calc(@layout-trigger-height - 4px);
       font-size: 20px;
       background: @layout-trigger-background;
       cursor: pointer;
@@ -5404,16 +5546,17 @@ textarea {
 @layout-trigger-background-light: var(~'@{layout-custom-prefix}-trigger-color-background-light', @color-background);
 @layout-trigger-color-light: var(~'@{layout-custom-prefix}-trigger-color-text-light', @color-text-primary);
 
-// spacing
-@layout-header-padding: var(~'@{layout-custom-prefix}-header-spacing-padding', 0 20px 0 35px);
-@layout-footer-padding: var(~'@{layout-custom-prefix}-footer-spacing-padding', 24px 50px);
-
 // sizing
 @layout-header-height: var(~'@{layout-custom-prefix}-header-sizing-height', 52px);
 @layout-trigger-height: var(~'@{layout-custom-prefix}-trigger-sizing-height', 50px);
 @layout-zero-trigger-width: var(~'@{layout-custom-prefix}-trigger-sizing-width', 36px);
 @layout-zero-trigger-height: var(~'@{layout-custom-prefix}-trigger-sizing-height', 42px);
 
+// spacing
+@layout-header-padding: var(~'@{layout-custom-prefix}-header-spacing-padding', 0 20px 0 35px);
+@layout-footer-padding: var(~'@{layout-custom-prefix}-footer-spacing-padding', 24px 50px);
+
+
 
 
 @wrapper-prefix-cls: ~'@{kd-prefix}-link-wrapper';
@@ -5530,13 +5673,31 @@ textarea {
     .@{submenu-prefix-cls} {
       padding-right: 0;
     }
+
+    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
+      color: @menu-inline-color-active;
+    }
   }
 
   &-vertical {
+    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
+    .@{submenu-prefix-cls}-hover {
+      .hover();
+    }
+
     .@{submenu-prefix-cls} {
       padding-right: 0;
 
       &-sub {
+        background: @menu-sub-color-background;
+
+        .@{menuitem-prefix-cls} {
+          &:hover,
+          &-active {
+            color: @menu-sub-color-active;
+          }
+        }
+
         &-second,
         &-third {
           animation: kdZoomTopLeftIn calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
@@ -5572,6 +5733,20 @@ textarea {
       .light-default;
     }
 
+    .@{submenu-prefix-cls}-title:hover {
+      color: @menu-light-color-hover;
+    }
+
+    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
+      .light-default;
+    }
+
+    .@{menuitem-prefix-cls} {
+      &-active {
+        .light-hover();
+      }
+    }
+
     .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):hover {
       .light-hover();
     }
@@ -5579,7 +5754,22 @@ textarea {
 
   &-light&-vertical {
     .@{submenu-prefix-cls}-sub {
-      box-shadow: 0 4px 10px 0 #f5f5f5;
+      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    }
+
+    .@{menuitem-prefix-cls} {
+      &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
+        color: @menu-light-color-hover;
+        background: #fff;
+        border: none;
+      }
+
+      &-active {
+        color: @menu-light-color-active;
+        background-color: @menu-light-color-background;
+        border: none !important;
+      }
     }
   }
 }
@@ -5590,6 +5780,10 @@ textarea {
   transition: color, background-color;
   transition-duration: calc(@menu-motion-duration - 0.1s);
   transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+
+  &:not(&-disabled):hover {
+    .hover();
+  }
 }
 
 .@{submenu-prefix-cls} {
@@ -5599,12 +5793,13 @@ textarea {
   transition-duration: calc(@menu-motion-duration - 0.1s);
   transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
 
+  &-hover {
+    color: @menu-sub-color-hover;
+  }
+
   &-sub {
     line-height: @menu-item-height;
     color: @menu-sub-color;
-    min-width: 130px;
-
-
   }
 
   &-thrid {
@@ -5612,6 +5807,7 @@ textarea {
     max-width: 810px;
     max-height: 492px;
     padding-left: 24px;
+    background: @menu-sub-color-background;
     flex-wrap: wrap;
     overflow-y: auto;
     cursor: default;
@@ -5659,6 +5855,10 @@ textarea {
         cursor: pointer;
         .ellipsis();
 
+        &:hover {
+          color: @menu-sub-color-active;
+        }
+
         & > span {
           .ellipsis();
         }
@@ -5675,149 +5875,18 @@ textarea {
   }
 }
 
-.@{kd-prefix}-menu-dark {
-  .@{menu-prefix-cls}-item:not(.@{menu-prefix-cls}-item-disabled) ,
-  .@{menu-prefix-cls}-submenu:not(.@{menu-prefix-cls}-submenu-hover) {
-    :hover {
-      .hover-sub()
-    }
-  }
-
-  &.@{menu-prefix-cls}-inline {
-    > ul > li.@{menu-prefix-cls}-submenu {
-
-      .@{menu-prefix-cls}-submenu-sub {
-        .base-sub();
-
-        :hover {
-          .hover-third()
-        }
-      }
-    }
-  }
-
-  .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
-    .hover-sub()
-  }
-
-  .@{menu-prefix-cls}-submenu {
-    &-sub {
-      .base-sub();
-    }
-
-    .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
-      .hover-third()
-    }
-  }
-
-  > .@{menu-prefix-cls}-submenu {
-    :hover {
-      .hover-sub();
-    }
-  }
-
-  > .@{menu-prefix-cls}-item:not(.@{menu-prefix-cls}-item-disabled), .@{menu-prefix-cls}-submenu-collapsed {
-    :hover {
-      .hover-sub()
-    }
-  }
-
-  .@{menu-prefix-cls}-submenu-sub-second {
-    > li:hover {
-      .hover-third()
-    }
-  }
-
-  .@{menu-prefix-cls}-submenu-sub-third {
-    .@{menu-prefix-cls}-item:hover {
-      .hover-third()
-    }
-  }
-}
-
-.@{kd-prefix}-menu-light {
-
-  &.@{menu-prefix-cls}-inline {
-    > ul > li.@{menu-prefix-cls}-submenu {
-
-      .@{menu-prefix-cls}-submenu-sub {
-        .base-sub-light();
-
-        :hover {
-          .hover-third-light()
-        }
-      }
-    }
-  }
-
-  .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
-    .hover-sub-light()
-  }
-
-  .@{menu-prefix-cls}-submenu {
-    &-sub {
-      .base-sub-light();
-    }
-
-    .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
-      .hover-third-light()
-    }
-  }
-
-  > .@{menu-prefix-cls}-submenu {
-    :hover {
-      .hover-sub-light();
-    }
-  }
-
-  > .@{menu-prefix-cls}-item:not(.@{menu-prefix-cls}-item-disabled), .@{menu-prefix-cls}-submenu-collapsed {
-    :hover {
-      .hover-sub-light()
-    }
-  }
-
-  .@{menu-prefix-cls}-submenu-sub-second {
-    > li:hover {
-      .hover-third-light()
-    }
+.@{menu-prefix-cls}-dark {
+  .@{submenu-prefix-cls}-sub {
+    background: @menu-sub-inline-color-background;
   }
 
-  .@{menu-prefix-cls}-submenu-sub-third {
-    .@{menu-prefix-cls}-item:hover {
-      .hover-third-light()
-    }
+  .@{submenu-prefix-cls}-sub-second,.@{submenu-prefix-cls}-sub-third  {
+    background: @menu-sub-color-background;
   }
 }
 
-.hover-sub {
-  background: @menu-sub-base-color-background-hover;
-  color: @menu-sub-color-hover;
-}
-
-.base-sub {
-  background: @menu-sub-base-color-background-hover;
-  color: @menu-sub-base-color-hover;
-}
 
-.hover-third {
-  background: @menu-sub-color-background-hover !important;
-  color: @menu-sub-color-hover;
-}
 
-.hover-sub-light {
-  background: @menu-light-color-background;
-  color: @menu-light-color;
-}
-
-.base-sub-light {
-  background: @menu-light-color-background;
-  color: @menu-light-color;
-}
-
-.hover-third-light {
-  background: @menu-light-color-background-hover;
-  color: @menu-light-color;
-}
 
 
 
@@ -5825,8 +5894,8 @@ textarea {
 .menu() {
   position: relative;
   width: 100%;
-  min-width: 138px;
   height: 100%;
+  min-width: 138px;
   background-color: @menu-color-background;
   color: @menu-sub-color;
 }
@@ -5873,6 +5942,10 @@ textarea {
     color: @menu-color-disabled;
   }
 
+  &-active {
+    .hover();
+  }
+
   &-arrow {
     margin-left: auto;
     font-size: 16px;
@@ -5888,6 +5961,11 @@ textarea {
   }
 }
 
+.hover {
+  background-color: @menu-sub-color-background;
+  color: @menu-sub-color-hover;
+}
+
 .light-hover {
   background-color: @menu-light-color-background;
   color: @menu-light-color-hover;
@@ -5914,20 +5992,17 @@ textarea {
 
 // color
 @menu-color-disabled: var(~'@{menu-prefix}-color-disabled', @color-disabled);
-@menu-sub-color: var(~'@{menu-prefix}-sub-color', rgba(255, 255, 255, 0.65));
-@menu-sub-color-hover: var(~'@{menu-prefix}-sub-color-hover', @color-white);
-@menu-sub-color-active: var(~'@{menu-prefix}-sub-color-active', @color-white);
-@menu-sub-color-background: var(~'@{menu-prefix}-sub-color-background', #21242d);
-@menu-sub-color-background-hover: var(~'@{menu-prefix}-sub-color-background-hover', #121319);
-@menu-sub-base-color-hover: var(~'@{menu-prefix}-sub-base-color-hover', #b2b3b7);
-@menu-sub-base-color-background-hover: var(~'@{menu-prefix}-sub-base-color-background-hover', #1f212b);
+@menu-sub-color: var(~'@{menu-prefix}-sub-color-text', rgba(255, 255, 255, 0.65));
+@menu-sub-color-hover: var(~'@{menu-prefix}-sub-color-text-hover', @color-white);
+@menu-sub-color-active: var(~'@{menu-prefix}-sub-color-text-active', @color-white);
+@menu-sub-color-background: var(~'@{menu-prefix}-sub-color-background', #121319);
+@menu-sub-inline-color-background: var(~'@{menu-prefix}-sub-inline-color-background', #1f212b);
 @menu-inline-color-active: var(~'@{menu-prefix}-inline-color-active', @color-white);
 @menu-color-background: var(~'@{menu-prefix}-color-background', #343848);
-@menu-light-color: var(~'@{menu-prefix}-light-color', @color-text-primary);
-@menu-light-color-hover: var(~'@{menu-prefix}-light-color-hover', @color-text-primary);
-@menu-light-color-active: var(~'@{menu-prefix}-light-color-active', @color-text-primary);
-@menu-light-color-background: var(~'@{menu-prefix}-light-color-background', #f5f5f5);
-@menu-light-color-background-hover: var(~'@{menu-prefix}-light-color-background-hover', #eaeaea);
+@menu-light-color: var(~'@{menu-prefix}-light-color-text', @color-text-primary);
+@menu-light-color-hover: var(~'@{menu-prefix}-light-color-text-hover', @color-ongoing);
+@menu-light-color-active: var(~'@{menu-prefix}-light-color-text-active', @color-theme);
+@menu-light-color-background: var(~'@{menu-prefix}-light-color-background', @color-background-ongoing);
 
 // font
 @menu-icon-font-size: var(~'@{menu-prefix}-icon-font-size', @font-size-xx-large);
@@ -6475,6 +6550,7 @@ textarea {
 
 
 @pagination-prefix-cls: ~'@{kd-prefix}-pagination';
+@dropdown-prefix-cls: ~'@{kd-prefix}-dropdown';
 @pagination-action-prefix-cls: ~'@{pagination-prefix-cls}-action';
 @pagination-selector-prefix-cls: ~'@{pagination-prefix-cls}-selector';
 @pagination-pages-prefix-cls: ~'@{pagination-prefix-cls}-pages';
@@ -6494,11 +6570,11 @@ textarea {
 
   .@{pagination-prefix-cls}-current {
     display: inline-block;
-    margin-right: 15px;
+    margin-right: 12px;
     vertical-align: middle;
     .@{pagination-prefix-cls}-current-input {
       box-sizing: border-box;
-      width: 32px;
+      width: 44px;
       height: @pagination-size;
       margin: 0 3px;
       padding: 0;
@@ -6518,7 +6594,7 @@ textarea {
       }
 
       &:disabled {
-        color: @color-disabled;
+        color: @pagination-disabled-color;
         border: @pagination-border-size solid @pagination-border-disabled-color;
         background: @pagination-button-disabled-background-color;
         cursor: not-allowed;
@@ -6579,7 +6655,7 @@ textarea {
           cursor: not-allowed;
 
           i {
-            color: @pagination-icon-disabled-color;
+            color: @pagination-disabled-color;
           }
         }
 
@@ -6613,6 +6689,7 @@ textarea {
     .@{pagination-selector-prefix-cls}-size {
       box-sizing: border-box;
       display: inline-block;
+      padding: 0;
       line-height: @pagination-size;
       font-size: @pagination-font-size;
       color: @color-text-primary;
@@ -6632,21 +6709,34 @@ textarea {
       &.disabled,
       &.disabled > i {
         cursor: not-allowed;
-        color: @color-border-disabled;
+        color: @pagination-disabled-color;
       }
 
       i {
-        margin-left: 5px;
+        margin-left: 4px;
         line-height: @pagination-size;
         font-size: @pagination-icon-size;
         color: @pagination-text-color;
       }
     }
+
+    .@{dropdown-prefix-cls}-menu-item {
+      text-align: right;
+      padding-right: @pagination-dropdown-item-spacing-horizontal;
+      padding-left: @pagination-dropdown-item-spacing-horizontal;
+
+      span {
+        white-space: nowrap;
+      }
+    }
   }
 
   // 简化版分页
   &.simple {
-    display: inline-block;
+    display: inline-flex;
+    justify-content: space-around;
+    align-items: center;
+    height: @pagination-size;
     border-radius: @radius-border;
     border: @pagination-border-size solid transparent;
 
@@ -6665,15 +6755,17 @@ textarea {
     }
 
     &.disabled > .@{pagination-prefix-cls}-item {
-      color: @color-border-disabled;
+      color: @pagination-disabled-color;
     }
 
     .@{pagination-prefix-cls}-item {
       .reset-component;
       display: inline-block;
+      height: @pagination-size;
+      overflow: hidden;
+      margin: 0 8px;
       vertical-align: middle;
       color: @color-text-primary;
-      margin: 0 18px;
 
       &:first-child,
       &:last-child {
@@ -6688,7 +6780,7 @@ textarea {
           margin: 0;
 
           &:disabled {
-            color: @color-disabled;
+            color: @pagination-disabled-color;
             cursor: not-allowed;
           }
         }
@@ -6715,7 +6807,7 @@ textarea {
         &:hover,
         &:active {
           &:not(:disabled) {
-            border-color: @pagination-border-hover-color
+            border-color: @pagination-border-hover-color;
           }
 
           i {
@@ -6727,7 +6819,7 @@ textarea {
           cursor: not-allowed;
 
           i {
-            color: @pagination-icon-disabled-color;
+            color: @pagination-disabled-color;
           }
         }
 
@@ -6790,7 +6882,7 @@ textarea {
               border-color: @pagination-border-hover-color;
 
               &:disabled {
-                border-color: @pagination-border-disabled-color
+                border-color: @pagination-border-disabled-color;
               }
             }
           }
@@ -6811,7 +6903,7 @@ textarea {
 
           &:disabled {
             cursor: not-allowed;
-            color: @color-disabled;
+            color: @pagination-disabled-color;
           }
         }
       }
@@ -6849,11 +6941,8 @@ textarea {
           background-color: @color-background-contain;
         }
 
-        &:hover,
-        &:active,
         &.active,
-        &:first-child,
-        &:last-child {
+        &:hover {
           button {
             color: @color-theme;
 
@@ -6866,16 +6955,16 @@ textarea {
         &:first-child,
         &:last-child {
           button {
-            width: @pagination-nicety-size;
+            width: @pagination-size;
             padding: 0;
-            line-height: calc(@pagination-nicety-size - 2px);
+            line-height: calc(@pagination-size - 2px);
           }
         }
 
         button {
           .reset-component;
-          min-width: @pagination-nicety-size;
-          height: @pagination-nicety-size;
+          min-width: @pagination-size;
+          height: @pagination-size;
           padding: 0 6px;
           cursor: pointer;
           outline: none;
@@ -6888,7 +6977,11 @@ textarea {
 
           &:disabled {
             cursor: not-allowed;
-            color: @color-disabled;
+            color: @pagination-disabled-color;
+          }
+
+          > i {
+            font-size: 16px;
           }
 
           .@{pagination-pages-prefix-cls}-jumper-icon {
@@ -6899,7 +6992,7 @@ textarea {
             width: 100%;
             height: 100%;
             color: @color-theme;
-            line-height: @pagination-nicety-size;
+            line-height: @pagination-size;
             background-color: @color-background;
             transition: opacity @duration-promptly;
           }
@@ -6909,13 +7002,13 @@ textarea {
 
     .@{pagination-jumper-prefix-cls} {
       display: inline-block;
-      margin-left: 12px;
+      margin-left: 4px;
       vertical-align: middle;
 
       .@{pagination-jumper-prefix-cls}-input {
         box-sizing: border-box;
-        width: 48px;
-        height: @pagination-nicety-size;
+        width: 40px;
+        height: @pagination-size;
         padding: 0;
         outline: none;
         text-align: center;
@@ -6933,7 +7026,7 @@ textarea {
         }
 
         &:disabled {
-          color: @color-disabled;
+          color: @pagination-disabled-color;
           border: @pagination-border-size solid @pagination-border-disabled-color;
           background: @pagination-button-disabled-background-color;
           cursor: not-allowed;
@@ -6942,14 +7035,14 @@ textarea {
 
       .@{pagination-jumper-prefix-cls}-button {
         .reset-component;
-        width: @pagination-nicety-size;
-        height: @pagination-nicety-size;
+        width: @pagination-size;
+        height: @pagination-size;
         margin-left: @pagination-button-spacing;
-        line-height: @pagination-nicety-size;
+        line-height: @pagination-size;
         vertical-align: top;
         cursor: pointer;
         outline: none;
-        color: @color-theme;
+        color: @color-text-primary;
         font-size: @pagination-font-size;
         border-radius: @radius-border;
         border: @pagination-border-size solid @color-border-strong;
@@ -6957,8 +7050,8 @@ textarea {
         transition: border-color @duration-promptly;
 
         &:hover,
-        &:active,
-        &.active {
+        &:active {
+          color: @color-theme;
           border-color: @pagination-border-hover-color;
 
           &:disabled {
@@ -6967,7 +7060,7 @@ textarea {
         }
 
         &:disabled {
-          color: @color-disabled;
+          color: @pagination-disabled-color;
           cursor: not-allowed;
         }
       }
@@ -6977,9 +7070,9 @@ textarea {
       .reset-component;
       position: relative;
       display: inline-block;
-      margin-left: 40px;
+      margin-left: 22px;
       outline: none;
-      height: @pagination-nicety-size;
+      height: @pagination-size;
       color: @color-text-primary;
       vertical-align: middle;
 
@@ -6987,11 +7080,11 @@ textarea {
         position: relative;
         box-sizing: border-box;
         display: inline-block;
-        width: 67px;
-        height: @pagination-nicety-size;
+        min-width: 64px;
+        height: @pagination-size;
         margin-right: 8px;
-        padding: 0 8px;
-        line-height: @pagination-nicety-size;
+        padding: 0 24px 0 4px;
+        line-height: @pagination-size;
         font-size: @pagination-font-size;
         color: @color-text-primary;
         text-align: left;
@@ -7014,7 +7107,7 @@ textarea {
         &.disabled,
         &.disabled > i {
           cursor: not-allowed;
-          color: @color-border-disabled;
+          color: @pagination-disabled-color;
         }
 
         i {
@@ -7026,7 +7119,7 @@ textarea {
           color: @pagination-hover-color;
           transform: translateY(-50%);
         }
-        
+
         .@{pagination-prefix-cls}-dropdown-icon-open {
           transform: rotate(180deg) translateY(50%);
         }
@@ -7048,11 +7141,10 @@ textarea {
 // color
 @pagination-text-color: var(~'@{pagination-custom-prefix}-text-color', @color-text-secondary);
 @pagination-hover-color: var(~'@{pagination-custom-prefix}-color-text-hover', @color-theme);
-@pagination-disabled-color: var(~'@{pagination-custom-prefix}-color-text-disabled', @color-border-disabled);
 @pagination-icon-color: var(~'@{pagination-custom-prefix}-button-color', @color-text-secondary);
-@pagination-icon-disabled-color: var(~'@{pagination-custom-prefix}-button-color-disabled', @color-border-disabled);
+@pagination-disabled-color: var(~'@{pagination-custom-prefix}-color-disabled', @color-disabled);
 @pagination-border-color: var(~'@{pagination-custom-prefix}-color-border', @color-border-strong);
-@pagination-border-hover-color: var(~'@{pagination-custom-prefix}-color-border-hover', @color-theme);
+@pagination-border-hover-color: var(~'@{pagination-custom-prefix}-color-border-hover', @color-theme-7);
 @pagination-border-disabled-color: var(~'@{pagination-custom-prefix}-color-border-disabled', @color-border-strong);
 @pagination-button-disabled-background-color: var(~'@{pagination-custom-prefix}-button-color-background-disabled', @color-background-contain-disabled);
 
@@ -7060,13 +7152,14 @@ textarea {
 @pagination-font-size: var(~'@{pagination-custom-prefix}-font-size', @font-size-small);
 @pagination-icon-size: var(~'@{pagination-custom-prefix}-icon-font-size', @font-size-large);
 
+
 // sizing
 @pagination-size: var(~'@{pagination-custom-prefix}-sizing-square', 24px);
-@pagination-nicety-size: var(~'@{pagination-custom-prefix}-nicety-sizing-square', 30px);
 @pagination-border-size: var(~'@{pagination-custom-prefix}-sizing-border-width', 1px);
 
 // spacing
 @pagination-button-spacing: var(~'@{pagination-custom-prefix}-button-spacing', 4px);
+@pagination-dropdown-item-spacing-horizontal: var(~'@{pagination-custom-prefix}-dropdown-item-spacing-padding-horizontal', 24px);
 
 
 
@@ -7860,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);
 
 
 
@@ -8944,7 +9037,7 @@ textarea {
 @select-dropdown-bg: var(~'@{select-custom-prefix}-dropdown-color-background', @color-background);
 @select-disabled-option-bg: var(~'@{select-custom-prefix}-item-color-background-disabled', @color-background-contain-disabled);
 @select-item-active-bg: var(~'@{select-custom-prefix}-color-background', @color-hover);
-@select-item-selected-bg: var(~'@{select-custom-prefix}-color-background-selected', #f2f9ff);
+@select-item-selected-bg: var(~'@{select-custom-prefix}-color-background-selected', @color-theme-3);
 @select-g-color-border: var(~'@{select-custom-prefix}-color-border', @color-input);
 @select-g-color-border-foucs: var(~'@{select-custom-prefix}-color-border-foucs', @color-theme);
 @select-g-color-border-hover: var(~'@{select-custom-prefix}-color-border-hover', @color-theme);
@@ -9777,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);
@@ -11853,7 +11946,7 @@ template {
   }
 
   &-disabled {
-    background-color: @switch-disabled-bg;
+    background-color: @switch-off-disabled-bg;
     cursor: not-allowed;
   }
 
@@ -11874,7 +11967,7 @@ template {
     }
 
     &.@{switch-prefix-cls}-disabled {
-      opacity: 0.5;
+      background-color: @switch-on-disabled-bg;
     }
 
     .@{switch-prefix-cls}-inner {
@@ -11946,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);
 
@@ -11959,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);