@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/collapse/style/mixin.less

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

package/lib/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/lib/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;

package/lib/config-provider/compDefaultProps.js

@@ -120,12 +120,11 @@ var compDefaultProps = {
     destroyOnClose: false,
     forceRender: false,
     getContainer: document.body,
-    height: 220,
     keyboard: true,
     mask: true,
     maskClosable: true,
     placement: 'right',
-    width: 365,
+    width: 320,
     zIndex: 1050
   },
   Empty: {},
@@ -424,6 +423,10 @@ var compDefaultProps = {
     size: 'middle',
     shape: 'circle',
     gap: 4
+  },
+  Link: {
+    size: 'middle',
+    underscore: false
   }
 };
 var _default = compDefaultProps;