@kdcloudjs/kdesign 1.2.2 → 1.3.1

package/lib/select/style/index.css

@@ -274,7 +274,7 @@
   transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
 .kd-select-icon-arrow-focus {
-  color: #3761ca;
+  color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3));
 }
 .kd-select-icon-clear {
   opacity: 0;
@@ -308,7 +308,7 @@
   border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
 .kd-select-placeholder {
-  color: var(--kd-c-select-placeholder-color-text, var(--kd-g-color-text-third, #999));
+  color: var(--kd-c-select-placeholder-color-text, #b2b2b2);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -471,12 +471,15 @@
   border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
 .kd-select-single-disabled {
-  background-color: #f5f5f5;
-  color: #b2b2b2;
+  background-color: var(--kd-c-select-color-background-disabled, #f5f5f5);
+  color: var(--kd-c-select-color-text-disabled, #212121);
 }
 .kd-select-single-disabled:hover {
   cursor: not-allowed;
 }
+.kd-select-single-disabled .kd-select-suffix {
+  color: var(--kd-c-select-arrow-icon-color-text-disabled, #b2b2b2);
+}
 .kd-select-single:hover .kd-select-icon-clear {
   opacity: 1;
 }
@@ -487,7 +490,7 @@
   text-overflow: ellipsis;
 }
 .kd-select-single-disabled-text {
-  color: #b2b2b2;
+  color: var(--kd-c-select-color-text-disabled, #212121);
 }
 .kd-select .kd-select-selection-item {
   display: -webkit-inline-box;
@@ -560,8 +563,11 @@
 }
 .kd-select-multiple-disabled {
   cursor: not-allowed;
-  background-color: #f5f5f5;
-  color: #b2b2b2;
+  background-color: var(--kd-c-select-color-background-disabled, #f5f5f5);
+  color: var(--kd-c-select-color-text-disabled, #212121);
+}
+.kd-select-multiple-disabled .kd-select-suffix {
+  color: var(--kd-c-select-arrow-icon-color-text-disabled, #b2b2b2);
 }
 .kd-select-multiple:hover .kd-select-icon-clear {
   opacity: 1;

package/lib/select/style/index.less

@@ -40,7 +40,7 @@
       }
 
       &-focus {
-        color: #3761ca;
+        color: @select-g-color-border-foucs;
       }
     }
 
@@ -220,11 +220,15 @@
       .focusColor();
     }
     &-disabled {
-      background-color: @disabled-contain-bg;
-      color: @disabled-color;
+      background-color: @select-color-background-disabled;
+      color: @select-color-text-disabled;
       &:hover {
         cursor: not-allowed;
       }
+
+      .@{select-prefix-cls}-suffix {
+        color: @select-arrow-icon-color-text-disabled;
+      }
     }
     &:hover .@{select-prefix-cls}-icon-clear {
       opacity: 1;
@@ -234,7 +238,7 @@
       .over();
     }
     &-disabled-text {
-      color: @disabled-color;
+      color: @select-color-text-disabled;
     }
   }
 
@@ -319,8 +323,12 @@
   &-multiple {
     &-disabled {
       cursor: not-allowed;
-      background-color: @disabled-contain-bg;
-      color: @disabled-color;
+      background-color: @select-color-background-disabled;
+      color: @select-color-text-disabled;
+
+      .@{select-prefix-cls}-suffix {
+        color: @select-arrow-icon-color-text-disabled;
+      }
     }
     &:hover .@{select-prefix-cls}-icon-clear {
       opacity: 1;

package/lib/select/style/token.less

@@ -12,11 +12,14 @@
 @select-g-color-border-foucs: var(~'@{select-custom-prefix}-color-border-foucs', @color-theme);
 @select-g-color-border-hover: var(~'@{select-custom-prefix}-color-border-hover', @color-theme);
 @select-border-g-color-border: var(~'@{select-custom-prefix}-border-color-border', @color-border-strong);
-@select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', @color-text-third);
+@select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', #b2b2b2);
 @select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-theme);
 @select-font-color: var(~'@{select-custom-prefix}-footer-color-text', @color-text-primary);
 @select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', #0e5fd8);
 @select-g-item-text-color-disabled: var(~'@{select-custom-prefix}-item-color-text-disabled', @color-disabled);
+@select-color-background-disabled: var(~'@{select-custom-prefix}-color-background-disabled', #f5f5f5);
+@select-color-text-disabled: var(~'@{select-custom-prefix}-color-text-disabled', #212121);
+@select-arrow-icon-color-text-disabled: var(~'@{select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
 
 // font
 @select-list-font-size: var(~'@{select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小

package/lib/style/mixins/index.less

@@ -25,7 +25,7 @@
     &::before {
       position: absolute;
       z-index: -2;
-      background: transparent;
+      background: @popperBg;
       border-style: solid;
       border-width: var(--arrowSize);
       transform: rotate(45deg);
@@ -51,7 +51,7 @@
         left: var(--arrowLeft);
         top: var(--arrowSpill);
         box-shadow: -2px -2px calc(@blur - 1px) rgba(0, 0, 0, 0.1);
-        border-color: @color-white transparent transparent @color-white;
+        border-color: @popperBg transparent transparent @popperBg;
       }
     }
 
@@ -62,7 +62,7 @@
         left: var(--arrowLeft);
         bottom: var(--arrowSpill);
         box-shadow: 3px 3px calc(@blur + 1px) rgba(0, 0, 0, 0.15);
-        border-color: transparent @color-white @color-white transparent;
+        border-color: transparent @popperBg @popperBg transparent;
       }
     }
 
@@ -73,7 +73,7 @@
         top: var(--arrowTop);
         right: var(--arrowSpill);
         box-shadow: 3px 0 @blur rgba(0, 0, 0, 0.12), 0 -2px @blur rgba(204, 149, 149, 0.12);
-        border-color: @color-white @color-white transparent transparent;
+        border-color: @popperBg @popperBg transparent transparent;
       }
     }
 
@@ -84,7 +84,7 @@
         top: var(--arrowTop);
         left: var(--arrowSpill);
         box-shadow: 0 3px @blur rgba(0, 0, 0, 0.1), -2px 0 @blur rgba(0, 0, 0, 0.1);
-        border-color: transparent transparent @color-white @color-white;
+        border-color: transparent transparent @popperBg @popperBg;
       }
     }
   }

package/lib/tooltip/style/index.css

@@ -118,10 +118,10 @@
   color: var(--kd-c-tooltip-color-text, var(--kd-g-color-text-primary, #212121));
   border-radius: var(--kd-c-tooltip-radius-border, var(--kd-g-radius-border, 2px));
   font-size: var(--kd-c-tooltip-color-text, var(--kd-g-font-size-small, 12px));
-  line-height: 18px;
+  line-height: 1.5;
   background-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #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);
+  -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);
   opacity: 1;
   z-index: var(--kd-g-z-index-popper, 1050);
   visibility: visible;
@@ -133,7 +133,7 @@
 .kd-tooltip.arrow::before {
   position: absolute;
   z-index: -2;
-  background: transparent;
+  background: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
   border-style: solid;
   border-width: var(--arrowSize);
   -webkit-transform: rotate(45deg);
@@ -158,7 +158,7 @@
   top: var(--arrowSpill);
   -webkit-box-shadow: -2px -2px calc(6px - 1px) rgba(0, 0, 0, 0.1);
           box-shadow: -2px -2px calc(6px - 1px) rgba(0, 0, 0, 0.1);
-  border-color: var(--kd-g-color-white, #fff) transparent transparent var(--kd-g-color-white, #fff);
+  border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-tooltip.arrow.topLeft::before,
 .kd-tooltip.arrow.top::before,
@@ -167,7 +167,7 @@
   bottom: var(--arrowSpill);
   -webkit-box-shadow: 3px 3px calc(6px + 1px) rgba(0, 0, 0, 0.15);
           box-shadow: 3px 3px calc(6px + 1px) rgba(0, 0, 0, 0.15);
-  border-color: transparent var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent;
+  border-color: transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent;
 }
 .kd-tooltip.arrow.leftTop::before,
 .kd-tooltip.arrow.left::before,
@@ -176,7 +176,7 @@
   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: var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent transparent;
+  border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent transparent;
 }
 .kd-tooltip.arrow.rightTop::before,
 .kd-tooltip.arrow.right::before,
@@ -185,5 +185,5 @@
   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 var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff);
+  border-color: transparent transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
 }

package/lib/tooltip/style/index.less

@@ -11,9 +11,9 @@
   color: @tooltip-color;
   border-radius: @tooltip-border-radius;
   font-size: @tooltip-font-size;
-  line-height: 18px;
+  line-height: 1.5;
   background-color: @tooltip-background-color;
-  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
   opacity: 1;
   z-index: @z-index-popper;
   visibility: visible;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [