@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/es/popconfirm/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,20 +113,32 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  color: #212121;
-  border-radius: 2px;
-  font-size: 12px;
-  background-color: #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);
+  border-radius: var(--kd-c-popconfirm-radius-border, var(--kd-g-radius-border, 2px));
+  background-color: var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff));
   opacity: 1;
-  z-index: 1050;
+  z-index: var(--kd-g-z-index-popper, 1050);
   visibility: visible;
 }
 .kd-popconfirm.hidden {
   opacity: 0;
   visibility: hidden;
 }
+.kd-popconfirm[class*="top"] {
+  -webkit-box-shadow: 0 6px 16px 3px rgba(0, 0, 0, 0.08);
+          box-shadow: 0 6px 16px 3px rgba(0, 0, 0, 0.08);
+}
+.kd-popconfirm[class*="bottom"] {
+  -webkit-box-shadow: 0 -6px 16px 3px rgba(0, 0, 0, 0.08);
+          box-shadow: 0 -6px 16px 3px rgba(0, 0, 0, 0.08);
+}
+.kd-popconfirm[class*="left"] {
+  -webkit-box-shadow: 6px 0 16px 3px rgba(0, 0, 0, 0.08);
+          box-shadow: 6px 0 16px 3px rgba(0, 0, 0, 0.08);
+}
+.kd-popconfirm[class*="right"] {
+  -webkit-box-shadow: -6px 0 16px 3px rgba(0, 0, 0, 0.08);
+          box-shadow: -6px 0 16px 3px rgba(0, 0, 0, 0.08);
+}
 .kd-popconfirm.arrow::before {
   position: absolute;
   z-index: -2;
@@ -136,44 +157,44 @@
   bottom: 0;
   left: 0;
   content: '';
-  background: #fff;
-  border-radius: 2px;
+  background: var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff));
+  border-radius: var(--kd-g-radius-border, 2px);
 }
 .kd-popconfirm.arrow.bottomLeft::before,
 .kd-popconfirm.arrow.bottom::before,
 .kd-popconfirm.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(16px - 1px) rgba(0, 0, 0, 0.1);
+          box-shadow: -2px -2px calc(16px - 1px) rgba(0, 0, 0, 0.1);
+  border-color: var(--kd-g-color-white, #fff) transparent transparent var(--kd-g-color-white, #fff);
 }
 .kd-popconfirm.arrow.topLeft::before,
 .kd-popconfirm.arrow.top::before,
 .kd-popconfirm.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(16px + 1px) rgba(0, 0, 0, 0.15);
