@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/radio/style/token.less

@@ -0,0 +1,47 @@
+@import '../../style/themes/token.less';
+@import '../../style/mixins/index';
+
+
+@radio-prefix: '--@{kd-prefix}-c-radio';
+
+
+
+
+
+
+@radio-transition-fn:  cubic-bezier(0.075, 0.82, 0.165, 1);
+
+
+
+
+// color
+@radio-font-color: var(~'@{radio-prefix}-color-font', @color-text-primary);//单选项字体颜色
+@radio-color-theme: var(~'@{radio-prefix}-color-theme', @color-theme);//悬停/选中跟随主题色
+@radio-color-border: var(~'@{radio-prefix}-color-border', @color-border-strong);//边框色
+@radio-color-disabled: var(~'@{radio-prefix}-color-disabled', @color-disabled);//禁用色（全局）
+@radio-color-background-disabled: var(~'@{radio-prefix}-color-background-disabled', @color-background-contain-disabled);//禁用色（全局）
+@radio-color-border-disabled: var(~'@{radio-prefix}-color-border-disabled', @color-border-strong);//禁用边框色
+@radio-color-background: var(~'@{radio-prefix}-color-background', @color-white);// 基础颜色
+
+// font
+@radio-font-size: var(~'@{radio-prefix}-font-size', @font-size-small);//单选项字体大小
+
+
+
+
+//radius
+@radio-border-width:   var(~'@{radio-prefix}-radius-border-width',1px);
+
+
+
+// sizing
+@radio-circle-size:var(~'@{radio-prefix}-square-sizing-width-height',13px);//单选图标大小
+@radio-square-height:  var(~'@{radio-prefix}-square-sizing-height',32px);//单选框 高度
+
+
+// spacing
+@radio-margin-right:   var(~'@{radio-prefix}-spacing-margin-right',8px);
+@radio-square-padding-vertical: var(~'@{radio-prefix}-square-spacing-padding-vertical',0px); //内间距 纵向
+@radio-square-padding-horizontal: var(~'@{radio-prefix}-square-spacing-padding-horizontal',20px);//内间距 横向   /单选框 宽度
+@radio-padding-left: var(~'@{radio-prefix}-spacing-padding-left',6px);//图标与文字间距
+

