@fox-js/foxui 4.0.1-94 → 4.0.1-95

package/dist/style.css

@@ -316,8 +316,8 @@
 }
 
 .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, 18px));
+  width: var(--fox-header-bar-title-icon-size, var(--fox-font-size-large, 18px));
   margin-left: 13px;
   display: inline;
 }
@@ -343,8 +343,8 @@
 }
 
 .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, 18px));
+  width: var(--fox-header-bar-left-icon-size, var(--fox-font-size-large, 18px));
 }
 
 .fox-header-bar__right {
@@ -358,8 +358,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, 18px));
+  width: var(--fox-header-bar-right-icon-size, var(--fox-font-size-large, 18px));
   margin-left: 8px;
 }
 
@@ -581,10 +581,11 @@
 .fox-group__header-collapse {
   cursor: pointer;
   color: var(--fox-group-header-collapse-color, var(--fox-color-primary, #fa2c19));
-  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;
 }
 
@@ -593,8 +594,8 @@
 }
 
 .fox-group__header-collapse-icon {
-  width: var(--fox-group-header-collapse-icon-size, 12px);
-  height: var(--fox-group-header-collapse-icon-size, 12px);
+  width: var(--fox-group-header-collapse-icon-size, var(--fox-font-size-small, 12px));
+  height: var(--fox-group-header-collapse-icon-size, var(--fox-font-size-small, 12px));
   transition: transform .3s ease-in-out;
 }
 
@@ -650,7 +651,7 @@
 }
 
 .fox-item__input--border {
-  border-bottom: var(--fox-input-item-border-bottom, 1px solid var(--fox-input-border-bottom, #eaf0fb));
+  border-bottom: var(--fox-input-item-border-bottom, 1px solid var(--fox-input-border-bottom, var(--fox-border-color-light, #e4e7ed)));
 }
 
 .fox-item__main {
@@ -753,12 +754,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, 10px));
+  height: var(--fox-input-item-tip-icon-size, var(--fox-font-size-extra-small, 10px));
 }
 
 .fox-item__tip--info {
-  color: var(--fox-input-item-tip-info-color, var(--fox-color-info, #666));
+  color: var(--fox-input-item-tip-info-color, var(--fox-color-info, #498ff2));
 }
 
 .fox-item__tip--warn {
@@ -787,7 +788,8 @@
   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;
@@ -829,19 +831,19 @@
 }
 
 .fox-buttons-item__dropdown-link {
+  --fox-text-mark-icon-height: var(--fox-buttons-item-dropdown-link-icon-size, var(--fox-font-size-medium, 16px));
+  --fox-text-mark-icon-width: var(--fox-buttons-item-dropdown-link-icon-size, var(--fox-font-size-medium, 16px));
+  --fox-text-font-size: var(--fox-buttons-item-dropdown-link-text-font-size, var(--fox-font-size-small, 12px));
   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, 12px));
 }
 
 .fox-buttons-item__dropdown-item {
   white-space: nowrap;
   line-height: 22px;
   font-size: var(--fox-font-size-base, 14px);
-  color: var(--fox-text-color, gray);
+  color: var(--fox-text-color-regular, gray);
   cursor: pointer;
   outline: none;
   align-items: center;
@@ -852,7 +854,7 @@
 }
 
 .fox-buttons-item__dropdown-item:hover {
-  background-color: var(--fox-background-hover-color);
+  background-color: var(--fox-buttons-item-dropdown-item-hover-background-color);
 }
 
 .fox-buttons-item__dropdown-item.is-disabled {
@@ -860,10 +862,6 @@
   cursor: default;
 }
 
-.fox-buttons-item > * + * {
-  margin-left: var(--fox-buttons-item-gutter, 12px);
-}
-
 .fox-slot-item {
   padding: var(--fox-slot-item-padding, 0);
   margin: var(--fox-slot-item-margin, 0);
@@ -888,14 +886,14 @@
 }
 
 .fox-input-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, #ccc))) !important;
 }
 
 .fox-input-item.is-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, #ccc)));
   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, #ccc)));
   background: none;
 }
 
@@ -919,9 +917,9 @@
 }
 
 .fox-input-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, 14px));
+  height: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, 14px));
+  color: var(--fox-input-item-append-action-icon-color, var(--fox-disable-color, #ccc));
 }
 
 .fox-input-item__append .hidden {
@@ -956,14 +954,14 @@
 }
 
 .fox-money-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, #ccc))) !important;
 }
 
 .fox-money-item.is-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, #ccc)));
   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, #ccc)));
   background: none;
 }
 
@@ -983,9 +981,9 @@
 }
 
 .fox-money-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, 14px));
