@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/es/checkbox/style/index.less

@@ -1,4 +1,6 @@
 @import '../../style/themes/index';
+@import './token.less';
+
 @checkbox-prefix-cls: ~'@{kd-prefix}-checkbox';
 @checkbox-group-prefix-cls: ~'@{kd-prefix}-group';
 
@@ -55,7 +57,7 @@
   border-radius: 2px;
   border: 1px solid @checkbox-border-color;
   padding: @checkbox-square-padding;
-  transition: color @transition-duration, border-color @transition-duration;
+  transition: color @checkbox-transition-duration, border-color @checkbox-transition-duration;
   &:not(&-disabled)::after {
     content: '';
     position: absolute;
@@ -65,7 +67,7 @@
     left: 0;
     border-radius: inherit;
     opacity: 0.2;
-    box-shadow: 0 0 0 0 @theme-color;
+    box-shadow: 0 0 0 0 @checkbox-color-theme;
   }
   &:hover {
     color: @checkbox-checked-font-color;
@@ -87,8 +89,8 @@
     border-bottom-color: @checkbox-checked-border-color;
   }
   &-triangle {
-    animation: kdZoomBounceLeaveEffect calc(@transition-duration - 0.1s) @ease-out forwards;
-    transition: all @transition-duration @ease;
+    animation: kdZoomBounceLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1) forwards;
+    transition: all @checkbox-transition-duration cubic-bezier(0.4,0,0.6,1);
     visibility: hidden;
     opacity: 0;
   }
@@ -106,7 +108,7 @@
   &-inner-icon {
     font-size: inherit;
     line-height: 100%;
-    animation: kdZoomLeaveEffect calc(@transition-duration - 0.1s) @ease-out;
+    animation: kdZoomLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
   }
   &-triangle-disabled {
     border-bottom-color: @checkbox-disabled-bg-color;
@@ -121,14 +123,14 @@
   &-checked {
     border-color: @checkbox-checked-border-color;
     &:not(&-disabled)::after {
-      animation: fadeEffect calc(@transition-duration + 0.1s) @ease-out forwards,
-        waveEffect calc(@transition-duration - 0.1s) @ease-out forwards;
+      animation: fadeEffect calc(@checkbox-transition-duration + 0.1s) cubic-bezier(0,.4,.4,1) forwards,
+        waveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1) forwards;
     }
     .@{checkbox-prefix-cls}-square-triangle-checked:not(.@{checkbox-prefix-cls}-square-disabled) {
-      animation: kdZoomBounceEffect calc(@transition-duration - 0.1s) @ease;
+      animation: kdZoomBounceEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0.4,0,0.6,1);
     }
     .@{checkbox-prefix-cls}-square-inner-icon:not(.@{checkbox-prefix-cls}-square-disabled) {
-      animation: kdZoomEffect calc(@transition-duration - 0.1s) @ease-out;
+      animation: kdZoomEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
     }
   }
   &-checked-disabled {
@@ -148,7 +150,7 @@
 .@{checkbox-prefix-cls}-default {
   border: none;
   padding: @checkbox-default-padding;
-  transition: color @transition-duration, border-color @transition-duration;
+  transition: color @checkbox-transition-duration, border-color @checkbox-transition-duration;
   &:hover,
   &:hover &-wrapper {
     color: @checkbox-checked-font-color;
@@ -170,7 +172,7 @@
     border: @checkbox-default-input-border-width solid @checkbox-border-color;
     border-radius: @checkbox-default-input-border-radius;
     box-sizing: border-box;
-    transition: color @transition-duration, border-color @transition-duration;
+    transition: color @checkbox-transition-duration, border-color @checkbox-transition-duration;
     &:not(&-disabled)::after {
       content: '';
       position: absolute;
@@ -180,7 +182,7 @@
       left: 0;
       border-radius: inherit;
       opacity: 0.2;
-      box-shadow: 0 0 0 0 @theme-color;
+      box-shadow: 0 0 0 0 @checkbox-color-theme;
     }
   }
   &-wrapper-size {
@@ -203,14 +205,14 @@
   &-checked {
     background-color: @checkbox-checked-border-color;
     border-color: @checkbox-checked-border-color;
-    transition: background-color calc(@transition-duration - 0.1s) @ease-out,
-      border-color calc(@transition-duration - 0.1s) @ease-out;
+    transition: background-color calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1),
+      border-color calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
     &:not(&-disabled)::after {
-      animation: fadeEffect calc(@transition-duration + 0.1s) @ease-out forwards,
-        waveEffect calc(@transition-duration - 0.1s) @ease-out forwards;
+      animation: fadeEffect calc(@checkbox-transition-duration + 0.1s) cubic-bezier(0,.4,.4,1) forwards,
+        waveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1) forwards;
     }
     .@{checkbox-prefix-cls}-default-inner:not(&-disabled .@{checkbox-prefix-cls}-default-inner) {
-      animation: kdZoomBounceDefaultEffect calc(@transition-duration - 0.1s) @ease !important;
+      animation: kdZoomBounceDefaultEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0.4,0,0.6,1) !important;
     }
   }
   &-inner {
@@ -228,19 +230,16 @@
     font-size: inherit;
     line-height: 100%;
   }
