@nutui/nutui-react 2.6.23 → 3.0.0-beta.0

package/dist/styles/variables-jmapp.scss

@@ -4,8 +4,7 @@ $color-primary: var(--nutui-color-primary) !default;
 $color-primary-stop-1: var(--nutui-color-primary) !default;
 $color-primary-stop-2: var(--nutui-color-primary) !default;
 $color-primary-pressed: var(--nutui-color-primary-pressed) !default;
-$color-primary-disabled: var(--nutui-color-primary-disabled) !default;
-$color-primary-light: var(--nutui-color-primary-light) !default;
+$color-primary-disabled-special: var(--nutui-color-primary-disabled) !default;
 $color-primary-light-pressed: var(--nutui-color-primary-light-pressed) !default;
 $color-primary-gradient-1: linear-gradient(
   135deg,
@@ -48,19 +47,6 @@ $color-danger-disabled: var(--nutui-color-danger-disabled) !default;
 $color-danger-light: var(--nutui-color-danger-light) !default;
 $color-danger-background: var(--nutui-color-danger-background) !default;
 
-// 中性
-$color-dark: var(--nutui-color-dark) !default; // 分隔线
-$color-light: var(--nutui-color-light) !default; // 输入框、头像边框等
-
-// 界面
-$color-surface-1: var(--nutui-color-surface-1) !default; // APP 的框架背景色
-$color-surface-2: var(--nutui-color-surface-2) !default; // 卡片、内容容器背景色
-$color-surface-3: var(
-  --nutui-color-surface-3
-) !default; // 3333	下拉菜单，即时反馈控件背景色
-$color-surface-4: var(--nutui-color-surface-4) !default;
-$color-surface-overlay: var(--nutui-color-surface-overlay) !default; // 	Mask遮罩
-
 // 边框
 $color-border-shade: var(--nutui-color-border-shade) !default;
 $color-border: var(
@@ -87,7 +73,6 @@ $color-text-dark: var(
   --nutui-color-text-dark
 ) !default; //	深色背景下的反向文本色
 $color-text-link: $color-primary !default; //链接文本色
-$color-text-title: $color-title;
 
 // 字号
 $font-h1: var(--nutui-font-h1) !default; //导航栏标题、
@@ -163,15 +148,17 @@ $shadow-overlay: var(--nutui-shadow-overlay) !default;
 
 // ========= nutui 变量 ======== //
 // 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。
-$color-background: $color-surface-1 !default;
+$color-background: var(--nutui-color-surface-1) !default; // APP 的框架背景色
 // 卡片背景色
-$color-background-overlay: $color-surface-2 !default;
+$color-background-overlay: var(
+  --nutui-color-surface-2
+) !default; // 卡片、内容容器背景色
 // 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。
 $color-background-sunken: var(--nutui-gray-2, #f8f8f8) !default;
 
 // 蒙层颜色
 // 页面全局蒙层
-$color-mask: $color-surface-overlay;
+$color-mask: var(--nutui-color-surface-overlay) !default; // 	Mask遮罩
 // 容错蒙层
 $color-mask-part: var(--nutui-black-2, rgba(0, 0, 0, 0.02)) !default;
 
@@ -189,9 +176,9 @@ $font-family:
 // Font
 $font-size-xxs: $font-text-mini !default;
 $font-size-xs: $font-text-xs !default;
-$font-size-small: $font-text-small !default;
+$font-size-s: $font-text-small !default;
 $font-size-base: $font-text !default;
-$font-size-large: $font-text-large !default;
+$font-size-l: $font-text-large !default;
 $font-size-xl: $font-h2 !default;
 $font-size-xxl: var(--nutui-font-size-8) !default;
 $font-size-xxxl: var(--nutui-font-size-10) !default;
@@ -204,10 +191,8 @@ $space-xxl: $spacing-xxl !default;
 // todo
 // 与品牌色一起使用，默认为白色，不区分暗黑与明亮模式。
 $color-primary-text: $color-text-dark !default;
-// 链接色 todo
-$color-text-link: $color-primary !default;
 $white: #ffffff !default;
-$black: $color-text-title !default;
+$black: $color-title !default;
 
 // --- z-index ----
 $mask-z-index: 1000;
@@ -217,9 +202,6 @@ $mask-content-z-index: 1200;
 $animation-duration: 0.25s !default;
 $animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default;
 
-// padding
-$padding-xs: var(--nutui-padding-xs, $spacing-xl) !default;
-
 // button（✅）
 $button-transition: all 0.15s ease-in-out;
 $button-square-border-radius: var(
@@ -279,7 +261,7 @@ $button-large-padding: var(
 ) !default;
 $button-large-font-size: var(
   --nutui-button-large-font-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 $button-large-font-weight: var(
   --nutui-button-large-font-weight,
@@ -311,7 +293,7 @@ $button-mini-padding: var(
 $button-mini-height: var(--nutui-button-mini-height, 24px) !default;
 $button-mini-font-size: var(
   --nutui-button-mini-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $button-mini-border-radius: var(
   --nutui-button-mini-border-radius,
@@ -329,7 +311,7 @@ $button-primary-border-color: var(
 $button-primary-background-color: $color-primary !default;
 $button-primary-disabled: var(
   --nutui-button-primary-disabled,
-  $color-primary-disabled
+  $color-primary-disabled-special
 ) !default;
 
 $button-success-color: var(
@@ -400,14 +382,14 @@ $button-danger-disabled: var(
 $button-text-icon-margin: var(--nutui-button-text-icon-margin, 4px) !default;
 
 // cell（✅）
-$cell-title-color: var(--nutui-cell-title-color, $color-text-title) !default;
+$cell-title-color: var(--nutui-cell-title-color, $color-title) !default;
 $cell-title-font-size: var(
   --nutui-cell-title-font-size,
   $font-size-base
 ) !default;
 $cell-description-font-size: var(
   --nutui-cell-description-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $cell-description-color: var(
   --nutui-cell-description-color,
@@ -425,7 +407,7 @@ $cell-divider-right: var(--nutui-cell-divider-right, 16px) !default;
 $cell-divider-left: var(--nutui-cell-divider-left, 16px) !default;
 $cell-divider-border-bottom: var(
   --nutui-cell-divider-border-bottom,
-  2px solid $color-border
+  1px solid $color-border
 ) !default;
 $cell-background-color: var(--nutui-cell-background-color, $white) !default;
 $cell-box-shadow: var(
@@ -440,7 +422,7 @@ $cell-group-title-padding: var(
 ) !default;
 $cell-group-title-color: var(
   --nutui-cell-group-title-color,
-  $color-text-title
+  $color-title
 ) !default;
 $cell-group-title-font-size: var(
   --nutui-cell-group-title-font-size,
@@ -460,7 +442,7 @@ $cell-group-description-color: var(
 ) !default;
 $cell-group-description-font-size: var(
   --nutui-cell-group-description-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $cell-group-description-line-height: var(
   --nutui-cell-group-description-line-height,
@@ -471,13 +453,13 @@ $cell-group-background-color: var(
   $color-background-overlay
 ) !default;
 
-$cell-group-wrap-margin: var(--nutui-cell-group-wrap-margin, 10px 0) !default;
+$cell-group-wrap-margin: var(--nutui-cell-group-wrap-margin, 10px) !default;
 
 // divider（✅）
 $divider-margin: var(--nutui-divider-margin, 16px 0) !default;
 $divider-text-font-size: var(
   --nutui-divider-text-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $divider-border-color: var(
   --nutui-divider-border-color,
@@ -488,7 +470,6 @@ $divider-line-height: var(--nutui-divider-line-height, 2px) !default;
 $divider-spacing: var(--nutui-divider-spacing, $spacing-base) !default;
 $divider-side-width: var(--nutui-divider-side-width, 16px) !default;
 $divider-vertical-height: var(--nutui-divider-vertical-height, 12px) !default;
-$divider-vertical-top: var(--nutui-divider-vertical-top, 2px) !default;
 $divider-vertical-margin: var(--nutui-divider-vertical-margin, 0 8px) !default;
 
 // icon（✅）
@@ -633,7 +614,7 @@ $textarea-limit-color: var(
 $textarea-text-color: var(--nutui-textarea-text-color, $color-text) !default;
 $textarea-text-curror-color: var(
   --nutui-textarea-text-curror-color,
-  $color-text-title
+  $color-title
 ) !default;
 $textarea-text-line-height: var(
   --nutui-textarea-text-line-height,
@@ -653,7 +634,7 @@ $inputnumber-input-background-color: var(
 ) !default;
 $inputnumber-input-font-color: var(
   --nutui-inputnumber-input-font-color,
-  $color-text-title
+  $color-title
 ) !default;
 $inputnumber-input-font-size: var(
   --nutui-inputnumber-input-font-size,
@@ -695,7 +676,7 @@ $inputnumber-disabled-color: var(
 // actionsheet（✅）
 $actionsheet-background-color: var(
   --nutui-actionsheet-background-color,
-  $color-surface-1
+  $color-background
 ) !default;
 $actionsheet-border-color: var(--nutui-actionsheet-border-color, none) !default;
 $actionsheet-border-radius: var(
@@ -716,7 +697,7 @@ $actionsheet-item-line-height: var(
 ) !default;
 $actionsheet-item-color: var(
   --nutui-actionsheet-item-color,
-  $color-text-title
+  $color-title
 ) !default;
 $actionsheet-item-danger: var(
   --nutui-actionsheet-item-danger,
@@ -745,11 +726,11 @@ $numberkeyboard-padding: var(
 ) !default;
 $numberkeyboard-background-color: var(
   --nutui-numberkeyboard-background-color,
-  $color-surface-1
+  $color-background
 ) !default;
 $numberkeyboard-wrapper-background-color: var(
   --nutui-numberkeyboard-wrapper-background-color,
-  $color-surface-1
+  $color-background
 ) !default;
 $numberkeyboard-header-close-padding: var(
   --nutui-numberkeyboard-header-close-padding,
@@ -801,7 +782,7 @@ $numberkeyboard-key-color: var(
 ) !default;
 $numberkeyboard-key-confirm-font-size: var(
   --nutui-numberkeyboard-key-confirm-font-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 $numberkeyboard-key-confirm-color: var(
   --nutui-numberkeyboard-key-confirm-color,
@@ -814,8 +795,44 @@ $numberkeyboard-key-confirm-background-color: var(
 
 // countdown（✅）
 $countdown-display: var(--nutui-countdown-display, flex) !default;
-$countdown-color: var(--nutui-countdown-color, $color-text-title) !default;
+$countdown-color: var(--nutui-countdown-color, $color-title) !default;
 $countdown-font-size: var(--nutui-countdown-font-size, 14px) !default;
+$coutdown-font-weight: var(--nutui-countdown-font-weight, 400) !default;
+$countdown-height: var(--nutui-countdown-height, 14px) !default;
+$countdown-width: var(--nutui-countdown-width, 20px) !default;
+$countdown-number-padding: var(
+  --nutui-countdown-number-padding,
+  0 1px
+) !default;
+$countdown-number-border-radius: var(
+  --nutui-countdown-number-border-radius,
+  2px
+) !default;
+$countdown-number-margin: var(--nutui-countdown-number-margin, 0 2px) !default;
+$countdown-number-border-color: var(
+  --nutui-countdown-number-border-color,
+  $color-primary-light-pressed
+) !default;
+$countdown-number-color: var(
+  --nutui-countdown-number-color,
+  $color-primary
+) !default;
+$countdown-number-background-color: var(
+  --nutui-countdown-number-background-color,
+  transparent
+) !default;
+$countdown-number-primary-border-color: var(
+  --nutui-countdown-number-primary-border-color,
+  $color-primary
+) !default;
+$countdown-number-primary-color: var(
+  --nutui-countdown-number-primary-color,
+  #ffffff
+) !default;
+$countdown-number-primary-background-color: var(
+  --nutui-countdown-number-primary-background-color,
+  $color-primary
+) !default;
 
 //large price（✅）
 $price-symbol-padding-right: var(
@@ -868,7 +885,7 @@ $switch-close-disabled-background-color: var(
 ) !default;
 $switch-open-disabled-background-color: var(
   --nutui-switch-open-disabled-background-color,
-  $color-primary-disabled
+  $color-primary-disabled-special
 ) !default;
 $switch-close-line-background-color: var(
   --nutui-switch-close-line-bg-color,
@@ -880,6 +897,10 @@ $switch-line-height: var(--nutui-switch-line-height, 24px) !default;
 $switch-border-radius: var(--nutui-switch-border-radius, 24px) !default;
 $switch-inside-width: var(--nutui-switch-inside-width, 20px) !default;
 $switch-inside-height: var(--nutui-switch-inside-height, 20px) !default;
+$switch-inside-border-radius: var(
+  --nutui-switch-inside-border-radius,
+  $radius-s
+) !default;
 $switch-inside-open-transform: var(
   --nutui-switch-inside-open-transform,
   translateX(90%)
@@ -955,7 +976,7 @@ $calendar-active-background-color: var(
 ) !default;
 $calendar-choose-background-color: var(
   --nutui-calendar-choose-background-color,
-  $color-primary-light
+  $color-primary-light-pressed
 ) !default;
 $calendar-choose-color: var(
   --nutui-calendar-choose-color,
@@ -971,7 +992,7 @@ $calendar-disable-color: var(
 ) !default;
 $calendar-base-font-size: var(
   --nutui-calendar-base-font-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 $calendar-title-font-size: var(
   --nutui-calendar-title-font-size,
@@ -997,6 +1018,40 @@ $calendar-day-active-border-radius: var(
   4px
 ) !default;
 
+//hoverbutton
+$hoverbutton-spacing: var(
+  --nutui-hoverbutton-spacing,
+  var(--nutui-spacing-16, 16px)
+) !default;
+$hoverbutton-position-bottom: var(
+  --nutui-hoverbutton-position-bottom,
+  48px
+) !default;
+$hoverbutton-position-right: var(
+  --nutui-hoverbutton-position-right,
+  var(--nutui-spacing-16, 16px)
+) !default;
+$hoverbutton-item-border-color: var(
+  --nutui-hoverbutton-item-border-color,
+  var(--nutui-black-3, rgba(0, 0, 0, 0.06))
+) !default;
+$hoverbutton-item-background: var(
+  --nutui-hoverbutton-item-background,
+  var(--nutui-gray-1, #ffffff)
+) !default;
+$hoverbutton-item-background-active: var(
+  --nutui-hoverbutton-item-background-active,
+  var(--nutui-gray-3, #f6f6f6)
+) !default;
+$hoverbutton-item-icon-color: var(
+  --nutui-hoverbutton-item-icon-color,
+  var(--nutui-gray-7, #1a1a1a)
+) !default;
+$hoverbutton-item-icon-color-active: var(
+  --nutui-hoverbutton-item-icon-color-active,
+  var(--nutui-gray-6, #595959)
+) !default;
+
 //overlay（✅）
 $overlay-bg-color: var(--nutui-overlay-bg-color, $color-mask) !default;
 $overlay-zIndex: var(--nutui-overlay-zIndex, 1000) !default;
@@ -1006,7 +1061,7 @@ $overlay-content-bg-color: var(
 ) !default;
 $overlay-content-color: var(
   --nutui-overlay-content-color,
-  $color-text-title
+  $color-title
 ) !default;
 $overlay-animation-duration: var(
   --nutui-overlay-animation-duration,
@@ -1120,7 +1175,7 @@ $infiniteloading-icon-size: var(
 ) !default;
 
 //range（✅）
-$range-color: var(--nutui-range-color, $color-text-title) !default;
+$range-color: var(--nutui-range-color, $color-title) !default;
 $range-height: var(--nutui-range-height, 2px) !default;
 $range-margin: var(--nutui-range-margin, 15px) !default;
 $range-inactive-color: var(
@@ -1159,7 +1214,7 @@ $steps-base-icon-margin-bottom: var(
 ) !default;
 $steps-base-icon-font-size: var(
   --nutui-steps-base-icon-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $steps-base-line-width: var(--nutui-steps-base-line-width, 70%) !default;
 $steps-base-line-height: var(--nutui-steps-base-line-height, 1px) !default;
@@ -1173,7 +1228,7 @@ $steps-base-title-font-size: var(
 ) !default;
 $steps-base-title-color: var(
   --nutui-steps-base-title-color,
-  $color-text-title
+  $color-title
 ) !default;
 $steps-base-title-margin-bottom: var(
   --nutui-steps-base-title-margin-bottom,
@@ -1181,7 +1236,7 @@ $steps-base-title-margin-bottom: var(
 ) !default;
 $steps-base-description-font-size: var(
   --nutui-steps-base-description-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $steps-base-description-color: var(
   --nutui-steps-base-description-color,
@@ -1233,7 +1288,7 @@ $steps-process-description-color: var(
 ) !default;
 $steps-finish-icon-bg-color: var(
   --nutui-steps-finish-icon-bg-color,
-  $color-primary-light
+  $color-primary-light-pressed
 ) !default;
 $steps-finish-icon-color: var(
   --nutui-steps-finish-icon-color,
@@ -1245,7 +1300,7 @@ $steps-finish-icon-border-color: var(
 ) !default;
 $steps-finish-title-color: var(
   --nutui-steps-finish-title-color,
-  $color-text-title
+  $color-title
 ) !default;
 $steps-finish-description-color: var(
   --nutui-steps-finish-description-color,
@@ -1318,7 +1373,7 @@ $dialog-footer-ok-max-width: var(
 ) !default;
 $dialog-header-font-size: var(
   --nutui-dialog-header-font-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 $dialog-header-font-weight: var(
   --nutui-dialog-header-font-weight,
@@ -1347,7 +1402,7 @@ $checkbox-label-font-size: var(
 ) !default;
 $checkbox-icon-font-size: var(
   --nutui-checkbox-icon-font-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 $checkbox-button-font-size: var(
   --nutui-checkbox-button-font-size,
@@ -1365,7 +1420,7 @@ $checkbox-button-border-radius: var(
 ) !default;
 $checkbox-button-active-border: var(
   --nutui-checkbox-button-active-border,
-  1px solid $color-primary-light
+  1px solid $color-primary-light-pressed
 ) !default;
 $checkbox-button-disabled-active-color: var(
   --nutui-checkbox-button-disabled-active-color,
@@ -1386,10 +1441,7 @@ $checkbox-list-item-padding: var(
 ) !default;
 
 //radio（✅）
-$radio-icon-font-size: var(
-  --nutui-radio-icon-font-size,
-  $font-size-large
-) !default;
+$radio-icon-font-size: var(--nutui-radio-icon-font-size, $font-size-l) !default;
 $radio-label-color: var(--nutui-radio-label-color, $color-text) !default;
 $radio-label-disable-color: var(
   --nutui-radio-label-disable-color,
@@ -1416,7 +1468,7 @@ $radio-button-background: var(
 ) !default;
 $radio-button-active-border: var(
   --nutui-radio-button-active-border,
-  1px solid $color-primary-light
+  1px solid $color-primary-light-pressed
 ) !default;
 $radio-button-disabled-active-color: var(
   --nutui-radio-button-disabled-active-color,
@@ -1474,10 +1526,7 @@ $noticebar-background: var(
   rgba(251, 248, 220, 1)
 ) !default;
 $noticebar-color: var(--nutui-noticebar-color, #d9500b) !default;
-$noticebar-font-size: var(
-  --nutui-noticebar-font-size,
-  $font-size-small
-) !default;
+$noticebar-font-size: var(--nutui-noticebar-font-size, $font-size-s) !default;
 $noticebar-line-height: var(--nutui-noticebar-line-height, 24px) !default;
 $noticebar-box-padding: var(
   --nutui-noticebar-box-padding,
@@ -1500,7 +1549,7 @@ $timeselect-date-width: var(--nutui-timeselect-date-width, 140px) !default;
 $timeselect-date-height: var(--nutui-timeselect-date-height, 40px) !default;
 $timeselect-date-active-color: var(
   --nutui-timeselect-date-active-color,
-  $color-text-title
+  $color-title
 ) !default;
 $timeselect-time-width: var(--nutui-timeselect-time-width, 100px) !default;
 $timeselect-time-height: var(--nutui-timeselect-time-height, 50px) !default;
@@ -1520,10 +1569,7 @@ $tag-border-radius: var(--nutui-tag-border-radius, $radius-xs) !default;
 $tag-height: var(--nutui-tag-height, 20px) !default;
 $tag-color: var(--nutui-tag-color, $color-text-dark) !default;
 $tag-border-width: var(--nutui-tag-border-width, 1px) !default;
-$tag-background-color: var(
-  --nutui-tag-background-color,
-  $color-text-title
-) !default;
+$tag-background-color: var(--nutui-tag-background-color, $color-title) !default;
 $tag-primary-background-color: var(
   --nutui-tag-primary-background-color,
   $color-primary
@@ -1619,7 +1665,7 @@ $progress-text-color: var(
 ) !default;
 $progress-text-background: var(
   --nutui-progress-text-background,
-  $progress-color
+  #ff0f23
 ) !default;
 $progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
 $progress-text-font-size: var(--nutui-progress-text-font-size, 9px) !default;
@@ -1638,6 +1684,7 @@ $progress-text-border-radius: var(
 
 //pagination（✅）
 $pagination-color: var(--nutui-pagination-color, $color-primary) !default;
+$pagination-lite-color: var(--nutui-pagination-lite-color, $white) !default;
 $pagination-font-size: var(
   --nutui-pagination-font-size,
   $font-size-base
@@ -1712,7 +1759,7 @@ $tabs-titles-item-active-font-weight: var(
 ) !default;
 $tabs-titles-item-active-font-size: var(
   --nutui-tabs-titles-item-active-font-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 $tabs-titles-item-active-background-color: var(
   --nutui-tabs-titles-item-active-background-color,
@@ -1733,7 +1780,7 @@ $tabs-tab-button-border-radius: var(
 ) !default;
 $tabs-tab-button-active-background-color: var(
   --nutui-tabs-button-active-background-color,
-  $color-primary-light
+  $color-primary-light-pressed
 ) !default;
 $tabs-tab-button-active-border: var(
   --nutui-tabs-button-active-border,
@@ -1749,7 +1796,11 @@ $tabs-vertical-titles-item-height: var(
 ) !default;
 $tabs-vertical-tab-line-color: var(
   --nutui-tabs-vertical-tab-line-color,
-  linear-gradient(180deg, $color-primary-stop-1 0%, $color-primary-light 100%)
+  linear-gradient(
+    180deg,
+    $color-primary-stop-1 0%,
+    $color-primary-light-pressed 100%
+  )
 ) !default;
 $tabs-vertical-tab-line-width: var(
   --nutui-tabs-vertical-tab-line-width,
@@ -1796,7 +1847,7 @@ $menu-title-font-size: var(
   --nutui-menu-title-font-size,
   $font-size-base
 ) !default;
-$menu-title-color: var(--nutui-menu-title-color, $color-text-title) !default;
+$menu-title-color: var(--nutui-menu-title-color, $color-title) !default;
 $menu-container-z-index: var(--nutui-menu-container-z-index, 1000) !default;
 $menu-content-padding: var(--nutui-menu-content-padding, 12px 24px) !default;
 $menu-content-max-height: var(--nutui-menu-content-max-height, 214px) !default;
@@ -1832,10 +1883,7 @@ $collapse-item-padding: var(
   --nutui-collapse-item-padding,
   $spacing-xxl $spacing-l
 ) !default;
-$collapse-item-color: var(
-  --nutui-collapse-item-color,
-  $color-text-title
-) !default;
+$collapse-item-color: var(--nutui-collapse-item-color, $color-title) !default;
 $collapse-item-disabled-color: var(
   --nutui-collapse-item-disabled-color,
   $color-text-disabled
@@ -1878,9 +1926,9 @@ $searchbar-width: var(--nutui-searchbar-width, 100%) !default;
 $searchbar-padding: var(--nutui-searchbar-padding, 8px 10px) !default;
 $searchbar-background: var(
   --nutui-searchbar-background,
-  $color-surface-2
+  $color-background-overlay
 ) !default;
-$searchbar-color: var(--nutui-searchbar-color, $color-text-title) !default;
+$searchbar-color: var(--nutui-searchbar-color, $color-title) !default;
 $searchbar-gap: var(--nutui-searchbar-gap, 16px) !default;
 $searchbar-font-size: var(
   --nutui-searchbar-font-size,
@@ -1913,7 +1961,7 @@ $searchbar-input-text-color: var(
 ) !default;
 $searchbar-input-curror-color: var(
   --nutui-searchbar-input-curror-color,
-  $color-text-title
+  $color-title
 ) !default;
 $searchbar-input-text-align: var(
   --nutui-searchbar-input-text-align,
@@ -1965,10 +2013,7 @@ $cascader-bar-font-size: var(
   $font-size-xl
 ) !default;
 $cascader-bar-line-height: var(--nutui-cascader-bar-line-height, 20px) !default;
-$cascader-bar-color: var(
-  --nutui-cascader-bar-color,
-  $color-text-title
-) !default;
+$cascader-bar-color: var(--nutui-cascader-bar-color, $color-title) !default;
 $cascader-item-height: var(--nutui-cascader-item-height, 40px) !default;
 $cascader-item-padding: var(--nutui-cascader-item-padding, 10px 20px) !default;
 $cascader-item-margin: var(--nutui-cascader-item-margin, 0px) !default;
@@ -1976,10 +2021,7 @@ $cascader-item-border-bottom: var(
   --nutui-cascader-item-border-bottom,
   0px solid $color-border
 ) !default;
-$cascader-item-color: var(
-  --nutui-cascader-item-color,
-  $color-text-title
-) !default;
+$cascader-item-color: var(--nutui-cascader-item-color, $color-title) !default;
 $cascader-item-font-size: var(
   --nutui-cascader-item-font-size,
   $font-size-base
@@ -2067,13 +2109,10 @@ $grid-item-content-bg-color: var(
   $white
 ) !default;
 $grid-item-text-margin: var(--nutui-grid-item-text-margin, 8px) !default;
-$grid-item-text-color: var(
-  --nutui-grid-item-text-color,
-  $color-text-title
-) !default;
+$grid-item-text-color: var(--nutui-grid-item-text-color, $color-title) !default;
 $grid-item-text-font-size: var(
   --nutui-grid-item-text-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 
 // table（✅）
@@ -2099,7 +2138,7 @@ $navbar-height: var(--nutui-navbar-height, 44px) !default;
 $navbar-margin-bottom: var(--nutui-navbar-margin-bottom, 20px) !default;
 $navbar-background: var(--nutui-navbar-background, $white) !default;
 $navbar-box-shadow: var(--nutui-navbar-box-shadow, 0px) !default;
-$navbar-color: var(--nutui-navbar-color, $color-text-title) !default;
+$navbar-color: var(--nutui-navbar-color, $color-title) !default;
 $navbar-font-size: var(--nutui-navbar-font-size, $font-size-base) !default;
 $navbar-title-font-size: var(--nutui-navbar-title-font-size, $font-h1) !default;
 $navbar-title-font-weight: var(
@@ -2108,7 +2147,7 @@ $navbar-title-font-weight: var(
 ) !default;
 $navbar-title-font-color: var(
   --nutui-navbar-title-font-color,
-  $color-text-title
+  $color-title
 ) !default;
 
 // sidenavbar（✅）
@@ -2127,7 +2166,7 @@ $sidenavbar-title-background: var(
 ) !default;
 $sidenavbar-title-color: var(
   --nutui-sidenavbar-title-color,
-  $color-text-title
+  $color-title
 ) !default;
 // subsidenavbar（✅）
 $sidenavbar-sub-title-padding: var(
@@ -2140,7 +2179,7 @@ $sidenavbar-sub-title-background: var(
 ) !default;
 $sidenavbar-sub-title-color: var(
   --nutui-sidenavbar-sub-title-color,
-  $color-text-title
+  $color-title
 ) !default;
 // sidenavbaritem（✅）
 $sidenavbar-sub-item-color: var(
@@ -2164,12 +2203,9 @@ $sidenavbar-sub-list-color: var(
 $elevator-list-bg-color: var(--nutui-elevator-list-bg-color, $white) !default;
 $elevator-list-font-size: var(
   --nutui-elevator-list-font-size,
-  $font-size-small
-) !default;
-$elevator-list-color: var(
-  --nutui-elevator-list-color,
-  $color-text-title
+  $font-size-s
 ) !default;
+$elevator-list-color: var(--nutui-elevator-list-color, $color-title) !default;
 $elevator-list-item-padding: var(
   --nutui-elevator-list-item-padding,
   0 20px
@@ -2188,7 +2224,7 @@ $elevator-list-item-code-font-size: var(
 ) !default;
 $elevator-list-item-code-color: var(
   --nutui-elevator-list-item-code-color,
-  $color-text-title
+  $color-title
 ) !default;
 $elevator-list-item-code-font-weight: var(
   --nutui-elevator-list-item-code-font-weight,
@@ -2327,11 +2363,11 @@ $circleprogress-path-color: var(
 ) !default;
 $circleprogress-text-color: var(
   --nutui-circleprogress-text-color,
-  $color-text-title
+  $color-title
 ) !default;
 $circleprogress-text-size: var(
   --nutui-circleprogress-text-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 
 // Ellipsis
@@ -2357,7 +2393,7 @@ $countup-base-size: var(--nutui-countup-base-size, 18px) !default;
 $countup-border-radius: var(--nutui-countup-border-radius, 4px) !default;
 $countup-lr-margin: var(--nutui-countup-lr-margin, 0) !default;
 $countup-bg-color: var(--nutui-countup-bg-color, inherit) !default;
-$countup-color: var(--nutui-countup-color, $color-text-title) !default;
+$countup-color: var(--nutui-countup-color, $color-title) !default;
 
 // layout（✅）
 $row-content-color: var(--nutui-row-content-color, #fff) !default;
@@ -2390,6 +2426,42 @@ $space-gap: var(--nutui-space-gap, 8px) !default;
 
 // loading
 $loading-icon-color: var(--nutui-loading-icon-color, $color-text-help) !default;
-$loading-icon-size: var(--nutui-loading-icon-size, $font-size-small) !default;
+$loading-icon-size: var(--nutui-loading-icon-size, $font-size-s) !default;
 $loading-color: var(--nutui-loading-color, $color-text-help) !default;
-$loading-font-size: var(--nutui-loading-font-size, $font-size-small) !default;
+$loading-font-size: var(--nutui-loading-font-size, $font-size-s) !default;
+
+// ResultPage
+$resultpage-width: var(--nutui-resultpage-width, 247px) !default;
+$resultpage-icon-size: var(--nutui-resultpage-icon-size, 48px) !default;
+$resultpage-icon-margin-bottom: var(
+  --nutui-resultpage-icon-margin-bottom,
+  16px
+) !default;
+$resultpage-title-margin-bottom: var(
+  --nutui-resultpage-title-margin-bottom,
+  9px
+) !default;
+$resultpage-title-font-size: var(
+  --nutui-resultpage-title-font-size,
+  $font-size-xl
+) !default;
+$resultpage-title-color: var(
+  --nutui-resultpage-title-color,
+  $color-title
+) !default;
+$resultpage-description-font-size: var(
+  --nutui-resultpage-description-font-size,
+  $font-size-base
+) !default;
+$resultpage-description-color: var(
+  --nutui-resultpage-description-color,
+  $color-text
+) !default;
+$resultpage-description-line-height: var(
+  --nutui-resultpage-description-line-height,
+  20px
+) !default;
+$resultpage-actions-margin-top: var(
+  --nutui-resultpage-actions-margin-top,
+  21px
+) !default;