@fox-js/foxui-pad 4.1.1-35 → 4.1.1-37

package/dist/style.css

@@ -19,7 +19,7 @@
 }
 
 .foxFade-enter-active, .foxFadeIn, .foxFade-leave-active, .foxFadeOut {
-  animation-duration: var(--fox-animation-duration, .25s);
+  animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
   animation-fill-mode: both;
   animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
 }
@@ -59,7 +59,7 @@
 }
 
 .foxZoom-enter-active, .foxZoomIn, .foxZoom-leave-active, .foxZoomOut {
-  animation-duration: var(--fox-animation-duration, .25s);
+  animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
   animation-fill-mode: both;
   animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
 }
@@ -97,7 +97,7 @@
 }
 
 .foxEase-enter-active, .foxEaseIn, .foxEase-leave-active, .foxEaseOut {
-  animation-duration: var(--fox-animation-duration, .25s);
+  animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
   animation-fill-mode: both;
   animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
 }
@@ -135,7 +135,7 @@
 }
 
 .foxDrop-enter-active, .foxDropIn, .foxDrop-leave-active, .foxDropOut {
-  animation-duration: var(--fox-animation-duration, .25s);
+  animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
   animation-fill-mode: both;
   animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
 }
@@ -159,7 +159,7 @@
 }
 
 .foxRotate-enter-active, .foxRotateIn, .foxRotate-leave-active, .foxRotateOut {
-  animation-duration: var(--fox-animation-duration, .25s);
+  animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
   animation-fill-mode: both;
   animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
 }
