@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/es/split-panel/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 */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
@@ -99,7 +108,7 @@
   position: relative;
   width: 100%;
   height: 100%;
-  border: 1px solid #ccc;
+  border: var(--kd-c-split-panel-wrapper-sizing-border, 1px) solid var(--kd-c-split-panel-color-border, #d9d9d9);
   overflow: hidden;
 }
 .kd-split-panel {
@@ -115,11 +124,11 @@
 }
 .kd-split-panel.left-panel {
   left: 0;
-  margin-right: 0.5px;
+  margin-right: calc(var(--kd-c-split-panel-line-sizing-border, 1px) / 2);
 }
 .kd-split-panel.right-panel {
   right: 0;
-  margin-left: 0.5px;
+  margin-left: calc(var(--kd-c-split-panel-line-sizing-border, 1px) / 2);
 }
 .kd-split-panel.top-panel,
 .kd-split-panel.bottom-panel {
@@ -128,11 +137,11 @@
 }
 .kd-split-panel.top-panel {
   top: 0;
-  margin-bottom: 0.5px;
+  margin-bottom: calc(var(--kd-c-split-panel-line-sizing-border, 1px) / 2);
 }
 .kd-split-panel.bottom-panel {
   bottom: 0;
-  margin-top: 0.5px;
+  margin-top: calc(var(--kd-c-split-panel-line-sizing-border, 1px) / 2);
 }
 .kd-split-panel-moving {
   -webkit-user-select: none;
@@ -149,8 +158,8 @@
   transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-split-trigger-con.is-active .kd-split-trigger-arrow {
-  border-color: #ccc;
-  background: #ccc;
+  border-color: var(--kd-c-split-panel-arrow-color-background, #999);
+  background: var(--kd-c-split-panel-arrow-color-background, #999);
   color: white;
 }
 .kd-split-trigger-con.can-drag .kd-split-trigger-vertical {
@@ -163,17 +172,17 @@
   cursor: not-allowed;
 }
 .kd-split-trigger-con:not(.is-disabled):hover .kd-split-trigger-arrow {
-  border-color: #ccc;
+  border-color: var(--kd-c-split-panel-arrow-color-background, #999);
 }
 .kd-split-trigger-con:not(.is-disabled) .kd-split-trigger-arrow:hover {
   cursor: pointer;
   background: #fff !important;
-  color: #5582f3 !important;
-  border-color: #5582f3 !important;
+  color: var(--kd-c-split-panel-arrow-color-background-hover, var(--kd-g-color-theme, #5582f3)) !important;
+  border-color: var(--kd-c-split-panel-arrow-color-background-hover, var(--kd-g-color-theme, #5582f3)) !important;
 }
 .kd-split-trigger-arrow {
   position: absolute;
-  color: #a7b5d3;
+  color: var(--kd-c-split-panel-arrow-color-background, #999);
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -185,76 +194,58 @@
           justify-content: center;
   -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  border: var(--kd-c-split-panel-arrow-sizing-border, 1px) solid transparent;
 }
 .kd-split-trigger-arrow .kdicon {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  width: 12px;
-  height: 12px;
   font-size: 12px;
 }
 .kd-split-trigger-arrow.is-vertical {
-  width: 12px;
-  height: 16px;
+  width: var(--kd-c-split-panel-arrow-sizing-width-vertical, 16px);
+  height: var(--kd-c-split-panel-arrow-sizing-height-vertical, 16px);
   top: 50%;
   -webkit-transform: translate(0, -50%);
           transform: translate(0, -50%);
 }
-.kd-split-trigger-arrow.is-vertical .kdicon {
-  height: 12px;
-}
 .kd-split-trigger-arrow.is-horizontal {
-  width: 16px;
-  height: 12px;
+  width: var(--kd-c-split-panel-arrow-sizing-width-horizontal, 16px);
+  height: var(--kd-c-split-panel-arrow-sizing-height-horizontal, 16px);
   left: 50%;
   -webkit-transform: translate(-50%, 0);
           transform: translate(-50%, 0);
 }
-.kd-split-trigger-arrow.is-horizontal .kdicon {
-  width: 12px;
-}
 .kd-split-trigger-arrow.top {
   bottom: 100%;
-  border: 1px solid transparent;
   border-bottom: none;
-  border-radius: 10px 10px 0 0;
+  border-radius: var(--kd-c-split-panel-arrow-radius-border-vertical, 8px) var(--kd-c-split-panel-arrow-radius-border-vertical, 8px) 0 0;
 }
 .kd-split-trigger-arrow.bottom {
   top: 100%;
-  border: 1px solid transparent;
   border-top: none;
-  border-radius: 0 0 10px 10px;
+  border-radius: 0 0 var(--kd-c-split-panel-arrow-radius-border-vertical, 8px) var(--kd-c-split-panel-arrow-radius-border-vertical, 8px);
 }
 .kd-split-trigger-arrow.left {
   right: 100%;
-  border: 1px solid transparent;
   border-right: none;
-  border-radius: 10px 0 0 10px;
+  border-radius: var(--kd-c-split-panel-arrow-radius-border-horizontal, 8px) 0 0 var(--kd-c-split-panel-arrow-radius-border-horizontal, 8px);
 }
 .kd-split-trigger-arrow.right {
   left: 100%;
-  border: 1px solid transparent;
   border-left: none;
-  border-radius: 0 10px 10px 0;
+  border-radius: 0 var(--kd-c-split-panel-arrow-radius-border-horizontal, 8px) var(--kd-c-split-panel-arrow-radius-border-horizontal, 8px) 0;
 }
 .kd-split-trigger-vertical {
-  width: 1px;
+  width: var(--kd-c-split-panel-line-sizing-border, 1px);
   height: 100%;
-  background: #ccc;
+  background: var(--kd-c-split-panel-line-color-background, #d9d9d9);
   border-top: none;
   border-bottom: none;
 }
 .kd-split-trigger-horizontal {
-  height: 1px;
+  height: var(--kd-c-split-panel-line-sizing-border, 1px);
   width: 100%;
-  background: #ccc;
+  background: var(--kd-c-split-panel-line-color-background, #d9d9d9);
   border-left: none;
   border-right: none;
 }

package/es/split-panel/style/index.less

@@ -1,16 +1,17 @@
 
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './token.less';
 
 @split-prefix-cls: ~'@{kd-prefix}-split';
-@split-panel-padding-base: @split-panel-trigger-line-width / 2;
+@split-panel-padding-base: calc(@split-panel-trigger-line-width / 2);
 
 .@{split-prefix-cls} {
     &-wrapper {
         position: relative;
         width: 100%;
         height: 100%;
-        border: 1px solid @split-panel-trigger-border-color;
+        border: @split-panel-wrapper-border-width solid @split-panel-trigger-border-color;
         overflow: hidden;
     }
     &-panel {
@@ -56,8 +57,8 @@
           transition: all calc(@transition-duration - 0.1s) @ease-out;
           &.is-active {
             .@{split-prefix-cls}-trigger-arrow {
-              border-color: @split-panel-trigger-border-color;
-              background: @split-panel-trigger-border-color;
+              border-color: @split-panel-trigger-arrow-color;
+              background: @split-panel-trigger-arrow-color;
               color: white;
             }
           }
@@ -77,7 +78,7 @@
           &:not(.is-disabled) {
             &:hover{
               .@{split-prefix-cls}-trigger-arrow {
-                border-color: @split-panel-trigger-border-color;
+                border-color: @split-panel-trigger-arrow-color;
               }
             }
             .@{split-prefix-cls}-trigger-arrow:hover {
@@ -95,61 +96,42 @@
           align-items: center;
           justify-content: center;
           transition: all calc(@transition-duration - 0.1s) @ease-out;
+          box-sizing: border-box;
+          border: @split-panel-arrow-border-width solid transparent;
           .@{kd-prefix}icon {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 12px;
-            height: 12px;
             font-size: 12px;
           }
           &.is-vertical {
-              width: 12px;
-              height: 16px;
+              width: @split-panel-arrow-vertical-width;
+              height: @split-panel-arrow-vertical-height;
               top: 50%;
               transform: translate(0, -50%);
-              .@{kd-prefix}icon {
-                height: 12px;
-                // position: absolute;
-                // top: 50%;
-                // transform: translate(0, -50%);
-              }
           }
           &.is-horizontal {
-              width: 16px;
-              height: 12px;
+              width: @split-panel-arrow-horizontal-width;
+              height: @split-panel-arrow-horizontal-height;
               left: 50%;
               transform: translate(-50%, 0);
-              .@{kd-prefix}icon {
-                width: 12px;
-                // position: absolute;
-                // left: 50%;
-                // transform: translate(-50%, 0);
-              }
           }
           &.top {
             bottom: 100%;
-            border: 1px solid transparent;
             border-bottom: none;
-            border-radius: 10px 10px 0 0;
+            border-radius: @split-panel-arrow-vertical-radius @split-panel-arrow-vertical-radius 0 0;
           }
           &.bottom {
             top: 100%;
-            border: 1px solid transparent;
             border-top: none;
-            border-radius: 0 0 10px 10px;
+            border-radius: 0 0 @split-panel-arrow-vertical-radius @split-panel-arrow-vertical-radius;
           }
           &.left {
             right: 100%;
-            border: 1px solid transparent;
             border-right: none;
-            border-radius: 10px 0 0 10px;
+            border-radius: @split-panel-arrow-horizontal-radius 0 0 @split-panel-arrow-horizontal-radius;
           }
           &.right {
             left: 100%;
-            border: 1px solid transparent;
             border-left: none;
-            border-radius: 0 10px 10px 0;
+            border-radius: 0 @split-panel-arrow-horizontal-radius @split-panel-arrow-horizontal-radius 0;
           }
         }
         &-vertical {

package/es/split-panel/style/token.less

@@ -0,0 +1,23 @@
+@import '../../style/themes/token.less';
+
+@split-panel-custom-prefix: ~'--@{kd-prefix}-c-split-panel';
+
+// color
+@split-panel-trigger-border-color: var(~'@{split-panel-custom-prefix}-color-border', #d9d9d9);
+@split-panel-trigger-arrow-color: var(~'@{split-panel-custom-prefix}-arrow-color-background', #999);
+@split-panel-trigger-arrow-hover-color: var(~'@{split-panel-custom-prefix}-arrow-color-background-hover', @color-theme);
+@split-panel-trigger-line-color: var(~'@{split-panel-custom-prefix}-line-color-background', #d9d9d9);
+
+// radius
+@split-panel-arrow-vertical-radius: var(~'@{split-panel-custom-prefix}-arrow-radius-border-vertical', 8px);
+@split-panel-arrow-horizontal-radius: var(~'@{split-panel-custom-prefix}-arrow-radius-border-horizontal', 8px);
+
+// sizing
+@split-panel-wrapper-border-width: var(~'@{split-panel-custom-prefix}-wrapper-sizing-border', 1px);
+@split-panel-trigger-line-width: var(~'@{split-panel-custom-prefix}-line-sizing-border', 1px);
+@split-panel-arrow-border-width: var(~'@{split-panel-custom-prefix}-arrow-sizing-border', 1px);
+@split-panel-arrow-vertical-width: var(~'@{split-panel-custom-prefix}-arrow-sizing-width-vertical', 16px);
+@split-panel-arrow-vertical-height: var(~'@{split-panel-custom-prefix}-arrow-sizing-height-vertical', 16px);
+@split-panel-arrow-horizontal-width: var(~'@{split-panel-custom-prefix}-arrow-sizing-width-horizontal', 16px);
+@split-panel-arrow-horizontal-height: var(~'@{split-panel-custom-prefix}-arrow-sizing-height-horizontal', 16px);
+

package/es/stepper/style/index.css

@@ -92,6 +92,27 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+.kd-inputNumber {
+  width: 100px;
+  height: var(--kd-c-stepper-input-middle-sizing-height, 28px);
+}
+.kd-inputNumber input {
+  text-align: center;
+  color: var(--kd-c-stepper-input-color, var(--kd-g-color-text-primary, #212121));
+  margin: 0 4px;
+}
+.kd-inputNumber-icon {
+  font-size: 14px;
+}
 .kd-inputNumber-baseStep {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -108,21 +129,25 @@
   cursor: pointer;
 }
 .kd-inputNumber-baseStep-small {
-  width: 20px;
+  width: var(--kd-c-stepper-input-small-sizing-height, 20px);
 }
 .kd-inputNumber-baseStep-middle {
-  width: 30px;
+  width: var(--kd-c-stepper-input-middle-sizing-height, 28px);
 }
 .kd-inputNumber-baseStep-large {
-  width: 36px;
+  width: var(--kd-c-stepper-input-large-sizing-height, 36px);
 }
 .kd-inputNumber-baseStep .kd-inputNumber-icon {
-  color: #666;
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
+  color: var(--kd-c-stepper-icon-color, var(--kd-g-color-text-secondary, #666));
+  -webkit-transition: color var(--kd-c-stepper-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: color var(--kd-c-stepper-motion-duration, var(--kd-g-duration, 0.3s));
+  font-size: 16px;
+}
+.kd-inputNumber-baseStep .kd-inputNumber-icon:hover {
+  color: var(--kd-c-stepper-icon-color-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-inputNumber-baseStep:hover:not(.kd-inputNumber-baseStep-disabled) .kd-inputNumber-icon {
-  color: #87adff;
+  color: var(--kd-c-stepper-icon-color-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-inputNumber-baseStep-disabled {
   cursor: not-allowed;
@@ -131,34 +156,34 @@
   color: unset !important;
 }
 .kd-inputNumber-baseStep-decrease {
-  border-right: 1px solid #d9d9d9;
+  border-right: 1px solid var(--kd-c-stepper-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-inputNumber-baseStep-decrease.kd-inputNumber-baseStep-small,
 .kd-inputNumber-baseStep-decrease.kd-inputNumber-embedStep-small {
-  margin-left: -9px;
+  margin-left: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
 .kd-inputNumber-baseStep-decrease.kd-inputNumber-baseStep-middle,
 .kd-inputNumber-baseStep-decrease.kd-inputNumber-embedStep-middle {
-  margin-left: -9px;
+  margin-left: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
 .kd-inputNumber-baseStep-decrease.kd-inputNumber-baseStep-large,
 .kd-inputNumber-baseStep-decrease.kd-inputNumber-embedStep-large {
-  margin-left: -9px;
+  margin-left: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
 .kd-inputNumber-baseStep-increase {
-  border-left: 1px solid #d9d9d9;
+  border-left: 1px solid var(--kd-c-stepper-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-inputNumber-baseStep-increase.kd-inputNumber-baseStep-small,
 .kd-inputNumber-baseStep-increase.kd-inputNumber-embedStep-small {
-  margin-right: -9px;
+  margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
 .kd-inputNumber-baseStep-increase.kd-inputNumber-baseStep-middle,
 .kd-inputNumber-baseStep-increase.kd-inputNumber-embedStep-middle {
-  margin-right: -9px;
+  margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
 .kd-inputNumber-baseStep-increase.kd-inputNumber-baseStep-large,
 .kd-inputNumber-baseStep-increase.kd-inputNumber-embedStep-large {
-  margin-right: -9px;
+  margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
 .kd-inputNumber-embedStep {
   display: -webkit-box;
@@ -173,22 +198,22 @@
           justify-content: center;
   height: 100%;
   border-radius: 0 1px 1px 0;
-  background-color: #f6f7f9;
+  background-color: var(--kd-c-stepper-embed-icon-color-background, #f6f7f9);
   overflow: hidden;
-  border-left: 1px solid #d9d9d9;
+  border-left: 1px solid var(--kd-c-stepper-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
   border: none;
 }
 .kd-inputNumber-embedStep.kd-inputNumber-baseStep-small,
 .kd-inputNumber-embedStep.kd-inputNumber-embedStep-small {
-  margin-right: -9px;
+  margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
 .kd-inputNumber-embedStep.kd-inputNumber-baseStep-middle,
 .kd-inputNumber-embedStep.kd-inputNumber-embedStep-middle {
-  margin-right: -9px;
+  margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
 .kd-inputNumber-embedStep.kd-inputNumber-baseStep-large,
 .kd-inputNumber-embedStep.kd-inputNumber-embedStep-large {
-  margin-right: -9px;
+  margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
 .kd-inputNumber-embedStep span {
   height: 50%;
@@ -201,17 +226,17 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  border-left: 1px solid #d9d9d9;
-  border-bottom: 1px solid #d9d9d9;
+  border-left: 1px solid var(--kd-c-stepper-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
+  border-bottom: 1px solid var(--kd-c-stepper-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
   cursor: pointer;
   font-size: 12px;
 }
 .kd-inputNumber-embedStep span .kd-inputNumber-icon {
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
+  -webkit-transition: color var(--kd-c-stepper-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: color var(--kd-c-stepper-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-inputNumber-embedStep span:hover .kd-inputNumber-icon {
-  color: #87adff;
+  color: var(--kd-c-stepper-icon-color-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-inputNumber-embedStep span:last-child {
   border-bottom: none;

package/es/stepper/style/index.less

@@ -1,7 +1,21 @@
 @import '../../style/themes/index';
 @import './mixin.less';
+
 @inputNumber-prefix-cls: ~'@{kd-prefix}-inputNumber';
 .@{inputNumber-prefix-cls} {
+  width: 100px;
+  height: @stepper-input-middle-sizing-height;
+
+  input {
+    text-align: center;
+    color: @stepper-input-color;
+    margin: 0 4px;
+  }
+
+  &-icon {
+    font-size: 14px;
+  }
+
   &-baseStep {
     display: flex;
     justify-content: center;
@@ -9,67 +23,87 @@
     box-sizing: border-box;
     height: 100%;
     cursor: pointer;
+
     &-small {
-      .base-step-size(@input-small-height);
+      .base-step-size(@stepper-input-small-sizing-height);
     }
+
     &-middle {
-      .base-step-size(@input-middle-height);
+      .base-step-size(@stepper-input-middle-sizing-height);
     }
+
     &-large {
-      .base-step-size(@input-large-height);
+      .base-step-size(@stepper-input-large-sizing-height);
     }
+
     .@{inputNumber-prefix-cls}-icon {
-      color: @secondary-text-color;
-      transition: color @transition-duration;
+      color: @stepper-icon-color;
+      transition: color @stepper-motion-duration;
+      font-size: 16px;
+
+      &:hover {
+        color: @stepper-icon-color-hover;
+      }
     }
+
     &:hover:not(&-disabled) .@{inputNumber-prefix-cls}-icon {
-      color: @theme-color-hover;
+      color: @stepper-icon-color-hover;
     }
 
     &-disabled {
       cursor: not-allowed;
+
       .@{inputNumber-prefix-cls}-icon {
         color: unset !important;
       }
     }
   }
+
   &-baseStep-decrease {
     .step-style(right, left);
   }
+
   &-baseStep-increase {
     .step-style(left, right);
   }
+
   &-embedStep {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 100%;
     border-radius: 0 1px 1px 0;
-    background-color: @inputNumber-embedStepBtn-bg-color;
+    background-color: @stepper-embed-icon-color-background;
     overflow: hidden;
     .step-style(left, right);
     border: none;
+
     span {
       height: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      border-left: 1px solid @strong-border-color;
-      border-bottom: 1px solid @strong-border-color;
+      border-left: 1px solid @stepper-color-border-strong;
+      border-bottom: 1px solid @stepper-color-border-strong;
       cursor: pointer;
       font-size: 12px;
+
       .@{inputNumber-prefix-cls}-icon {
-        transition: color @transition-duration;
+        transition: color @stepper-motion-duration;
       }
+
       &:hover .@{inputNumber-prefix-cls}-icon {
-        color: @theme-color-hover;
+        color: @stepper-icon-color-hover;
       }
+
       &:last-child {
         border-bottom: none;
       }
     }
+
     &-disabled {
       cursor: not-allowed !important;
+
       .@{inputNumber-prefix-cls}-icon {
         color: unset !important;
       }

package/es/stepper/style/mixin.less

@@ -1,15 +1,17 @@
+@import './token.less';
+
 .base-step-size(@width) {
 	width: @width;
 }
 .step-style(@borderDirection, @marginDirection) {
-	border-@{borderDirection}: 1px solid @strong-border-color;
+	border-@{borderDirection}: 1px solid @stepper-color-border-strong;
 	&.@{inputNumber-prefix-cls}-baseStep-small, &.@{inputNumber-prefix-cls}-embedStep-small {
-		margin-@{marginDirection}: -@input-small-padding-horizontal;
+		margin-@{marginDirection}: calc(-1 * @stepper-input-spacing-padding-horizontal);
 	}
 	&.@{inputNumber-prefix-cls}-baseStep-middle, &.@{inputNumber-prefix-cls}-embedStep-middle {
-		margin-@{marginDirection}: -@input-middle-padding-horizontal;
+		margin-@{marginDirection}: calc(-1 * @stepper-input-spacing-padding-horizontal);
 	}
 	&.@{inputNumber-prefix-cls}-baseStep-large, &.@{inputNumber-prefix-cls}-embedStep-large {
-		margin-@{marginDirection}: -@input-large-padding-horizontal;
+		margin-@{marginDirection}: calc(-1 * @stepper-input-spacing-padding-horizontal);
 	}
-}
+}

package/es/stepper/style/token.less

@@ -0,0 +1,28 @@
+@import "../../style/themes/token.less";
+
+@stepper-prefix: '--@{kd-prefix}-c-stepper';
+
+// shadow
+// color
+@stepper-input-color: var(~'@{stepper-prefix}-input-color', @color-text-primary);
+@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);
+
+// sizing
+@stepper-input-small-sizing-height: var(~'@{stepper-prefix}-input-small-sizing-height', 20px);
+@stepper-input-middle-sizing-height: var(~'@{stepper-prefix}-input-middle-sizing-height', 28px);
+@stepper-input-large-sizing-height: var(~'@{stepper-prefix}-input-large-sizing-height', 36px);
+
+// spacing
+@stepper-input-spacing-padding-horizontal: var(~'@{stepper-prefix}-input-spacing-padding-horizontal', 9px);
+
+// motion
+@stepper-motion-duration: var(~'@{stepper-prefix}-motion-duration', @duration-promptly);
+
+// font
+// radius
+// line-height
+// z-index
+

package/es/steps/Steps.js

@@ -72,7 +72,10 @@ var Steps = function Steps(props) {
       type: "right-bold",
       className: "".concat(stepsPrefixCls, "-iconSize")
     });
-    actualIcons.error = icons && icons.error || /*#__PURE__*/React.createElement("span", null, "!");
+    actualIcons.error = icons && icons.error || /*#__PURE__*/React.createElement(Icon, {
+      type: "exclamatory",
+      className: "".concat(stepsPrefixCls, "-iconSize")
+    });
     return actualIcons;
   };