@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/es/search/style/index.less

@@ -6,7 +6,7 @@
 @search-prefix-cls: ~'@{kd-prefix}-search';
 
 .@{search-prefix-cls} {
-  border-bottom: 1px solid @quick-search-border-bottom-color;
+  border-bottom: @search-sizing-border-width solid @quick-search-border-bottom-color;
   &-size-small {
     width: @search-small-width;
   }
@@ -26,18 +26,24 @@
   }
 
   &-border {
-    border: 1px solid @quick-search-border-bottom-color;
+    border: @search-sizing-border-width solid @quick-search-border-bottom-color;
+  }
+
+  &-prefix,
+  &-suffix {
+    font-size: @search-icon-font-size;
+    color: @search-icon-color;
   }
 
   &-focused,
   &:not(.@{search-prefix-cls}-disabled):hover {
-    border-color: @search-hover-color;
+    border-color: @search-color-theme;
     .@{search-prefix-cls}-prefix {
-      color: @search-hover-color;
+      color: @search-color-theme;
     }
 
     .@{search-prefix-cls}-suffix {
-      color: @search-hover-color;
+      color: @search-color-theme;
     }
   }
 }
@@ -48,23 +54,27 @@
   width: @quick-search-default-width;
   height: @quick-search-default-height;
   position: relative;
