vxe-table 4.4.1 → 4.4.2-beta.1

package/es/vxe-input/style.css

@@ -26,26 +26,26 @@
 .vxe-input--inner {
   width: 100%;
   height: 100%;
-  border-radius: 4px;
+  border-radius: var(--vxe-border-radius);
   outline: 0;
   margin: 0;
   font-size: inherit;
   font-family: inherit;
   line-height: inherit;
   padding: 0 0.6em;
-  color: #606266;
-  border: 1px solid #dcdfe6;
-  background-color: #fff;
+  color: var(--vxe-font-color);
+  border: 1px solid var(--vxe-input-border-color);
+  background-color: var(--vxe-input-background-color);
   box-shadow: none;
 }
 .vxe-input--inner::-moz-placeholder {
-  color: #C0C4CC;
+  color: var(--vxe-input-placeholder-color);
 }
 .vxe-input--inner::placeholder {
-  color: #C0C4CC;
+  color: var(--vxe-input-placeholder-color);
 }
 .vxe-input--inner::-webkit-autofill {
-  background-color: #fff;
+  background-color: var(--vxe-input-background-color);
 }
 .vxe-input--inner[type=number] {
   -webkit-appearance: none;
@@ -58,8 +58,8 @@
 }
 .vxe-input--inner[disabled] {
   cursor: not-allowed;
-  color: #BFBFBF;
-  background-color: #f3f3f3;
+  color: var(--vxe-disabled-color);
+  background-color: var(--vxe-input-disabled-background-color);
 }
 
 .vxe-input {
@@ -81,7 +81,7 @@
   cursor: pointer;
 }
 .vxe-input:not(.is--disabled).is--active .vxe-input--inner {
-  border: 1px solid #409eff;
+  border: 1px solid var(--vxe-primary-color);
 }
 .vxe-input .vxe-input--prefix,
 .vxe-input .vxe-input--suffix,
@@ -96,7 +96,7 @@
           user-select: none;
   align-items: center;
   justify-content: center;
-  color: #c0c4cc;
+  color: var(--vxe-table-column-icon-border-color);
 }
 
 .vxe-input .vxe-input--prefix {
@@ -141,31 +141,31 @@
   display: inline;
 }
 .vxe-input:not(.is--disabled) .vxe-input--suffix:hover .vxe-input--clear-icon {
-  color: #606266;
+  color: var(--vxe-font-color);
 }
 .vxe-input:not(.is--disabled) .vxe-input--suffix:active .vxe-input--clear-icon {
-  color: #409eff;
+  color: var(--vxe-primary-color);
 }
 .vxe-input:not(.is--disabled) .vxe-input--extra-suffix:hover .vxe-input--search-suffix,
 .vxe-input:not(.is--disabled) .vxe-input--extra-suffix:hover .vxe-input--password-suffix {
-  color: #606266;
+  color: var(--vxe-font-color);
 }
 .vxe-input:not(.is--disabled) .vxe-input--extra-suffix:active .vxe-input--search-suffix,
 .vxe-input:not(.is--disabled) .vxe-input--extra-suffix:active .vxe-input--password-suffix {
-  color: #409eff;
+  color: var(--vxe-primary-color);
 }
 .vxe-input:not(.is--disabled) .vxe-input--number-prev:hover,
 .vxe-input:not(.is--disabled) .vxe-input--number-next:hover {
-  color: #606266;
+  color: var(--vxe-font-color);
 }
 .vxe-input:not(.is--disabled) .vxe-input--number-prev:active,
 .vxe-input:not(.is--disabled) .vxe-input--number-next:active {
-  color: #409eff;
+  color: var(--vxe-primary-color);
 }
 .vxe-input:not(.is--disabled) .vxe-input--number-prev.is--disabled,
 .vxe-input:not(.is--disabled) .vxe-input--number-next.is--disabled {
   cursor: no-drop;
-  color: #e4e7ed;
+  color: var(--vxe-input-number-disabled-color);
 }
 
 .vxe-input .vxe-input--password-suffix,