+          box-shadow: 3px 3px calc(16px + 1px) rgba(0, 0, 0, 0.15);
+  border-color: transparent var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent;
 }
 .kd-popconfirm.arrow.leftTop::before,
 .kd-popconfirm.arrow.left::before,
 .kd-popconfirm.arrow.leftBottom::before {
   top: var(--arrowTop);
   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;
+  -webkit-box-shadow: 3px 0 16px rgba(0, 0, 0, 0.12), 0 -2px 16px rgba(204, 149, 149, 0.12);
+          box-shadow: 3px 0 16px rgba(0, 0, 0, 0.12), 0 -2px 16px rgba(204, 149, 149, 0.12);
+  border-color: var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent transparent;
 }
 .kd-popconfirm.arrow.rightTop::before,
 .kd-popconfirm.arrow.right::before,
 .kd-popconfirm.arrow.rightBottom::before {
   top: var(--arrowTop);
   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;
+  -webkit-box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1), -2px 0 16px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1), -2px 0 16px rgba(0, 0, 0, 0.1);
+  border-color: transparent transparent var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff);
 }
 .kd-popconfirm-content {
   -webkit-box-sizing: border-box;
@@ -184,30 +205,30 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  min-width: 164px;
-  max-width: 500px;
-  min-height: 98px;
-  max-height: 400px;
-  padding: 16px 16px;
-  overflow-y: auto;
+  width: var(--kd-c-popconfirm-sizing-min-width, 240px);
+  padding: var(--kd-c-popconfirm-spacing-padding-vertical, 16px) var(--kd-c-popconfirm-spacing-padding-horizontal, 16px);
 }
 .kd-popconfirm-title {
   line-height: 21px;
-  font-size: 14px;
+  color: var(--kd-c-popconfirm-title-color-text, var(--kd-g-color-text-primary, #212121));
+  font-size: var(--kd-c-popconfirm-title-font-size, var(--kd-g-font-size-middle, 14px));
 }
 .kd-popconfirm-title i {
-  margin-right: 8px;
+  margin-right: var(--kd-c-popconfirm-title-icon-spacing-margin-right, 6px);
   vertical-align: top;
-  color: #ff991c;
-  font-size: 17px;
   line-height: 21px;
+  color: var(--kd-c-popconfirm-icon-color-text, var(--kd-g-color-warning, #ff991c));
+  font-size: var(--kd-c-popconfirm-icon-sizing-square, 17px);
 }
 .kd-popconfirm-message {
-  margin: 6px 0 20px;
+  color: var(--kd-c-popconfirm-message-color-text, var(--kd-g-color-text-primary, #212121));
+  font-size: var(--kd-c-popconfirm-message-font-size, var(--kd-g-font-size-small, 12px));
+  line-height: 18px;
+  margin: var(--kd-c-popconfirm-message-spacing-margin-top, 6px) 0 var(--kd-c-popconfirm-message-spacing-margin-bottom, 18px);
 }
 .kd-popconfirm-interaction {
   text-align: right;
 }
 .kd-popconfirm-interaction button:not(:last-child) {
-  margin-right: 12px;
+  margin-right: var(--kd-c-popconfirm-button-spacing, 12px);
 }

package/es/popconfirm/style/index.less

@@ -1,59 +1,80 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './token.less';
 
 @popconfirm-prefix-cls: ~'@{kd-prefix}-popconfirm';
 
+@popconfirm-title-line-height: 21px;
+@popconfirm-box-shadow-blur: 16px;
+
+.showdow(@x, @y) {
+  box-shadow: @x @y @popconfirm-box-shadow-blur 3px rgba(0, 0, 0, 0.08);
+}
+
 .@{popconfirm-prefix-cls} {
   .reset-component;
-  color: @popconfirm-color;
-  border-radius: @radius-size;
-  font-size: @popconfirm-font-size;
+  border-radius: @popconfirm-border-radius;
   background-color: @popconfirm-background-color;
-  box-shadow: 0 1px @popconfirm-box-shadow-blur 0 rgba(0, 0, 0, 0.3);
   opacity: 1;
-  z-index: @zIndex-popper;
+  z-index: @z-index-popper;
   visibility: visible;
-
+  
   &.hidden {
     opacity: 0;
     visibility: hidden;
   }
 
+  &[class*="top"] {
+    .showdow(0, 6px);
+  }
+
+  &[class*="bottom"] {
+    .showdow(0, -6px);
+  }
+
+  &[class*="left"] {
+    .showdow(6px, 0);
+  }
+
+  &[class*="right"] {
+    .showdow(-6px, 0);
+  }
+  
   // 箭头样式
   .popperArrow(@popconfirm-background-color, @popconfirm-horizontal-gap, @popconfirm-box-shadow-blur);
-
+  
   &-content {
     .reset-component;
-    min-width: @popconfirm-min-width;
-    max-width: @popconfirm-max-width;
-    min-height: @popconfirm-min-height;
-    max-height: @popconfirm-max-height;
+    width: @popconfirm-width;
     padding: @popconfirm-vertical-gap @popconfirm-horizontal-gap;
-    overflow-y: auto;
   }
-
+  
   &-title {
     line-height: @popconfirm-title-line-height;
+    color: @popconfirm-title-color;
     font-size: @popconfirm-title-font-size;
-
+    
     i {
-      margin-right: 8px;
+      margin-right: @popconfirm-title-icon-margin-right;
       vertical-align: top;
-      color: @warning-color;
-      font-size: @popconfirm-icon-size;
       line-height: @popconfirm-title-line-height;
+      color: @popconfirm-icon-color;
+      font-size: @popconfirm-icon-size;
     }
   }
-
+  
   &-message {
-    margin: 6px 0 20px;
+    color: @popconfirm-message-color;
+    font-size: @popconfirm-message-font-size;
+    line-height: 18px;
+    margin: @popconfirm-message-margin-top 0 @popconfirm-message-margin-bottom;
   }
 
   &-interaction {
     text-align: right;
 
     button:not(:last-child) {
-      margin-right: 12px;
+      margin-right: @popconfirm-button-spacing;
     }
   }
 }

package/es/popconfirm/style/token.less

@@ -0,0 +1,28 @@
+@import '../../style/themes/token.less';
+
+@popconfirm-custom-prefix: ~'--@{kd-prefix}-c-popconfirm';
+
+// spacing
+@popconfirm-vertical-gap: var(~'@{popconfirm-custom-prefix}-spacing-padding-vertical', 16px);
+@popconfirm-horizontal-gap: var(~'@{popconfirm-custom-prefix}-spacing-padding-horizontal', 16px);
+@popconfirm-title-icon-margin-right: var(~'@{popconfirm-custom-prefix}-title-icon-spacing-margin-right', 6px);
+@popconfirm-message-margin-top: var(~'@{popconfirm-custom-prefix}-message-spacing-margin-top', 6px);
+@popconfirm-message-margin-bottom: var(~'@{popconfirm-custom-prefix}-message-spacing-margin-bottom', 18px);
+@popconfirm-button-spacing: var(~'@{popconfirm-custom-prefix}-button-spacing', 12px);
+
+// sizing
+@popconfirm-width: var(~'@{popconfirm-custom-prefix}-sizing-min-width', 240px);
+@popconfirm-icon-size: var(~'@{popconfirm-custom-prefix}-icon-sizing-square', 17px);
+
+// color
+@popconfirm-title-color: var(~'@{popconfirm-custom-prefix}-title-color-text', @color-text-primary);
+@popconfirm-message-color: var(~'@{popconfirm-custom-prefix}-message-color-text', @color-text-primary);
+@popconfirm-icon-color: var(~'@{popconfirm-custom-prefix}-icon-color-text', @color-warning);
+@popconfirm-background-color: var(~'@{popconfirm-custom-prefix}-color-background', @color-background);
+
+// font
+@popconfirm-title-font-size: var(~'@{popconfirm-custom-prefix}-title-font-size', @font-size-middle);
+@popconfirm-message-font-size: var(~'@{popconfirm-custom-prefix}-message-font-size', @font-size-small);
+
+// radius
+@popconfirm-border-radius: var(~'@{popconfirm-custom-prefix}-radius-border', @radius-border);

package/es/progress/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 */
 .kd-progress {
   display: inline-block;
   font-variant: tabular-nums;
@@ -102,7 +111,7 @@
   vertical-align: top;
 }
 .kd-progress-show-info {
-  font-size: 16px;
+  font-size: var(--kd-c-progress-line-text-font-size, 16px);
 }
 .kd-progress-type-line {
   width: 100%;
@@ -121,8 +130,8 @@
   font-size: 0;
 }
 .kd-progress-show-info .kd-progress-outer {
-  margin-right: -56px;
-  padding-right: 56px;
+  margin-right: calc(-1 * var(--kd-c-progress-line-text-font-size, 16px) * 3 - 8px);
+  padding-right: calc(var(--kd-c-progress-line-text-font-size, 16px) * 3 + 8px);
 }
 .kd-progress-inner {
   position: relative;
@@ -131,8 +140,8 @@
   overflow: hidden;
   vertical-align: middle;
   font-size: 0;
-  border-radius: 100px;
-  background-color: #e5e5e5;
+  border-radius: var(--kd-c-progress-radius-border, 100px);
+  background-color: var(--kd-c-progress-color-remaining, #e5e5e5);
 }
 .kd-progress-success-bg,
 .kd-progress-bg {
@@ -140,9 +149,9 @@
   display: inline-block;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  border-radius: 100px;
-  background-color: #276ff5;
-  height: 8px;
+  border-radius: var(--kd-c-progress-radius-border, 100px);
+  background-color: var(--kd-c-progress-color-default, #5582f3);
+  height: var(--kd-c-progress-line-stroke-sizing-width, 8px);
   -webkit-transition: all 0.3s cubic-bezier(0.66, 0, 0.34, 1);
   transition: all 0.3s cubic-bezier(0.66, 0, 0.34, 1);
 }
@@ -150,59 +159,64 @@
   position: absolute;
   top: 0;
   left: 0;
-  background-color: #1ba854;
+  background-color: var(--kd-c-progress-color-success, var(--kd-g-color-success, #1ba854));
 }
 .kd-progress-text {
   display: inline-block;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  width: 48px;
-  margin-left: 8px;
+  width: calc(var(--kd-c-progress-line-text-font-size, 16px)*3);
+  margin-left: var(--kd-c-progress-line-text-spacing-margin-left, 8px);
   white-space: nowrap;
   text-align: left;
   vertical-align: middle;
   word-break: normal;
 }
 .kd-progress-special-text {
-  font-size: 16px;
+  font-size: var(--kd-c-progress-line-special-text-font-size, 16px);
   text-align: center;
   overflow: hidden;
-  padding-right: 56px;
+  padding-right: calc(var(--kd-c-progress-line-text-font-size, 16px)*3 + 8px);
 }
 .kd-progress-status-success .kd-progress-bg {
-  background-color: #1ba854;
+  background-color: var(--kd-c-progress-color-success, var(--kd-g-color-success, #1ba854));
 }
 .kd-progress-status-success .kd-progress-text,
 .kd-progress-status-success .kd-progress-special-text {
-  color: #1ba854;
+  color: var(--kd-c-progress-color-success, var(--kd-g-color-success, #1ba854));
 }
 .kd-progress-status-success .kd-progress-text {
   font-size: 0;
 }
+.kd-progress-status-success .kd-progress-icon {
+  font-size: var(--kd-c-progress-line-icon-font-size, 16px);
+  color: var(--kd-c-progress-color-success, var(--kd-g-color-success, #1ba854));
+}
 .kd-progress-status-success .kd-progress-circle-box:not(.kd-progress-circle-gradient) .kd-progress-circle-path {
-  stroke: #1ba854;
+  stroke: var(--kd-c-progress-color-success, var(--kd-g-color-success, #1ba854));
 }
 .kd-progress-status-failure .kd-progress-bg {
-  background-color: #fb2323;
+  background-color: var(--kd-c-progress-color-failure, var(--kd-g-color-error, #fb2323));
 }
 .kd-progress-status-failure .kd-progress-text,
 .kd-progress-status-failure .kd-progress-special-text {
-  color: #fb2323;
+  color: var(--kd-c-progress-color-failure, var(--kd-g-color-error, #fb2323));
 }
 .kd-progress-status-failure .kd-progress-text {
   font-size: 0;
 }
-.kd-progress-status-failure .kd-progress-circle-box:not(.kd-progress-circle-gradient) .kd-progress-circle-path {
-  stroke: #fb2323;
+.kd-progress-status-failure .kd-progress-icon {
+  font-size: var(--kd-c-progress-line-icon-font-size, 16px);
+  color: var(--kd-c-progress-color-failure, var(--kd-g-color-error, #fb2323));
 }
-.kd-progress .kd-progress-icon {
-  font-size: 16px;
+.kd-progress-status-failure .kd-progress-circle-box:not(.kd-progress-circle-gradient) .kd-progress-circle-path {
+  stroke: var(--kd-c-progress-color-failure, var(--kd-g-color-error, #fb2323));
 }
 .kd-progress-circle-box {
   position: relative;
 }
 .kd-progress-circle-box .kd-progress-circle-trail {
-  stroke: #e5e5e5;
+  stroke: var(--kd-c-progress-color-remaining, #e5e5e5);
 }
 .kd-progress-circle-box .kd-progress-circle-path {
   -webkit-transition: stroke-dasharray 0.3s cubic-bezier(0.66, 0, 0.34, 1), stroke-dashoffset 0.3s cubic-bezier(0.66, 0, 0.34, 1);
@@ -225,18 +239,18 @@
   vertical-align: top;
 }
 .kd-progress-circle-box .kd-progress-text-percent {
-  line-height: 48px;
+  line-height: var(--kd-c-progress-circle-percent-line-height, 48px);
 }
 .kd-progress-circle-box .kd-progress-text-unit {
-  line-height: 18px;
+  line-height: var(--kd-c-progress-circle-unit-line-height, 18px);
   font-size: 12px;
-  margin-top: 18px;
+  margin-top: var(--kd-c-progress-circle-unit-spacing-margin-top, 18px);
 }
 .kd-progress-circle-box .kd-progress-icon {
   font-size: 48px;
 }
 .kd-progress-circle-box:not(.kd-progress-circle-gradient) .kd-progress-circle-path {
-  stroke: #276ff5;
+  stroke: var(--kd-c-progress-color-default, #5582f3);
   -webkit-transition: stroke-dasharray 0.3s cubic-bezier(0.66, 0, 0.34, 1), stroke-dashoffset 0.3s cubic-bezier(0.66, 0, 0.34, 1);
   transition: stroke-dasharray 0.3s cubic-bezier(0.66, 0, 0.34, 1), stroke-dashoffset 0.3s cubic-bezier(0.66, 0, 0.34, 1);
 }

package/es/progress/style/index.less

@@ -1,6 +1,7 @@
 @import '../../style/themes/index';
 @import './mixin.less';
 @progress-prefix-cls: ~'@{kd-prefix}-progress';
+
 .@{progress-prefix-cls} {
   .progress;
   line-height: 1;
@@ -29,9 +30,10 @@
     margin-right: 0;
     padding-right: 0;
     font-size: 0;
+
     .@{progress-prefix-cls}-show-info & {
-      margin-right: -@progress-line-text-width - 8px;
-      padding-right: @progress-line-text-width + 8px;
+      margin-right: calc(-1 * @progress-line-text-font-size * 3 - 8px);
+      padding-right: calc(@progress-line-text-font-size * 3 + 8px);
     }
   }
 
@@ -69,7 +71,7 @@
   &-text {
     display: inline-block;
     box-sizing: border-box;
-    width: @progress-line-text-width;
+    width: calc(@progress-line-text-font-size*3);
     margin-left: @progress-line-text-margin-left;
     // font-size: @progress-line-text-font-size;
     // line-height: 1;
@@ -83,13 +85,14 @@
     font-size: @progress-line-special-text-font-size;
     text-align: center;
     overflow: hidden;
-    padding-right: @progress-line-text-width + 8px;
+    padding-right: calc(@progress-line-text-font-size*3 + 8px);
   }
 
   &-status-success {
     .@{progress-prefix-cls}-bg {
       background-color: @progress-success-color;
     }
+
     .@{progress-prefix-cls}-text,
     .@{progress-prefix-cls}-special-text {
       color: @progress-success-color;
@@ -98,6 +101,10 @@
     .@{progress-prefix-cls}-text {
       font-size: 0;
     }
+    .@{progress-prefix-cls}-icon {
+      font-size: @progress-line-icon-font-size;
+      color: @progress-success-color;
+    }
 
     .@{progress-prefix-cls}-circle-box:not(.@{progress-prefix-cls}-circle-gradient) {
       .@{progress-prefix-cls}-circle-path {
@@ -110,6 +117,7 @@
     .@{progress-prefix-cls}-bg {
       background-color: @progress-failure-color;
     }
+
     .@{progress-prefix-cls}-text,
     .@{progress-prefix-cls}-special-text {
       color: @progress-failure-color;
@@ -118,6 +126,10 @@
     .@{progress-prefix-cls}-text {
       font-size: 0;
     }
+    .@{progress-prefix-cls}-icon {
+      font-size: @progress-line-icon-font-size;
+      color: @progress-failure-color;
+    }
 
     .@{progress-prefix-cls}-circle-box:not(.@{progress-prefix-cls}-circle-gradient) {
       .@{progress-prefix-cls}-circle-path {
@@ -126,19 +138,19 @@
     }
   }
 
-  .@{progress-prefix-cls}-icon {
-    font-size: @progress-line-icon-font-size;
-  }
+
 
   &-circle-box {
     position: relative;
+
     .@{progress-prefix-cls}-circle-trail {
       stroke: @progress-remaining-color;
     }
+
     .@{progress-prefix-cls}-circle-path {
       transition: stroke-dasharray @transition-duration @progress-transition-fn, stroke-dashoffset @transition-duration @progress-transition-fn;
     }
-    
+
     .@{progress-prefix-cls}-text {
       position: absolute;
       width: auto;
@@ -148,14 +160,17 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
+
       &-percent,
       &-unit {
         display: inline-block;
         vertical-align: top;
       }
+
       &-percent {
         line-height: @progress-circle-percent-line-height;
       }
+
       &-unit {
         line-height: @progress-circle-unit-line-height;
         font-size: @progress-circle-unit-font-size;
@@ -167,6 +182,7 @@
       font-size: @progress-circle-icon-font-size;
     }
   }
+
   &-circle-box:not(.@{progress-prefix-cls}-circle-gradient) {
     .@{progress-prefix-cls}-circle-path {
       stroke: @progress-default-color;

package/es/progress/style/mixin.less

@@ -1,5 +1,6 @@
+@import './token.less';
 .progress() {
   display: inline-block;
   font-variant: tabular-nums;
   box-sizing: border-box;
-}
+}

package/es/progress/style/token.less

@@ -0,0 +1,40 @@
+@import '../../style/themes/token.less';
+@progress-prefix: '--@{kd-prefix}-c-progress';
+
+
+
+@progress-transition-fn:  cubic-bezier(0.66, 0, 0.34, 1);
+
+
+
+
+
+// color
+@progress-remaining-color: var(~'@{progress-prefix}-color-remaining', #e5e5e5);//背景色
+@progress-default-color: var(~'@{progress-prefix}-color-default', #5582f3);//进度条 默认色
+@progress-success-color: var(~'@{progress-prefix}-color-success', @color-success);//进度条 成功
+@progress-failure-color: var(~'@{progress-prefix}-color-failure', @color-error);//进度条 失败
+
+// font
+@progress-line-icon-font-size: var(~'@{progress-prefix}-line-icon-font-size', 16px); //线性进度条 icon 大小
+@progress-line-text-font-size: var(~'@{progress-prefix}-line-text-font-size', 16px);//线性进度条 数值文本
+@progress-line-special-text-font-size: var(~'@{progress-prefix}-line-special-text-font-size', 16px);// 圆形进度条 状态文本
+
+// line-height
+@progress-circle-percent-line-height: var(~'@{progress-prefix}-circle-percent-line-height', 48px);
+@progress-circle-unit-line-height: var(~'@{progress-prefix}-circle-unit-line-height', 18px);
+
+//radius
+@progress-border-radius: var(~'@{progress-prefix}-radius-border', 100px);//线性进度条圆角
+
+
+
+// sizing
+@progress-line-stroke-width: var(~'@{progress-prefix}-line-stroke-sizing-width', 8px);
+@progress-circle-stroke-width: var(~'@{progress-prefix}-circle-stroke-sizing-width', 4px);
+
+
+// spacing
+@progress-circle-unit-margin-top: var(~'@{progress-prefix}-circle-unit-spacing-margin-top', 18px);
+@progress-line-text-margin-left: var(~'@{progress-prefix}-line-text-spacing-margin-left', 8px); //进度与文字或者图标的间距
+