@fox-js/foxui-pad 4.1.1-36 → 4.1.1-38

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
  1. package/dist/index.cjs.js +1 -1
  2. package/dist/index.esm.js +2757 -2689
  3. package/dist/index.umd.js +1 -1
  4. package/dist/style.css +327 -319
  5. package/dist/style.js +1 -1
  6. package/package.json +1 -1
package/dist/style.css CHANGED
@@ -19,7 +19,7 @@
19
19
  }
20
20
 
21
21
  .foxFade-enter-active, .foxFadeIn, .foxFade-leave-active, .foxFadeOut {
22
- animation-duration: var(--fox-animation-duration, .25s);
22
+ animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
23
23
  animation-fill-mode: both;
24
24
  animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
25
25
  }
@@ -59,7 +59,7 @@
59
59
  }
60
60
 
61
61
  .foxZoom-enter-active, .foxZoomIn, .foxZoom-leave-active, .foxZoomOut {
62
- animation-duration: var(--fox-animation-duration, .25s);
62
+ animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
63
63
  animation-fill-mode: both;
64
64
  animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
65
65
  }
@@ -97,7 +97,7 @@
97
97
  }
98
98
 
99
99
  .foxEase-enter-active, .foxEaseIn, .foxEase-leave-active, .foxEaseOut {
100
- animation-duration: var(--fox-animation-duration, .25s);
100
+ animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
101
101
  animation-fill-mode: both;
102
102
  animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
103
103
  }
@@ -135,7 +135,7 @@
135
135
  }
136
136
 
137
137
  .foxDrop-enter-active, .foxDropIn, .foxDrop-leave-active, .foxDropOut {
138
- animation-duration: var(--fox-animation-duration, .25s);
138
+ animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
139
139
  animation-fill-mode: both;
140
140
  animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
141
141
  }
@@ -159,7 +159,7 @@
159
159
  }
160
160
 
161
161
  .foxRotate-enter-active, .foxRotateIn, .foxRotate-leave-active, .foxRotateOut {
162
- animation-duration: var(--fox-animation-duration, .25s);
162
+ animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
163
163
  animation-fill-mode: both;
164
164
  animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
165
165
  }