-  &-indeterminate {
-    background-color: @checkbox-checked-border-color;
-    border-color: @checkbox-checked-border-color;
-  }
   &-indeterminate::before {
-    background-color: @checkbox-bg-color;
     position: absolute;
-    width: 70%;
-    height: 2px;
-    border-radius: 1px;
     top: 50%;
-    transform: translate(-50%, -50%);
     left: 50%;
-    content: ' ';
+    width: 8px;
+    height: 8px;
+    background-color: @checkbox-checked-border-color;
+    border: 0;
+    transform: translate(-50%,-50%) scale(1);
+    opacity: 1;
+    content: " ";
   }
 }

package/es/checkbox/style/token.less

@@ -0,0 +1,48 @@
+@import '../../style/themes/token.less';
+
+@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);
+
+// 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); // 大尺寸复选框
+
+// @checkbox-border-width: 1px; // 边框类型边框大小
+@checkbox-border-width: var(~'@{checkbox-prefix}-border-width',  1px); // 边框类型边框大小
+
+@checkbox-default-input-height: var(~'@{checkbox-prefix}-default-input-sizing-height',  16px); // 勾选输入框高度
+@checkbox-default-input-width: var(~'@{checkbox-prefix}-default-input-sizing-width',  16px); // 勾选输入框宽度
+
+// @checkbox-default-input-border-width: 1px; // 勾选输入框边框大小
+@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); // 边框类型右下角三角宽度
+
+// 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); // 边框类型内边距
+
+// 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);

package/es/city-picker/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-city-picker-container {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -153,9 +162,9 @@
           transform: rotate(180deg);
 }
 .kd-city-picker-panel-container {
-  width: 460px;
-  height: 373px;
-  font-size: 12px;
+  width: var(--kd-c-city-picker-panel-sizing-width, 460px);
+  height: var(--kd-c-city-picker-panel-sizing-height, 373px);
+  font-size: var(--kd-c-city-picker-panel-font-size, 12px);
   line-height: 18px;
   letter-spacing: 0;
 }