-  border-bottom: 1px solid @quick-search-border-bottom-color;
-  transition: all calc(@transition-duration - 0.1s) @ease;
+  border-bottom: @search-sizing-border-width solid @quick-search-border-bottom-color;
+  transition: all calc(@search-transition-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   &-borderless {
     border: none !important;
   }
   &-border {
-    border: 1px solid @quick-search-border-bottom-color;
+    border: @search-sizing-border-width solid @quick-search-border-bottom-color;
   }
   &:hover:not(&-disabled) {
-    border-color: @search-hover-color;
+    border-color: @search-color-theme;
     .@{quick-search-prefix-cls}-prefix {
-      color: @search-hover-color;
+      color: @search-color-theme;
     }
   }
   &-focused:not(&-disabled) {
     max-width: @quick-search-max-width;
     width: 100% !important;
+    border-color: @search-color-theme;
+    .@{quick-search-prefix-cls}-prefix {
+      color: @search-color-theme;
+    }
   }
   &-disabled {
     cursor: not-allowed;
@@ -77,6 +87,8 @@
     top: 50%;
     transform: translateY(-50%);
     line-height: 1;
+    font-size: @search-icon-font-size;
+    color: @search-icon-color;
   }
   &-selector {
     cursor: text;
@@ -99,7 +111,7 @@
       display: flex;
       position: relative;
       border-radius: 2px;
-      border: 1px solid @end-color;
+      border: 1px solid @search-end-color;
       margin: 2px 12px 2px 0;
       cursor: pointer;
       max-width: 100%;
@@ -113,7 +125,7 @@
         padding: 0 4px 0 4px;
         flex-shrink: 0;
         max-width: 170px;
-        background: @end-color;
+        background: @search-end-color;
         line-height: 20px;
         font-size: @quick-search-dropdown-font-size;
         color: @white;
@@ -131,13 +143,13 @@
         height: 14px;
         width: 14px;
         line-height: 1;
-        font-size: @middle-font-size;
+        font-size: @search-middle-font-size;
         border-radius: 50%;
         position: absolute;
         right: -7px;
         top: -6px;
         display: none;
-        background: @bg;
+        background: @search-color-background;
         &:hover {
           color: @quick-search-selected-tags-del-hover-bg;
         }
@@ -152,6 +164,7 @@
       left: 0;
       transform: translateY(-50%);
       color: @quick-search-selection-placeholder-color;
+      font-size: @search-placeholder-font-size;
       .ellipsis();
     }
 
@@ -178,6 +191,8 @@
     border: none;
     width: 100%;
     background: transparent;
+    font-size: @search-input-font-size;
+    color: @search-color-text-primary;
     &::placeholder {
       font-size: 12px;
       color: @quick-search-input-color;
@@ -191,8 +206,8 @@
     z-index: @zIndex-popper;
     font-size: @quick-search-dropdown-font-size;
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
-    border-radius: @radius-size;
-    background: @bg;
+    border-radius: @search-radius-size;
+    background: @search-color-background;
     overflow: auto;
     &-scroll {
       overflow-y: auto;
@@ -204,6 +219,7 @@
       .dropdown-option();
       .ellipsis();
       color: @quick-search-dropdown-desc-color;
+      font-size: @search-dropdown-desc-font-size;
     }
   }
 
@@ -211,16 +227,14 @@
     .dropdown-option();
     .ellipsis();
     cursor: pointer;
+    color: @search-color-text-primary;
+
     &-tag {
-      color: @quick-search-dropdown-tag-color;
       margin-right: 12px;
     }
-    &-content {
-      color: @primary-text-color;
-    }
 
     &:hover:not(&-selected) {
-      background: @disabled-contain-bg;
+      background: @search-disabled-contain-bg;
     }
     &-selected:not(&-disabled) {
       background: @quick-search-dropdown-selected-bg;
@@ -241,7 +255,7 @@
       display: flex;
       align-items: center;
       overflow: hidden;
-      padding-left: @quick-search-dropdown-option-padding;
+      padding-left: @quick-search-dropdown-option-padding-horizontal;
       &-item {
         width: 4px;
         height: 4px;
@@ -251,7 +265,7 @@
       }
 
       &-item:nth-child(1) {
-        background-color: @spin-dot-color-first;
+        background-color: @search-dot-color-first;
       }
       &-item:nth-child(2) {
         background-color: @spin-dot-color-second;
@@ -269,7 +283,7 @@
 .@{search-panel-prefix-cls} {
   width: @search-panel-width;
   border-radius: 4px;
-  background: @bg;
+  background: @search-color-background;
 
   &-wrapper {
     display: flex;
@@ -286,7 +300,7 @@
     &-icon {
       font-size: 18px;
       margin: 0 8px;
-      transition: all calc(@transition-duration - 0.1s) @ease;
+      transition: all calc(@search-transition-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
     }
   }
 
@@ -314,7 +328,7 @@
     border-top: 1px solid @search-panel-border-color;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    transition: all calc(@transition-duration - 0.1s) @ease;
+    transition: all calc(@search-transition-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 
     &-result {
       width: 300px;
@@ -355,11 +369,11 @@
         }
 
         &-type {
-          color: @third-text-color;
+          color: @search-color-text-third;
         }
 
         &-sub-title {
-          color: @third-text-color;
+          color: @search-color-text-third;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -398,14 +412,14 @@
 
       &-title {
         margin-bottom: 10px;
-        font-size: @middle-font-size;
-        color: @primary-text-color;
+        font-size: @search-middle-font-size;
+        color: @search-color-text-primary;
       }
 
       &-list {
         margin-top: 4px;
-        color: @secondary-text-color;
-        font-size: @small-font-size;
+        color: @search-color-text-secondary;
+        font-size: @search-small-font-size;
         line-height: 20px;
       }
     }
@@ -415,7 +429,7 @@
       display: flex;
       align-items: center;
       padding-left: 17px;
-      font-size: @middle-font-size;
+      font-size: @search-middle-font-size;
       cursor: pointer;
 
       &:hover {
@@ -443,7 +457,7 @@
     width: 18px;
     height: 18px;
     border-radius: 50%;
-    background: @end-color;
+    background: @search-end-color;
     position: relative;
 
     .@{kd-prefix}icon {
@@ -476,7 +490,7 @@
     &.hidden {
       opacity: 0;
       visibility: hidden;
-      transition: all calc(@transition-duration - 0.1s) @ease;
+      transition: all calc(@search-transition-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
     }
   }
 

package/es/search/style/mixin.less

@@ -1,6 +1,8 @@
+@import './token.less';
+
 .dropdown-option() {
-  padding-left: @quick-search-dropdown-option-padding;
-  padding-right: @quick-search-dropdown-option-padding;
+  padding-left: @quick-search-dropdown-option-padding-horizontal;
+  padding-right: @quick-search-dropdown-option-padding-horizontal;
   line-height: @quick-search-dropdown-option-height;
 }
 

package/es/search/style/token.less

@@ -0,0 +1,60 @@
+@import '../../style/themes/token.less';
+
+@search-prefix: '--@{kd-prefix}-c-search';
+
+// sizing
+@search-icon-font-size: var(~'@{search-prefix}-icon-font-size', 16px);
+@search-small-width: var(~'@{search-prefix}-sizing-width-small', 200px);
+@search-middle-width: var(~'@{search-prefix}-sizing-width-middle', 260px);
+@search-large-width: var(~'@{search-prefix}-sizing-width-large', 320px);
+@quick-search-default-width: var(~'@{search-prefix}-sizing-width-default', 200px);
+@quick-search-default-height: var(~'@{search-prefix}-sizing-height-default', 24px);
+@quick-search-max-width: var(~'@{search-prefix}-sizing-width-max', 400px);
+@search-panel-width: var(~'@{search-prefix}-panel-sizing-width', 800px);
+@search-panel-height: var(~'@{search-prefix}-panel-sizing-height', 60px);
+@quick-search-dropdown-option-height: var(~'@{search-prefix}-dropdown-option-sizing-height', 32px);
+@search-sizing-border-width: var(~'@{search-prefix}-sizing-border-width', 1px);
+
+// color
+@search-icon-color: var(~'@{search-prefix}-icon-color', #B2B2B2);
+@search-color-theme: var(~'@{search-prefix}-color-theme', @color-theme);
+@search-hover-color: var(~'@{search-prefix}-color-hover', #5582F3);
+@quick-search-input-color: var(~'@{search-prefix}-input-color-text', @color-disabled);
+@quick-search-border-bottom-color: var(~'@{search-prefix}-color-border', @color-border-strong-2);
+@quick-search-dropdown-desc-color: var(~'@{search-prefix}-dropdown-desc-color-text', #999999);
+@quick-search-npl-border-color: var(~'@{search-prefix}-npl-color-border', #D8D8D8);
+@quick-search-selection-placeholder-color: var(~'@{search-prefix}-selection-placeholder-color-text', #B2B2B2);
+@search-panel-hover-color: var(~'@{search-prefix}-panel-color-hover', #597cfc);
+@search-panel-border-color: var(~'@{search-prefix}-panel-color-border', #E6E8ED);
+@search-end-color: var(~'@{search-prefix}-color-end', @color-end);
+@search-color-text-primary: var(~'@{search-prefix}-color-text-primary', @color-text-primary);
+@search-color-text-secondary: var(~'@{search-prefix}-color-text-secondary', @color-text-secondary);
+@search-color-text-third: var(~'@{search-prefix}-color-text-third', @color-text-third);
+@search-dot-color-first: var(~'@{search-prefix}-dot-color-first', @color-logo-1);
+@search-dot-color-second: var(~'@{search-prefix}-dot-color-second', @color-logo-2);
+@search-dot-color-third: var(~'@{search-prefix}-dot-color-third', @color-logo-3);
+@search-dot-color-fourth: var(~'@{search-prefix}-dot-color-fourth', @color-logo-4);
+@search-placeholder-color-text: var(~'@{search-prefix}-placeholder-color-text', #B2B2B2);
+@quick-search-selected-tags-del-hover-bg: var(~'@{search-prefix}-selected-tags-del-color-background-hover', #999999);
+@quick-search-dropdown-selected-bg: var(~'@{search-prefix}-dropdown-tags-color-background-selected', #F2F6FF);
+@quick-search-dropdown-hover-bg: var(~'@{search-prefix}-dropdown-color-background-hover', @color-hover);
+@search-panel-hover-bg: var(~'@{search-prefix}-panel-color-background-hover', #eef3fe);
+@search-color-background: var(~'@{search-prefix}-color-background', @color-background);
+@search-disabled-contain-bg: var(~'@{search-prefix}-color-background-contain-disabled', @color-background-contain-disabled);
+
+// font
+@quick-search-dropdown-font-size: var(~'@{search-prefix}-dropdown-font-size', 12px);
+@search-middle-font-size: var(~'@{search-prefix}-font-size-middle', @font-size-middle);
+@search-small-font-size: var(~'@{search-prefix}-font-size-small', @font-size-small);
+@search-placeholder-font-size: var(~'@{search-prefix}-placeholder-font-size', 12px);
+@search-dropdown-desc-font-size: var(~'@{search-prefix}-dropdown-desc-font-size', 12px);
+@search-input-font-size: var(~'@{search-prefix}-input-font-size', 12px);
+
+// spacing
+@quick-search-dropdown-option-padding-horizontal: var(~'@{search-prefix}-dropdown-option-spacing-padding-horizontal', 12px);
+
+// motion
+@search-transition-duration: var(~'@{search-prefix}-motion-duration', @duration-promptly);
+
+// radius
+@search-radius-size: var(~'@{search-prefix}-radius-border', @radius-border);

package/es/select/select.js

@@ -419,14 +419,6 @@ var InternalSelect = function InternalSelect(props, ref) {
     setMulOptions(_toConsumableArray(selectMulOpts));
     onChange && onChange(labelInValue ? selectMulOpts : selectedVal);
     e.stopPropagation();
-  }; // 控制下列面板的显示
-
-
-  var handleDropdownShow = function handleDropdownShow() {
-    if (!optionShow && !disabled) {
-      setOptionShow(true);
-      onVisibleChange && onVisibleChange(true);
-    }
   }; // 渲染后缀图标
 
 
@@ -627,8 +619,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: selectCls,
       ref: selectRef,
-      style: style,
-      onClick: handleDropdownShow
+      style: style
     }, /*#__PURE__*/React.createElement("span", {
       className: selectionCls,
       onClick: handleClick,
@@ -661,10 +652,8 @@ var InternalSelect = function InternalSelect(props, ref) {
   };
 
   var handleVisibleChange = function handleVisibleChange(visible) {
-    if (!visible) {
-      props.visible === undefined && setOptionShow(visible);
-      onVisibleChange && onVisibleChange(visible);
-    }
+    props.visible === undefined && setOptionShow(visible);
+    onVisibleChange && onVisibleChange(visible);
   };
 
   var popperProps = _extends(_extends({}, selectProps), {

package/es/select/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 */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
@@ -273,7 +282,7 @@
   transition: opacity 0.15s ease;
 }
 .kd-select-icon-clear:hover {
-  color: #5582f3;
+  color: var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-select-selection-search {
   position: absolute;
@@ -296,10 +305,10 @@
   cursor: pointer;
 }
 .kd-select-focused {
-  border-color: #5582F3 !important;
+  border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
 .kd-select-placeholder {
-  color: #999;
+  color: var(--kd-c-select-placeholder-color-text, var(--kd-g-color-text-third, #999));
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -308,18 +317,18 @@
   border: none;
 }
 .kd-select-underline {
-  border-bottom: 1px solid #999;
+  border-bottom: 1px solid var(--kd-c-select-color-border, var(--kd-g-color-input, #999));
 }
 .kd-select-underline:hover:not(.kd-select-multiple-disabled):not(.kd-select-single-disabled) {
-  border-bottom: 1px solid #5582f3;
+  border-bottom: 1px solid var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-select-bordered {
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--kd-c-select-border-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   padding-left: 8px !important;
   border-radius: 2px;
 }
 .kd-select-bordered:hover:not(.kd-select-multiple-disabled):not(.kd-select-single-disabled) {
-  border: 1px solid #5582f3;
+  border: 1px solid var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-select-wrapper {
   -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -344,16 +353,16 @@
 .kd-select-dropdown {
   display: block;
   left: 0;
-  z-index: 1050;
+  z-index: var(--kd-c-select-z-index, var(--kd-g-z-index-popper, 1050));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   padding: 4px 0;
   margin: 0;
   overflow: auto;
-  font-size: 12px;
+  font-size: var(--kd-c-select-dropdown-font-size, 12px);
   font-variant: initial;
-  background-color: #fff;
-  border-radius: 2px;
+  background-color: var(--kd-c-select-dropdown-color-background, var(--kd-g-color-background, #fff));
+  border-radius: var(--kd-c-select-radius-border, var(--kd-g-radius-border, 2px));
   outline: none;
   -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);
@@ -374,11 +383,11 @@
   position: relative;
   display: block;
   font-weight: normal;
-  font-size: 12px;
-  min-height: 22px;
+  font-size: var(--kd-c-select-dropdown-font-size, 12px);
+  min-height: var(--kd-c-select-item-sizing-height, 22px);
   padding: 5px 12px;
-  color: #212121;
-  line-height: 22px;
+  color: var(--kd-c-select-footer-color-text, var(--kd-g-color-text-primary, #212121));
+  line-height: var(--kd-c-select-dropdown-line-height, 22px);
   cursor: pointer;
   -webkit-transition: background 0.3s ease;
   transition: background 0.3s ease;
@@ -398,37 +407,37 @@
   text-overflow: ellipsis;
 }
 .kd-select-item-option:hover:not(.kd-select-item-option-selected):not(.kd-select-item-option-disabled) {
-  background-color: #f5f5f5;
+  background-color: var(--kd-c-select-color-background, var(--kd-g-color-hover, #f5f5f5));
 }
 .kd-select-item-option-active:not(.kd-select-item-option-disabled) {
-  background-color: #f5f5f5;
+  background-color: var(--kd-c-select-color-background, var(--kd-g-color-hover, #f5f5f5));
 }
 .kd-select-item-option-selected:not(.kd-select-item-option-disabled) {
-  color: #276ff5;
-  background-color: #f2f9ff;
+  color: var(--kd-c-select-item-color-text-selected, var(--kd-g-color-ongoing, #276ff5));
+  background-color: var(--kd-c-select-color-background-selected, #f2f9ff);
 }
 .kd-select-item-option-disabled {
-  color: #b2b2b2;
+  color: var(--kd-c-select-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
-  background-color: #f5f5f5;
+  background-color: var(--kd-c-select-item-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
 }
 .kd-select-size-small {
-  min-height: 24px;
-  max-height: 62px;
-  line-height: 14px;
-  font-size: 12px;
+  min-height: var(--kd-c-select-sizing-height-small, 24px);
+  max-height: calc(var(--kd-c-select-sizing-height-small, 24px) * 3 - 10px);
+  line-height: var(--kd-c-select-line-height-small, 14px);
+  font-size: var(--kd-c-select-font-size-small, 12px);
 }
 .kd-select-size-middle {
-  min-height: 30px;
-  max-height: 80px;
-  line-height: 22px;
-  font-size: 14px;
+  min-height: var(--kd-c-select-sizing-height-middle, 30px);
+  max-height: calc(var(--kd-c-select-sizing-height-middle, 30px) * 3 - 10px);
+  line-height: var(--kd-c-select-line-height-middle, 22px);
+  font-size: var(--kd-c-select-font-size-middle, 14px);
 }
 .kd-select-size-large {
-  min-height: 36px;
-  max-height: 98px;
-  line-height: 28px;
-  font-size: 16px;
+  min-height: var(--kd-c-select-sizing-height-large, 36px);
+  max-height: calc(var(--kd-c-select-sizing-height-large, 36px) * 3 - 10px);
+  line-height: var(--kd-c-select-line-height-large, 28px);
+  font-size: var(--kd-c-select-font-size-large, 16px);
 }
 .kd-select-suffix {
   right: 10px;
@@ -450,7 +459,7 @@
   margin-left: 4px;
 }
 .kd-select-single-focused {
-  border-color: #5582F3 !important;
+  border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
 .kd-select-single-disabled {
   background-color: #f5f5f5;
@@ -562,10 +571,10 @@
           align-items: center;
 }
 .kd-select-multiple .kd-select-wrapper:hover:not(.kd-select-multiple-disabled) {
-  border-bottom: 1px solid #5582f3;
+  border-bottom: 1px solid var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-select-multiple-footer {
-  color: #212121;
+  color: var(--kd-c-select-footer-color-text, var(--kd-g-color-text-primary, #212121));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -585,7 +594,7 @@
   padding-left: 12px;
 }
 .kd-select-multiple-footer-hadSelected > span {
-  color: #0e5fd8;
+  color: var(--kd-c-select-footer-color-text-selected, var(--kd-g-color-text-link, #0e5fd8));
   padding: 0 2px;
 }
 .kd-select.topLeft.hidden,

package/es/select/style/index.less

@@ -48,7 +48,7 @@
       opacity: 0;
       transition: opacity 0.15s ease;
       &:hover {
-        color: @theme-color;
+        color: @select-g-color-border-hover;
       }
     }
   }
@@ -88,18 +88,18 @@
   }
 
   &-underline {
-    border-bottom: 1px solid @input-color;
+    border-bottom: 1px solid @select-g-color-border;
     &:hover:not(.@{select-prefix-cls}-multiple-disabled):not(.@{select-prefix-cls}-single-disabled) {
-      border-bottom: 1px solid #5582f3;
+      border-bottom: 1px solid @select-g-color-border-hover;
     }
   }
 
   &-bordered {
-    border: 1px solid @strong-border-color;
+    border: 1px solid @select-border-g-color-border;
     padding-left: 8px !important;
     border-radius: 2px;
     &:hover:not(.@{select-prefix-cls}-multiple-disabled):not(.@{select-prefix-cls}-single-disabled) {
-      border: 1px solid #5582f3;
+      border: 1px solid @select-g-color-border-hover;
     }
   }
 
@@ -120,7 +120,7 @@
   &-dropdown {
     display: block;
     left: 0;
-    z-index: @zIndex-popper;
+    z-index: @select-z-index;
     box-sizing: border-box;
     padding: 4px 0; // update
     margin: 0;
@@ -128,7 +128,7 @@
     font-size: @select-list-font-size; // update
     font-variant: initial;
     background-color: @select-dropdown-bg;
-    border-radius: @radius-size;
+    border-radius: @select-g-radius-border;
     outline: none;
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
 
@@ -179,7 +179,7 @@
       }
 
       &-disabled {
-        color: @disabled-color;
+        color: @select-g-item-text-color-disabled;
         cursor: not-allowed;
         background-color: @select-disabled-option-bg;
       }
@@ -329,7 +329,7 @@
     }
     .@{select-prefix-cls}-wrapper {
       &:hover:not(.@{select-prefix-cls}-multiple-disabled) {
-        border-bottom: 1px solid #5582f3;
+        border-bottom: 1px solid @select-g-color-border-hover;
       }
     }
 
@@ -348,7 +348,7 @@
         color: #999999;
         padding-left: 12px;
         > span {
-          color: #0e5fd8;
+          color: @select-footer-g-text-color-selected;
           padding: 0 2px;
         }
       }

package/es/select/style/mixin.less

@@ -1,3 +1,5 @@
+@import './token.less';
+
 .item() {
   position: relative;
   display: block;
@@ -11,12 +13,12 @@
 
 .focusColor() {
   // border-bottom: 1px solid #5582F3;
-  border-color: #5582F3 !important;
+  border-color: @select-g-color-border-foucs !important;
 }
 
 .select-input-size(@height, @maxHeight, @lineHeight, @fontSize) {
   min-height: @height;
-  max-height: @maxHeight * 3 - 10px;
+  max-height: calc(@maxHeight * 3 - 10px);
   line-height: @lineHeight;
   font-size: @fontSize;
 }
@@ -27,11 +29,6 @@
   text-overflow: ellipsis;
 }
 
-.item-size(@height) {
-  height: @height - 10px;
-  line-height: @height - 10px;
-}
-
 @keyframes SlideDownIn {
   0% {
     transform: scaleY(0.8);