@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/tag/style/token.less

@@ -0,0 +1,42 @@
+@import '../../style/themes/token.less';
+
+@tag-custom-prefix: ~'--@{kd-prefix}-c-tag';
+
+// color
+@tag-process-color: var(~'@{tag-custom-prefix}-color-process', @color-ongoing);
+@tag-success-color: var(~'@{tag-custom-prefix}-color-success', @color-success);
+@tag-warning-color: var(~'@{tag-custom-prefix}-color-warning', @color-warning);
+@tag-error-color: var(~'@{tag-custom-prefix}-color-error', @color-error);
+@tag-end-color: var(~'@{tag-custom-prefix}-color-end', @color-end);
+@tag-expired-color: var(~'@{tag-custom-prefix}-color-expired', @color-disabled);
+@tag-disabled-color: var(~'@{tag-custom-prefix}-color-disabled', @color-disabled);
+@tag-attribute-g-text-color: var(~'@{tag-custom-prefix}-attribute-color-text', @color-white);
+@tag-edit-g-color-border: var(~'@{tag-custom-prefix}-edit-color-border', @color-text-placeholder);
+@tag-edit-g-text-color: var(~'@{tag-custom-prefix}-edit-color-text', @color-text-primary);
+@tag-edit-g-color-border-hover: var(~'@{tag-custom-prefix}-edit-color-border-hover', @color-theme);
+@tag-edit-cloesWrapper-g-color-background-hover: var(~'@{tag-custom-prefix}-edit-cloesWrapper-color-background-hover', @color-theme);
+@tag-edit-cloesWrapper-g-text-color-hover: var(~'@{tag-custom-prefix}-edit-cloesWrapper-color-text-hover', @color-white);
+@tag-edit-g-color-background-disabled: var(~'@{tag-custom-prefix}-edit-color-background-disabled', @color-background-contain-disabled);
+@tag-edit-g-color-border-disabled: var(~'@{tag-custom-prefix}-edit-color-background-disabled', @color-border-strong);
+@tag-edit-g-text-color-disabled: var(~'@{tag-custom-prefix}-edit-color-text-disabled', @color-border-strong);
+
+// font
+@tag-small-font-size: var(~'@{tag-custom-prefix}-font-size-small', @font-size-small);
+@tag-middle-font-size: var(~'@{tag-custom-prefix}-font-size-middle', @font-size-small);
+@tag-large-font-size: var(~'@{tag-custom-prefix}-font-size-large', @font-size-middle);
+
+// motion
+@tag-g-motion-duration: var(~'@{tag-custom-prefix}-motion-duration', @duration-promptly);
+
+// radius
+@tag-border-radius: var(~'@{tag-custom-prefix}-radius-border', 10px);
+
+// sizing
+@tag-small-height: var(~'@{tag-custom-prefix}-sizing-height-small', 20px);
+@tag-middle-height: var(~'@{tag-custom-prefix}-sizing-height-middle', 20px);
+@tag-large-height: var(~'@{tag-custom-prefix}-sizing-height-large', 24px);
+
+// spacing
+@tag-small-padding-horizontal: var(~'@{tag-custom-prefix}-spacing-padding-horizontal-small', 6px);
+@tag-middle-padding-horizontal: var(~'@{tag-custom-prefix}-spacing-padding-horizontal-middle', 7px);
+@tag-large-padding-horizontal: var(~'@{tag-custom-prefix}-spacing-padding-horizontal-large', 8px);

package/lib/timeline/style/index.css

@@ -92,6 +92,15 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
@@ -116,17 +125,17 @@
           font-feature-settings: 'tnum';
   position: relative;
   margin: 0;
-  padding-bottom: 26px;
-  font-size: 12px;
+  padding-bottom: var(--kd-c-timeline-spacing-padding-bottom, 26px);
+  font-size: var(--kd-c-timeline-content-font-size, var(--kd-g-font-size-small, 12px));
 }
 .kd-timeline .kd-timeline-item-tail {
   position: absolute;
-  left: 4px;
+  left: calc((9px - 1px) / 2);
   height: calc(100% - 9px * 2 + 4px);
-  border-left: 1px solid #e5e5e5;
+  border-left: var(--kd-c-timeline-sizing-width, 1px) solid var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
 }
 .kd-timeline .kd-timeline-item.pending .kd-timeline-item-dot {
-  font-size: 12px;
+  font-size: var(--kd-c-timeline-content-font-size, var(--kd-g-font-size-small, 12px));
 }
 .kd-timeline .kd-timeline-item.pending .kd-timeline-item-tail {
   display: none;
@@ -142,24 +151,24 @@
           transform: translateY(-50%);
 }
 .kd-timeline .kd-timeline-item-dot.blue {
-  color: #5582f3;
-  background-color: #5582f3;
+  color: var(--kd-c-timeline-finished-color, var(--kd-g-color-theme, #5582f3));
+  background-color: var(--kd-c-timeline-finished-color, var(--kd-g-color-theme, #5582f3));
 }
 .kd-timeline .kd-timeline-item-dot.red {
-  color: #fb2323;
-  background-color: #fb2323;
+  color: var(--kd-c-timeline-error-color, var(--kd-g-color-error, #fb2323));
+  background-color: var(--kd-c-timeline-error-color, var(--kd-g-color-error, #fb2323));
 }
 .kd-timeline .kd-timeline-item-dot.green {
-  color: #1ba854;
-  background-color: #1ba854;
+  color: var(--kd-c-timeline-success-color, var(--kd-g-color-success, #1ba854));
+  background-color: var(--kd-c-timeline-success-color, var(--kd-g-color-success, #1ba854));
 }
 .kd-timeline .kd-timeline-item-dot.gray {
-  color: #b2b2b2;
-  background-color: #b2b2b2;
+  color: var(--kd-c-timeline-disabled-color, var(--kd-g-color-disabled, #b2b2b2));
+  background-color: var(--kd-c-timeline-disabled-color, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-timeline .kd-timeline-item-dot.custom {
   position: absolute;
-  left: 4.5px;
+  left: calc(9px / 2);
   width: auto;
   height: auto;
   margin-top: 0;
@@ -174,9 +183,9 @@
 }
 .kd-timeline .kd-timeline-item-content {
   position: relative;
-  margin: 0 0 0 24px;
+  margin: 0 0 0 calc(2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px);
   word-break: break-word;
-  color: #212121;
+  color: var(--kd-c-timeline-content-color-text, var(--kd-g-color-text-primary, #212121));
 }
 .kd-timeline .kd-timeline-item-content > * {
   margin: 0;
@@ -194,7 +203,7 @@
   left: 50%;
 }
 .kd-timeline.alternate .kd-timeline-item-dot {
-  margin-left: -4px;
+  margin-left: calc(-1 * (9px - 1px) / 2);
 }
 .kd-timeline.alternate .kd-timeline-item-dot.custom {
   margin-left: 1px;
@@ -216,7 +225,7 @@
   right: 4.5px;
 }
 .kd-timeline.right .kd-timeline-item-dot {
-  margin-right: -4px;
+  margin-right: calc(-1 * (9px - 1px) / 2);
 }
 .kd-timeline.right .kd-timeline-item-dot.custom {
   margin-right: 1px;
@@ -224,16 +233,16 @@
 .kd-timeline.right .kd-timeline-item .kd-timeline-item-content {
   left: 0;
   text-align: right;
-  margin: 0 24px 0 0;
+  margin: 0 calc(2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) 0 0;
   width: auto;
 }
 .kd-timeline.label.left .kd-timeline-item-tail,
 .kd-timeline.label.left .kd-timeline-item-dot,
 .kd-timeline.label.left .kd-timeline-item-dot.custom {
-  left: 20.5px;
+  left: calc((2 * 8px) + (9px / 2));
 }
 .kd-timeline.label.left .kd-timeline-item-dot {
-  margin-left: -4px;
+  margin-left: calc(-1 * (9px - 1px) / 2);
 }
 .kd-timeline.label.left .kd-timeline-item-dot.custom {
   margin-left: 1px;
@@ -241,9 +250,10 @@
 .kd-timeline.label.left .kd-timeline-item .kd-timeline-item-label {
   position: absolute;
   text-align: right;
+  color: var(--kd-c-timeline-label-color-text, #666666);
 }
 .kd-timeline.label.left .kd-timeline-item .kd-timeline-item-content {
-  left: 16.5px;
+  left: calc(9px + 7.5px);
   text-align: left;
   margin-right: 16px;
 }
@@ -251,13 +261,13 @@
 .kd-timeline.label.right .kd-timeline-item-dot,
 .kd-timeline.label.right .kd-timeline-item-dot.custom {
   left: auto;
-  right: 20.5px;
+  right: calc((2 * 8px) + (9px / 2));
 }
 .kd-timeline.label.right .kd-timeline-item-dot {
-  margin-right: -4px;
+  margin-right: calc(-1 * (9px - 1px) / 2);
 }
 .kd-timeline.label.right .kd-timeline-item-dot.custom {
-  right: 6px;
+  right: calc(-1 * (9px - 1px) / 2);
 }
 .kd-timeline.label.right .kd-timeline-item .kd-timeline-item-label {
   position: absolute;
@@ -266,7 +276,7 @@
 }
 .kd-timeline.label.right .kd-timeline-item .kd-timeline-item-content {
   left: auto;
-  right: 16.5px;
+  right: calc(9px + 7.5px);
   text-align: right;
   margin-left: 17px;
 }
@@ -277,14 +287,14 @@
 }
 .kd-timeline.label.alternate .kd-timeline-item:nth-child(2n) .kd-timeline-item-label {
   position: absolute;
-  left: calc(50% + (2 * (9px - 1px) + 8px) - 9px / 2);
-  width: calc(50% - (2 * (9px - 1px) + 8px) + 9px / 2);
+  left: calc(50% + (2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) - 9px / 2);
+  width: calc(50% - (2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) + 9px / 2);
   text-align: left;
 }
 .kd-timeline.pending .kd-timeline-item.last .kd-timeline-item-tail {
   display: block;
   height: calc(100% - 14px);
-  border-left: 2px dotted #e5e5e5;
+  border-left: 2px dotted var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
 }
 .kd-timeline.reverse .kd-timeline-item.last .kd-timeline-item-tail {
   display: none;
@@ -293,7 +303,7 @@
   top: 15px;
   display: block;
   height: calc(100% - 15px);
-  border-left: 2px dotted #e5e5e5;
+  border-left: 2px dotted var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
 }
 .kd-timeline.reverse .kd-timeline-item.pending .kd-timeline-item-content {
   min-height: 48px;

package/lib/timeline/style/index.less

@@ -1,6 +1,8 @@
 @import '../../style/themes/index';
+@import 'token.less';
 @import '../../style/mixins/index';
 
+
 @timeline-prefix-cls: ~'@{kd-prefix}-timeline';
 @timeline-item-prefix-cls: ~'@{kd-prefix}-timeline-item';
 
@@ -16,17 +18,17 @@
     position: relative;
     margin: 0;
     padding-bottom: @timeline-item-padding-bottom;
-    font-size: @small-font-size;
+    font-size: @timeline-content-font-size-small;
 
     &-tail {
       position: absolute;
-      left: (@timeline-dot-size - 1) / 2;
+      left: calc((@timeline-dot-size - 1px) / 2);
       height: calc(100% - @timeline-dot-size * 2 + 4px);
-      border-left: @timeline-width solid @timeline-color;
+      border-left: @timeline-width solid @timeline-line-color;
     }
 
     &.pending .@{timeline-item-prefix-cls}-dot {
-      font-size: @small-font-size;
+      font-size: @timeline-content-font-size-small;
     }
 
     &.pending .@{timeline-item-prefix-cls}-tail {
@@ -42,29 +44,29 @@
       transform: translateY(-50%);
 
       &.blue {
-        color: @theme-color;
-        background-color: @theme-color;
+        color: @timeline-finished-color;
+        background-color: @timeline-finished-color;
       }
 
       &.red {
-        color: @error-color;
-        background-color: @error-color;
+        color: @timeline-error-color;
+        background-color: @timeline-error-color;
       }
 
       &.green {
-        color: @success-color;
-        background-color: @success-color;
+        color: @timeline-success-color;
+        background-color: @timeline-success-color;
       }
 
       &.gray {
-        color: @disabled-color;
-        background-color: @disabled-color;
+        color: @timeline-disabled-color;
+        background-color: @timeline-disabled-color;
       }
     }
 
     &-dot.custom {
       position: absolute;
-      left: @timeline-dot-size / 2;
+      left: calc(@timeline-dot-size / 2);
       width: auto;
       height: auto;
       margin-top: 0;
@@ -79,9 +81,9 @@
 
     &-content {
       position: relative;
-      margin: 0 0 0 2 * (@timeline-dot-size - @timeline-width) + @timeline-gap;
+      margin: 0 0 0 calc(2 * (@timeline-dot-size - @timeline-width) + @timeline-gap);
       word-break: break-word;
-      color: @primary-text-color;
+      color: @timeline-content-color-text;
 
       > * {
         margin: 0;
@@ -108,7 +110,7 @@
       }
 
       &-dot {
-        margin-left: -1 * (@timeline-dot-size - 1) / 2;
+        margin-left:calc(-1 * (@timeline-dot-size - 1px) / 2);
 
         &.custom {
           margin-left: 1px;
@@ -143,7 +145,7 @@
       }
 
       &-dot {
-        margin-right: -1 * (@timeline-dot-size - 1) / 2;
+        margin-right:calc(-1 * (@timeline-dot-size - 1px) / 2) ;
 
         &.custom {
           margin-right: 1px;
@@ -152,7 +154,7 @@
       .@{timeline-item-prefix-cls}-content {
         left: 0;
         text-align: right;
-        margin: 0 2 * (@timeline-dot-size - @timeline-width) + @timeline-gap 0 0;
+        margin: 0 calc(2 * (@timeline-dot-size - @timeline-width) + @timeline-gap)  0 0;
         width: auto;
       }
     }
@@ -164,12 +166,12 @@
         &-tail,
         &-dot,
         &-dot.custom {
-          left: ((2 * @timeline-gap) + (@timeline-dot-size / 2));
+          left: calc((2 * @timeline-gap) + (@timeline-dot-size / 2));
         }
 
         &-dot {
-          margin-left: -1 * (@timeline-dot-size - 1) / 2;
-  
+          margin-left: calc(-1 * (@timeline-dot-size - 1px) / 2);
+
           &.custom {
             margin-left: 1px;
           }
@@ -177,9 +179,10 @@
         .@{timeline-item-prefix-cls}-label {
           position: absolute;
           text-align: right;
+          color: @timeline-label-color-text;
         }
         .@{timeline-item-prefix-cls}-content {
-          left: @timeline-dot-size + 7.5px;
+          left: calc(@timeline-dot-size + 7.5px);
           text-align: left;
           margin-right: 16px;
         }
@@ -191,14 +194,14 @@
         &-dot,
         &-dot.custom {
           left: auto;
-          right: ((2 * @timeline-gap) + (@timeline-dot-size / 2));
+          right: calc((2 * @timeline-gap) + (@timeline-dot-size / 2));
         }
-  
+
         &-dot {
-          margin-right: -1 * (@timeline-dot-size - 1) / 2;
-  
+          margin-right: calc(-1 * (@timeline-dot-size - 1px) / 2);
+
           &.custom {
-            right: @timeline-gap - 2px;
+            right: calc(-1 * (@timeline-dot-size - 1px) / 2);
           }
         }
         .@{timeline-item-prefix-cls}-label {
@@ -208,7 +211,7 @@
         }
         .@{timeline-item-prefix-cls}-content {
           left: auto;
-          right: @timeline-dot-size + 7.5px;
+          right: calc(@timeline-dot-size + 7.5px);
           text-align: right;
           margin-left: 17px;
         }
@@ -238,7 +241,7 @@
   &.pending .@{timeline-item-prefix-cls}.last .@{timeline-item-prefix-cls}-tail {
     display: block;
     height: calc(100% - 14px);
-    border-left: 2px dotted @timeline-color;
+    border-left: 2px dotted @timeline-line-color;
   }
 
   &.reverse .@{timeline-item-prefix-cls}.last .@{timeline-item-prefix-cls}-tail {
@@ -250,7 +253,7 @@
       top: 15px;
       display: block;
       height: calc(100% - 15px);
-      border-left: 2px dotted @timeline-color;
+      border-left: 2px dotted @timeline-line-color;
     }
     .@{timeline-item-prefix-cls}-content {
       min-height: 48px;

package/lib/timeline/style/token.less

@@ -0,0 +1,45 @@
+@import '../../style/themes/token.less';
+
+
+
+@timeline-prefix: '--@{kd-prefix}-c-timeline';
+
+
+@timeline-gap:  8px;
+
+// @timeline-dot-size: var(~'@{timeline-prefix}-dot-sizing',9px);
+@timeline-dot-size: 9px;
+
+
+
+
+
+
+
+// color
+@timeline-finished-color:  var(~'@{timeline-prefix}-finished-color',@color-theme);
+@timeline-error-color:  var(~'@{timeline-prefix}-error-color',@color-error);
+@timeline-success-color:  var(~'@{timeline-prefix}-success-color',@color-success);
+@timeline-disabled-color:  var(~'@{timeline-prefix}-disabled-color',@color-disabled);
+@timeline-line-color:  var(~'@{timeline-prefix}-line-color',@color-border-weak);//引导线颜色
+@timeline-label-color-text: var(~'@{timeline-prefix}-label-color-text',#666666);
+@timeline-content-color-text: var(~'@{timeline-prefix}-content-color-text',@color-text-primary);
+
+
+// font
+@timeline-content-font-size-small: var(~'@{timeline-prefix}-content-font-size',@font-size-small);
+
+
+// sizing
+@timeline-width: var(~'@{timeline-prefix}-sizing-width',1px);
+
+// spacing
+@timeline-item-padding-bottom: var(~'@{timeline-prefix}-spacing-padding-bottom',26px);
+
+
+
+
+
+
+
+

package/lib/tooltip/style/index.css

@@ -92,6 +92,15 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
@@ -104,17 +113,17 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  max-width: 267px;
-  padding: 8px 12px;
-  color: #212121;
-  border-radius: 2px;
-  font-size: 12px;
+  max-width: var(--kd-c-tooltip-sizing-max-width, 360px);
+  padding: var(--kd-c-tooltip-spacing-padding-vertical, 8px) var(--kd-c-tooltip-spacing-padding-vertical, 12px);
+  color: var(--kd-c-tooltip-color-text, var(--kd-g-color-text-primary, #212121));
+  border-radius: var(--kd-c-tooltip-radius-border, var(--kd-g-radius-border, 2px));
+  font-size: var(--kd-c-tooltip-color-text, var(--kd-g-font-size-small, 12px));
   line-height: 18px;
-  background-color: #fff;
+  background-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
   -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
           box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
   opacity: 1;
-  z-index: 1050;
+  z-index: var(--kd-g-z-index-popper, 1050);
   visibility: visible;
 }
 .kd-tooltip.hidden {
@@ -139,26 +148,26 @@
   bottom: 0;
   left: 0;
   content: '';
-  background: #fff;
-  border-radius: 2px;
+  background: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
+  border-radius: var(--kd-g-radius-border, 2px);
 }
 .kd-tooltip.arrow.bottomLeft::before,
 .kd-tooltip.arrow.bottom::before,
 .kd-tooltip.arrow.bottomRight::before {
   left: var(--arrowLeft);
   top: var(--arrowSpill);
-  -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.1);
-          box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.1);
-  border-color: #fff transparent transparent #fff;
+  -webkit-box-shadow: -2px -2px calc(6px - 1px) rgba(0, 0, 0, 0.1);
+          box-shadow: -2px -2px calc(6px - 1px) rgba(0, 0, 0, 0.1);
+  border-color: var(--kd-g-color-white, #fff) transparent transparent var(--kd-g-color-white, #fff);
 }
 .kd-tooltip.arrow.topLeft::before,
 .kd-tooltip.arrow.top::before,
 .kd-tooltip.arrow.topRight::before {
   left: var(--arrowLeft);
   bottom: var(--arrowSpill);
-  -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.15);
-          box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.15);
-  border-color: transparent #fff #fff transparent;
+  -webkit-box-shadow: 3px 3px calc(6px + 1px) rgba(0, 0, 0, 0.15);
+          box-shadow: 3px 3px calc(6px + 1px) rgba(0, 0, 0, 0.15);
+  border-color: transparent var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent;
 }
 .kd-tooltip.arrow.leftTop::before,
 .kd-tooltip.arrow.left::before,
@@ -167,7 +176,7 @@
   right: var(--arrowSpill);
   -webkit-box-shadow: 3px 0 6px rgba(0, 0, 0, 0.12), 0 -2px 6px rgba(204, 149, 149, 0.12);
           box-shadow: 3px 0 6px rgba(0, 0, 0, 0.12), 0 -2px 6px rgba(204, 149, 149, 0.12);
-  border-color: #fff #fff transparent transparent;
+  border-color: var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent transparent;
 }
 .kd-tooltip.arrow.rightTop::before,
 .kd-tooltip.arrow.right::before,
@@ -176,5 +185,5 @@
   left: var(--arrowSpill);
   -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), -2px 0 6px rgba(0, 0, 0, 0.1);
           box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), -2px 0 6px rgba(0, 0, 0, 0.1);
-  border-color: transparent transparent #fff #fff;
+  border-color: transparent transparent var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff);
 }

package/lib/tooltip/style/index.less

@@ -1,20 +1,21 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './token.less';
 
 @tootip-prefix-cls: ~'@{kd-prefix}-tooltip';
 
 .@{tootip-prefix-cls} {
   .reset-component;
-  max-width: @tooltip-width;
+  max-width: @tooltip-max-width;
   padding: @tooltip-vertical-gap @tooltip-horizontal-gap;
   color: @tooltip-color;
-  border-radius: @radius-size;
+  border-radius: @tooltip-border-radius;
   font-size: @tooltip-font-size;
-  line-height: @tooltip-line-height;
+  line-height: 18px;
   background-color: @tooltip-background-color;
-  box-shadow: 0 1px @tooltip-box-shadow-blur 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
   opacity: 1;
-  z-index: @zIndex-popper;
+  z-index: @z-index-popper;
   visibility: visible;
 
   &.hidden {

package/lib/tooltip/style/token.less

@@ -0,0 +1,20 @@
+@import '../../style/themes/token.less';
+
+@tooltip-custom-prefix: ~'--@{kd-prefix}-c-tooltip';
+
+// color
+@tooltip-color: var(~'@{tooltip-custom-prefix}-color-text', @color-text-primary);
+@tooltip-background-color: var(~'@{tooltip-custom-prefix}-color-background', @color-background);
+
+// font
+@tooltip-font-size: var(~'@{tooltip-custom-prefix}-color-text', @font-size-small);
+
+// spacing
+@tooltip-vertical-gap: var(~'@{tooltip-custom-prefix}-spacing-padding-vertical', 8px);
+@tooltip-horizontal-gap: var(~'@{tooltip-custom-prefix}-spacing-padding-vertical', 12px);
+
+// sizing
+@tooltip-max-width: var(~'@{tooltip-custom-prefix}-sizing-max-width', 360px);
+
+// radius
+@tooltip-border-radius: var(~'@{tooltip-custom-prefix}-radius-border', @radius-border);

package/lib/transfer/operation.js

@@ -31,7 +31,7 @@ var Operation = function Operation(_ref) {
     className: className,
     style: style
   }, /*#__PURE__*/_react.default.createElement(_button.default, {
-    type: "primary",
+    type: disabled || !rightActive ? 'ghost' : 'primary',
     size: "small",
     disabled: disabled || !rightActive,
     onClick: moveToRight,
@@ -41,7 +41,7 @@ var Operation = function Operation(_ref) {
       type: "arrow-left"
     })
   }, rightArrowText), !oneWay && /*#__PURE__*/_react.default.createElement(_button.default, {
-    type: "primary",
+    type: disabled || !leftActive ? 'ghost' : 'primary',
     size: "small",
     disabled: disabled || !leftActive,
     onClick: moveToLeft,