@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/filter/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 */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
@@ -108,8 +117,8 @@
 }
 .kd-filter .kd-filter-header-title {
   white-space: nowrap;
-  color: #212121;
-  font-size: 16px;
+  color: var(--kd-c-filter-header-title-color-text, var(--kd-g-color-text-primary, #212121));
+  font-size: var(--kd-c-filter-header-title-font-size, var(--kd-g-font-size-large, 16px));
 }
 .kd-filter .kd-filter-header-condition {
   display: -webkit-box;
@@ -125,9 +134,9 @@
 }
 .kd-filter .kd-filter-header-condition-label {
   padding-right: 8px;
-  font-size: 14px;
+  font-size: var(--kd-c-filter-condition-label-font-size, var(--kd-g-font-size-middle, 14px));
   white-space: nowrap;
-  color: #999;
+  color: var(--kd-c-filter-condition-label-color-text, var(--kd-g-color-text-third, #999));
 }
 .kd-filter .kd-filter-header-condition-item-text {
   max-width: 224px;
@@ -154,8 +163,8 @@
   height: 44px;
   line-height: 44px;
   text-align: center;
-  color: #276ff5;
-  font-size: 14px;
+  color: var(--kd-c-filter-handle-color-text, var(--kd-g-color-ongoing, #276ff5));
+  font-size: var(--kd-c-filter-handle-font-size, var(--kd-g-font-size-middle, 14px));
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -172,8 +181,8 @@
 }
 .kd-filter .kd-filter-header-handle.spread {
   border-radius: 4px 4px 0 0;
-  background-color: #fafafa;
-  border-color: #d9d9d9;
+  background-color: var(--kd-c-filter-handle-color-background-spread, var(--kd-g-color-background-contain, #fafafa));
+  border-color: var(--kd-c-filter-handle-color-border-spread, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-filter .kd-filter-header-handle.spread > i {
   -webkit-transform: rotate(180deg);
@@ -189,26 +198,26 @@
   overflow: visible;
   padding: 8px 20px;
   border-radius: 4px 0 4px 4px;
-  background-color: #fafafa;
-  border: 1px solid #d9d9d9;
+  background-color: var(--kd-c-filter-body-color-background, var(--kd-g-color-background-contain, #fafafa));
+  border: 1px solid var(--kd-c-filter-body-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-filter .kd-filter-body-tabs {
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid var(--kd-c-filter-body-tabs-color-border, var(--kd-g-color-border-weak, #e5e5e5));
 }
 .kd-filter .kd-filter-body-tabs-item {
   padding: 10px 0;
-  font-size: 14px;
-  color: #999;
+  font-size: var(--kd-c-filter-body-tabs-item-font-size, var(--kd-g-font-size-middle, 14px));
+  color: var(--kd-c-filter-body-tabs-item-color-text, var(--kd-g-color-text-third, #999));
   cursor: pointer;
 }
 .kd-filter .kd-filter-body-tabs-item:hover,
 .kd-filter .kd-filter-body-tabs-item.active {
-  color: #276ff5;
+  color: var(--kd-c-filter-body-tabs-item-color-text-active, var(--kd-g-color-ongoing, #276ff5));
 }
 .kd-filter .kd-filter-body-tabs-split {
   width: 1px;
   height: 16px;
-  background-color: #d9d9d9;
+  background-color: var(--kd-g-color-border-strong, #d9d9d9);
 }
 .kd-filter .kd-filter-body-conditions {
   display: none;
@@ -220,14 +229,14 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  font-size: 12px;
+  font-size: var(--kd-g-font-size-small, 12px);
 }
 .kd-filter .kd-filter-body-condition:not(:last-child) {
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid var(--kd-g-color-border-weak, #e5e5e5);
 }
 .kd-filter .kd-filter-body-condition-label {
   padding: 11px 0 10px;
-  color: #999;
+  color: var(--kd-g-color-text-third, #999);
   line-height: 18px;
 }
 .kd-filter .kd-filter-body-condition-options {
@@ -250,11 +259,11 @@
 .kd-filter .kd-filter-body-condition-option {
   margin-bottom: 4px;
   padding: 0 12px;
-  color: #666;
+  color: var(--kd-g-color-text-secondary, #666);
   vertical-align: middle;
   line-height: 22px;
-  font-size: 12px;
-  border-radius: 2px;
+  font-size: var(--kd-g-font-size-small, 12px);
+  border-radius: var(--kd-g-radius-border, 2px);
   border: 1px solid transparent;
   cursor: pointer;
   white-space: nowrap;
@@ -265,7 +274,7 @@
 .kd-filter .kd-filter-body-condition-option.active {
   color: #276ff5;
   border-color: #276ff5;
-  background-color: #fff;
+  background-color: var(--kd-g-color-background, #fff);
 }
 .kd-filter .kd-filter-body-condition-option-customer {
   margin-left: -20px;
@@ -289,8 +298,8 @@
 }
 .kd-filter .kd-filter-body-scheme-label {
   width: 96px;
-  color: #999;
-  font-size: 12px;
+  color: var(--kd-g-color-text-third, #999);
+  font-size: var(--kd-g-font-size-small, 12px);
 }
 .kd-filter .kd-filter-body-scheme-list {
   display: -webkit-box;
@@ -298,8 +307,8 @@
   display: flex;
 }
 .kd-filter .kd-filter-body-scheme-item {
-  font-size: 12px;
-  color: #666;
+  font-size: var(--kd-g-font-size-small, 12px);
+  color: var(--kd-g-color-text-secondary, #666);
   cursor: pointer;
 }
 .kd-filter .kd-filter-body-scheme-item:not(:last-child) {
@@ -312,10 +321,13 @@
   position: absolute;
   right: 0;
 }
+.kd-filter .kd-filter-body-scheme-detail {
+  list-style: none;
+}
 .kd-filter .kd-filter-body-scheme-detail > li {
   line-height: 40px;
-  color: #212121;
-  font-size: 12px;
+  color: var(--kd-g-color-text-primary, #212121);
+  font-size: var(--kd-g-font-size-small, 12px);
 }
 .kd-filter .kd-filter-body-scheme-detail > li > span {
   display: inline-block;
@@ -333,13 +345,13 @@
   width: 220px;
 }
 .kd-filter .kd-filter-body-scheme-detail-and {
-  font-size: 14px;
+  font-size: var(--kd-g-font-size-middle, 14px);
 }
 .kd-filter .kd-filter-body-scheme-detail-delete {
-  color: #b2b2b2;
-  font-size: 20px;
+  color: var(--kd-g-color-disabled, #b2b2b2);
+  font-size: var(--kd-g-font-size-xx-large, 20px);
   cursor: pointer;
 }
 .kd-filter .kd-filter-body-scheme-detail-delete:hover {
-  color: #fb2323;
+  color: var(--kd-g-color-error, #fb2323);
 }

package/lib/filter/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './token.less';
 
 @filter-prefix-cls: ~'@{kd-prefix}-filter';
 @filter-header-prefix-cls: ~'@{kd-prefix}-filter-header';
@@ -15,8 +16,8 @@
 
     &-title {
       white-space: nowrap;
-      color: @primary-text-color;
-      font-size: @large-font-size;
+      color: @filter-header-title-color;
+      font-size: @filter-header-title-font-size;
     }
 
     &-condition {
@@ -27,9 +28,9 @@
 
       &-label {
         padding-right: 8px;
-        font-size: @font-size;
+        font-size: @filter-condition-label-font-size;
         white-space: nowrap;
-        color: @third-text-color;
+        color: @filter-condition-label-color;
       }
 
       &-item-text {
@@ -51,8 +52,8 @@
       height: 44px;
       line-height: 44px;
       text-align: center;
-      color: @ongoing-color;
-      font-size: @font-size;
+      color: @filter-handle-color;
+      font-size: @filter-handle-font-size;
       cursor: pointer;
       user-select: none;
       border: 1px solid transparent;
@@ -64,8 +65,8 @@
 
       &.spread {
         border-radius: 4px 4px 0 0;
-        background-color: @contain-bg;
-        border-color: @strong-border-color;
+        background-color: @filter-handle-spread-bg-color;
+        border-color: @filter-handle-spread-border-color;
 
         > i {
           transform: rotate(180deg);
@@ -83,29 +84,29 @@
       overflow: visible;
       padding: 8px 20px;
       border-radius: 4px 0 4px 4px;
-      background-color: @contain-bg;
-      border: 1px solid @strong-border-color;
+      background-color: @filter-body-bg-color;
+      border: 1px solid @filter-body-border-color;
     }
 
     &-tabs {
-      border-bottom: 1px solid @weak-border-color;
+      border-bottom: 1px solid @filter-body-tabs-border-color;
 
       &-item {
         padding: 10px 0;
-        font-size: @font-size;
-        color: @third-text-color;
+        font-size: @filter-body-tabs-item-font-size;
+        color: @filter-body-tabs-item-color;
         cursor: pointer;
 
         &:hover,
         &.active {
-          color: @ongoing-color;
+          color: @filter-body-tabs-item-active-color;
         }
       }
 
       &-split {
         width: 1px;
         height: 16px;
-        background-color: @strong-border-color;
+        background-color: @color-border-strong;
       }
     }
 
@@ -119,15 +120,15 @@
     
     &-condition {
       display: flex;
-      font-size: @small-font-size;
+      font-size: @font-size-small;
 
       &:not(:last-child) {
-        border-bottom: 1px solid @weak-border-color;
+        border-bottom: 1px solid @color-border-weak;
       }
 
       &-label {
         padding: 11px 0 10px;
-        color: @third-text-color;
+        color: @color-text-third;
         line-height: 18px;
       }
 
@@ -145,11 +146,11 @@
       &-option {
         margin-bottom: 4px;
         padding: 0 12px;
-        color: @secondary-text-color;
+        color: @color-text-secondary;
         vertical-align: middle;
         line-height: 22px;
-        font-size: @small-font-size;
-        border-radius: @radius-size;
+        font-size: @font-size-small;
+        border-radius: @radius-border;
         border: 1px solid transparent;
         cursor: pointer;
         white-space: nowrap;
@@ -161,7 +162,7 @@
         &.active {
           color: @ongoing-color;
           border-color: @ongoing-color;
-          background-color: @bg;
+          background-color: @color-background;
         }
 
         &-customer {
@@ -190,8 +191,8 @@
 
       &-label {
         width: 96px;
-        color: @third-text-color;
-        font-size: @small-font-size;
+        color: @color-text-third;
+        font-size: @font-size-small;
       }
 
       &-list {
@@ -199,8 +200,8 @@
       }
 
       &-item {
-        font-size: @small-font-size;
-        color: @secondary-text-color;
+        font-size: @font-size-small;
+        color: @color-text-secondary;
         cursor: pointer;
 
         &:not(:last-child) {
@@ -218,10 +219,11 @@
       }
 
       &-detail {
+        list-style: none;
         > li {
           line-height: 40px;
-          color: @primary-text-color;
-          font-size: @small-font-size;
+          color: @color-text-primary;
+          font-size: @font-size-small;
 
           > span {
             display: inline-block;
@@ -245,16 +247,16 @@
         }
 
         &-and {
-          font-size: @font-size;
+          font-size: @font-size-middle;
         }
 
         &-delete {
-          color: @disabled-color;
-          font-size: @xxlarge-font-size;
+          color: @color-disabled;
+          font-size: @font-size-xx-large;
           cursor: pointer;
 
           &:hover {
-            color: @error-color;
+            color: @color-error;
           }
         }
       }

package/lib/filter/style/token.less

@@ -0,0 +1,28 @@
+@import '../../style/themes/token.less';
+
+@filter-custom-prefix: ~'--@{kd-prefix}-c-filter';
+
+// color
+@filter-header-title-color: var(~'@{filter-custom-prefix}-header-title-color-text', @color-text-primary);
+
+@filter-condition-label-color: var(~'@{filter-custom-prefix}-condition-label-color-text', @color-text-third);
+
+@filter-handle-color: var(~'@{filter-custom-prefix}-handle-color-text', @color-ongoing);
+
+@filter-handle-spread-bg-color: var(~'@{filter-custom-prefix}-handle-color-background-spread', @color-background-contain);
+@filter-handle-spread-border-color: var(~'@{filter-custom-prefix}-handle-color-border-spread', @color-border-strong);
+
+@filter-body-bg-color: var(~'@{filter-custom-prefix}-body-color-background', @color-background-contain);
+@filter-body-border-color: var(~'@{filter-custom-prefix}-body-color-border', @color-border-strong);
+
+@filter-body-tabs-border-color: var(~'@{filter-custom-prefix}-body-tabs-color-border', @color-border-weak);
+
+@filter-body-tabs-item-color: var(~'@{filter-custom-prefix}-body-tabs-item-color-text', @color-text-third);
+
+@filter-body-tabs-item-active-color: var(~'@{filter-custom-prefix}-body-tabs-item-color-text-active', @color-ongoing);
+
+// font
+@filter-header-title-font-size: var(~'@{filter-custom-prefix}-header-title-font-size', @font-size-large);
+@filter-condition-label-font-size: var(~'@{filter-custom-prefix}-condition-label-font-size', @font-size-middle);
+@filter-handle-font-size: var(~'@{filter-custom-prefix}-handle-font-size', @font-size-middle);
+@filter-body-tabs-item-font-size: var(~'@{filter-custom-prefix}-body-tabs-item-font-size', @font-size-middle);

package/lib/form/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 */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
@@ -120,7 +129,7 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  margin: 0 30px 22px 0;
+  margin: 0 var(--kd-c-form-field-spacing-margin-right, 30px) var(--kd-c-form-field-spacing-margin-bottom, 22px) 0;
 }
 .kd-form-field-vertical {
   -webkit-box-align: start;
@@ -138,9 +147,9 @@
   display: none !important;
 }
 .kd-form-field-label {
-  font-size: 12px;
-  line-height: 18px;
-  color: #666;
+  font-size: var(--kd-c-form-field-label-font-size, 12px);
+  line-height: var(--kd-c-form-field-label-line-height, 18px);
+  color: var(--kd-c-form-field-color, var(--kd-g-color-text-secondary, #666));
   text-align: left;
   margin-right: 30px;
 }
@@ -158,7 +167,7 @@
   width: 5px;
   height: 5px;
   line-height: 1;
-  color: #fb2323;
+  color: var(--kd-c-form-error-color, var(--kd-g-color-error, #fb2323));
 }
 .kd-form-field-wrapper {
   position: relative;
@@ -167,11 +176,11 @@
   position: absolute;
   left: 0;
   right: 0;
-  padding: 2px 8px;
-  font-size: 12px;
-  line-height: 18px;
-  color: #fb2323;
-  background-color: #fff2f4;
+  padding: var(--kd-c-form-field-message-spacing-padding-horizontal, 2px) var(--kd-c-form-field-message-spacing-padding-vertical, 8px);
+  font-size: var(--kd-c-form-field-message-font-size, 12px);
+  line-height: var(--kd-c-form-field-message-line-height, 18px);
+  color: var(--kd-c-form-error-color, var(--kd-g-color-error, #fb2323));
+  background-color: var(--kd-c-form-error-color-background, var(--kd-g-color-background-error, #fff2f4));
   word-break: break-word;
   overflow: hidden;
   white-space: nowrap;

package/lib/form/style/index.less

@@ -1,6 +1,8 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
 
+@import './token.less';
+
 @form-prefix-cls: ~'@{kd-prefix}-form';
 @field-prefix-cls: ~'@{form-prefix-cls}-field';
 @field-label-cls: ~'@{field-prefix-cls}-label';
@@ -24,7 +26,8 @@
 
 .@{field-prefix-cls} {
   align-items: center;
-  margin: @form-field-margin;
+  margin: 0 @form-field-spacing-margin-right @form-field-spacing-margin-bottom 0 ;
+
   &-vertical {
     align-items: flex-start;
     flex-direction: column;
@@ -42,7 +45,7 @@
 .@{field-label-cls} {
   font-size: @form-field-label-font-size;
   line-height: @form-field-label-line-height;
-  color: @secondary-text-color;
+  color: @form-field-color;
   text-align: left;
   margin-right: 30px;
   &-right {
@@ -61,7 +64,7 @@
     width: 5px;
     height: 5px;
     line-height: 1;
-    color: @error-color;
+    color: @form-error-color;
   }
 }
 
@@ -71,11 +74,11 @@
     position: absolute;
     left: 0;
     right: 0;
-    padding: @form-field-message-padding;
+    padding: @form-field-message-spacing-padding-horizontal @form-field-message-spacing-padding-vertical;
     font-size: @form-field-message-font-size;
     line-height: @form-field-message-line-height;
-    color: @error-color;
-    background-color: @error-bg-color;
+    color: @form-error-color;
+    background-color: @form-error-color-background;
     word-break: break-word;
     overflow: hidden;
     white-space: nowrap;

package/lib/form/style/token.less

@@ -0,0 +1,27 @@
+@import "../../style/themes/token.less";
+
+@form-prefix: '--@{kd-prefix}-c-form';
+
+// shadow
+// color
+@form-field-color: var(~'@{form-prefix}-field-color', @color-text-secondary);
+@form-error-color: var(~'@{form-prefix}-error-color', @color-error);
+@form-error-color-background: var(~'@{form-prefix}-error-color-background', @color-background-error);
+
+// sizing
+// spacing
+@form-field-spacing-margin-right: var(~'@{form-prefix}-field-spacing-margin-right', 30px);
+@form-field-spacing-margin-bottom: var(~'@{form-prefix}-field-spacing-margin-bottom', 22px);
+@form-field-message-spacing-padding-horizontal: var(~'@{form-prefix}-field-message-spacing-padding-horizontal', 2px);
+@form-field-message-spacing-padding-vertical: var(~'@{form-prefix}-field-message-spacing-padding-vertical', 8px);
+
+// motion
+// font
+@form-field-label-font-size: var(~'@{form-prefix}-field-label-font-size',12px);
+@form-field-message-font-size: var(~'@{form-prefix}-field-message-font-size', 12px);
+
+// radius
+// line-height
+@form-field-label-line-height: var(~'@{form-prefix}-field-label-line-height', 18px);
+@form-field-message-line-height: var(~'@{form-prefix}-field-message-line-height', 18px);
+// z-index

package/lib/grid/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 */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/