@@ -174,7 +183,7 @@
   padding: 3px 0;
 }
 .kd-city-picker-panel-container .kd-city-picker-header .kd-city-picker-tab-item.active {
-  color: #5582f3;
+  color: var(--kd-c-city-picker-color, var(--kd-g-color-theme, #5582f3));
   z-index: 1;
 }
 .kd-city-picker-panel-container .kd-city-picker-header .kd-city-picker-tab-item.active::before {
@@ -192,7 +201,7 @@
   right: 0;
   bottom: 0;
   z-index: -2;
-  background: #fafafa;
+  background: var(--kd-c-city-picker-color-background, var(--kd-g-color-background-contain, #fafafa));
   border-radius: 2px 4px 0 0;
   -webkit-transform: scaleY(1.25) perspective(18px) rotateX(10deg);
           transform: scaleY(1.25) perspective(18px) rotateX(10deg);
@@ -213,7 +222,7 @@
   right: 0;
   bottom: 0;
   z-index: -2;
-  background: #fafafa;
+  background: var(--kd-c-city-picker-color-background, var(--kd-g-color-background-contain, #fafafa));
   border-radius: 4px 4px 0 0;
   -webkit-transform: scaleY(1.25) perspective(18px) rotateX(10deg);
           transform: scaleY(1.25) perspective(18px) rotateX(10deg);
@@ -230,7 +239,7 @@
   cursor: pointer;
 }
 .kd-city-picker-panel-item:hover {
-  background: #F5F5F5;
+  background: var(--kd-c-city-picker-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
   border-radius: 2px;
 }
 .kd-city-picker-content-container {
@@ -239,6 +248,7 @@
   background: #fff;
   -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 0 var(--kd-c-city-picker-panel-radius-border, var(--kd-g-radius-border, 2px)) var(--kd-c-city-picker-panel-radius-border, var(--kd-g-radius-border, 2px)) var(--kd-c-city-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
 }
 .kd-city-picker-group-container {
   display: -webkit-box;
@@ -265,11 +275,11 @@
   text-align: center;
 }
 .kd-city-picker-group-item:hover {
-  color: #5582f3;
+  color: var(--kd-c-city-picker-color, var(--kd-g-color-theme, #5582f3));
 }
 .kd-city-picker-group-item.active {
-  color: #5582f3;
-  border-bottom: 2px solid #5582f3;
+  color: var(--kd-c-city-picker-color, var(--kd-g-color-theme, #5582f3));
+  border-bottom: 2px solid var(--kd-c-city-picker-color, var(--kd-g-color-theme, #5582f3));
 }
 .kd-city-picker-group-item.last {
   -ms-flex-negative: 1;
@@ -320,7 +330,7 @@
 .kd-city-picker-city-table .kd-city-picker-city-table-cell {
   margin: 4px 6px;
   padding: 3px 6px;
-  color: #212121;
+  color: var(--kd-c-city-picker-panel-item-color, var(--kd-g-color-text-primary, #212121));
   cursor: pointer;
   width: 60px;
   overflow: hidden;
@@ -328,7 +338,7 @@
   text-overflow: ellipsis;
 }
 .kd-city-picker-city-table .kd-city-picker-city-table-cell:hover {
-  background: #F5F5F5;
+  background: var(--kd-c-city-picker-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
   border-radius: 2px;
 }
 .kd-city-picker-search-panel {
@@ -366,7 +376,7 @@
   cursor: pointer;
 }
 .kd-city-picker-search-panel .kd-city-picker-search-panel-item:hover {
-  background: #F5F5F5;
+  background: var(--kd-c-city-picker-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
 }
 .kd-city-picker-search-panel .kd-city-picker-search-panel-item .kd-city-picker-search-panel-item-left {
   overflow: hidden;
@@ -393,7 +403,7 @@
   color: #999999;
 }
 .kd-city-picker-search-keyword {
-  color: #5582f3;
+  color: var(--kd-c-city-picker-color, var(--kd-g-color-theme, #5582f3));
 }
 .kd-city-picker-no-data {
   width: 100%;

package/es/city-picker/style/index.less

@@ -1,9 +1,8 @@
-
 @import '../../style/themes/index';
 @import './mixin.less';
+@import './token.less';
 
 @city-picker-prefix-cls: ~'@{kd-prefix}-city-picker';
-@hover-bg: #F5F5F5;
 
 .@{city-picker-prefix-cls}-container {
   display: flex;
@@ -55,9 +54,9 @@
 }
 
 .@{city-picker-prefix-cls}-panel-container {
-  width: 460px;
-  height: 373px;
-  font-size: 12px;
+  width: @city-picker-panel-sizing-width;
+  height: @city-picker-panel-sizing-height;
+  font-size: @city-picker-panel-font-size;
   line-height: 18px;
   letter-spacing: 0;
 
@@ -72,7 +71,7 @@
       padding: 3px 0;
 
       &.active {
-        color: @theme-color;
+        color: @city-picker-theme-color;
         z-index: 1;
 
         &::before {
@@ -92,7 +91,7 @@
         right: 0;
         bottom: 0;
         z-index: -2;
-        background: @contain-bg;
+        background: @city-picker-background-color;
         border-radius: 2px 4px 0 0;
         transform: scaleY(1.25) perspective(18px) rotateX(10deg);
         transform-origin: bottom left;
@@ -111,7 +110,7 @@
         right: 0;
         bottom: 0;
         z-index: -2;
-        background: @contain-bg;
+        background: @city-picker-background-color;
         border-radius: 4px 4px 0 0;
         transform: scaleY(1.25) perspective(18px) rotateX(10deg);
         transform-origin: bottom;
@@ -129,7 +128,7 @@
   cursor: pointer;
 
   &:hover {
-    background: @hover-bg;
+    background: @city-picker-background-hover-color;
     border-radius: 2px;
   }
 }
@@ -139,6 +138,7 @@
   padding: 0 20px 12px 20px;
   background: #fff;
   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 0 @city-picker-panel-radius-border @city-picker-panel-radius-border @city-picker-panel-radius-border;
 }
 
 .@{city-picker-prefix-cls}-group-container {
@@ -158,12 +158,12 @@
   text-align: center;
 
   &:hover {
-    color: @theme-color;
+    color: @city-picker-theme-color;
   }
 
   &.active {
-    color: @theme-color;
-    border-bottom: 2px solid @theme-color;
+    color: @city-picker-theme-color;
+    border-bottom: 2px solid @city-picker-theme-color;
   }
 
   &.last {
@@ -202,7 +202,7 @@
   .@{city-picker-prefix-cls}-city-table-cell {
     margin: 4px 6px;
     padding: 3px 6px;
-    color: #212121;
+    color: @city-picker-panel-item-color;
     cursor: pointer;
     width: 60px;
     overflow: hidden;
@@ -211,7 +211,7 @@
     text-overflow: ellipsis;
 
     &:hover {
-      background: @hover-bg;
+      background: @city-picker-background-hover-color;
       border-radius: 2px;
     }
   }
@@ -240,7 +240,7 @@
     cursor: pointer;
 
     &:hover {
-      background: @hover-bg;
+      background: @city-picker-background-hover-color;
     }
 
     .@{city-picker-prefix-cls}-search-panel-item-left {
@@ -268,7 +268,7 @@
 }
 
 .@{city-picker-prefix-cls}-search-keyword {
-  color: @theme-color;
+  color: @city-picker-theme-color;
 }
 
 .@{city-picker-prefix-cls}-no-data {

package/es/city-picker/style/token.less

@@ -0,0 +1,25 @@
+@import "../../style/themes/token.less";
+
+@city-picker-prefix: '--@{kd-prefix}-c-city-picker';
+
+
+
+// color
+@city-picker-theme-color: var(~'@{city-picker-prefix}-color', @color-theme);
+@city-picker-panel-item-color: var(~'@{city-picker-prefix}-panel-item-color', @color-text-primary);
+@city-picker-background-color: var(~'@{city-picker-prefix}-color-background', @color-background-contain);
+@city-picker-background-hover-color: var(~'@{city-picker-prefix}-color-background-hover', @color-hover);
+
+// sizing
+@city-picker-panel-sizing-width: var(~'@{city-picker-prefix}-panel-sizing-width', 460px);
+@city-picker-panel-sizing-height: var(~'@{city-picker-prefix}-panel-sizing-height', 373px);
+// spacing
+// motion
+
+// font
+@city-picker-panel-font-size: var(~'@{city-picker-prefix}-panel-font-size', 12px);
+
+// radius
+@city-picker-panel-radius-border: var(~'@{city-picker-prefix}-panel-radius-border', @radius-border);
+// line-height
+// z-index

package/es/collapse/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-collapse {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -115,16 +124,17 @@
           flex-direction: column;
 }
 .kd-collapse-panel-border {
-  border: 1px solid #d9d9d9;
+  border: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
 }
 .kd-collapse-panel-top {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  padding: 12px;
+  padding: var(--kd-c-collapse-header-spacing-padding, 12px);
+  background: var(--kd-c-collapse-header-color-background, rgba(0, 0, 0, 0));
 }
 .kd-collapse-panel-top-border {
-  border-bottom: 1px solid #d9d9d9;
+  border-bottom: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
 }
 .kd-collapse-panel-left {
   display: -webkit-inline-box;
@@ -153,8 +163,8 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  color: #212121;
-  font-size: 14px;
+  color: var(--kd-c-collapse-header-color-text-primary, var(--kd-g-color-text-primary, #212121));
+  font-size: var(--kd-c-collapse-header-font-size, var(--kd-g-font-size-middle, 14px));
 }
 .kd-collapse-panel-icon {
   -webkit-box-align: center;
@@ -163,7 +173,7 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  margin-right: 6px;
+  margin-right: var(--kd-c-collapse-spacing-margin-right, 6px);
 }
 .kd-collapse-panel-icon:hover,
 .kd-collapse-panel-left:hover {
@@ -172,43 +182,44 @@
 .kd-collapse-panel-animation-expand {
   -webkit-transform: rotate(0deg);
           transform: rotate(0deg);
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
-  transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
+  -webkit-transition: -webkit-transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: -webkit-transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), -webkit-transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-collapse-panel-animation-collapse {
   -webkit-transform: rotate(90deg);
           transform: rotate(90deg);
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
-  transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
+  -webkit-transition: -webkit-transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: -webkit-transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), -webkit-transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-collapse-panel-children {
   overflow: hidden;
   opacity: 0;
-  padding: 0 16px;
-  color: #212121;
-  font-size: 14px;
-  -webkit-transition: height 0.3s, opacity 0.3s;
-  transition: height 0.3s, opacity 0.3s;
+  padding: var(--kd-c-collapse-content-spacing-padding, 0 16px);
+  color: var(--kd-c-collapse-content-color-text-primary, var(--kd-g-color-text-primary, #212121));
+  font-size: var(--kd-c-collapse-content-font-size, var(--kd-g-font-size-middle, 14px));
+  -webkit-transition: height var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), opacity var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: height var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), opacity var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
+  background: var(--kd-c-collapse-content-color-background, rgba(0, 0, 0, 0));
 }
 .kd-collapse-panel-children-hide {
   overflow: hidden;
   opacity: 0;
   height: 0;
-  padding: 0 16px;
-  color: #212121;
-  font-size: 14px;
-  -webkit-transition: height 0.3s, opacity calc(0.3s / 2);
-  transition: height 0.3s, opacity calc(0.3s / 2);
+  padding: var(--kd-c-collapse-content-spacing-padding, 0 16px);
+  color: var(--kd-c-collapse-content-color-text-primary, var(--kd-g-color-text-primary, #212121));
+  font-size: var(--kd-c-collapse-content-font-size, var(--kd-g-font-size-middle, 14px));
+  -webkit-transition: height var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), opacity calc(var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)) / 2);
+  transition: height var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), opacity calc(var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)) / 2);
 }
 .kd-collapse-panel-children-bordered {
-  padding: 12px;
+  padding: var(--kd-c-collapse-content-bordered-spacing-padding, 12px);
   overflow: hidden;
 }
 .kd-collapse-panel-disabled {
   cursor: not-allowed !important;
-  color: #b2b2b2;
+  color: var(--kd-c-collapse-color-disabled, raba(178, 178, 178, 1));
 }

package/es/collapse/style/index.less

@@ -19,6 +19,7 @@
     &-top {
       display: inline-flex;
       padding: @collapse-header-padding;
+      background: @collapse-header-color-background;
     }
     &-top-border {
       border-bottom: @collapse-border-width solid @collapse-border-color;
@@ -50,11 +51,11 @@
     }
     &-animation-expand {
       transform: rotate(0deg);
-      transition: transform @transition-duration;
+      transition: transform @collapse-transition-duration;
     }
     &-animation-collapse {
       transform: rotate(90deg);
-      transition: transform @transition-duration;
+      transition: transform @collapse-transition-duration;
     }
     &-children {
       overflow: hidden;
@@ -62,7 +63,8 @@
       padding: @collapse-content-padding;
       color: @collapse-content-font-color;
       font-size: @collapse-content-font-size;
-      transition: height @transition-duration, opacity @transition-duration;
+      transition: height @collapse-transition-duration, opacity @collapse-transition-duration;
+      background: @collapse-content-color-background;
     }
     &-children-hide {
       overflow: hidden;
@@ -71,7 +73,7 @@
       padding: @collapse-content-padding;
       color: @collapse-content-font-color;
       font-size: @collapse-content-font-size;
-      transition: height @transition-duration, opacity calc(@transition-duration / 2);
+      transition: height @collapse-transition-duration, opacity calc(@collapse-transition-duration / 2);
     }
     &-children-bordered {
       padding: @collapse-content-bordered-padding;
@@ -79,7 +81,7 @@
     }
     &-disabled {
       cursor: not-allowed !important;
-      color: @disabled-color;
+      color: @collapse-disabled-color;
     }
   }
 }

package/es/collapse/style/mixin.less

@@ -1,5 +1 @@
-
-// code component mixin here
-.test() {
-  display: inline;
-}
+@import './token.less';

package/es/collapse/style/token.less

@@ -0,0 +1,26 @@
+@import '../../style//themes/token.less';
+
+@collapse-prefix: '--@{kd-prefix}-c-collapse';
+
+// sizing
+@collapse-border-width: var(~'@{collapse-prefix}-border-width', 1px);
+@collapse-icon-margin-right: var(~'@{collapse-prefix}-spacing-margin-right', 6px);
+@collapse-header-padding: var(~'@{collapse-prefix}-header-spacing-padding', 12px);
+@collapse-content-bordered-padding: var(~'@{collapse-prefix}-content-bordered-spacing-padding', 12px);
+@collapse-content-padding: var(~'@{collapse-prefix}-content-spacing-padding', 0 16px);
+
+// color
+@collapse-border-color: var(~'@{collapse-prefix}-color-border-strong-2', @color-border-strong-2);
+@collapse-header-font-color: var(~'@{collapse-prefix}-header-color-text-primary', @color-text-primary);
+@collapse-content-font-color: var(~'@{collapse-prefix}-content-color-text-primary', @color-text-primary);
+@collapse-disabled-color: var(~'@{collapse-prefix}-color-disabled', raba(178, 178, 178, 1));
+@collapse-header-color-background: var(~'@{collapse-prefix}-header-color-background', rgba(0, 0, 0, 0));
+@collapse-content-color-background: var(~'@{collapse-prefix}-content-color-background', rgba(0, 0, 0, 0));
+
+
+// font
+@collapse-header-font-size: var(~'@{collapse-prefix}-header-font-size', @font-size-middle);
+@collapse-content-font-size: var(~'@{collapse-prefix}-content-font-size', @font-size-middle);
+
+// motion
+@collapse-transition-duration: var(~'@{collapse-prefix}-motion-duration', @duration-promptly);

package/es/config-provider/compDefaultProps.d.ts

@@ -96,7 +96,6 @@ declare const compDefaultProps: {
         destroyOnClose: boolean;
         forceRender: boolean;
         getContainer: HTMLElement;
-        height: number;
         keyboard: boolean;
         mask: boolean;
         maskClosable: boolean;
@@ -392,5 +391,9 @@ declare const compDefaultProps: {
         shape: string;
         gap: number;
     };
+    Link: {
+        size: string;
+        underscore: boolean;
+    };
 };
 export default compDefaultProps;