@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/es/config-provider/compDefaultProps.js

@@ -102,12 +102,11 @@ var compDefaultProps = {
     destroyOnClose: false,
     forceRender: false,
     getContainer: document.body,
-    height: 220,
     keyboard: true,
     mask: true,
     maskClosable: true,
     placement: 'right',
-    width: 365,
+    width: 320,
     zIndex: 1050
   },
   Empty: {},
@@ -406,6 +405,10 @@ var compDefaultProps = {
     size: 'middle',
     shape: 'circle',
     gap: 4
+  },
+  Link: {
+    size: 'middle',
+    underscore: false
   }
 };
 export default compDefaultProps;

package/es/date-picker/style/index.css

@@ -92,78 +92,87 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
 .kd-date-picker {
-  width: 230px;
+  width: var(--kd-c-date-picker-sizing-width, 230px);
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
+  border: 1px solid var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  border-radius: var(--kd-c-date-picker-input-radius-border, var(--kd-g-radius-border, 2px));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  background-color: #fff;
+  background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
 }
 .kd-date-picker-small {
-  height: 20px;
-  line-height: 10px;
-  font-size: 12px;
-  padding: 4px 9px;
+  height: var(--kd-c-date-picker-small-sizing-height, 20px);
+  line-height: calc(var(--kd-c-date-picker-small-sizing-height, 20px) - (var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) * 2) - 2);
+  font-size: var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px));
+  padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) var(--kd-c-date-picker-small-spacing-padding-horizontal, 9px);
 }
 .kd-date-picker-small input {
-  font-size: 12px;
+  font-size: var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px));
 }
 .kd-date-picker-small .kd-date-picker-clear {
-  right: 13px;
+  right: calc(var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px)) + 1px);
 }
 .kd-date-picker-small.kd-date-picker-range .kd-date-picker-clear {
-  right: 21px;
+  right: calc(var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px)) + 9px);
 }
 .kd-date-picker-large {
-  height: 36px;
-  line-height: 26px;
-  font-size: 16px;
-  padding: 4px 9px;
+  height: var(--kd-c-date-picker-large-sizing-height, 36px);
+  line-height: calc(var(--kd-c-date-picker-large-sizing-height, 36px) - (var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) * 2) - 2);
+  font-size: var(--kd-c-date-picker-large-font-size, var(--kd-g-font-size-large, 16px));
+  padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) var(--kd-c-date-picker-small-spacing-padding-horizontal, 9px);
 }
 .kd-date-picker-large input {
-  font-size: 16px;
+  font-size: var(--kd-c-date-picker-large-font-size, var(--kd-g-font-size-large, 16px));
 }
 .kd-date-picker-large .kd-date-picker-clear {
-  right: 17px;
+  right: calc(var(--kd-c-date-picker-large-font-size, var(--kd-g-font-size-large, 16px)) + 1px);
 }
 .kd-date-picker-large.kd-date-picker-range .kd-date-picker-clear {
-  right: 25px;
+  right: calc(var(--kd-c-date-picker-large-font-size, var(--kd-g-font-size-large, 16px)) + 9px);
 }
 .kd-date-picker-middle {
-  height: 30px;
-  line-height: 20px;
-  font-size: 14px;
-  padding: 4px 9px;
+  height: var(--kd-c-date-picker-middle-sizing-height, 30px);
+  line-height: calc(var(--kd-c-date-picker-middle-sizing-height, 30px) - (var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) * 2) - 2);
+  font-size: var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px));
+  padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) var(--kd-c-date-picker-small-spacing-padding-horizontal, 9px);
 }
 .kd-date-picker-middle input {
-  font-size: 14px;
+  font-size: var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px));
 }
 .kd-date-picker-middle .kd-date-picker-clear {
-  right: 15px;
+  right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 1px);
 }
 .kd-date-picker-middle.kd-date-picker-range .kd-date-picker-clear {
-  right: 23px;
+  right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 9px);
 }
 .kd-date-picker-borderless {
   border: 0;
 }
 .kd-date-picker-underline {
   border: none;
-  border-bottom: 1px solid #999;
+  border-bottom: 1px solid var(--kd-c-date-picker-input-underline-color, #999);
   border-radius: 0;
   padding-left: 0;
 }
 .kd-date-picker-disabled {
-  background-color: #f5f5f5 !important;
-  border-color: #d9d9d9 !important;
-  color: #b2b2b2 !important;
+  background-color: var(--kd-c-date-picker-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
+  border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9)) !important;
+  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
   cursor: not-allowed !important;
 }
 .kd-date-picker-disabled input {
@@ -171,20 +180,20 @@
 }
 .kd-date-picker-underline.kd-date-picker-disabled,
 .kd-date-picker-borderless.kd-date-picker-disabled {
-  background-color: #fff;
-  border-color: #d9d9d9;
+  background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
+  border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-date-picker-focused {
   -webkit-box-shadow: none;
           box-shadow: none;
   outline: none;
-  border-color: #5582f3;
+  border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
 }
 .kd-date-picker:hover {
-  border-color: #5582f3;
+  border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
 }
 .kd-date-picker:not(.kd-date-picker-disabled) input:focus {
-  color: #212121;
+  color: var(--kd-c-date-picker-input-color-focused, var(--kd-g-color-text-primary, #212121));
 }
 .kd-date-picker-input {
   position: relative;
@@ -202,7 +211,7 @@
 .kd-date-picker-input input {
   width: 100%;
   min-width: 0;
-  color: #666;
+  color: var(--kd-c-date-picker-input-color, var(--kd-g-color-text-secondary, #666));
   line-height: inherit;
   -webkit-box-flex: 1;
       -ms-flex: auto;
@@ -217,25 +226,25 @@
   white-space: nowrap;
 }
 .kd-date-picker-input input::-webkit-input-placeholder {
-  color: #666;
+  color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666));
 }
 .kd-date-picker-input input::-moz-input-placeholder {
-  color: #666;
+  color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666));
 }
 .kd-date-picker-input input::-ms-input-placeholder {
-  color: #666;
+  color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666));
 }
 .kd-date-picker-input input:focus {
   -webkit-box-shadow: none;
           box-shadow: none;
   outline: none;
-  border-color: #5582f3;
+  border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
 }
 .kd-date-picker-input input[disabled] {
   background: transparent;
 }
 .kd-date-picker-input-placeholder > input {
-  color: #666;
+  color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666));
 }
 .kd-date-picker-range {
   display: -webkit-inline-box;
@@ -248,7 +257,7 @@
   padding: 0 8px;
 }
 .kd-date-picker-range .kd-date-picker-clear {
-  right: 9px;
+  right: var(--kd-c-date-picker-small-spacing-padding-horizontal, 9px);
 }
 .kd-date-picker-range .kd-date-picker-active-bar {
   bottom: -1px;
@@ -266,8 +275,8 @@
 .kd-date-picker-suffix {
   -ms-flex-item-align: center;
       align-self: center;
-  margin-left: 10px;
-  color: #b2b2b2;
+  margin-left: var(--kd-c-date-picker-suffix-spacing-margin-left, 10px);
+  color: var(--kd-c-date-picker-icon-color, var(--kd-g-color-disabled, #b2b2b2));
   line-height: 1;
   pointer-events: none;
 }
@@ -280,9 +289,9 @@
 .kd-date-picker-clear {
   position: absolute;
   top: 50%;
-  color: #b2b2b2;
+  color: var(--kd-c-date-picker-icon-color, var(--kd-g-color-disabled, #b2b2b2));
   line-height: 1;
-  background: #fff;
+  background: var(--kd-c-date-picker-clear-color-background, var(--kd-g-color-background, #fff));
   -webkit-transform: translateY(-48%);
           transform: translateY(-48%);
   cursor: pointer;
@@ -292,19 +301,19 @@
   vertical-align: top;
 }
 .kd-date-picker-clear:hover {
-  color: #87adff;
+  color: var(--kd-c-date-picker-clear-color-background-hover, var(--kd-g-color-theme-5, #87adff));
 }
 .kd-date-picker-focused .kd-date-picker-suffix {
-  color: #5582f3;
+  color: var(--kd-c-date-picker-clear-color-background-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-date-picker-panel {
   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
           box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-  border-radius: 2px;
+  border-radius: var(--kd-c-date-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
   background-color: #fff;
   text-align: center;
   z-index: 999;
-  font-size: 14px;
+  font-size: var(--kd-c-date-picker-panel-font-size, var(--kd-g-font-size-middle, 14px));
 }
 .kd-date-picker-panel-range {
   display: -webkit-box;
@@ -319,7 +328,7 @@
 }
 .kd-date-picker-panel .kd-date-picker-warpper {
   font-size: 12px;
-  background: #fff;
+  background: var(--kd-c-date-picker-wrapper-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month,
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year,
@@ -356,7 +365,7 @@
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-text {
   line-height: 24px;
   display: inline-block;
-  border-radius: 2px;
+  border-radius: var(--kd-c-date-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper .kd-date-picker-year-item {
   overflow: hidden;
@@ -382,7 +391,7 @@
   width: 6px;
   height: 6px;
   border-radius: 6px;
-  background: #5582f3;
+  background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
   content: '';
   bottom: 0;
   left: calc(50% - 3px);
@@ -395,7 +404,7 @@
   background: #f5f5f5;
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper .kd-date-picker-year-item .kd-date-picker-year-text-selected {
-  background: #5582f3;
+  background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
   color: #fff;
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year .kd-date-picker-range-view::before,
@@ -427,7 +436,7 @@
   width: 6px;
   height: 6px;
   border-radius: 6px;
-  background: #5582f3;
+  background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
   content: '';
   bottom: 0;
   left: calc(50% - 3px);
@@ -440,7 +449,7 @@
   background: #f5f5f5;
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-warpper .kd-date-picker-month-item .kd-date-picker-month-text-selected {
-  background: #5582f3;
+  background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
   color: #fff;
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month .kd-date-picker-range-view::before,
@@ -477,7 +486,7 @@
   width: 6px;
   height: 6px;
   border-radius: 6px;
-  background: #5582f3;
+  background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
   content: '';
   bottom: 0;
   left: calc(50% - 3px);
@@ -490,7 +499,7 @@
   background: #f5f5f5;
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-warpper .kd-date-picker-quarter-item .kd-date-picker-quarter-text-selected {
-  background: #5582f3;
+  background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
   color: #fff;
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar {
@@ -577,7 +586,7 @@
   background: #f5f5f5;
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line.kd-date-picker-calendar-week-selected .kd-date-picker-calendar-week-text::before {
-  background: #5582f3;
+  background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line.kd-date-picker-calendar-week-selected:hover .kd-date-picker-calendar-item:not(.kd-date-picker-calendar-item-disabled) .kd-date-picker-calendar-week-text::before {
   background: #104ccc;
@@ -622,7 +631,7 @@
   text-align: center;
   line-height: 32px;
   display: inline-block;
-  border-radius: 2px;
+  border-radius: var(--kd-c-date-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
   color: #b2b2b2;
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-text-today,
@@ -635,7 +644,7 @@
   width: 6px;
   height: 6px;
   border-radius: 6px;
-  background: #5582f3;
+  background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
   content: '';
   bottom: 0;
   left: calc(50% - 3px);
@@ -652,7 +661,7 @@
   color: #212121;
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-current .kd-date-picker-calendar-text-selected {
-  background: #5582f3;
+  background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
   color: #fff;
 }
 .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-weeknumber,
@@ -708,8 +717,8 @@
 }
 .kd-date-picker-panel .kd-date-picker-time-header,
 .kd-date-picker-panel .kd-date-picker-header {
-  height: 36px;
-  line-height: 36px;
+  height: var(--kd-c-date-picker-panel-header-sizing-height, 36px);
+  line-height: var(--kd-c-date-picker-panel-header-sizing-height, 36px);
   background: #fafafa;
   color: #212121;
   padding: 7px;
@@ -806,7 +815,7 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   text-align: right;
-  background: #fff;
+  background: var(--kd-c-date-picker-footer-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-date-picker-panel .kd-date-picker-footer::after {
   content: '';
@@ -820,9 +829,9 @@
 .kd-date-picker-panel .kd-date-picker-footer .kd-date-picker-ok-btn {
   display: inline-block;
   padding: 5px 12px;
-  background: #5582f3;
+  background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
   color: #fff;
-  border-radius: 2px;
+  border-radius: var(--kd-c-date-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
   line-height: initial;
   vertical-align: middle;
   cursor: pointer;
@@ -857,7 +866,7 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  background: #f2f2f2;
+  background: var(--kd-c-date-picker-container-color-background, var(--kd-g-color-background-2, #f2f2f2));
 }
 .kd-date-picker-container-date {
   display: -webkit-box;
@@ -866,15 +875,15 @@
 }
 .kd-date-picker-container .kd-date-picker-ranges {
   width: 160px;
-  color: #212121;
+  color: var(--kd-c-date-picker-container-color, var(--kd-g-color-text-primary, #212121));
   padding: 0 12px;
   text-align: left;
   overflow: auto;
   max-height: 276px;
 }
 .kd-date-picker-container .kd-date-picker-ranges-item {
-  height: 36px;
-  line-height: 36px;
-  font-size: 12px;
-  border-bottom: 0.5px solid #e5e5e5;
+  height: var(--kd-c-date-picker-panel-header-sizing-height, 36px);
+  line-height: var(--kd-c-date-picker-panel-header-sizing-height, 36px);
+  font-size: var(--kd-c-date-picker-container-font-size, var(--kd-g-font-size-small, 12px));
+  border-bottom: 0.5px solid var(--kd-c-date-picker-container-color-border, var(--kd-g-color-border-weak, #e5e5e5));
 }

package/es/date-picker/style/index.less

@@ -1,7 +1,7 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import './mixin.less';
-// @import './variables.less';
+
 
 @datePicker-prefix-cls: ~'@{kd-prefix}-date-picker';
 // @rangePicker-prefix-cls: ~'@{kd-prefix}-rangePicker';
@@ -23,11 +23,11 @@
     }
 
     .@{datePicker-prefix-cls}-clear {
-      right: @date-small-font-size + @date-clear-offset
+      right: calc(@date-small-font-size + 1px);
     }
 
     &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: @date-small-font-size + @date-range-clear-offset
+      right: calc(@date-small-font-size + 9px);
     }
   }
 
@@ -39,11 +39,11 @@
     }
 
     .@{datePicker-prefix-cls}-clear {
-      right: @date-large-font-size + @date-clear-offset
+      right:calc(@date-large-font-size + 1px);
     }
 
     &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: @date-large-font-size + @date-range-clear-offset
+      right: calc(@date-large-font-size + 9px);
     }
   }
 
@@ -55,11 +55,11 @@
     }
 
     .@{datePicker-prefix-cls}-clear {
-      right: @date-middle-font-size + @date-clear-offset
+      right: calc(@date-middle-font-size + 1px);
     }
 
     &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: @date-middle-font-size + @date-range-clear-offset
+      right: calc(@date-middle-font-size + 9px);
     }
   }
 
@@ -93,7 +93,7 @@
 
     &-placeholder {
       > input {
-        color: @date-placeholder-color;
+        color: @date-input-color-placeholder;
       }
     }
   }
@@ -130,8 +130,8 @@
 
   &-suffix {
     align-self: center;
-    margin-left: @date-padding-suffix;
-    color: @disabled-color;
+    margin-left: @date-suffix-spacing-margin-left;
+    color: @date-icon-color;
     line-height: 1;
     pointer-events: none;
 
@@ -149,9 +149,9 @@
   &-clear {
     position: absolute;
     top: 50%;
-    color: @disabled-color;
+    color: @date-icon-color;
     line-height: 1;
-    background: @bg;
+    background: @date-clear-background-color;
     transform: translateY(-48%);
     cursor: pointer;
     opacity: 0;
@@ -161,24 +161,24 @@
     }
 
     &:hover {
-      color: @theme-color-hover;
+      color: @date-clear-background-color-hover;
     }
   }
 
   &-focused {
     .@{datePicker-prefix-cls}-suffix {
-      color: @theme-color;
+      color: @date-clear-background-color-focused;
     }
   }
 }
 
 .@{datePicker-prefix-cls-panel} {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-  border-radius: @radius-size;
+  border-radius: @date-panel-border-radius;
   background-color: #fff;
   text-align: center;
   z-index: 999;
-  font-size: @font-size;
+  font-size: @date-panel-font-size;
 
   &-range {
     display: flex;
@@ -192,7 +192,7 @@
 
   .@{datePicker-prefix-cls}-warpper {
     font-size: 12px;
-    background: @bg;
+    background: @date-wrapper-color-background;
 
     .@{datePicker-prefix-cls}-month,
     .@{datePicker-prefix-cls}-year,
@@ -225,7 +225,7 @@
     .@{datePicker-prefix-cls}-quarter-text {
       line-height: 24px;
       display: inline-block;
-      border-radius: @radius-size;
+      border-radius: @date-panel-border-radius;
     }
 
     .@{datePicker-prefix-cls}-year {
@@ -256,7 +256,7 @@
           }
 
           .@{datePicker-prefix-cls}-year-text-today {
-            .today-after(@theme-color);
+            .today-after(@date-color-background-checked);
           }
 
           &-disabled {
@@ -269,7 +269,7 @@
           }
 
           .@{datePicker-prefix-cls}-year-text-selected {
-            background: @theme-color;
+            background: @date-color-background-checked;
             color: #fff;
           }
         }
@@ -312,7 +312,7 @@
           }
 
           .@{datePicker-prefix-cls}-month-text-today {
-            .today-after(@theme-color);
+            .today-after(@date-color-background-checked);
           }
 
           &-disabled {
@@ -325,7 +325,7 @@
           }
 
           .@{datePicker-prefix-cls}-month-text-selected {
-            background: @theme-color;
+            background: @date-color-background-checked;
             color: #fff;
           }
         }
@@ -372,7 +372,7 @@
           }
 
           .@{datePicker-prefix-cls}-quarter-text-today {
-            .today-after(@theme-color);
+            .today-after(@date-color-background-checked);
           }
 
           &-disabled {
@@ -385,7 +385,7 @@
           }
 
           .@{datePicker-prefix-cls}-quarter-text-selected {
-            background: @theme-color;
+            background: @date-color-background-checked;
             color: #fff;
           }
         }
@@ -483,7 +483,7 @@
 
         &.@{datePicker-prefix-cls}-calendar-week-selected {
           .@{datePicker-prefix-cls}-calendar-week-text::before {
-            background: @theme-color;
+            background: @date-color-background-checked;
           }
 
           &:hover {
@@ -539,11 +539,11 @@
         text-align: center;
         line-height: 32px;
         display: inline-block;
-        border-radius: @radius-size;
+        border-radius: @date-panel-border-radius;
         color: #b2b2b2;
 
         &-today {
-          .today-after(@theme-color);
+          .today-after(@date-color-background-checked);
         }
       }
 
@@ -563,7 +563,7 @@
         }
 
         .@{datePicker-prefix-cls}-calendar-text-selected {
-          background: @theme-color;
+          background: @date-color-background-checked;
           color: #fff;
         }
       }
@@ -732,7 +732,7 @@
     font-size: 12px;
     box-sizing: border-box;
     text-align: right;
-    background: @bg;
+    background: @date-footer-color-background;
 
     &::after {
       content: '';
@@ -748,9 +748,9 @@
     .@{datePicker-prefix-cls}-ok-btn {
       display: inline-block;
       padding: 5px 12px;
-      background: @theme-color;
+      background: @date-color-background-checked;
       color: #fff;
-      border-radius: @radius-size;
+      border-radius: @date-panel-border-radius;
       line-height: initial;
       vertical-align: middle;
       cursor: pointer;
@@ -796,15 +796,15 @@
 
 .@{datePicker-prefix-cls}-container {
   display: flex;
-  background: @bg2;
+  background: @date-container-color-background;
 
   &-date{
     display: flex;
   }
 
   .@{datePicker-prefix-cls}-ranges {
-    width: @date-ranges-width;
-    color: @primary-text-color;
+    width: 160px;
+    color: @date-container-color;
     padding: 0 12px;
     text-align: left;
     overflow: auto;
@@ -813,8 +813,8 @@
     &-item {
       height: @date-panel-header-height;
       line-height: @date-panel-header-height;
-      font-size: @small-font-size;
-      border-bottom: .5px solid @weak-border-color;
+      font-size: @date-container-font-size;
+      border-bottom: .5px solid @date-container-color-border;
     }
   }
 }