+  height: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, 14px));
+  color: var(--fox-input-item-append-action-icon-color, var(--fox-disable-color, #ccc));
 }
 
 .fox-money-item__append .hidden {
@@ -1036,7 +1034,7 @@
 
 .fox-textarea__limit {
   font-size: var(--fox-textarea-font, var(--fox-font-size-base, 14px));
-  color: var(--fox-textarea-limit-color, var(--fox-text-color, gray));
+  color: var(--fox-textarea-limit-color, var(--fox-text-color-regular, gray));
   position: absolute;
   bottom: 12px;
   right: 15px;
@@ -1114,12 +1112,12 @@
 
 .fox-radio__button {
   padding: var(--fox-radio-button-padding, 5px 18px);
-  font-size: var(--fox-radio-button-font-size, 12px);
-  background: var(--fox-radio-button-background, #fff);
+  font-size: var(--fox-radio-button-font-size, var(--fox-font-size-small, 12px));
+  background: var(--fox-radio-button-background, var(--fox-white, #fff));
   border-radius: var(--fox-radio-button-border-radius, 4px);
-  color: var(--fox-radio-label-color, #1d1e1e);
+  color: var(--fox-radio-label-color, var(--fox-title-color, #1a1a1a));
   box-sizing: border-box;
-  border: 1px solid var(--fox-radio-label-button-border-color, #ddd);
+  border: 1px solid var(--fox-radio-label-button-border-color, var(--fox-border-color, #dcdfe6));
   min-width: var(--fox-radio-button-min-width, 100px);
   justify-content: center;
   align-items: center;
@@ -1135,14 +1133,14 @@
 }
 
 .fox-radio__button--active {
-  background: var(--fox-radio-button-background-active, #f5e6e3);
+  background: var(--fox-radio-button-background-active, var(--fox-color-primary-light-9, #ffeae8));
   color: var(--fox-radio-label-active-color, var(--fox-color-primary, #fa2c19));
   border: 1px solid var(--fox-radio-button-border-color-active, var(--fox-color-primary, #fa2c19));
   position: relative;
 }
 
 .fox-radio__button--active:after {
-  background-color: var(--fox-radio-button-background, #fff);
+  background-color: var(--fox-radio-button-background, var(--fox-white, #fff));
   opacity: .05;
   content: "";
   width: 100%;
@@ -1153,8 +1151,8 @@
 
 .fox-radio__label {
   margin-left: var(--fox-radio-label-margin-left, 15px);
-  font-size: var(--fox-radio-label-font-size, 14px);
-  color: var(--fox-radio-label-color, #1d1e1e);
+  font-size: var(--fox-radio-label-font-size, var(--fox-font-size-base, 14px));
+  color: var(--fox-radio-label-color, var(--fox-title-color, #1a1a1a));
   flex: 1;
 }
 
@@ -1181,7 +1179,7 @@
 }
 
 .fox-radio__icon--unchecked {
-  color: var(--fox-radio-icon-unchecked-color, #d6d6d6);
+  color: var(--fox-radio-icon-unchecked-color, var(--fox-disable-color, #ccc));
 }
 
 .fox-radio-group {
@@ -1251,12 +1249,12 @@
 
 .fox-checkbox__button {
   padding: var(--fox-checkbox-button-padding, 5px 18px);
-  font-size: var(--fox-checkbox-button-font-size, 12px);
-  background: var(--fox-checkbox-button-background, #fff);
-  color: var(--fox-checkbox-label-color, #1d1e1e);
+  font-size: var(--fox-checkbox-button-font-size, var(--fox-font-size-small, 12px));
+  background: var(--fox-checkbox-button-background, var(--fox-white, #fff));
+  color: var(--fox-checkbox-label-color, var(--fox-title-color, #1a1a1a));
   border-radius: var(--fox-checkbox-button-border-radius, 4px);
   box-sizing: border-box;
-  border: 1px solid var(--fox-checkbox-button-border-color, #ddd);
+  border: 1px solid var(--fox-checkbox-button-border-color, var(--fox-border-color, #dcdfe6));
   min-width: var(--fox-checkbox-button-min-width, 100px);
   align-items: center;
   display: inline-flex;
@@ -1271,14 +1269,14 @@
 }
 
 .fox-checkbox__button--active {
-  background: var(--fox-checkbox-button-background-active, #f5e6e3);
+  background: var(--fox-checkbox-button-background-active, var(--fox-color-primary-light-9, #ffeae8));
   color: var(--fox-checkbox-label-active-color, var(--fox-color-primary, #fa2c19));
   border: 1px solid var(--fox-checkbox-button-border-color-active, var(--fox-color-primary, #fa2c19));
   position: relative;
 }
 
 .fox-checkbox__button--active:after {
-  background-color: var(--fox-checkbox-button-background-active, #f5e6e3);
+  background-color: var(--fox-checkbox-button-background-active, var(--fox-color-primary-light-9, #ffeae8));
   opacity: .05;
   content: "";
   width: 100%;
@@ -1289,8 +1287,8 @@
 
 .fox-checkbox__label {
   margin-left: var(--fox-checkbox-label-margin-left, 15px);
-  font-size: var(--fox-checkbox-label-font-size, 14px);
-  color: var(--fox-checkbox-label-color, #1d1e1e);
+  font-size: var(--fox-checkbox-label-font-size, var(--fox-font-size-base, 14px));
+  color: var(--fox-checkbox-label-color, var(--fox-title-color, #1a1a1a));
   flex: 1;
 }
 
@@ -1304,7 +1302,7 @@
 
 .fox-checkbox__icon {
   color: var(--fox-checkbox-icon-color, var(--fox-color-primary, #fa2c19));
-  font-size: var(--fox-checkbox-icon-font-size, 18px);
+  font-size: var(--fox-checkbox-icon-font-size, var(--fox-font-size-large, 18px));
   transition-property: color, border-color, background-color;
   transition-duration: .3s;
 }
@@ -1319,7 +1317,7 @@
 
 .fox-checkbox__icon--indeterminate {
   color: var(--fox-checkbox-icon-color, var(--fox-color-primary, #fa2c19));
-  font-size: var(--fox-checkbox-icon-font-size, 18px);
+  font-size: var(--fox-checkbox-icon-font-size, var(--fox-font-size-large, 18px));
 }
 
 .fox-checkbox__icon--indeterminate.is-disabled {
@@ -1331,8 +1329,8 @@
 }
 
 .fox-checkbox__icon--unchecked {
-  color: var(--fox-checkbox-icon-unchecked-color, #d6d6d6);
-  font-size: var(--fox-checkbox-icon-font-size, 18px);
+  color: var(--fox-checkbox-icon-unchecked-color, var(--fox-disable-color, #ccc));
+  font-size: var(--fox-checkbox-icon-font-size, var(--fox-font-size-large, 18px));
 }
 
 .fox-checkbox-group {
@@ -1360,7 +1358,7 @@
   width: 100%;
 }
 
-.fox-switch-item {
+.fox-switch-item__content {
   padding: var(--fox-switch-item-padding, 0 29px 0 0);
   justify-content: flex-end;
   align-items: center;
@@ -1370,11 +1368,11 @@
 .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, 0px 12px 32px 4px #0000000a, 0px 8px 20px #00000014));
   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);
+  background-color: var(--fox-hint-text-background-color, var(--fox-overlay-text-bg-color, #000c));
   opacity: 0;
   border: 0 solid #0000004d;
   border-radius: 3px;
@@ -1422,7 +1420,7 @@
 .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, #000c));
   position: absolute;
 }
 
@@ -1476,7 +1474,7 @@
 }
 
 .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, #ccc))) !important;
 }
 
 .fox-link-item__append {
@@ -1495,13 +1493,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, 14px));
+  height: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, 14px));
+  color: var(--fox-input-item-append-action-icon-color, var(--fox-disable-color, #ccc));
 }
 
 .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, #ccc)));
 }
 
 .fox-link-item__main {
@@ -1511,7 +1509,7 @@
 .fox-link-item__sub {
   width: 100%;
   font-size: var(--fox-link-item-sub-font-size, var(--fox-font-size-small, 12px));
-  color: var(--fox-link-item-sub-color, var(--fox-text-color--secondary, #909399));
+  color: var(--fox-link-item-sub-color, var(--fox-text-color-secondary, #909399));
 }
 
 .fox-actionsheet {
@@ -1529,16 +1527,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, 18px));
   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, #1a1a1a));
 }
 
 .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, #909399));
+  width: var(--fox-actionsheet-header-icon-size, var(--fox-font-size-medium, 16px));
+  height: var(--fox-actionsheet-header-icon-size, var(--fox-font-size-medium, 16px));
   margin-left: auto;
 }
 
@@ -1556,9 +1554,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, #ebeef5));
   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, #f5f5f5));
   box-shadow: none;
 }
 
@@ -1603,29 +1601,29 @@
 }
 
 .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, 16px));
   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, #1a1a1a));
   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, 12px));
   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, #909399));
   text-align: left;
 }
 
 .fox-actionsheet__list-item-icon {
-  color: var(--fox-actionsheet-list-item-icon-color, var(--fox-radio-icon-unchecked-color, #d6d6d6));
+  color: var(--fox-actionsheet-list-item-icon-color, var(--fox-radio-icon-unchecked-color, var(--fox-disable-color, #ccc)));
   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, 16px)) !important;
+  height: var(--fox-actionsheet-list-item-icon-size, var(--fox-font-size-medium, 16px)) !important;
 }
 
 .fox-actionsheet__list-item.is-checked .fox-actionsheet__list-item-icon {
@@ -1687,7 +1685,7 @@
   width: var(--fox-input-number-item-input-widht, 40px);
   font-size: var(--fox-input-item-font-size, var(--fox-font-size-base, 14px));
   color: var(--fox-input-number-item-input-color, var(--fox-input-item-color, var(--fox-black, #000)));
-  background: var(--fox-input-number-item-input-background, #f5f5f5);
+  background: var(--fox-input-number-item-input-background, var(--fox-fill-color-base, #f5f5f5));
 }
 
 .fox-input-number-item .fox-input-number--disabled input {
@@ -1696,12 +1694,12 @@
 
 .fox-input-number-item .fox-input-number__left {
   color: var(--fox-input-number-item-left-color, var(--fox-input-item-color, var(--fox-black, #000)));
-  background-color: var(--fox-input-number-item-left-background, #f5f5f5);
+  background-color: var(--fox-input-number-item-left-background, var(--fox-fill-color-base, #f5f5f5));
   border-radius: 4px 0 0 4px;
 }
 
 .fox-input-number-item .fox-input-number__right {
-  color: var(--fox-input-number-item-right-color, #fff);
+  color: var(--fox-input-number-item-right-color, var(--fox-white, #fff));
   background-color: var(--fox-input-number-item-right-background, var(--fox-color-primary, #fa2c19));
   border-radius: 0 4px 4px 0;
 }
@@ -1726,7 +1724,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, #f5f5f5));
   border-radius: var(--fox-tabs-bar-titles-border-radius, 0);
   flex-shrink: 0;
   display: flex;
@@ -1741,7 +1739,7 @@
 
 .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-weight: var(--fox-tabs-bar-item-font-weight, normal);
   font-size: var(--fox-tabs-bar-item-font-size-default, var(--fox-font-size-base, 14px));
   margin: 0 var(--fox-tabs-bar-item-gutter, 10px);
   flex: 1 0 auto;
@@ -1770,20 +1768,21 @@
 
 .fox-tabs-bar__titles-item.button {
   margin: auto var(--fox-tabs-bar-item-gutter-button, 8px);
-  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);
+  padding: var(--fox-tabs-bar-item-padding-button, 6px 12px);
+  width: var(--fox-tabs-bar-item-width-button, auto);
+  height: var(--fox-tabs-bar-item-height-button, auto);
+  background: var(--fox-tabs-bar-item-background-button, var(--fox-white, #fff));
+  color: var(--fox-tabs-bar-item-color-button, var(--fox-title-color-secondary, #666));
+  font-size: var(--fox-tabs-bar-item-font-size-button, var(--fox-font-size-small, 12px));
   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, #fff));
   color: var(--fox-tabs-bar-item-color-active-button, var(--fox-color-primary, #fa2c19));
-  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, 12px));
   font-weight: var(--fox-tabs-bar-item-font-weight-button, 400);
   border: var(--fox-tabs-bar-item-border-active-button, 1px solid transparent);
 }
@@ -1807,9 +1806,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, #fff));
   color: var(--fox-tabs-bar-item-color-button-group, var(--fox-color-primary, #fa2c19));
-  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, 14px));
   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, #fa2c19));
   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, #fa2c19));
@@ -1820,8 +1819,8 @@
 
 .fox-tabs-bar__titles-item.button-group.active {
   background: var(--fox-tabs-bar-item-background-active-button-group, var(--fox-color-primary, #fa2c19));
-  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, #fff));
+  font-size: var(--fox-tabs-bar-item-font-size-active-button-group, var(--fox-font-size-base, 14px));
   font-weight: var(--fox-tabs-bar-item-font-weight-button-group, 400);
 }
 
@@ -1833,18 +1832,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-color-secondary, #666));
+  font-size: var(--fox-tabs-bar-item-font-size-capsule, var(--fox-font-size-base, 14px));
   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, #fff));
   color: var(--fox-tabs-bar-item-color-active-capsule, var(--fox-color-primary, #fa2c19));
-  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, 14px));
   font-weight: var(--fox-tabs-bar-item-font-weight-capsule, 400);
 }
 
@@ -1869,8 +1868,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%;
@@ -1880,10 +1879,10 @@
 
 .fox-tabs-bar__titles-item-tip {
   line-height: 1;
-  font-size: var(--fox-tabs-bar-item-tip-font-size, 10px);
+  font-size: var(--fox-tabs-bar-item-tip-font-size, var(--fox-font-size-extra-small, 10px));
   color: var(--fox-tabs-bar-item-tip-color, var(--fox-white, #fff));
   background: var(--fox-tabs-bar-item-tip-background, var(--fox-color-primary, #fa2c19));
-  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, #fff));
   border-radius: 50%;
   position: absolute;
   top: 0;
@@ -2046,14 +2045,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, #f5f5f5));
   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, #f5f5f5));
   flex-flow: row;
   justify-content: flex-end;
   align-items: center;
@@ -2064,10 +2063,10 @@
 }
 
 .fox-tabs-bar__popup {
-  background: var(--fox-tabs-bar-popup-background, #fff);
+  background: var(--fox-tabs-bar-popup-background, var(--fox-white, #fff));
   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, 0px 12px 32px 4px #0000000a, 0px 8px 20px #00000014));
   z-index: 1;
   opacity: 0;
   flex-flow: wrap;
@@ -2084,8 +2083,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, #1a1a1a));
+  background: var(--fox-tabs-bar-popup-item-background, var(--fox-fill-color-base, #f5f5f5));
   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;
@@ -2093,7 +2092,7 @@
 
 .fox-tabs-bar__popup-item.active {
   color: var(--fox-tabs-bar-popup-item-color-active, var(--fox-color-primary, #fa2c19));
-  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, #ffeae8));
 }
 
 .fox-tabs-bar__popup--show {
@@ -2525,23 +2524,23 @@
   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, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
-  box-shadow: var(--fox-floating-button-box-shadow, 0px 3px 12px #31040014);
+  background: var(--fox-floating-button-background, var(--fox-color-primary, #fa2c19));
+  box-shadow: var(--fox-floating-button-box-shadow, var(--fox-box-shadow-light, 0px 0px 12px #0000001f));
   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, #fff));
   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, 20px));
+  height: var(--fox-floating-button-icon-size, var(--fox-font-size-extra-large, 20px));
 }
 
 .fox-more-button {
   cursor: pointer;
-  color: var(--fox-color-info, #666);
+  color: var(--fox-color-info, #498ff2);
   flex-flow: row;
   justify-content: flex-start;
   align-items: center;
@@ -2553,7 +2552,7 @@
 }
 
 .fox-more-button--info {
-  color: var(--fox-color-info, #666);
+  color: var(--fox-color-info, #498ff2);
 }
 
 .fox-more-button--success {
@@ -2601,9 +2600,9 @@
 }
 
 .fox-messagebox {
-  background: var(--fox-messagebox-background, #fff);
+  background: var(--fox-messagebox-background, var(--fox-white, #fff));
   border-radius: var(--fox-messagebox-border-radius, 8px);
-  box-shadow: var(--fox-messagebox-box-shadow, 0px 2px 8px #9e9e9e33);
+  box-shadow: var(--fox-messagebox-box-shadow, var(--fox-box-shadow-light, 0px 0px 12px #0000001f));
   display: block;
 }
 
@@ -2621,24 +2620,24 @@
 
 .fox-messagebox__header-title {
   box-sizing: border-box;
-  padding: var(--fox-actionsheet-header-title-padding, 10px 0);
-  font-size: var(--fox-actionsheet-header-title-font-size, 16px);
-  font-weight: var(--fox-actionsheet-header-title-font-weight, 600);
-  color: var(--fox-actionsheet-header-title-color, #333);
+  padding: var(--fox-messagebox-header-title-padding, 10px 0);
+  font-size: var(--fox-messagebox-header-title-font-size, var(--fox-font-size-medium, 16px));
+  font-weight: var(--fox-messagebox-header-title-font-weight, 600);
+  color: var(--fox-messagebox-header-title-color, var(--fox-title-color, #1a1a1a));
   display: block;
 }
 
 .fox-messagebox__header-icon {
-  color: var(--fox-actionsheet-header-icon-color, #969799);
-  width: var(--fox-actionsheet-header-icon-size, 110px);
-  height: var(--fox-actionsheet-header-icon-size, 110px);
+  color: var(--fox-messagebox-header-icon-color, var(--fox-text-color-secondary, #909399));
+  width: var(--fox-messagebox-header-icon-size, 110px);
+  height: var(--fox-messagebox-header-icon-size, 110px);
 }
 
 .fox-messagebox__header-close-icon {
   cursor: pointer;
-  color: var(--fox-messagebox-header-close-icon-color, #969799);
-  width: var(--fox-messagebox-header-close-icon-size, 16px);
-  height: var(--fox-messagebox-header-close-icon-size, 16px);
+  color: var(--fox-messagebox-header-close-icon-color, var(--fox-text-color-secondary, #909399));
+  width: var(--fox-messagebox-header-close-icon-size, var(--fox-font-size-medium, 16px));
+  height: var(--fox-messagebox-header-close-icon-size, var(--fox-font-size-medium, 16px));
   top: 24px;
   right: 24px;
   position: absolute !important;
@@ -2663,11 +2662,11 @@
 .fox-messagebox__body:not(:has(.fox-messagebox__group)) {
   padding-left: var(--fox-messagebox-padding-left, 16px);
   padding-right: var(--fox-messagebox-padding-right, 16px);
-  font-size: var(--fox-messagebox-font-size, 14px);
-  font-weight: var(--fox-messagebox-g-font-weight, 400);
+  font-size: var(--fox-messagebox-font-size, var(--fox-font-size-base, 14px));
+  font-weight: var(--fox-messagebox-font-weight, 400);
   line-height: var(--fox-messagebox-line-height, 24px);
-  text-align: var(--fox-messagebox--text-align, center);
-  color: var(--fox-messagebox-color, #333);
+  text-align: var(--fox-messagebox-text-align, center);
+  color: var(--fox-messagebox-color, var(--fox-title-color, #1a1a1a));
 }
 
 .fox-messagebox__group {
@@ -2677,10 +2676,10 @@
 .fox-messagebox__group-title {
   box-sizing: border-box;
   padding: var(--fox-messagebox-group-title-padding, 10px var(--fox-messagebox-padding-right, 16px) 10px var(--fox-messagebox-padding-left, 16px));
-  font-size: var(--fox-messagebox-group-title-font-size, 12px);
+  font-size: var(--fox-messagebox-group-title-font-size, var(--fox-font-size-small, 12px));
   font-weight: var(--fox-messagebox-group-title-font-weight, 400);
-  line-height: var(--fox-messagebox-group-title-line-height, 18px);
-  color: var(--fox-messagebox-group-title-color, #666);
+  line-height: var(--fox-messagebox-group-title-line-height, 1.5);
+  color: var(--fox-messagebox-group-title-color, var(--fox-title-color-secondary, #666));
   text-align: var(--fox-messagebox-group-title-text-align, left);
   display: block;
 }
@@ -2694,10 +2693,10 @@
 .fox-messagebox__group-row {
   box-sizing: border-box;
   padding: var(--fox-messagebox-group-row-padding, 10px 0);
-  font-size: var(--fox-messagebox-group-row-font-size, 14px);
+  font-size: var(--fox-messagebox-group-row-font-size, var(--fox-font-size-base, 14px));
   font-weight: var(--fox-messagebox-group-row-font-weight, 400);
-  line-height: var(--fox-messagebox-group-row-line-height, 24px);
-  color: var(--fox-messagebox-group-row-color, #333);
+  line-height: var(--fox-messagebox-group-row-line-height, 1.6);
+  color: var(--fox-messagebox-group-row-color, var(--fox-title-color, #1a1a1a));
   text-align: var(--fox-messagebox-group-row-text-align, left);
   display: block;
 }
@@ -2706,7 +2705,7 @@
   margin: var(--fox-messagebox-footer-margin, 16px 0 0 0);
   width: var(--fox-messagebox-footer-width, 100%);
   height: var(--fox-messagebox-footer-height, auto);
-  border-top: var(--messagebox-footer-border-top, 1px solid #eee);
+  border-top: var(--messagebox-footer-border-top, 1px solid var(--fox-border-color-lighter, #ebeef5));
   justify-content: center;
   align-items: center;
   display: flex;
@@ -2714,7 +2713,7 @@
 
 .fox-messagebox__footer-button {
   padding: var(--fox-messagebox-footer-button-padding, 10px);
-  font-size: var(--fox-messagebox-footer-button-font-size, 16px);
+  font-size: var(--fox-messagebox-footer-button-font-size, var(--fox-font-size-medium, 16px));
   font-weight: var(--fox-messagebox-footer-button-font-weight, 400);
   background-color: #0000;
   border: none;
@@ -2750,7 +2749,7 @@
 }
 
 .fox-messagebox__popup {
-  width: var(--fox-messagebox-background, 80%);
+  width: var(--fox-messagebox-width, 80%);
   height: var(--fox-messagebox-height, auto);
 }
 
@@ -2762,35 +2761,35 @@
 }
 
 .fox-messagebox--info {
-  background: var(--fox-messagebox-background-info, linear-gradient(180deg, aliceblue 0%, #fffefe 100%));
+  background: var(--fox-messagebox-background-info, linear-gradient(180deg, var(--fox-color-info-light-9, #edf4fd) 0%, var(--fox-white, #fff) 100%));
 }
 
 .fox-messagebox--info .fox-messagebox__group-rows {
-  background: var(--fox-messagebox-groups-rows-background-info, linear-gradient(180deg, aliceblue 0%, #fffefe 100%));
+  background: var(--fox-messagebox-groups-rows-background-info, var(--fox-color-info-light-9, #edf4fd));
 }
 
 .fox-messagebox--success {
-  background: var(--fox-messagebox-background-success, linear-gradient(180deg, #f7fffa 0%, #fffefe 100%));
+  background: var(--fox-messagebox-background-success, linear-gradient(180deg, var(--fox-color-success-light-9, #f0f9eb) 0%, var(--fox-white, #fff) 100%));
 }
 
 .fox-messagebox--success .fox-messagebox__group-rows {
-  background: var(--fox-messagebox-groups-rows-background-success, linear-gradient(180deg, #f7fffa 0%, #fffefe 100%));
+  background: var(--fox-messagebox-groups-rows-background-success, var(--fox-color-success-light-9, #f0f9eb));
 }
 
 .fox-messagebox--warning {
-  background: var(--fox-messagebox-background-warning, linear-gradient(246.46deg, #fff8e7 0%, #fffefe 100%));
+  background: var(--fox-messagebox-background-warning, linear-gradient(180deg, var(--fox-color-warning-light-9, #fff7e6) 0%, var(--fox-white, #fff) 100%));
 }
 
 .fox-messagebox--warning .fox-messagebox__group-rows {
-  background: var(--fox-messagebox-groups-rows-background-warning, linear-gradient(90deg, #fff8e6 0%, #f4f6ff 100%));
+  background: var(--fox-messagebox-groups-rows-background-warning, var(--fox-color-warning-light-9, #fff7e6));
 }
 
 .fox-messagebox--error {
-  background: var(--fox-messagebox-background-error, linear-gradient(247.52deg, #fff3ef 0%, #fffefe 100%));
+  background: var(--fox-messagebox-background-error, linear-gradient(180deg, var(--fox-color-danger-light-9, #fcecea) 0%, var(--fox-white, #fff) 100%));
 }
 
 .fox-messagebox--error .fox-messagebox__group-rows {
-  background: var(--fox-messagebox-groups-rows-background-error, linear-gradient(90deg, #fff3ef 0%, #fff7f4 100%));
+  background: var(--fox-messagebox-groups-rows-background-error, var(--fox-color-danger-light-9, #fcecea));
 }
 
 .fox-popup-wrapper {
@@ -2800,7 +2799,7 @@
   min-height: var(--fox-popup-wrapper-min-height, 160px);
   padding: var(--fox-popup-wrapper-padding, 0px);
   box-sizing: border-box;
-  background: var(--fox-popup-wrapper-background, #0000);
+  background: var(--fox-popup-wrapper-background, transparent);
   flex-flow: column;
   justify-content: flex-start;
   align-items: stretch;
@@ -2813,24 +2812,24 @@
   justify-content: var(--fox-popup-wrapper-header-justify-content, center);
   align-items: var(--fox-popup-wrapper-header-align-items, center);
   height: var(--fox-popup-wrapper-header-height, 20px);
-  background: var(--fox-popup-wrapper-header-background, #0000);
+  background: var(--fox-popup-wrapper-header-background, transparent);
   padding: var(--fox-popup-wrapper-header-padding, 0px);
   display: flex;
   position: relative;
 }
 
 .fox-popup-wrapper__header-title {
-  font-size: var(--fox-popup-wrapper-header-font-size, 16px);
-  color: var(--fox-popup-wrapper-header-color, #262626);
+  font-size: var(--fox-popup-wrapper-header-font-size, var(--fox-font-size-medium, 16px));
+  color: var(--fox-popup-wrapper-header-color, var(--fox-title-color, #1a1a1a));
 }
 
 .fox-popup-wrapper__close-icon {
   inset: var(--fox-popup-wrapper-close-inset, 16px 16px auto auto);
   z-index: 20;
   cursor: pointer;
-  color: var(--fox-popup-wrapper-close-icon-color, #969799);
-  width: var(--fox-popup-wrapper-close-icon-size, 16px);
-  height: var(--fox-popup-wrapper-close-icon-size, 16px);
+  color: var(--fox-popup-wrapper-close-icon-color, var(--fox-text-color-secondary, #909399));
+  width: var(--fox-popup-wrapper-close-icon-size, var(--fox-font-size-medium, 16px));
+  height: var(--fox-popup-wrapper-close-icon-size, var(--fox-font-size-medium, 16px));
   position: absolute !important;
 }
 
@@ -2862,9 +2861,9 @@
 .fox-popup-wrapper--plain .fox-footer-bar .fox-button {
   min-width: auto;
   padding: var(--fox-popup-wrapper-footer-button-padding, 10px);
-  font-size: var(--fox-popup-wrapper-footer-button-font-size, 16px);
+  font-size: var(--fox-popup-wrapper-footer-button-font-size, var(--fox-font-size-medium, 16px));
   font-weight: var(--fox-popup-wrapper-footer-button-font-weight, 400);
-  color: var(--fox-popup-wrapper-footer-button-color, #666);
+  color: var(--fox-popup-wrapper-footer-button-color, var(--fox-title-color-secondary, #666));
   background: none;
   border: none;
   flex: 100%;
@@ -2895,15 +2894,15 @@
 }
 
 .fox-popup-wrapper--plain .fox-footer-bar .fox-button + .fox-button {
-  border-left: var(--fox-popup-wrapper-footer-button-border-left, 1px solid #eee);
+  border-left: var(--fox-popup-wrapper-footer-button-border-left, 1px solid var(--fox-border-color-lighter, #ebeef5));
 }
 
 .fox-popup-wrapper--plain .fox-footer-bar .fox-button--primary {
-  color: var(--fox-popup-wrapper-footer-button-color-primary, #dd412c);
+  color: var(--fox-popup-wrapper-footer-button-color-primary, var(--fox-color-primary, #fa2c19));
 }
 
 .fox-popup-wrapper .fox-header-bar {
-  background: var(--fox-popup-wrapper-header-background, #0000);
+  background: var(--fox-popup-wrapper-header-background, transparent);
 }
 
 .fox-popup-wrapper .fox-header-bar__left {
@@ -2924,8 +2923,8 @@
 
 .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);
+  color: var(--fox-popover-dialog-color, var(--fox-title-color, #1a1a1a));
+  background: var(--fox-popover-dialog-background-color, var(--fox-white, #fff));
   border: 1px solid var(--fox-border-color-lighter, #ebeef5);
   border-radius: var(--fox-popover-dialog-border-radius, 4px);
   box-shadow: var(--fox-box-shadow-light, 0px 0px 12px #0000001f);
@@ -2940,15 +2939,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, 16px));
   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, 12px));
+  width: var(--fox-popover-dialog-arrow-size, var(--fox-font-size-small, 12px));
+  background: var(--fox-popover-dialog-background-color, var(--fox-white, #fff));
   z-index: -1;
   clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
   position: absolute;
@@ -2959,7 +2958,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;
 }
@@ -2977,13 +2976,13 @@
 }
 
 .fox-popover-dialog.is-dark {
-  color: var(--fox-popover-dialog-dark-color, #fff);
-  background: var(--fox-popover-dialog-dark-background-color, #4b4c4d);
+  color: var(--fox-popover-dialog-color-dark, var(--fox-white, #fff));
+  background: var(--fox-popover-dialog-background-color-dark, var(--fox-title-color, #1a1a1a));
   border: 1px solid var(--fox-border-color-light, #e4e7ed);
 }
 
 .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, #1a1a1a));
 }
 
 @keyframes popover-show {
@@ -3011,7 +3010,7 @@
   padding: var(--fox-text-padding, 0);
   font-size: var(--fox-text-font-size, var(--fox-font-size-base, 14px));
   font-weight: var(--fox-text-font-weight, 400);
-  color: var(--fox-text-color, gray);
+  color: var(--fox-text-text-color, var(--fox-black, #000));
   word-break: break-all;
 }
 
@@ -3050,11 +3049,11 @@
 }
 
 .fox-text--info {
-  color: var(--fox-text-info-color, var(--fox-color-info, #666));
+  color: var(--fox-text-info-color, var(--fox-color-info, #498ff2));
 }
 
 .fox-text--info .fox-text__mark {
-  background-color: var(--fox-text-info-color, var(--fox-color-info, #666));
+  background-color: var(--fox-text-info-color, var(--fox-color-info, #498ff2));
 }
 
 .fox-text--warning {
@@ -3074,11 +3073,11 @@
 }
 
 .fox-text--default {
-  color: var(--fox-text-default-color, var(--fox-color-info, #666));
+  color: var(--fox-text-default-color, var(--fox-color-info, #498ff2));
 }
 
 .fox-text--default .fox-text__mark {
-  background-color: var(--fox-text-default-color, var(--fox-color-info, #666));
+  background-color: var(--fox-text-default-color, var(--fox-color-info, #498ff2));
 }
 
 .fox-text--large {
@@ -3093,7 +3092,7 @@
   box-sizing: border-box;
   width: var(--fox-text-mark-size, 4px);
   height: var(--fox-text-mark-size, 4px);
-  background-color: var(--fox-text-default-color, var(--fox-color-info, #666));
+  background-color: var(--fox-text-default-color, var(--fox-color-info, #498ff2));
   line-height: var(--fox-text-font-size, var(--fox-font-size-base, 14px));
   border-radius: 50%;
   display: inline-block;
@@ -3116,12 +3115,12 @@
 }
 
 .fox-text__mark--default {
-  background-color: var(--fox-text-default-color, var(--fox-color-info, #666));
+  background-color: var(--fox-text-default-color, var(--fox-color-info, #498ff2));
 }
 
 .fox-text__mark-wrap {
   box-sizing: content-box;
-  color: var(--fox-text-default-color, var(--fox-color-info, #666));
+  color: var(--fox-text-default-color, var(--fox-color-info, #498ff2));
   justify-content: center;
   align-items: center;
   display: flex;
@@ -3144,7 +3143,7 @@
 }
 
 .fox-text__mark-wrap--default {
-  color: var(--fox-text-default-color, var(--fox-color-info, #666));
+  color: var(--fox-text-default-color, var(--fox-color-info, #498ff2));
 }
 
 .fox-text__mark-wrap svg {
@@ -3245,38 +3244,38 @@
 }
 
 .fox-button--default {
-  color: var(--fox-button-default-color, #666);
+  color: var(--fox-button-default-color, var(--fox-title-color-secondary, #666));
   background: var(--fox-button-default-bg-color, var(--fox-white, #fff));
-  border: var(--fox-button-border-width, 1px) solid var(--fox-button-default-border-color, #ccc);
+  border: var(--fox-button-border-width, 1px) solid var(--fox-button-default-border-color, var(--fox-disable-color, #ccc));
 }
 
 .fox-button--primary {
   color: var(--fox-button-primary-color, var(--fox-white, #fff));
-  background: var(--fox-button-primary-background-color, linear-gradient(135deg, var(--fox-color-primary, var(--fox-color-primary, #fa2c19)) 0%, var(--fox-color-primary, var(--fox-color-primary, #fa2c19)) 100%));
+  background: var(--fox-button-primary-background-color, var(--fox-color-primary, #fa2c19));
   border: var(--fox-button-border-width, 1px) solid transparent;
 }
 
 .fox-button--info {
   color: var(--fox-button-info-color, var(--fox-white, #fff));
-  background: var(--fox-button-info-background-color, linear-gradient(315deg, #498ff2 0%, #4965f2 100%));
+  background: var(--fox-button-info-background-color, var(--fox-color-info, #498ff2));
   border: var(--fox-button-border-width, 1px) solid transparent;
 }
 
 .fox-button--success {
   color: var(--fox-button-success-color, var(--fox-white, #fff));
-  background: var(--fox-button-success-background-color, linear-gradient(135deg, #26bf26 0%, #27c530 45%, #28cf3f 83%, #29d446 100%));
+  background: var(--fox-button-success-background-color, var(--fox-color-success, #67c23a));
   border: var(--fox-button-border-width, 1px) solid transparent;
 }
 
 .fox-button--danger {
   color: var(--fox-button-danger-color, var(--fox-white, #fff));
-  background: var(--fox-button-danger-background-color, #fa2c19);
+  background: var(--fox-button-danger-background-color, var(--fox-color-danger, #dd412c));
   border: var(--fox-button-border-width, 1px) solid transparent;
 }
 
 .fox-button--warning {
   color: var(--fox-button-warning-color, var(--fox-white, #fff));
-  background: var(--fox-button-warning-background-color, linear-gradient(135deg, #ff9e0d 0%, #ffa70d 45%, #ffb60d 83%, #ffbe0d 100%));
+  background: var(--fox-button-warning-background-color, var(--fox-color-warning, #ffaa08));
   border: var(--fox-button-border-width, 1px) solid transparent;
 }
 
@@ -3290,23 +3289,23 @@
 }
 
 .fox-button--plain.fox-button--info {
-  color: var(--fox-button-info-border-color, #496af2);
-  border-color: var(--fox-button-info-border-color, #496af2);
+  color: var(--fox-button-info-border-color, var(--fox-color-info, #498ff2));
+  border-color: var(--fox-button-info-border-color, var(--fox-color-info, #498ff2));
 }
 
 .fox-button--plain.fox-button--success {
-  color: var(--fox-button-success-border-color, #26bf26);
-  border-color: var(--fox-button-success-border-color, #26bf26);
+  color: var(--fox-button-success-border-color, var(--fox-color-success, #67c23a));
+  border-color: var(--fox-button-success-border-color, var(--fox-color-success, #67c23a));
 }
 
 .fox-button--plain.fox-button--danger {
-  color: var(--fox-button-danger-border-color, #fa2c19);
-  border-color: var(--fox-button-danger-border-color, #fa2c19);
+  color: var(--fox-button-danger-border-color, var(--fox-color-danger, #dd412c));
+  border-color: var(--fox-button-danger-border-color, var(--fox-color-danger, #dd412c));
 }
 
 .fox-button--plain.fox-button--warning {
-  color: var(--fox-button-warning-border-color, #ff9e0d);
-  border-color: var(--fox-button-warning-border-color, #ff9e0d);
+  color: var(--fox-button-warning-border-color, var(--fox-color-warning, #ffaa08));
+  border-color: var(--fox-button-warning-border-color, var(--fox-color-warning, #ffaa08));
 }
 
 .fox-button--large {
@@ -3363,38 +3362,38 @@
 }
 
 .fox-button--default:not([disabled]):active {
-  color: var(--fox-button-default-color, #666);
+  color: var(--fox-button-default-color, var(--fox-title-color-secondary, #666));
   background: var(--fox-button-default-bg-color, var(--fox-white, #fff));
-  border: var(--fox-button-border-width, 1px) solid var(--fox-button-default-border-color, #ccc);
+  border: var(--fox-button-border-width, 1px) solid var(--fox-button-default-border-color, var(--fox-disable-color, #ccc));
 }
 
 .fox-button--primary:not([disabled]):active {
   color: var(--fox-button-primary-color, var(--fox-white, #fff));
-  background: var(--fox-button-primary-background-color, linear-gradient(135deg, var(--fox-color-primary, var(--fox-color-primary, #fa2c19)) 0%, var(--fox-color-primary, var(--fox-color-primary, #fa2c19)) 100%));
+  background: var(--fox-button-primary-background-color, var(--fox-color-primary, #fa2c19));
   border: var(--fox-button-border-width, 1px) solid transparent;
 }
 
 .fox-button--info:not([disabled]):active {
   color: var(--fox-button-info-color, var(--fox-white, #fff));
-  background: var(--fox-button-info-background-color, linear-gradient(315deg, #498ff2 0%, #4965f2 100%));
+  background: var(--fox-button-info-background-color, var(--fox-color-info, #498ff2));
   border: var(--fox-button-border-width, 1px) solid transparent;
 }
 
 .fox-button--success:not([disabled]):active {
   color: var(--fox-button-success-color, var(--fox-white, #fff));
-  background: var(--fox-button-success-background-color, linear-gradient(135deg, #26bf26 0%, #27c530 45%, #28cf3f 83%, #29d446 100%));
+  background: var(--fox-button-success-background-color, var(--fox-color-success, #67c23a));
   border: var(--fox-button-border-width, 1px) solid transparent;
 }
 
 .fox-button--danger:not([disabled]):active {
   color: var(--fox-button-danger-color, var(--fox-white, #fff));
-  background: var(--fox-button-danger-background-color, #fa2c19);
+  background: var(--fox-button-danger-background-color, var(--fox-color-danger, #dd412c));
   border: var(--fox-button-border-width, 1px) solid transparent;
 }
 
 .fox-button--warning:not([disabled]):active {
   color: var(--fox-button-warning-color, var(--fox-white, #fff));
-  background: var(--fox-button-warning-background-color, linear-gradient(135deg, #ff9e0d 0%, #ffa70d 45%, #ffb60d 83%, #ffbe0d 100%));
+  background: var(--fox-button-warning-background-color, var(--fox-color-warning, #ffaa08));
   border: var(--fox-button-border-width, 1px) solid transparent;
 }
 
@@ -3408,27 +3407,27 @@
 }
 
 .fox-button--plain.fox-button--info:not([disabled]):active {
-  color: var(--fox-button-info-border-color, #496af2);
-  border-color: var(--fox-button-info-border-color, #496af2);
+  color: var(--fox-button-info-border-color, var(--fox-color-info, #498ff2));
+  border-color: var(--fox-button-info-border-color, var(--fox-color-info, #498ff2));
 }
 
 .fox-button--plain.fox-button--success:not([disabled]):active {
-  color: var(--fox-button-success-border-color, #26bf26);
-  border-color: var(--fox-button-success-border-color, #26bf26);
+  color: var(--fox-button-success-border-color, var(--fox-color-success, #67c23a));
+  border-color: var(--fox-button-success-border-color, var(--fox-color-success, #67c23a));
 }
 
 .fox-button--plain.fox-button--danger:not([disabled]):active {
-  color: var(--fox-button-danger-border-color, #fa2c19);
-  border-color: var(--fox-button-danger-border-color, #fa2c19);
+  color: var(--fox-button-danger-border-color, var(--fox-color-danger, #dd412c));
+  border-color: var(--fox-button-danger-border-color, var(--fox-color-danger, #dd412c));
 }
 
 .fox-button--plain.fox-button--warning:not([disabled]):active {
-  color: var(--fox-button-warning-border-color, #ff9e0d);
-  border-color: var(--fox-button-warning-border-color, #ff9e0d);
+  color: var(--fox-button-warning-border-color, var(--fox-color-warning, #ffaa08));
+  border-color: var(--fox-button-warning-border-color, var(--fox-color-warning, #ffaa08));
 }
 
 .fox-theme-dark .fox-cell {
-  background: var(--fox-dark-background2, #1b1b1b);
+  background: var(--fox-dark-background-2, #1b1b1b);
   color: var(--fox-dark-color, var(--fox-white, #fff));
   box-shadow: none;
 }
@@ -3440,7 +3439,7 @@
   background: var(--fox-cell-background, var(--fox-white, #fff));
   border-radius: var(--fox-cell-border-radius, 6px);
   font-size: var(--fox-cell-title-font, var(--fox-font-size-base, 14px));
-  color: var(--fox-cell-color, var(--fox-title-color2, #666));
+  color: var(--fox-cell-color, var(--fox-title-color-secondary, #666));
   box-sizing: border-box;
   margin: 10px 0;
   display: flex;
@@ -3520,13 +3519,13 @@
 .fox-cell__value {
   text-align: right;
   font-size: var(--fox-cell-desc-font, var(--fox-font-size-base, 14px));
-  color: var(--fox-cell-desc-color, var(--fox-disable-color, #ccc));
+  color: var(--fox-cell-desc-color, var(--fox-text-color-secondary, #909399));
   flex: 1;
   display: inline-block;
 }
 
 .fox-cell__value--alone {
-  color: var(--fox-cell-color, var(--fox-title-color2, #666));
+  color: var(--fox-cell-color, var(--fox-title-color-secondary, #666));
 }
 
 .fox-cell__link {
@@ -3560,7 +3559,7 @@
 .fox-cell-group__title {
   display: inherit;
   padding: var(--fox-cell-group-title-padding, 0 10px);
-  color: var(--fox-cell-group-title-color, #909ca4);
+  color: var(--fox-cell-group-title-color, var(--fox-text-color-secondary, #909399));
   font-size: var(--fox-cell-group-title-font-size, var(--fox-font-size-base, 14px));
   line-height: var(--fox-cell-group-title-line-height, 20px);
   margin-top: 30px;
@@ -3570,7 +3569,7 @@
 .fox-cell-group__desc {
   display: inherit;
   padding: var(--fox-cell-group-desc-padding, 0 10px);
-  color: var(--fox-cell-group-desc-color, #909ca4);
+  color: var(--fox-cell-group-desc-color, var(--fox-text-color-secondary, #909399));
   font-size: var(--fox-cell-group-desc-font-size, var(--fox-font-size-small, 12px));
   line-height: var(--fox-cell-group-desc-line-height, 16px);
   margin-top: 10px;
@@ -3592,7 +3591,7 @@
 }
 
 .fox-cell-group .fox-cell:after {
-  border-bottom: var(--fox-cell-after-border-bottom, 1px solid #f5f6f7);
+  border-bottom: var(--fox-cell-after-border-bottom, 1px solid var(--fox-border-color-lighter, #ebeef5));
 }
 
 .overlay-fade-enter-active, .overlay-fade-leave-active {
@@ -3618,7 +3617,7 @@
 }
 
 .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 {
@@ -3724,8 +3723,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, 12px));
+  height: var(--fox-popup-close-icon-size, var(--fox-font-size-small, 12px));
 }
 
 .fox-popup__close-icon:active {
@@ -4068,7 +4067,7 @@
 
 .fox-divider {
   font-size: var(--fox-divider-text-font-size, var(--fox-font-size-base, 14px));
-  color: var(--fox-divider-text-color, #909ca4);
+  color: var(--fox-divider-text-color, var(--fox-text-color-secondary, #909399));
   margin: var(--fox-divider-margin, 16px 0);
   align-items: center;
   display: flex;
@@ -4105,14 +4104,14 @@
 .fox-divider.fox-divider-vertical {
   top: var(--fox-divider-vertical-top, 2px);
   height: var(--fox-divider-vertical-height, 12px);
-  border-left: 1px solid var(--fox-divider-vertical-border-left, #0000000f);
+  border-left: 1px solid var(--fox-divider-vertical-border-left, var(--fox-border-color, #dcdfe6));
   margin: var(--fox-divider-vertical-margin, 0 8px);
   display: inline-block;
   position: relative;
 }
 
 .fox-grid {
-  border: 0 solid var(--fox-grid-border-color, #f5f6f7);
+  border: 0 solid var(--fox-grid-border-color, var(--fox-border-color-lighter, #ebeef5));
   flex-wrap: wrap;
   display: flex;
 }
@@ -4137,7 +4136,7 @@
 }
 
 .fox-grid-item__text {
-  color: var(--fox-grid-item-text-color, var(--fox-title-color2, #666));
+  color: var(--fox-grid-item-text-color, var(--fox-title-color-secondary, #666));
   font-size: var(--fox-grid-item-text-font-size, var(--fox-font-size-small, 12px));
   word-break: break-all;
   margin: var(--fox-grid-item-text-margin, 8px) 0 0 0;
@@ -4149,7 +4148,7 @@
   height: 100%;
   padding: var(--fox-grid-item-content-padding, 16px 8px);
   background: var(--fox-grid-item-content-bg-color, var(--fox-white, #fff));
-  border: 0 solid var(--fox-grid-border-color, #f5f6f7);
+  border: 0 solid var(--fox-grid-border-color, var(--fox-border-color-lighter, #ebeef5));
   flex-direction: column;
   display: flex;
 }
@@ -4237,9 +4236,9 @@
   box-sizing: border-box;
   padding: var(--fox-navbar-padding, 0 16px);
   background: var(--fox-navbar-background, var(--fox-white, #fff));
-  box-shadow: var(--fox-navbar-box-shadow, 0px 1px 7px 0px #edeef1);
+  box-shadow: var(--fox-navbar-box-shadow, 0px 1px 7px 0px var(--fox-border-color-lighter, #ebeef5));
   font-size: var(--fox-navbar-title-base-font, var(--fox-font-size-base, 14px));
-  color: var(--fox-navbar-color, var(--fox-title-color2, #666));
+  color: var(--fox-navbar-color, var(--fox-title-color-secondary, #666));
   margin-bottom: var(--fox-navbar-margin-bottom, 20px);
   align-items: center;
   display: flex;
@@ -4308,7 +4307,7 @@
   min-width: var(--fox-navbar-title-width, 100px);
   font-size: var(--fox-navbar-title-font, var(--fox-font-size-base, 14px));
   font-weight: var(--fox-navbar-title-font-weight, 0);
-  color: var(--fox-navbar-title-font-color, var(--fox-navbar-color, var(--fox-title-color2, #666)));
+  color: var(--fox-navbar-title-font-color, var(--fox-navbar-color, var(--fox-title-color-secondary, #666)));
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   display: -webkit-box;
@@ -4349,7 +4348,7 @@
 
 .fox-navbar__left, .fox-navbar__right {
   font-size: var(--fox-cell-desc-font, var(--fox-font-size-base, 14px));
-  color: var(--fox-cell-desc-color, var(--fox-disable-color, #ccc));
+  color: var(--fox-cell-desc-color, var(--fox-text-color-secondary, #909399));
   cursor: pointer;
   align-items: center;
   padding: 0 16px;
@@ -4383,7 +4382,7 @@
 .fox-fixednav__btn {
   box-sizing: border-box;
   z-index: var(--fox-fixednav-index, 201)1;
-  background: var(--fox-fixednav-btn-bg, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
+  background: var(--fox-fixednav-btn-bg, var(--fox-color-primary, #fa2c19));
   border-radius: 45px 0 0 45px;
   justify-content: center;
   align-items: center;
@@ -4514,7 +4513,7 @@
 .fox-menu .fox-menu__bar {
   line-height: var(--fox-menu-bar-line-height, 48px);
   background-color: var(--fox-white, #fff);
-  box-shadow: var(--fox-menu-bar-box-shadow, 0 2px 12px #5959591f);
+  box-shadow: var(--fox-menu-bar-box-shadow, var(--fox-box-shadow-light, 0px 0px 12px #0000001f));
   display: flex;
   position: relative;
 }
@@ -4536,7 +4535,7 @@
 }
 
 .fox-menu .fox-menu__bar .fox-menu__item.disabled {
-  color: var(--fox-menu-item-disabled-color, #969799);
+  color: var(--fox-menu-item-disabled-color, var(--fox-text-color-secondary, #909399));
 }
 
 .fox-menu .fox-menu__bar .fox-menu__item .fox-menu__title-icon {
@@ -4628,8 +4627,8 @@
 .fox-tabbar {
   box-shadow: var(--fox-tabbar-box-shadow, none);
   border: 0;
-  border-bottom: var(--fox-tabbar-border-bottom, 1px solid #eee);
-  border-top: var(--fox-tabbar-border-top, 1px solid #eee);
+  border-bottom: var(--fox-tabbar-border-bottom, 1px solid var(--fox-border-color-lighter, #ebeef5));
+  border-top: var(--fox-tabbar-border-top, 1px solid var(--fox-border-color-lighter, #ebeef5));
   box-sizing: content-box;
   background: var(--fox-white, #fff);
   width: 100%;
@@ -4654,7 +4653,7 @@
 }
 
 .fox-theme-dark .fox-tabbar-item__icon--unactive {
-  color: var(--fox-dark-color-gray, var(--fox-text-color, gray));
+  color: var(--fox-dark-color-gray, var(--fox-text-color-regular, gray));
 }
 
 .fox-tabbar-item {
@@ -4743,7 +4742,7 @@
 }
 
 .fox-theme-dark .fox-elevator {
-  background-color: var(--fox-dark-background2, #1b1b1b);
+  background-color: var(--fox-dark-background-2, #1b1b1b);
 }
 
 .fox-theme-dark .fox-elevator__list__item, .fox-theme-dark .fox-elevator__list__item__code {
@@ -4751,7 +4750,7 @@
 }
 
 .fox-theme-dark .fox-elevator__list__fixed {
-  background-color: var(--fox-dark-background2, #1b1b1b);
+  background-color: var(--fox-dark-background-2, #1b1b1b);
 }
 
 .fox-elevator {
@@ -4767,15 +4766,15 @@
 }
 
 .fox-elevator__list__item {
-  font-size: var(--fox-elevator-list-item-font-size, 12px);
-  color: var(--fox-elevator-list-item-font-color, #333);
+  font-size: var(--fox-elevator-list-item-font-size, var(--fox-font-size-small, 12px));
+  color: var(--fox-elevator-list-item-font-color, var(--fox-title-color, #1a1a1a));
   display: block;
 }
 
 .fox-elevator__list__item__code {
   height: var(--fox-elevator-list-item-code-height, 35px);
   line-height: var(--fox-elevator-list-item-code-line-height, 35px);
-  font-size: var(--fox-elevator-list-item-code-font-size, 14px);
+  font-size: var(--fox-elevator-list-item-code-font-size, var(--fox-font-size-base, 14px));
   color: var(--fox-elevator-list-item-code-font-color, var(--fox-title-color, #1a1a1a));
   padding: var(--fox-elevator-list-item-code-padding, 0 20px);
   font-weight: var(--fox-elevator-list-item-code-font-weight, 500);
@@ -4788,7 +4787,7 @@
   content: " ";
   width: var(--fox-elevator-list-item-code-after-width, 100%);
   height: var(--fox-elevator-list-item-code-after-height, 1px);
-  background-color: var(--fox-elevator-list-item-code-after-bg-color, #f5f5f5);
+  background-color: var(--fox-elevator-list-item-code-after-bg-color, var(--fox-fill-color-base, #f5f5f5));
   position: absolute;
   bottom: 0;
   left: 0;
@@ -4818,12 +4817,12 @@
   padding: var(--fox-elevator-list-item-code-padding, 0 20px);
   height: var(--fox-elevator-list-item-code-height, 35px);
   line-height: var(--fox-elevator-list-item-code-line-height, 35px);
-  font-size: var(--fox-elevator-list-item-code-font-size, 14px);
+  font-size: var(--fox-elevator-list-item-code-font-size, var(--fox-font-size-base, 14px));
   color: var(--fox-elevator-list-fixed-color, var(--fox-color-primary, #fa2c19));
   font-weight: var(--fox-elevator-list-item-code-font-weight, 500);
   background-color: var(--fox-elevator-list-fixed-bg-color, var(--fox-white, #fff));
   box-sizing: border-box;
-  box-shadow: var(--fox-elevator-list-fixed-box-shadow, 0 0 10px #eee);
+  box-shadow: var(--fox-elevator-list-fixed-box-shadow, 0 0 10px var(--fox-border-color-lighter, #ebeef5));
   z-index: 1;
   position: absolute;
   top: 0;
@@ -4848,8 +4847,8 @@
   height: var(--fox-elevator-list-item-code-current-height, 45px);
   line-height: var(--fox-elevator-list-item-code-current-line-height, 45px);
   border-radius: var(--fox-elevator-list-item-code-current-border-radius, 50%);
-  background: var(--fox-elevator-list-item-code-current-bg-color, #fff);
-  box-shadow: var(--fox-elevator-list-item-code-current-box-shadow, 0 3px 3px 1px #f0f0f0);
+  background: var(--fox-elevator-list-item-code-current-bg-color, var(--fox-white, #fff));
+  box-shadow: var(--fox-elevator-list-item-code-current-box-shadow, 0 3px 3px 1px var(--fox-border-color-lighter, #ebeef5));
   text-align: var(--fox-elevator-list-item-code-current-text-align, center);
 }
 
@@ -4859,7 +4858,7 @@
   top: var(--fox-elevator-list-item-bars-top, 50%);
   transform: var(--fox-elevator-list-item-bars-transform, translateY(-50%));
   padding: var(--fox-elevator-list-item-bars-padding, 15px 0);
-  background-color: var(--fox-elevator-list-item-bars-background-color, #eeeff2);
+  background-color: var(--fox-elevator-list-item-bars-background-color, var(--fox-border-color-lighter, #ebeef5));
   border-radius: var(--fox-elevator-list-item-bars-border-radius, 6px);
   text-align: var(--fox-elevator-list-item-bars-text-align, center);
   z-index: var(--fox-elevator-list-item-bars-z-index, 1);
@@ -4867,7 +4866,7 @@
 
 .fox-elevator__bars__inner__item {
   padding: var(--fox-elevator-list-item-bars-inner-item-padding, 3px);
-  font-size: var(--fox-elevator-list-item-bars-inner-item-font-size, 10px);
+  font-size: var(--fox-elevator-list-item-bars-inner-item-font-size, var(--fox-font-size-extra-small, 10px));
   display: block;
 }
 
@@ -4877,7 +4876,7 @@
 
 .fox-theme-dark .fox-pagination-prev, .fox-theme-dark .fox-pagination-item, .fox-theme-dark .fox-pagination-next {
   background: var(--fox-dark-background, #131313);
-  border-color: var(--fox-dark-color-gray, var(--fox-text-color, gray));
+  border-color: var(--fox-dark-color-gray, var(--fox-text-color-regular, gray));
 }
 
 .fox-theme-dark .fox-pagination-simple {
@@ -4885,7 +4884,7 @@
 }
 
 .fox-theme-dark .fox-pagination .simple-border {
-  border-color: var(--fox-dark-color-gray, var(--fox-text-color, gray));
+  border-color: var(--fox-dark-color-gray, var(--fox-text-color-regular, gray));
 }
 
 .fox-theme-dark .fox-pagination .disabled {
@@ -4913,7 +4912,7 @@
   box-sizing: border-box;
   background: var(--fox-white, #fff);
   border-radius: var(--fox-pagination-item-border-radius, 2px);
-  border: var(--fox-pagination-item-border-width, 1px) solid var(--fox-pagination-item-border-color, #e4e7eb);
+  border: var(--fox-pagination-item-border-width, 1px) solid var(--fox-pagination-item-border-color, var(--fox-border-color-light, #e4e7ed));
   cursor: pointer;
   flex-shrink: 0;
   justify-content: center;
@@ -4932,310 +4931,21 @@
 }
 
 .fox-pagination .simple-border {
-  border-right: var(--fox-pagination-item-border-width, 1px) solid var(--fox-pagination-item-border-color, #e4e7eb);
+  border-right: var(--fox-pagination-item-border-width, 1px) solid var(--fox-pagination-item-border-color, var(--fox-border-color-light, #e4e7ed));
 }
 
 .fox-pagination .active {
   color: var(--fox-white, #fff);
-  background: var(--fox-pagination-active-background-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
+  background: var(--fox-pagination-active-background-color, var(--fox-color-primary, #fa2c19));
   border: none;
 }
 
 .fox-pagination .disabled {
-  color: var(--fox-pagination-disable-color, #7474744f);
-  background-color: var(--fox-pagination-disable-background-color, #f7f8fa);
+  color: var(--fox-pagination-disable-color, var(--fox-disable-color, #ccc));
+  background-color: var(--fox-pagination-disable-background-color, var(--fox-fill-color-base, #f5f5f5));
   cursor: not-allowed;
 }
 
-.fox-theme-dark .fox-tabs__titles {
-  background: var(--fox-dark-background3, #141414);
-}
-
-.fox-theme-dark .fox-tabs__titles-item {
-  color: var(--fox-dark-color-gray, var(--fox-text-color, gray));
-}
-
-.fox-theme-dark .fox-tabs__titles-item.active {
-  color: var(--fox-dark-color, var(--fox-white, #fff));
-}
-
-.fox-theme-dark .fox-tabs.vertical .fox-tabs__titles-item.active {
-  background-color: var(--fox-dark-background2, #1b1b1b);
-}
-
-.fox-tabs:has(.fox-tabs__titles > .fox-tabs__titles-fixed-item) {
-  position: relative;
-}
-
-.fox-tabs {
-  display: flex;
-  overflow: hidden;
-}
-
-.fox-tabs.horizontal {
-  flex-direction: column;
-}
-
-.fox-tabs.horizontal .fox-tabs__titles.scrollable .fox-tabs__titles-item:first-child {
-  margin-left: 0 !important;
-}
-
-.fox-tabs.horizontal .fox-tabs__titles.scrollable .fox-tabs__titles-item:last-child {
-  margin-right: 0 !important;
-}
-
-.fox-tabs.horizontal .fox-tabs__titles.scrollable .fox-tabs__titles-item {
-  flex: none;
-}
-
-.fox-tabs.horizontal .fox-tabs__titles:has(.fox-tabs__titles-fixed-item) {
-  padding-right: var(--fox-tabs-vertical-titles-fixed-item-width, 30px) !important;
-}
-
-.fox-tabs.vertical {
-  flex-direction: row;
-  width: 100%;
-}
-
-.fox-tabs.vertical .fox-tabs__titles {
-  height: 100%;
-  width: var(--fox-tabs-vertical-titles-width, 100px);
-  flex-direction: column;
-  flex-shrink: 0;
-  padding: 10px 0 !important;
-}
-
-.fox-tabs.vertical .fox-tabs__titles .fox-tabs__list {
-  flex-direction: column;
-  flex-shrink: 0;
-  width: 100%;
-  display: flex;
-}
-
-.fox-tabs.vertical .fox-tabs__titles.scrollable {
-  overflow: hidden auto;
-}
-
-.fox-tabs.vertical .fox-tabs__titles.scrollable .fox-tabs__titles-item {
-  padding: 0 10px 0 15px;
-}
-
-.fox-tabs.vertical .fox-tabs__titles.scroll-vertical {
-  height: auto;
-  overflow-y: scroll;
-}
-
-.fox-tabs.vertical .fox-tabs__titles.scroll-vertical .fox-tabs__titles-placeholder {
-  height: 22px;
-}
-
-.fox-tabs.vertical .fox-tabs__titles-item {
-  height: var(--fox-tabs-vertical-titles-item-height, 40px);
-  flex: none;
-}
-
-.fox-tabs.vertical .fox-tabs__titles-item__smile {
-  transition: width .3s;
-}
-
-.fox-tabs.vertical .fox-tabs__titles-item__line {
-  bottom: none;
-  width: 0;
-  height: 0;
-  transition: height .3s;
-  transform: translate(0, -50%);
-}
-
-.fox-tabs.vertical .fox-tabs__titles-item.active {
-  background-color: #fff;
-}
-
-.fox-tabs.vertical .fox-tabs__titles-item.active .fox-tabs__titles-item__line {
-  background: var(--fox-tabs-vertical-tab-line-color, linear-gradient(180deg, var(--fox-color-primary, #fa2c19) 0%, #fa2c1926 100%));
-  width: 3px;
-  height: var(--fox-tabs-vertical-titles-item-active-line-height, 14px);
-  left: 10px;
-}
-
-.fox-tabs.vertical .fox-tabs__titles-item.active .fox-tabs__titles-item__smile {
-  width: 3px;
-  height: var(--fox-tabs-vertical-titles-item-active-line-height, 14px);
-  bottom: 2px;
-  left: auto;
-  right: -8px;
-  transform: rotate(320deg);
-}
-
-.fox-tabs.vertical .fox-tabs__content {
-  flex-direction: column;
-  flex: 1;
-}
-
-.fox-tabs.vertical .fox-tabs__content .fox-tab-pane {
-  height: 100%;
-}
-
-.fox-tabs__titles {
-  height: var(--fox-tabs-horizontal-titles-height, 46px);
-  -webkit-user-select: none;
-  user-select: none;
-  background: var(--fox-tabs-titles-background-color, var(--fox-help-color, #f5f5f5));
-  border-radius: var(--fox-tabs-titles-border-radius, 0);
-  flex-shrink: 0;
-  display: flex;
-}
-
-.fox-tabs__titles .fox-tabs__list {
-  width: 100%;
-  height: var(--fox-tabs-horizontal-titles-height, 46px);
-  flex-shrink: 0;
-  display: flex;
-}
-
-.fox-tabs__titles.large .fox-tabs__titles-item {
-  font-size: var(--fox-tabs-titles-item-large-font-size, var(--fox-font-size-medium, 16px));
-}
-
-.fox-tabs__titles.normal .fox-tabs__titles-item {
-  font-size: var(--fox-tabs-titles-item-font-size, var(--fox-font-size-base, 14px));
-}
-
-.fox-tabs__titles.normal .fox-tabs__titles-item.active {
-  font-size: var(--fox-tabs-titles-item-active-font-size, var(--fox-font-size-base, 14px));
-}
-
-.fox-tabs__titles.small .fox-tabs__titles-item {
-  font-size: var(--fox-tabs-titles-item-small-font-size, var(--fox-font-size-small, 12px));
-}
-
-.fox-tabs__titles::-webkit-scrollbar {
-  background: none;
-  width: 0;
-  display: none;
-}
-
-.fox-tabs__titles.smile .fox-tabs__titles-item.active .fox-tabs__titles-item__smile {
-  width: 36px;
-  height: 10px;
-}
-
-.fox-tabs__titles.scrollable {
-  overflow: auto hidden;
-}
-
-.fox-tabs__titles.scrollable .fox-tabs__titles-item {
-  width: auto;
-}
-
-.fox-tabs__titles-item {
-  font-size: var(--fox-tabs-titles-item-font-size, var(--fox-font-size-base, 14px));
-  min-width: var(--fox-tabs-horizontal-titles-item-min-width, 50px);
-  width: 0;
-  color: var(--fox-tabs-titles-item-color, var(--fox-title-color, #1a1a1a));
-  flex: 1 0 auto;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  position: relative;
-}
-
-.fox-tabs__titles-item__text.ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  overflow: hidden;
-}
-
-.fox-tabs__titles-item__text {
-  text-align: center;
-}
-
-.fox-tabs__titles-item__smile, .fox-tabs__titles-item__line {
-  content: " ";
-  border-radius: var(--fox-tabs-titles-item-line-border-radius, 0);
-  width: 0;
-  height: 0;
-  opacity: var(--fox-tabs-titles-item-line-opacity, 1);
-  transition: width .3s;
-  position: absolute;
-  bottom: 15%;
-  left: 50%;
-  overflow: hidden;
-  transform: translate(-50%);
-}
-
-.fox-tabs__titles-item__smile .fox-icon {
-  width: 100%;
-  height: 100%;
-  color: var(--fox-tabs-tab-smile-color, var(--fox-color-primary, #fa2c19));
-  font-size: 12px;
-  position: absolute;
-}
-
-.fox-tabs__titles-item.disabled {
-  color: var(--fox-disable-color, #ccc);
-}
-
-.fox-tabs__titles-item.active {
-  font-weight: var(--fox-tabs-titles-item-active-font-weight, bold);
-  font-size: var(--fox-tabs-titles-item-active-font-size, var(--fox-font-size-base, 14px));
-  color: var(--fox-tabs-titles-item-active-color, var(--fox-title-color, #1a1a1a));
-}
-
-.fox-tabs__titles-item.active .fox-tabs__titles-item__line {
-  content: " ";
-  width: var(--fox-tabs-horizontal-titles-item-active-line-width, 40px);
-  background: var(--fox-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--fox-color-primary, #fa2c19) 0%, #fa2c1926 100%));
-  height: 3px;
-}
-
-.fox-tabs__titles-fixed-item {
-  height: var(--fox-tabs-horizontal-titles-height, 46px);
-  width: var(--fox-tabs-vertical-titles-fixed-item-width, 30px);
-  justify-content: flex-end;
-  align-items: center;
-  display: flex;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.fox-tabs__content {
-  box-sizing: border-box;
-  display: flex;
-}
-
-.tabs-scrollview {
-  white-space: nowrap;
-}
-
-.fox-tabs__titles-item.fox-tabs__titles-placeholder {
-  width: auto;
-  min-width: 10px;
-}
-
-.fox-tabs__titles-item .taro {
-  height: 46px;
-  line-height: 46px;
-}
-
-.fox-tab-pane {
-  box-sizing: border-box;
-  word-break: break-all;
-  background-color: #fff;
-  flex-shrink: 0;
-  width: 100%;
-  height: 100%;
-  padding: 24px 20px;
-  display: block;
-  overflow: auto;
-}
-
-.fox-tab-pane.inactive {
-  height: 0;
-  overflow: visible;
-}
-
 .fox-indicator--block {
   width: 100%;
   display: block;
@@ -5267,19 +4977,19 @@
 
 .fox-indicator--dot {
   vertical-align: middle;
-  width: var(--fox-indicator-dot-size, calc(var(--fox-indicator-size, 18px) / 3));
-  height: var(--fox-indicator-dot-size, calc(var(--fox-indicator-size, 18px) / 3));
+  width: var(--fox-indicator-dot-size, calc(var(--fox-indicator-size, var(--fox-font-size-large, 18px)) / 3));
+  height: var(--fox-indicator-dot-size, calc(var(--fox-indicator-size, var(--fox-font-size-large, 18px)) / 3));
   background-color: var(--fox-indicator-dot-color, var(--fox-disable-color, #ccc));
   border-radius: 50%;
   display: inline-block;
 }
 
 .fox-indicator--number {
-  width: var(--fox-indicator-size, 18px);
-  height: var(--fox-indicator-size, 18px);
+  width: var(--fox-indicator-size, var(--fox-font-size-large, 18px));
+  height: var(--fox-indicator-size, var(--fox-font-size-large, 18px));
   text-align: center;
-  font-size: var(--fox-indicator-number-font-size, 10px);
-  line-height: var(--fox-indicator-size, 18px);
+  font-size: var(--fox-indicator-number-font-size, var(--fox-font-size-extra-small, 10px));
+  line-height: var(--fox-indicator-size, var(--fox-font-size-large, 18px));
   color: var(--fox-indicator-color, var(--fox-white, #fff));
   vertical-align: middle;
   border: 1px solid var(--fox-indicator-color, var(--fox-white, #fff));
@@ -5308,33 +5018,33 @@
 }
 
 .fox-theme-dark .fox-side-navbar-item {
-  background-color: var(--fox-dark-background2, #1b1b1b);
+  background-color: var(--fox-dark-background-2, #1b1b1b);
 }
 
 .fox-theme-dark .fox-side-navbar-item__title {
-  background-color: var(--fox-dark-background2, #1b1b1b);
+  background-color: var(--fox-dark-background-2, #1b1b1b);
   color: var(--fox-dark-color, var(--fox-white, #fff));
 }
 
 .fox-side-navbar-item {
   height: var(--fox-sidenavbar-item-height, 40px);
   line-height: var(--fox-sidenavbar-item-line-height, 40px);
-  font-size: var(--fox-sidenavbar-item-font-size, 16px);
+  font-size: var(--fox-sidenavbar-item-font-size, var(--fox-font-size-medium, 16px));
   background-color: var(--fox-sidenavbar-item-title-bg-color, var(--fox-white, #fff));
   display: block;
 }
 
 .fox-side-navbar-item__title {
-  color: var(--fox-sidenavbar-item-title-color, #333);
+  color: var(--fox-sidenavbar-item-title-color, var(--fox-title-color, #1a1a1a));
   background-color: var(--fox-sidenavbar-item-title-bg-color, var(--fox-white, #fff));
 }
 
 .fox-theme-dark .fox-sub-side-navbar {
-  background-color: var(--fox-dark-background2, #1b1b1b);
+  background-color: var(--fox-dark-background-2, #1b1b1b);
 }
 
 .fox-theme-dark .fox-sub-side-navbar__title {
-  background-color: var(--fox-dark-background3, #141414);
+  background-color: var(--fox-dark-background-3, #141414);
   color: var(--fox-dark-color, var(--fox-white, #fff));
 }
 
@@ -5355,10 +5065,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   box-sizing: border-box;
-  border-bottom: 1px solid var(--fox-sidenavbar-sub-title-border-color, #f6f6f6);
+  border-bottom: 1px solid var(--fox-sidenavbar-sub-title-border-color, var(--fox-fill-color-base, #f5f5f5));
   color: var(--fox-sidenavbar-sub-title-text-color, var(--fox-title-color, #1a1a1a));
   font-size: var(--fox-sidenavbar-sub-title-font-size, var(--fox-font-size-large, 18px));
-  background-color: var(--fox-sidenavbar-sub-title-bg-color, #f6f6f6);
+  background-color: var(--fox-sidenavbar-sub-title-bg-color, var(--fox-fill-color-base, #f5f5f5));
   border-radius: var(--fox-sidenavbar-sub-title-radius, 0);
   border: var(--fox-sidenavbar-sub-title-border, 0);
   display: block;
@@ -5395,7 +5105,7 @@
 }
 
 .fox-theme-dark .fox-range-container .fox-range-min, .fox-theme-dark .fox-range-container .fox-range-max, .fox-theme-dark .fox-range-container .fox-range-mark-text {
-  color: var(--fox-dark-color-gray, var(--fox-text-color, gray));
+  color: var(--fox-dark-color-gray, var(--fox-text-color-regular, gray));
 }
 
 .fox-theme-dark .fox-range-container .fox-range-button .number {
@@ -5412,7 +5122,7 @@
 
 .fox-range-container .fox-range-min, .fox-range-container .fox-range-max {
   font-size: var(--fox-font-size-small, 12px);
-  color: var(--fox-range-tip-font-color, #333);
+  color: var(--fox-range-tip-font-color, var(--fox-title-color, #1a1a1a));
   -webkit-user-select: none;
   user-select: none;
 }
@@ -5478,11 +5188,11 @@
 }
 
 .fox-range-container-vertical .fox-range-mark-text-active .fox-range-tick {
-  background: var(--fox-range-bar-bg-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
+  background: var(--fox-range-bar-bg-color, var(--fox-color-primary, #fa2c19));
 }
 
 .fox-range-container-vertical .fox-range-tick {
-  background-color: var(--fox-range-bg-color-tick, #fa958c);
+  background-color: var(--fox-range-bg-color-tick, var(--fox-color-primary-light-5, #fd968c));
   border-radius: 50%;
   width: 11px;
   height: 11px;
@@ -5512,7 +5222,7 @@
 }
 
 .fox-range-bar {
-  background: var(--fox-range-bar-bg-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
+  background: var(--fox-range-bar-bg-color, var(--fox-color-primary, #fa2c19));
   border-radius: inherit;
   width: 100%;
   height: 100%;
@@ -5556,7 +5266,7 @@
   width: 100%;
   height: 100%;
   font-size: var(--fox-font-size-small, 12px);
-  color: var(--fox-range-tip-font-color, #333);
+  color: var(--fox-range-tip-font-color, var(--fox-title-color, #1a1a1a));
   justify-content: center;
   align-items: center;
   display: flex;
@@ -5598,11 +5308,11 @@
 }
 
 .fox-range-mark-text-active .fox-range-tick {
-  background: var(--fox-range-bar-bg-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
+  background: var(--fox-range-bar-bg-color, var(--fox-color-primary, #fa2c19));
 }
 
 .fox-range-tick {
-  background-color: var(--fox-range-bg-color-tick, #fa958c);
+  background-color: var(--fox-range-bg-color-tick, var(--fox-color-primary-light-5, #fd968c));
   border-radius: 50%;
   width: 11px;
   height: 11px;
@@ -5652,8 +5362,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, 0px 0px 8px #0000000a));
+  background: var(--fox-searchbar-input-background, var(--fox-fill-color-base, #f5f5f5));
   box-sizing: border-box;
   flex: 1;
   align-items: center;
@@ -5667,10 +5377,11 @@
 .fox-searchbar__search-input .fox-searchbar__input-inner {
   flex: 1;
   width: 100%;
-  height: 36px;
 }
 
 .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, 14px);
   box-sizing: border-box;
   background-color: #0000;
   border-color: #0000;
@@ -5679,8 +5390,6 @@
   width: 100%;
   height: 100%;
   margin: 0;
-  padding: 0 20px 0 0;
-  font-size: 14px;
 }
 
 .fox-searchbar__search-input .fox-searchbar__input-inner-right {
@@ -5697,13 +5406,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, 14px));
+  height: var(--fox-searchbar-icon-size, var(--fox-font-size-base, 14px));
 }
 
 .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, 14px));
+  height: var(--fox-searchbar-icon-size, var(--fox-font-size-base, 14px));
   margin-right: 6px;
 }
 
@@ -5712,9 +5421,9 @@
 }
 
 .fox-searchbar__search-icon {
+  font-size: var(--fox-searchbar-icon-size, var(--fox-font-size-base, 14px));
   justify-content: center;
   align-items: center;
-  font-size: 14px;
   display: flex;
 }
 
@@ -5728,16 +5437,16 @@
 }
 
 .fox-theme-dark .fox-cascader__bar {
-  background: var(--fox-dark-background2, #1b1b1b);
+  background: var(--fox-dark-background-2, #1b1b1b);
   color: var(--fox-dark-color, var(--fox-white, #fff));
 }
 
 .fox-theme-dark .fox-tabs-bar__titles {
-  background: var(--fox-dark-background3, #141414) !important;
+  background: var(--fox-dark-background-3, #141414) !important;
 }
 
 .fox-theme-dark .fox-cascader-item {
-  color: var(--fox-dark-color-gray, var(--fox-text-color, gray));
+  color: var(--fox-dark-color-gray, var(--fox-text-color-regular, gray));
 }
 
 .fox-cascader {
@@ -5838,7 +5547,7 @@
 }
 
 .fox-theme-dark .fox-calendar .fox-calendar__footer {
-  background: var(--fox-dark-background2, #1b1b1b);
+  background: var(--fox-dark-background-2, #1b1b1b);
   color: var(--fox-dark-color, var(--fox-white, #fff));
 }
 
@@ -5946,7 +5655,7 @@
   height: 50px;
   line-height: 50px;
   font-size: var(--fox-calendar-text-font, var(--fox-font-size-small, 12px));
-  color: var(--fox-text-color, gray);
+  color: var(--fox-text-color-regular, gray);
   position: absolute;
   top: -50px;
   left: 0;
@@ -5987,17 +5696,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, 12px);
+  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, 12px);
   color: var(--fox-calendar-primary-color, var(--fox-color-primary, #fa2c19));
-  font-size: 12px;
-  line-height: 14px;
+  line-height: 1.2;
   position: absolute;
   bottom: 6px;
 }
@@ -6025,7 +5734,7 @@
 }
 
 .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, #ccc)) !important;
 }
 
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--choose {
@@ -6041,7 +5750,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, 16px));
   padding: 2px 0;
 }
 
@@ -6058,7 +5767,7 @@
 .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, #fa2c19)) 0%, var(--fox-color-primary, var(--fox-color-primary, #fa2c19)) 100%));
+  background: var(--fox-calendar-footer-button-background-color, var(--fox-color-primary, #fa2c19));
   color: var(--fox-white, #fff);
   text-align: center;
   line-height: var(--fox-calendar-footer-button-height, 44px);
@@ -6071,17 +5780,17 @@
 }
 
 .fox-theme-dark .fox-input-number__icon--disabled {
-  color: var(--fox-dark-color-gray, var(--fox-text-color, gray));
+  color: var(--fox-dark-color-gray, var(--fox-text-color-regular, gray));
 }
 
 .fox-theme-dark .fox-input-number input, .fox-theme-dark .fox-input-number__text--readonly {
   background-color: var(--fox-dark-background, #131313);
   color: var(--fox-dark-color, var(--fox-white, #fff));
-  border: 1px solid var(--fox-dark-color-gray, var(--fox-text-color, gray));
+  border: 1px solid var(--fox-dark-color-gray, var(--fox-text-color-regular, gray));
 }
 
 .fox-theme-dark .fox-input-number--disabled input {
-  color: var(--fox-dark-color-gray, var(--fox-text-color, gray));
+  color: var(--fox-dark-color-gray, var(--fox-text-color-regular, gray));
 }
 
 .fox-input-number {
@@ -6105,9 +5814,9 @@
 }
 
 .fox-input-number__icon .fox-icon {
-  width: var(--fox-input-number-icon-size, 20px);
-  height: var(--fox-input-number-icon-size, 20px);
-  font-size: var(--fox-input-number-icon-size, 20px);
+  width: var(--fox-input-number-icon-size, var(--fox-font-size-extra-large, 20px));
+  height: var(--fox-input-number-icon-size, var(--fox-font-size-extra-large, 20px));
+  font-size: var(--fox-input-number-icon-size, var(--fox-font-size-extra-large, 20px));
 }
 
 .fox-input-number__icon {
@@ -6129,10 +5838,10 @@
   text-align: center;
   border: var(--fox-input-number-input-border, 0);
   height: 100%;
-  font-size: var(--fox-input-number-input-font-size, 12px);
+  font-size: var(--fox-input-number-input-font-size, var(--fox-font-size-small, 12px));
   color: var(--fox-input-number-input-font-color, var(--fox-title-color, #1a1a1a));
   margin: var(--fox-input-number-input-margin, 0 6px);
-  background-color: var(--fox-input-number-input-background-color, var(--fox-help-color, #f5f5f5));
+  background-color: var(--fox-input-number-input-background-color, var(--fox-fill-color-base, #f5f5f5));
   border-radius: var(--fox-input-number-input-border-radius, 4px);
   outline: none;
   justify-content: center;
@@ -6239,7 +5948,7 @@
 
 .fox-picker__left {
   float: left;
-  color: var(--fox-picker-cancel-color, gray);
+  color: var(--fox-picker-cancel-color, var(--fox-text-color-regular, gray));
   font-size: var(--fox-picker-bar-cancel-font-size, var(--fox-font-size-base, 14px));
 }
 
@@ -6251,7 +5960,7 @@
 
 .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, #e4e7ed));
   border-left: 0;
   border-right: 0;
   width: 100%;
@@ -6356,7 +6065,7 @@
 }
 
 .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;
 }
 
@@ -6387,7 +6096,7 @@
 .fox-short-password-subtitle {
   line-height: 1;
   font-size: var(--fox-font-size-small, 12px);
-  color: var(--fox-text-color, gray);
+  color: var(--fox-text-color-regular, gray);
   margin-top: 12px;
   display: block;
 }
@@ -6399,8 +6108,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, #f5f5f5));
+  border: 1px solid var(--fox-shortpassword-border-color, var(--fox-border-color, #dcdfe6));
   z-index: 10;
   border-radius: 4px;
   width: 100%;
@@ -6440,12 +6149,12 @@
 .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);
+  color: var(--fox-shortpassword-forget, var(--fox-text-color-regular, gray));
   display: flex;
 }
 
 .fox-theme-dark .fox-uploader__preview-list {
-  background: var(--fox-dark-background2, #1b1b1b);
+  background: var(--fox-dark-background-2, #1b1b1b);
   color: var(--fox-dark-color, var(--fox-white, #fff));
 }
 
@@ -6464,7 +6173,7 @@
 }
 
 .fox-uploader__upload {
-  background: var(--fox-uploader-background, #f7f8fa);
+  background: var(--fox-uploader-background, var(--fox-fill-color-base, #f5f5f5));
   width: var(--fox-uploader-picture-width, 100px);
   height: var(--fox-uploader-picture-height, 100px);
   justify-content: center;
@@ -6625,7 +6334,7 @@
 
 .fox-uploader__preview-img__file__name {
   width: 100%;
-  color: var(--fox-text-color, gray);
+  color: var(--fox-text-color-regular, gray);
   box-sizing: border-box;
   align-items: center;
   height: 100%;
@@ -6644,18 +6353,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);
+  background-color: var(--fox-dark-background-5, #646566);
 }
 
 .fox-number-keyboard {
   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, #f5f5f5));
   -webkit-user-select: none;
   user-select: none;
 }
@@ -6664,7 +6373,7 @@
   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);
+  color: var(--fox-numberkeyboard-header-color, var(--fox-title-color-secondary, #666));
   font-size: var(--fox-numberkeyboard-header-font-size, var(--fox-font-size-medium, 16px));
   justify-content: center;
   align-items: center;
@@ -6678,7 +6387,7 @@
 
 .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);
+  color: var(--fox-numberkeyboard-header-close-color, var(--fox-text-color-secondary, #909399));
   font-size: var(--fox-numberkeyboard-header-close-font-size, var(--fox-font-size-base, 14px));
   background-color: var(--fox-numberkeyboard-header-close-background-color, transparent);
   cursor: pointer;
@@ -6713,12 +6422,12 @@
 
 .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);
+  color: var(--fox-numberkeyboard-key-finish-font-size-color, var(--fox-white, #fff));
+  background-color: var(--fox-numberkeyboard-key-finish-background-color, var(--fox-color-primary, #fa2c19));
 }
 
 .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, #c82314));
 }
 
 .fox-key__wrapper {
@@ -6736,8 +6445,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, #fff));
+  color: var(--fox-numberkeyboard-key-font-size-color, var(--fox-title-color, #1a1a1a));
   border-radius: var(--fox-numberkeyboard-key-border-radius, 8px);
   cursor: pointer;
   justify-content: center;
@@ -6746,7 +6455,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, #ebeef5));
 }
 
 .fox-key__wrapper img {
@@ -6785,11 +6494,11 @@
 }
 
 .fox-theme-dark .fox-action-sheet .fox-action-sheet__cancel {
-  border-top: 1px solid var(--fox-dark-background2, #1b1b1b);
+  border-top: 1px solid var(--fox-dark-background-2, #1b1b1b);
 }
 
 .fox-theme-dark .fox-action-sheet .fox-action-sheet__title {
-  border-bottom: 1px solid var(--fox-dark-background2, #1b1b1b);
+  border-bottom: 1px solid var(--fox-dark-background-2, #1b1b1b);
 }
 
 .fox-theme-dark .fox-action-sheet .fox-action-sheet__cancel, .fox-theme-dark .fox-action-sheet .fox-action-sheet__item, .fox-theme-dark .fox-action-sheet .fox-action-sheet__title {
@@ -6804,7 +6513,7 @@
 .fox-action-sheet .fox-action-sheet__title {
   text-align: center;
   background-color: var(--fox-white, #fff);
-  border-bottom: 1px solid var(--fox-actionsheet-light-color, #f6f6f6);
+  border-bottom: 1px solid var(--fox-actionsheet-light-color, var(--fox-fill-color-base, #f5f5f5));
   font-size: var(--fox-font-size-base, 14px);
   color: var(--fox-title-color, #1a1a1a);
   margin: 0;
@@ -6853,7 +6562,7 @@
 }
 
 .fox-action-sheet .fox-action-sheet__cancel {
-  border-top: var(--fox-actionsheet-item-cancel-border-top, 1px solid var(--fox-actionsheet-light-color, #f6f6f6));
+  border-top: var(--fox-actionsheet-item-cancel-border-top, 1px solid var(--fox-actionsheet-light-color, var(--fox-fill-color-base, #f5f5f5)));
   margin-top: 5px;
 }
 
@@ -6869,7 +6578,7 @@
 
 .fox-backtop.show {
   background: var(--fox-white, #fff);
-  border: 1px solid var(--fox-backtop-border-color, #e0e0e0);
+  border: 1px solid var(--fox-backtop-border-color, var(--fox-border-color-lighter, #ebeef5));
   border-radius: 50%;
   justify-content: center;
   align-items: center;
@@ -6910,7 +6619,7 @@
   min-height: var(--fox-dialog-min-height, 156px);
   padding: var(--fox-dialog-padding, 28px 24px 16px 24px);
   box-sizing: border-box;
-  background: var(--fox-dialog-background, #0000);
+  background: var(--fox-dialog-background, transparent);
   flex-flow: column;
   justify-content: flex-start;
   align-items: stretch;
@@ -6923,22 +6632,22 @@
   justify-content: var(--fox-dialog-header-justify-content, center);
   align-items: var(--fox-dialog-header-align-items, center);
   height: var(--fox-dialog-header-height, 20px);
-  background: var(--fox-dialog-header-background, #0000);
+  background: var(--fox-dialog-header-background, transparent);
   padding: var(--fox-dialog-header-padding, 0px);
   display: flex;
   position: relative;
 }
 
 .fox-dialog__header-title {
-  font-size: var(--fox-dialog-header-font-size, 16px);
-  color: var(--fox-dialog-header-color, #262626);
+  font-size: var(--fox-dialog-header-font-size, var(--fox-font-size-medium, 16px));
+  color: var(--fox-dialog-header-color, var(--fox-title-color, #1a1a1a));
 }
 
 .fox-dialog__header-close-icon {
   cursor: pointer;
-  color: var(--fox-dialog-header-close-icon-color, #969799);
-  width: var(--fox-dialog-header-close-icon-size, 16px);
-  height: var(--fox-dialog-header-close-icon-size, 16px);
+  color: var(--fox-dialog-header-close-icon-color, var(--fox-text-color-secondary, #909399));
+  width: var(--fox-dialog-header-close-icon-size, var(--fox-font-size-medium, 16px));
+  height: var(--fox-dialog-header-close-icon-size, var(--fox-font-size-medium, 16px));
   top: 50%;
   right: 16px;
   transform: translateY(-50%);
@@ -6948,7 +6657,7 @@
 .fox-dialog__body {
   margin: var(--fox-dialog-body-margin, 20px 0px);
   padding: var(--fox-dialog-body-padding, 0px);
-  background: var(--fox-dialog-body-background, #0000);
+  background: var(--fox-dialog-body-background, transparent);
   flex: auto;
   justify-content: center;
   align-items: center;
@@ -6970,9 +6679,9 @@
 .fox-dialog__content {
   padding: var(--fox-dialog-content-padding, 0px);
   text-align: var(--fox-dialog-content-text-align, center);
-  font-size: var(--fox-dialog-content-font-size, 12px);
+  font-size: var(--fox-dialog-content-font-size, var(--fox-font-size-small, 12px));
   line-height: var(--fox-dialog-content-line-height, 16px);
-  color: var(--fox-dialog-content-color, var(--fox-text-color, gray));
+  color: var(--fox-dialog-content-color, var(--fox-text-color-regular, gray));
   word-wrap: break-word;
   word-break: break-all;
   white-space: pre-wrap;
@@ -7025,14 +6734,14 @@
 }
 
 .fox-dialog--plain .fox-dialog__footer {
-  border-top: var(--dialog-footer-border-top, 1px solid #eee);
+  border-top: var(--dialog-footer-border-top, 1px solid var(--fox-border-color-lighter, #ebeef5));
 }
 
 .fox-dialog--plain .fox-dialog__footer-button {
   padding: var(--fox-dialog-footer-button-padding, 10px);
-  font-size: var(--fox-dialog-footer-button-font-size, 16px);
+  font-size: var(--fox-dialog-footer-button-font-size, var(--fox-font-size-medium, 16px));
   font-weight: var(--fox-dialog-footer-button-font-weight, 400);
-  color: var(--fox-dialog-footer-button-color, #666);
+  color: var(--fox-dialog-footer-button-color, var(--fox-title-color-secondary, #666));
   background-color: #0000;
   border: none;
   flex: 100%;
@@ -7063,7 +6772,7 @@
 }
 
 .fox-dialog--plain .fox-dialog__footer-button + .fox-dialog__footer-button {
-  border-left: var(--fox-dialog-footer-button-border-left, 1px solid #eee);
+  border-left: var(--fox-dialog-footer-button-border-left, 1px solid var(--fox-border-color-lighter, #ebeef5));
 }
 
 .fox-infinite-loading {
@@ -7076,7 +6785,7 @@
   height: 50px;
   line-height: 50px;
   font-size: var(--fox-font-size-small, 12px);
-  color: var(--fox-infiniteloading-bottom-color, #c8c8c8);
+  color: var(--fox-infiniteloading-bottom-color, var(--fox-disable-color, #ccc));
   text-align: center;
   display: block;
 }
@@ -7099,8 +6808,8 @@
 }
 
 .fox-infinite-loading__bottom-box__text {
-  color: var(--fox-text-color, gray);
-  font-size: 12px;
+  font-size: var(--fox-font-size-small, 12px);
+  color: var(--fox-text-color-regular, gray);
 }
 
 .fox-pull-refresh {
@@ -7115,11 +6824,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, 14px);
+  justify-content: center;
+  align-items: center;
   display: flex;
   position: absolute;
   left: 0;
@@ -7139,7 +6848,7 @@
 
 .fox-pull-refresh__container-topbox-text {
   font-size: var(--fox-font-size-base, 14px);
-  color: var(--fox-text-color, gray);
+  color: var(--fox-text-color-regular, gray);
 }
 
 .fox-fade-enter-active, .fox-fade-leave-active {
@@ -7155,7 +6864,7 @@
   width: 100%;
   padding: var(--fox-notify-padding, 12px 0);
   color: var(--fox-notify-text-color, var(--fox-white, #fff));
-  font-size: var(--fox-notify-font-size, 14px);
+  font-size: var(--fox-notify-font-size, var(--fox-font-size-base, 14px));
   white-space: pre-wrap;
   text-align: center;
   word-wrap: break-word;
@@ -7165,23 +6874,23 @@
 }
 
 .fox-notify--base {
-  background: var(--fox-notify-base-background-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
+  background: var(--fox-notify-base-background-color, var(--fox-color-primary, #fa2c19));
 }
 
 .fox-notify--primary {
-  background: var(--fox-notify-primary-background-color, linear-gradient(315deg, #498ff2 0%, #4965f2 100%));
+  background: var(--fox-notify-primary-background-color, var(--fox-color-primary, #fa2c19));
 }
 
 .fox-notify--success {
-  background: var(--fox-notify-success-background-color, linear-gradient(135deg, #26bf26 0%, #27c530 45%, #28cf3f 83%, #29d446 100%));
+  background: var(--fox-notify-success-background-color, var(--fox-color-success, #67c23a));
 }
 
 .fox-notify--danger {
-  background: var(--fox-notify-danger-background-color, #fa3219);
+  background: var(--fox-notify-danger-background-color, var(--fox-color-danger, #dd412c));
 }
 
 .fox-notify--warning {
-  background: var(--fox-notify-warning-background-color, linear-gradient(135deg, #ff5d0d 0%, #ff9a0d 100%));
+  background: var(--fox-notify-warning-background-color, var(--fox-color-warning, #ffaa08));
 }
 
 .fox-notify view {
@@ -7208,7 +6917,7 @@
 }
 
 .fox-switch.fox-switch-close {
-  background-color: var(--fox-switch-close-bg-color, #ebebeb);
+  background-color: var(--fox-switch-close-bg-color, var(--fox-border-color-lighter, #ebeef5));
 }
 
 .fox-switch .fox-switch-button {
@@ -7285,7 +6994,7 @@
 
 .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%;
@@ -7293,20 +7002,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, 14px));
   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, #000c));
   border-radius: var(--fox-toast-inner-border-radius, 12px);
   color: var(--fox-toast-font-color, var(--fox-white, #fff));
   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, 14px));
 }
 
 .fox-toast-text:empty {
@@ -7314,7 +7023,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, 16px));
 }
 
 .fox-toast-title:empty {
@@ -7536,7 +7245,7 @@
 }
 
 .fox-progress .fox-progress-outer {
-  background-color: var(--fox-progress-outer-background-color, #f3f3f3);
+  background-color: var(--fox-progress-outer-background-color, var(--fox-fill-color-base, #f5f5f5));
   border-radius: var(--fox-progress-outer-border-radius, 12px);
   flex: 1;
   height: 10px;
@@ -7544,7 +7253,7 @@
 
 .fox-progress .fox-progress-outer .fox-progress-inner {
   border-radius: var(--fox-progress-outer-border-radius, 12px);
-  background: var(--fox-progress-inner-background-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
+  background: var(--fox-progress-inner-background-color, var(--fox-color-primary, #fa2c19));
   width: 30%;
   height: 100%;
   transition: all .4s;
@@ -7630,7 +7339,7 @@
 
 .fox-progress .fox-progress-insidetext {
   padding: var(--fox-progress-insidetext-padding, 3px 5px 3px 6px);
-  background: var(--fox-progress-insidetext-background, var(--fox-progress-inner-background-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%)));
+  background: var(--fox-progress-insidetext-background, var(--fox-progress-inner-background-color, var(--fox-color-primary, #fa2c19)));
   border-radius: var(--fox-progress-insidetext-border-radius, 5px);
   min-width: 0;
   transition: all .4s;
@@ -7658,14 +7367,14 @@
 }
 
 .fox-circleprogress-path {
-  stroke: var(--fox-circleprogress-path-color, #e5e9f2);
+  stroke: var(--fox-circleprogress-path-color, var(--fox-border-color-light, #e4e7ed));
 }
 
 .fox-circleprogress-text {
   box-sizing: border-box;
   text-align: center;
   width: 100%;
-  color: var(--fox-circleprogress-text-color, #000);
+  color: var(--fox-circleprogress-text-color, var(--fox-black, #000));
   font-size: var(--fox-circleprogress-text-size, var(--fox-font-size-medium, 16px));
   position: absolute;
   top: 50%;
@@ -7674,7 +7383,7 @@
 }
 
 .fox-theme-dark .fox-noticebar__page {
-  background: var(--fox-dark-background2, #1b1b1b);
+  background: var(--fox-dark-background-2, #1b1b1b);
   color: var(--fox-dark-color, var(--fox-white, #fff));
 }
 
@@ -7685,9 +7394,9 @@
 .fox-noticebar__page {
   padding: var(--fox-noticebar-box-padding, 0 16px);
   height: var(--fox-noticebar-across-height, 40px);
-  font-size: var(--fox-noticebar-font-size, 14px);
-  background: var(--fox-noticebar-background, #fbf8dc);
-  color: var(--fox-noticebar-color, #d9500b);
+  font-size: var(--fox-noticebar-font-size, var(--fox-font-size-base, 14px));
+  background: var(--fox-noticebar-background, var(--fox-color-warning-light-9, #fff7e6));
+  color: var(--fox-noticebar-color, var(--fox-color-warning, #ffaa08));
   align-items: center;
   display: flex;
   position: relative;
@@ -7781,10 +7490,10 @@
 
 .fox-noticebar__vertical {
   height: var(--fox-noticebar-across-height, 40px);
-  font-size: var(--fox-noticebar-font-size, 14px);
+  font-size: var(--fox-noticebar-font-size, var(--fox-font-size-base, 14px));
   padding: var(--fox-noticebar-box-padding, 0 16px);
-  background: var(--fox-noticebar-background, #fbf8dc);
-  color: var(--fox-noticebar-color, #d9500b);
+  background: var(--fox-noticebar-background, var(--fox-color-warning-light-9, #fff7e6));
+  color: var(--fox-noticebar-color, var(--fox-color-warning, #ffaa08));
   justify-content: space-between;
   display: flex;
   position: relative;
@@ -7845,8 +7554,8 @@
 .fox-empty-description {
   margin-top: var(--fox-empty-description-margin-top, 4px);
   padding: var(--fox-empty-description-padding, 0 40px);
-  color: var(--fox-empty-description-color, #666);
-  font-size: var(--fox-empty-description-font-size, 14px);
+  color: var(--fox-empty-description-color, var(--fox-title-color-secondary, #666));
+  font-size: var(--fox-empty-description-font-size, var(--fox-font-size-base, 14px));
   line-height: var(--fox-empty-description-line-height, 20px);
 }
 
@@ -8067,7 +7776,7 @@
 }
 
 .fox-step-line {
-  background: var(--fox-steps-base-line-color, #909ca4);
+  background: var(--fox-steps-base-line-color, var(--fox-text-color-secondary, #909399));
   height: 1px;
   display: inline-block;
   position: absolute;
@@ -8112,14 +7821,14 @@
 
 .fox-step-title {
   margin-bottom: var(--fox-steps-base-title-margin-bottom, 10px);
-  font-size: var(--fox-steps-base-title-font-size, 14px);
-  color: var(--fox-steps-base-title-color, #909ca4);
+  font-size: var(--fox-steps-base-title-font-size, var(--fox-font-size-base, 14px));
+  color: var(--fox-steps-base-title-color, var(--fox-text-color-secondary, #909399));
   display: block;
 }
 
 .fox-step-content {
-  font-size: var(--fox-steps-base-content-font-size, 14px);
-  color: var(--fox-steps-base-content-color, #666);
+  font-size: var(--fox-steps-base-content-font-size, var(--fox-font-size-base, 14px));
+  color: var(--fox-steps-base-content-color, var(--fox-title-color-secondary, #666));
   display: block;
 }
 
@@ -8158,13 +7867,13 @@
 }
 
 .fox-step.fox-step-wait .fox-step-head {
-  color: var(--fox-steps-wait-head-color, #909ca4);
-  border-color: var(--fox-steps-wait-head-border-color, #909ca4);
+  color: var(--fox-steps-wait-head-color, var(--fox-text-color-secondary, #909399));
+  border-color: var(--fox-steps-wait-head-border-color, var(--fox-text-color-secondary, #909399));
 }
 
 .fox-step.fox-step-wait .fox-step-icon.is-icon {
-  background-color: var(--fox-steps-wait-icon-bg-color, #959fb1);
-  color: var(--fox-steps-wait-icon-text-color, #fff);
+  background-color: var(--fox-steps-wait-icon-bg-color, var(--fox-text-color-secondary, #909399));
+  color: var(--fox-steps-wait-icon-text-color, var(--fox-white, #fff));
 }
 
 .fox-step.fox-step-wait .fox-step-icon.is-icon .fox-icon {
@@ -8172,7 +7881,7 @@
 }
 
 .fox-step.fox-step-wait .fox-step-content {
-  color: var(--fox-steps-wait-content-color, #909ca4);
+  color: var(--fox-steps-wait-content-color, var(--fox-text-color-secondary, #909399));
 }
 
 .fox-steps-horizontal.fox-steps-dot .fox-step-head {
@@ -8194,11 +7903,11 @@
 }
 
 .fox-steps-horizontal.fox-steps-dot .fox-step-wait .fox-step-icon {
-  background-color: var(--fox-steps-wait-icon-bg-color, #959fb1);
+  background-color: var(--fox-steps-wait-icon-bg-color, var(--fox-text-color-secondary, #909399));
 }
 
 .fox-steps-horizontal.fox-steps-dot .fox-step-wait .fox-step-content {
-  color: var(--fox-steps-wait-content-color, #909ca4);
+  color: var(--fox-steps-wait-content-color, var(--fox-text-color-secondary, #909399));
 }
 
 .fox-steps-horizontal.fox-steps-dot .fox-step-finish .fox-step-icon {
@@ -8212,7 +7921,7 @@
 
 .fox-steps-horizontal.fox-steps-dot .fox-step-process .fox-step-icon:before {
   content: "";
-  background-color: var(--fox-color-primary-end, #fa6419);
+  background-color: var(--fox-color-primary, #fa2c19);
   opacity: .23;
   border-radius: 50%;
   width: 14px;
@@ -8264,11 +7973,11 @@
 }
 
 .fox-steps-vertical.fox-steps-dot .fox-step-wait .fox-step-icon {
-  background-color: var(--fox-steps-wait-icon-bg-color, #959fb1);
+  background-color: var(--fox-steps-wait-icon-bg-color, var(--fox-text-color-secondary, #909399));
 }
 
 .fox-steps-vertical.fox-steps-dot .fox-step-wait .fox-step-content {
-  color: var(--fox-steps-wait-content-color, #909ca4);
+  color: var(--fox-steps-wait-content-color, var(--fox-text-color-secondary, #909399));
 }
 
 .fox-steps-vertical.fox-steps-dot .fox-step-finish .fox-step-icon {
@@ -8282,7 +7991,7 @@
 
 .fox-steps-vertical.fox-steps-dot .fox-step-process .fox-step-icon:before {
   content: "";
-  background-color: var(--fox-color-primary-end, #fa6419);
+  background-color: var(--fox-color-primary, #fa2c19);
   opacity: .23;
   border-radius: 50%;
   width: 14px;
@@ -8370,42 +8079,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, 18px));
   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, 18px));
   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, 16px));
   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, 14px));
   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, 14px));
   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, 12px));
   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, 10px));
   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, 10px));
   display: inline-block;
 }
 
@@ -8572,7 +8281,7 @@
 
 .fox-badge .fox-badge__icon {
   transform: var(--fox-badge-content-transform, translate(50%, -50%));
-  background: var(--fox-badge-background-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
+  background: var(--fox-badge-background-color, var(--fox-color-primary, #fa2c19));
   padding: var(--fox-badge-icon-padding, 4px);
   text-align: center;
   border-radius: var(--fox-badge-border-radius, 14px);
@@ -8590,12 +8299,12 @@
 }
 
 .fox-badge .fox-badge__content--sup {
-  background: var(--fox-badge-background-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
+  background: var(--fox-badge-background-color, var(--fox-color-primary, #fa2c19));
   padding: var(--fox-badge-padding, 0 5px);
   text-align: center;
   border-radius: var(--fox-badge-border-radius, 14px);
   font-size: var(--fox-badge-font-size, var(--fox-font-size-small, 12px));
-  color: var(--fox-badge-color, #fff);
+  color: var(--fox-badge-color, var(--fox-white, #fff));
   font-weight: normal;
   position: absolute;
 }
@@ -8613,7 +8322,7 @@
 
 .fox-tag {
   padding: var(--fox-tag-padding, 0 4px);
-  font-size: var(--fox-tag-font-size, 12px);
+  font-size: var(--fox-tag-font-size, var(--fox-font-size-small, 12px));
   border-radius: var(--fox-tag-default-border-radius, 4px);
   height: var(--fox-tag-height, auto);
   align-items: center;
@@ -8621,108 +8330,108 @@
 }
 
 .fox-tag--default {
-  color: var(--fox-tag-default-color, #fff);
-  background: var(--fox-tag-default-background-color, #000);
+  color: var(--fox-tag-default-color, var(--fox-white, #fff));
+  background: var(--fox-tag-default-background-color, var(--fox-black, #000));
   border: var(--fox-tag-border-width, 1px) solid transparent;
 }
 
 .fox-tag--default.fox-tag--plain {
-  color: var(--fox-tag-default-background-color, #000);
-  border: var(--fox-tag-border-width, 1px) solid var(--fox-tag-default-background-color, #000);
+  color: var(--fox-tag-default-background-color, var(--fox-black, #000));
+  border: var(--fox-tag-border-width, 1px) solid var(--fox-tag-default-background-color, var(--fox-black, #000));
 }
 
 .fox-tag--default.fox-tag--text {
-  color: var(--fox-tag-default-background-color, #000);
+  color: var(--fox-tag-default-background-color, var(--fox-black, #000));
   background: none;
 }
 
 .fox-tag--default.fox-tag--light {
-  color: var(--fox-tag-default-color-light, #999);
-  background: var(--fox-tag-default-background-color-light, #f8f8f8);
+  color: var(--fox-tag-default-color-light, var(--fox-text-color-secondary, #909399));
+  background: var(--fox-tag-default-background-color-light, var(--fox-fill-color-base, #f5f5f5));
 }
 
 .fox-tag--primary {
-  color: var(--fox-tag-primary-color, #fff);
-  background: var(--fox-tag-primary-background-color, #3460fa);
+  color: var(--fox-tag-primary-color, var(--fox-white, #fff));
+  background: var(--fox-tag-primary-background-color, var(--fox-color-primary, #fa2c19));
   border: var(--fox-tag-border-width, 1px) solid transparent;
 }
 
 .fox-tag--primary.fox-tag--plain {
-  color: var(--fox-tag-primary-background-color, #3460fa);
-  border: var(--fox-tag-border-width, 1px) solid var(--fox-tag-primary-background-color, #3460fa);
+  color: var(--fox-tag-primary-background-color, var(--fox-color-primary, #fa2c19));
+  border: var(--fox-tag-border-width, 1px) solid var(--fox-tag-primary-background-color, var(--fox-color-primary, #fa2c19));
 }
 
 .fox-tag--primary.fox-tag--text {
-  color: var(--fox-tag-primary-background-color, #3460fa);
+  color: var(--fox-tag-primary-background-color, var(--fox-color-primary, #fa2c19));
   background: none;
 }
 
 .fox-tag--primary.fox-tag--light {
-  color: var(--fox-tag-primary-color-light, #1279ff);
-  background: var(--fox-tag-primary-background-color-light, #eaf3ff);
+  color: var(--fox-tag-primary-color-light, var(--fox-color-primary, #fa2c19));
+  background: var(--fox-tag-primary-background-color-light, var(--fox-color-primary-light-9, #ffeae8));
 }
 
 .fox-tag--success {
-  color: var(--fox-tag-success-color, #fff);
-  background: var(--fox-tag-success-background-color, #4fc08d);
+  color: var(--fox-tag-success-color, var(--fox-white, #fff));
+  background: var(--fox-tag-success-background-color, var(--fox-color-success, #67c23a));
   border: var(--fox-tag-border-width, 1px) solid transparent;
 }
 
 .fox-tag--success.fox-tag--plain {
-  color: var(--fox-tag-success-background-color, #4fc08d);
-  border: var(--fox-tag-border-width, 1px) solid var(--fox-tag-success-background-color, #4fc08d);
+  color: var(--fox-tag-success-background-color, var(--fox-color-success, #67c23a));
+  border: var(--fox-tag-border-width, 1px) solid var(--fox-tag-success-background-color, var(--fox-color-success, #67c23a));
 }
 
 .fox-tag--success.fox-tag--text {
-  color: var(--fox-tag-success-background-color, #4fc08d);
+  color: var(--fox-tag-success-background-color, var(--fox-color-success, #67c23a));
   background: none;
 }
 
 .fox-tag--success.fox-tag--light {
-  color: var(--fox-tag-success-color-light, #07d368);
-  background: var(--fox-tag-success-background-color-light, #defae9);
+  color: var(--fox-tag-success-color-light, var(--fox-color-success, #67c23a));
+  background: var(--fox-tag-success-background-color-light, var(--fox-color-success-light-9, #f0f9eb));
 }
 
 .fox-tag--danger {
-  color: var(--fox-tag-danger-color, #fff);
-  background: var(--fox-tag-danger-background-color, linear-gradient(135deg, #f2140c 0%, #e8220e 70%, #f24d0c 100%));
+  color: var(--fox-tag-danger-color, var(--fox-white, #fff));
+  background: var(--fox-tag-danger-background-color, var(--fox-color-danger, #dd412c));
   border: var(--fox-tag-border-width, 1px) solid transparent;
 }
 
 .fox-tag--danger.fox-tag--plain {
-  color: var(--fox-tag-danger-background-color, linear-gradient(135deg, #f2140c 0%, #e8220e 70%, #f24d0c 100%));
-  border: var(--fox-tag-border-width, 1px) solid var(--fox-tag-danger-background-color, linear-gradient(135deg, #f2140c 0%, #e8220e 70%, #f24d0c 100%));
+  color: var(--fox-tag-danger-background-color, var(--fox-color-danger, #dd412c));
+  border: var(--fox-tag-border-width, 1px) solid var(--fox-tag-danger-background-color, var(--fox-color-danger, #dd412c));
 }
 
 .fox-tag--danger.fox-tag--text {
-  color: var(--fox-tag-danger-background-color, linear-gradient(135deg, #f2140c 0%, #e8220e 70%, #f24d0c 100%));
+  color: var(--fox-tag-danger-background-color, var(--fox-color-danger, #dd412c));
   background: none;
 }
 
 .fox-tag--danger.fox-tag--light {
-  color: var(--fox-tag-danger-color-light, #dd412c);
-  background: var(--fox-tag-danger-background-color-light, #fcebe9);
+  color: var(--fox-tag-danger-color-light, var(--fox-color-danger, #dd412c));
+  background: var(--fox-tag-danger-background-color-light, var(--fox-color-danger-light-9, #fcecea));
 }
 
 .fox-tag--warning {
-  color: var(--fox-tag-warning-color, #fff);
-  background: var(--fox-tag-warning-background-color, #f3812e);
+  color: var(--fox-tag-warning-color, var(--fox-white, #fff));
+  background: var(--fox-tag-warning-background-color, var(--fox-color-warning, #ffaa08));
   border: var(--fox-tag-border-width, 1px) solid transparent;
 }
 
 .fox-tag--warning.fox-tag--plain {
-  color: var(--fox-tag-warning-background-color, #f3812e);
-  border: var(--fox-tag-border-width, 1px) solid var(--fox-tag-warning-background-color, #f3812e);
+  color: var(--fox-tag-warning-background-color, var(--fox-color-warning, #ffaa08));
+  border: var(--fox-tag-border-width, 1px) solid var(--fox-tag-warning-background-color, var(--fox-color-warning, #ffaa08));
 }
 
 .fox-tag--warning.fox-tag--text {
-  color: var(--fox-tag-warning-background-color, #f3812e);
+  color: var(--fox-tag-warning-background-color, var(--fox-color-warning, #ffaa08));
   background: none;
 }
 
 .fox-tag--warning.fox-tag--light {
-  color: var(--fox-tag-warning-color-light, #ff8f2e);
-  background: var(--fox-tag-warning-background-color-light, #faf0dc);
+  color: var(--fox-tag-warning-color-light, var(--fox-color-warning, #ffaa08));
+  background: var(--fox-tag-warning-background-color-light, var(--fox-color-warning-light-9, #fff7e6));
 }
 
 .fox-tag--round {
@@ -8736,9 +8445,9 @@
 .fox-tag--close {
   cursor: pointer;
   margin-left: 4px;
-  width: var(--fox-tag-close-icon-size, 10px) !important;
-  height: var(--fox-tag-close-icon-size, 10px) !important;
-  line-height: var(--fox-tag-close-icon-size, 10px) !important;
+  width: var(--fox-tag-close-icon-size, var(--fox-font-size-extra-small, 10px)) !important;
+  height: var(--fox-tag-close-icon-size, var(--fox-font-size-extra-small, 10px)) !important;
+  line-height: var(--fox-tag-close-icon-size, var(--fox-font-size-extra-small, 10px)) !important;
 }
 
 .fox-popover {
@@ -8755,14 +8464,14 @@
 }
 
 .fox-popover .fox-popover-arrow-top {
-  border-top-color: var(--fox-popover-white-background-color, #fff);
+  border-top-color: var(--fox-popover-white-background-color, var(--fox-white, #fff));
   border-bottom-width: 0;
   margin-bottom: -8px;
   bottom: 0;
 }
 
 .fox-popover .fox-popover-arrow-bottom {
-  border-bottom-color: var(--fox-popover-white-background-color, #fff);
+  border-bottom-color: var(--fox-popover-white-background-color, var(--fox-white, #fff));
   border-top-width: 0;
   margin-top: -8px;
   top: 0;
@@ -8784,7 +8493,7 @@
 }
 
 .fox-popover .fox-popover-arrow-left {
-  border-left-color: var(--fox-popover-white-background-color, #fff);
+  border-left-color: var(--fox-popover-white-background-color, var(--fox-white, #fff));
   border-right-width: 0;
   margin-right: -8px;
   right: 0;
@@ -8806,7 +8515,7 @@
 }
 
 .fox-popover .fox-popover-arrow-right {
-  border-right-color: var(--fox-popover-white-background-color, #fff);
+  border-right-color: var(--fox-popover-white-background-color, var(--fox-white, #fff));
   border-left-width: 0;
   margin-left: -8px;
   left: 0;
@@ -8849,7 +8558,7 @@
 }
 
 .fox-popover .fox-popover-content .fox-popover-menu-item {
-  border-bottom: 1px solid var(--fox-popover-border-bottom-color, #e5e5e5);
+  border-bottom: 1px solid var(--fox-popover-border-bottom-color, var(--fox-border-color-lighter, #ebeef5));
   padding: 8px;
   display: block;
 }
@@ -8874,7 +8583,7 @@
 }
 
 .fox-popover .fox-popover-content .fox-popover-menu-item.fox-popover-menu-disabled {
-  color: var(--fox-popover-disable-color, #9a9b9d);
+  color: var(--fox-popover-disable-color, var(--fox-text-color-secondary, #909399));
   cursor: not-allowed;
 }
 
@@ -8926,24 +8635,24 @@
 }
 
 .fox-popover--dark .fox-popover-content {
-  background: var(--fox-popover-dark-background-color, #4b4c4d);
-  color: var(--fox-popover-white-background-color, #fff);
+  background: var(--fox-popover-dark-background-color, var(--fox-dark-background-5, #646566));
+  color: var(--fox-popover-white-background-color, var(--fox-white, #fff));
 }
 
 .fox-popover--dark .fox-popover-content--bottom .fox-popover-arrow, .fox-popover--dark .fox-popover-content--bottom-start .fox-popover-arrow, .fox-popover--dark .fox-popover-content--bottom-end .fox-popover-arrow {
-  border-bottom-color: var(--fox-popover-dark-background-color, #4b4c4d);
+  border-bottom-color: var(--fox-popover-dark-background-color, var(--fox-dark-background-5, #646566));
 }
 
 .fox-popover--dark .fox-popover-content--top .fox-popover-arrow, .fox-popover--dark .fox-popover-content--top-start .fox-popover-arrow, .fox-popover--dark .fox-popover-content--top-end .fox-popover-arrow {
-  border-top-color: var(--fox-popover-dark-background-color, #4b4c4d);
+  border-top-color: var(--fox-popover-dark-background-color, var(--fox-dark-background-5, #646566));
 }
 
 .fox-popover--dark .fox-popover-content--left .fox-popover-arrow, .fox-popover--dark .fox-popover-content--left-start .fox-popover-arrow, .fox-popover--dark .fox-popover-content--left-end .fox-popover-arrow {
-  border-left-color: var(--fox-popover-dark-background-color, #4b4c4d);
+  border-left-color: var(--fox-popover-dark-background-color, var(--fox-dark-background-5, #646566));
 }
 
 .fox-popover--dark .fox-popover-content--right .fox-popover-arrow, .fox-popover--dark .fox-popover-content--right-start .fox-popover-arrow, .fox-popover--dark .fox-popover-content--right-end .fox-popover-arrow {
-  border-right-color: var(--fox-popover-dark-background-color, #4b4c4d);
+  border-right-color: var(--fox-popover-dark-background-color, var(--fox-dark-background-5, #646566));
 }
 
 .fox-popover-enter-from, .fox-popover-leave-active {
@@ -8990,7 +8699,7 @@
 }
 
 .fox-skeleton .fox-skeleton-content .avatarClass {
-  background-color: var(--fox-skeleton-content-avatar-background-color, #efefef);
+  background-color: var(--fox-skeleton-content-avatar-background-color, var(--fox-fill-color-base, #f5f5f5));
   margin-right: 20px;
 }
 
@@ -9000,7 +8709,7 @@
 }
 
 .fox-skeleton .fox-skeleton-content .fox-skeleton-content__line .fox-skeleton-blockTitle, .fox-skeleton .fox-skeleton-content .fox-skeleton-content__line .fox-skeleton-blockLine {
-  background-color: var(--fox-skeleton-content-line-background-color, #efefef);
+  background-color: var(--fox-skeleton-content-line-background-color, var(--fox-fill-color-base, #f5f5f5));
   width: 100%;
   margin-bottom: 10px;
 }
@@ -9077,7 +8786,7 @@
 .fox-collapse-item .fox-collapse-item__title {
   width: 100%;
   padding: var(--fox-collapse-item-padding, 13px 36px 13px 26px);
-  color: var(--fox-collapse-item-color, #666);
+  color: var(--fox-collapse-item-color, var(--fox-title-color-secondary, #666));
   font-size: var(--fox-collapse-item-font-size, var(--fox-font-size-base, 14px));
   line-height: var(--fox-collapse-item-line-height, 24px);
   box-sizing: border-box;
@@ -9102,7 +8811,7 @@
 }
 
 .fox-collapse-item .fox-collapse-item__title .fox-collapse-item__title-icon {
-  color: var(--fox-collapse-item-icon-color, #666);
+  color: var(--fox-collapse-item-icon-color, var(--fox-title-color-secondary, #666));
   align-items: center;
   transition: transform .3s;
   display: flex;
@@ -9113,7 +8822,7 @@
 }
 
 .fox-collapse-item .fox-collapse-item__title .fox-collapse-item__title-sub {
-  color: var(--fox-collapse-item-sub-title-color, #666);
+  color: var(--fox-collapse-item-sub-title-color, var(--fox-title-color-secondary, #666));
   margin-top: -12px;
   position: absolute;
   top: 50%;
@@ -9136,7 +8845,7 @@
 
 .fox-collapse-item .fox-collapse__item-wrapper .fox-collapse__item-wrapper__content, .fox-collapse-item .fox-collapse__item-wrapper .fox-collapse__item-extraWrapper__extraRender, .fox-collapse-item .fox-collapse__item-extraWrapper .fox-collapse__item-wrapper__content, .fox-collapse-item .fox-collapse__item-extraWrapper .fox-collapse__item-extraWrapper__extraRender {
   padding: var(--fox-collapse-wrapper-content-padding, 12px 26px);
-  color: var(--fox-collapse-wrapper-content-color, #666);
+  color: var(--fox-collapse-wrapper-content-color, var(--fox-title-color-secondary, #666));
   font-size: var(--fox-collapse-wrapper-content-font-size, var(--fox-font-size-base, 14px));
   line-height: var(--fox-collapse-wrapper-content-line-height, 1.5);
   background-color: var(--fox-collapse-wrapper-content-background-color, var(--fox-white, #fff));
@@ -9167,13 +8876,13 @@
 }
 
 .fox-collapse-item .fox-collapse-item__title--disabled {
-  color: var(--fox-collapse-item-disabled-color, #c8c9cc);
+  color: var(--fox-collapse-item-disabled-color, var(--fox-disable-color, #ccc));
   cursor: not-allowed;
   pointer-events: none;
 }
 
 .fox-collapse-item .fox-collapse-item__title--disabled .collapse-icon {
-  color: var(--fox-collapse-item-disabled-color, #c8c9cc);
+  color: var(--fox-collapse-item-disabled-color, var(--fox-disable-color, #ccc));
 }
 
 .fox-collapse-item .fox-collapse-item__title-mtitle {
@@ -9186,19 +8895,19 @@
 
 .fox-theme-dark .fox-table__main {
   color: var(--fox-dark-color, var(--fox-white, #fff));
-  background-color: var(--fox-dark-background2, #1b1b1b);
+  background-color: var(--fox-dark-background-2, #1b1b1b);
 }
 
 .fox-theme-dark .fox-table__main--striped .fox-table__main__head__tr {
-  background-color: var(--fox-dark-background3, #141414);
+  background-color: var(--fox-dark-background-3, #141414);
 }
 
 .fox-theme-dark .fox-table__main--striped .fox-table__main__body__tr:nth-child(odd) {
-  background-color: var(--fox-dark-color-gray, var(--fox-text-color, gray));
+  background-color: var(--fox-dark-color-gray, var(--fox-text-color-regular, gray));
 }
 
 .fox-theme-dark .fox-table__main--striped .fox-table__main__body__tr:nth-child(2n) {
-  background-color: var(--fox-dark-background3, #141414);
+  background-color: var(--fox-dark-background-3, #141414);
 }
 
 .fox-theme-dark .fox-table__summary, .fox-theme-dark .fox-table__nodata {
@@ -9221,7 +8930,7 @@
 }
 
 .fox-table__main--striped .fox-table__main__head__tr {
-  background-color: var(--fox-table-tr-even-bg-color, #f3f3f3);
+  background-color: var(--fox-table-tr-even-bg-color, var(--fox-fill-color-base, #f5f5f5));
 }
 
 .fox-table__main--striped .fox-table__main__body__tr:nth-child(odd) {
@@ -9229,7 +8938,7 @@
 }
 
 .fox-table__main--striped .fox-table__main__body__tr:nth-child(2n) {
-  background-color: var(--fox-table-tr-even-bg-color, #f3f3f3);
+  background-color: var(--fox-table-tr-even-bg-color, var(--fox-fill-color-base, #f5f5f5));
 }
 
 .fox-table__main__head__tr, .fox-table__main__body__tr {
@@ -9249,7 +8958,7 @@
 }
 
 .fox-table__main__head__tr--border, .fox-table__main__body__tr--border {
-  border: 1px solid var(--fox-table-border-color, #ececec);
+  border: 1px solid var(--fox-table-border-color, var(--fox-border-color, #dcdfe6));
 }
 
 .fox-table__main__head__tr--alignleft, .fox-table__main__head__tr--align, .fox-table__main__body__tr--alignleft, .fox-table__main__body__tr--align {
@@ -9293,7 +9002,7 @@
 
 .fox-ellipsis .fox-ellipsis__text {
   cursor: hand;
-  color: var(--fox-ellipsis-expand-collapse-color, #3460fa);
+  color: var(--fox-ellipsis-expand-collapse-color, var(--fox-color-primary, #fa2c19));
   display: inline;
 }
 
@@ -9609,7 +9318,7 @@
 }
 
 .fox-trend-arrow {
-  font-size: var(--fox-trendarrow-font-size, 14px);
+  font-size: var(--fox-trendarrow-font-size, var(--fox-font-size-base, 14px));
   display: inline-block;
 }
 
@@ -9685,7 +9394,7 @@
 
 .fox-tour-content-bottom-operate-btn {
   border: 1px solid var(--fox-disable-color, #ccc);
-  color: var(--fox-text-color, gray);
+  color: var(--fox-text-color-regular, gray);
   border-radius: 4px;
   margin-left: 4px;
   padding: 2px 4px;
@@ -9766,7 +9475,7 @@
 }
 
 .fox-theme-dark .fox-barrage .fox-barrage__item {
-  color: var(--fox-dark-color-gray, var(--fox-text-color, gray));
+  color: var(--fox-dark-color-gray, var(--fox-text-color-regular, gray));
 }
 
 .fox-signature__inner {