@@ -281,9 +281,9 @@
 .fox-header-bar {
   min-height: var(--fox-header-bar-min-height, auto);
   box-sizing: var(--fox-header-bar-box-sizing, content-box);
-  background-color: var(--fox-header-bar-background-color, var(--fox-white, #fff));
-  color: var(--fox-header-bar-color, var(--fox-title-color, #1a1a1a));
-  box-shadow: var(--fox-header-bar-box-shadow, 0px 1px 7px 0px var(--fox-border-color-lighter, #ebeef5));
+  background-color: var(--fox-header-bar-background-color, var(--fox-white, var(--el-color-white)));
+  color: var(--fox-header-bar-color, var(--fox-title-color, var(--el-text-color-primary)));
+  box-shadow: var(--fox-header-bar-box-shadow, 0px 1px 7px 0px var(--fox-border-color-lighter, var(--el-border-color-lighter)));
   border: 0;
   flex-flow: column wrap;
   justify-content: center;
@@ -297,8 +297,8 @@
 }
 
 .fox-header-bar--border {
-  border-top: var(--fox-header-bar-border-top, 0px solid var(--fox-border-color-lighter, #ebeef5));
-  border-bottom: var(--fox-header-bar-border-bottom, 1px solid var(--fox-border-color-lighter, #ebeef5));
+  border-top: var(--fox-header-bar-border-top, 0px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
+  border-bottom: var(--fox-header-bar-border-bottom, 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
 }
 
 .fox-header-bar--fixed {
@@ -313,15 +313,15 @@
 }
 
 .fox-header-bar__title {
-  font-size: var(--fox-header-bar-title-font-size, var(--fox-font-size-medium, 16px));
+  font-size: var(--fox-header-bar-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   text-align: center;
   min-width: 53%;
   display: block;
 }
 
 .fox-header-bar__title .title-icon {
-  height: var(--fox-header-bar-title-icon-size, 18px);
-  width: var(--fox-header-bar-title-icon-size, 18px);
+  height: var(--fox-header-bar-title-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
+  width: var(--fox-header-bar-title-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
   margin-left: 13px;
   display: inline;
 }
@@ -335,7 +335,7 @@
 }
 
 .fox-header-bar__left {
-  font-size: var(--fox-header-bar-left-font-size, var(--fox-font-size-medium, 16px));
+  font-size: var(--fox-header-bar-left-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   cursor: pointer;
   padding: var(--fox-header-bar-left-padding, 0 16px);
   flex-flow: row;
@@ -347,12 +347,12 @@
 }
 
 .fox-header-bar__left .left-icon {
-  height: var(--fox-header-bar-left-icon-size, 18px);
-  width: var(--fox-header-bar-left-icon-size, 18px);
+  height: var(--fox-header-bar-left-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
+  width: var(--fox-header-bar-left-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
 }
 
 .fox-header-bar__right {
-  font-size: var(--fox-header-bar-right-font-size, var(--fox-font-size-medium, 16px));
+  font-size: var(--fox-header-bar-right-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   padding: var(--fox-header-bar-right-padding, 0 16px);
   cursor: pointer;
   align-items: center;
@@ -362,8 +362,8 @@
 }
 
 .fox-header-bar__right .right-icon {
-  height: var(--fox-header-bar-right-icon-size, 18px);
-  width: var(--fox-header-bar-right-icon-size, 18px);
+  height: var(--fox-header-bar-right-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
+  width: var(--fox-header-bar-right-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
   margin-left: 8px;
 }
 
@@ -404,7 +404,7 @@
   min-height: var(--fox-footer-bar-min-height, 50px);
   padding: var(--fox-footer-bar-padding, 7px 0);
   box-sizing: var(--fox-footer-bar-box-sizing, content-box);
-  background-color: var(--fox-footer-background-color, var(--fox-white, #fff));
+  background-color: var(--fox-footer-background-color, var(--fox-white, var(--el-color-white)));
   border: 0;
   flex-flow: row;
   display: flex;
@@ -412,8 +412,8 @@
 }
 
 .fox-footer-bar--border {
-  border-top: var(--fox-footer-bar-border-top, 1px solid var(--fox-border-color-lighter, #ebeef5));
-  border-bottom: var(--fox-footer-bar-border-bottom, 1px solid var(--fox-border-color-lighter, #ebeef5));
+  border-top: var(--fox-footer-bar-border-top, 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
+  border-bottom: var(--fox-footer-bar-border-bottom, 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
 }
 
 .fox-footer-bar--fixed {
@@ -453,7 +453,7 @@
 
 .fox-content {
   box-sizing: border-box;
-  background-color: var(--fox-content-background-color, var(--fox-white, #fff));
+  background-color: var(--fox-content-background-color, var(--fox-white, var(--el-color-white)));
   display: block;
   overflow: hidden auto;
 }
@@ -581,8 +581,8 @@
 
 .fox-group__header-title {
   white-space: nowrap;
-  color: var(--fox-group-header-color, var(--fox-title-color, #1a1a1a));
-  font-size: var(--fox-group-header-font-size, var(--fox-font-size-base, 14px));
+  color: var(--fox-group-header-color, var(--fox-title-color, var(--el-text-color-primary)));
+  font-size: var(--fox-group-header-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-group-header-font-weight, 400);
   line-height: var(--fox-group-header-line-height, 20px);
   display: inline-block;
@@ -591,10 +591,11 @@
 .fox-group__header-collapse {
   cursor: pointer;
   color: var(--fox-group-header-collapse-color, var(--fox-color-primary, var(--el-color-primary)));
-  flex-flow: row;
-  flex: none;
   justify-content: flex-start;
   align-items: center;
+  gap: var(--fox-group-header-collapse-gutter, 2px);
+  flex-flow: row;
+  flex: none;
   display: flex;
 }
 
@@ -603,8 +604,8 @@
 }
 
 .fox-group__header-collapse-icon {
-  width: var(--fox-group-header-collapse-icon-size, 30px);
-  height: var(--fox-group-header-collapse-icon-size, 30px);
+  width: var(--fox-group-header-collapse-icon-size, var(--fox-font-size-small, var(--el-font-size-small)));
+  height: var(--fox-group-header-collapse-icon-size, var(--fox-font-size-small, var(--el-font-size-small)));
   transition: transform .3s ease-in-out;
 }
 
@@ -617,7 +618,7 @@
 }
 
 .fox-group__header-collapse-text {
-  font-size: var(--fox-group-header-collapse-font-size, var(--fox-font-size-base, 14px));
+  font-size: var(--fox-group-header-collapse-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
 }
 
 .fox-group__header-mark + .fox-group__header-title {
@@ -628,7 +629,7 @@
   width: var(--fox-input-item-width);
   min-width: var(--fox-input-item-min-width, 0);
   max-width: var(--fox-input-item-max-width);
-  padding: var(--fox-input-item-padding, 0);
+  padding: var(--fox-input-item-padding);
   margin: var(--fox-input-item-margin);
   background: var(--fox-input-item-background-color);
   box-sizing: border-box;
@@ -660,7 +661,7 @@
 }
 
 .fox-item__input--border {
-  border-bottom: var(--fox-input-item-border-bottom, 0px solid var(--fox-input-border-bottom, #eaf0fb));
+  border-bottom: var(--fox-input-item-border-bottom, 0px solid var(--fox-input-border-bottom, var(--fox-border-color-light, var(--el-border-color-light))));
 }
 
 .fox-item__main {
@@ -682,10 +683,10 @@
 
 .fox-item__main .label {
   box-sizing: border-box;
-  font-size: var(--fox-input-item-label-font-size, var(--fox-font-size-base, 14px));
+  font-size: var(--fox-input-item-label-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-input-item-label-font-weight, 400);
   line-height: var(--fox-input-item-label-line-height, auto);
-  color: var(--fox-input-item-label-color, var(--fox-black, #000));
+  color: var(--fox-input-item-label-color, var(--fox-black, var(--el-color-black)));
   flex-flow: row;
   align-items: center;
   display: flex;
@@ -745,7 +746,7 @@
 }
 
 .fox-item__tip {
-  font-size: var(--fox-input-item-tip-font-size, var(--fox-font-size-small, 12px));
+  font-size: var(--fox-input-item-tip-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
   line-height: var(--fox-input-item-tip-height, 16px);
   text-align: left;
   padding-left: var(--fox-input-item-label-width, 30%);
@@ -766,12 +767,12 @@
 }
 
 .fox-item__tip--icon > svg {
-  width: var(--fox-input-item-tip-icon-size, 10px);
-  height: var(--fox-input-item-tip-icon-size, 10px);
+  width: var(--fox-input-item-tip-icon-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
+  height: var(--fox-input-item-tip-icon-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
 }
 
 .fox-item__tip--info {
-  color: var(--fox-input-item-tip-info-color, var(--fox-color-primary, var(--el-color-primary)));
+  color: var(--fox-input-item-tip-info-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-item__tip--warn {
@@ -808,10 +809,11 @@
 }
 
 .fox-row-item {
-  padding: var(--fox-input-item-padding, 0);
+  padding: var(--fox-input-item-padding);
   margin: var(--fox-input-item-margin);
   align-items: center;
-  gap: var(--fox-row-item-gap, 12px);
+  column-gap: var(--fox-row-item-column-gap, 12px);
+  row-gap: var(--fox-row-item-row-gap);
   border: none;
   flex-flow: row;
   display: flex;
@@ -845,7 +847,7 @@
   margin: var(--fox-row-item-divide-margin, 0 10px);
   height: var(--fox-row-item-divide-height, 12px);
   width: var(--fox-row-item-divide-width, 1px);
-  background: var(--fox-row-item-divide-color, var(--fox-border-color-light, #e4e7ed));
+  background: var(--fox-row-item-divide-color, var(--fox-border-color-light, var(--el-border-color-light)));
 }
 
 .fox-buttons-item__popover {
@@ -853,19 +855,19 @@
 }
 
 .fox-buttons-item__dropdown-link {
+  --fox-text-mark-icon-height: var(--fox-buttons-item-dropdown-link-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
+  --fox-text-mark-icon-width: var(--fox-buttons-item-dropdown-link-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
+  --fox-text-font-size: var(--fox-buttons-item-dropdown-link-text-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
   cursor: pointer;
-}
-
-.fox-buttons-item__dropdown-link svg {
-  width: 1em;
-  height: 1em;
+  color: var(--fox-buttons-item-dropdown-link-icon-color);
+  font-size: var(--fox-buttons-item-dropdown-link-text-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
 }
 
 .fox-buttons-item__dropdown-item {
   white-space: nowrap;
   line-height: 22px;
-  font-size: var(--fox-font-size-base, 14px);
-  color: var(--fox-text-color, var(--el-text-color-regular));
+  font-size: var(--fox-font-size-base, var(--el-font-size-base));
+  color: var(--fox-text-color-regular, var(--el-text-color-regular));
   cursor: pointer;
   outline: none;
   align-items: center;
@@ -876,7 +878,7 @@
 }
 
 .fox-buttons-item__dropdown-item:hover {
-  background-color: var(--fox-background-hover-color, var(--el-color-primary-light-9));
+  background-color: var(--fox-buttons-item-dropdown-item-hover-background-color);
 }
 
 .fox-buttons-item__dropdown-item.is-disabled {
@@ -884,18 +886,14 @@
   cursor: default;
 }
 
-.fox-buttons-item > * + * {
-  margin-left: var(--fox-buttons-item-gutter, 12px);
-}
-
 .fox-hint-text {
   z-index: var(--fox-hint-text-z-index, 3000);
   padding: var(--fox-hint-text-padding, 6px 8px);
-  box-shadow: var(--fox-hint-text-box-shadow, 4px 4px 8px #0000004d);
+  box-shadow: var(--fox-hint-text-box-shadow, var(--fox-box-shadow, var(--el-box-shadow)));
   box-sizing: border-box;
-  font-size: var(--fox-hint-text-font-size, var(--fox-font-size-base, 14px));
-  color: var(--fox-hint-text-color, var(--fox-white, #fff));
-  background-color: var(--fox-hint-text-background-color, #000c);
+  font-size: var(--fox-hint-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  color: var(--fox-hint-text-color, var(--fox-white, var(--el-color-white)));
+  background-color: var(--fox-hint-text-background-color, var(--fox-overlay-text-bg-color, var(--el-overlay-color)));
   opacity: 0;
   border: 0 solid #0000004d;
   border-radius: 3px;
@@ -943,16 +941,16 @@
 .fox-hint-text__arrow {
   width: var(--fox-hint-text-arrow-size, 6px);
   height: var(--fox-hint-text-arrow-size, 6px);
-  background-color: var(--fox-hint-text-background-color, #000c);
+  background-color: var(--fox-hint-text-background-color, var(--fox-overlay-text-bg-color, var(--el-overlay-color)));
   position: absolute;
 }
 
 .fox-hint-text.is-small {
-  font-size: var(--fox-hint-text-font-size-small, var(--fox-font-size-small, 12px));
+  font-size: var(--fox-hint-text-font-size-small, var(--fox-font-size-small, var(--el-font-size-small)));
 }
 
 .fox-hint-text.is-large {
-  font-size: var(--fox-hint-text-font-size-large, var(--fox-font-size-large, 18px));
+  font-size: var(--fox-hint-text-font-size-large, var(--fox-font-size-large, var(--el-font-size-large)));
 }
 
 .fox-hint-text.is-top .fox-hint-text__arrow {
@@ -1081,7 +1079,7 @@
 
 .fox-money-item__append {
   width: var(--fox-input-item-append-width, 30px);
-  font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
+  font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   justify-content: center;
   align-items: center;
   display: flex;
@@ -1093,27 +1091,27 @@
 }
 
 .fox-money-item__disabled {
-  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, #c8c9cc)) !important;
+  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled)))) !important;
 }
 
 .fox-money-item__disabled input:disabled {
-  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, #c8c9cc));
+  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
   cursor: not-allowed;
   opacity: 1;
-  -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, #c8c9cc));
+  -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
   background: none;
 }
 
 .fox-money-item__placeholder input {
-  color: var(--fox-input-item-color, var(--fox-black, #000));
+  color: var(--fox-input-item-color, var(--fox-black, var(--el-color-black)));
 }
 
 .fox-money-item__placeholder input::-webkit-input-placeholder {
-  color: var(--fox-input-item-color, var(--fox-black, #000));
+  color: var(--fox-input-item-color, var(--fox-black, var(--el-color-black)));
 }
 
 .fox-money-item__placeholder input::placeholder {
-  color: var(--fox-input-item-color, var(--fox-black, #000));
+  color: var(--fox-input-item-color, var(--fox-black, var(--el-color-black)));
 }
 
 .fox-input-number-item {
@@ -1517,16 +1515,16 @@
 }
 
 .fox-actionsheet__header-title {
-  font-size: var(--fox-actionsheet-header-title-font-size, 18px);
+  font-size: var(--fox-actionsheet-header-title-font-size, var(--fox-font-size-large, var(--el-font-size-large)));
   font-weight: var(--fox-actionsheet-header-title-font-weight, 500);
-  color: var(--fox-actionsheet-header-title-color, #333);
+  color: var(--fox-actionsheet-header-title-color, var(--fox-title-color, var(--el-text-color-primary)));
 }
 
 .fox-actionsheet__header-icon {
   cursor: pointer;
-  color: var(--fox-actionsheet-header-icon-color, #969799);
-  width: var(--fox-actionsheet-header-icon-size, 16px);
-  height: var(--fox-actionsheet-header-icon-size, 16px);
+  color: var(--fox-actionsheet-header-icon-color, var(--fox-text-color--secondary, var(--el-text-color-secondary)));
+  width: var(--fox-actionsheet-header-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
+  height: var(--fox-actionsheet-header-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   margin-left: auto;
 }
 
@@ -1544,9 +1542,9 @@
 }
 
 .fox-actionsheet__searchbar .fox-searchbar__search-input {
-  border: var(--fox-actionsheet-searchbar-border, 1px solid #eee);
+  border: var(--fox-actionsheet-searchbar-border, 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
   border-radius: var(--fox-searchbar-border-radius, 12px);
-  background: var(--fox-actionsheet-searchbar-background, #f7f7f7);
+  background: var(--fox-actionsheet-searchbar-background, var(--fox-fill-color-base, var(--el-fill-color)));
   box-shadow: none;
 }
 
@@ -1591,37 +1589,37 @@
 }
 
 .fox-actionsheet__list-item-text {
-  font-size: var(--fox-actionsheet-list-item-text-font-size, 16px);
+  font-size: var(--fox-actionsheet-list-item-text-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   font-weight: var(--fox-actionsheet-list-item-text-font-weight, 400);
   line-height: var(--fox-actionsheet-list-item-text-line-height, 24px);
-  color: var(--fox-actionsheet-list-item-text-color, #333);
+  color: var(--fox-actionsheet-list-item-text-color, var(--fox-title-color, var(--el-text-color-primary)));
   margin: var(--fox-actionsheet-list-item-text-margin, 0);
   text-align: left;
 }
 
 .fox-actionsheet__list-item-subtext {
   margin: var(--fox-actionsheet-list-item-subtext-margin, 8px 0 0 0);
-  font-size: var(--fox-actionsheet-list-item-subtext-fox-size, 13px);
+  font-size: var(--fox-actionsheet-list-item-subtext-fox-size, var(--fox-font-size-small, var(--el-font-size-small)));
   font-weight: var(--fox-actionsheet-list-item-subtext-fox-wieight, 400);
-  color: var(--fox-actionsheet-list-item-subtext-color, #999);
+  color: var(--fox-actionsheet-list-item-subtext-color, var(--fox-text-color--secondary, var(--el-text-color-secondary)));
   text-align: left;
 }
 
 .fox-actionsheet__list-item-icon {
-  color: var(--fox-actionsheet-list-item-icon-color, var(--fox-disable-color, var(--el-text-color-disabled)));
+  color: var(--fox-actionsheet-list-item-icon-color, var(--fox-radio-icon-unchecked-color, var(--fox-disable-color, var(--el-text-color-disabled))));
   flex: none;
   transition-property: color, border-color, background-color;
   transition-duration: .3s;
-  width: var(--fox-actionsheet-list-item-icon-size, 16px) !important;
-  height: var(--fox-actionsheet-list-item-icon-size, 16px) !important;
+  width: var(--fox-actionsheet-list-item-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium))) !important;
+  height: var(--fox-actionsheet-list-item-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium))) !important;
 }
 
 .fox-actionsheet__list-item.is-checked .fox-actionsheet__list-item-icon {
-  color: var(--fox-actionsheet-list-item-icon-color-active, var(--fox-color-primary, var(--el-color-primary))) !important;
+  color: var(--fox-actionsheet-list-item-icon-color-active, var(--fox-radio-label-active-color, var(--fox-color-primary, var(--el-color-primary)))) !important;
 }
 
 .fox-actionsheet__list-item.is-disabled .fox-actionsheet__list-item-icon {
-  color: var(--fox-actionsheet-list-item-icon-color-disable, var(--fox-disable-color, var(--el-text-color-disabled)));
+  color: var(--fox-actionsheet-list-item-icon-color-disable, var(--fox-radio-icon-disable-color, var(--fox-disable-color, var(--el-text-color-disabled))));
 }
 
 .fox-actionsheet__footer {
@@ -1635,7 +1633,7 @@
 .fox-actionsheet__footer-confirm {
   height: var(--fox-actionsheet-footer-button-height, 36px);
   width: var(--fox-actionsheet-footer-button-min-width, 100%);
-  color: var(--fox-white, #fff);
+  color: var(--fox-white, var(--el-color-white));
   text-align: center;
   line-height: var(--fox-actionsheet-footer-button-height, 36px);
   border-radius: 22px;
@@ -1655,8 +1653,8 @@
   width: 100%;
   height: var(--fox-input-item-height, 24px);
   line-height: var(--fox-input-item-height, 24px);
-  font-size: var(--fox-input-item-font-size, var(--fox-font-size-base, 14px));
-  color: var(--fox-input-item-color, var(--fox-black, #000));
+  font-size: var(--fox-input-item-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  color: var(--fox-input-item-color, var(--fox-black, var(--el-color-black)));
   padding: var(--fox-link-item-padding, 0 5px 0 0);
   margin: var(--fox-link-item-margin, 0);
   text-align: var(--fox-input-item-text-align, right);
@@ -1669,12 +1667,12 @@
 }
 
 .fox-link-item.is-disabled {
-  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, #c8c9cc)) !important;
+  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled)))) !important;
 }
 
 .fox-link-item__append {
   width: var(--fox-input-item-append-width, 30px);
-  font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
+  font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   justify-content: center;
   align-items: center;
   display: flex;
@@ -1688,13 +1686,13 @@
 }
 
 .fox-link-item__append .action-icon {
-  width: var(--fox-input-item-append-action-icon-size, 14px);
-  height: var(--fox-input-item-append-action-icon-size, 14px);
-  color: var(--fox-input-item-append-action-icon-color, #bbb);
+  width: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  height: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  color: var(--fox-input-item-append-action-icon-color, var(--fox-disable-color, var(--el-text-color-disabled)));
 }
 
 .fox-link-item__placeholder {
-  color: var(--fox-input-item-placeholder-color, var(--fox-input-disabled-color, #c8c9cc));
+  color: var(--fox-input-item-placeholder-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
 }
 
 .fox-link-item__main {
@@ -1703,7 +1701,7 @@
 
 .fox-link-item__sub {
   width: 100%;
-  font-size: var(--fox-link-item-sub-font-size, var(--fox-font-size-small, 12px));
+  font-size: var(--fox-link-item-sub-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
   color: var(--fox-link-item-sub-color, var(--fox-text-color--secondary, var(--el-text-color-secondary)));
 }
 
@@ -1716,7 +1714,7 @@
 .fox-tabs-bar__titles {
   -webkit-user-select: none;
   user-select: none;
-  background: var(--fox-tabs-bar-titles-background, var(--fox-help-color, #f5f5f5));
+  background: var(--fox-tabs-bar-titles-background, var(--fox-fill-color-base, var(--el-fill-color)));
   border-radius: var(--fox-tabs-bar-titles-border-radius, 0);
   flex-shrink: 0;
   display: flex;
@@ -1730,9 +1728,9 @@
 }
 
 .fox-tabs-bar__titles-item {
-  color: var(--fox-tabs-bar-item-color, var(--fox-title-color, #1a1a1a));
-  font-weight: var(--fox-tabs-var-item-font-weight, normal);
-  font-size: var(--fox-tabs-bar-item-font-size-default, var(--fox-font-size-base, 14px));
+  color: var(--fox-tabs-bar-item-color, var(--fox-title-color, var(--el-text-color-primary)));
+  font-weight: var(--fox-tabs-bar-item-font-weight, normal);
+  font-size: var(--fox-tabs-bar-item-font-size-default, var(--fox-font-size-base, var(--el-font-size-base)));
   margin: 0 var(--fox-tabs-bar-item-gutter, 10px);
   flex: 1 0 auto;
   justify-content: center;
@@ -1746,8 +1744,8 @@
 }
 
 .fox-tabs-bar__titles-item.active {
-  color: var(--fox-tabs-bar-item-color-active, var(--fox-color-primary, var(--el-color-primary)));
-  font-size: var(--fox-tabs-bar-item-font-size-default-active, var(--fox-font-size-base, 14px));
+  color: var(--fox-tabs-bar-item-color-active, var(--fox-title-color, var(--el-text-color-primary)));
+  font-size: var(--fox-tabs-bar-item-font-size-default-active, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-tabs-bar-item-font-weight-active, bold);
 }
 
@@ -1760,20 +1758,21 @@
 
 .fox-tabs-bar__titles-item.button {
   margin: auto var(--fox-tabs-bar-item-gutter-button, 8px);
+  padding: var(--fox-tabs-bar-item-padding-button);
   width: var(--fox-tabs-bar-item-width-button, 80px);
   height: var(--fox-tabs-bar-item-height-button, 32px);
-  background: var(--fox-tabs-bar-item-background-button, #fff);
-  color: var(--fox-tabs-bar-item-color-button, #666);
-  font-size: var(--fox-tabs-bar-item-font-size-button, 12px);
+  background: var(--fox-tabs-bar-item-background-button, var(--fox-white, var(--el-color-white)));
+  color: var(--fox-tabs-bar-item-color-button, var(--fox-title-color2, var(--el-text-color-secondary)));
+  font-size: var(--fox-tabs-bar-item-font-size-button, var(--fox-font-size-small, var(--el-font-size-small)));
   font-weight: var(--fox-tabs-bar-item-font-weight-button, 400);
   border: var(--fox-tabs-bar-item-border-button, 1px solid transparent);
   border-radius: var(--fox-tabs-bar-item-radius-button, 4px);
 }
 
 .fox-tabs-bar__titles-item.button.active {
-  background: var(--fox-tabs-bar-item-background-active-button, #fff);
+  background: var(--fox-tabs-bar-item-background-active-button, var(--fox-white, var(--el-color-white)));
   color: var(--fox-tabs-bar-item-color-active-button, var(--fox-color-primary, var(--el-color-primary)));
-  font-size: var(--fox-tabs-bar-item-font-size-active-button, 12px);
+  font-size: var(--fox-tabs-bar-item-font-size-active-button, var(--fox-font-size-small, var(--el-font-size-small)));
   font-weight: var(--fox-tabs-bar-item-font-weight-button, 400);
   border: var(--fox-tabs-bar-item-border-active-button, 1px solid transparent);
 }
@@ -1797,9 +1796,9 @@
   margin: auto var(--fox-tabs-bar-item-gutter-button-group, 0px);
   width: var(--fox-tabs-bar-item-width-button-group, 105px);
   height: var(--fox-tabs-bar-item-height-button-group, 32px);
-  background: var(--fox-tabs-bar-item-background-button-group, #fff);
+  background: var(--fox-tabs-bar-item-background-button-group, var(--fox-white, var(--el-color-white)));
   color: var(--fox-tabs-bar-item-color-button-group, var(--fox-color-primary, var(--el-color-primary)));
-  font-size: var(--fox-tabs-bar-item-font-size-button-group, 14px);
+  font-size: var(--fox-tabs-bar-item-font-size-button-group, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-tabs-bar-item-font-weight-button-group, 400);
   border-top: var(--fox-tabs-bar-item-border-width-button-group, 1px) solid var(--fox-tabs-bar-item-background-active-button-group, var(--fox-color-primary, var(--el-color-primary)));
   border-right: var(--fox-tabs-bar-item-border-width-button-group, 1px) solid var(--fox-tabs-bar-item-background-active-button-group, var(--fox-color-primary, var(--el-color-primary)));
@@ -1810,8 +1809,8 @@
 
 .fox-tabs-bar__titles-item.button-group.active {
   background: var(--fox-tabs-bar-item-background-active-button-group, var(--fox-color-primary, var(--el-color-primary)));
-  color: var(--fox-tabs-bar-item-color-active-button-group, #fff);
-  font-size: var(--fox-tabs-bar-item-font-size-active-button-group, 14px);
+  color: var(--fox-tabs-bar-item-color-active-button-group, var(--fox-white, var(--el-color-white)));
+  font-size: var(--fox-tabs-bar-item-font-size-active-button-group, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-tabs-bar-item-font-weight-button-group, 400);
 }
 
@@ -1823,18 +1822,18 @@
   margin: auto var(--fox-tabs-bar-item-gutter-capsule, 0px);
   width: var(--fox-tabs-bar-item-width-capsule, 100px);
   height: var(--fox-tabs-bar-item-height-capsule, 29px);
-  background: var(--fox-tabs-bar-item-background-capsule, #fff0);
-  color: var(--fox-tabs-bar-item-color-capsule, #666);
-  font-size: var(--fox-tabs-bar-item-font-size-capsule, 14px);
+  background: var(--fox-tabs-bar-item-background-capsule, transparent);
+  color: var(--fox-tabs-bar-item-color-capsule, var(--fox-title-color2, var(--el-text-color-secondary)));
+  font-size: var(--fox-tabs-bar-item-font-size-capsule, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-tabs-bar-item-font-weight-capsule, 400);
   border: var(--fox-tabs-bar-item-border-width-capsule, 1px) solid transparent;
   border-radius: var(--fox-tabs-bar-item-radius-capsule, 12px);
 }
 
 .fox-tabs-bar__titles-item.capsule.active {
-  background: var(--fox-tabs-bar-item-background-active-capsule, #fff);
+  background: var(--fox-tabs-bar-item-background-active-capsule, var(--fox-white, var(--el-color-white)));
   color: var(--fox-tabs-bar-item-color-active-capsule, var(--fox-color-primary, var(--el-color-primary)));
-  font-size: var(--fox-tabs-bar-item-font-size-active-capsule, 14px);
+  font-size: var(--fox-tabs-bar-item-font-size-active-capsule, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-tabs-bar-item-font-weight-capsule, 400);
 }
 
@@ -1859,8 +1858,8 @@
   width: 0;
   height: 0;
   bottom: var(--fox-tabs-bar-item-line-bottom, 0px);
-  border-radius: var(--fox-tabs-titles-item-line-border-radius, 0);
-  opacity: var(--fox-tabs-titles-item-line-opacity, 1);
+  border-radius: var(--fox-tabs-bar-item-line-border-radius, 0);
+  opacity: var(--fox-tabs-bar-item-line-opacity, 1);
   transition: width .3s;
   position: absolute;
   left: 50%;
@@ -1870,10 +1869,10 @@
 
 .fox-tabs-bar__titles-item-tip {
   line-height: 1;
-  font-size: var(--fox-tabs-bar-item-tip-font-size, 10px);
-  color: var(--fox-tabs-bar-item-tip-color, var(--fox-white, #fff));
+  font-size: var(--fox-tabs-bar-item-tip-font-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
+  color: var(--fox-tabs-bar-item-tip-color, var(--fox-white, var(--el-color-white)));
   background: var(--fox-tabs-bar-item-tip-background, var(--fox-color-primary, var(--el-color-primary)));
-  box-shadow: var(--fox-tabs-bar-item-tip-box-shadow, 0 0 0 1px #fff);
+  box-shadow: var(--fox-tabs-bar-item-tip-box-shadow, 0 0 0 1px var(--fox-white, var(--el-color-white)));
   border-radius: 50%;
   position: absolute;
   top: 0;
@@ -1905,19 +1904,19 @@
 }
 
 .fox-tabs-bar__titles.large .fox-tabs-bar__titles-item {
-  font-size: var(--fox-tabs-bar-item-font-size-large, var(--fox-font-size-large, 18px));
+  font-size: var(--fox-tabs-bar-item-font-size-large, var(--fox-font-size-medium, var(--el-font-size-medium)));
 }
 
 .fox-tabs-bar__titles.large .fox-tabs-bar__titles-item.active {
-  font-size: var(--fox-tabs-bar-item-font-size-large-active, var(--fox-font-size-large, 18px));
+  font-size: var(--fox-tabs-bar-item-font-size-large-active, var(--fox-font-size-medium, var(--el-font-size-medium)));
 }
 
 .fox-tabs-bar__titles.small .fox-tabs-bar__titles-item {
-  font-size: var(--fox-tabs-bar-item-font-size-small, var(--fox-font-size-small, 12px));
+  font-size: var(--fox-tabs-bar-item-font-size-small, var(--fox-font-size-small, var(--el-font-size-small)));
 }
 
 .fox-tabs-bar__titles.small .fox-tabs-bar__titles-item.active {
-  font-size: var(--fox-tabs-bar-item-font-size-small-active, var(--fox-font-size-small, 12px));
+  font-size: var(--fox-tabs-bar-item-font-size-small-active, var(--fox-font-size-small, var(--el-font-size-small)));
 }
 
 .fox-tabs-bar__titles.horizontal {
@@ -2036,14 +2035,14 @@
 
 .fox-tabs-bar__titles.capsule {
   padding: var(--fox-tabs-bar-titles-padding-capsule, 5px 8px);
-  background: var(--fox-tabs-bar-titles-background-capsule, #f6f6f8);
+  background: var(--fox-tabs-bar-titles-background-capsule, var(--fox-fill-color-base, var(--el-fill-color)));
   border-radius: var(--fox-tabs-bar-titles-border-radius-capsule, 16px);
 }
 
 .fox-tabs-bar__navigation {
   height: var(--fox-tabs-bar-titles-height-horizontal, 44px);
   width: var(--fox-tabs-bar-navigation-width, 30px);
-  background: var(--fox-tabs-bar-titles-background, var(--fox-help-color, #f5f5f5));
+  background: var(--fox-tabs-bar-titles-background, var(--fox-fill-color-base, var(--el-fill-color)));
   flex-flow: row;
   justify-content: flex-end;
   align-items: center;
@@ -2054,10 +2053,10 @@
 }
 
 .fox-tabs-bar__popup {
-  background: var(--fox-tabs-bar-popup-background, #fff);
+  background: var(--fox-tabs-bar-popup-background, var(--fox-white, var(--el-color-white)));
   max-height: var(--fox-tabs-bar-popup-max-height, 500px);
   padding: var(--fox-tabs-bar-popup-padding, 12px 0 0 12px);
-  box-shadow: var(--fox-tabs-bar-popup-box-shadow, 0 4px 10px #00000012);
+  box-shadow: var(--fox-tabs-bar-popup-box-shadow, var(--fox-box-shadow, var(--el-box-shadow)));
   z-index: 1;
   opacity: 0;
   flex-flow: wrap;
@@ -2074,8 +2073,8 @@
 
 .fox-tabs-bar__popup-item {
   border-radius: var(--fox-tabs-bar-popup-item-radius, 16px);
-  color: var(--fox-tabs-bar-popup-item-color, #333);
-  background: var(--fox-tabs-bar-popup-item-background, #f8f8f8);
+  color: var(--fox-tabs-bar-popup-item-color, var(--fox-title-color, var(--el-text-color-primary)));
+  background: var(--fox-tabs-bar-popup-item-background, var(--fox-fill-color-base, var(--el-fill-color)));
   padding: var(--fox-tabs-bar-popup-item-padding, 5px 12px 5px 12px);
   margin: var(--fox-tabs-bar-popup-item-margin, 0px 12px 12px 0);
   text-wrap: nowrap;
@@ -2083,7 +2082,7 @@
 
 .fox-tabs-bar__popup-item.active {
   color: var(--fox-tabs-bar-popup-item-color-active, var(--fox-color-primary, var(--el-color-primary)));
-  background: var(--fox-tabs-bar-popup-item-background-active, #ffecec);
+  background: var(--fox-tabs-bar-popup-item-background-active, var(--fox-color-primary-light-9, var(--el-color-primary-light-9)));
 }
 
 .fox-tabs-bar__popup--show {
@@ -2181,8 +2180,8 @@
 
 .fox-steps-bar {
   box-sizing: border-box;
-  color: var(--fox-steps-bar-normal-color, var(--fox-white, #fff));
-  font-size: var(--fox-steps-bar-font-size, var(--fox-font-size-base, 14px));
+  color: var(--fox-steps-bar-normal-color, var(--fox-white, var(--el-color-white)));
+  font-size: var(--fox-steps-bar-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   justify-content: flex-start;
   align-items: flex-start;
   display: flex;
@@ -2365,54 +2364,54 @@
 }
 
 .fox-steps-bar__step.is-active {
-  color: var(--fox-steps-bar-active-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-active-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-steps-bar__step.is-active .fox-steps-bar__main {
-  color: var(--fox-steps-bar-text-active-color, var(--fox-black, #000));
+  color: var(--fox-steps-bar-text-active-color, var(--fox-black, var(--el-color-black)));
 }
 
 .fox-steps-bar__step.is-active .fox-steps-bar__icon {
-  color: var(--fox-steps-bar-icon-active-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-icon-active-color, var(--fox-white, var(--el-color-white)));
   background: var(--fox-steps-bar-icon-bg-active-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-steps-bar__step.is-done {
-  color: var(--fox-steps-bar-done-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-done-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-steps-bar__step.is-done .fox-steps-bar__main {
-  color: var(--fox-steps-bar-text-done-color, var(--fox-black, #000));
+  color: var(--fox-steps-bar-text-done-color, var(--fox-black, var(--el-color-black)));
 }
 
 .fox-steps-bar__step.is-done .fox-steps-bar__icon {
-  color: var(--fox-steps-bar-icon-done-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-icon-done-color, var(--fox-white, var(--el-color-white)));
   background: var(--fox-steps-bar-icon-bg-done-color, var(--fox-color-success, var(--el-color-success)));
 }
 
 .fox-steps-bar__step.is-error {
-  color: var(--fox-steps-bar-error-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-error-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-steps-bar__step.is-error .fox-steps-bar__main {
-  color: var(--fox-steps-bar-text-error-color, var(--fox-black, #000));
+  color: var(--fox-steps-bar-text-error-color, var(--fox-black, var(--el-color-black)));
 }
 
 .fox-steps-bar__step.is-error .fox-steps-bar__icon {
-  color: var(--fox-steps-bar-icon-error-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-icon-error-color, var(--fox-white, var(--el-color-white)));
   background: var(--fox-steps-bar-icon-bg-error-color, var(--fox-color-danger, var(--el-color-danger)));
 }
 
 .fox-steps-bar__step.is-half {
-  color: var(--fox-steps-bar-half-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-half-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-steps-bar__step.is-half .fox-steps-bar__main {
-  color: var(--fox-steps-bar-text-half-color, var(--fox-black, #000));
+  color: var(--fox-steps-bar-text-half-color, var(--fox-black, var(--el-color-black)));
 }
 
 .fox-steps-bar__step.is-half .fox-steps-bar__icon {
-  color: var(--fox-steps-bar-icon-half-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-icon-half-color, var(--fox-white, var(--el-color-white)));
   background: var(--fox-steps-bar-icon-bg-half-color, var(--fox-color-warning, var(--el-color-warning)));
 }
 
@@ -2464,12 +2463,12 @@
 }
 
 .fox-steps-bar__icon {
-  color: var(--fox-steps-bar-icon-normal-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-icon-normal-color, var(--fox-white, var(--el-color-white)));
   background: var(--fox-steps-bar-icon-bg-normal-color, var(--fox-disable-color, var(--el-text-color-disabled)));
   cursor: pointer;
   border: var(--fox-steps-bar-icon-border, none);
   box-sizing: border-box;
-  font-size: var(--fox-steps-bar-icon-font-size, var(--fox-steps-bar-font-size, var(--fox-font-size-base, 14px)));
+  font-size: var(--fox-steps-bar-icon-font-size, var(--fox-steps-bar-font-size, var(--fox-font-size-base, var(--el-font-size-base))));
   width: var(--fox-steps-bar-icon-size, 28px);
   height: var(--fox-steps-bar-icon-size, 28px);
   border-radius: 50%;
@@ -2493,16 +2492,16 @@
 
 .fox-steps-bar__main {
   color: var(--fox-steps-bar-text-normal-color, var(--fox-disable-color, var(--el-text-color-disabled)));
-  font-size: var(--fox-steps-bar-text-font-size, var(--fox-steps-bar-font-size, var(--fox-font-size-base, 14px)));
+  font-size: var(--fox-steps-bar-text-font-size, var(--fox-steps-bar-font-size, var(--fox-font-size-base, var(--el-font-size-base))));
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 
 .fox-floating-window {
-  background: var(--fox-floating-window-background, #fff);
+  background: var(--fox-floating-window-background, var(--fox-background-color, var(--el-bg-color)));
   border-radius: var(--fox-floating-window-border-radius, 4px);
-  box-shadow: var(--fox-floating-window-box-shadow, 0px 12px 32px 4px #0000000a, 0px 8px 20px #00000014);
+  box-shadow: var(--fox-floating-window-box-shadow, var(--fox-box-shadow, var(--el-box-shadow)));
   box-sizing: border-box;
   top: var(--fox-floating-window-width, 15dvh);
   left: var(--fox-floating-window-width, 25dvw);
@@ -2516,7 +2515,7 @@
 .fox-floating-window__header {
   border-top-left-radius: var(--fox-floating-window-border-radius, 4px);
   border-top-right-radius: var(--fox-floating-window-border-radius, 4px);
-  background: var(--fox-floating-window-header-background, #f0f1f5);
+  background: var(--fox-floating-window-header-background, var(--fox-fill-color-base, var(--el-fill-color)));
   padding: var(--fox-floating-window-header-padding, 0 25px);
   height: var(--fox-floating-window-header-height, 40px);
   z-index: 20;
@@ -2529,7 +2528,7 @@
 }
 
 .fox-floating-window__title {
-  font-size: var(--fox-floating-window-title-font-size, 18px);
+  font-size: var(--fox-floating-window-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
 }
 
 .fox-floating-window__tools {
@@ -2546,7 +2545,7 @@
 
 .fox-floating-window__collapse {
   cursor: pointer;
-  color: var(--fox-floating-window-collapse-color, #409eff);
+  color: var(--fox-floating-window-collapse-color, var(--fox-color-primary, var(--el-color-primary)));
   flex-flow: row;
   flex: none;
   justify-content: flex-start;
@@ -2570,11 +2569,11 @@
 }
 
 .fox-floating-window__collapse-text {
-  font-size: var(--fox-floating-window-collapse-font-size, 14px);
+  font-size: var(--fox-floating-window-collapse-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
 }
 
 .fox-floating-window__close:hover {
-  color: var(--fox-floating-window-close-color, #409eff);
+  color: var(--fox-floating-window-close-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-floating-window__close {
@@ -2583,14 +2582,14 @@
 }
 
 .fox-floating-window__body {
-  font-size: var(--fox-floating-window-content-font-size, 14px);
+  font-size: var(--fox-floating-window-content-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
 }
 
 .fox-floating-window__fixednav {
   box-sizing: border-box;
   z-index: var(--fox-floating-window-fixednav-z-index, 2000);
-  color: var(--fox-floating-window-fixednav-color, #fff);
-  background: var(--fox-floating-window-fixednav-bg, #409eff);
+  color: var(--fox-floating-window-fixednav-color, var(--fox-white, var(--el-color-white)));
+  background: var(--fox-floating-window-fixednav-bg, var(--fox-color-primary, var(--el-color-primary)));
   width: var(--floating-window-fixednav-width, 80px);
   height: var(--floating-window-fixednav-height, 50px);
   align-items: center;
@@ -2711,11 +2710,11 @@
 
 .fox-popover-dialog {
   position: var(--fox-popover-dialog-position, fixed);
-  color: var(--fox-popover-dialog-color, #333);
-  background: var(--fox-popover-dialog-background-color, #fff);
-  border: 1px solid var(--fox-border-color-lighter, #ebeef5);
+  color: var(--fox-popover-dialog-color, var(--fox-title-color, var(--el-text-color-primary)));
+  background: var(--fox-popover-dialog-background-color, var(--fox-white, var(--el-color-white)));
+  border: 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter));
   border-radius: var(--fox-popover-dialog-border-radius, 4px);
-  box-shadow: var(--fox-box-shadow-light, 0px 0px 12px #0000001f);
+  box-shadow: var(--fox-box-shadow-light, var(--el-box-shadow-light));
   box-sizing: border-box;
   min-width: var(--fox-popover-dialog-min-width, 0px);
   padding: var(--fox-popover-dialog-padding, 12px);
@@ -2727,15 +2726,15 @@
 }
 
 .fox-popover-dialog__title {
-  font-size: var(--fox-popover-dialog-title-font-size, 16px);
+  font-size: var(--fox-popover-dialog-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   margin-bottom: 12px;
   line-height: 1;
 }
 
 .fox-popover-dialog__arrow {
-  height: var(--fox-popover-dialog-arrow-size, 12px);
-  width: var(--fox-popover-dialog-arrow-size, 12px);
-  background: var(--fox-popover-dialog-background-color, #fff);
+  height: var(--fox-popover-dialog-arrow-size, var(--fox-font-size-small, var(--el-font-size-small)));
+  width: var(--fox-popover-dialog-arrow-size, var(--fox-font-size-small, var(--el-font-size-small)));
+  background: var(--fox-popover-dialog-background-color, var(--fox-white, var(--el-color-white)));
   z-index: -1;
   clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
   position: absolute;
@@ -2746,7 +2745,7 @@
   width: 100%;
   height: 100%;
   z-index: var(--fox-popover-dialog-z-index, 2000);
-  background-color: var(--fox-popover-dialog-overlay-background-color, #0000);
+  background-color: var(--fox-popover-dialog-overlay-background-color, transparent);
   top: 0;
   left: 0;
 }
@@ -2764,13 +2763,13 @@
 }
 
 .fox-popover-dialog.is-dark {
-  color: var(--fox-popover-dialog-dark-color, #fff);
-  background: var(--fox-popover-dialog-dark-background-color, #4b4c4d);
-  border: 1px solid var(--fox-border-color-light, #e4e7ed);
+  color: var(--fox-popover-dialog-dark-color, var(--fox-white, var(--el-color-white)));
+  background: var(--fox-popover-dialog-background-color-dark, var(--fox-title-color, var(--el-text-color-primary)));
+  border: 1px solid var(--fox-border-color-light, var(--el-border-color-light));
 }
 
 .fox-popover-dialog.is-dark .fox-popover-dialog__arrow {
-  background: var(--fox-popover-dialog-dark-background-color, #4b4c4d);
+  background: var(--fox-popover-dialog-background-color-dark, var(--fox-title-color, var(--el-text-color-primary)));
 }
 
 @keyframes popover-show {
@@ -2826,26 +2825,26 @@
 
 .fox-picker__title {
   text-align: center;
-  font-size: var(--fox-picker-bar-title-font-size, 16px);
+  font-size: var(--fox-picker-bar-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   font-weight: var(--fox-picker-bar-title-font-weight, normal);
-  color: var(--fox-picker-bar-title-color, var(--fox-title-color, #1a1a1a));
+  color: var(--fox-picker-bar-title-color, var(--fox-title-color, var(--el-text-color-primary)));
 }
 
 .fox-picker__left {
   float: left;
-  color: var(--fox-picker-cancel-color, gray);
-  font-size: var(--fox-picker-bar-cancel-font-size, 14px);
+  color: var(--fox-picker-cancel-color, var(--fox-text-color-regular, var(--el-text-color-regular)));
+  font-size: var(--fox-picker-bar-cancel-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
 }
 
 .fox-picker__right {
   float: right;
   color: var(--fox-picker-ok-color, var(--fox-color-primary, var(--el-color-primary)));
-  font-size: var(--fox-picker-bar-ok-font-size, 14px);
+  font-size: var(--fox-picker-bar-ok-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
 }
 
 .fox-picker__hairline {
   height: var(--fox-picker-item-height, 36px);
-  border: var(--fox-picker-item-active-line-border, 1px solid #eae7e7);
+  border: var(--fox-picker-item-active-line-border, 1px solid var(--fox-border-color-light, var(--el-border-color-light)));
   border-left: 0;
   border-right: 0;
   width: 100%;
@@ -2904,8 +2903,8 @@
   width: 100%;
   height: var(--fox-picker-item-height, 36px);
   line-height: var(--fox-picker-item-height, 36px);
-  color: var(--fox-picker-item-text-color, var(--fox-title-color, #1a1a1a));
-  font-size: var(--fox-picker-item-text-font-size, 14px);
+  color: var(--fox-picker-item-text-color, var(--fox-title-color, var(--el-text-color-primary)));
+  font-size: var(--fox-picker-item-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
@@ -2922,8 +2921,8 @@
 .fox-picker__item-tile {
   height: var(--fox-picker-item-height, 36px);
   line-height: var(--fox-picker-item-height, 36px);
-  color: var(--fox-picker-item-text-color, var(--fox-title-color, #1a1a1a));
-  font-size: var(--fox-picker-item-text-font-size, 14px);
+  color: var(--fox-picker-item-text-color, var(--fox-title-color, var(--el-text-color-primary)));
+  font-size: var(--fox-picker-item-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   text-overflow: ellipsis;
   white-space: nowrap;
   justify-content: center;
@@ -2934,8 +2933,8 @@
 
 .fox-picker__item-tarotile {
   width: 100%;
-  color: var(--fox-picker-item-text-color, var(--fox-title-color, #1a1a1a));
-  font-size: var(--fox-picker-item-text-font-size, 14px);
+  color: var(--fox-picker-item-text-color, var(--fox-title-color, var(--el-text-color-primary)));
+  font-size: var(--fox-picker-item-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   text-overflow: ellipsis;
   white-space: nowrap;
   flex-direction: column;
@@ -2947,7 +2946,7 @@
 
 .fox-theme-dark .fox-calendar, .fox-theme-dark .fox-calendar .fox-calendar__header {
   background: var(--fox-dark-background, #131313);
-  color: var(--fox-dark-color, var(--fox-white, #fff));
+  color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-theme-dark .fox-calendar .fox-calendar__content .fox-calendar__panel .fox-calendar__days .calendar-month-day-choose {
@@ -2956,13 +2955,13 @@
 }
 
 .fox-theme-dark .fox-calendar .fox-calendar__footer {
-  background: var(--fox-dark-background2, #1b1b1b);
-  color: var(--fox-dark-color, var(--fox-white, #fff));
+  background: var(--fox-dark-background-2, #1b1b1b);
+  color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-calendar {
   color: #333;
-  background-color: var(--fox-white, #fff);
+  background-color: var(--fox-white, var(--el-color-white));
   flex-direction: column;
   flex: 1;
   height: 100%;
@@ -2973,7 +2972,7 @@
 }
 
 .fox-calendar.fox-calendar--nopop .fox-calendar__header .fox-calendar__header-title {
-  font-size: var(--fox-calendar-base-font, var(--fox-font-size-base, 14px));
+  font-size: var(--fox-calendar-base-font, var(--fox-font-size-medium, var(--el-font-size-medium)));
 }
 
 .fox-calendar .popup-box {
@@ -2992,20 +2991,20 @@
   height: var(--fox-calendar-popup-height, 85vh);
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
-  left: calc((100% - var(--fox-calendar-width, 40%)) / 2) !important;
-  width: var(--fox-calendar-width, 40%) !important;
+  left: calc((100% - var(--fox-calendar-width, 100%)) / 2) !important;
+  width: var(--fox-calendar-width, 100%) !important;
 }
 
 .fox-calendar__header {
   text-align: center;
-  background-color: var(--fox-white, #fff);
+  background-color: var(--fox-white, var(--el-color-white));
   flex-direction: column;
   padding-top: 1px;
   display: flex;
 }
 
 .fox-calendar__header .fox-calendar__header-title {
-  font-size: var(--fox-calendar-title-font, var(--fox-font-size-large, 18px));
+  font-size: var(--fox-calendar-title-font, var(--fox-font-size-large, var(--el-font-size-large)));
   font-weight: var(--fox-calendar-title-font-weight, 500);
   line-height: 44px;
 }
@@ -3016,7 +3015,7 @@
 
 .fox-calendar__header .fox-calendar__header-subtitle {
   line-height: 22px;
-  font-size: var(--fox-calendar-sub-title-font, var(--fox-font-size-base, 14px));
+  font-size: var(--fox-calendar-sub-title-font, var(--fox-font-size-base, var(--el-font-size-base)));
   padding: 7px 0;
 }
 
@@ -3065,8 +3064,8 @@
   text-align: center;
   height: 50px;
   line-height: 50px;
-  font-size: var(--fox-calendar-text-font, var(--fox-font-size-small, 12px));
-  color: var(--fox-text-color, var(--el-text-color-regular));
+  font-size: var(--fox-calendar-text-font, var(--fox-font-size-small, var(--el-font-size-small)));
+  color: var(--fox-text-color-regular, var(--el-text-color-regular));
   position: absolute;
   top: -50px;
   left: 0;
@@ -3107,17 +3106,17 @@
 
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day .fox-calendar__day-tips--curr {
   width: 100%;
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--fox-font-size-small, var(--el-font-size-small));
+  line-height: 1.2;
   position: absolute;
   bottom: 6px;
 }
 
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day .fox-calendar__day-tip {
   width: 100%;
+  font-size: var(--fox-font-size-small, var(--el-font-size-small));
   color: var(--fox-calendar-primary-color, var(--fox-color-primary, var(--el-color-primary)));
-  font-size: 12px;
-  line-height: 14px;
+  line-height: 1.2;
   position: absolute;
   bottom: 6px;
 }
@@ -3133,7 +3132,7 @@
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--active {
   background-color: var(--fox-calendar-primary-color, var(--fox-color-primary, var(--el-color-primary)));
   border-radius: var(--fox-calendar-day-active-border-radius, 0px);
-  color: var(--fox-white, #fff) !important;
+  color: var(--fox-white, var(--el-color-white)) !important;
 }
 
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--active .fox-calendar__day-tips, .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--active .fox-calendar__day-tips--curr {
@@ -3141,11 +3140,11 @@
 }
 
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--active .fox-calendar__day-tip {
-  color: var(--fox-white, #fff);
+  color: var(--fox-white, var(--el-color-white));
 }
 
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--disabled {
-  color: var(--fox-calendar-disable-color, #d1d0d0) !important;
+  color: var(--fox-calendar-disable-color, var(--fox-disable-color, var(--el-text-color-disabled))) !important;
 }
 
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--choose {
@@ -3161,7 +3160,7 @@
 }
 
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day .fox-calendar__day-value {
-  font-size: var(--fox-calendar-day-font, 16px);
+  font-size: var(--fox-calendar-day-font, var(--fox-font-size-medium, var(--el-font-size-medium)));
   padding: 2px 0;
 }
 
@@ -3170,7 +3169,7 @@
   height: calc(62px + env(safe-area-inset-buttom));
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
-  background-color: var(--fox-white, #fff);
+  background-color: var(--fox-white, var(--el-color-white));
   width: 100%;
   display: flex;
 }
@@ -3178,8 +3177,8 @@
 .fox-calendar__footer .fox-calendar__confirm {
   height: var(--fox-calendar-footer-button-height, 44px);
   width: var(--fox-calendar-footer-button-min-width, 100%);
-  background: var(--fox-button-primary-background-color, linear-gradient(135deg, var(--fox-color-primary, var(--fox-color-primary, var(--el-color-primary))) 0%, var(--fox-color-primary, var(--fox-color-primary, var(--el-color-primary))) 100%));
-  color: var(--fox-white, #fff);
+  background: var(--fox-calendar-footer-button-background-color, var(--fox-color-primary, var(--el-color-primary)));
+  color: var(--fox-white, var(--el-color-white));
   text-align: center;
   line-height: var(--fox-calendar-footer-button-height, 44px);
   border-radius: 22px;
@@ -3188,12 +3187,12 @@
 
 .fox-cascader {
   width: 100%;
-  font-size: var(--fox-cascader-font-size, var(--fox-font-size-base, 14px));
+  font-size: var(--fox-cascader-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   line-height: var(--fox-cascader-line-height, 22px);
 }
 
 .fox-cascader .fox-tabs-bar__titles {
-  background: var(--fox-cascader-tabs-titles-background-color, var(--fox-white, #fff));
+  background: var(--fox-cascader-tabs-titles-background-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-cascader .fox-tabs-bar__titles-item {
@@ -3207,8 +3206,8 @@
   text-align: center;
   font-weight: bold;
   line-height: var(--fox-cascader-bar-line-height, 20px);
-  color: var(--fox-cascader-bar-color, var(--fox-title-color, #1a1a1a));
-  font-size: var(--fox-cascader-bar-font-size, var(--fox-font-size-large, 18px));
+  color: var(--fox-cascader-bar-color, var(--fox-title-color, var(--el-text-color-primary)));
+  font-size: var(--fox-cascader-bar-font-size, var(--fox-font-size-large, var(--el-font-size-large)));
   justify-content: center;
   align-items: center;
   display: flex;
@@ -3233,8 +3232,8 @@
 .fox-cascader__item {
   padding: var(--fox-cascader-item-padding, 10px 20px);
   cursor: pointer;
-  font-size: var(--fox-cascader-item-font-size, var(--fox-font-size-base, 14px));
-  color: var(--fox-cascader-item-color, var(--fox-title-color, #1a1a1a));
+  font-size: var(--fox-cascader-item-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  color: var(--fox-cascader-item-color, var(--fox-title-color, var(--el-text-color-primary)));
   align-items: center;
   margin: 0;
   display: flex;
@@ -3285,7 +3284,7 @@
 }
 
 .fox-overlay {
-  background: var(--fox-overlay-bg-color, #000000b3);
+  background: var(--fox-overlay-bg-color, var(--el-overlay-color-light));
   width: 100%;
   height: 100%;
   position: fixed;
@@ -3298,11 +3297,11 @@
 }
 
 .fox-theme-dark .fox-popup {
-  background: var(--fox-dark-background2, #1b1b1b);
+  background: var(--fox-dark-background-2, #1b1b1b);
 }
 
 .fox-theme-dark .fox-popup__close-icon {
-  color: var(--fox-dark-color, var(--fox-white, #fff));
+  color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-popup-slide-center-enter-active, .fox-popup-slide-center-leave-active {
@@ -3384,7 +3383,7 @@
 }
 
 .fox-popup {
-  background-color: var(--fox-white, #fff);
+  background-color: var(--fox-white, var(--el-color-white));
   -webkit-overflow-scrolling: touch;
   max-height: 100%;
   position: fixed;
@@ -3404,8 +3403,8 @@
 }
 
 .fox-popup__close-icon > svg {
-  width: var(--fox-popup-close-icon-size, 12px);
-  height: var(--fox-popup-close-icon-size, 12px);
+  width: var(--fox-popup-close-icon-size, var(--fox-font-size-small, var(--el-font-size-small)));
+  height: var(--fox-popup-close-icon-size, var(--fox-font-size-small, var(--el-font-size-small)));
 }
 
 .fox-popup__close-icon:active {
@@ -3444,16 +3443,16 @@
 }
 
 .fox-toast-small .fox-toast-inner {
-  font-size: var(--fox-font-size-small, 12px);
+  font-size: var(--fox-font-size-small, var(--el-font-size-small));
 }
 
 .fox-toast-large .fox-toast-inner {
-  font-size: var(--fox-font-size-large, 18px);
+  font-size: var(--fox-font-size-large, var(--el-font-size-large));
 }
 
 .fox-toast-cover {
   pointer-events: auto;
-  background: var(--fox-toast-cover-bg-color, #0000);
+  background: var(--fox-toast-cover-bg-color, transparent);
   justify-content: center;
   align-items: center;
   height: 100%;
@@ -3461,20 +3460,20 @@
 }
 
 .fox-toast-inner {
-  font-size: var(--fox-toast-text-font-size, 14px);
+  font-size: var(--fox-toast-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   text-align: center;
   min-width: 40%;
   max-width: 65%;
   padding: var(--fox-toast-inner-padding, 24px 30px);
   word-break: break-all;
-  background: var(--fox-toast-inner-bg-color, #000c);
+  background: var(--fox-toast-inner-bg-color, var(--fox-overlay-text-bg-color, var(--el-overlay-color)));
   border-radius: var(--fox-toast-inner-border-radius, 12px);
-  color: var(--fox-toast-font-color, var(--fox-white, #fff));
+  color: var(--fox-toast-font-color, var(--fox-white, var(--el-color-white)));
   display: inline-block;
 }
 
 .fox-toast-text {
-  font-size: var(--fox-toast-text-font-size, 14px);
+  font-size: var(--fox-toast-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
 }
 
 .fox-toast-text:empty {
@@ -3482,7 +3481,7 @@
 }
 
 .fox-toast-title {
-  font-size: var(--fox-toast-title-font-size, 16px);
+  font-size: var(--fox-toast-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
 }
 
 .fox-toast-title:empty {
@@ -3530,22 +3529,22 @@
 }
 
 .fox-theme-dark .fox-searchbar__search-label, .fox-theme-dark .fox-searchbar .fox-searchbar__input-clear .fox-searchbar__fox-icon-mask-close {
-  color: var(--fox-dark-color, var(--fox-white, #fff));
+  color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-theme-dark .fox-searchbar .fox-searchbar__input-clear .fox-searchbar__fox-icon-mask-close:hover {
   cursor: pointer;
-  color: var(--fox-dark-color, var(--fox-white, #fff));
+  color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-theme-dark .fox-searchbar__right-search-icon, .fox-theme-dark .fox-searchbar__left-search-icon {
-  color: var(--fox-dark-color, var(--fox-white, #fff));
+  color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-searchbar {
   width: var(--fox-searchbar-width, 100%);
   padding: var(--fox-searchbar-padding, 9px 16px);
-  background: var(--fox-searchbar-background, var(--fox-white, #fff));
+  background: var(--fox-searchbar-background, var(--fox-white, var(--el-color-white)));
   box-sizing: border-box;
   color: var(--fox-searchbar-input-bar-color, inherit);
   align-items: center;
@@ -3566,8 +3565,8 @@
   height: var(--fox-searchbar-input-height, 32px);
   padding: var(--fox-searchbar-input-padding, 0 0 0 13px);
   border-radius: var(--fox-searchbar-input-border-radius, 16px);
-  box-shadow: var(--fox-searchbar-input-box-shadow, 0 0 8px 0 #0000000a);
-  background: var(--fox-searchbar-input-background, #f7f7f7);
+  box-shadow: var(--fox-searchbar-input-box-shadow, var(--fox-box-shadow-lighter, var(--el-box-shadow-lighter)));
+  background: var(--fox-searchbar-input-background, var(--fox-fill-color-base, var(--el-fill-color)));
   box-sizing: border-box;
   flex: 1;
   align-items: center;
@@ -3579,16 +3578,21 @@
 }
 
 .fox-searchbar__search-input .fox-searchbar__input-inner {
+  flex: 1;
+  width: 100%;
+}
+
+.fox-searchbar__search-input .fox-searchbar__input-inner-input {
+  padding: var(--fox-searchbar-input-inner-padding, 0 20px 0 10px);
+  font-size: var(--fox-font-size-base, var(--el-font-size-base));
+  box-sizing: border-box;
   background-color: #0000;
   border-color: #0000;
   border-radius: 16px;
   outline: none;
-  flex: 1;
   width: 100%;
-  height: 36px;
+  height: 100%;
   margin: 0;
-  padding: 0 20px 0 0;
-  font-size: 14px;
 }
 
 .fox-searchbar__search-input .fox-searchbar__input-inner-right {
@@ -3605,13 +3609,13 @@
 }
 
 .fox-searchbar__search-input .fox-searchbar__input-clear-icon > svg {
-  width: 16px;
-  height: 16px;
+  width: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  height: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
 }
 
 .fox-searchbar__search-input .fox-searchbar__input-left-search-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  height: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
   margin-right: 6px;
 }
 
@@ -3620,9 +3624,9 @@
 }
 
 .fox-searchbar__search-icon {
+  font-size: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
   justify-content: center;
   align-items: center;
-  font-size: 14px;
   display: flex;
 }
 
@@ -3631,7 +3635,7 @@
 }
 
 .fox-searchbar__right-search-icon {
-  color: var(--fox-searchbar-right-out-color, var(--fox-black, #000));
+  color: var(--fox-searchbar-right-out-color, var(--fox-black, var(--el-color-black)));
   margin-left: 16px;
 }
 
@@ -3644,8 +3648,8 @@
   width: 100%;
   height: 50px;
   line-height: 50px;
-  font-size: var(--fox-font-size-small, 12px);
-  color: var(--fox-infiniteloading-bottom-color, #c8c8c8);
+  font-size: var(--fox-font-size-small, var(--el-font-size-small));
+  color: var(--fox-infiniteloading-bottom-color, var(--fox-disable-color, var(--el-text-color-disabled)));
   text-align: center;
   display: block;
 }
@@ -3668,8 +3672,8 @@
 }
 
 .fox-infinite-loading__bottom-box__text {
-  color: var(--fox-text-color, var(--el-text-color-regular));
-  font-size: 12px;
+  font-size: var(--fox-font-size-extra-small, var(--el-font-size-extra-small));
+  color: var(--fox-text-color-regular, var(--el-text-color-regular));
 }
 
 .fox-pull-refresh {
@@ -3684,11 +3688,11 @@
 
 .fox-pull-refresh__container-topbox {
   text-align: center;
-  justify-content: center;
-  align-items: center;
   width: 100%;
   height: 50px;
-  font-size: 14px;
+  font-size: var(--fox-font-size-base, var(--el-font-size-base));
+  justify-content: center;
+  align-items: center;
   display: flex;
   position: absolute;
   left: 0;
@@ -3707,8 +3711,8 @@
 }
 
 .fox-pull-refresh__container-topbox-text {
-  font-size: var(--fox-font-size-base, 14px);
-  color: var(--fox-text-color, var(--el-text-color-regular));
+  font-size: var(--fox-font-size-base, var(--el-font-size-base));
+  color: var(--fox-text-color-regular, var(--el-text-color-regular));
 }
 
 .fox-more-button {
@@ -3765,7 +3769,7 @@
 }
 
 .fox-more-button__text {
-  font-size: var(--fox-font-size-base, 14px);
+  font-size: var(--fox-font-size-base, var(--el-font-size-base));
 }
 
 .fox-more-button > * + * {
@@ -3782,28 +3786,28 @@
   width: var(--fox-floating-button-width, 52px);
   height: var(--fox-floating-button-height, 52px);
   opacity: var(--fox-floating-button-opacity, 1);
-  background: var(--fox-floating-button-background, linear-gradient(136.56deg, var(--fox-color-primary, var(--el-color-primary)) 0%, var(--fox-color-primary-end, var(--el-color-primary-light-3)) 100%));
-  box-shadow: var(--fox-floating-button-box-shadow, 0px 3px 12px #31040014);
+  background: var(--fox-floating-button-background, var(--fox-color-primary, var(--el-color-primary)));
+  box-shadow: var(--fox-floating-button-box-shadow, var(--fox-box-shadow-light, var(--el-box-shadow-light)));
   border-radius: var(--fox-floating-button-border-radius, 50%);
-  color: var(--fox-floating-button-color, #fff);
+  color: var(--fox-floating-button-color, var(--fox-white, var(--el-color-white)));
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
 .fox-floating-button__icon {
-  width: var(--fox-floating-button-icon-size, 20px);
-  height: var(--fox-floating-button-icon-size, 20px);
+  width: var(--fox-floating-button-icon-size, var(--fox-font-size-extra-large, var(--el-font-size-extra-large)));
+  height: var(--fox-floating-button-icon-size, var(--fox-font-size-extra-large, var(--el-font-size-extra-large)));
 }
 
 .fox-price {
-  font-size: var(--fox-font-size-medium, 16px);
+  font-size: var(--fox-font-size-medium, var(--el-font-size-medium));
   color: var(--fox-color-primary, var(--el-color-primary));
   display: inline;
 }
 
 .fox-price--symbol {
-  font-size: var(--fox-font-size-medium, 16px);
+  font-size: var(--fox-font-size-medium, var(--el-font-size-medium));
   display: inline-block;
 }
 
@@ -3813,42 +3817,42 @@
 }
 
 .fox-price--decimal-large {
-  font-size: var(--fox-price-decimal-big-size, 18px);
+  font-size: var(--fox-price-decimal-big-size, var(--fox-font-size-large, var(--el-font-size-large)));
   display: inline-block;
 }
 
 .fox-price--symbol-large {
-  font-size: var(--fox-price-symbol-big-size, 18px);
+  font-size: var(--fox-price-symbol-big-size, var(--fox-font-size-large, var(--el-font-size-large)));
   display: inline-block;
 }
 
 .fox-price--normal {
-  font-size: var(--fox-price-medium-size, 16px);
+  font-size: var(--fox-price-medium-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   display: inline-block;
 }
 
 .fox-price--decimal-normal {
-  font-size: var(--fox-price-decimal-medium-size, 14px);
+  font-size: var(--fox-price-decimal-medium-size, var(--fox-font-size-base, var(--el-font-size-base)));
   display: inline-block;
 }
 
 .fox-price--symbol-normal {
-  font-size: var(--fox-price-symbol-medium-size, 14px);
+  font-size: var(--fox-price-symbol-medium-size, var(--fox-font-size-base, var(--el-font-size-base)));
   display: inline-block;
 }
 
 .fox-price--small {
-  font-size: var(--fox-price-small-size, 12px);
+  font-size: var(--fox-price-small-size, var(--fox-font-size-small, var(--el-font-size-small)));
   display: inline-block;
 }
 
 .fox-price--decimal-small {
-  font-size: var(--fox-price-decimal-small-size, 10px);
+  font-size: var(--fox-price-decimal-small-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
   display: inline-block;
 }
 
 .fox-price--symbol-small {
-  font-size: var(--fox-price-symbol-small-size, 10px);
+  font-size: var(--fox-price-symbol-small-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
   display: inline-block;
 }
 
@@ -3942,9 +3946,9 @@
 .fox-text {
   margin: var(--fox-text-margin, 0);
   padding: var(--fox-text-padding, 0);
-  font-size: var(--fox-text-font-size, var(--fox-font-size-base, 14px));
+  font-size: var(--fox-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-text-font-weight, 400);
-  color: var(--fox-text-color, var(--el-text-color));
+  color: var(--fox-text-text-color, var(--fox-black, var(--el-color-black)));
   word-break: break-all;
 }
 
@@ -3957,7 +3961,7 @@
 }
 
 .fox-text.is-highlight > * {
-  color: var(--fox-text-highlight-color, var(--fox-white, #fff)) !important;
+  color: var(--fox-text-highlight-color, var(--fox-white, var(--el-color-white))) !important;
   background: var(--fox-text-highlight-background-color, var(--fox-color-danger, var(--el-color-danger))) !important;
 }
 
@@ -3967,117 +3971,117 @@
 }
 
 .fox-text--primary {
-  color: var(--fox-text-primary-color, var(--el-color-primary));
+  color: var(--fox-text-primary-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-text--primary .fox-text__mark {
-  background-color: var(--fox-text-primary-color, var(--el-color-primary));
+  background-color: var(--fox-text-primary-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-text--success {
-  color: var(--fox-text-color-success, var(--el-color-success));
+  color: var(--fox-text-success-color, var(--fox-color-success, var(--el-color-success)));
 }
 
 .fox-text--success .fox-text__mark {
-  background-color: var(--fox-text-color-success, var(--el-color-success));
+  background-color: var(--fox-text-success-color, var(--fox-color-success, var(--el-color-success)));
 }
 
 .fox-text--info {
-  color: var(--fox-text-color-info, var(--el-color-info));
+  color: var(--fox-text-info-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-text--info .fox-text__mark {
-  background-color: var(--fox-text-color-info, var(--el-color-info));
+  background-color: var(--fox-text-info-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-text--warning {
-  color: var(--fox-text-color-warning, var(--el-color-warning));
+  color: var(--fox-text-warning-color, var(--fox-color-warning, var(--el-color-warning)));
 }
 
 .fox-text--warning .fox-text__mark {
-  background-color: var(--fox-text-color-warning, var(--el-color-warning));
+  background-color: var(--fox-text-warning-color, var(--fox-color-warning, var(--el-color-warning)));
 }
 
 .fox-text--danger {
-  color: var(--fox-text-color-danger, var(--el-color-danger));
+  color: var(--fox-text-danger-color, var(--fox-color-danger, var(--el-color-danger)));
 }
 
 .fox-text--danger .fox-text__mark {
-  background-color: var(--fox-text-color-danger, var(--el-color-danger));
+  background-color: var(--fox-text-danger-color, var(--fox-color-danger, var(--el-color-danger)));
 }
 
 .fox-text--default {
-  color: var(--fox-text-color, var(--el-text-color));
+  color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-text--default .fox-text__mark {
-  background-color: var(--fox-text-color, var(--el-text-color));
+  background-color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-text--large {
-  font-size: var(--fox-text-font-size-large, var(--el-font-size-large));
+  font-size: var(--fox-text-font-size-large, var(--fox-font-size-large, var(--el-font-size-large)));
 }
 
 .fox-text--small {
-  font-size: var(--fox-text-font-size-small, var(--el-font-size-extra-small));
+  font-size: var(--fox-text-font-size-small, var(--fox-font-size-small, var(--el-font-size-small)));
 }
 
 .fox-text__mark {
   box-sizing: border-box;
   width: var(--fox-text-mark-size, 4px);
   height: var(--fox-text-mark-size, 4px);
-  background-color: var(--fox-text-color, var(--el-text-color));
-  line-height: var(--fox-text-font-size, var(--fox-font-size-base, 14px));
+  background-color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
+  line-height: var(--fox-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   border-radius: 50%;
   display: inline-block;
 }
 
 .fox-text__mark--primary {
-  background-color: var(--fox-text-primary-color, var(--el-color-primary));
+  background-color: var(--fox-text-primary-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-text__mark--success {
-  background-color: var(--fox-text-color-success, var(--el-color-success));
+  background-color: var(--fox-text-success-color, var(--fox-color-success, var(--el-color-success)));
 }
 
 .fox-text__mark--warning {
-  background-color: var(--fox-text-color-warning, var(--el-color-warning));
+  background-color: var(--fox-text-warning-color, var(--fox-color-warning, var(--el-color-warning)));
 }
 
 .fox-text__mark--danger {
-  background-color: var(--fox-text-color-danger, var(--el-color-danger));
+  background-color: var(--fox-text-danger-color, var(--fox-color-danger, var(--el-color-danger)));
 }
 
 .fox-text__mark--default {
-  background-color: var(--fox-text-color, var(--el-text-color));
+  background-color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-text__mark-wrap {
   box-sizing: content-box;
-  color: var(--fox-text-color, var(--el-text-color));
+  color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
 .fox-text__mark-wrap--primary {
-  color: var(--fox-text-primary-color, var(--el-color-primary));
+  color: var(--fox-text-primary-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-text__mark-wrap--success {
-  color: var(--fox-text-color-success, var(--el-color-success));
+  color: var(--fox-text-success-color, var(--fox-color-success, var(--el-color-success)));
 }
 
 .fox-text__mark-wrap--warning {
-  color: var(--fox-text-color-warning, var(--el-color-warning));
+  color: var(--fox-text-warning-color, var(--fox-color-warning, var(--el-color-warning)));
 }
 
 .fox-text__mark-wrap--danger {
-  color: var(--fox-text-color-danger, var(--el-color-danger));
+  color: var(--fox-text-danger-color, var(--fox-color-danger, var(--el-color-danger)));
 }
 
 .fox-text__mark-wrap--default {
-  color: var(--fox-text-color, var(--el-text-color));
+  color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-text__mark-wrap svg {
@@ -4112,7 +4116,7 @@
   margin: var(--fox-text-divide-margin, 0 0);
   height: var(--fox-text-divide-height, 12px);
   width: var(--fox-text-divide-width, 1px);
-  background: var(--fox-text-divide-color, var(--fox-border-color-light, #e4e7ed));
+  background: var(--fox-text-divide-color, var(--fox-border-color-light, var(--el-border-color-light)));
 }
 
 .fox-tour__mask {
@@ -4187,18 +4191,18 @@
 }
 
 .fox-theme-dark .fox-number-keyboard {
-  background-color: var(--fox-dark-background4, #323233);
+  background-color: var(--fox-dark-background-4, #323233);
 }
 
 .fox-theme-dark .fox-number-keyboard .fox-key__wrapper .fox-key {
-  color: var(--fox-dark-color, var(--fox-white, #fff));
-  background-color: var(--fox-dark-background5, #646566);
+  color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
+  background-color: var(--fox-dark-background-5, #646566);
 }
 
 .fox-number-keyboard {
-  width: var(--fox-numberkeyboard-width, 40%);
+  width: var(--fox-numberkeyboard-width, 100%);
   padding: var(--fox-numberkeyboard-padding, 0 0 22px 0);
-  background-color: var(--fox-numberkeyboard-background-color, #f2f3f5);
+  background-color: var(--fox-numberkeyboard-background-color, var(--fox-fill-color-base, var(--el-fill-color)));
   -webkit-user-select: none;
   user-select: none;
 }
@@ -4207,8 +4211,8 @@
   box-sizing: content-box;
   height: var(--fox-numberkeyboard-header-height, 34px);
   padding: var(--fox-numberkeyboard-header-padding, 6px 0 0 0);
-  color: var(--fox-numberkeyboard-header-color, #646566);
-  font-size: var(--fox-numberkeyboard-header-font-size, var(--fox-font-size-medium, 16px));
+  color: var(--fox-numberkeyboard-header-color, var(--fox-title-color2, var(--el-text-color-secondary)));
+  font-size: var(--fox-numberkeyboard-header-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   justify-content: center;
   align-items: center;
   display: flex;
@@ -4221,8 +4225,8 @@
 
 .fox-number-keyboard .fox-number-keyboard__header .fox-number-keyboard__close {
   padding: var(--fox-numberkeyboard-header-close-padding, 0 16px);
-  color: var(--fox-numberkeyboard-header-close-color, #576b95);
-  font-size: var(--fox-numberkeyboard-header-close-font-size, var(--fox-font-size-base, 14px));
+  color: var(--fox-numberkeyboard-header-close-color, var(--fox-text-color--secondary, var(--el-text-color-secondary)));
+  font-size: var(--fox-numberkeyboard-header-close-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   background-color: var(--fox-numberkeyboard-header-close-background-color, transparent);
   cursor: pointer;
   border: none;
@@ -4255,13 +4259,13 @@
 }
 
 .fox-number-keyboard .fox-number-keyboard__body .fox-number-keyboard__sidebar .fox-key__wrapper .fox-key--finish {
-  font-size: var(--fox-numberkeyboard-key-finish-font-size, var(--fox-font-size-medium, 16px));
-  color: var(--fox-numberkeyboard-key-finish-font-size-color, #fff);
-  background-color: var(--fox-numberkeyboard-key-finish-background-color, #1989fa);
+  font-size: var(--fox-numberkeyboard-key-finish-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
+  color: var(--fox-numberkeyboard-key-finish-font-size-color, var(--fox-white, var(--el-color-white)));
+  background-color: var(--fox-numberkeyboard-key-finish-background-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-number-keyboard .fox-number-keyboard__body .fox-number-keyboard__sidebar .fox-key__wrapper .activeFinsh {
-  background-color: var(--fox-numberkeyboard-key-activeFinsh-background-color, #0570db);
+  background-color: var(--fox-numberkeyboard-key-activeFinsh-background-color, var(--fox-color-primary-dark-2, var(--el-color-primary-dark-2)));
 }
 
 .fox-key__wrapper {
@@ -4279,8 +4283,8 @@
   height: var(--fox-numberkeyboard-key-height, 48px);
   font-size: var(--fox-numberkeyboard-key-font-size, 28px);
   line-height: var(--fox-numberkeyboard-key-line-height, 1.5);
-  background-color: var(--fox-numberkeyboard-key-background-color, #fff);
-  color: var(--fox-numberkeyboard-key-font-size-color, #333);
+  background-color: var(--fox-numberkeyboard-key-background-color, var(--fox-white, var(--el-color-white)));
+  color: var(--fox-numberkeyboard-key-font-size-color, var(--fox-title-color, var(--el-text-color-primary)));
   border-radius: var(--fox-numberkeyboard-key-border-radius, 8px);
   cursor: pointer;
   justify-content: center;
@@ -4289,7 +4293,7 @@
 }
 
 .fox-key__wrapper .fox-key--active {
-  background-color: var(--fox-numberkeyboard-key-active-background-color, #ebedf0);
+  background-color: var(--fox-numberkeyboard-key-active-background-color, var(--fox-border-color-lighter, var(--el-border-color-lighter)));
 }
 
 .fox-key__wrapper img {
@@ -4309,11 +4313,11 @@
 }
 
 .fox-theme-dark .fox-short-password-title {
-  color: var(--fox-dark-color, var(--fox-white, #fff));
+  color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-theme-dark .fox-short-password-wrapper .fox-short-password__list {
-  background: var(--fox-dark-background3, #141414);
+  background: var(--fox-dark-background-3, #141414);
   border: none;
 }
 
@@ -4322,7 +4326,7 @@
 }
 
 .fox-theme-dark .fox-short-password-wrapper .fox-short-password__list .fox-short-password__item .fox-short-password__item-icon {
-  background: var(--fox-dark-color, var(--fox-white, #fff));
+  background: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-theme-dark .fox-short-password-wrapper .fox-short-password__list .fox-short-password__item:after {
@@ -4337,14 +4341,14 @@
 
 .fox-short-password-title {
   line-height: 1;
-  font-size: var(--fox-font-size-medium, 16px);
-  color: var(--fox-title-color, #1a1a1a);
+  font-size: var(--fox-font-size-medium, var(--el-font-size-medium));
+  color: var(--fox-title-color, var(--el-text-color-primary));
 }
 
 .fox-short-password-subtitle {
   line-height: 1;
-  font-size: var(--fox-font-size-small, 12px);
-  color: var(--fox-text-color, var(--el-text-color-regular));
+  font-size: var(--fox-font-size-small, var(--el-font-size-small));
+  color: var(--fox-text-color-regular, var(--el-text-color-regular));
   margin-top: 12px;
   display: block;
 }
@@ -4356,8 +4360,8 @@
 }
 
 .fox-short-password__list {
-  background: var(--fox-shortpassword-background-color, #f5f5f5);
-  border: 1px solid var(--fox-shortpassword-border-color, #ddd);
+  background: var(--fox-shortpassword-background-color, var(--fox-fill-color-base, var(--el-fill-color)));
+  border: 1px solid var(--fox-shortpassword-border-color, var(--fox-border-color-base, var(--el-border-color)));
   z-index: 10;
   border-radius: 4px;
   width: 100%;
@@ -4390,14 +4394,14 @@
 
 .fox-short-password__message .fox-short-password--error {
   line-height: 1;
-  font-size: var(--fox-font-size-extra-small, 10px);
+  font-size: var(--fox-font-size-extra-small, var(--el-font-size-extra-small));
   color: var(--fox-shortpassword-error, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-short-password__message .fox-short-password--forget {
   line-height: 1;
-  font-size: var(--fox-font-size-small, 12px);
-  color: var(--fox-shortpassword-forget, gray);
+  font-size: var(--fox-font-size-small, var(--el-font-size-small));
+  color: var(--fox-shortpassword-forget, var(--fox-text-color-regular, var(--el-text-color-regular)));
   display: flex;
 }