npm - @fox-js/foxui - Versions diffs - 4.0.1-92 → 4.0.1-94 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/style.css CHANGED Viewed

@@ -565,7 +565,7 @@
 .fox-group__header-mark {
   width: var(--fox-group-header-mark-width, 3px);
   height: var(--fox-group-header-mark-height, 15px);
-  background: var(--fox-group-header-mark-color, var(--fox-primary-color, #fa2c19));
+  background: var(--fox-group-header-mark-color, var(--fox-color-primary, #fa2c19));
   display: inline-block;
 }
@@ -580,7 +580,7 @@
 .fox-group__header-collapse {
   cursor: pointer;
-  color: var(--fox-group-header-collapse-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-group-header-collapse-color, var(--fox-color-primary, #fa2c19));
   flex-flow: row;
   flex: none;
   justify-content: flex-start;
@@ -758,7 +758,7 @@
 }
 .fox-item__tip--info {
-  color: var(--fox-input-item-tip-info-color, var(--fox-color-info, #1279ff));
+  color: var(--fox-input-item-tip-info-color, var(--fox-color-info, #666));
 }
 .fox-item__tip--warn {
@@ -1136,8 +1136,8 @@
 .fox-radio__button--active {
   background: var(--fox-radio-button-background-active, #f5e6e3);
-  color: var(--fox-radio-label-active-color, var(--fox-primary-color, #fa2c19));
-  border: 1px solid var(--fox-radio-button-border-color-active, var(--fox-primary-color, #fa2c19));
+  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;
 }
@@ -1167,7 +1167,7 @@
 }
 .fox-radio__icon {
-  color: var(--fox-radio-label-active-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-radio-label-active-color, var(--fox-color-primary, #fa2c19));
   transition-property: color, border-color, background-color;
   transition-duration: .3s;
 }
@@ -1272,8 +1272,8 @@
 .fox-checkbox__button--active {
   background: var(--fox-checkbox-button-background-active, #f5e6e3);
-  color: var(--fox-checkbox-label-active-color, var(--fox-primary-color, #fa2c19));
-  border: 1px solid var(--fox-checkbox-button-border-color-active, var(--fox-primary-color, #fa2c19));
+  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;
 }
@@ -1303,7 +1303,7 @@
 }
 .fox-checkbox__icon {
-  color: var(--fox-checkbox-icon-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-checkbox-icon-color, var(--fox-color-primary, #fa2c19));
   font-size: var(--fox-checkbox-icon-font-size, 18px);
   transition-property: color, border-color, background-color;
   transition-duration: .3s;
@@ -1318,7 +1318,7 @@
 }
 .fox-checkbox__icon--indeterminate {
-  color: var(--fox-checkbox-icon-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-checkbox-icon-color, var(--fox-color-primary, #fa2c19));
   font-size: var(--fox-checkbox-icon-font-size, 18px);
 }
@@ -1629,7 +1629,7 @@
 }
 .fox-actionsheet__list-item.is-checked .fox-actionsheet__list-item-icon {
-  color: var(--fox-actionsheet-list-item-icon-color-active, var(--fox-radio-label-active-color, var(--fox-primary-color, #fa2c19))) !important;
+  color: var(--fox-actionsheet-list-item-icon-color-active, var(--fox-radio-label-active-color, var(--fox-color-primary, #fa2c19))) !important;
 }
 .fox-actionsheet__list-item.is-disabled .fox-actionsheet__list-item-icon {
@@ -1702,7 +1702,7 @@
 .fox-input-number-item .fox-input-number__right {
   color: var(--fox-input-number-item-right-color, #fff);
-  background-color: var(--fox-input-number-item-right-background, var(--fox-primary-color, #fa2c19));
+  background-color: var(--fox-input-number-item-right-background, var(--fox-color-primary, #fa2c19));
   border-radius: 0 4px 4px 0;
 }
@@ -1764,8 +1764,8 @@
 .fox-tabs-bar__titles-item.active .fox-tabs-bar__titles-item-line {
   content: " ";
   width: var(--fox-tabs-bar-item-line-width-horizontal, 40px);
-  background: var(--fox-tabs-bar-item-line-color-horizontal, var(--fox-primary-color, #fa2c19));
-  height: 3px;
+  height: var(--fox-tabs-bar-item-line-height-horizontal, 3px);
+  background: var(--fox-tabs-bar-item-line-color-horizontal, var(--fox-color-primary, #fa2c19));
 }
 .fox-tabs-bar__titles-item.button {
@@ -1782,7 +1782,7 @@
 .fox-tabs-bar__titles-item.button.active {
   background: var(--fox-tabs-bar-item-background-active-button, #fff);
-  color: var(--fox-tabs-bar-item-color-active-button, var(--fox-primary-color, #fa2c19));
+  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-weight: var(--fox-tabs-bar-item-font-weight-button, 400);
   border: var(--fox-tabs-bar-item-border-active-button, 1px solid transparent);
@@ -1795,7 +1795,7 @@
 .fox-tabs-bar__titles-item.button-group:first-child {
   border-top-left-radius: var(--fox-tabs-bar-item-radius-button-group, 8px);
   border-bottom-left-radius: var(--fox-tabs-bar-item-radius-button-group, 8px);
-  border-left: var(--fox-tabs-bar-item-border-width-button-group, 1px) solid var(--fox-tabs-bar-item-background-active-button-group, var(--fox-primary-color, #fa2c19));
+  border-left: 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));
 }
 .fox-tabs-bar__titles-item.button-group:last-child {
@@ -1808,18 +1808,18 @@
   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);
-  color: var(--fox-tabs-bar-item-color-button-group, var(--fox-primary-color, #fa2c19));
+  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-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-primary-color, #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-primary-color, #fa2c19));
-  border-bottom: var(--fox-tabs-bar-item-border-width-button-group, 1px) solid var(--fox-tabs-bar-item-background-active-button-group, var(--fox-primary-color, #fa2c19));
-  border-left: 0 solid var(--fox-tabs-bar-item-background-active-button-group, var(--fox-primary-color, #fa2c19));
+  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));
+  border-bottom: 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-left: 0 solid var(--fox-tabs-bar-item-background-active-button-group, var(--fox-color-primary, #fa2c19));
   flex: none;
 }
 .fox-tabs-bar__titles-item.button-group.active {
-  background: var(--fox-tabs-bar-item-background-active-button-group, var(--fox-primary-color, #fa2c19));
+  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);
   font-weight: var(--fox-tabs-bar-item-font-weight-button-group, 400);
@@ -1843,7 +1843,7 @@
 .fox-tabs-bar__titles-item.capsule.active {
   background: var(--fox-tabs-bar-item-background-active-capsule, #fff);
-  color: var(--fox-tabs-bar-item-color-active-capsule, var(--fox-primary-color, #fa2c19));
+  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-weight: var(--fox-tabs-bar-item-font-weight-capsule, 400);
 }
@@ -1882,7 +1882,7 @@
   line-height: 1;
   font-size: var(--fox-tabs-bar-item-tip-font-size, 10px);
   color: var(--fox-tabs-bar-item-tip-color, var(--fox-white, #fff));
-  background: var(--fox-tabs-bar-item-tip-background, var(--fox-primary-color, #fa2c19));
+  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);
   border-radius: 50%;
   position: absolute;
@@ -2032,9 +2032,9 @@
 }
 .fox-tabs-bar__titles.vertical .fox-tabs-bar__titles-item.active .fox-tabs-bar__titles-item-line {
-  background: var(--fox-tabs-bar-item-line-color-vertical, var(--fox-primary-color, #fa2c19));
-  width: 3px;
+  width: var(--fox-tabs-bar-item-line-width-vertical, 3px);
   height: var(--fox-tabs-bar-item-line-height-vertical, 14px);
+  background: var(--fox-tabs-bar-item-line-color-vertical, var(--fox-color-primary, #fa2c19));
   top: 50%;
   left: 10px;
 }
@@ -2092,7 +2092,7 @@
 }
 .fox-tabs-bar__popup-item.active {
-  color: var(--fox-tabs-bar-popup-item-color-active, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-tabs-bar-popup-item-color-active, var(--fox-color-primary, #fa2c19));
   background: var(--fox-tabs-bar-popup-item-background-active, #ffecec);
 }
@@ -2336,7 +2336,7 @@
 }
 .fox-steps-bar.is-vertical .fox-steps-bar__mark {
-  color: var(--fox-steps-bar-mark-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-steps-bar-mark-color, var(--fox-color-primary, #fa2c19));
   height: var(--fox-steps-bar-mark-height-vertical, var(--fox-steps-bar-icon-size, 28px));
   width: var(--fox-steps-bar-mark-width-vertical, var(--fox-steps-bar-icon-size, 28px));
   flex: none;
@@ -2395,7 +2395,7 @@
 .fox-steps-bar__step.is-active .fox-steps-bar__icon {
   color: var(--fox-steps-bar-icon-active-color, var(--fox-white, #fff));
-  background: var(--fox-steps-bar-icon-bg-active-color, var(--fox-primary-color, #fa2c19));
+  background: var(--fox-steps-bar-icon-bg-active-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-steps-bar__step.is-done {
@@ -2449,7 +2449,7 @@
 .fox-steps-bar__step.is-doit.is-active .fox-steps-bar__icon:before {
   content: "";
-  background-color: var(--fox-steps-bar-icon-bg-active-color, var(--fox-primary-color, #fa2c19));
+  background-color: var(--fox-steps-bar-icon-bg-active-color, var(--fox-color-primary, #fa2c19));
   opacity: .23;
   border-radius: 50%;
   width: 14px;
@@ -2472,7 +2472,7 @@
 }
 .fox-steps-bar__line-inner {
-  color: var(--fox-steps-bar-line-active-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-steps-bar-line-active-color, var(--fox-color-primary, #fa2c19));
   border-width: var(--fox-steps-bar-line-border-width, 1px);
   border-style: var(--fox-steps-bar-line-border-style, solid);
   border-color: inherit;
@@ -2525,7 +2525,7 @@
   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-primary-color, #fa2c19) 0%, var(--fox-primary-color-end, #fa6419) 100%));
+  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);
   border-radius: var(--fox-floating-button-border-radius, 50%);
   color: var(--fox-floating-button-color, #fff);
@@ -2541,7 +2541,7 @@
 .fox-more-button {
   cursor: pointer;
-  color: var(--fox-color-default, #666);
+  color: var(--fox-color-info, #666);
   flex-flow: row;
   justify-content: flex-start;
   align-items: center;
@@ -2549,11 +2549,11 @@
 }
 .fox-more-button--primary {
-  color: var(--fox-primary-color, #fa2c19);
+  color: var(--fox-color-primary, #fa2c19);
 }
 .fox-more-button--info {
-  color: var(--fox-color-info, #1279ff);
+  color: var(--fox-color-info, #666);
 }
 .fox-more-button--success {
@@ -3034,11 +3034,11 @@
 }
 .fox-text--primary {
-  color: var(--fox-text-primary-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-text-primary-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-text--primary .fox-text__mark {
-  background-color: var(--fox-text-primary-color, var(--fox-primary-color, #fa2c19));
+  background-color: var(--fox-text-primary-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-text--success {
@@ -3050,11 +3050,11 @@
 }
 .fox-text--info {
-  color: var(--fox-text-info-color, var(--fox-color-info, #1279ff));
+  color: var(--fox-text-info-color, var(--fox-color-info, #666));
 }
 .fox-text--info .fox-text__mark {
-  background-color: var(--fox-text-info-color, var(--fox-color-info, #1279ff));
+  background-color: var(--fox-text-info-color, var(--fox-color-info, #666));
 }
 .fox-text--warning {
@@ -3074,11 +3074,11 @@
 }
 .fox-text--default {
-  color: var(--fox-text-default-color, var(--fox-color-default, #666));
+  color: var(--fox-text-default-color, var(--fox-color-info, #666));
 }
 .fox-text--default .fox-text__mark {
-  background-color: var(--fox-text-default-color, var(--fox-color-default, #666));
+  background-color: var(--fox-text-default-color, var(--fox-color-info, #666));
 }
 .fox-text--large {
@@ -3093,14 +3093,14 @@
   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-default, #666));
+  background-color: var(--fox-text-default-color, var(--fox-color-info, #666));
   line-height: var(--fox-text-font-size, var(--fox-font-size-base, 14px));
   border-radius: 50%;
   display: inline-block;
 }
 .fox-text__mark--primary {
-  background-color: var(--fox-text-primary-color, var(--fox-primary-color, #fa2c19));
+  background-color: var(--fox-text-primary-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-text__mark--success {
@@ -3116,19 +3116,19 @@
 }
 .fox-text__mark--default {
-  background-color: var(--fox-text-default-color, var(--fox-color-default, #666));
+  background-color: var(--fox-text-default-color, var(--fox-color-info, #666));
 }
 .fox-text__mark-wrap {
   box-sizing: content-box;
-  color: var(--fox-text-default-color, var(--fox-color-default, #666));
+  color: var(--fox-text-default-color, var(--fox-color-info, #666));
   justify-content: center;
   align-items: center;
   display: flex;
 }
 .fox-text__mark-wrap--primary {
-  color: var(--fox-text-primary-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-text-primary-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-text__mark-wrap--success {
@@ -3144,7 +3144,7 @@
 }
 .fox-text__mark-wrap--default {
-  color: var(--fox-text-default-color, var(--fox-color-default, #666));
+  color: var(--fox-text-default-color, var(--fox-color-info, #666));
 }
 .fox-text__mark-wrap svg {
@@ -3252,7 +3252,7 @@
 .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-primary-color, var(--fox-primary-color, #fa2c19)) 0%, var(--fox-primary-color, var(--fox-primary-color, #fa2c19)) 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%));
   border: var(--fox-button-border-width, 1px) solid transparent;
 }
@@ -3285,8 +3285,8 @@
 }
 .fox-button--plain.fox-button--primary {
-  color: var(--fox-button-primary-border-color, var(--fox-primary-color, #fa2c19));
-  border-color: var(--fox-button-primary-border-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-button-primary-border-color, var(--fox-color-primary, #fa2c19));
+  border-color: var(--fox-button-primary-border-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-button--plain.fox-button--info {
@@ -3370,7 +3370,7 @@
 .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-primary-color, var(--fox-primary-color, #fa2c19)) 0%, var(--fox-primary-color, var(--fox-primary-color, #fa2c19)) 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%));
   border: var(--fox-button-border-width, 1px) solid transparent;
 }
@@ -3403,8 +3403,8 @@
 }
 .fox-button--plain.fox-button--primary:not([disabled]):active {
-  color: var(--fox-button-primary-border-color, var(--fox-primary-color, #fa2c19));
-  border-color: var(--fox-button-primary-border-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-button-primary-border-color, var(--fox-color-primary, #fa2c19));
+  border-color: var(--fox-button-primary-border-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-button--plain.fox-button--info:not([disabled]):active {
@@ -4383,7 +4383,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-primary-color, #fa2c19) 0%, var(--fox-primary-color-end, #fa6419) 100%));
+  background: var(--fox-fixednav-btn-bg, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
   border-radius: 45px 0 0 45px;
   justify-content: center;
   align-items: center;
@@ -4443,7 +4443,7 @@
 }
 .fox-fixednav__list-item.active > .span {
-  color: var(--fox-fixednav-item-active-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-fixednav-item-active-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-fixednav__list-item > img {
@@ -4459,7 +4459,7 @@
 .fox-fixednav__list-item > .b {
   color: #fff;
-  background: var(--fox-primary-color, #fa2c19);
+  background: var(--fox-color-primary, #fa2c19);
   text-align: center;
   border-radius: 7px;
   min-width: 12px;
@@ -4532,7 +4532,7 @@
 }
 .fox-menu .fox-menu__bar .fox-menu__item.active {
-  color: var(--fox-menu-item-active-text-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-menu-item-active-text-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-menu .fox-menu__bar .fox-menu__item.disabled {
@@ -4579,7 +4579,7 @@
 .fox-menu-item .active {
   font-weight: var(--fox-menu-active-item-font-weight, 500);
-  color: var(--fox-menu-item-active-text-color, var(--fox-primary-color, #fa2c19)) !important;
+  color: var(--fox-menu-item-active-text-color, var(--fox-color-primary, #fa2c19)) !important;
 }
 .fox-menu-item__content {
@@ -4659,7 +4659,7 @@
 .fox-tabbar-item {
   text-align: center;
-  color: var(--fox-primary-color, #fa2c19);
+  color: var(--fox-color-primary, #fa2c19);
   height: 100%;
   font-size: var(--fox-tabbar-item-text-font-size, var(--fox-font-size-extra-small, 10px));
   flex: 1;
@@ -4682,7 +4682,7 @@
 }
 .fox-tabbar-item_icon-box_tips {
-  background: var(--fox-tabbar-active-color, var(--fox-primary-color, #fa2c19));
+  background: var(--fox-tabbar-active-color, var(--fox-color-primary, #fa2c19));
   border: 1px solid var(--fox-white, #fff);
   text-align: center;
   box-shadow: 0 0 0 1px var(--fox-white, #fff);
@@ -4696,7 +4696,7 @@
 }
 .fox-tabbar-item_icon-box_dot {
-  background: var(--fox-tabbar-active-color, var(--fox-primary-color, #fa2c19));
+  background: var(--fox-tabbar-active-color, var(--fox-color-primary, #fa2c19));
   text-align: center;
   color: #fff;
   border-radius: 7px;
@@ -4803,7 +4803,7 @@
 }
 .fox-elevator__list__item__name--highcolor {
-  color: var(--fox-elevator-list-item-highcolor, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-elevator-list-item-highcolor, var(--fox-color-primary, #fa2c19));
 }
 .fox-elevator__list .fox-elevator__list__fixed__wrapper {
@@ -4819,7 +4819,7 @@
   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);
-  color: var(--fox-elevator-list-fixed-color, var(--fox-primary-color, #fa2c19));
+  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;
@@ -4872,7 +4872,7 @@
 }
 .fox-elevator__bars__inner__item.active {
-  color: var(--fox-elevator-list-item-bars-inner-item-active-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-elevator-list-item-bars-inner-item-active-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-theme-dark .fox-pagination-prev, .fox-theme-dark .fox-pagination-item, .fox-theme-dark .fox-pagination-next {
@@ -4894,7 +4894,7 @@
 .fox-pagination {
   font-size: var(--fox-pagination-font-size, var(--fox-font-size-base, 14px));
-  color: var(--fox-pagination-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-pagination-color, var(--fox-color-primary, #fa2c19));
   display: flex;
 }
@@ -4937,7 +4937,7 @@
 .fox-pagination .active {
   color: var(--fox-white, #fff);
-  background: var(--fox-pagination-active-background-color, linear-gradient(135deg, var(--fox-primary-color, #fa2c19) 0%, var(--fox-primary-color-end, #fa6419) 100%));
+  background: var(--fox-pagination-active-background-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
   border: none;
 }
@@ -5051,7 +5051,7 @@
 }
 .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-primary-color, #fa2c19) 0%, #fa2c1926 100%));
+  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;
@@ -5167,7 +5167,7 @@
 .fox-tabs__titles-item__smile .fox-icon {
   width: 100%;
   height: 100%;
-  color: var(--fox-tabs-tab-smile-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-tabs-tab-smile-color, var(--fox-color-primary, #fa2c19));
   font-size: 12px;
   position: absolute;
 }
@@ -5185,7 +5185,7 @@
 .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-primary-color, #fa2c19) 0%, #fa2c1926 100%));
+  background: var(--fox-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--fox-color-primary, #fa2c19) 0%, #fa2c1926 100%));
   height: 3px;
 }
@@ -5283,8 +5283,8 @@
   color: var(--fox-indicator-color, var(--fox-white, #fff));
   vertical-align: middle;
   border: 1px solid var(--fox-indicator-color, var(--fox-white, #fff));
-  background-color: var(--fox-indicator-bg-color, var(--fox-primary-color, #fa2c19));
-  box-shadow: 0 0 1px 1px var(--fox-indicator-bg-color, var(--fox-primary-color, #fa2c19));
+  background-color: var(--fox-indicator-bg-color, var(--fox-color-primary, #fa2c19));
+  box-shadow: 0 0 1px 1px var(--fox-indicator-bg-color, var(--fox-color-primary, #fa2c19));
   border-radius: 50%;
   display: inline-block;
   position: relative;
@@ -5478,7 +5478,7 @@
 }
 .fox-range-container-vertical .fox-range-mark-text-active .fox-range-tick {
-  background: var(--fox-range-bar-bg-color, linear-gradient(135deg, var(--fox-primary-color, #fa2c19) 0%, var(--fox-primary-color-end, #fa6419) 100%));
+  background: var(--fox-range-bar-bg-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
 }
 .fox-range-container-vertical .fox-range-tick {
@@ -5502,7 +5502,7 @@
 }
 .fox-range:before {
-  background-color: var(--fox-range-bg-color, var(--fox-primary-color, #fa2c19));
+  background-color: var(--fox-range-bg-color, var(--fox-color-primary, #fa2c19));
   opacity: .5;
   content: "";
   width: 100%;
@@ -5512,7 +5512,7 @@
 }
 .fox-range-bar {
-  background: var(--fox-range-bar-bg-color, linear-gradient(135deg, var(--fox-primary-color, #fa2c19) 0%, var(--fox-primary-color-end, #fa6419) 100%));
+  background: var(--fox-range-bar-bg-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
   border-radius: inherit;
   width: 100%;
   height: 100%;
@@ -5525,7 +5525,7 @@
   width: var(--fox-range-bar-btn-width, 24px);
   height: var(--fox-range-bar-btn-height, 24px);
   background-color: var(--fox-range-bar-btn-bg-color, var(--fox-white, #fff));
-  border: var(--fox-range-bar-btn-border, 1px solid var(--fox-primary-color, #fa2c19));
+  border: var(--fox-range-bar-btn-border, 1px solid var(--fox-color-primary, #fa2c19));
   border-radius: 50%;
   outline: none;
   display: block;
@@ -5598,7 +5598,7 @@
 }
 .fox-range-mark-text-active .fox-range-tick {
-  background: var(--fox-range-bar-bg-color, linear-gradient(135deg, var(--fox-primary-color, #fa2c19) 0%, var(--fox-primary-color-end, #fa6419) 100%));
+  background: var(--fox-range-bar-bg-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
 }
 .fox-range-tick {
@@ -5814,12 +5814,12 @@
 }
 .fox-cascader__item.active:not(.disabled) {
-  color: var(--fox-cascader-item-active-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-cascader-item-active-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-cascader__item.active .fox-cascader__item__icon-check {
   visibility: visible;
-  color: var(--fox-cascader-item-active-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-cascader-item-active-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-cascader__item.disabled {
@@ -5834,7 +5834,7 @@
 .fox-theme-dark .fox-calendar .fox-calendar__content .fox-calendar__panel .fox-calendar__days .calendar-month-day-choose {
   background-color: var(--fox-dark-calendar-choose-color, #e3e3e333);
-  color: var(--fox-calendar-choose-font-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-calendar-choose-font-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-theme-dark .fox-calendar .fox-calendar__footer {
@@ -5910,7 +5910,7 @@
 }
 .fox-calendar__header .fox-calendar__weekdays .fox-calendar__weekday:first-of-type, .fox-calendar__header .fox-calendar__weekdays .fox-calendar__weekday:last-of-type {
-  color: var(--fox-calendar-day67-font-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-calendar-day67-font-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-calendar__content {
@@ -5965,7 +5965,7 @@
 }
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__days-item .fox-calendar__day:nth-child(7n), .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__days-item .fox-calendar__day:nth-child(7n+1) {
-  color: var(--fox-calendar-day67-font-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-calendar-day67-font-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day {
@@ -5995,7 +5995,7 @@
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day .fox-calendar__day-tip {
   width: 100%;
-  color: var(--fox-calendar-primary-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-calendar-primary-color, var(--fox-color-primary, #fa2c19));
   font-size: 12px;
   line-height: 14px;
   position: absolute;
@@ -6011,7 +6011,7 @@
 }
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--active {
-  background-color: var(--fox-calendar-primary-color, var(--fox-primary-color, #fa2c19));
+  background-color: var(--fox-calendar-primary-color, var(--fox-color-primary, #fa2c19));
   border-radius: var(--fox-calendar-day-active-border-radius, 0px);
   color: var(--fox-white, #fff) !important;
 }
@@ -6029,11 +6029,11 @@
 }
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--choose {
-  color: var(--fox-calendar-choose-font-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-calendar-choose-font-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--choose:after {
-  background-color: var(--fox-calendar-choose-color, var(--fox-primary-color, #fa2c19));
+  background-color: var(--fox-calendar-choose-color, var(--fox-color-primary, #fa2c19));
   opacity: .09;
   content: "";
   position: absolute;
@@ -6058,7 +6058,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-primary-color, var(--fox-primary-color, #fa2c19)) 0%, var(--fox-primary-color, var(--fox-primary-color, #fa2c19)) 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%));
   color: var(--fox-white, #fff);
   text-align: center;
   line-height: var(--fox-calendar-footer-button-height, 44px);
@@ -6164,7 +6164,7 @@
 }
 .fox-rate-item__icon {
-  color: var(--fox-rate-icon-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-rate-icon-color, var(--fox-color-primary, #fa2c19));
   cursor: pointer;
   flex-shrink: 0;
 }
@@ -6245,7 +6245,7 @@
 .fox-picker__right {
   float: right;
-  color: var(--fox-picker-ok-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-picker-ok-color, var(--fox-color-primary, #fa2c19));
   font-size: var(--fox-picker-bar-ok-font-size, var(--fox-font-size-base, 14px));
 }
@@ -6434,7 +6434,7 @@
 .fox-short-password__message .fox-short-password--error {
   line-height: 1;
   font-size: var(--fox-font-size-extra-small, 10px);
-  color: var(--fox-shortpassword-error, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-shortpassword-error, var(--fox-color-primary, #fa2c19));
 }
 .fox-short-password__message .fox-short-password--forget {
@@ -7066,16 +7066,12 @@
   border-left: var(--fox-dialog-footer-button-border-left, 1px solid #eee);
 }
-.fox-theme-dark .fox-infinite-loading .fox-infinite__bottom, .fox-theme-dark .fox-infinite-loading .fox-infinite__bottom .bottom-text {
-  color: var(--fox-dark-color, var(--fox-white, #fff));
-}
 .fox-infinite-loading {
   width: 100%;
   display: block;
 }
-.fox-infinite-loading .fox-infinite__bottom {
+.fox-infinite-loading__bottom {
   width: 100%;
   height: 50px;
   line-height: 50px;
@@ -7085,13 +7081,13 @@
   display: block;
 }
-.fox-infinite-loading .fox-infinite__bottom .fox-infinite__bottom-box {
+.fox-infinite-loading__bottom-box {
   justify-content: center;
   align-items: center;
   display: flex;
 }
-.fox-infinite-loading .fox-infinite__bottom .fox-infinite__bottom-box__img {
+.fox-infinite-loading__bottom-box__img {
   width: 15px;
   height: 15px;
   margin-right: 5px;
@@ -7102,7 +7098,7 @@
   animation-fill-mode: both;
 }
-.fox-infinite-loading .fox-infinite__bottom .fox-infinite__bottom-box__text {
+.fox-infinite-loading__bottom-box__text {
   color: var(--fox-text-color, gray);
   font-size: 12px;
 }
@@ -7112,12 +7108,12 @@
   overflow: hidden;
 }
-.fox-pull-refresh-container {
+.fox-pull-refresh__container {
   height: 100%;
   position: relative;
 }
-.fox-pull-refresh-container-topbox {
+.fox-pull-refresh__container-topbox {
   text-align: center;
   justify-content: center;
   align-items: center;
@@ -7130,7 +7126,7 @@
   transform: translateY(-100%);
 }
-.fox-pull-refresh-container-topbox-icon {
+.fox-pull-refresh__container-topbox-icon {
   width: 16px;
   height: 16px;
   margin-right: 4px;
@@ -7141,7 +7137,7 @@
   animation-fill-mode: both;
 }
-.fox-pull-refresh-container-topbox-text {
+.fox-pull-refresh__container-topbox-text {
   font-size: var(--fox-font-size-base, 14px);
   color: var(--fox-text-color, gray);
 }
@@ -7169,7 +7165,7 @@
 }
 .fox-notify--base {
-  background: var(--fox-notify-base-background-color, linear-gradient(135deg, var(--fox-primary-color, #fa2c19) 0%, var(--fox-primary-color-end, #fa6419) 100%));
+  background: var(--fox-notify-base-background-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
 }
 .fox-notify--primary {
@@ -7195,7 +7191,7 @@
 .fox-switch {
   cursor: pointer;
-  background-color: var(--fox-primary-color, #fa2c19);
+  background-color: var(--fox-color-primary, #fa2c19);
   border-radius: var(--fox-switch-border-radius, 21px);
   background-position: center;
   background-repeat: no-repeat;
@@ -7548,7 +7544,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-primary-color, #fa2c19) 0%, var(--fox-primary-color-end, #fa6419) 100%));
+  background: var(--fox-progress-inner-background-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
   width: 30%;
   height: 100%;
   transition: all .4s;
@@ -7634,7 +7630,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-primary-color, #fa2c19) 0%, var(--fox-primary-color-end, #fa6419) 100%)));
+  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%)));
   border-radius: var(--fox-progress-insidetext-border-radius, 5px);
   min-width: 0;
   transition: all .4s;
@@ -7657,7 +7653,7 @@
 }
 .fox-circleprogress-hover {
-  stroke: var(--fox-circleprogress-primary-color, var(--fox-primary-color, #fa2c19));
+  stroke: var(--fox-circleprogress-primary-color, var(--fox-color-primary, #fa2c19));
   transition: stroke-dasharray .6s, stroke .6s;
 }
@@ -8132,8 +8128,8 @@
 }
 .fox-step.fox-step-finish .fox-step-head {
-  color: var(--fox-steps-finish-head-color, var(--fox-primary-color, #fa2c19));
-  border-color: var(--fox-steps-finish-head-border-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-steps-finish-head-color, var(--fox-color-primary, #fa2c19));
+  border-color: var(--fox-steps-finish-head-border-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-step.fox-step-finish .fox-step-icon.is-icon {
@@ -8141,24 +8137,24 @@
 }
 .fox-step.fox-step-finish .fox-step-line {
-  background: var(--fox-steps-finish-line-background, var(--fox-primary-color, #fa2c19));
+  background: var(--fox-steps-finish-line-background, var(--fox-color-primary, #fa2c19));
 }
 .fox-step.fox-step-finish .fox-step-title {
-  color: var(--fox-steps-finish-title-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-steps-finish-title-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-step.fox-step-process .fox-step-head {
   color: var(--fox-steps-process-head-color, var(--fox-white, #fff));
-  border-color: var(--fox-steps-process-head-border-color, var(--fox-primary-color, #fa2c19));
+  border-color: var(--fox-steps-process-head-border-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-step.fox-step-process .fox-step-icon.is-icon {
-  background-color: var(--fox-steps-process-icon-text-color, var(--fox-primary-color, #fa2c19));
+  background-color: var(--fox-steps-process-icon-text-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-step.fox-step-process .fox-step-title {
-  color: var(--fox-steps-process-title-color, var(--fox-primary-color, #fa2c19));
+  color: var(--fox-steps-process-title-color, var(--fox-color-primary, #fa2c19));
 }
 .fox-step.fox-step-wait .fox-step-head {
@@ -8190,7 +8186,7 @@
 }
 .fox-steps-horizontal.fox-steps-dot .fox-step-icon {
-  background: var(--fox-primary-color, #fa2c19);
+  background: var(--fox-color-primary, #fa2c19);
   box-sizing: content-box;
   border-radius: 50%;
   width: 8px;
@@ -8206,17 +8202,17 @@
 }
 .fox-steps-horizontal.fox-steps-dot .fox-step-finish .fox-step-icon {
-  background-color: var(--fox-primary-color, #fa2c19);
+  background-color: var(--fox-color-primary, #fa2c19);
 }
 .fox-steps-horizontal.fox-steps-dot .fox-step-process .fox-step-icon {
-  background-color: var(--fox-primary-color, #fa2c19);
+  background-color: var(--fox-color-primary, #fa2c19);
   position: relative;
 }
 .fox-steps-horizontal.fox-steps-dot .fox-step-process .fox-step-icon:before {
   content: "";
-  background-color: var(--fox-primary-color-end, #fa6419);
+  background-color: var(--fox-color-primary-end, #fa6419);
   opacity: .23;
   border-radius: 50%;
   width: 14px;
@@ -8260,7 +8256,7 @@
 }
 .fox-steps-vertical.fox-steps-dot .fox-step-icon {
-  background: var(--fox-primary-color, #fa2c19);
+  background: var(--fox-color-primary, #fa2c19);
   box-sizing: content-box;
   border-radius: 50%;
   width: 8px;
@@ -8276,17 +8272,17 @@
 }
 .fox-steps-vertical.fox-steps-dot .fox-step-finish .fox-step-icon {
-  background-color: var(--fox-primary-color, #fa2c19);
+  background-color: var(--fox-color-primary, #fa2c19);
 }
 .fox-steps-vertical.fox-steps-dot .fox-step-process .fox-step-icon {
-  background-color: var(--fox-primary-color, #fa2c19);
+  background-color: var(--fox-color-primary, #fa2c19);
   position: relative;
 }
 .fox-steps-vertical.fox-steps-dot .fox-step-process .fox-step-icon:before {
   content: "";
-  background-color: var(--fox-primary-color-end, #fa6419);
+  background-color: var(--fox-color-primary-end, #fa6419);
   opacity: .23;
   border-radius: 50%;
   width: 14px;
@@ -8359,7 +8355,7 @@
 .fox-price {
   font-size: var(--fox-font-size-medium, 16px);
-  color: var(--fox-primary-color, #fa2c19);
+  color: var(--fox-color-primary, #fa2c19);
   display: inline;
 }
@@ -8576,7 +8572,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-primary-color, #fa2c19) 0%, var(--fox-primary-color-end, #fa6419) 100%));
+  background: var(--fox-badge-background-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
   padding: var(--fox-badge-icon-padding, 4px);
   text-align: center;
   border-radius: var(--fox-badge-border-radius, 14px);
@@ -8594,7 +8590,7 @@
 }
 .fox-badge .fox-badge__content--sup {
-  background: var(--fox-badge-background-color, linear-gradient(135deg, var(--fox-primary-color, #fa2c19) 0%, var(--fox-primary-color-end, #fa6419) 100%));
+  background: var(--fox-badge-background-color, linear-gradient(135deg, var(--fox-color-primary, #fa2c19) 0%, var(--fox-color-primary-end, #fa6419) 100%));
   padding: var(--fox-badge-padding, 0 5px);
   text-align: center;
   border-radius: var(--fox-badge-border-radius, 14px);
@@ -9699,7 +9695,7 @@
 .fox-tour-content-bottom-operate-btn.active {
   color: #fff;
-  background: var(--fox-primary-color, #fa2c19);
+  background: var(--fox-color-primary, #fa2c19);
   border: 0;
 }