@@ -281,9 +281,9 @@
281
281
  .fox-header-bar {
282
282
  min-height: var(--fox-header-bar-min-height, auto);
283
283
  box-sizing: var(--fox-header-bar-box-sizing, content-box);
284
- background-color: var(--fox-header-bar-background-color, var(--fox-white, #fff));
285
- color: var(--fox-header-bar-color, var(--fox-title-color, #1a1a1a));
286
- box-shadow: var(--fox-header-bar-box-shadow, 0px 1px 7px 0px var(--fox-border-color-lighter, #ebeef5));
284
+ background-color: var(--fox-header-bar-background-color, var(--fox-white, var(--el-color-white)));
285
+ color: var(--fox-header-bar-color, var(--fox-title-color, var(--el-text-color-primary)));
286
+ box-shadow: var(--fox-header-bar-box-shadow, 0px 1px 7px 0px var(--fox-border-color-lighter, var(--el-border-color-lighter)));
287
287
  border: 0;
288
288
  flex-flow: column wrap;
289
289
  justify-content: center;
@@ -297,8 +297,8 @@
297
297
  }
298
298
 
299
299
  .fox-header-bar--border {
300
- border-top: var(--fox-header-bar-border-top, 0px solid var(--fox-border-color-lighter, #ebeef5));
301
- border-bottom: var(--fox-header-bar-border-bottom, 1px solid var(--fox-border-color-lighter, #ebeef5));
300
+ border-top: var(--fox-header-bar-border-top, 0px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
301
+ border-bottom: var(--fox-header-bar-border-bottom, 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
302
302
  }
303
303
 
304
304
  .fox-header-bar--fixed {
@@ -313,15 +313,15 @@
313
313
  }
314
314
 
315
315
  .fox-header-bar__title {
316
- font-size: var(--fox-header-bar-title-font-size, var(--fox-font-size-medium, 16px));
316
+ font-size: var(--fox-header-bar-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
317
317
  text-align: center;
318
318
  min-width: 53%;
319
319
  display: block;
320
320
  }
321
321
 
322
322
  .fox-header-bar__title .title-icon {
323
- height: var(--fox-header-bar-title-icon-size, 18px);
324
- width: var(--fox-header-bar-title-icon-size, 18px);
323
+ height: var(--fox-header-bar-title-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
324
+ width: var(--fox-header-bar-title-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
325
325
  margin-left: 13px;
326
326
  display: inline;
327
327
  }
@@ -335,7 +335,7 @@
335
335
  }
336
336
 
337
337
  .fox-header-bar__left {
338
- font-size: var(--fox-header-bar-left-font-size, var(--fox-font-size-medium, 16px));
338
+ font-size: var(--fox-header-bar-left-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
339
339
  cursor: pointer;
340
340
  padding: var(--fox-header-bar-left-padding, 0 16px);
341
341
  flex-flow: row;
@@ -347,12 +347,12 @@
347
347
  }
348
348
 
349
349
  .fox-header-bar__left .left-icon {
350
- height: var(--fox-header-bar-left-icon-size, 18px);
351
- width: var(--fox-header-bar-left-icon-size, 18px);
350
+ height: var(--fox-header-bar-left-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
351
+ width: var(--fox-header-bar-left-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
352
352
  }
353
353
 
354
354
  .fox-header-bar__right {
355
- font-size: var(--fox-header-bar-right-font-size, var(--fox-font-size-medium, 16px));
355
+ font-size: var(--fox-header-bar-right-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
356
356
  padding: var(--fox-header-bar-right-padding, 0 16px);
357
357
  cursor: pointer;
358
358
  align-items: center;
@@ -362,8 +362,8 @@
362
362
  }
363
363
 
364
364
  .fox-header-bar__right .right-icon {
365
- height: var(--fox-header-bar-right-icon-size, 18px);
366
- width: var(--fox-header-bar-right-icon-size, 18px);
365
+ height: var(--fox-header-bar-right-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
366
+ width: var(--fox-header-bar-right-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
367
367
  margin-left: 8px;
368
368
  }
369
369
 
@@ -404,7 +404,7 @@
404
404
  min-height: var(--fox-footer-bar-min-height, 50px);
405
405
  padding: var(--fox-footer-bar-padding, 7px 0);
406
406
  box-sizing: var(--fox-footer-bar-box-sizing, content-box);
407
- background-color: var(--fox-footer-background-color, var(--fox-white, #fff));
407
+ background-color: var(--fox-footer-background-color, var(--fox-white, var(--el-color-white)));
408
408
  border: 0;
409
409
  flex-flow: row;
410
410
  display: flex;
@@ -412,8 +412,8 @@
412
412
  }
413
413
 
414
414
  .fox-footer-bar--border {
415
- border-top: var(--fox-footer-bar-border-top, 1px solid var(--fox-border-color-lighter, #ebeef5));
416
- border-bottom: var(--fox-footer-bar-border-bottom, 1px solid var(--fox-border-color-lighter, #ebeef5));
415
+ border-top: var(--fox-footer-bar-border-top, 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
416
+ border-bottom: var(--fox-footer-bar-border-bottom, 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
417
417
  }
418
418
 
419
419
  .fox-footer-bar--fixed {
@@ -453,7 +453,7 @@
453
453
 
454
454
  .fox-content {
455
455
  box-sizing: border-box;
456
- background-color: var(--fox-content-background-color, var(--fox-white, #fff));
456
+ background-color: var(--fox-content-background-color, var(--fox-white, var(--el-color-white)));
457
457
  display: block;
458
458
  overflow: hidden auto;
459
459
  }
@@ -581,8 +581,8 @@
581
581
 
582
582
  .fox-group__header-title {
583
583
  white-space: nowrap;
584
- color: var(--fox-group-header-color, var(--fox-title-color, #1a1a1a));
585
- font-size: var(--fox-group-header-font-size, var(--fox-font-size-base, 14px));
584
+ color: var(--fox-group-header-color, var(--fox-title-color, var(--el-text-color-primary)));
585
+ font-size: var(--fox-group-header-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
586
586
  font-weight: var(--fox-group-header-font-weight, 400);
587
587
  line-height: var(--fox-group-header-line-height, 20px);
588
588
  display: inline-block;
@@ -591,10 +591,11 @@
591
591
  .fox-group__header-collapse {
592
592
  cursor: pointer;
593
593
  color: var(--fox-group-header-collapse-color, var(--fox-color-primary, var(--el-color-primary)));
594
- flex-flow: row;
595
- flex: none;
596
594
  justify-content: flex-start;
597
595
  align-items: center;
596
+ gap: var(--fox-group-header-collapse-gutter, 2px);
597
+ flex-flow: row;
598
+ flex: none;
598
599
  display: flex;
599
600
  }
600
601
 
@@ -603,8 +604,8 @@
603
604
  }
604
605
 
605
606
  .fox-group__header-collapse-icon {
606
- width: var(--fox-group-header-collapse-icon-size, 30px);
607
- height: var(--fox-group-header-collapse-icon-size, 30px);
607
+ width: var(--fox-group-header-collapse-icon-size, var(--fox-font-size-small, var(--el-font-size-small)));
608
+ height: var(--fox-group-header-collapse-icon-size, var(--fox-font-size-small, var(--el-font-size-small)));
608
609
  transition: transform .3s ease-in-out;
609
610
  }
610
611
 
@@ -617,7 +618,7 @@
617
618
  }
618
619
 
619
620
  .fox-group__header-collapse-text {
620
- font-size: var(--fox-group-header-collapse-font-size, var(--fox-font-size-base, 14px));
621
+ font-size: var(--fox-group-header-collapse-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
621
622
  }
622
623
 
623
624
  .fox-group__header-mark + .fox-group__header-title {
@@ -628,7 +629,7 @@
628
629
  width: var(--fox-input-item-width);
629
630
  min-width: var(--fox-input-item-min-width, 0);
630
631
  max-width: var(--fox-input-item-max-width);
631
- padding: var(--fox-input-item-padding, 0);
632
+ padding: var(--fox-input-item-padding);
632
633
  margin: var(--fox-input-item-margin);
633
634
  background: var(--fox-input-item-background-color);
634
635
  box-sizing: border-box;
@@ -660,7 +661,7 @@
660
661
  }
661
662
 
662
663
  .fox-item__input--border {
663
- border-bottom: var(--fox-input-item-border-bottom, 0px solid var(--fox-input-border-bottom, #eaf0fb));
664
+ border-bottom: var(--fox-input-item-border-bottom, 0px solid var(--fox-input-border-bottom, var(--fox-border-color-light, var(--el-border-color-light))));
664
665
  }
665
666
 
666
667
  .fox-item__main {
@@ -682,10 +683,10 @@
682
683
 
683
684
  .fox-item__main .label {
684
685
  box-sizing: border-box;
685
- font-size: var(--fox-input-item-label-font-size, var(--fox-font-size-base, 14px));
686
+ font-size: var(--fox-input-item-label-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
686
687
  font-weight: var(--fox-input-item-label-font-weight, 400);
687
688
  line-height: var(--fox-input-item-label-line-height, auto);
688
- color: var(--fox-input-item-label-color, var(--fox-black, #000));
689
+ color: var(--fox-input-item-label-color, var(--fox-black, var(--el-color-black)));
689
690
  flex-flow: row;
690
691
  align-items: center;
691
692
  display: flex;
@@ -745,7 +746,7 @@
745
746
  }
746
747
 
747
748
  .fox-item__tip {
748
- font-size: var(--fox-input-item-tip-font-size, var(--fox-font-size-small, 12px));
749
+ font-size: var(--fox-input-item-tip-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
749
750
  line-height: var(--fox-input-item-tip-height, 16px);
750
751
  text-align: left;
751
752
  padding-left: var(--fox-input-item-label-width, 30%);
@@ -766,12 +767,12 @@
766
767
  }
767
768
 
768
769
  .fox-item__tip--icon > svg {
769
- width: var(--fox-input-item-tip-icon-size, 10px);
770
- height: var(--fox-input-item-tip-icon-size, 10px);
770
+ width: var(--fox-input-item-tip-icon-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
771
+ height: var(--fox-input-item-tip-icon-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
771
772
  }
772
773
 
773
774
  .fox-item__tip--info {
774
- color: var(--fox-input-item-tip-info-color, var(--fox-color-primary, var(--el-color-primary)));
775
+ color: var(--fox-input-item-tip-info-color, var(--fox-color-info, var(--el-color-info)));
775
776
  }
776
777
 
777
778
  .fox-item__tip--warn {
@@ -808,10 +809,11 @@
808
809
  }
809
810
 
810
811
  .fox-row-item {
811
- padding: var(--fox-input-item-padding, 0);
812
+ padding: var(--fox-input-item-padding);
812
813
  margin: var(--fox-input-item-margin);
813
814
  align-items: center;
814
- gap: var(--fox-row-item-gap, 12px);
815
+ column-gap: var(--fox-row-item-column-gap, 12px);
816
+ row-gap: var(--fox-row-item-row-gap);
815
817
  border: none;
816
818
  flex-flow: row;
817
819
  display: flex;
@@ -845,7 +847,7 @@
845
847
  margin: var(--fox-row-item-divide-margin, 0 10px);
846
848
  height: var(--fox-row-item-divide-height, 12px);
847
849
  width: var(--fox-row-item-divide-width, 1px);
848
- background: var(--fox-row-item-divide-color, var(--fox-border-color-light, #e4e7ed));
850
+ background: var(--fox-row-item-divide-color, var(--fox-border-color-light, var(--el-border-color-light)));
849
851
  }
850
852
 
851
853
  .fox-buttons-item__popover {
@@ -853,19 +855,19 @@
853
855
  }
854
856
 
855
857
  .fox-buttons-item__dropdown-link {
856
- --fox-text-mark-icon-height: var(--fox-buttons-item-dropdown-link-icon-size, 16px);
857
- --fox-text-mark-icon-width: var(--fox-buttons-item-dropdown-link-icon-size, 16px);
858
- --fox-text-font-size: var(--fox-font-size-small);
858
+ --fox-text-mark-icon-height: var(--fox-buttons-item-dropdown-link-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
859
+ --fox-text-mark-icon-width: var(--fox-buttons-item-dropdown-link-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
860
+ --fox-text-font-size: var(--fox-buttons-item-dropdown-link-text-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
859
861
  cursor: pointer;
860
862
  color: var(--fox-buttons-item-dropdown-link-icon-color);
861
- font-size: var(--fox-font-size-small);
863
+ font-size: var(--fox-buttons-item-dropdown-link-text-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
862
864
  }
863
865
 
864
866
  .fox-buttons-item__dropdown-item {
865
867
  white-space: nowrap;
866
868
  line-height: 22px;
867
- font-size: var(--fox-font-size-base, 14px);
868
- color: var(--fox-text-color, var(--el-text-color-regular));
869
+ font-size: var(--fox-font-size-base, var(--el-font-size-base));
870
+ color: var(--fox-text-color-regular, var(--el-text-color-regular));
869
871
  cursor: pointer;
870
872
  outline: none;
871
873
  align-items: center;
@@ -876,7 +878,7 @@
876
878
  }
877
879
 
878
880
  .fox-buttons-item__dropdown-item:hover {
879
- background-color: var(--fox-background-hover-color, var(--el-color-primary-light-9));
881
+ background-color: var(--fox-buttons-item-dropdown-item-hover-background-color);
880
882
  }
881
883
 
882
884
  .fox-buttons-item__dropdown-item.is-disabled {
@@ -887,11 +889,11 @@
887
889
  .fox-hint-text {
888
890
  z-index: var(--fox-hint-text-z-index, 3000);
889
891
  padding: var(--fox-hint-text-padding, 6px 8px);
890
- box-shadow: var(--fox-hint-text-box-shadow, 4px 4px 8px #0000004d);
892
+ box-shadow: var(--fox-hint-text-box-shadow, var(--fox-box-shadow, var(--el-box-shadow)));
891
893
  box-sizing: border-box;
892
- font-size: var(--fox-hint-text-font-size, var(--fox-font-size-base, 14px));
893
- color: var(--fox-hint-text-color, var(--fox-white, #fff));
894
- background-color: var(--fox-hint-text-background-color, #000c);
894
+ font-size: var(--fox-hint-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
895
+ color: var(--fox-hint-text-color, var(--fox-white, var(--el-color-white)));
896
+ background-color: var(--fox-hint-text-background-color, var(--fox-overlay-text-bg-color, var(--el-overlay-color)));
895
897
  opacity: 0;
896
898
  border: 0 solid #0000004d;
897
899
  border-radius: 3px;
@@ -939,16 +941,16 @@
939
941
  .fox-hint-text__arrow {
940
942
  width: var(--fox-hint-text-arrow-size, 6px);
941
943
  height: var(--fox-hint-text-arrow-size, 6px);
942
- background-color: var(--fox-hint-text-background-color, #000c);
944
+ background-color: var(--fox-hint-text-background-color, var(--fox-overlay-text-bg-color, var(--el-overlay-color)));
943
945
  position: absolute;
944
946
  }
945
947
 
946
948
  .fox-hint-text.is-small {
947
- font-size: var(--fox-hint-text-font-size-small, var(--fox-font-size-small, 12px));
949
+ font-size: var(--fox-hint-text-font-size-small, var(--fox-font-size-small, var(--el-font-size-small)));
948
950
  }
949
951
 
950
952
  .fox-hint-text.is-large {
951
- font-size: var(--fox-hint-text-font-size-large, var(--fox-font-size-large, 18px));
953
+ font-size: var(--fox-hint-text-font-size-large, var(--fox-font-size-large, var(--el-font-size-large)));
952
954
  }
953
955
 
954
956
  .fox-hint-text.is-top .fox-hint-text__arrow {
@@ -1077,7 +1079,7 @@
1077
1079
 
1078
1080
  .fox-money-item__append {
1079
1081
  width: var(--fox-input-item-append-width, 30px);
1080
- font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
1082
+ font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
1081
1083
  justify-content: center;
1082
1084
  align-items: center;
1083
1085
  display: flex;
@@ -1089,27 +1091,27 @@
1089
1091
  }
1090
1092
 
1091
1093
  .fox-money-item__disabled {
1092
- color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, #c8c9cc)) !important;
1094
+ color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled)))) !important;
1093
1095
  }
1094
1096
 
1095
1097
  .fox-money-item__disabled input:disabled {
1096
- color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, #c8c9cc));
1098
+ color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
1097
1099
  cursor: not-allowed;
1098
1100
  opacity: 1;
1099
- -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, #c8c9cc));
1101
+ -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
1100
1102
  background: none;
1101
1103
  }
1102
1104
 
1103
1105
  .fox-money-item__placeholder input {
1104
- color: var(--fox-input-item-color, var(--fox-black, #000));
1106
+ color: var(--fox-input-item-color, var(--fox-black, var(--el-color-black)));
1105
1107
  }
1106
1108
 
1107
1109
  .fox-money-item__placeholder input::-webkit-input-placeholder {
1108
- color: var(--fox-input-item-color, var(--fox-black, #000));
1110
+ color: var(--fox-input-item-color, var(--fox-black, var(--el-color-black)));
1109
1111
  }
1110
1112
 
1111
1113
  .fox-money-item__placeholder input::placeholder {
1112
- color: var(--fox-input-item-color, var(--fox-black, #000));
1114
+ color: var(--fox-input-item-color, var(--fox-black, var(--el-color-black)));
1113
1115
  }
1114
1116
 
1115
1117
  .fox-input-number-item {
@@ -1513,16 +1515,16 @@
1513
1515
  }
1514
1516
 
1515
1517
  .fox-actionsheet__header-title {
1516
- font-size: var(--fox-actionsheet-header-title-font-size, 18px);
1518
+ font-size: var(--fox-actionsheet-header-title-font-size, var(--fox-font-size-large, var(--el-font-size-large)));
1517
1519
  font-weight: var(--fox-actionsheet-header-title-font-weight, 500);
1518
- color: var(--fox-actionsheet-header-title-color, #333);
1520
+ color: var(--fox-actionsheet-header-title-color, var(--fox-title-color, var(--el-text-color-primary)));
1519
1521
  }
1520
1522
 
1521
1523
  .fox-actionsheet__header-icon {
1522
1524
  cursor: pointer;
1523
- color: var(--fox-actionsheet-header-icon-color, #969799);
1524
- width: var(--fox-actionsheet-header-icon-size, 16px);
1525
- height: var(--fox-actionsheet-header-icon-size, 16px);
1525
+ color: var(--fox-actionsheet-header-icon-color, var(--fox-text-color--secondary, var(--el-text-color-secondary)));
1526
+ width: var(--fox-actionsheet-header-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
1527
+ height: var(--fox-actionsheet-header-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
1526
1528
  margin-left: auto;
1527
1529
  }
1528
1530
 
@@ -1540,9 +1542,9 @@
1540
1542
  }
1541
1543
 
1542
1544
  .fox-actionsheet__searchbar .fox-searchbar__search-input {
1543
- border: var(--fox-actionsheet-searchbar-border, 1px solid #eee);
1545
+ border: var(--fox-actionsheet-searchbar-border, 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
1544
1546
  border-radius: var(--fox-searchbar-border-radius, 12px);
1545
- background: var(--fox-actionsheet-searchbar-background, #f7f7f7);
1547
+ background: var(--fox-actionsheet-searchbar-background, var(--fox-fill-color-base, var(--el-fill-color)));
1546
1548
  box-shadow: none;
1547
1549
  }
1548
1550
 
@@ -1587,37 +1589,37 @@
1587
1589
  }
1588
1590
 
1589
1591
  .fox-actionsheet__list-item-text {
1590
- font-size: var(--fox-actionsheet-list-item-text-font-size, 16px);
1592
+ font-size: var(--fox-actionsheet-list-item-text-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
1591
1593
  font-weight: var(--fox-actionsheet-list-item-text-font-weight, 400);
1592
1594
  line-height: var(--fox-actionsheet-list-item-text-line-height, 24px);
1593
- color: var(--fox-actionsheet-list-item-text-color, #333);
1595
+ color: var(--fox-actionsheet-list-item-text-color, var(--fox-title-color, var(--el-text-color-primary)));
1594
1596
  margin: var(--fox-actionsheet-list-item-text-margin, 0);
1595
1597
  text-align: left;
1596
1598
  }
1597
1599
 
1598
1600
  .fox-actionsheet__list-item-subtext {
1599
1601
  margin: var(--fox-actionsheet-list-item-subtext-margin, 8px 0 0 0);
1600
- font-size: var(--fox-actionsheet-list-item-subtext-fox-size, 13px);
1602
+ font-size: var(--fox-actionsheet-list-item-subtext-fox-size, var(--fox-font-size-small, var(--el-font-size-small)));
1601
1603
  font-weight: var(--fox-actionsheet-list-item-subtext-fox-wieight, 400);
1602
- color: var(--fox-actionsheet-list-item-subtext-color, #999);
1604
+ color: var(--fox-actionsheet-list-item-subtext-color, var(--fox-text-color--secondary, var(--el-text-color-secondary)));
1603
1605
  text-align: left;
1604
1606
  }
1605
1607
 
1606
1608
  .fox-actionsheet__list-item-icon {
1607
- color: var(--fox-actionsheet-list-item-icon-color, var(--fox-disable-color, var(--el-text-color-disabled)));
1609
+ color: var(--fox-actionsheet-list-item-icon-color, var(--fox-radio-icon-unchecked-color, var(--fox-disable-color, var(--el-text-color-disabled))));
1608
1610
  flex: none;
1609
1611
  transition-property: color, border-color, background-color;
1610
1612
  transition-duration: .3s;
1611
- width: var(--fox-actionsheet-list-item-icon-size, 16px) !important;
1612
- height: var(--fox-actionsheet-list-item-icon-size, 16px) !important;
1613
+ width: var(--fox-actionsheet-list-item-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium))) !important;
1614
+ height: var(--fox-actionsheet-list-item-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium))) !important;
1613
1615
  }
1614
1616
 
1615
1617
  .fox-actionsheet__list-item.is-checked .fox-actionsheet__list-item-icon {
1616
- color: var(--fox-actionsheet-list-item-icon-color-active, var(--fox-color-primary, var(--el-color-primary))) !important;
1618
+ color: var(--fox-actionsheet-list-item-icon-color-active, var(--fox-radio-label-active-color, var(--fox-color-primary, var(--el-color-primary)))) !important;
1617
1619
  }
1618
1620
 
1619
1621
  .fox-actionsheet__list-item.is-disabled .fox-actionsheet__list-item-icon {
1620
- color: var(--fox-actionsheet-list-item-icon-color-disable, var(--fox-disable-color, var(--el-text-color-disabled)));
1622
+ color: var(--fox-actionsheet-list-item-icon-color-disable, var(--fox-radio-icon-disable-color, var(--fox-disable-color, var(--el-text-color-disabled))));
1621
1623
  }
1622
1624
 
1623
1625
  .fox-actionsheet__footer {
@@ -1631,7 +1633,7 @@
1631
1633
  .fox-actionsheet__footer-confirm {
1632
1634
  height: var(--fox-actionsheet-footer-button-height, 36px);
1633
1635
  width: var(--fox-actionsheet-footer-button-min-width, 100%);
1634
- color: var(--fox-white, #fff);
1636
+ color: var(--fox-white, var(--el-color-white));
1635
1637
  text-align: center;
1636
1638
  line-height: var(--fox-actionsheet-footer-button-height, 36px);
1637
1639
  border-radius: 22px;
@@ -1651,8 +1653,8 @@
1651
1653
  width: 100%;
1652
1654
  height: var(--fox-input-item-height, 24px);
1653
1655
  line-height: var(--fox-input-item-height, 24px);
1654
- font-size: var(--fox-input-item-font-size, var(--fox-font-size-base, 14px));
1655
- color: var(--fox-input-item-color, var(--fox-black, #000));
1656
+ font-size: var(--fox-input-item-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
1657
+ color: var(--fox-input-item-color, var(--fox-black, var(--el-color-black)));
1656
1658
  padding: var(--fox-link-item-padding, 0 5px 0 0);
1657
1659
  margin: var(--fox-link-item-margin, 0);
1658
1660
  text-align: var(--fox-input-item-text-align, right);
@@ -1665,12 +1667,12 @@
1665
1667
  }
1666
1668
 
1667
1669
  .fox-link-item.is-disabled {
1668
- color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, #c8c9cc)) !important;
1670
+ color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled)))) !important;
1669
1671
  }
1670
1672
 
1671
1673
  .fox-link-item__append {
1672
1674
  width: var(--fox-input-item-append-width, 30px);
1673
- font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
1675
+ font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
1674
1676
  justify-content: center;
1675
1677
  align-items: center;
1676
1678
  display: flex;
@@ -1684,13 +1686,13 @@
1684
1686
  }
1685
1687
 
1686
1688
  .fox-link-item__append .action-icon {
1687
- width: var(--fox-input-item-append-action-icon-size, 14px);
1688
- height: var(--fox-input-item-append-action-icon-size, 14px);
1689
- color: var(--fox-input-item-append-action-icon-color, #bbb);
1689
+ width: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
1690
+ height: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
1691
+ color: var(--fox-input-item-append-action-icon-color, var(--fox-disable-color, var(--el-text-color-disabled)));
1690
1692
  }
1691
1693
 
1692
1694
  .fox-link-item__placeholder {
1693
- color: var(--fox-input-item-placeholder-color, var(--fox-input-disabled-color, #c8c9cc));
1695
+ color: var(--fox-input-item-placeholder-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
1694
1696
  }
1695
1697
 
1696
1698
  .fox-link-item__main {
@@ -1699,7 +1701,7 @@
1699
1701
 
1700
1702
  .fox-link-item__sub {
1701
1703
  width: 100%;
1702
- font-size: var(--fox-link-item-sub-font-size, var(--fox-font-size-small, 12px));
1704
+ font-size: var(--fox-link-item-sub-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
1703
1705
  color: var(--fox-link-item-sub-color, var(--fox-text-color--secondary, var(--el-text-color-secondary)));
1704
1706
  }
1705
1707
 
@@ -1712,7 +1714,7 @@
1712
1714
  .fox-tabs-bar__titles {
1713
1715
  -webkit-user-select: none;
1714
1716
  user-select: none;
1715
- background: var(--fox-tabs-bar-titles-background, var(--fox-help-color, #f5f5f5));
1717
+ background: var(--fox-tabs-bar-titles-background, var(--fox-fill-color-base, var(--el-fill-color)));
1716
1718
  border-radius: var(--fox-tabs-bar-titles-border-radius, 0);
1717
1719
  flex-shrink: 0;
1718
1720
  display: flex;
@@ -1726,9 +1728,9 @@
1726
1728
  }
1727
1729
 
1728
1730
  .fox-tabs-bar__titles-item {
1729
- color: var(--fox-tabs-bar-item-color, var(--fox-title-color, #1a1a1a));
1730
- font-weight: var(--fox-tabs-var-item-font-weight, normal);
1731
- font-size: var(--fox-tabs-bar-item-font-size-default, var(--fox-font-size-base, 14px));
1731
+ color: var(--fox-tabs-bar-item-color, var(--fox-title-color, var(--el-text-color-primary)));
1732
+ font-weight: var(--fox-tabs-bar-item-font-weight, normal);
1733
+ font-size: var(--fox-tabs-bar-item-font-size-default, var(--fox-font-size-base, var(--el-font-size-base)));
1732
1734
  margin: 0 var(--fox-tabs-bar-item-gutter, 10px);
1733
1735
  flex: 1 0 auto;
1734
1736
  justify-content: center;
@@ -1742,8 +1744,8 @@
1742
1744
  }
1743
1745
 
1744
1746
  .fox-tabs-bar__titles-item.active {
1745
- color: var(--fox-tabs-bar-item-color-active, var(--fox-color-primary, var(--el-color-primary)));
1746
- font-size: var(--fox-tabs-bar-item-font-size-default-active, var(--fox-font-size-base, 14px));
1747
+ color: var(--fox-tabs-bar-item-color-active, var(--fox-title-color, var(--el-text-color-primary)));
1748
+ font-size: var(--fox-tabs-bar-item-font-size-default-active, var(--fox-font-size-base, var(--el-font-size-base)));
1747
1749
  font-weight: var(--fox-tabs-bar-item-font-weight-active, bold);
1748
1750
  }
1749
1751
 
@@ -1756,20 +1758,21 @@
1756
1758
 
1757
1759
  .fox-tabs-bar__titles-item.button {
1758
1760
  margin: auto var(--fox-tabs-bar-item-gutter-button, 8px);
1761
+ padding: var(--fox-tabs-bar-item-padding-button);
1759
1762
  width: var(--fox-tabs-bar-item-width-button, 80px);
1760
1763
  height: var(--fox-tabs-bar-item-height-button, 32px);
1761
- background: var(--fox-tabs-bar-item-background-button, #fff);
1762
- color: var(--fox-tabs-bar-item-color-button, #666);
1763
- font-size: var(--fox-tabs-bar-item-font-size-button, 12px);
1764
+ background: var(--fox-tabs-bar-item-background-button, var(--fox-white, var(--el-color-white)));
1765
+ color: var(--fox-tabs-bar-item-color-button, var(--fox-title-color2, var(--el-text-color-secondary)));
1766
+ font-size: var(--fox-tabs-bar-item-font-size-button, var(--fox-font-size-small, var(--el-font-size-small)));
1764
1767
  font-weight: var(--fox-tabs-bar-item-font-weight-button, 400);
1765
1768
  border: var(--fox-tabs-bar-item-border-button, 1px solid transparent);
1766
1769
  border-radius: var(--fox-tabs-bar-item-radius-button, 4px);
1767
1770
  }
1768
1771
 
1769
1772
  .fox-tabs-bar__titles-item.button.active {
1770
- background: var(--fox-tabs-bar-item-background-active-button, #fff);
1773
+ background: var(--fox-tabs-bar-item-background-active-button, var(--fox-white, var(--el-color-white)));
1771
1774
  color: var(--fox-tabs-bar-item-color-active-button, var(--fox-color-primary, var(--el-color-primary)));
1772
- font-size: var(--fox-tabs-bar-item-font-size-active-button, 12px);
1775
+ font-size: var(--fox-tabs-bar-item-font-size-active-button, var(--fox-font-size-small, var(--el-font-size-small)));
1773
1776
  font-weight: var(--fox-tabs-bar-item-font-weight-button, 400);
1774
1777
  border: var(--fox-tabs-bar-item-border-active-button, 1px solid transparent);
1775
1778
  }
@@ -1793,9 +1796,9 @@
1793
1796
  margin: auto var(--fox-tabs-bar-item-gutter-button-group, 0px);
1794
1797
  width: var(--fox-tabs-bar-item-width-button-group, 105px);
1795
1798
  height: var(--fox-tabs-bar-item-height-button-group, 32px);
1796
- background: var(--fox-tabs-bar-item-background-button-group, #fff);
1799
+ background: var(--fox-tabs-bar-item-background-button-group, var(--fox-white, var(--el-color-white)));
1797
1800
  color: var(--fox-tabs-bar-item-color-button-group, var(--fox-color-primary, var(--el-color-primary)));
1798
- font-size: var(--fox-tabs-bar-item-font-size-button-group, 14px);
1801
+ font-size: var(--fox-tabs-bar-item-font-size-button-group, var(--fox-font-size-base, var(--el-font-size-base)));
1799
1802
  font-weight: var(--fox-tabs-bar-item-font-weight-button-group, 400);
1800
1803
  border-top: var(--fox-tabs-bar-item-border-width-button-group, 1px) solid var(--fox-tabs-bar-item-background-active-button-group, var(--fox-color-primary, var(--el-color-primary)));
1801
1804
  border-right: var(--fox-tabs-bar-item-border-width-button-group, 1px) solid var(--fox-tabs-bar-item-background-active-button-group, var(--fox-color-primary, var(--el-color-primary)));
@@ -1806,8 +1809,8 @@
1806
1809
 
1807
1810
  .fox-tabs-bar__titles-item.button-group.active {
1808
1811
  background: var(--fox-tabs-bar-item-background-active-button-group, var(--fox-color-primary, var(--el-color-primary)));
1809
- color: var(--fox-tabs-bar-item-color-active-button-group, #fff);
1810
- font-size: var(--fox-tabs-bar-item-font-size-active-button-group, 14px);
1812
+ color: var(--fox-tabs-bar-item-color-active-button-group, var(--fox-white, var(--el-color-white)));
1813
+ font-size: var(--fox-tabs-bar-item-font-size-active-button-group, var(--fox-font-size-base, var(--el-font-size-base)));
1811
1814
  font-weight: var(--fox-tabs-bar-item-font-weight-button-group, 400);
1812
1815
  }
1813
1816
 
@@ -1819,18 +1822,18 @@
1819
1822
  margin: auto var(--fox-tabs-bar-item-gutter-capsule, 0px);
1820
1823
  width: var(--fox-tabs-bar-item-width-capsule, 100px);
1821
1824
  height: var(--fox-tabs-bar-item-height-capsule, 29px);
1822
- background: var(--fox-tabs-bar-item-background-capsule, #fff0);
1823
- color: var(--fox-tabs-bar-item-color-capsule, #666);
1824
- font-size: var(--fox-tabs-bar-item-font-size-capsule, 14px);
1825
+ background: var(--fox-tabs-bar-item-background-capsule, transparent);
1826
+ color: var(--fox-tabs-bar-item-color-capsule, var(--fox-title-color2, var(--el-text-color-secondary)));
1827
+ font-size: var(--fox-tabs-bar-item-font-size-capsule, var(--fox-font-size-base, var(--el-font-size-base)));
1825
1828
  font-weight: var(--fox-tabs-bar-item-font-weight-capsule, 400);
1826
1829
  border: var(--fox-tabs-bar-item-border-width-capsule, 1px) solid transparent;
1827
1830
  border-radius: var(--fox-tabs-bar-item-radius-capsule, 12px);
1828
1831
  }
1829
1832
 
1830
1833
  .fox-tabs-bar__titles-item.capsule.active {
1831
- background: var(--fox-tabs-bar-item-background-active-capsule, #fff);
1834
+ background: var(--fox-tabs-bar-item-background-active-capsule, var(--fox-white, var(--el-color-white)));
1832
1835
  color: var(--fox-tabs-bar-item-color-active-capsule, var(--fox-color-primary, var(--el-color-primary)));
1833
- font-size: var(--fox-tabs-bar-item-font-size-active-capsule, 14px);
1836
+ font-size: var(--fox-tabs-bar-item-font-size-active-capsule, var(--fox-font-size-base, var(--el-font-size-base)));
1834
1837
  font-weight: var(--fox-tabs-bar-item-font-weight-capsule, 400);
1835
1838
  }
1836
1839
 
@@ -1855,8 +1858,8 @@
1855
1858
  width: 0;
1856
1859
  height: 0;
1857
1860
  bottom: var(--fox-tabs-bar-item-line-bottom, 0px);
1858
- border-radius: var(--fox-tabs-titles-item-line-border-radius, 0);
1859
- opacity: var(--fox-tabs-titles-item-line-opacity, 1);
1861
+ border-radius: var(--fox-tabs-bar-item-line-border-radius, 0);
1862
+ opacity: var(--fox-tabs-bar-item-line-opacity, 1);
1860
1863
  transition: width .3s;
1861
1864
  position: absolute;
1862
1865
  left: 50%;
@@ -1866,10 +1869,10 @@
1866
1869
 
1867
1870
  .fox-tabs-bar__titles-item-tip {
1868
1871
  line-height: 1;
1869
- font-size: var(--fox-tabs-bar-item-tip-font-size, 10px);
1870
- color: var(--fox-tabs-bar-item-tip-color, var(--fox-white, #fff));
1872
+ font-size: var(--fox-tabs-bar-item-tip-font-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
1873
+ color: var(--fox-tabs-bar-item-tip-color, var(--fox-white, var(--el-color-white)));
1871
1874
  background: var(--fox-tabs-bar-item-tip-background, var(--fox-color-primary, var(--el-color-primary)));
1872
- box-shadow: var(--fox-tabs-bar-item-tip-box-shadow, 0 0 0 1px #fff);
1875
+ box-shadow: var(--fox-tabs-bar-item-tip-box-shadow, 0 0 0 1px var(--fox-white, var(--el-color-white)));
1873
1876
  border-radius: 50%;
1874
1877
  position: absolute;
1875
1878
  top: 0;
@@ -1901,19 +1904,19 @@
1901
1904
  }
1902
1905
 
1903
1906
  .fox-tabs-bar__titles.large .fox-tabs-bar__titles-item {
1904
- font-size: var(--fox-tabs-bar-item-font-size-large, var(--fox-font-size-large, 18px));
1907
+ font-size: var(--fox-tabs-bar-item-font-size-large, var(--fox-font-size-medium, var(--el-font-size-medium)));
1905
1908
  }
1906
1909
 
1907
1910
  .fox-tabs-bar__titles.large .fox-tabs-bar__titles-item.active {
1908
- font-size: var(--fox-tabs-bar-item-font-size-large-active, var(--fox-font-size-large, 18px));
1911
+ font-size: var(--fox-tabs-bar-item-font-size-large-active, var(--fox-font-size-medium, var(--el-font-size-medium)));
1909
1912
  }
1910
1913
 
1911
1914
  .fox-tabs-bar__titles.small .fox-tabs-bar__titles-item {
1912
- font-size: var(--fox-tabs-bar-item-font-size-small, var(--fox-font-size-small, 12px));
1915
+ font-size: var(--fox-tabs-bar-item-font-size-small, var(--fox-font-size-small, var(--el-font-size-small)));
1913
1916
  }
1914
1917
 
1915
1918
  .fox-tabs-bar__titles.small .fox-tabs-bar__titles-item.active {
1916
- font-size: var(--fox-tabs-bar-item-font-size-small-active, var(--fox-font-size-small, 12px));
1919
+ font-size: var(--fox-tabs-bar-item-font-size-small-active, var(--fox-font-size-small, var(--el-font-size-small)));
1917
1920
  }
1918
1921
 
1919
1922
  .fox-tabs-bar__titles.horizontal {
@@ -2032,14 +2035,14 @@
2032
2035
 
2033
2036
  .fox-tabs-bar__titles.capsule {
2034
2037
  padding: var(--fox-tabs-bar-titles-padding-capsule, 5px 8px);
2035
- background: var(--fox-tabs-bar-titles-background-capsule, #f6f6f8);
2038
+ background: var(--fox-tabs-bar-titles-background-capsule, var(--fox-fill-color-base, var(--el-fill-color)));
2036
2039
  border-radius: var(--fox-tabs-bar-titles-border-radius-capsule, 16px);
2037
2040
  }
2038
2041
 
2039
2042
  .fox-tabs-bar__navigation {
2040
2043
  height: var(--fox-tabs-bar-titles-height-horizontal, 44px);
2041
2044
  width: var(--fox-tabs-bar-navigation-width, 30px);
2042
- background: var(--fox-tabs-bar-titles-background, var(--fox-help-color, #f5f5f5));
2045
+ background: var(--fox-tabs-bar-titles-background, var(--fox-fill-color-base, var(--el-fill-color)));
2043
2046
  flex-flow: row;
2044
2047
  justify-content: flex-end;
2045
2048
  align-items: center;
@@ -2050,10 +2053,10 @@
2050
2053
  }
2051
2054
 
2052
2055
  .fox-tabs-bar__popup {
2053
- background: var(--fox-tabs-bar-popup-background, #fff);
2056
+ background: var(--fox-tabs-bar-popup-background, var(--fox-white, var(--el-color-white)));
2054
2057
  max-height: var(--fox-tabs-bar-popup-max-height, 500px);
2055
2058
  padding: var(--fox-tabs-bar-popup-padding, 12px 0 0 12px);
2056
- box-shadow: var(--fox-tabs-bar-popup-box-shadow, 0 4px 10px #00000012);
2059
+ box-shadow: var(--fox-tabs-bar-popup-box-shadow, var(--fox-box-shadow, var(--el-box-shadow)));
2057
2060
  z-index: 1;
2058
2061
  opacity: 0;
2059
2062
  flex-flow: wrap;
@@ -2070,8 +2073,8 @@
2070
2073
 
2071
2074
  .fox-tabs-bar__popup-item {
2072
2075
  border-radius: var(--fox-tabs-bar-popup-item-radius, 16px);
2073
- color: var(--fox-tabs-bar-popup-item-color, #333);
2074
- background: var(--fox-tabs-bar-popup-item-background, #f8f8f8);
2076
+ color: var(--fox-tabs-bar-popup-item-color, var(--fox-title-color, var(--el-text-color-primary)));
2077
+ background: var(--fox-tabs-bar-popup-item-background, var(--fox-fill-color-base, var(--el-fill-color)));
2075
2078
  padding: var(--fox-tabs-bar-popup-item-padding, 5px 12px 5px 12px);
2076
2079
  margin: var(--fox-tabs-bar-popup-item-margin, 0px 12px 12px 0);
2077
2080
  text-wrap: nowrap;
@@ -2079,7 +2082,7 @@
2079
2082
 
2080
2083
  .fox-tabs-bar__popup-item.active {
2081
2084
  color: var(--fox-tabs-bar-popup-item-color-active, var(--fox-color-primary, var(--el-color-primary)));
2082
- background: var(--fox-tabs-bar-popup-item-background-active, #ffecec);
2085
+ background: var(--fox-tabs-bar-popup-item-background-active, var(--fox-color-primary-light-9, var(--el-color-primary-light-9)));
2083
2086
  }
2084
2087
 
2085
2088
  .fox-tabs-bar__popup--show {
@@ -2177,8 +2180,8 @@
2177
2180
 
2178
2181
  .fox-steps-bar {
2179
2182
  box-sizing: border-box;
2180
- color: var(--fox-steps-bar-normal-color, var(--fox-white, #fff));
2181
- font-size: var(--fox-steps-bar-font-size, var(--fox-font-size-base, 14px));
2183
+ color: var(--fox-steps-bar-normal-color, var(--fox-white, var(--el-color-white)));
2184
+ font-size: var(--fox-steps-bar-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
2182
2185
  justify-content: flex-start;
2183
2186
  align-items: flex-start;
2184
2187
  display: flex;
@@ -2361,54 +2364,54 @@
2361
2364
  }
2362
2365
 
2363
2366
  .fox-steps-bar__step.is-active {
2364
- color: var(--fox-steps-bar-active-color, var(--fox-white, #fff));
2367
+ color: var(--fox-steps-bar-active-color, var(--fox-white, var(--el-color-white)));
2365
2368
  }
2366
2369
 
2367
2370
  .fox-steps-bar__step.is-active .fox-steps-bar__main {
2368
- color: var(--fox-steps-bar-text-active-color, var(--fox-black, #000));
2371
+ color: var(--fox-steps-bar-text-active-color, var(--fox-black, var(--el-color-black)));
2369
2372
  }
2370
2373
 
2371
2374
  .fox-steps-bar__step.is-active .fox-steps-bar__icon {
2372
- color: var(--fox-steps-bar-icon-active-color, var(--fox-white, #fff));
2375
+ color: var(--fox-steps-bar-icon-active-color, var(--fox-white, var(--el-color-white)));
2373
2376
  background: var(--fox-steps-bar-icon-bg-active-color, var(--fox-color-primary, var(--el-color-primary)));
2374
2377
  }
2375
2378
 
2376
2379
  .fox-steps-bar__step.is-done {
2377
- color: var(--fox-steps-bar-done-color, var(--fox-white, #fff));
2380
+ color: var(--fox-steps-bar-done-color, var(--fox-white, var(--el-color-white)));
2378
2381
  }
2379
2382
 
2380
2383
  .fox-steps-bar__step.is-done .fox-steps-bar__main {
2381
- color: var(--fox-steps-bar-text-done-color, var(--fox-black, #000));
2384
+ color: var(--fox-steps-bar-text-done-color, var(--fox-black, var(--el-color-black)));
2382
2385
  }
2383
2386
 
2384
2387
  .fox-steps-bar__step.is-done .fox-steps-bar__icon {
2385
- color: var(--fox-steps-bar-icon-done-color, var(--fox-white, #fff));
2388
+ color: var(--fox-steps-bar-icon-done-color, var(--fox-white, var(--el-color-white)));
2386
2389
  background: var(--fox-steps-bar-icon-bg-done-color, var(--fox-color-success, var(--el-color-success)));
2387
2390
  }
2388
2391
 
2389
2392
  .fox-steps-bar__step.is-error {
2390
- color: var(--fox-steps-bar-error-color, var(--fox-white, #fff));
2393
+ color: var(--fox-steps-bar-error-color, var(--fox-white, var(--el-color-white)));
2391
2394
  }
2392
2395
 
2393
2396
  .fox-steps-bar__step.is-error .fox-steps-bar__main {
2394
- color: var(--fox-steps-bar-text-error-color, var(--fox-black, #000));
2397
+ color: var(--fox-steps-bar-text-error-color, var(--fox-black, var(--el-color-black)));
2395
2398
  }
2396
2399
 
2397
2400
  .fox-steps-bar__step.is-error .fox-steps-bar__icon {
2398
- color: var(--fox-steps-bar-icon-error-color, var(--fox-white, #fff));
2401
+ color: var(--fox-steps-bar-icon-error-color, var(--fox-white, var(--el-color-white)));
2399
2402
  background: var(--fox-steps-bar-icon-bg-error-color, var(--fox-color-danger, var(--el-color-danger)));
2400
2403
  }
2401
2404
 
2402
2405
  .fox-steps-bar__step.is-half {
2403
- color: var(--fox-steps-bar-half-color, var(--fox-white, #fff));
2406
+ color: var(--fox-steps-bar-half-color, var(--fox-white, var(--el-color-white)));
2404
2407
  }
2405
2408
 
2406
2409
  .fox-steps-bar__step.is-half .fox-steps-bar__main {
2407
- color: var(--fox-steps-bar-text-half-color, var(--fox-black, #000));
2410
+ color: var(--fox-steps-bar-text-half-color, var(--fox-black, var(--el-color-black)));
2408
2411
  }
2409
2412
 
2410
2413
  .fox-steps-bar__step.is-half .fox-steps-bar__icon {
2411
- color: var(--fox-steps-bar-icon-half-color, var(--fox-white, #fff));
2414
+ color: var(--fox-steps-bar-icon-half-color, var(--fox-white, var(--el-color-white)));
2412
2415
  background: var(--fox-steps-bar-icon-bg-half-color, var(--fox-color-warning, var(--el-color-warning)));
2413
2416
  }
2414
2417
 
@@ -2460,12 +2463,12 @@
2460
2463
  }
2461
2464
 
2462
2465
  .fox-steps-bar__icon {
2463
- color: var(--fox-steps-bar-icon-normal-color, var(--fox-white, #fff));
2466
+ color: var(--fox-steps-bar-icon-normal-color, var(--fox-white, var(--el-color-white)));
2464
2467
  background: var(--fox-steps-bar-icon-bg-normal-color, var(--fox-disable-color, var(--el-text-color-disabled)));
2465
2468
  cursor: pointer;
2466
2469
  border: var(--fox-steps-bar-icon-border, none);
2467
2470
  box-sizing: border-box;
2468
- font-size: var(--fox-steps-bar-icon-font-size, var(--fox-steps-bar-font-size, var(--fox-font-size-base, 14px)));
2471
+ font-size: var(--fox-steps-bar-icon-font-size, var(--fox-steps-bar-font-size, var(--fox-font-size-base, var(--el-font-size-base))));
2469
2472
  width: var(--fox-steps-bar-icon-size, 28px);
2470
2473
  height: var(--fox-steps-bar-icon-size, 28px);
2471
2474
  border-radius: 50%;
@@ -2489,16 +2492,16 @@
2489
2492
 
2490
2493
  .fox-steps-bar__main {
2491
2494
  color: var(--fox-steps-bar-text-normal-color, var(--fox-disable-color, var(--el-text-color-disabled)));
2492
- font-size: var(--fox-steps-bar-text-font-size, var(--fox-steps-bar-font-size, var(--fox-font-size-base, 14px)));
2495
+ font-size: var(--fox-steps-bar-text-font-size, var(--fox-steps-bar-font-size, var(--fox-font-size-base, var(--el-font-size-base))));
2493
2496
  text-overflow: ellipsis;
2494
2497
  white-space: nowrap;
2495
2498
  overflow: hidden;
2496
2499
  }
2497
2500
 
2498
2501
  .fox-floating-window {
2499
- background: var(--fox-floating-window-background, #fff);
2502
+ background: var(--fox-floating-window-background, var(--fox-background-color, var(--el-bg-color)));
2500
2503
  border-radius: var(--fox-floating-window-border-radius, 4px);
2501
- box-shadow: var(--fox-floating-window-box-shadow, 0px 12px 32px 4px #0000000a, 0px 8px 20px #00000014);
2504
+ box-shadow: var(--fox-floating-window-box-shadow, var(--fox-box-shadow, var(--el-box-shadow)));
2502
2505
  box-sizing: border-box;
2503
2506
  top: var(--fox-floating-window-width, 15dvh);
2504
2507
  left: var(--fox-floating-window-width, 25dvw);
@@ -2512,7 +2515,7 @@
2512
2515
  .fox-floating-window__header {
2513
2516
  border-top-left-radius: var(--fox-floating-window-border-radius, 4px);
2514
2517
  border-top-right-radius: var(--fox-floating-window-border-radius, 4px);
2515
- background: var(--fox-floating-window-header-background, #f0f1f5);
2518
+ background: var(--fox-floating-window-header-background, var(--fox-fill-color-base, var(--el-fill-color)));
2516
2519
  padding: var(--fox-floating-window-header-padding, 0 25px);
2517
2520
  height: var(--fox-floating-window-header-height, 40px);
2518
2521
  z-index: 20;
@@ -2525,7 +2528,7 @@
2525
2528
  }
2526
2529
 
2527
2530
  .fox-floating-window__title {
2528
- font-size: var(--fox-floating-window-title-font-size, 18px);
2531
+ font-size: var(--fox-floating-window-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
2529
2532
  }
2530
2533
 
2531
2534
  .fox-floating-window__tools {
@@ -2542,7 +2545,7 @@
2542
2545
 
2543
2546
  .fox-floating-window__collapse {
2544
2547
  cursor: pointer;
2545
- color: var(--fox-floating-window-collapse-color, #409eff);
2548
+ color: var(--fox-floating-window-collapse-color, var(--fox-color-primary, var(--el-color-primary)));
2546
2549
  flex-flow: row;
2547
2550
  flex: none;
2548
2551
  justify-content: flex-start;
@@ -2566,11 +2569,11 @@
2566
2569
  }
2567
2570
 
2568
2571
  .fox-floating-window__collapse-text {
2569
- font-size: var(--fox-floating-window-collapse-font-size, 14px);
2572
+ font-size: var(--fox-floating-window-collapse-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
2570
2573
  }
2571
2574
 
2572
2575
  .fox-floating-window__close:hover {
2573
- color: var(--fox-floating-window-close-color, #409eff);
2576
+ color: var(--fox-floating-window-close-color, var(--fox-color-primary, var(--el-color-primary)));
2574
2577
  }
2575
2578
 
2576
2579
  .fox-floating-window__close {
@@ -2579,14 +2582,14 @@
2579
2582
  }
2580
2583
 
2581
2584
  .fox-floating-window__body {
2582
- font-size: var(--fox-floating-window-content-font-size, 14px);
2585
+ font-size: var(--fox-floating-window-content-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
2583
2586
  }
2584
2587
 
2585
2588
  .fox-floating-window__fixednav {
2586
2589
  box-sizing: border-box;
2587
2590
  z-index: var(--fox-floating-window-fixednav-z-index, 2000);
2588
- color: var(--fox-floating-window-fixednav-color, #fff);
2589
- background: var(--fox-floating-window-fixednav-bg, #409eff);
2591
+ color: var(--fox-floating-window-fixednav-color, var(--fox-white, var(--el-color-white)));
2592
+ background: var(--fox-floating-window-fixednav-bg, var(--fox-color-primary, var(--el-color-primary)));
2590
2593
  width: var(--floating-window-fixednav-width, 80px);
2591
2594
  height: var(--floating-window-fixednav-height, 50px);
2592
2595
  align-items: center;
@@ -2707,11 +2710,11 @@
2707
2710
 
2708
2711
  .fox-popover-dialog {
2709
2712
  position: var(--fox-popover-dialog-position, fixed);
2710
- color: var(--fox-popover-dialog-color, #333);
2711
- background: var(--fox-popover-dialog-background-color, #fff);
2712
- border: 1px solid var(--fox-border-color-lighter, #ebeef5);
2713
+ color: var(--fox-popover-dialog-color, var(--fox-title-color, var(--el-text-color-primary)));
2714
+ background: var(--fox-popover-dialog-background-color, var(--fox-white, var(--el-color-white)));
2715
+ border: 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter));
2713
2716
  border-radius: var(--fox-popover-dialog-border-radius, 4px);
2714
- box-shadow: var(--fox-box-shadow-light, 0px 0px 12px #0000001f);
2717
+ box-shadow: var(--fox-box-shadow-light, var(--el-box-shadow-light));
2715
2718
  box-sizing: border-box;
2716
2719
  min-width: var(--fox-popover-dialog-min-width, 0px);
2717
2720
  padding: var(--fox-popover-dialog-padding, 12px);
@@ -2723,15 +2726,15 @@
2723
2726
  }
2724
2727
 
2725
2728
  .fox-popover-dialog__title {
2726
- font-size: var(--fox-popover-dialog-title-font-size, 16px);
2729
+ font-size: var(--fox-popover-dialog-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
2727
2730
  margin-bottom: 12px;
2728
2731
  line-height: 1;
2729
2732
  }
2730
2733
 
2731
2734
  .fox-popover-dialog__arrow {
2732
- height: var(--fox-popover-dialog-arrow-size, 12px);
2733
- width: var(--fox-popover-dialog-arrow-size, 12px);
2734
- background: var(--fox-popover-dialog-background-color, #fff);
2735
+ height: var(--fox-popover-dialog-arrow-size, var(--fox-font-size-small, var(--el-font-size-small)));
2736
+ width: var(--fox-popover-dialog-arrow-size, var(--fox-font-size-small, var(--el-font-size-small)));
2737
+ background: var(--fox-popover-dialog-background-color, var(--fox-white, var(--el-color-white)));
2735
2738
  z-index: -1;
2736
2739
  clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
2737
2740
  position: absolute;
@@ -2742,7 +2745,7 @@
2742
2745
  width: 100%;
2743
2746
  height: 100%;
2744
2747
  z-index: var(--fox-popover-dialog-z-index, 2000);
2745
- background-color: var(--fox-popover-dialog-overlay-background-color, #0000);
2748
+ background-color: var(--fox-popover-dialog-overlay-background-color, transparent);
2746
2749
  top: 0;
2747
2750
  left: 0;
2748
2751
  }
@@ -2760,13 +2763,13 @@
2760
2763
  }
2761
2764
 
2762
2765
  .fox-popover-dialog.is-dark {
2763
- color: var(--fox-popover-dialog-dark-color, #fff);
2764
- background: var(--fox-popover-dialog-dark-background-color, #4b4c4d);
2765
- border: 1px solid var(--fox-border-color-light, #e4e7ed);
2766
+ color: var(--fox-popover-dialog-dark-color, var(--fox-white, var(--el-color-white)));
2767
+ background: var(--fox-popover-dialog-background-color-dark, var(--fox-title-color, var(--el-text-color-primary)));
2768
+ border: 1px solid var(--fox-border-color-light, var(--el-border-color-light));
2766
2769
  }
2767
2770
 
2768
2771
  .fox-popover-dialog.is-dark .fox-popover-dialog__arrow {
2769
- background: var(--fox-popover-dialog-dark-background-color, #4b4c4d);
2772
+ background: var(--fox-popover-dialog-background-color-dark, var(--fox-title-color, var(--el-text-color-primary)));
2770
2773
  }
2771
2774
 
2772
2775
  @keyframes popover-show {
@@ -2822,26 +2825,26 @@
2822
2825
 
2823
2826
  .fox-picker__title {
2824
2827
  text-align: center;
2825
- font-size: var(--fox-picker-bar-title-font-size, 16px);
2828
+ font-size: var(--fox-picker-bar-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
2826
2829
  font-weight: var(--fox-picker-bar-title-font-weight, normal);
2827
- color: var(--fox-picker-bar-title-color, var(--fox-title-color, #1a1a1a));
2830
+ color: var(--fox-picker-bar-title-color, var(--fox-title-color, var(--el-text-color-primary)));
2828
2831
  }
2829
2832
 
2830
2833
  .fox-picker__left {
2831
2834
  float: left;
2832
- color: var(--fox-picker-cancel-color, gray);
2833
- font-size: var(--fox-picker-bar-cancel-font-size, 14px);
2835
+ color: var(--fox-picker-cancel-color, var(--fox-text-color-regular, var(--el-text-color-regular)));
2836
+ font-size: var(--fox-picker-bar-cancel-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
2834
2837
  }
2835
2838
 
2836
2839
  .fox-picker__right {
2837
2840
  float: right;
2838
2841
  color: var(--fox-picker-ok-color, var(--fox-color-primary, var(--el-color-primary)));
2839
- font-size: var(--fox-picker-bar-ok-font-size, 14px);
2842
+ font-size: var(--fox-picker-bar-ok-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
2840
2843
  }
2841
2844
 
2842
2845
  .fox-picker__hairline {
2843
2846
  height: var(--fox-picker-item-height, 36px);
2844
- border: var(--fox-picker-item-active-line-border, 1px solid #eae7e7);
2847
+ border: var(--fox-picker-item-active-line-border, 1px solid var(--fox-border-color-light, var(--el-border-color-light)));
2845
2848
  border-left: 0;
2846
2849
  border-right: 0;
2847
2850
  width: 100%;
@@ -2900,8 +2903,8 @@
2900
2903
  width: 100%;
2901
2904
  height: var(--fox-picker-item-height, 36px);
2902
2905
  line-height: var(--fox-picker-item-height, 36px);
2903
- color: var(--fox-picker-item-text-color, var(--fox-title-color, #1a1a1a));
2904
- font-size: var(--fox-picker-item-text-font-size, 14px);
2906
+ color: var(--fox-picker-item-text-color, var(--fox-title-color, var(--el-text-color-primary)));
2907
+ font-size: var(--fox-picker-item-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
2905
2908
  text-overflow: ellipsis;
2906
2909
  white-space: nowrap;
2907
2910
  display: block;
@@ -2918,8 +2921,8 @@
2918
2921
  .fox-picker__item-tile {
2919
2922
  height: var(--fox-picker-item-height, 36px);
2920
2923
  line-height: var(--fox-picker-item-height, 36px);
2921
- color: var(--fox-picker-item-text-color, var(--fox-title-color, #1a1a1a));
2922
- font-size: var(--fox-picker-item-text-font-size, 14px);
2924
+ color: var(--fox-picker-item-text-color, var(--fox-title-color, var(--el-text-color-primary)));
2925
+ font-size: var(--fox-picker-item-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
2923
2926
  text-overflow: ellipsis;
2924
2927
  white-space: nowrap;
2925
2928
  justify-content: center;
@@ -2930,8 +2933,8 @@
2930
2933
 
2931
2934
  .fox-picker__item-tarotile {
2932
2935
  width: 100%;
2933
- color: var(--fox-picker-item-text-color, var(--fox-title-color, #1a1a1a));
2934
- font-size: var(--fox-picker-item-text-font-size, 14px);
2936
+ color: var(--fox-picker-item-text-color, var(--fox-title-color, var(--el-text-color-primary)));
2937
+ font-size: var(--fox-picker-item-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
2935
2938
  text-overflow: ellipsis;
2936
2939
  white-space: nowrap;
2937
2940
  flex-direction: column;
@@ -2943,7 +2946,7 @@
2943
2946
 
2944
2947
  .fox-theme-dark .fox-calendar, .fox-theme-dark .fox-calendar .fox-calendar__header {
2945
2948
  background: var(--fox-dark-background, #131313);
2946
- color: var(--fox-dark-color, var(--fox-white, #fff));
2949
+ color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
2947
2950
  }
2948
2951
 
2949
2952
  .fox-theme-dark .fox-calendar .fox-calendar__content .fox-calendar__panel .fox-calendar__days .calendar-month-day-choose {
@@ -2952,13 +2955,13 @@
2952
2955
  }
2953
2956
 
2954
2957
  .fox-theme-dark .fox-calendar .fox-calendar__footer {
2955
- background: var(--fox-dark-background2, #1b1b1b);
2956
- color: var(--fox-dark-color, var(--fox-white, #fff));
2958
+ background: var(--fox-dark-background-2, #1b1b1b);
2959
+ color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
2957
2960
  }
2958
2961
 
2959
2962
  .fox-calendar {
2960
2963
  color: #333;
2961
- background-color: var(--fox-white, #fff);
2964
+ background-color: var(--fox-white, var(--el-color-white));
2962
2965
  flex-direction: column;
2963
2966
  flex: 1;
2964
2967
  height: 100%;
@@ -2969,7 +2972,7 @@
2969
2972
  }
2970
2973
 
2971
2974
  .fox-calendar.fox-calendar--nopop .fox-calendar__header .fox-calendar__header-title {
2972
- font-size: var(--fox-calendar-base-font, var(--fox-font-size-base, 14px));
2975
+ font-size: var(--fox-calendar-base-font, var(--fox-font-size-medium, var(--el-font-size-medium)));
2973
2976
  }
2974
2977
 
2975
2978
  .fox-calendar .popup-box {
@@ -2988,20 +2991,20 @@
2988
2991
  height: var(--fox-calendar-popup-height, 85vh);
2989
2992
  padding-bottom: constant(safe-area-inset-bottom);
2990
2993
  padding-bottom: env(safe-area-inset-bottom);
2991
- left: calc((100% - var(--fox-calendar-width, 40%)) / 2) !important;
2992
- width: var(--fox-calendar-width, 40%) !important;
2994
+ left: calc((100% - var(--fox-calendar-width, 100%)) / 2) !important;
2995
+ width: var(--fox-calendar-width, 100%) !important;
2993
2996
  }
2994
2997
 
2995
2998
  .fox-calendar__header {
2996
2999
  text-align: center;
2997
- background-color: var(--fox-white, #fff);
3000
+ background-color: var(--fox-white, var(--el-color-white));
2998
3001
  flex-direction: column;
2999
3002
  padding-top: 1px;
3000
3003
  display: flex;
3001
3004
  }
3002
3005
 
3003
3006
  .fox-calendar__header .fox-calendar__header-title {
3004
- font-size: var(--fox-calendar-title-font, var(--fox-font-size-large, 18px));
3007
+ font-size: var(--fox-calendar-title-font, var(--fox-font-size-large, var(--el-font-size-large)));
3005
3008
  font-weight: var(--fox-calendar-title-font-weight, 500);
3006
3009
  line-height: 44px;
3007
3010
  }
@@ -3012,7 +3015,7 @@
3012
3015
 
3013
3016
  .fox-calendar__header .fox-calendar__header-subtitle {
3014
3017
  line-height: 22px;
3015
- font-size: var(--fox-calendar-sub-title-font, var(--fox-font-size-base, 14px));
3018
+ font-size: var(--fox-calendar-sub-title-font, var(--fox-font-size-base, var(--el-font-size-base)));
3016
3019
  padding: 7px 0;
3017
3020
  }
3018
3021
 
@@ -3061,8 +3064,8 @@
3061
3064
  text-align: center;
3062
3065
  height: 50px;
3063
3066
  line-height: 50px;
3064
- font-size: var(--fox-calendar-text-font, var(--fox-font-size-small, 12px));
3065
- color: var(--fox-text-color, var(--el-text-color-regular));
3067
+ font-size: var(--fox-calendar-text-font, var(--fox-font-size-small, var(--el-font-size-small)));
3068
+ color: var(--fox-text-color-regular, var(--el-text-color-regular));
3066
3069
  position: absolute;
3067
3070
  top: -50px;
3068
3071
  left: 0;
@@ -3103,17 +3106,17 @@
3103
3106
 
3104
3107
  .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day .fox-calendar__day-tips--curr {
3105
3108
  width: 100%;
3106
- font-size: 12px;
3107
- line-height: 14px;
3109
+ font-size: var(--fox-font-size-small, var(--el-font-size-small));
3110
+ line-height: 1.2;
3108
3111
  position: absolute;
3109
3112
  bottom: 6px;
3110
3113
  }
3111
3114
 
3112
3115
  .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day .fox-calendar__day-tip {
3113
3116
  width: 100%;
3117
+ font-size: var(--fox-font-size-small, var(--el-font-size-small));
3114
3118
  color: var(--fox-calendar-primary-color, var(--fox-color-primary, var(--el-color-primary)));
3115
- font-size: 12px;
3116
- line-height: 14px;
3119
+ line-height: 1.2;
3117
3120
  position: absolute;
3118
3121
  bottom: 6px;
3119
3122
  }
@@ -3129,7 +3132,7 @@
3129
3132
  .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--active {
3130
3133
  background-color: var(--fox-calendar-primary-color, var(--fox-color-primary, var(--el-color-primary)));
3131
3134
  border-radius: var(--fox-calendar-day-active-border-radius, 0px);
3132
- color: var(--fox-white, #fff) !important;
3135
+ color: var(--fox-white, var(--el-color-white)) !important;
3133
3136
  }
3134
3137
 
3135
3138
  .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--active .fox-calendar__day-tips, .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--active .fox-calendar__day-tips--curr {
@@ -3137,11 +3140,11 @@
3137
3140
  }
3138
3141
 
3139
3142
  .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--active .fox-calendar__day-tip {
3140
- color: var(--fox-white, #fff);
3143
+ color: var(--fox-white, var(--el-color-white));
3141
3144
  }
3142
3145
 
3143
3146
  .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--disabled {
3144
- color: var(--fox-calendar-disable-color, #d1d0d0) !important;
3147
+ color: var(--fox-calendar-disable-color, var(--fox-disable-color, var(--el-text-color-disabled))) !important;
3145
3148
  }
3146
3149
 
3147
3150
  .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day--choose {
@@ -3157,7 +3160,7 @@
3157
3160
  }
3158
3161
 
3159
3162
  .fox-calendar__content .fox-calendar__panel .fox-calendar__days .fox-calendar__day .fox-calendar__day-value {
3160
- font-size: var(--fox-calendar-day-font, 16px);
3163
+ font-size: var(--fox-calendar-day-font, var(--fox-font-size-medium, var(--el-font-size-medium)));
3161
3164
  padding: 2px 0;
3162
3165
  }
3163
3166
 
@@ -3166,7 +3169,7 @@
3166
3169
  height: calc(62px + env(safe-area-inset-buttom));
3167
3170
  padding-bottom: constant(safe-area-inset-bottom);
3168
3171
  padding-bottom: env(safe-area-inset-bottom);
3169
- background-color: var(--fox-white, #fff);
3172
+ background-color: var(--fox-white, var(--el-color-white));
3170
3173
  width: 100%;
3171
3174
  display: flex;
3172
3175
  }
@@ -3174,8 +3177,8 @@
3174
3177
  .fox-calendar__footer .fox-calendar__confirm {
3175
3178
  height: var(--fox-calendar-footer-button-height, 44px);
3176
3179
  width: var(--fox-calendar-footer-button-min-width, 100%);
3177
- background: var(--fox-button-primary-background-color, linear-gradient(135deg, var(--fox-color-primary, var(--fox-color-primary, var(--el-color-primary))) 0%, var(--fox-color-primary, var(--fox-color-primary, var(--el-color-primary))) 100%));
3178
- color: var(--fox-white, #fff);
3180
+ background: var(--fox-calendar-footer-button-background-color, var(--fox-color-primary, var(--el-color-primary)));
3181
+ color: var(--fox-white, var(--el-color-white));
3179
3182
  text-align: center;
3180
3183
  line-height: var(--fox-calendar-footer-button-height, 44px);
3181
3184
  border-radius: 22px;
@@ -3184,12 +3187,12 @@
3184
3187
 
3185
3188
  .fox-cascader {
3186
3189
  width: 100%;
3187
- font-size: var(--fox-cascader-font-size, var(--fox-font-size-base, 14px));
3190
+ font-size: var(--fox-cascader-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
3188
3191
  line-height: var(--fox-cascader-line-height, 22px);
3189
3192
  }
3190
3193
 
3191
3194
  .fox-cascader .fox-tabs-bar__titles {
3192
- background: var(--fox-cascader-tabs-titles-background-color, var(--fox-white, #fff));
3195
+ background: var(--fox-cascader-tabs-titles-background-color, var(--fox-white, var(--el-color-white)));
3193
3196
  }
3194
3197
 
3195
3198
  .fox-cascader .fox-tabs-bar__titles-item {
@@ -3203,8 +3206,8 @@
3203
3206
  text-align: center;
3204
3207
  font-weight: bold;
3205
3208
  line-height: var(--fox-cascader-bar-line-height, 20px);
3206
- color: var(--fox-cascader-bar-color, var(--fox-title-color, #1a1a1a));
3207
- font-size: var(--fox-cascader-bar-font-size, var(--fox-font-size-large, 18px));
3209
+ color: var(--fox-cascader-bar-color, var(--fox-title-color, var(--el-text-color-primary)));
3210
+ font-size: var(--fox-cascader-bar-font-size, var(--fox-font-size-large, var(--el-font-size-large)));
3208
3211
  justify-content: center;
3209
3212
  align-items: center;
3210
3213
  display: flex;
@@ -3229,8 +3232,8 @@
3229
3232
  .fox-cascader__item {
3230
3233
  padding: var(--fox-cascader-item-padding, 10px 20px);
3231
3234
  cursor: pointer;
3232
- font-size: var(--fox-cascader-item-font-size, var(--fox-font-size-base, 14px));
3233
- color: var(--fox-cascader-item-color, var(--fox-title-color, #1a1a1a));
3235
+ font-size: var(--fox-cascader-item-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
3236
+ color: var(--fox-cascader-item-color, var(--fox-title-color, var(--el-text-color-primary)));
3234
3237
  align-items: center;
3235
3238
  margin: 0;
3236
3239
  display: flex;
@@ -3281,7 +3284,7 @@
3281
3284
  }
3282
3285
 
3283
3286
  .fox-overlay {
3284
- background: var(--fox-overlay-bg-color, #000000b3);
3287
+ background: var(--fox-overlay-bg-color, var(--el-overlay-color-light));
3285
3288
  width: 100%;
3286
3289
  height: 100%;
3287
3290
  position: fixed;
@@ -3294,11 +3297,11 @@
3294
3297
  }
3295
3298
 
3296
3299
  .fox-theme-dark .fox-popup {
3297
- background: var(--fox-dark-background2, #1b1b1b);
3300
+ background: var(--fox-dark-background-2, #1b1b1b);
3298
3301
  }
3299
3302
 
3300
3303
  .fox-theme-dark .fox-popup__close-icon {
3301
- color: var(--fox-dark-color, var(--fox-white, #fff));
3304
+ color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
3302
3305
  }
3303
3306
 
3304
3307
  .fox-popup-slide-center-enter-active, .fox-popup-slide-center-leave-active {
@@ -3380,7 +3383,7 @@
3380
3383
  }
3381
3384
 
3382
3385
  .fox-popup {
3383
- background-color: var(--fox-white, #fff);
3386
+ background-color: var(--fox-white, var(--el-color-white));
3384
3387
  -webkit-overflow-scrolling: touch;
3385
3388
  max-height: 100%;
3386
3389
  position: fixed;
@@ -3400,8 +3403,8 @@
3400
3403
  }
3401
3404
 
3402
3405
  .fox-popup__close-icon > svg {
3403
- width: var(--fox-popup-close-icon-size, 12px);
3404
- height: var(--fox-popup-close-icon-size, 12px);
3406
+ width: var(--fox-popup-close-icon-size, var(--fox-font-size-small, var(--el-font-size-small)));
3407
+ height: var(--fox-popup-close-icon-size, var(--fox-font-size-small, var(--el-font-size-small)));
3405
3408
  }
3406
3409
 
3407
3410
  .fox-popup__close-icon:active {
@@ -3440,16 +3443,16 @@
3440
3443
  }
3441
3444
 
3442
3445
  .fox-toast-small .fox-toast-inner {
3443
- font-size: var(--fox-font-size-small, 12px);
3446
+ font-size: var(--fox-font-size-small, var(--el-font-size-small));
3444
3447
  }
3445
3448
 
3446
3449
  .fox-toast-large .fox-toast-inner {
3447
- font-size: var(--fox-font-size-large, 18px);
3450
+ font-size: var(--fox-font-size-large, var(--el-font-size-large));
3448
3451
  }
3449
3452
 
3450
3453
  .fox-toast-cover {
3451
3454
  pointer-events: auto;
3452
- background: var(--fox-toast-cover-bg-color, #0000);
3455
+ background: var(--fox-toast-cover-bg-color, transparent);
3453
3456
  justify-content: center;
3454
3457
  align-items: center;
3455
3458
  height: 100%;
@@ -3457,20 +3460,20 @@
3457
3460
  }
3458
3461
 
3459
3462
  .fox-toast-inner {
3460
- font-size: var(--fox-toast-text-font-size, 14px);
3463
+ font-size: var(--fox-toast-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
3461
3464
  text-align: center;
3462
3465
  min-width: 40%;
3463
3466
  max-width: 65%;
3464
3467
  padding: var(--fox-toast-inner-padding, 24px 30px);
3465
3468
  word-break: break-all;
3466
- background: var(--fox-toast-inner-bg-color, #000c);
3469
+ background: var(--fox-toast-inner-bg-color, var(--fox-overlay-text-bg-color, var(--el-overlay-color)));
3467
3470
  border-radius: var(--fox-toast-inner-border-radius, 12px);
3468
- color: var(--fox-toast-font-color, var(--fox-white, #fff));
3471
+ color: var(--fox-toast-font-color, var(--fox-white, var(--el-color-white)));
3469
3472
  display: inline-block;
3470
3473
  }
3471
3474
 
3472
3475
  .fox-toast-text {
3473
- font-size: var(--fox-toast-text-font-size, 14px);
3476
+ font-size: var(--fox-toast-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
3474
3477
  }
3475
3478
 
3476
3479
  .fox-toast-text:empty {
@@ -3478,7 +3481,7 @@
3478
3481
  }
3479
3482
 
3480
3483
  .fox-toast-title {
3481
- font-size: var(--fox-toast-title-font-size, 16px);
3484
+ font-size: var(--fox-toast-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
3482
3485
  }
3483
3486
 
3484
3487
  .fox-toast-title:empty {
@@ -3526,22 +3529,22 @@
3526
3529
  }
3527
3530
 
3528
3531
  .fox-theme-dark .fox-searchbar__search-label, .fox-theme-dark .fox-searchbar .fox-searchbar__input-clear .fox-searchbar__fox-icon-mask-close {
3529
- color: var(--fox-dark-color, var(--fox-white, #fff));
3532
+ color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
3530
3533
  }
3531
3534
 
3532
3535
  .fox-theme-dark .fox-searchbar .fox-searchbar__input-clear .fox-searchbar__fox-icon-mask-close:hover {
3533
3536
  cursor: pointer;
3534
- color: var(--fox-dark-color, var(--fox-white, #fff));
3537
+ color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
3535
3538
  }
3536
3539
 
3537
3540
  .fox-theme-dark .fox-searchbar__right-search-icon, .fox-theme-dark .fox-searchbar__left-search-icon {
3538
- color: var(--fox-dark-color, var(--fox-white, #fff));
3541
+ color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
3539
3542
  }
3540
3543
 
3541
3544
  .fox-searchbar {
3542
3545
  width: var(--fox-searchbar-width, 100%);
3543
3546
  padding: var(--fox-searchbar-padding, 9px 16px);
3544
- background: var(--fox-searchbar-background, var(--fox-white, #fff));
3547
+ background: var(--fox-searchbar-background, var(--fox-white, var(--el-color-white)));
3545
3548
  box-sizing: border-box;
3546
3549
  color: var(--fox-searchbar-input-bar-color, inherit);
3547
3550
  align-items: center;
@@ -3562,8 +3565,8 @@
3562
3565
  height: var(--fox-searchbar-input-height, 32px);
3563
3566
  padding: var(--fox-searchbar-input-padding, 0 0 0 13px);
3564
3567
  border-radius: var(--fox-searchbar-input-border-radius, 16px);
3565
- box-shadow: var(--fox-searchbar-input-box-shadow, 0 0 8px 0 #0000000a);
3566
- background: var(--fox-searchbar-input-background, #f7f7f7);
3568
+ box-shadow: var(--fox-searchbar-input-box-shadow, var(--fox-box-shadow-lighter, var(--el-box-shadow-lighter)));
3569
+ background: var(--fox-searchbar-input-background, var(--fox-fill-color-base, var(--el-fill-color)));
3567
3570
  box-sizing: border-box;
3568
3571
  flex: 1;
3569
3572
  align-items: center;
@@ -3575,16 +3578,21 @@
3575
3578
  }
3576
3579
 
3577
3580
  .fox-searchbar__search-input .fox-searchbar__input-inner {
3581
+ flex: 1;
3582
+ width: 100%;
3583
+ }
3584
+
3585
+ .fox-searchbar__search-input .fox-searchbar__input-inner-input {
3586
+ padding: var(--fox-searchbar-input-inner-padding, 0 20px 0 10px);
3587
+ font-size: var(--fox-font-size-base, var(--el-font-size-base));
3588
+ box-sizing: border-box;
3578
3589
  background-color: #0000;
3579
3590
  border-color: #0000;
3580
3591
  border-radius: 16px;
3581
3592
  outline: none;
3582
- flex: 1;
3583
3593
  width: 100%;
3584
- height: 36px;
3594
+ height: 100%;
3585
3595
  margin: 0;
3586
- padding: 0 20px 0 0;
3587
- font-size: 14px;
3588
3596
  }
3589
3597
 
3590
3598
  .fox-searchbar__search-input .fox-searchbar__input-inner-right {
@@ -3601,13 +3609,13 @@
3601
3609
  }
3602
3610
 
3603
3611
  .fox-searchbar__search-input .fox-searchbar__input-clear-icon > svg {
3604
- width: 16px;
3605
- height: 16px;
3612
+ width: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
3613
+ height: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
3606
3614
  }
3607
3615
 
3608
3616
  .fox-searchbar__search-input .fox-searchbar__input-left-search-icon {
3609
- width: 16px;
3610
- height: 16px;
3617
+ width: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
3618
+ height: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
3611
3619
  margin-right: 6px;
3612
3620
  }
3613
3621
 
@@ -3616,9 +3624,9 @@
3616
3624
  }
3617
3625
 
3618
3626
  .fox-searchbar__search-icon {
3627
+ font-size: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
3619
3628
  justify-content: center;
3620
3629
  align-items: center;
3621
- font-size: 14px;
3622
3630
  display: flex;
3623
3631
  }
3624
3632
 
@@ -3627,7 +3635,7 @@
3627
3635
  }
3628
3636
 
3629
3637
  .fox-searchbar__right-search-icon {
3630
- color: var(--fox-searchbar-right-out-color, var(--fox-black, #000));
3638
+ color: var(--fox-searchbar-right-out-color, var(--fox-black, var(--el-color-black)));
3631
3639
  margin-left: 16px;
3632
3640
  }
3633
3641
 
@@ -3640,8 +3648,8 @@
3640
3648
  width: 100%;
3641
3649
  height: 50px;
3642
3650
  line-height: 50px;
3643
- font-size: var(--fox-font-size-small, 12px);
3644
- color: var(--fox-infiniteloading-bottom-color, #c8c8c8);
3651
+ font-size: var(--fox-font-size-small, var(--el-font-size-small));
3652
+ color: var(--fox-infiniteloading-bottom-color, var(--fox-disable-color, var(--el-text-color-disabled)));
3645
3653
  text-align: center;
3646
3654
  display: block;
3647
3655
  }
@@ -3664,8 +3672,8 @@
3664
3672
  }
3665
3673
 
3666
3674
  .fox-infinite-loading__bottom-box__text {
3667
- color: var(--fox-text-color, var(--el-text-color-regular));
3668
- font-size: 12px;
3675
+ font-size: var(--fox-font-size-extra-small, var(--el-font-size-extra-small));
3676
+ color: var(--fox-text-color-regular, var(--el-text-color-regular));
3669
3677
  }
3670
3678
 
3671
3679
  .fox-pull-refresh {
@@ -3680,11 +3688,11 @@
3680
3688
 
3681
3689
  .fox-pull-refresh__container-topbox {
3682
3690
  text-align: center;
3683
- justify-content: center;
3684
- align-items: center;
3685
3691
  width: 100%;
3686
3692
  height: 50px;
3687
- font-size: 14px;
3693
+ font-size: var(--fox-font-size-base, var(--el-font-size-base));
3694
+ justify-content: center;
3695
+ align-items: center;
3688
3696
  display: flex;
3689
3697
  position: absolute;
3690
3698
  left: 0;
@@ -3703,8 +3711,8 @@
3703
3711
  }
3704
3712
 
3705
3713
  .fox-pull-refresh__container-topbox-text {
3706
- font-size: var(--fox-font-size-base, 14px);
3707
- color: var(--fox-text-color, var(--el-text-color-regular));
3714
+ font-size: var(--fox-font-size-base, var(--el-font-size-base));
3715
+ color: var(--fox-text-color-regular, var(--el-text-color-regular));
3708
3716
  }
3709
3717
 
3710
3718
  .fox-more-button {
@@ -3761,7 +3769,7 @@
3761
3769
  }
3762
3770
 
3763
3771
  .fox-more-button__text {
3764
- font-size: var(--fox-font-size-base, 14px);
3772
+ font-size: var(--fox-font-size-base, var(--el-font-size-base));
3765
3773
  }
3766
3774
 
3767
3775
  .fox-more-button > * + * {
@@ -3778,28 +3786,28 @@
3778
3786
  width: var(--fox-floating-button-width, 52px);
3779
3787
  height: var(--fox-floating-button-height, 52px);
3780
3788
  opacity: var(--fox-floating-button-opacity, 1);
3781
- background: var(--fox-floating-button-background, linear-gradient(136.56deg, var(--fox-color-primary, var(--el-color-primary)) 0%, var(--fox-color-primary-end, var(--el-color-primary-light-3)) 100%));
3782
- box-shadow: var(--fox-floating-button-box-shadow, 0px 3px 12px #31040014);
3789
+ background: var(--fox-floating-button-background, var(--fox-color-primary, var(--el-color-primary)));
3790
+ box-shadow: var(--fox-floating-button-box-shadow, var(--fox-box-shadow-light, var(--el-box-shadow-light)));
3783
3791
  border-radius: var(--fox-floating-button-border-radius, 50%);
3784
- color: var(--fox-floating-button-color, #fff);
3792
+ color: var(--fox-floating-button-color, var(--fox-white, var(--el-color-white)));
3785
3793
  justify-content: center;
3786
3794
  align-items: center;
3787
3795
  display: flex;
3788
3796
  }
3789
3797
 
3790
3798
  .fox-floating-button__icon {
3791
- width: var(--fox-floating-button-icon-size, 20px);
3792
- height: var(--fox-floating-button-icon-size, 20px);
3799
+ width: var(--fox-floating-button-icon-size, var(--fox-font-size-extra-large, var(--el-font-size-extra-large)));
3800
+ height: var(--fox-floating-button-icon-size, var(--fox-font-size-extra-large, var(--el-font-size-extra-large)));
3793
3801
  }
3794
3802
 
3795
3803
  .fox-price {
3796
- font-size: var(--fox-font-size-medium, 16px);
3804
+ font-size: var(--fox-font-size-medium, var(--el-font-size-medium));
3797
3805
  color: var(--fox-color-primary, var(--el-color-primary));
3798
3806
  display: inline;
3799
3807
  }
3800
3808
 
3801
3809
  .fox-price--symbol {
3802
- font-size: var(--fox-font-size-medium, 16px);
3810
+ font-size: var(--fox-font-size-medium, var(--el-font-size-medium));
3803
3811
  display: inline-block;
3804
3812
  }
3805
3813
 
@@ -3809,42 +3817,42 @@
3809
3817
  }
3810
3818
 
3811
3819
  .fox-price--decimal-large {
3812
- font-size: var(--fox-price-decimal-big-size, 18px);
3820
+ font-size: var(--fox-price-decimal-big-size, var(--fox-font-size-large, var(--el-font-size-large)));
3813
3821
  display: inline-block;
3814
3822
  }
3815
3823
 
3816
3824
  .fox-price--symbol-large {
3817
- font-size: var(--fox-price-symbol-big-size, 18px);
3825
+ font-size: var(--fox-price-symbol-big-size, var(--fox-font-size-large, var(--el-font-size-large)));
3818
3826
  display: inline-block;
3819
3827
  }
3820
3828
 
3821
3829
  .fox-price--normal {
3822
- font-size: var(--fox-price-medium-size, 16px);
3830
+ font-size: var(--fox-price-medium-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
3823
3831
  display: inline-block;
3824
3832
  }
3825
3833
 
3826
3834
  .fox-price--decimal-normal {
3827
- font-size: var(--fox-price-decimal-medium-size, 14px);
3835
+ font-size: var(--fox-price-decimal-medium-size, var(--fox-font-size-base, var(--el-font-size-base)));
3828
3836
  display: inline-block;
3829
3837
  }
3830
3838
 
3831
3839
  .fox-price--symbol-normal {
3832
- font-size: var(--fox-price-symbol-medium-size, 14px);
3840
+ font-size: var(--fox-price-symbol-medium-size, var(--fox-font-size-base, var(--el-font-size-base)));
3833
3841
  display: inline-block;
3834
3842
  }
3835
3843
 
3836
3844
  .fox-price--small {
3837
- font-size: var(--fox-price-small-size, 12px);
3845
+ font-size: var(--fox-price-small-size, var(--fox-font-size-small, var(--el-font-size-small)));
3838
3846
  display: inline-block;
3839
3847
  }
3840
3848
 
3841
3849
  .fox-price--decimal-small {
3842
- font-size: var(--fox-price-decimal-small-size, 10px);
3850
+ font-size: var(--fox-price-decimal-small-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
3843
3851
  display: inline-block;
3844
3852
  }
3845
3853
 
3846
3854
  .fox-price--symbol-small {
3847
- font-size: var(--fox-price-symbol-small-size, 10px);
3855
+ font-size: var(--fox-price-symbol-small-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
3848
3856
  display: inline-block;
3849
3857
  }
3850
3858
 
@@ -3938,9 +3946,9 @@
3938
3946
  .fox-text {
3939
3947
  margin: var(--fox-text-margin, 0);
3940
3948
  padding: var(--fox-text-padding, 0);
3941
- font-size: var(--fox-text-font-size, var(--fox-font-size-base, 14px));
3949
+ font-size: var(--fox-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
3942
3950
  font-weight: var(--fox-text-font-weight, 400);
3943
- color: var(--fox-text-color, var(--el-text-color));
3951
+ color: var(--fox-text-text-color, var(--fox-black, var(--el-color-black)));
3944
3952
  word-break: break-all;
3945
3953
  }
3946
3954
 
@@ -3953,7 +3961,7 @@
3953
3961
  }
3954
3962
 
3955
3963
  .fox-text.is-highlight > * {
3956
- color: var(--fox-text-highlight-color, var(--fox-white, #fff)) !important;
3964
+ color: var(--fox-text-highlight-color, var(--fox-white, var(--el-color-white))) !important;
3957
3965
  background: var(--fox-text-highlight-background-color, var(--fox-color-danger, var(--el-color-danger))) !important;
3958
3966
  }
3959
3967
 
@@ -3963,117 +3971,117 @@
3963
3971
  }
3964
3972
 
3965
3973
  .fox-text--primary {
3966
- color: var(--fox-text-primary-color, var(--el-color-primary));
3974
+ color: var(--fox-text-primary-color, var(--fox-color-primary, var(--el-color-primary)));
3967
3975
  }
3968
3976
 
3969
3977
  .fox-text--primary .fox-text__mark {
3970
- background-color: var(--fox-text-primary-color, var(--el-color-primary));
3978
+ background-color: var(--fox-text-primary-color, var(--fox-color-primary, var(--el-color-primary)));
3971
3979
  }
3972
3980
 
3973
3981
  .fox-text--success {
3974
- color: var(--fox-text-color-success, var(--el-color-success));
3982
+ color: var(--fox-text-success-color, var(--fox-color-success, var(--el-color-success)));
3975
3983
  }
3976
3984
 
3977
3985
  .fox-text--success .fox-text__mark {
3978
- background-color: var(--fox-text-color-success, var(--el-color-success));
3986
+ background-color: var(--fox-text-success-color, var(--fox-color-success, var(--el-color-success)));
3979
3987
  }
3980
3988
 
3981
3989
  .fox-text--info {
3982
- color: var(--fox-text-color-info, var(--el-color-info));
3990
+ color: var(--fox-text-info-color, var(--fox-color-info, var(--el-color-info)));
3983
3991
  }
3984
3992
 
3985
3993
  .fox-text--info .fox-text__mark {
3986
- background-color: var(--fox-text-color-info, var(--el-color-info));
3994
+ background-color: var(--fox-text-info-color, var(--fox-color-info, var(--el-color-info)));
3987
3995
  }
3988
3996
 
3989
3997
  .fox-text--warning {
3990
- color: var(--fox-text-color-warning, var(--el-color-warning));
3998
+ color: var(--fox-text-warning-color, var(--fox-color-warning, var(--el-color-warning)));
3991
3999
  }
3992
4000
 
3993
4001
  .fox-text--warning .fox-text__mark {
3994
- background-color: var(--fox-text-color-warning, var(--el-color-warning));
4002
+ background-color: var(--fox-text-warning-color, var(--fox-color-warning, var(--el-color-warning)));
3995
4003
  }
3996
4004
 
3997
4005
  .fox-text--danger {
3998
- color: var(--fox-text-color-danger, var(--el-color-danger));
4006
+ color: var(--fox-text-danger-color, var(--fox-color-danger, var(--el-color-danger)));
3999
4007
  }
4000
4008
 
4001
4009
  .fox-text--danger .fox-text__mark {
4002
- background-color: var(--fox-text-color-danger, var(--el-color-danger));
4010
+ background-color: var(--fox-text-danger-color, var(--fox-color-danger, var(--el-color-danger)));
4003
4011
  }
4004
4012
 
4005
4013
  .fox-text--default {
4006
- color: var(--fox-text-color, var(--el-text-color));
4014
+ color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
4007
4015
  }
4008
4016
 
4009
4017
  .fox-text--default .fox-text__mark {
4010
- background-color: var(--fox-text-color, var(--el-text-color));
4018
+ background-color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
4011
4019
  }
4012
4020
 
4013
4021
  .fox-text--large {
4014
- font-size: var(--fox-text-font-size-large, var(--el-font-size-large));
4022
+ font-size: var(--fox-text-font-size-large, var(--fox-font-size-large, var(--el-font-size-large)));
4015
4023
  }
4016
4024
 
4017
4025
  .fox-text--small {
4018
- font-size: var(--fox-text-font-size-small, var(--el-font-size-extra-small));
4026
+ font-size: var(--fox-text-font-size-small, var(--fox-font-size-small, var(--el-font-size-small)));
4019
4027
  }
4020
4028
 
4021
4029
  .fox-text__mark {
4022
4030
  box-sizing: border-box;
4023
4031
  width: var(--fox-text-mark-size, 4px);
4024
4032
  height: var(--fox-text-mark-size, 4px);
4025
- background-color: var(--fox-text-color, var(--el-text-color));
4026
- line-height: var(--fox-text-font-size, var(--fox-font-size-base, 14px));
4033
+ background-color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
4034
+ line-height: var(--fox-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
4027
4035
  border-radius: 50%;
4028
4036
  display: inline-block;
4029
4037
  }
4030
4038
 
4031
4039
  .fox-text__mark--primary {
4032
- background-color: var(--fox-text-primary-color, var(--el-color-primary));
4040
+ background-color: var(--fox-text-primary-color, var(--fox-color-primary, var(--el-color-primary)));
4033
4041
  }
4034
4042
 
4035
4043
  .fox-text__mark--success {
4036
- background-color: var(--fox-text-color-success, var(--el-color-success));
4044
+ background-color: var(--fox-text-success-color, var(--fox-color-success, var(--el-color-success)));
4037
4045
  }
4038
4046
 
4039
4047
  .fox-text__mark--warning {
4040
- background-color: var(--fox-text-color-warning, var(--el-color-warning));
4048
+ background-color: var(--fox-text-warning-color, var(--fox-color-warning, var(--el-color-warning)));
4041
4049
  }
4042
4050
 
4043
4051
  .fox-text__mark--danger {
4044
- background-color: var(--fox-text-color-danger, var(--el-color-danger));
4052
+ background-color: var(--fox-text-danger-color, var(--fox-color-danger, var(--el-color-danger)));
4045
4053
  }
4046
4054
 
4047
4055
  .fox-text__mark--default {
4048
- background-color: var(--fox-text-color, var(--el-text-color));
4056
+ background-color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
4049
4057
  }
4050
4058
 
4051
4059
  .fox-text__mark-wrap {
4052
4060
  box-sizing: content-box;
4053
- color: var(--fox-text-color, var(--el-text-color));
4061
+ color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
4054
4062
  justify-content: center;
4055
4063
  align-items: center;
4056
4064
  display: flex;
4057
4065
  }
4058
4066
 
4059
4067
  .fox-text__mark-wrap--primary {
4060
- color: var(--fox-text-primary-color, var(--el-color-primary));
4068
+ color: var(--fox-text-primary-color, var(--fox-color-primary, var(--el-color-primary)));
4061
4069
  }
4062
4070
 
4063
4071
  .fox-text__mark-wrap--success {
4064
- color: var(--fox-text-color-success, var(--el-color-success));
4072
+ color: var(--fox-text-success-color, var(--fox-color-success, var(--el-color-success)));
4065
4073
  }
4066
4074
 
4067
4075
  .fox-text__mark-wrap--warning {
4068
- color: var(--fox-text-color-warning, var(--el-color-warning));
4076
+ color: var(--fox-text-warning-color, var(--fox-color-warning, var(--el-color-warning)));
4069
4077
  }
4070
4078
 
4071
4079
  .fox-text__mark-wrap--danger {
4072
- color: var(--fox-text-color-danger, var(--el-color-danger));
4080
+ color: var(--fox-text-danger-color, var(--fox-color-danger, var(--el-color-danger)));
4073
4081
  }
4074
4082
 
4075
4083
  .fox-text__mark-wrap--default {
4076
- color: var(--fox-text-color, var(--el-text-color));
4084
+ color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
4077
4085
  }
4078
4086
 
4079
4087
  .fox-text__mark-wrap svg {
@@ -4108,7 +4116,7 @@
4108
4116
  margin: var(--fox-text-divide-margin, 0 0);
4109
4117
  height: var(--fox-text-divide-height, 12px);
4110
4118
  width: var(--fox-text-divide-width, 1px);
4111
- background: var(--fox-text-divide-color, var(--fox-border-color-light, #e4e7ed));
4119
+ background: var(--fox-text-divide-color, var(--fox-border-color-light, var(--el-border-color-light)));
4112
4120
  }
4113
4121
 
4114
4122
  .fox-tour__mask {
@@ -4183,18 +4191,18 @@
4183
4191
  }
4184
4192
 
4185
4193
  .fox-theme-dark .fox-number-keyboard {
4186
- background-color: var(--fox-dark-background4, #323233);
4194
+ background-color: var(--fox-dark-background-4, #323233);
4187
4195
  }
4188
4196
 
4189
4197
  .fox-theme-dark .fox-number-keyboard .fox-key__wrapper .fox-key {
4190
- color: var(--fox-dark-color, var(--fox-white, #fff));
4191
- background-color: var(--fox-dark-background5, #646566);
4198
+ color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
4199
+ background-color: var(--fox-dark-background-5, #646566);
4192
4200
  }
4193
4201
 
4194
4202
  .fox-number-keyboard {
4195
- width: var(--fox-numberkeyboard-width, 40%);
4203
+ width: var(--fox-numberkeyboard-width, 100%);
4196
4204
  padding: var(--fox-numberkeyboard-padding, 0 0 22px 0);
4197
- background-color: var(--fox-numberkeyboard-background-color, #f2f3f5);
4205
+ background-color: var(--fox-numberkeyboard-background-color, var(--fox-fill-color-base, var(--el-fill-color)));
4198
4206
  -webkit-user-select: none;
4199
4207
  user-select: none;
4200
4208
  }
@@ -4203,8 +4211,8 @@
4203
4211
  box-sizing: content-box;
4204
4212
  height: var(--fox-numberkeyboard-header-height, 34px);
4205
4213
  padding: var(--fox-numberkeyboard-header-padding, 6px 0 0 0);
4206
- color: var(--fox-numberkeyboard-header-color, #646566);
4207
- font-size: var(--fox-numberkeyboard-header-font-size, var(--fox-font-size-medium, 16px));
4214
+ color: var(--fox-numberkeyboard-header-color, var(--fox-title-color2, var(--el-text-color-secondary)));
4215
+ font-size: var(--fox-numberkeyboard-header-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
4208
4216
  justify-content: center;
4209
4217
  align-items: center;
4210
4218
  display: flex;
@@ -4217,8 +4225,8 @@
4217
4225
 
4218
4226
  .fox-number-keyboard .fox-number-keyboard__header .fox-number-keyboard__close {
4219
4227
  padding: var(--fox-numberkeyboard-header-close-padding, 0 16px);
4220
- color: var(--fox-numberkeyboard-header-close-color, #576b95);
4221
- font-size: var(--fox-numberkeyboard-header-close-font-size, var(--fox-font-size-base, 14px));
4228
+ color: var(--fox-numberkeyboard-header-close-color, var(--fox-text-color--secondary, var(--el-text-color-secondary)));
4229
+ font-size: var(--fox-numberkeyboard-header-close-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
4222
4230
  background-color: var(--fox-numberkeyboard-header-close-background-color, transparent);
4223
4231
  cursor: pointer;
4224
4232
  border: none;
@@ -4251,13 +4259,13 @@
4251
4259
  }
4252
4260
 
4253
4261
  .fox-number-keyboard .fox-number-keyboard__body .fox-number-keyboard__sidebar .fox-key__wrapper .fox-key--finish {
4254
- font-size: var(--fox-numberkeyboard-key-finish-font-size, var(--fox-font-size-medium, 16px));
4255
- color: var(--fox-numberkeyboard-key-finish-font-size-color, #fff);
4256
- background-color: var(--fox-numberkeyboard-key-finish-background-color, #1989fa);
4262
+ font-size: var(--fox-numberkeyboard-key-finish-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
4263
+ color: var(--fox-numberkeyboard-key-finish-font-size-color, var(--fox-white, var(--el-color-white)));
4264
+ background-color: var(--fox-numberkeyboard-key-finish-background-color, var(--fox-color-primary, var(--el-color-primary)));
4257
4265
  }
4258
4266
 
4259
4267
  .fox-number-keyboard .fox-number-keyboard__body .fox-number-keyboard__sidebar .fox-key__wrapper .activeFinsh {
4260
- background-color: var(--fox-numberkeyboard-key-activeFinsh-background-color, #0570db);
4268
+ background-color: var(--fox-numberkeyboard-key-activeFinsh-background-color, var(--fox-color-primary-dark-2, var(--el-color-primary-dark-2)));
4261
4269
  }
4262
4270
 
4263
4271
  .fox-key__wrapper {
@@ -4275,8 +4283,8 @@
4275
4283
  height: var(--fox-numberkeyboard-key-height, 48px);
4276
4284
  font-size: var(--fox-numberkeyboard-key-font-size, 28px);
4277
4285
  line-height: var(--fox-numberkeyboard-key-line-height, 1.5);
4278
- background-color: var(--fox-numberkeyboard-key-background-color, #fff);
4279
- color: var(--fox-numberkeyboard-key-font-size-color, #333);
4286
+ background-color: var(--fox-numberkeyboard-key-background-color, var(--fox-white, var(--el-color-white)));
4287
+ color: var(--fox-numberkeyboard-key-font-size-color, var(--fox-title-color, var(--el-text-color-primary)));
4280
4288
  border-radius: var(--fox-numberkeyboard-key-border-radius, 8px);
4281
4289
  cursor: pointer;
4282
4290
  justify-content: center;
@@ -4285,7 +4293,7 @@
4285
4293
  }
4286
4294
 
4287
4295
  .fox-key__wrapper .fox-key--active {
4288
- background-color: var(--fox-numberkeyboard-key-active-background-color, #ebedf0);
4296
+ background-color: var(--fox-numberkeyboard-key-active-background-color, var(--fox-border-color-lighter, var(--el-border-color-lighter)));
4289
4297
  }
4290
4298
 
4291
4299
  .fox-key__wrapper img {
@@ -4305,11 +4313,11 @@
4305
4313
  }
4306
4314
 
4307
4315
  .fox-theme-dark .fox-short-password-title {
4308
- color: var(--fox-dark-color, var(--fox-white, #fff));
4316
+ color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
4309
4317
  }
4310
4318
 
4311
4319
  .fox-theme-dark .fox-short-password-wrapper .fox-short-password__list {
4312
- background: var(--fox-dark-background3, #141414);
4320
+ background: var(--fox-dark-background-3, #141414);
4313
4321
  border: none;
4314
4322
  }
4315
4323
 
@@ -4318,7 +4326,7 @@
4318
4326
  }
4319
4327
 
4320
4328
  .fox-theme-dark .fox-short-password-wrapper .fox-short-password__list .fox-short-password__item .fox-short-password__item-icon {
4321
- background: var(--fox-dark-color, var(--fox-white, #fff));
4329
+ background: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
4322
4330
  }
4323
4331
 
4324
4332
  .fox-theme-dark .fox-short-password-wrapper .fox-short-password__list .fox-short-password__item:after {
@@ -4333,14 +4341,14 @@
4333
4341
 
4334
4342
  .fox-short-password-title {
4335
4343
  line-height: 1;
4336
- font-size: var(--fox-font-size-medium, 16px);
4337
- color: var(--fox-title-color, #1a1a1a);
4344
+ font-size: var(--fox-font-size-medium, var(--el-font-size-medium));
4345
+ color: var(--fox-title-color, var(--el-text-color-primary));
4338
4346
  }
4339
4347
 
4340
4348
  .fox-short-password-subtitle {
4341
4349
  line-height: 1;
4342
- font-size: var(--fox-font-size-small, 12px);
4343
- color: var(--fox-text-color, var(--el-text-color-regular));
4350
+ font-size: var(--fox-font-size-small, var(--el-font-size-small));
4351
+ color: var(--fox-text-color-regular, var(--el-text-color-regular));
4344
4352
  margin-top: 12px;
4345
4353
  display: block;
4346
4354
  }
@@ -4352,8 +4360,8 @@
4352
4360
  }
4353
4361
 
4354
4362
  .fox-short-password__list {
4355
- background: var(--fox-shortpassword-background-color, #f5f5f5);
4356
- border: 1px solid var(--fox-shortpassword-border-color, #ddd);
4363
+ background: var(--fox-shortpassword-background-color, var(--fox-fill-color-base, var(--el-fill-color)));
4364
+ border: 1px solid var(--fox-shortpassword-border-color, var(--fox-border-color-base, var(--el-border-color)));
4357
4365
  z-index: 10;
4358
4366
  border-radius: 4px;
4359
4367
  width: 100%;
@@ -4386,14 +4394,14 @@
4386
4394
 
4387
4395
  .fox-short-password__message .fox-short-password--error {
4388
4396
  line-height: 1;
4389
- font-size: var(--fox-font-size-extra-small, 10px);
4397
+ font-size: var(--fox-font-size-extra-small, var(--el-font-size-extra-small));
4390
4398
  color: var(--fox-shortpassword-error, var(--fox-color-primary, var(--el-color-primary)));
4391
4399
  }
4392
4400
 
4393
4401
  .fox-short-password__message .fox-short-password--forget {
4394
4402
  line-height: 1;
4395
- font-size: var(--fox-font-size-small, 12px);
4396
- color: var(--fox-shortpassword-forget, gray);
4403
+ font-size: var(--fox-font-size-small, var(--el-font-size-small));
4404
+ color: var(--fox-shortpassword-forget, var(--fox-text-color-regular, var(--el-text-color-regular)));
4397
4405
  display: flex;
4398
4406
  }
4399
4407