@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/es/anchor/style/token.less

@@ -0,0 +1,33 @@
+@import '../../style/themes/token.less';
+
+@anchor-prefix: '--@{kd-prefix}-c-anchor';
+
+// color
+@anchor-bg: var(~'@{anchor-prefix}-color-background', @color-background);
+@anchor-border-color: var(~'@{anchor-prefix}-color-border', @color-border-strong);
+@anchor-advanced-arrows-color: var(~'@{anchor-prefix}-advanced-arrows-color-text', #666);
+@anchor-color-theme: var(~'@{anchor-prefix}-color-theme', @color-theme);
+@anchor-disabled-border-color: var(~'@{anchor-prefix}-color-border-disabled', @color-border-disabled);
+@anchor-primary-text-color: var(~'@{anchor-prefix}-color-text-primary', @color-text-primary);
+@anchor-secondary-text-color: var(~'@{anchor-prefix}-color-text-secondary', @color-text-secondary);
+
+// sizing
+@anchor-width: var(~'@{anchor-prefix}-sizing-width', 120px);
+@anchor-advanced-width: var(~'@{anchor-prefix}-advanced-sizing-width', 160px);
+
+// spacing
+@anchor-link-top: var(~'@{anchor-prefix}-spacing-vertical', 7px);
+@anchor-link-left: var(~'@{anchor-prefix}-spacing-horizontal', 7px);
+@anchor-link-padding: var(~'@{anchor-prefix}-spacing-padding', 7px 8px);
+@anchor-advanced-padding-top: var(~'@{anchor-prefix}-advanced-spacing-padding-top', 8px);
+@anchor-advanced-padding-bottom: var(~'@{anchor-prefix}-advanced-spacing-padding-bottom', 7px);
+@anchor-ink-line-width: var(~'@{anchor-prefix}-ink-line-spacing-width', 1px);
+
+
+// font
+@anchor-advanced-lock-size: var(~'@{anchor-prefix}-advanced-lock-font-size', 16px);
+@anchor-font-size: var(~'@{anchor-prefix}-font-size', @font-size-small);
+@anchor-icon-font-size: var(~'@{anchor-prefix}-icon-font-size', 16px);
+
+// motion
+@anchor-transition-duration: var(~'@{anchor-prefix}-duration-duration', @duration-promptly);

package/es/avatar/style/index.css

@@ -99,10 +99,10 @@
   white-space: nowrap;
   text-align: center;
   vertical-align: middle;
-  background: #ccc;
-  width: 40px;
-  height: 40px;
-  line-height: 40px;
+  background: var(--kd-c-avatar-color-background, #B2B2B2);
+  width: var(--kd-c-avatar-size-base, 40px);
+  height: var(--kd-c-avatar-size-base, 40px);
+  line-height: var(--kd-c-avatar-size-base, 40px);
   border-radius: 50%;
 }
 .kd-avatar-image {
@@ -121,15 +121,15 @@
           transform-origin: 0 center;
 }
 .kd-avatar.kd-avatar-icon {
-  font-size: 22px;
+  font-size: var(--kd-c-avatar-font-size-base, 22px);
 }
 .kd-avatar.kd-avatar-icon > .kdicon {
   vertical-align: unset !important;
 }
 .kd-avatar-lg {
-  width: 60px;
-  height: 60px;
-  line-height: 60px;
+  width: var(--kd-c-avatar-size-large, 60px);
+  height: var(--kd-c-avatar-size-large, 60px);
+  line-height: var(--kd-c-avatar-size-large, 60px);
   border-radius: 50%;
 }
 .kd-avatar-lg-string {
@@ -139,15 +139,15 @@
           transform-origin: 0 center;
 }
 .kd-avatar-lg.kd-avatar-icon {
-  font-size: 36px;
+  font-size: var(--kd-c-avatar-font-size-large, 36px);
 }
 .kd-avatar-lg.kd-avatar-icon > .kdicon {
   vertical-align: unset !important;
 }
 .kd-avatar-sm {
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
+  width: var(--kd-c-avatar-size-small, 32px);
+  height: var(--kd-c-avatar-size-small, 32px);
+  line-height: var(--kd-c-avatar-size-small, 32px);
   border-radius: 50%;
 }
 .kd-avatar-sm-string {
@@ -157,15 +157,15 @@
           transform-origin: 0 center;
 }
 .kd-avatar-sm.kd-avatar-icon {
-  font-size: 18px;
+  font-size: var(--kd-c-avatar-font-size-small, 18px);
 }
 .kd-avatar-sm.kd-avatar-icon > .kdicon {
   vertical-align: unset !important;
 }
 .kd-avatar-xs {
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
+  width: var(--kd-c-avatar-size-x-small, 24px);
+  height: var(--kd-c-avatar-size-x-small, 24px);
+  line-height: var(--kd-c-avatar-size-x-small, 24px);
   border-radius: 50%;
 }
 .kd-avatar-xs-string {
@@ -175,13 +175,13 @@
           transform-origin: 0 center;
 }
 .kd-avatar-xs.kd-avatar-icon {
-  font-size: 14px;
+  font-size: var(--kd-c-avatar-font-size-x-small, 14px);
 }
 .kd-avatar-xs.kd-avatar-icon > .kdicon {
   vertical-align: unset !important;
 }
 .kd-avatar-square {
-  border-radius: 2px;
+  border-radius: var(--kd-c-avatar-border-radius, 2px);
 }
 .kd-avatar > img {
   display: block;

package/es/avatar/style/index.less

@@ -10,7 +10,7 @@
   white-space: nowrap;
   text-align: center;
   vertical-align: middle;
-  background: @avatar-bg;
+  background: @avatar-color-background;
 
   &-image {
     background: transparent;
@@ -27,15 +27,15 @@
   .avatar-size(@avatar-size-base, @avatar-font-size-base);
 
   &-lg {
-    .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
+    .avatar-size(@avatar-size-large, @avatar-font-size-large);
   }
 
   &-sm {
-    .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
+    .avatar-size(@avatar-size-small, @avatar-font-size-small);
   }
 
   &-xs {
-    .avatar-size(@avatar-size-xs, @avatar-font-size-xs);
+    .avatar-size(@avatar-size-x-small, @avatar-font-size-x-small);
   }
 
   &-square {
@@ -49,24 +49,3 @@
     object-fit: cover;
   }
 }
-
-.avatar-size(@size, @font-size) {
-  width: @size;
-  height: @size;
-  line-height: @size;
-  border-radius: 50%;
-
-  &-string {
-    position: absolute;
-    left: 50%;
-    transform-origin: 0 center;
-  }
-
-  &.@{avatar-prefix-cls}-icon {
-    font-size: @font-size;
-
-    & > .@{icon-prefix-cls} {
-      vertical-align: unset !important;
-    }
-  }
-}

package/es/avatar/style/mixin.less

@@ -1,5 +1,22 @@
+@import './token.less';
 
-// code component mixin here
-.test() {
-  display: inline;
-}
+.avatar-size(@size, @font-size) {
+  width: @size;
+  height: @size;
+  line-height: @size;
+  border-radius: 50%;
+
+  &-string {
+    position: absolute;
+    left: 50%;
+    transform-origin: 0 center;
+  }
+
+  &.@{avatar-prefix-cls}-icon {
+    font-size: @font-size;
+
+    & > .@{icon-prefix-cls} {
+      vertical-align: unset !important;
+    }
+  }
+}

package/es/avatar/style/token.less

@@ -0,0 +1,20 @@
+@avatar-custom-prefix: '--@{kd-prefix}-c-avatar';
+
+
+// sizing
+@avatar-size-x-small: var(~'@{avatar-custom-prefix}-size-x-small', 24px);
+@avatar-size-small: var(~'@{avatar-custom-prefix}-size-small', 32px);
+@avatar-size-base: var(~'@{avatar-custom-prefix}-size-base', 40px);
+@avatar-size-large: var(~'@{avatar-custom-prefix}-size-large', 60px);
+
+// font
+@avatar-font-size-x-small: var(~'@{avatar-custom-prefix}-font-size-x-small', 14px);
+@avatar-font-size-small: var(~'@{avatar-custom-prefix}-font-size-small', 18px);
+@avatar-font-size-base: var(~'@{avatar-custom-prefix}-font-size-base', 22px);
+@avatar-font-size-large: var(~'@{avatar-custom-prefix}-font-size-large', 36px);
+
+// radius
+@avatar-border-radius: var(~'@{avatar-custom-prefix}-border-radius', 2px);
+
+// color
+@avatar-color-background: var(~'@{avatar-custom-prefix}-color-background', #B2B2B2);

package/es/badge/style/index.css

@@ -92,39 +92,48 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-badge {
   position: relative;
   display: inline-block;
   line-height: 1;
-  font-size: 14px;
+  font-size: var(--kd-c-badge-font-size-base, var(--kd-g-font-size-middle, 14px));
 }
 .kd-badge-count {
   z-index: auto;
-  min-width: 20px;
-  height: 20px;
-  color: #fff;
-  font-weight: normal;
-  font-size: 12px;
-  line-height: 20px;
+  min-width: var(--kd-c-badge-sizing-base, 16px);
+  height: var(--kd-c-badge-sizing-base, 16px);
+  color: var(--kd-c-badge-color, var(--kd-g-color-background, #fff));
+  font-weight: var(--kd-c-badge-font-weight, 400);
+  font-size: var(--kd-g-font-size-small, 12px);
+  line-height: var(--kd-c-badge-sizing-base, 16px);
   white-space: nowrap;
   text-align: center;
-  background: #ff4d4f;
-  border-radius: 10px;
+  background: var(--kd-c-badge-color-background, #fb2323);
+  border-radius: calc(var(--kd-c-badge-sizing-base, 16px) / 2);
 }
 .kd-badge-count-sm {
-  min-width: 14px;
-  height: 14px;
+  min-width: var(--kd-c-badge-sizing-small, 14px);
+  height: var(--kd-c-badge-sizing-small, 14px);
   padding: 0;
-  font-size: 12px;
-  line-height: 14px;
-  border-radius: 7px;
+  font-size: var(--kd-c-badge-font-size-small, var(--kd-g-font-size-small, 12px));
+  line-height: var(--kd-c-badge-sizing-small, 14px);
+  border-radius: calc(var(--kd-c-badge-sizing-small, 14px) / 2);
 }
 .kd-badge-dot {
   z-index: auto;
-  width: 6px;
-  min-width: 6px;
-  height: 6px;
-  background: #ff4d4f;
+  width: var(--kd-c-badge-sizing-dot, 8px);
+  min-width: var(--kd-c-badge-sizing-dot, 8px);
+  height: var(--kd-c-badge-sizing-dot, 8px);
+  background: var(--kd-c-badge-color-background, #fb2323);
   border-radius: 100%;
 }
 .kd-badge-dot,
@@ -139,7 +148,7 @@
           transform-origin: 100% 0%;
 }
 .kd-badge-multiple-words {
-  padding: 0 6px;
+  padding: 0 4px;
 }
 .kd-badge-status {
   line-height: inherit;
@@ -147,24 +156,24 @@
 }
 .kd-badge-status-text {
   margin-left: 8px;
-  color: #212121;
-  font-size: 14px;
+  color: var(--kd-c-badge-color, var(--kd-g-color-text-primary, #212121));
+  font-size: var(--kd-c-badge-font-size-base, var(--kd-g-font-size-middle, 14px));
 }
 .kd-badge-status-dot {
   position: relative;
   top: -1px;
   display: inline-block;
-  width: 6px;
-  height: 6px;
+  width: var(--kd-c-badge-sizing-status, 8px);
+  height: var(--kd-c-badge-sizing-status, 8px);
   vertical-align: middle;
   border-radius: 50%;
 }
 .kd-badge-status-success {
-  background-color: #1ba854;
+  background-color: var(--kd-c-badge-color-success, var(--kd-g-color-success, #1ba854));
 }
 .kd-badge-status-processing {
   position: relative;
-  background-color: #276ff5;
+  background-color: var(--kd-c-badge-color-ongoing, var(--kd-g-color-ongoing, #276ff5));
 }
 .kd-badge-status-processing::after {
   position: absolute;
@@ -172,20 +181,20 @@
   left: -1px;
   width: 100%;
   height: 100%;
-  border: 1px solid #276ff5;
+  border: 1px solid var(--kd-c-badge-color-ongoing, var(--kd-g-color-ongoing, #276ff5));
   border-radius: 50%;
   -webkit-animation: antStatusProcessing 1.2s infinite ease-in-out;
           animation: antStatusProcessing 1.2s infinite ease-in-out;
   content: '';
 }
 .kd-badge-status-error {
-  background-color: #ff991c;
+  background-color: var(--kd-c-badge-color-warning, var(--kd-g-color-warning, #ff991c));
 }
 .kd-badge-status-default {
-  background-color: #1ba854;
+  background-color: var(--kd-c-badge-color-success, var(--kd-g-color-success, #1ba854));
 }
 .kd-badge-status-warning {
-  background-color: #fb2323;
+  background-color: var(--kd-c-badge-color-error, var(--kd-g-color-error, #fb2323));
 }
 .kd-badge-not-a-wrapper:not(.kd-badge-status) {
   vertical-align: middle;

package/es/badge/style/index.less

@@ -5,40 +5,38 @@
   position: relative;
   display: inline-block;
   line-height: 1;
-  font-size: @font-size;
+  font-size: @badge-font-size-base;
 
   &-count {
     z-index: auto;
-    min-width: @badge-height;
-    height: @badge-height;
-    color: @badge-text-color;
+    min-width: @badge-size-base;
+    height: @badge-size-base;
+    color: @badge-color-text;
     font-weight: @badge-font-weight;
-    font-size: @badge-font-size;
-    line-height: @badge-height;
+    font-size: @font-size-small;
+    line-height: @badge-size-base;
     white-space: nowrap;
     text-align: center;
-    background: @badge-color;
-    border-radius: (@badge-height / 2);
-    // box-shadow: 0 0 0 1px @bg;
+    background: @badge-color-background;
+    border-radius: calc(@badge-size-base / 2);
   }
 
   &-count-sm {
-    min-width: @badge-height-sm;
-    height: @badge-height-sm;
+    min-width: @badge-size-small;
+    height: @badge-size-small;
     padding: 0;
-    font-size: @badge-font-size-sm;
-    line-height: @badge-height-sm;
-    border-radius: (@badge-height-sm / 2);
+    font-size: @badge-font-size-small;
+    line-height: @badge-size-small;
+    border-radius: calc(@badge-size-small / 2);
   }
 
   &-dot {
     z-index: auto;
-    width: @badge-dot-size;
-    min-width: @badge-dot-size;
-    height: @badge-dot-size;
-    background: @badge-color;
+    width: @badge-size-dot;
+    min-width: @badge-size-dot;
+    height: @badge-size-dot;
+    background: @badge-color-background;
     border-radius: 100%;
-    // box-shadow: 0 0 0 1px @shadow-color-inverse;
   }
 
   &-dot,
@@ -52,7 +50,7 @@
   }
 
   &-multiple-words {
-    padding: 0 6px;
+    padding: 0 4px;
   }
 
   &-status {
@@ -60,44 +58,44 @@
     vertical-align: baseline;
     &-text {
       margin-left: 8px;
-      color: @primary-text-color;
-      font-size: @font-size;
+      color: @badge-color-text-primary;
+      font-size: @badge-font-size-base;
     }
     &-dot {
       position: relative;
       top: -1px;
       display: inline-block;
-      width: @badge-status-size;
-      height: @badge-status-size;
+      width: @badge-size-status;
+      height: @badge-size-status;
       vertical-align: middle;
       border-radius: 50%;
     }
     &-success {
-      background-color: @success-color;
+      background-color: @badge-color-success;
     }
     &-processing {
       position: relative;
-      background-color: @ongoing-color;
+      background-color: @badge-color-ongoing;
       &::after {
         position: absolute;
         top: -1px;
         left: -1px;
         width: 100%;
         height: 100%;
-        border: 1px solid @ongoing-color;
+        border: 1px solid @badge-color-ongoing;
         border-radius: 50%;
         animation: antStatusProcessing 1.2s infinite ease-in-out;
         content: '';
       }
     }
     &-error {
-      background-color: @warning-color;
+      background-color: @badge-color-warning;
     }
     &-default {
-      background-color: @success-color;
+      background-color: @badge-color-success;
     }
     &-warning {
-      background-color: @error-color;
+      background-color: @badge-color-error;
     }
   }
 

package/es/badge/style/mixin.less

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

package/es/badge/style/token.less

@@ -0,0 +1,23 @@
+@import '../../style/themes//token.less';
+
+@badge-prefix: '--@{kd-prefix}-c-badge';
+
+// sizing
+@badge-size-base: var(~'@{badge-prefix}-sizing-base', 16px);
+@badge-size-small: var(~'@{badge-prefix}-sizing-small', 14px);
+@badge-size-dot: var(~'@{badge-prefix}-sizing-dot', 8px);
+@badge-size-status: var(~'@{badge-prefix}-sizing-status', 8px);
+
+// font
+@badge-font-weight: var(~'@{badge-prefix}-font-weight', 400);
+@badge-font-size-base: var(~'@{badge-prefix}-font-size-base', @font-size-middle);
+@badge-font-size-small: var(~'@{badge-prefix}-font-size-small', @font-size-small);
+
+// color
+@badge-color-background: var(~'@{badge-prefix}-color-background', #fb2323);
+@badge-color-text: var(~'@{badge-prefix}-color', @color-background);
+@badge-color-text-primary: var(~'@{badge-prefix}-color', @color-text-primary);
+@badge-color-success: var(~'@{badge-prefix}-color-success', @color-success);
+@badge-color-ongoing: var(~'@{badge-prefix}-color-ongoing', @color-ongoing);
+@badge-color-warning: var(~'@{badge-prefix}-color-warning', @color-warning);
+@badge-color-error: var(~'@{badge-prefix}-color-error', @color-error);

package/es/base-data/style/index.css

@@ -92,25 +92,34 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-baseData {
-  width: 230px;
+  width: var(--kd-c-base-data-sizing-width, 230px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  border-bottom: 1px solid #999;
+  border-bottom: 1px solid var(--kd-c-base-data-color-border, #999);
 }
 .kd-baseData-disabled {
   cursor: not-allowed;
 }
 .kd-baseData:not(.kd-baseData-disabled):hover {
-  border-color: #5582f3;
+  border-color: var(--kd-c-base-data-border-color-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-baseData:not(.kd-baseData-disabled):hover .kd-baseData-detail,
 .kd-baseData:not(.kd-baseData-disabled):hover .kd-baseData-suffix {
-  color: #5582f3;
+  color: var(--kd-c-base-data-icon-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-baseData:not(.kd-baseData-disabled):hover .kd-baseData-detail {
   visibility: visible;
@@ -130,13 +139,13 @@
 }
 .kd-baseData-dropdown {
   margin: 0;
-  z-index: 1050;
+  z-index: var(--kd-c-base-data-dropdown-z-index, var(--kd-g-z-index-popper, 1050));
   -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
-  border-radius: 2px;
-  background: #fff;
+  border-radius: var(--kd-c-base-data-dropdown-radius-border, var(--kd-g-radius-border, 2px));
+  background: var(--kd-c-base-data-dropdown-radius-border, var(--kd-g-color-background, #fff));
   overflow: auto;
-  max-height: 400px;
+  max-height: var(--kd-c-base-data-dropdown-sizing-height, 400px);
 }
 .kd-baseData-dropdown-columns,
 .kd-baseData-dropdown-options {
@@ -172,11 +181,11 @@
 }
 .kd-baseData-dropdown-columns-item-collect-icon,
 .kd-baseData-dropdown-options-item-collect-icon {
-  color: #ff991c;
+  color: var(--kd-c-base-data-dropdown-icon-color-text, var(--kd-g-color-warning, #ff991c));
 }
 .kd-baseData-dropdown-columns-item-collect-icon:hover,
 .kd-baseData-dropdown-options-item-collect-icon:hover {
-  color: #ff991c;
+  color: var(--kd-c-base-data-dropdown-icon-color-text-hover, var(--kd-g-color-warning, #ff991c));
 }
 .kd-baseData-dropdown-columns-item-collect-not-icon,
 .kd-baseData-dropdown-options-item-collect-not-icon {
@@ -184,7 +193,7 @@
 }
 .kd-baseData-dropdown-columns-item-collect-not-icon:hover,
 .kd-baseData-dropdown-options-item-collect-not-icon:hover {
-  color: #ff991c;
+  color: var(--kd-c-base-data-dropdown-color-text-hover, var(--kd-g-color-warning, #ff991c));
 }
 .kd-baseData-dropdown-columns-item-search,
 .kd-baseData-dropdown-options-item-search {
@@ -204,23 +213,23 @@
 }
 .kd-baseData-dropdown-columns {
   height: 36px;
-  background: #f5f5f5;
+  background: var(--kd-c-base-data-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
 }
 .kd-baseData-dropdown-options {
-  height: 32px;
+  height: var(--kd-c-base-data-dropdown-options-sizing-height, 32px);
 }
 .kd-baseData-dropdown-options:hover {
-  background: #f5f5f5;
+  background: var(--kd-c-base-data-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
 }
 .kd-baseData-dropdown-options:hover .kd-baseData-dropdown-options-item-collect {
   visibility: visible;
 }
 .kd-baseData-dropdown-footer {
   height: 40px;
-  border-top: 1px solid #d9d9d9;
+  border-top: 1px solid var(--kd-c-base-data-footer-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-baseData-dropdown-footer-btn {
-  color: #0e5fd8;
+  color: var(--kd-c-base-data-footer-btn-color-text, var(--kd-g-color-text-link, #0e5fd8));
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;