package/lib/rate/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 */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
@@ -112,13 +121,13 @@
           justify-content: flex-start;
 }
 .kd-rate-size-large {
-  font-size: 16px;
+  font-size: var(--kd-c-rate-font-size-large, var(--kd-g-font-size-large, 16px));
 }
 .kd-rate-size-middle {
-  font-size: 14px;
+  font-size: var(--kd-c-rate-font-size-middle, var(--kd-g-font-size-middle, 14px));
 }
 .kd-rate-size-small {
-  font-size: 12px;
+  font-size: var(--kd-c-rate-font-size-small, var(--kd-g-font-size-small, 12px));
 }
 .kd-rate-item {
   display: -webkit-inline-box;
@@ -132,17 +141,17 @@
       -ms-flex-align: center;
           align-items: center;
   line-height: 100%;
-  margin-right: 10px;
+  margin-right: var(--kd-c-rate-spacing-margin-right, 10px);
 }
 .kd-rate-item .kd-rate-icon-view {
   position: relative;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  -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-rate-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: -webkit-transform var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: transform var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: transform var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s)), -webkit-transform var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-rate-item .kd-rate-icon-view:hover {
   -webkit-transform: scale(1.2);
@@ -162,24 +171,24 @@
   left: 0;
   width: 50%;
   overflow: hidden;
-  color: #d9d9d9;
+  color: var(--kd-c-rate-color-text-not-selected, #d9d9d9);
   opacity: 1;
   cursor: pointer;
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
+  -webkit-transition: color var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: color var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-rate-item .kd-rate-icon-first:hover {
-  color: #fdc200;
+  color: var(--kd-c-rate-color-text-selected, #fdc200);
 }
 .kd-rate-item .kd-rate-icon-second {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  color: #d9d9d9;
+  color: var(--kd-c-rate-color-text-not-selected, #d9d9d9);
   opacity: 1;
   cursor: pointer;
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
+  -webkit-transition: color var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: color var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-rate-item .kd-rate-icon-second-content {
   display: -webkit-inline-box;
@@ -187,10 +196,10 @@
   display: inline-flex;
 }
 .kd-rate-item .kd-rate-icon-second:hover {
-  color: #fdc200;
+  color: var(--kd-c-rate-color-text-selected, #fdc200);
 }
 .kd-rate-item .kd-rate-icon-selected {
-  color: #fdc200;
+  color: var(--kd-c-rate-color-text-selected, #fdc200);
   opacity: 1;
 }
 .kd-rate-item:last-child {

package/lib/rate/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './token.less';
 
 @rate-prefix-cls: ~'@{kd-prefix}-rate';
 @rate-icon-prefix-cls: ~'@{rate-prefix-cls}-icon';
@@ -28,7 +29,7 @@
     &-view {
       position: relative;
       display: inline-flex;
-      transition: transform @transition-duration;
+      transition: transform @rate-transition-duration;
     }
     &-view:hover {
       transform: scale(1.2);
@@ -46,7 +47,7 @@
       color: @rate-not-selected-color;
       opacity: 1;
       cursor: pointer;
-      transition: color @transition-duration;
+      transition: color @rate-transition-duration;
     }
     &-first:hover {
       color: @rate-selected-color;
@@ -56,7 +57,7 @@
       color: @rate-not-selected-color;
       opacity: 1;
       cursor: pointer;
-      transition: color @transition-duration;
+      transition: color @rate-transition-duration;
       &-content {
         display: inline-flex;
       }

package/lib/rate/style/token.less

@@ -0,0 +1,18 @@
+@import '../../style/themes/token.less';
+
+@rate-prefix: '--@{kd-prefix}-c-rate';
+
+// color
+@rate-selected-color: var(~'@{rate-prefix}-color-text-selected', #fdc200);
+@rate-not-selected-color: var(~'@{rate-prefix}-color-text-not-selected', #d9d9d9);
+
+// font
+@rate-small-font-size: var(~'@{rate-prefix}-font-size-small', @font-size-small);
+@rate-middle-font-size: var(~'@{rate-prefix}-font-size-middle', @font-size-middle);
+@rate-large-font-size: var(~'@{rate-prefix}-font-size-large', @font-size-large);
+
+// motion
+@rate-transition-duration: var(~'@{rate-prefix}-motion-duration', @duration-promptly);
+
+// spacing
+@rate-icon-margin: var(~'@{rate-prefix}-spacing-margin-right', 10px);

package/lib/search/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 */
 @-webkit-keyframes SlideDownIn {
   0% {
     -webkit-transform: scaleY(0.8);
@@ -177,16 +186,16 @@
   }
 }
 .kd-search {
-  border-bottom: 1px solid #d9d9d9;
+  border-bottom: var(--kd-c-search-sizing-border-width, 1px) solid var(--kd-c-search-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
 }
 .kd-search-size-small {
-  width: 200px;
+  width: var(--kd-c-search-sizing-width-small, 200px);
 }
 .kd-search-size-middle {
-  width: 260px;
+  width: var(--kd-c-search-sizing-width-middle, 260px);
 }
 .kd-search-size-large {
-  width: 320px;
+  width: var(--kd-c-search-sizing-width-large, 320px);
 }
 .kd-search-disabled {
   cursor: not-allowed;
@@ -195,45 +204,54 @@
   border: none !important;
 }
 .kd-search-border {
-  border: 1px solid #d9d9d9;
+  border: var(--kd-c-search-sizing-border-width, 1px) solid var(--kd-c-search-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
+}
+.kd-search-prefix,
+.kd-search-suffix {
+  font-size: var(--kd-c-search-icon-font-size, 16px);
+  color: var(--kd-c-search-icon-color, #B2B2B2);
 }
 .kd-search-focused,
 .kd-search:not(.kd-search-disabled):hover {
-  border-color: #276ff5;
+  border-color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-search-focused .kd-search-prefix,
 .kd-search:not(.kd-search-disabled):hover .kd-search-prefix {
-  color: #276ff5;
+  color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-search-focused .kd-search-suffix,
 .kd-search:not(.kd-search-disabled):hover .kd-search-suffix {
-  color: #276ff5;
+  color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-quick-search {
   display: inline-block;
-  max-width: 400px;
-  width: 200px;
-  height: 24px;
+  max-width: var(--kd-c-search-sizing-width-max, 400px);
+  width: var(--kd-c-search-sizing-width-default, 200px);
+  height: var(--kd-c-search-sizing-height-default, 24px);
   position: relative;
-  border-bottom: 1px solid #d9d9d9;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  border-bottom: var(--kd-c-search-sizing-border-width, 1px) solid var(--kd-c-search-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
+  -webkit-transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
 .kd-quick-search-borderless {
   border: none !important;
 }
 .kd-quick-search-border {
-  border: 1px solid #d9d9d9;
+  border: var(--kd-c-search-sizing-border-width, 1px) solid var(--kd-c-search-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
 }
 .kd-quick-search:hover:not(.kd-quick-search-disabled) {
-  border-color: #276ff5;
+  border-color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-quick-search:hover:not(.kd-quick-search-disabled) .kd-quick-search-prefix {
-  color: #276ff5;
+  color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-quick-search-focused:not(.kd-quick-search-disabled) {
-  max-width: 400px;
+  max-width: var(--kd-c-search-sizing-width-max, 400px);
   width: 100% !important;
+  border-color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
+}
+.kd-quick-search-focused:not(.kd-quick-search-disabled) .kd-quick-search-prefix {
+  color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-quick-search-disabled {
   cursor: not-allowed;
@@ -248,6 +266,8 @@
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   line-height: 1;
+  font-size: var(--kd-c-search-icon-font-size, 16px);
+  color: var(--kd-c-search-icon-color, #B2B2B2);
 }
 .kd-quick-search-selector {
   cursor: text;
@@ -279,7 +299,7 @@
   display: flex;
   position: relative;
   border-radius: 2px;
-  border: 1px solid #666;
+  border: 1px solid var(--kd-c-search-color-end, var(--kd-g-color-end, #666));
   margin: 2px 12px 2px 0;
   cursor: pointer;
   max-width: 100%;
@@ -293,16 +313,16 @@
   -ms-flex-negative: 0;
       flex-shrink: 0;
   max-width: 170px;
-  background: #666;
+  background: var(--kd-c-search-color-end, var(--kd-g-color-end, #666));
   line-height: 20px;
-  font-size: 12px;
+  font-size: var(--kd-c-search-dropdown-font-size, 12px);
   color: #fff;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .kd-quick-search-selection-overflow-item-label {
-  font-size: 12px;
+  font-size: var(--kd-c-search-dropdown-font-size, 12px);
   color: #212121;
   letter-spacing: 0;
   padding: 0 4px;
@@ -316,16 +336,16 @@
   height: 14px;
   width: 14px;
   line-height: 1;
-  font-size: 14px;
+  font-size: var(--kd-c-search-font-size-middle, var(--kd-g-font-size-middle, 14px));
   border-radius: 50%;
   position: absolute;
   right: -7px;
   top: -6px;
   display: none;
-  background: #fff;
+  background: var(--kd-c-search-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-quick-search-selection-overflow-item-del:hover {
-  color: #FB2323;
+  color: var(--kd-c-search-selected-tags-del-color-background-hover, #999999);
 }
 .kd-quick-search-selection-placeholder {
   position: absolute;
@@ -333,7 +353,8 @@
   left: 0;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
-  color: #bfbfbf;
+  color: var(--kd-c-search-selection-placeholder-color-text, #B2B2B2);
+  font-size: var(--kd-c-search-placeholder-font-size, 12px);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -358,41 +379,43 @@
   border: none;
   width: 100%;
   background: transparent;
+  font-size: var(--kd-c-search-input-font-size, 12px);
+  color: var(--kd-c-search-color-text-primary, var(--kd-g-color-text-primary, #212121));
 }
 .kd-quick-search-input::-webkit-input-placeholder {
   font-size: 12px;
-  color: #b2b2b2;
+  color: var(--kd-c-search-input-color-text, var(--kd-g-color-disabled, #b2b2b2));
   letter-spacing: 0;
 }
 .kd-quick-search-input::-moz-placeholder {
   font-size: 12px;
-  color: #b2b2b2;
+  color: var(--kd-c-search-input-color-text, var(--kd-g-color-disabled, #b2b2b2));
   letter-spacing: 0;
 }
 .kd-quick-search-input:-ms-input-placeholder {
   font-size: 12px;
-  color: #b2b2b2;
+  color: var(--kd-c-search-input-color-text, var(--kd-g-color-disabled, #b2b2b2));
   letter-spacing: 0;
 }
 .kd-quick-search-input::-ms-input-placeholder {
   font-size: 12px;
-  color: #b2b2b2;
+  color: var(--kd-c-search-input-color-text, var(--kd-g-color-disabled, #b2b2b2));
   letter-spacing: 0;
 }
 .kd-quick-search-input::placeholder {
   font-size: 12px;
-  color: #b2b2b2;
+  color: var(--kd-c-search-input-color-text, var(--kd-g-color-disabled, #b2b2b2));
   letter-spacing: 0;
 }
 .kd-quick-search-dropdown {
   padding: 8px 0;
   margin: 0;
   z-index: 1050;
-  font-size: 12px;
+  font-size: var(--kd-c-search-dropdown-font-size, 12px);
   -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-search-radius-border, var(--kd-g-radius-border, 2px));
+  background: var(--kd-c-search-color-background, var(--kd-g-color-background, #fff));
   overflow: auto;
 }
 .kd-quick-search-dropdown-scroll {
@@ -402,48 +425,46 @@
   padding: 5px 12px;
 }
 .kd-quick-search-dropdown-desc {
-  padding-left: 12px;
-  padding-right: 12px;
-  line-height: 32px;
+  padding-left: var(--kd-c-search-dropdown-option-spacing-padding-horizontal, 12px);
+  padding-right: var(--kd-c-search-dropdown-option-spacing-padding-horizontal, 12px);
+  line-height: var(--kd-c-search-dropdown-option-sizing-height, 32px);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #999999;
+  color: var(--kd-c-search-dropdown-desc-color-text, #999999);
+  font-size: var(--kd-c-search-dropdown-desc-font-size, 12px);
 }
 .kd-quick-search-option {
-  padding-left: 12px;
-  padding-right: 12px;
-  line-height: 32px;
+  padding-left: var(--kd-c-search-dropdown-option-spacing-padding-horizontal, 12px);
+  padding-right: var(--kd-c-search-dropdown-option-spacing-padding-horizontal, 12px);
+  line-height: var(--kd-c-search-dropdown-option-sizing-height, 32px);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   cursor: pointer;
+  color: var(--kd-c-search-color-text-primary, var(--kd-g-color-text-primary, #212121));
 }
 .kd-quick-search-option-tag {
-  color: #666666;
   margin-right: 12px;
 }
-.kd-quick-search-option-content {
-  color: #212121;
-}
 .kd-quick-search-option:hover:not(.kd-quick-search-option-selected) {
-  background: #f5f5f5;
+  background: var(--kd-c-search-color-background-contain-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
 }
 .kd-quick-search-option-selected:not(.kd-quick-search-option-disabled) {
-  background: #f2F9ff;
+  background: var(--kd-c-search-dropdown-tags-color-background-selected, #F2F6FF);
 }
 .kd-quick-search-option-selected:not(.kd-quick-search-option-disabled) .kd-quick-search-option-tag {
-  color: #276ff5;
+  color: var(--kd-c-search-color-hover, #5582F3);
 }
 .kd-quick-search-option-selected:not(.kd-quick-search-option-disabled) .kd-quick-search-option-content {
-  color: #276ff5;
+  color: var(--kd-c-search-color-hover, #5582F3);
 }
 .kd-quick-search-npl {
-  border-top: 1px solid #D8D8D8;
+  border-top: 1px solid var(--kd-c-search-npl-color-border, #D8D8D8);
 }
 .kd-quick-search-npl-loading {
-  height: 32px;
-  line-height: 32px;
+  height: var(--kd-c-search-dropdown-option-sizing-height, 32px);
+  line-height: var(--kd-c-search-dropdown-option-sizing-height, 32px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -451,7 +472,7 @@
       -ms-flex-align: center;
           align-items: center;
   overflow: hidden;
-  padding-left: 12px;
+  padding-left: var(--kd-c-search-dropdown-option-spacing-padding-horizontal, 12px);
 }
 .kd-quick-search-npl-loading-item {
   width: 4px;
@@ -462,7 +483,7 @@
           animation: animate_loading 1s infinite;
 }
 .kd-quick-search-npl-loading-item:nth-child(1) {
-  background-color: #2386ee;
+  background-color: var(--kd-c-search-dot-color-first, var(--kd-g-color-logo-1, #2386ee));
 }
 .kd-quick-search-npl-loading-item:nth-child(2) {
   background-color: #00ccfe;
@@ -474,9 +495,9 @@
   background-color: #a06eff;
 }
 .kd-search-panel {
-  width: 800px;
+  width: var(--kd-c-search-panel-sizing-width, 800px);
   border-radius: 4px;
-  background: #fff;
+  background: var(--kd-c-search-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-search-panel-wrapper {
   display: -webkit-box;
@@ -485,7 +506,7 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  height: 60px;
+  height: var(--kd-c-search-panel-sizing-height, 60px);
   border-radius: 4px;
 }
 .kd-search-panel-recommend {
@@ -500,8 +521,8 @@
 .kd-search-panel-recommend-icon {
   font-size: 18px;
   margin: 0 8px;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  -webkit-transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
 .kd-search-panel-type {
   width: 230px;
@@ -514,32 +535,32 @@
   padding-left: 24px;
 }
 .kd-search-panel-type-list:hover {
-  background: #eef3fe;
-  color: #597cfc;
+  background: var(--kd-c-search-panel-color-background-hover, #eef3fe);
+  color: var(--kd-c-search-panel-color-hover, #597cfc);
 }
 .kd-search-panel-type-list-active {
-  color: #597cfc;
+  color: var(--kd-c-search-panel-color-hover, #597cfc);
 }
 .kd-search-panel-dropDown {
   height: 400px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  border-top: 1px solid #E6E8ED;
+  border-top: 1px solid var(--kd-c-search-panel-color-border, #E6E8ED);
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  -webkit-transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
 .kd-search-panel-dropDown-result {
   width: 300px;
   height: 400px;
-  border-right: 1px solid #E6E8ED;
+  border-right: 1px solid var(--kd-c-search-panel-color-border, #E6E8ED);
 }
 .kd-search-panel-dropDown-result-wrapper {
   max-height: 330px;
   overflow: auto;
-  border-bottom: 1px solid #E6E8ED;
+  border-bottom: 1px solid var(--kd-c-search-panel-color-border, #E6E8ED);
 }
 .kd-search-panel-dropDown-result-list {
   display: -webkit-box;
@@ -557,10 +578,10 @@
           box-sizing: border-box;
 }
 .kd-search-panel-dropDown-result-list:hover {
-  background: #eef3fe;
+  background: var(--kd-c-search-panel-color-background-hover, #eef3fe);
 }
 .kd-search-panel-dropDown-result-list-active {
-  background: #eef3fe;
+  background: var(--kd-c-search-panel-color-background-hover, #eef3fe);
 }
 .kd-search-panel-dropDown-result-list-title {
   overflow: hidden;
@@ -572,10 +593,10 @@
   -webkit-line-clamp: 1;
 }
 .kd-search-panel-dropDown-result-list-type {
-  color: #999;
+  color: var(--kd-c-search-color-text-third, var(--kd-g-color-text-third, #999));
 }
 .kd-search-panel-dropDown-result-list-sub-title {
-  color: #999;
+  color: var(--kd-c-search-color-text-third, var(--kd-g-color-text-third, #999));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -622,13 +643,13 @@
 }
 .kd-search-panel-dropDown-summary-title {
   margin-bottom: 10px;
-  font-size: 14px;
-  color: #212121;
+  font-size: var(--kd-c-search-font-size-middle, var(--kd-g-font-size-middle, 14px));
+  color: var(--kd-c-search-color-text-primary, var(--kd-g-color-text-primary, #212121));
 }
 .kd-search-panel-dropDown-summary-list {
   margin-top: 4px;
-  color: #666;
-  font-size: 12px;
+  color: var(--kd-c-search-color-text-secondary, var(--kd-g-color-text-secondary, #666));
+  font-size: var(--kd-c-search-font-size-small, var(--kd-g-font-size-small, 12px));
   line-height: 20px;
 }
 .kd-search-panel-dropDown-search {
@@ -640,14 +661,14 @@
       -ms-flex-align: center;
           align-items: center;
   padding-left: 17px;
-  font-size: 14px;
+  font-size: var(--kd-c-search-font-size-middle, var(--kd-g-font-size-middle, 14px));
   cursor: pointer;
 }
 .kd-search-panel-dropDown-search:hover {
-  background: #eef3fe;
+  background: var(--kd-c-search-panel-color-background-hover, #eef3fe);
 }
 .kd-search-panel-dropDown-search-active {
-  background: #eef3fe;
+  background: var(--kd-c-search-panel-color-background-hover, #eef3fe);
 }
 .kd-search-panel-dropDown-search-value {
   overflow: hidden;
@@ -666,7 +687,7 @@
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: #666;
+  background: var(--kd-c-search-color-end, var(--kd-g-color-end, #666));
   position: relative;
 }
 .kd-search-panel .kd-input-clear-icon .kdicon {
@@ -689,14 +710,14 @@
   cursor: pointer;
 }
 .kd-search-panel-tooltip-content:hover {
-  background: #eef3fe;
+  background: var(--kd-c-search-panel-color-background-hover, #eef3fe);
 }
 .kd-quick-search-dropdown-wrapper.topLeft.hidden,
 .kd-quick-search-dropdown-wrapper.bottomLeft.hidden {
   opacity: 0;
   visibility: hidden;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  -webkit-transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
 .kd-quick-search-dropdown-wrapper.bottomLeft-active {
   padding: 10px 0;