@@ -224,8 +224,8 @@
   position: absolute;
   left: 0;
   padding: 4px 0;
-  color: #606266;
-  font-size: 14px;
+  color: var(--vxe-font-color);
+  font-size: var(--vxe-font-size);
   text-align: left;
 }
 .vxe-input--panel:not(.is--transfer) {
@@ -253,10 +253,10 @@
 
 .vxe-input--panel-wrapper,
 .vxe-input--panel-layout-wrapper {
-  background-color: #fff;
-  border: 1px solid #DADCE0;
+  background-color: var(--vxe-input-panel-background-color);
+  border: 1px solid var(--vxe-table-popup-border-color);
   box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
+  border-radius: var(--vxe-border-radius);
 }
 
 .vxe-input--panel-wrapper {
@@ -277,7 +277,7 @@
 .vxe-input--panel.type--datetime .vxe-input--panel-right-wrapper {
   display: flex;
   flex-direction: column;
-  border-left: 1px solid #dcdfe6;
+  border-left: 1px solid var(--vxe-input-border-color);
 }
 .vxe-input--panel.type--date .vxe-input--date-picker-body th, .vxe-input--panel.type--datetime .vxe-input--date-picker-body th {
   width: 14.28571%;
@@ -298,8 +298,8 @@
 .vxe-input--time-picker-title {
   display: inline-block;
   text-align: center;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
+  border: 1px solid var(--vxe-input-border-color);
+  border-radius: var(--vxe-border-radius);
 }
 
 .vxe-input--time-picker-confirm {
@@ -311,12 +311,12 @@
 .vxe-input--time-picker-confirm,
 .vxe-input--date-picker-confirm {
   outline: 0;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
+  border: 1px solid var(--vxe-input-border-color);
+  border-radius: var(--vxe-border-radius);
   cursor: pointer;
-  color: #fff;
-  border-color: #409eff;
-  background-color: #409eff;
+  color: var(--vxe-input-date-time-confirm-button-color);
+  border-color: var(--vxe-primary-color);
+  background-color: var(--vxe-primary-color);
 }
 .vxe-input--time-picker-confirm:hover,
 .vxe-input--date-picker-confirm:hover {
@@ -366,11 +366,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #fff;
+  background-color: var(--vxe-button-default-background-color);
 }
 
 .vxe-input--date-picker-btn.is--disabled {
-  color: #BFBFBF;
+  color: var(--vxe-disabled-color);
   cursor: no-drop;
 }
 .vxe-input--date-picker-btn:not(.is--disabled) {
@@ -384,8 +384,8 @@
 }
 
 .vxe-input--date-picker-body {
-  border-radius: 4px;
-  border: 1px solid #DADCE0;
+  border-radius: var(--vxe-border-radius);
+  border: 1px solid var(--vxe-table-popup-border-color);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -403,61 +403,61 @@
   font-weight: normal;
 }
 .vxe-input--date-picker-body th {
-  box-shadow: inset 0 -1px 0 0 #DADCE0;
+  box-shadow: inset 0 -1px 0 0 var(--vxe-table-popup-border-color);
 }
 .vxe-input--date-picker-body td.is--prev, .vxe-input--date-picker-body td.is--next {
-  color: #BFBFBF;
+  color: var(--vxe-disabled-color);
 }
 .vxe-input--date-picker-body td.is--prev .vxe-input--date-label,
 .vxe-input--date-picker-body td.is--prev .vxe-input--date-festival, .vxe-input--date-picker-body td.is--next .vxe-input--date-label,
 .vxe-input--date-picker-body td.is--next .vxe-input--date-festival {
-  color: #BFBFBF;
+  color: var(--vxe-disabled-color);
 }
 .vxe-input--date-picker-body td.is--now {
-  box-shadow: inset 0 0 0 1px #DADCE0;
+  box-shadow: inset 0 0 0 1px var(--vxe-table-popup-border-color);
 }
 .vxe-input--date-picker-body td.is--now:not(.is--selected).is--current {
-  color: #409eff;
+  color: var(--vxe-primary-color);
 }
 .vxe-input--date-picker-body td.is--now:not(.is--selected).is--current .vxe-input--date-label,
 .vxe-input--date-picker-body td.is--now:not(.is--selected).is--current .vxe-input--date-festival {
-  color: #409eff;
+  color: var(--vxe-primary-color);
 }
 .vxe-input--date-picker-body td.is--hover {
-  background-color: #f2f6fc;
+  background-color: var(--vxe-input-date-picker-hover-background-color);
 }
 .vxe-input--date-picker-body td.is--selected {
-  color: #fff;
-  background-color: #409eff;
+  color: var(--vxe-input-date-picker-selected-color);
+  background-color: var(--vxe-primary-color);
 }
 .vxe-input--date-picker-body td.is--selected.is--prev, .vxe-input--date-picker-body td.is--selected.is--next {
   background-color: #73b8ff;
 }
 .vxe-input--date-picker-body td.is--selected .vxe-input--date-label,
 .vxe-input--date-picker-body td.is--selected .vxe-input--date-festival {
-  color: #fff;
+  color: var(--vxe-input-date-picker-festival-selected-color);
 }
 .vxe-input--date-picker-body td.is--selected .vxe-input--date-label.is-notice:before {
-  background-color: #fff;
+  background-color: var(--vxe-input-date-picker-notice-selected-background-color);
 }
 .vxe-input--date-picker-body td:not(.is--disabled) {
   cursor: pointer;
 }
 .vxe-input--date-picker-body td.is--disabled {
   cursor: no-drop;
-  color: #dcdfe6;
-  background-color: #f3f3f3;
+  color: var(--vxe-input-disabled-color);
+  background-color: var(--vxe-input-disabled-background-color);
 }
 .vxe-input--date-picker-body td.is--disabled .vxe-input--date-label,
 .vxe-input--date-picker-body td.is--disabled .vxe-input--date-festival {
-  color: #dcdfe6;
+  color: var(--vxe-input-disabled-color);
 }
 
 .vxe-input--date-week-view th:first-child {
-  box-shadow: inset -1px -1px 0 0 #DADCE0;
+  box-shadow: inset -1px -1px 0 0 var(--vxe-table-popup-border-color);
 }
 .vxe-input--date-week-view td:first-child {
-  box-shadow: inset -1px 0 0 0 #DADCE0;
+  box-shadow: inset -1px 0 0 0 var(--vxe-table-popup-border-color);
 }
 
 .vxe-input--date-label,
@@ -478,7 +478,7 @@
   top: 0.1em;
   transform: translateX(-50%);
   border-radius: 100%;
-  background-color: #FF0000;
+  background-color: var(--vxe-input-date-notice-background-color);
 }
 
 .vxe-input--date-label--extra {
@@ -488,20 +488,20 @@
   font-size: 12px;
   line-height: 12px;
   transform: scale(0.7);
-  color: #67c23a;
+  color: var(--vxe-input-date-extra-color);
 }
 .vxe-input--date-label--extra.is-important {
-  color: #fd2222;
+  color: var(--vxe-input-date-extra-important-color);
 }
 
 .vxe-input--date-festival {
-  color: #999999;
+  color: var(--vxe-input-date-festival-color);
   height: 14px;
   line-height: 1;
   overflow: hidden;
 }
 .vxe-input--date-festival.is-important {
-  color: #409eff;
+  color: var(--vxe-input-date-festival-important-color);
 }
 
 .vxe-input--date-festival--label {
@@ -549,9 +549,9 @@
   position: relative;
   display: flex;
   flex-direction: row;
-  border: 1px solid #DADCE0;
+  border: 1px solid var(--vxe-table-popup-border-color);
   flex-grow: 1;
-  border-radius: 4px;
+  border-radius: var(--vxe-border-radius);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -573,24 +573,24 @@
   display: block;
 }
 .vxe-input--time-picker-body > ul > li:hover {
-  background-color: #f2f6fc;
+  background-color: var(--vxe-input-date-picker-hover-background-color);
   cursor: pointer;
 }
 .vxe-input--time-picker-body > ul > li.is--selected {
   font-weight: 700;
-  color: #409eff;
+  color: var(--vxe-primary-color);
 }
 .vxe-input--time-picker-body .vxe-input--time-picker-minute-list {
-  border-left: 1px solid #DADCE0;
+  border-left: 1px solid var(--vxe-table-popup-border-color);
 }
 .vxe-input--time-picker-body .vxe-input--time-picker-second-list {
-  border-left: 1px solid #DADCE0;
+  border-left: 1px solid var(--vxe-table-popup-border-color);
 }
 
 .vxe-input {
-  font-size: 14px;
-  height: 34px;
-  line-height: 34px;
+  font-size: var(--vxe-font-size);
+  height: var(--vxe-input-height-default);
+  line-height: var(--vxe-input-height-default);
 }
 .vxe-input .vxe-input--inner[type=date]::-webkit-inner-spin-button, .vxe-input .vxe-input--inner[type=month]::-webkit-inner-spin-button, .vxe-input .vxe-input--inner[type=week]::-webkit-inner-spin-button {
   margin-top: 6px;
@@ -599,25 +599,25 @@
   height: 24px;
 }
 .vxe-input.size--medium {
-  font-size: 14px;
-  height: 32px;
-  line-height: 32px;
+  font-size: var(--vxe-font-size-medium);
+  height: var(--vxe-input-height-medium);
+  line-height: var(--vxe-input-height-medium);
 }
 .vxe-input.size--medium .vxe-input--inner[type=date]::-webkit-inner-spin-button, .vxe-input.size--medium .vxe-input--inner[type=month]::-webkit-inner-spin-button, .vxe-input.size--medium .vxe-input--inner[type=week]::-webkit-inner-spin-button {
   margin-top: 4px;
 }
 .vxe-input.size--small {
-  font-size: 13px;
-  height: 30px;
-  line-height: 30px;
+  font-size: var(--vxe-font-size-small);
+  height: var(--vxe-input-height-small);
+  line-height: var(--vxe-input-height-small);
 }
 .vxe-input.size--small .vxe-input--inner[type=date]::-webkit-inner-spin-button, .vxe-input.size--small .vxe-input--inner[type=month]::-webkit-inner-spin-button, .vxe-input.size--small .vxe-input--inner[type=week]::-webkit-inner-spin-button {
   margin-top: 2px;
 }
 .vxe-input.size--mini {
-  font-size: 12px;
-  height: 28px;
-  line-height: 28px;
+  font-size: var(--vxe-font-size-mini);
+  height: var(--vxe-input-height-mini);
+  line-height: var(--vxe-input-height-mini);
 }
 .vxe-input.size--mini .vxe-input--inner[type=date]::-webkit-inner-spin-button, .vxe-input.size--mini .vxe-input--inner[type=month]::-webkit-inner-spin-button, .vxe-input.size--mini .vxe-input--inner[type=week]::-webkit-inner-spin-button {
   margin-top: 0;
@@ -665,8 +665,8 @@
 .vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,
 .vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn {
   width: 30px;
-  border-radius: 4px;
-  border: 1px solid #dcdfe6;
+  border-radius: var(--vxe-border-radius);
+  border: 1px solid var(--vxe-input-border-color);
 }
 .vxe-input--panel .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label,
 .vxe-input--panel .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn {
@@ -760,8 +760,8 @@
 .vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,
 .vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn {
   width: 29px;
-  border-radius: 4px;
-  border: 1px solid #dcdfe6;
+  border-radius: var(--vxe-border-radius);
+  border: 1px solid var(--vxe-input-border-color);
 }
 .vxe-input--panel.size--medium .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label,
 .vxe-input--panel.size--medium .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn {
@@ -855,8 +855,8 @@
 .vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,
 .vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn {
   width: 28px;
-  border-radius: 4px;
-  border: 1px solid #dcdfe6;
+  border-radius: var(--vxe-border-radius);
+  border: 1px solid var(--vxe-input-border-color);
 }
 .vxe-input--panel.size--small .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label,
 .vxe-input--panel.size--small .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn {
@@ -950,8 +950,8 @@
 .vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,
 .vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn {
   width: 27px;
-  border-radius: 4px;
-  border: 1px solid #dcdfe6;
+  border-radius: var(--vxe-border-radius);
+  border: 1px solid var(--vxe-input-border-color);
 }
 .vxe-input--panel.size--mini .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label,
 .vxe-input--panel.size--mini .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn {

package/es/vxe-list/style.css

@@ -27,7 +27,7 @@
   position: relative;
   display: block;
   padding: 0;
-  color: #606266;
+  color: var(--vxe-font-color);
   direction: ltr;
 }
 .vxe-list .vxe-list--virtual-wrapper {

package/es/vxe-loading/style.css

@@ -36,7 +36,7 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: var(--vxe-loading-background-color);
 }
 .vxe-loading.is--visible {
   display: block;
@@ -48,7 +48,7 @@
   left: 0;
   transform: translateY(-50%);
   text-align: center;
-  color: #409eff;
+  color: var(--vxe-loading-color);
 }
 .vxe-loading .vxe-loading--default-icon {
   font-size: 1.4em;
@@ -67,7 +67,7 @@
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background-color: #409eff;
+  background-color: var(--vxe-primary-color);
   opacity: 0.6;
   position: absolute;
   top: 0;

package/es/vxe-modal/style.css

@@ -31,8 +31,8 @@
   line-height: 1.5;
   width: calc(100% + 18px);
   height: calc(100% + 18px);
-  color: #606266;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  color: var(--vxe-font-color);
+  font-family: var(--vxe-font-family);
   transition: top 0.4s ease-in-out;
 }
 .vxe-modal--wrapper.is--active {
@@ -52,7 +52,7 @@
 .vxe-modal--wrapper.is--loading .vxe-modal--header,
 .vxe-modal--wrapper.is--loading .vxe-modal--footer {
   position: relative;
-  border-bottom-color: rgba(255, 255, 255, 0.5);
+  border-bottom-color: var(--vxe-loading-background-color);
 }
 .vxe-modal--wrapper.is--loading .vxe-modal--header:before,
 .vxe-modal--wrapper.is--loading .vxe-modal--footer:before {
@@ -66,7 +66,7 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: var(--vxe-loading-background-color);
 }
 .vxe-modal--wrapper:not(.lock--view) {
   pointer-events: none;
@@ -149,9 +149,9 @@
 .vxe-modal--wrapper .vxe-modal--box {
   visibility: hidden;
   width: 420px;
-  background-color: #fff;
-  border-radius: 4px;
-  border: 1px solid #ebeef5;
+  background-color: var(--vxe-modal-body-background-color);
+  border-radius: var(--vxe-border-radius);
+  border: 1px solid var(--vxe-modal-border-color);
   text-align: left;
   pointer-events: auto;
   opacity: 0;
@@ -175,19 +175,19 @@
   overflow: hidden;
 }
 .vxe-modal--wrapper.status--info .vxe-modal--status-wrapper {
-  color: #909399;
+  color: var(--vxe-info-color);
 }
 .vxe-modal--wrapper.status--warning .vxe-modal--status-wrapper, .vxe-modal--wrapper.status--question .vxe-modal--status-wrapper {
-  color: #e6a23c;
+  color: var(--vxe-warning-color);
 }
 .vxe-modal--wrapper.status--success .vxe-modal--status-wrapper {
-  color: #67c23a;
+  color: var(--vxe-success-color);
 }
 .vxe-modal--wrapper.status--error .vxe-modal--status-wrapper {
-  color: #f56c6c;
+  color: var(--vxe-danger-color);
 }
 .vxe-modal--wrapper.status--loading .vxe-modal--status-wrapper {
-  color: #BFBFBF;
+  color: var(--vxe-disabled-color);
 }
 .vxe-modal--wrapper .vxe-modal--status-wrapper {
   flex-shrink: 0;
@@ -214,9 +214,9 @@
   flex-shrink: 0;
   font-size: 1.1em;
   font-weight: 700;
-  border-bottom: 1px solid #ebeef5;
-  background-color: #F8F8F8;
-  border-radius: 4px 4px 0 0;
+  border-bottom: 1px solid var(--vxe-modal-border-color);
+  background-color: var(--vxe-modal-header-background-color);
+  border-radius: var(--vxe-border-radius) var(--vxe-border-radius) 0 0;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -244,7 +244,7 @@
 }
 .vxe-modal--wrapper .vxe-modal--zoom-btn:hover,
 .vxe-modal--wrapper .vxe-modal--close-btn:hover {
-  color: #409eff;
+  color: var(--vxe-primary-color);
 }
 .vxe-modal--wrapper .vxe-modal--footer {
   flex-shrink: 0;
@@ -335,14 +335,14 @@
 }
 
 .vxe-modal--wrapper {
-  font-size: 14px;
+  font-size: var(--vxe-font-size);
 }
 .vxe-modal--wrapper.size--medium {
-  font-size: 14px;
+  font-size: var(--vxe-font-size-medium);
 }
 .vxe-modal--wrapper.size--small {
-  font-size: 13px;
+  font-size: var(--vxe-font-size-small);
 }
 .vxe-modal--wrapper.size--mini {
-  font-size: 12px;
+  font-size: var(--vxe-font-size-mini);
 }

package/es/vxe-module-export/style.css

@@ -99,9 +99,9 @@
 }
 .vxe-export--panel .vxe-export--panel-column {
   width: 80%;
-  border: 1px solid #dcdfe6;
+  border: 1px solid var(--vxe-input-border-color);
   margin: 3px 0;
-  border-radius: 4px;
+  border-radius: var(--vxe-border-radius);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -153,9 +153,9 @@
 }
 .vxe-export--panel .vxe-export--panel-column .vxe-export--panel-column-header {
   padding: 0.1em 0;
-  background-color: #f8f8f9;
+  background-color: var(--vxe-table-header-background-color);
   font-weight: 700;
-  border-bottom: 1px solid #e8eaec;
+  border-bottom: 1px solid var(--vxe-table-border-color);
 }
 .vxe-export--panel .vxe-export--panel-column .vxe-export--panel-column-body {
   padding: 0.2em 0;
@@ -182,29 +182,29 @@
   cursor: pointer;
 }
 .vxe-export--panel .vxe-import-selected--file:hover {
-  color: #409eff;
+  color: var(--vxe-primary-color);
 }
 .vxe-export--panel .vxe-import-selected--file:hover > i {
   display: block;
 }
 .vxe-export--panel .vxe-import-select--file {
-  border: 1px dashed #dcdfe6;
+  border: 1px dashed var(--vxe-input-border-color);
   padding: 6px 34px;
   outline: 0;
-  border-radius: 4px;
-  background-color: #fff;
+  border-radius: var(--vxe-border-radius);
+  background-color: var(--vxe-input-background-color);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   cursor: pointer;
 }
 .vxe-export--panel .vxe-import-select--file:focus {
-  border-color: #409eff;
-  box-shadow: 0 0 0.25em 0 #409eff;
+  border-color: var(--vxe-primary-color);
+  box-shadow: 0 0 0.25em 0 var(--vxe-primary-color);
 }
 .vxe-export--panel .vxe-import-select--file:hover {
-  color: #409eff;
-  border-color: #409eff;
+  color: var(--vxe-primary-color);
+  border-color: var(--vxe-primary-color);
 }
 .vxe-export--panel .vxe-export--panel-btns {
   text-align: right;