antd-mobile 5.12.7 → 5.14.0

package/bundle/style.css

@@ -1,18 +1,49 @@
 :root {
+  --adm-radius-s: 4px;
+  --adm-radius-m: 8px;
+  --adm-radius-l: 12px;
+  --adm-font-size-1: 9px;
+  --adm-font-size-2: 10px;
+  --adm-font-size-3: 11px;
+  --adm-font-size-4: 12px;
+  --adm-font-size-5: 13px;
+  --adm-font-size-6: 14px;
+  --adm-font-size-7: 15px;
+  --adm-font-size-8: 16px;
+  --adm-font-size-9: 17px;
+  --adm-font-size-10: 18px;
+  --adm-hd: 1;
   --adm-color-primary: #1677ff;
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;
   --adm-color-danger: #ff3141;
   --adm-color-white: #ffffff;
+  --adm-color-text: #333333;
+  --adm-color-text-secondary: #666666;
   --adm-color-weak: #999999;
   --adm-color-light: #cccccc;
-  --adm-border-color: #eeeeee;
-  --adm-font-size-main: 13px;
-  --adm-color-text: #333333;
-  --adm-hd: 1;
+  --adm-color-border: #eeeeee;
+  --adm-color-box: #f5f5f5;
+  --adm-color-background: #ffffff;
+  --adm-font-size-main: var(--adm-font-size-5);
   --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
     helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
     'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  --adm-border-color: var(--adm-color-border);
+}
+html[data-prefers-color-scheme='dark'] {
+  --adm-color-primary: #3086ff;
+  --adm-color-success: #34b368;
+  --adm-color-warning: #ffa930;
+  --adm-color-danger: #ff4a58;
+  --adm-color-text: #e6e6e6;
+  --adm-color-text-secondary: #b3b3b3;
+  --adm-color-weak: #808080;
+  --adm-color-light: #4d4d4d;
+  --adm-color-border: #2b2b2b;
+  --adm-color-box: #0a0a0a;
+  --adm-color-background: #1a1a1a;
+  --adm-border-color: var(--adm-color-border);
 }
 :root {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -62,15 +93,15 @@ div.adm-px-tester {
   display: flex;
   justify-content: center;
   color: var(--adm-color-weak);
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   padding: 18px 12px;
-  border-bottom: 1px solid var(--adm-border-color);
+  border-bottom: 1px solid var(--adm-color-border);
 }
 .adm-action-sheet-button-list {
-  border-bottom: 1px solid var(--adm-border-color);
+  border-bottom: 1px solid var(--adm-color-border);
 }
 .adm-action-sheet-button-item-wrapper {
-  border-bottom: 1px solid var(--adm-border-color);
+  border-bottom: 1px solid var(--adm-color-border);
 }
 .adm-action-sheet-button-item-wrapper:last-child {
   border-bottom: none;
@@ -78,7 +109,7 @@ div.adm-px-tester {
 .adm-action-sheet-button-item {
   text-align: center;
   display: block;
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   padding: 16px;
 }
 .adm-action-sheet-button-item:active {
@@ -91,10 +122,10 @@ div.adm-px-tester {
 }
 .adm-action-sheet-button-item-name {
   color: var(--adm-color-text);
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
 }
 .adm-action-sheet-button-item-description {
-  font-size: 12px;
+  font-size: var(--adm-font-size-4);
   color: var(--adm-color-weak);
   padding-top: 2px;
 }
@@ -102,7 +133,7 @@ div.adm-px-tester {
   color: var(--adm-color-danger);
 }
 .adm-action-sheet-cancel {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   padding-top: 8px;
 }
 .adm-popup {
@@ -112,7 +143,7 @@ div.adm-px-tester {
 }
 .adm-popup-body {
   position: fixed;
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   z-index: calc(var(--z-index) + 10);
 }
 .adm-popup-body-position-bottom {
@@ -203,11 +234,11 @@ div.adm-px-tester {
   --color: var(--adm-badge-color, #ff411c);
 }
 .adm-badge-content {
-  color: #fff;
+  color: var(--adm-color-white);
   box-sizing: border-box;
   min-width: 8px;
   padding: 1px 4px;
-  font-size: 9px;
+  font-size: var(--adm-font-size-1);
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;
@@ -231,11 +262,11 @@ div.adm-px-tester {
 .adm-button {
   --color: var(--adm-color-white);
   --text-color: var(--adm-button-text-color, var(--adm-color-text));
-  --background-color: var(--adm-button-background-color, var(--adm-color-white));
+  --background-color: var(--adm-button-background-color, var(--adm-color-background));
   --border-radius: var(--adm-button-border-radius, 4px);
   --border-width: var(--adm-button-border-width, 1px);
   --border-style: var(--adm-button-border-style, solid);
-  --border-color: var(--adm-button-border-color, var(--adm-border-color));
+  --border-color: var(--adm-button-border-color, var(--adm-color-border));
   color: var(--text-color);
   background-color: var(--background-color);
   position: relative;
@@ -244,7 +275,7 @@ div.adm-px-tester {
   height: auto;
   padding: 7px 12px;
   margin: 0;
-  font-size: 17px;
+  font-size: var(--adm-font-size-9);
   line-height: 1.4;
   text-align: center;
   border: var(--border-width) var(--border-style) var(--border-color);
@@ -321,7 +352,7 @@ div.adm-px-tester {
 .adm-button.adm-button-mini {
   padding-top: 3px;
   padding-bottom: 3px;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
 }
 .adm-button.adm-button-mini.adm-button-shape-rounded {
   padding-left: 9px;
@@ -330,12 +361,12 @@ div.adm-px-tester {
 .adm-button.adm-button-small {
   padding-top: 3px;
   padding-bottom: 3px;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
 }
 .adm-button.adm-button-large {
   padding-top: 11px;
   padding-bottom: 11px;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
 }
 .adm-button.adm-button-shape-rounded {
   --border-radius: 1000px;
@@ -377,7 +408,7 @@ div.adm-px-tester {
   transform: rotate(180deg);
 }
 .adm-calendar .adm-calendar-header .adm-calendar-title {
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   flex: auto;
   text-align: center;
 }
@@ -436,11 +467,11 @@ div.adm-px-tester {
 }
 .adm-calendar-cell .adm-calendar-cell-top {
   flex: none;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
 }
 .adm-calendar-cell .adm-calendar-cell-bottom {
   flex: none;
-  font-size: 12px;
+  font-size: var(--adm-font-size-4);
   height: 12px;
   line-height: 12px;
   color: var(--adm-color-weak);
@@ -450,10 +481,10 @@ div.adm-px-tester {
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: solid 1px var(--adm-color-border);
   height: 45px;
   box-sizing: border-box;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   padding: 0 8px;
 }
 .adm-calendar-mark .adm-calendar-mark-cell {
@@ -467,7 +498,7 @@ div.adm-px-tester {
 .adm-capsule-tabs-header {
   position: relative;
   padding: 12px 6px;
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: solid 1px var(--adm-color-border);
 }
 .adm-capsule-tabs-tab-list {
   display: flex;
@@ -491,13 +522,13 @@ div.adm-px-tester {
   margin: 0 auto;
   border-radius: 20px;
   cursor: pointer;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   text-align: center;
   white-space: nowrap;
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-capsule-tabs-tab-active {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
 }
 .adm-capsule-tabs-tab-disabled {
@@ -507,23 +538,6 @@ div.adm-px-tester {
 .adm-capsule-tabs-content {
   padding: 12px;
 }
-.adm-capsule-tabs-header-mask {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  width: 30px;
-  height: 100%;
-  pointer-events: none;
-}
-.adm-capsule-tabs-header-mask-left {
-  left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-}
-.adm-capsule-tabs-header-mask-right {
-  right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
-}
 .adm-scroll-mask {
   position: absolute;
   top: 0;
@@ -535,14 +549,14 @@ div.adm-px-tester {
 }
 .adm-scroll-mask-left {
   left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to right, var(--adm-color-background), rgba(255, 255, 255, 0));
 }
 .adm-scroll-mask-right {
   right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to left, var(--adm-color-background), rgba(255, 255, 255, 0));
 }
 .adm-card {
-  background: #ffffff;
+  background: var(--adm-color-background);
   border-radius: 8px;
   padding: 0 12px;
 }
@@ -555,10 +569,10 @@ div.adm-px-tester {
   padding: 12px 0;
 }
 .adm-card-header:not(:last-child) {
-  border-bottom: solid 0.5px var(--adm-border-color);
+  border-bottom: solid 0.5px var(--adm-color-border);
 }
 .adm-card-header-title {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
   font-weight: bold;
 }
@@ -566,9 +580,9 @@ div.adm-px-tester {
   padding: 12px 0;
 }
 .adm-picker {
-  --header-button-font-size: 15px;
-  --title-font-size: 15px;
-  --item-font-size: 16px;
+  --header-button-font-size: var(--adm-font-size-7);
+  --title-font-size: var(--adm-font-size-7);
+  --item-font-size: var(--adm-font-size-8);
   --item-height: 34px;
   width: 100%;
   height: 300px;
@@ -584,8 +598,8 @@ div.adm-px-tester {
   --item-height: var(---item-height);
 }
 .adm-picker-header {
-  flex: none;
-  border-bottom: solid 1px var(--adm-border-color);
+  flex-shrink: 0;
+  border-bottom: solid 1px var(--adm-color-border);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -604,8 +618,7 @@ div.adm-px-tester {
   flex: 1;
 }
 .adm-picker-body {
-  flex: auto;
-  height: 100%;
+  flex: 1;
   width: 100%;
 }
 .adm-picker-body > .adm-picker-view {
@@ -618,7 +631,7 @@ div.adm-px-tester {
 .adm-picker-view {
   --height: 240px;
   --item-height: 34px;
-  --item-font-size: 16px;
+  --item-font-size: var(--adm-font-size-8);
   height: var(--height);
   width: 100%;
   display: flex;
@@ -712,8 +725,8 @@ div.adm-px-tester {
   height: var(--item-height);
   box-sizing: border-box;
   flex: none;
-  border-top: solid 1px var(--adm-border-color);
-  border-bottom: solid 1px var(--adm-border-color);
+  border-top: solid 1px var(--adm-color-border);
+  border-bottom: solid 1px var(--adm-color-border);
 }
 .adm-picker-view-mask-top {
   background: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);
@@ -725,7 +738,7 @@ div.adm-px-tester {
   --height: auto;
 }
 .adm-cascader-view-tabs.adm-tabs {
-  --title-font-size: 14px;
+  --title-font-size: var(--adm-font-size-6);
   --content-padding: none;
 }
 .adm-cascader-view-header-title {
@@ -744,7 +757,7 @@ div.adm-px-tester {
   --border-top: none;
 }
 .adm-cascader-view-item {
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
 }
 .adm-cascader-view-item-active {
   color: var(--adm-color-primary);
@@ -768,7 +781,7 @@ div.adm-px-tester {
   --width: 60%;
 }
 .adm-tabs {
-  --title-font-size: 17px;
+  --title-font-size: var(--adm-font-size-9);
   --content-padding: 12px;
   --active-line-height: 2px;
   --active-line-border-radius: var(--active-line-height);
@@ -779,7 +792,7 @@ div.adm-px-tester {
 }
 .adm-tabs-header {
   position: relative;
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: solid 1px var(--adm-color-border);
 }
 .adm-tabs-tab-list {
   display: flex;
@@ -836,14 +849,14 @@ div.adm-px-tester {
 }
 .adm-tabs-header-mask-left {
   left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to right, var(--adm-color-background), rgba(255, 255, 255, 0));
 }
 .adm-tabs-header-mask-right {
   right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to left, var(--adm-color-background), rgba(255, 255, 255, 0));
 }
 .adm-check-list-item-extra {
-  font-size: 16px;
+  font-size: var(--adm-font-size-8);
   line-height: 1;
   color: var(--adm-color-primary);
 }
@@ -851,17 +864,17 @@ div.adm-px-tester {
   cursor: unset;
 }
 .adm-list {
-  --header-font-size: 15px;
+  --header-font-size: var(--adm-font-size-7);
   --prefix-width: 'auto';
   --prefix-padding-right: 12px;
   --align-items: center;
-  --active-background-color: var(--adm-border-color);
-  --border-inner: solid 1px var(--adm-border-color);
-  --border-top: solid 1px var(--adm-border-color);
-  --border-bottom: solid 1px var(--adm-border-color);
+  --active-background-color: var(--adm-color-border);
+  --border-inner: solid 1px var(--adm-color-border);
+  --border-top: solid 1px var(--adm-color-border);
+  --border-bottom: solid 1px var(--adm-color-border);
   --padding-left: 12px;
   --padding-right: 12px;
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
 }
 .adm-list-header {
   color: var(--adm-color-weak);
@@ -869,7 +882,7 @@ div.adm-px-tester {
   padding: 8px var(--padding-right) 8px var(--padding-left);
 }
 .adm-list-body {
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   overflow: hidden;
   font-size: var(--font-size);
 }
@@ -893,13 +906,13 @@ div.adm-px-tester {
   display: block;
   padding-left: var(--padding-left);
   position: relative;
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   line-height: 1.5;
 }
 .adm-list-item-title,
 .adm-list-item-description {
   color: var(--adm-color-weak);
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
 }
 .adm-list-item-content {
   display: flex;
@@ -918,9 +931,8 @@ div.adm-px-tester {
   padding: 12px 0;
 }
 .adm-list-item-content-extra {
-  flex: none;
   padding-left: 12px;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   color: var(--adm-color-weak);
 }
 .adm-list-item-content-arrow {
@@ -1004,13 +1016,13 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   padding: 6px 8px;
 }
 .adm-cascader-header-button {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   display: inline-block;
   padding: 4px 4px;
 }
 .adm-cascader-header-title {
   padding: 4px 4px;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   color: var(--adm-color-text);
   text-align: center;
   flex: 1;
@@ -1023,9 +1035,35 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-cascader-body > .adm-cascader-view {
   --height: 310px;
 }
+.adm-center-popup {
+  --background-color: var(--adm-center-popup-background-color, var(--adm-color-background));
+  --border-radius: var(--adm-center-popup-border-radius, 8px);
+  --max-width: var(--adm-center-popup-max-width, 75vw);
+  --min-width: var(--adm-center-popup-min-width, 280px);
+  --z-index: var(--adm-center-popup-z-index, 1000);
+  position: fixed;
+  z-index: var(--z-index);
+}
+.adm-center-popup .adm-center-popup-mask {
+  z-index: 0;
+}
+.adm-center-popup-wrap {
+  position: fixed;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  width: auto;
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  transform: translate(-50%, -50%);
+}
+.adm-center-popup-body {
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
+}
 .adm-checkbox {
   --icon-size: 22px;
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --gap: 8px;
   display: inline-flex;
   vertical-align: text-bottom;
@@ -1066,13 +1104,13 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon.adm-checkbox-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-checkbox .adm-checkbox-custom-icon {
   font-size: var(--icon-size);
 }
 .adm-checkbox.adm-checkbox-indeterminate .adm-checkbox-icon {
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   color: var(--adm-color-primary);
 }
 .adm-checkbox-content {
@@ -1097,27 +1135,15 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-dialog {
   --z-index: var(--adm-dialog-z-index, 1000);
-  position: fixed;
-  z-index: var(--z-index);
+  ---z-index: var(--z-index);
 }
-.adm-dialog .adm-dialog-mask {
-  z-index: 0;
-}
-.adm-dialog-wrap {
-  position: fixed;
-  z-index: 1;
-  top: 50%;
-  left: 50%;
-  width: 75vw;
-  max-width: 500px;
-  transform: translate(-50%, -50%);
+.adm-dialog .adm-center-popup {
+  --z-index: var(---z-index);
 }
 .adm-dialog-body {
   width: 100%;
   max-height: 70vh;
-  font-size: 14px;
-  background-color: white;
-  border-radius: 8px;
+  font-size: var(--adm-font-size-6);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -1131,57 +1157,57 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-dialog-body:not(.adm-dialog-with-image) {
   padding-top: 20px;
 }
-.adm-dialog-body .adm-dialog-image-container {
+.adm-dialog-image-container {
   margin-bottom: 12px;
   max-height: 40vh;
 }
-.adm-dialog-body .adm-dialog-header {
+.adm-dialog-header {
   margin-bottom: 8px;
   padding: 0 12px;
 }
-.adm-dialog-body .adm-dialog-title {
+.adm-dialog-title {
   margin-bottom: 8px;
   padding: 0 12px;
   font-weight: bold;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
   text-align: center;
 }
-.adm-dialog-body .adm-dialog-content {
+.adm-dialog-content {
   padding: 0 12px 20px;
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
-  color: #333;
+  color: var(--adm-color-text);
 }
-.adm-dialog-body .adm-dialog-content-empty {
+.adm-dialog-content-empty {
   padding: 0;
   height: 12px;
 }
-.adm-dialog-body .adm-dialog-footer {
+.adm-dialog-footer {
   user-select: none;
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row {
+.adm-dialog-footer .adm-dialog-action-row {
   display: flex;
   align-items: stretch;
-  border-top: 0.5px solid var(--adm-border-color);
+  border-top: 0.5px solid var(--adm-color-border);
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > * {
+.adm-dialog-footer .adm-dialog-action-row > * {
   flex: 1;
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
   padding: 10px;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
   border-radius: 0;
-  border-right: solid 0.5px var(--adm-border-color);
+  border-right: solid 0.5px var(--adm-color-border);
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
   font-weight: bold;
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
   border-right: none;
 }
 .adm-dialog-image-container {
@@ -1201,7 +1227,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-image-tip {
   position: relative;
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   height: 100%;
   min-height: 24px;
   min-width: 24px;
@@ -1220,7 +1246,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   align-items: center;
   margin: 16px 0;
   border-width: 0;
-  border-color: var(--adm-border-color);
+  border-color: var(--adm-color-border);
   border-style: solid;
   color: var(--adm-color-weak);
   font-size: 14px;
@@ -1252,7 +1278,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   margin: 0 16px;
   vertical-align: middle;
   border-top: 0;
-  border-left: 1px solid var(--adm-border-color);
+  border-left: 1px solid var(--adm-color-border);
 }
 .adm-dropdown {
   background-color: white;
@@ -1262,7 +1288,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   border-bottom: 1px solid transparent;
 }
 .adm-dropdown-open .adm-dropdown-nav {
-  border-bottom-color: var(--adm-border-color);
+  border-bottom-color: var(--adm-color-border);
 }
 .adm-dropdown-item {
   display: flex;
@@ -1276,7 +1302,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   align-items: center;
   position: relative;
   max-width: 100%;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   padding: 12px;
 }
 .adm-dropdown-item .adm-dropdown-item-title-text {
@@ -1345,7 +1371,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-empty-description {
   margin-top: 8px;
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
   color: var(--adm-color-light);
 }
 .adm-error-block {
@@ -1367,13 +1393,13 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   height: 100%;
 }
 .adm-error-block-description {
-  font-size: 12px;
+  font-size: var(--adm-font-size-4);
   color: #999;
   line-height: 1.4;
   margin-top: 12px;
 }
 .adm-error-block-description-title {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
 }
 .adm-error-block-description-subtitle {
   margin-top: 8px;
@@ -1390,11 +1416,11 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-error-block-full-page .adm-error-block-description {
   margin-top: 20px;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
 }
 .adm-error-block-full-page .adm-error-block-description-title {
   font-size: 20px;
-  color: #333;
+  color: var(--adm-color-text);
 }
 .adm-floating-bubble {
   --initial-position-left: var(--initial-position-left);
@@ -1498,9 +1524,9 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   overflow-y: scroll;
 }
 .adm-form {
-  --border-inner: solid 1px var(--adm-border-color);
-  --border-top: solid 1px var(--adm-border-color);
-  --border-bottom: solid 1px var(--adm-border-color);
+  --border-inner: solid 1px var(--adm-color-border);
+  --border-top: solid 1px var(--adm-color-border);
+  --border-bottom: solid 1px var(--adm-color-border);
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
@@ -1528,7 +1554,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
-  color: #666666;
+  color: var(--adm-color-text-secondary);
 }
 .adm-form-item-label .adm-form-item-required-asterisk {
   position: absolute;
@@ -1584,7 +1610,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   align-self: center;
 }
 .adm-form-item.adm-form-item-vertical .adm-form-item-label {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   margin-bottom: 4px;
 }
 .adm-popover {
@@ -1592,6 +1618,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   --background: #ffffff;
   --arrow-size: 8px;
   --content-padding: 8px 12px;
+  color: #333333;
   position: absolute;
   top: 0;
   left: 0;
@@ -1605,7 +1632,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-popover.adm-popover-dark {
   --background: rgba(0, 0, 0, 0.75);
   --adm-color-text: #ffffff;
-  color: white;
+  color: #ffffff;
 }
 .adm-popover.adm-popover-dark .adm-popover-inner {
   box-shadow: none;
@@ -1623,7 +1650,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   background-clip: padding-box;
   border-radius: 8px;
   box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   width: max-content;
   min-width: 32px;
   max-width: calc(100vw - 24px);
@@ -1653,7 +1680,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   color: var(--background);
 }
 .adm-popover-menu {
-  --border-color: var(--adm-border-color);
+  --border-color: #eeeeee;
 }
 .adm-popover-menu.adm-popover {
   --content-padding: 0;
@@ -1721,10 +1748,15 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-image-viewer-content {
   width: 100vw;
   height: 100vh;
-  max-height: -webkit-fill-available;
   touch-action: none;
   user-select: none;
 }
+.adm-image-viewer-footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  z-index: 1;
+}
 .adm-image-viewer-slides {
   height: 100%;
   position: relative;
@@ -1774,14 +1806,11 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   top: 12px;
   transform: translateX(-50%);
   color: #e6e6e6;
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
 }
 .adm-spin-loading {
   --color: var(--adm-color-weak);
   --size: 32px;
-  --pi: 3.14159265;
-  --radius: 15;
-  --circumference: calc(var(--radius) * var(--pi) * 2);
   width: var(--size);
   height: var(--size);
 }
@@ -1897,7 +1926,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 0 0 0 12px;
   font-size: 8px;
-  color: #fff;
+  color: var(--adm-color-white);
   cursor: pointer;
 }
 .adm-image-uploader-cell-delete-icon {
@@ -1911,7 +1940,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   right: 0;
   bottom: 0;
   left: 0;
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: rgba(50, 50, 51, 0.88);
 }
 .adm-image-uploader-cell-loading {
@@ -1926,7 +1955,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-image-uploader-cell-mask-message {
   display: inline-block;
   padding: 6px 4px;
-  font-size: 12px;
+  font-size: var(--adm-font-size-4);
 }
 .adm-image-uploader-cell-image {
   width: var(--cell-size);
@@ -1936,7 +1965,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   position: relative;
 }
 .adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   text-align: center;
   line-height: var(--cell-size);
   display: block;
@@ -1978,8 +2007,8 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   height: 35px;
   padding: 0 12px;
   color: var(--adm-color-weak);
-  font-size: 13px;
-  background-color: #f5f5f5;
+  font-size: var(--adm-font-size-main);
+  background-color: var(--adm-color-box);
 }
 .adm-index-bar-sidebar {
   position: absolute;
@@ -1989,7 +2018,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   z-index: 910;
   overflow: visible;
   color: var(--adm-color-weak);
-  font-size: 12px;
+  font-size: var(--adm-font-size-4);
   user-select: none;
   touch-action: none;
 }
@@ -2026,7 +2055,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   align-items: center;
 }
 .adm-index-bar-sidebar-item-active {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
   border-radius: 50%;
 }
@@ -2045,10 +2074,14 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
+}
+.adm-infinite-scroll-failed-text {
+  display: inline-block;
+  margin-right: 8px;
 }
 .adm-input {
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --text-align: left;
@@ -2133,7 +2166,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-input-clear .antd-mobile-icon {
   display: block;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
 }
 .adm-jumbo-tabs {
   --gap: 8px;
@@ -2142,7 +2175,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-jumbo-tabs-header {
   position: relative;
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: solid 1px var(--adm-color-border);
 }
 .adm-jumbo-tabs-tab-list {
   display: flex;
@@ -2171,7 +2204,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   margin: 0 auto;
   padding: 12px 0;
   cursor: pointer;
-  font-size: 17px;
+  font-size: var(--adm-font-size-9);
   white-space: nowrap;
 }
 .adm-jumbo-tabs-tab-title {
@@ -2184,13 +2217,13 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   border-radius: 10px;
   color: var(--adm-color-weak);
   font-size: var(--adm-font-size-main);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-jumbo-tabs-tab-active {
   color: var(--adm-color-primary);
 }
 .adm-jumbo-tabs-tab-active .adm-jumbo-tabs-tab-description {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
 }
 .adm-jumbo-tabs-tab-disabled {
@@ -2200,48 +2233,17 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-jumbo-tabs-content {
   padding: 12px;
 }
-.adm-jumbo-tabs-header-mask {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  width: 30px;
-  height: 100%;
-  pointer-events: none;
-}
-.adm-jumbo-tabs-header-mask-left {
-  left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-}
-.adm-jumbo-tabs-header-mask-right {
-  right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
-}
 .adm-modal {
   --z-index: var(--adm-modal-z-index, 1000);
-  position: fixed;
-  z-index: var(--z-index);
+  ---z-index: var(--z-index);
 }
-.adm-modal .adm-modal-mask {
-  z-index: 0;
-}
-.adm-modal-wrap {
-  position: fixed;
-  z-index: 1;
-  top: 50%;
-  left: 50%;
-  width: auto;
-  min-width: 280px;
-  max-width: 75vw;
-  transform: translate(-50%, -50%);
+.adm-modal .adm-center-popup {
+  --z-index: var(---z-index);
 }
 .adm-modal-body {
   width: 100%;
   max-height: 70vh;
-  box-sizing: border-box;
-  font-size: 14px;
-  background-color: white;
-  border-radius: 8px;
+  font-size: var(--adm-font-size-6);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -2255,39 +2257,39 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-modal-body:not(.adm-modal-with-image) {
   padding-top: 20px;
 }
-.adm-modal-body .adm-modal-image-container {
+.adm-modal-image-container {
   margin-bottom: 12px;
   max-height: 40vh;
   overflow-y: scroll;
 }
-.adm-modal-body .adm-modal-header {
+.adm-modal-header {
   margin-bottom: 8px;
   padding: 0 12px;
 }
-.adm-modal-body .adm-modal-title {
+.adm-modal-title {
   margin-bottom: 8px;
   padding: 0 12px;
   font-weight: bold;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
   text-align: center;
 }
-.adm-modal-body .adm-modal-content {
+.adm-modal-content {
   padding: 0 12px 12px;
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
-  color: #333;
+  color: var(--adm-color-text);
 }
-.adm-modal-body .adm-modal-close {
+.adm-modal-close {
   position: absolute;
   right: 8px;
   top: 8px;
   color: var(--adm-color-weak);
   padding: 4px;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
 }
 .adm-modal-footer {
   user-select: none;
@@ -2301,7 +2303,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   --gap-vertical: 20px;
 }
 .adm-modal-footer .adm-modal-button {
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
 }
 .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {
@@ -2346,7 +2348,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   margin-right: 4px;
 }
 .adm-nav-bar-left {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -2354,7 +2356,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-nav-bar-title {
   justify-content: center;
   white-space: nowrap;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   padding: 0 12px;
 }
 .adm-nav-bar-right {
@@ -2363,9 +2365,9 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-notice-bar {
   --background-color: #ababab;
   --border-color: #999999;
-  --text-color: #ffffff;
-  --font-size: 15px;
-  --icon-font-size: 18px;
+  --text-color: var(--adm-color-white);
+  --font-size: var(--adm-font-size-7);
+  --icon-font-size: var(--adm-font-size-10);
   --height: 38px;
   height: var(--height);
   box-sizing: border-box;
@@ -2424,7 +2426,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   margin-left: 12px;
 }
 .adm-notice-bar-close-icon {
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
 }
 .adm-number-keyboard-main {
   display: flex;
@@ -2440,7 +2442,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   z-index: 1050;
 }
 .adm-number-keyboard-popup.adm-popup .adm-popup-body {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-number-keyboard-wrapper {
   display: flex;
@@ -2448,7 +2450,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-number-keyboard-header {
   height: 34px;
   line-height: 34px;
-  border-top: solid 1px #f5f5f5;
+  border-top: solid 1px var(--adm-color-border);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -2486,7 +2488,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   height: 48px;
   font-size: 22px;
   box-sizing: border-box;
-  border: solid 1px #f5f5f5;
+  border: solid 1px var(--adm-color-border);
   border-bottom: none;
   border-left: none;
 }
@@ -2516,7 +2518,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   opacity: 0.1;
 }
 .adm-number-keyboard-key.extra-key {
-  border-left: solid 1px #f5f5f5;
+  border-left: solid 1px var(--adm-color-border);
   border-right: none;
 }
 .adm-number-keyboard-key.extra-key,
@@ -2602,7 +2604,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   width: var(--cell-size);
   height: var(--cell-size);
   background: var(--adm-color-white);
@@ -2803,7 +2805,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-radio {
   --icon-size: 22px;
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --gap: 8px;
   display: inline-flex;
   vertical-align: text-bottom;
@@ -2844,7 +2846,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-radio.adm-radio-disabled .adm-radio-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-radio .adm-radio-custom-icon {
   font-size: var(--icon-size);
@@ -2902,14 +2904,14 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-result-title {
   color: var(--adm-color-text);
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 1.4;
   text-align: center;
 }
 .adm-result-description {
   margin-top: 8px;
   color: var(--adm-color-weak);
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   line-height: 1.4;
   text-align: center;
 }
@@ -2931,7 +2933,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-search-bar {
   --height: 32px;
   --padding-left: 8px;
-  --background: #f5f5f5;
+  --background: var(--adm-color-box);
   --border-radius: 6px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
@@ -2953,7 +2955,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
   flex: none;
   color: var(--adm-color-light);
-  font-size: 16px;
+  font-size: var(--adm-font-size-8);
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
   flex: auto;
@@ -2963,7 +2965,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
   --placeholder-color: var(---placeholder-color);
-  --font-size: 15px;
+  --font-size: var(--adm-font-size-7);
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
   line-height: 19px;
@@ -2983,10 +2985,10 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-search-bar-active .adm-search-bar-input-box {
   border-color: var(--adm-color-primary);
-  background: var(--adm-color-white);
+  background: var(--adm-color-background);
 }
 .adm-selector {
-  --color: #f5f5f5;
+  --color: var(--adm-color-box);
   --checked-color: #e7f1ff;
   --text-color: var(--adm-color-text);
   --checked-text-color: var(--adm-color-primary);
@@ -2995,7 +2997,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   --border-radius: 2px;
   --padding: 8px 16px;
   overflow: hidden;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
 }
 .adm-selector .adm-space.adm-space {
@@ -3016,7 +3018,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   vertical-align: top;
 }
 .adm-selector-item-description {
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   color: var(--adm-color-weak);
 }
 .adm-selector-item-active,
@@ -3051,11 +3053,11 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   --height: 100%;
   --width: 105px;
   --item-border-radius: 8px;
-  --background-color: #f5f5f5;
+  --background-color: var(--adm-color-box);
   width: var(--width);
   height: var(--height);
   box-sizing: border-box;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   overflow-y: auto;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
@@ -3093,7 +3095,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-side-bar-item-active {
   color: var(--adm-color-primary);
-  background-color: var(--adm-color-white);
+  background-color: var(--adm-color-background);
   position: relative;
 }
 .adm-side-bar-item-corner {
@@ -3123,7 +3125,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-slider {
   --fill-color: var(--adm-color-primary);
-  padding: 4px 12px;
+  padding: 5px 14px;
   list-style: none;
   user-select: none;
 }
@@ -3133,51 +3135,53 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-slider-track {
   position: relative;
   width: 100%;
-  height: 4px;
-  background-color: #f5f5f5;
+  height: 3px;
+  background-color: var(--adm-color-box);
+  border-radius: 3px;
 }
 .adm-slider-fill {
   position: absolute;
   z-index: 1;
-  height: 4px;
+  height: 3px;
+  border-radius: 3px;
   background-color: var(--fill-color);
 }
 .adm-slider-ticks {
   position: absolute;
   width: 100%;
-  height: 4px;
+  height: 3px;
   background: transparent;
 }
 .adm-slider-tick {
   position: absolute;
-  top: 50%;
-  width: 11px;
-  height: 11px;
-  margin-left: -5px;
-  background-color: #f5f5f5;
+  top: -2px;
+  width: 7px;
+  height: 7px;
+  margin-left: -3px;
+  background-color: var(--adm-color-box);
   border-radius: 50%;
-  transform: translate(0, -50%);
 }
 .adm-slider-tick-active {
   background-color: var(--fill-color);
 }
 .adm-slider-thumb {
-  width: 22px;
-  height: 22px;
-  margin: 5px;
+  width: 28px;
+  height: 28px;
+  margin: 2px;
   border-radius: 50%;
   text-align: center;
-  line-height: 22px;
+  line-height: 28px;
   background: var(--adm-color-white);
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.12), 0 1.5px 3px -2px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12);
+  color: var(--fill-color);
 }
 .adm-slider-thumb:focus {
   outline: none;
 }
 .adm-slider-thumb-icon {
-  width: 10px;
-  height: 10px;
-  margin: 6px;
+  width: 12px;
+  height: 12px;
+  margin: 8px;
   user-select: none;
 }
 .adm-slider-thumb-container {
@@ -3195,15 +3199,15 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   position: relative;
   width: 100%;
   overflow: visible;
-  font-size: 12px;
-  height: 12px;
-  margin-top: 4px;
+  font-size: var(--adm-font-size-3);
+  height: 11px;
+  margin-top: 10px;
 }
 .adm-slider-mark-text {
   position: absolute;
   display: inline-block;
-  line-height: 16px;
-  color: #999;
+  line-height: 1;
+  color: var(--adm-color-text);
   text-align: center;
   word-break: keep-all;
   user-select: none;
@@ -3225,14 +3229,14 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   --input-width: 44px;
   --input-font-size: var(--adm-font-size-main);
   --input-font-color: var(--adm-color-text);
-  --input-background-color: #f5f5f5;
+  --input-background-color: var(--adm-color-box);
   --border-radius: 2px;
   --border: none;
   --border-inner: solid 2px transparent;
   --active-border: var(--border);
-  --button-font-size: 15px;
+  --button-font-size: var(--adm-font-size-7);
   --button-text-color: var(--adm-color-primary);
-  --button-background-color: #f5f5f5;
+  --button-background-color: var(--adm-color-box);
   --button-width: var(--height);
   display: flex;
   align-items: center;
@@ -3335,8 +3339,8 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   color: var(--adm-color-danger);
 }
 .adm-steps {
-  --title-font-size: 13px;
-  --description-font-size: 12px;
+  --title-font-size: var(--adm-font-size-main);
+  --description-font-size: var(--adm-font-size-4);
   --indicator-margin-right: 0;
   --icon-size: 18px;
   width: 100%;
@@ -3429,7 +3433,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   border-radius: 4px;
 }
 .adm-swipe-action {
-  --background: #ffffff;
+  --background: var(--adm-color-background);
   background: var(--background);
   cursor: grab;
   overflow: hidden;
@@ -3570,7 +3574,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   height: var(--height);
   box-sizing: border-box;
   border-radius: 31px;
-  background: #e5e5e5;
+  background: var(--adm-color-border);
   z-index: 0;
   overflow: hidden;
   line-height: var(--height);
@@ -3584,7 +3588,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
   box-sizing: border-box;
-  background: #fff;
+  background: var(--adm-color-background);
   z-index: 1;
   transition: all 200ms;
   transform: scale(1);
@@ -3596,7 +3600,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   width: calc(var(--height) - 2 * var(--border-width));
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
-  background: #fff;
+  background: var(--adm-color-white);
   position: absolute;
   z-index: 2;
   top: var(--border-width);
@@ -3614,7 +3618,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   height: 100%;
   color: var(--adm-color-weak);
   transition: margin 200ms;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
 }
 .adm-switch.adm-switch-checked .adm-switch-checkbox {
   background: var(--checked-color);
@@ -3644,7 +3648,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   justify-content: flex-start;
   align-items: stretch;
   overflow: hidden;
-  min-height: 50px;
+  min-height: 48px;
 }
 .adm-tab-bar-item {
   flex: 1;
@@ -3660,15 +3664,17 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   flex-direction: column;
 }
 .adm-tab-bar-item-icon {
-  font-size: 20px;
-  height: 22px;
+  font-size: 24px;
+  height: 24px;
   line-height: 1;
-  margin: 4px 0 1px;
 }
 .adm-tab-bar-item-title {
-  font-size: 11px;
+  font-size: var(--adm-font-size-3);
   line-height: 15px;
 }
+.adm-tab-bar-item-title-with-icon {
+  margin-top: 2px;
+}
 .adm-tab-bar-item-active {
   color: var(--adm-color-primary);
 }
@@ -3682,7 +3688,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-tag {
   --border-radius: var(--adm-tag-border-radius, 2px);
   padding: 2px 4px;
-  font-size: 11px;
+  font-size: var(--adm-font-size-3);
   line-height: 1;
   font-weight: normal;
   background: var(--background-color);
@@ -3697,7 +3703,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   border-radius: 100px;
 }
 .adm-text-area {
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
@@ -3756,7 +3762,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 .adm-text-area-count {
   text-align: var(--count-text-align);
   color: var(--adm-color-weak);
-  font-size: 17px;
+  font-size: var(--adm-font-size-9);
   padding-top: 8px;
 }
 .adm-toast-mask .adm-toast-wrap {
@@ -3782,7 +3788,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 8px;
   pointer-events: all;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.5;
   box-sizing: border-box;
 }
@@ -3817,7 +3823,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-tree-select-column:first-child,
 .adm-tree-select-multiple-column:first-child {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-tree-select-column:nth-child(2),
 .adm-tree-select-multiple-column:nth-child(2) {
@@ -3856,7 +3862,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   border-radius: 3px;
 }
 .adm-virtual-input {
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
@@ -3951,7 +3957,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
 }
 .adm-virtual-input-clear .antd-mobile-icon {
   display: block;
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
 }
 .adm-water-mark {
   --z-index: var(--adm-water-mark-z-index, 2000);