@nutui/nutui-react 2.0.0-alpha.9 → 2.0.0-beta.1

package/dist/styles/variables-jmapp.scss

@@ -252,6 +252,8 @@ $cell-description-font: var(
   $font-size-2
 ) !default;
 $cell-description-color: var(--nutui-cell-extra-color, $disable-color) !default;
+$cell-extra-font-size: var(--nutui-cell-extra-font-size, $font-size-2) !default;
+$cell-extra-color: var(--nutui-cell-extra-color, $gray2) !default;
 $cell-subtitle-color: var(--nutui-cell-description-color, $gray2) !default;
 $cell-border-radius: var(--nutui-cell-border-radius, 4px) !default;
 $cell-padding: var(--nutui-cell-padding, 16px 16px) !default;
@@ -418,8 +420,8 @@ $uploader-preview-close-top: var(
   0px
 ) !default;
 // picker（✅）（todo:react版本picker组件dom元素类名变化较大，picker.scss暂不改动）
-$picker-cancel-color: var(--nutui-picker-cancel-color, #808080) !default;
-$picker-ok-color: var(--nutui-picker-ok-color, $primary-color) !default;
+$picker-bar-cancel-color: var(--nutui-picker-cancel-color, #808080) !default;
+$picker-bar-ok-color: var(--nutui-picker-ok-color, $primary-color) !default;
 $picker-bar-cancel-font-size: var(
   --nutui-picker-bar-cancel-font-size,
   14px
@@ -478,13 +480,12 @@ $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 // textarea（✅）
 
 $textarea-font: var(--nutui-textarea-font, $font-size-2) !default;
-$textarea-height: var(--nutui-textarea-height, 100px) !default;
 $textarea-padding: var(--nutui-textarea-padding, 10px 25px) !default;
 $textarea-limit-color: var(--nutui-textarea-limit-color, $text-color) !default;
 $textarea-text-color: var(--nutui-textarea-text-color, $title-color) !default;
 $textarea-text-curror-color: var(
   --nutui-textarea-text-curror-color,
-  '$title-color'
+  $title-color
 ) !default;
 $textarea-text-line-height: var(
   --nutui-textarea-text-line-height,
@@ -556,37 +557,30 @@ $inputnumber-border-box: var(
 $inputnumber-display: var(--nutui-inputnumber-display, flex) !default;
 
 // actionsheet（✅）
-$zindex-actionsheet: var(--nutui-zindex-actionsheet, 10001) !default;
-$body-background: var(--nutui-body-background, #f6f6f6) !default;
-$light-color: var(--nutui-light-color, #f6f6f6) !default;
-$actionsheet-light-color: var(
-  --nutui-actionsheet-light-color,
+$actionsheet-border-color: var(
+  --nutui-actionsheet-border-color,
   #f6f6f6
 ) !default;
+$actionsheet-item-text-align: var(
+  --nutui-actionsheet-item-text-align,
+  center
+) !default;
 $actionsheet-item-border-bottom: var(
   --nutui-actionsheet-item-border-bottom,
   none
 ) !default;
-$actionsheet-item-font-size: var(
-  --nutui-actionsheet-item-font-size,
-  $font-size-2
-) !default;
-$actionsheet-item-subdesc-font-size: var(
-  --nutui-actionsheet-item-subdesc-font-size,
-  $font-size-1
-) !default;
-$actionsheet-item-cancel-border-top: var(
-  --nutui-actionsheet-item-cancel-border-top,
-  1px solid $actionsheet-light-color
-) !default;
 $actionsheet-item-line-height: var(
   --nutui-actionsheet-item-line-height,
   24px
 ) !default;
-$actionsheet-item-font-color: var(
-  --nutui-actionsheet-item-font-color,
+$actionsheet-item-color: var(
+  --nutui-actionsheet-item-color,
   $title-color
 ) !default;
+$actionsheet-item-danger: var(
+  --nutui-actionsheet-item-danger,
+  $primary-color
+) !default;
 
 //shortpassword（✅）
 $shortpassword-background-color: var(
@@ -688,8 +682,8 @@ $numberkeyboard-key-confirm-background-color: var(
 
 // countdown（✅）
 $countdown-display: var(--nutui-countdown-display, flex) !default;
-$countdown-color: var(--nutui-countdown-color, inherit) !default;
-$countdown-font-size: var(--nutui-countdown-font-size, initial) !default;
+$countdown-color: var(--nutui-countdown-color, $gray1) !default;
+$countdown-font-size: var(--nutui-countdown-font-size, 14px) !default;
 
 //large price（✅）
 $price-symbol-padding-right: var(
@@ -766,52 +760,53 @@ $toast-inner-border-radius: var(
   12px
 ) !default;
 $toast-cover-bg-color: var(--nutui-toast-cover-bg-color, $gray7) !default;
+$toast-inner-top: var(--nutui-toast-inner-top, 50%) !default;
+$toast-inner-text-align: var(--nutui-toast-inner-text-align, 'center') !default;
 
 //backtop（✅）
 $backtop-border-color: var(--nutui-backtop-border-color, #e0e0e0) !default;
 
 // calendar（✅）
-$calendar-primary-color: var(
-  --nutui-calendar-primary-color,
+$calendar-active-background-color: var(
+  --nutui-calendar-active-background-color,
   $primary-color
 ) !default;
+$calendar-choose-background-color: var(
+  --nutui-calendar-choose-background-color,
+  rgba(#fa2c19, 0.09)
+) !default;
 $calendar-choose-color: var(
   --nutui-calendar-choose-color,
-  rgba($primary-color, 0.09)
-) !default;
-$calendar-choose-font-color: var(
-  --nutui-calendar-choose-font-color,
   $primary-color
 ) !default;
-$calendar-base-color: var(--nutui-calendar-base-color, #333333) !default;
 $calendar-disable-color: var(--nutui-calendar-disable-color, #d1d0d0) !default;
-$calendar-base-font: var(--nutui-calendar-base-font, $font-size-3) !default;
-$calendar-title-font: var(--nutui-calendar-title-font, $font-size-4) !default;
+$calendar-base-font-size: var(
+  --nutui-calendar-base-font-size,
+  $font-size-3
+) !default;
+$calendar-title-font-size: var(
+  --nutui-calendar-title-font-size,
+  $font-size-4
+) !default;
 $calendar-title-font-weight: var(
   --nutui-calendar-title-font-weight,
   500
 ) !default;
-$calendar-sub-title-font: var(
-  --nutui-calendar-sub-title-font,
+$calendar-sub-title-font-size: var(
+  --nutui-calendar-sub-title-font-size,
   $font-size-2
 ) !default;
-$calendar-text-font: var(--nutui-calendar-text-font, $font-size-1) !default;
-$calendar-day-font: var(--nutui-calendar-day-font, 16px) !default;
-$calendar-day-active-border-radius: var(
-  --nutui-calendar-day-active-border-radius,
-  0px
+$calendar-day67-color: var(
+  --nutui-calendar-day67-color,
+  $primary-color
 ) !default;
+$calendar-header-height: var(--nutui-calendar-header-height, 24px) !default;
 $calendar-day-width: var(--nutui-calendar-day-width, 14.28%) !default;
-$calendar-day-height: var(--nutui-calendar-day-height, 64px) !default;
+$calendar-day-height: var(--nutui-calendar-day-height, 60px) !default;
 $calendar-day-font-weight: var(--nutui-calendar-day-font-weight, 500) !default;
-$calendar-day67-font-color: var(
-  --nutui-calendar-day67-font-color,
-  $primary-color
-) !default;
-$calendar-top-slot-height: var(--nutui-calendar-top-slot-height, 24px) !default;
-$calendar-month-title-font-size: var(
-  --nutui-calendar-month-title-font-size,
-  inherit
+$calendar-day-active-border-radius: var(
+  --nutui-calendar-day-active-border-radius,
+  4px
 ) !default;
 
 //overlay（✅）
@@ -913,59 +908,18 @@ $range-button-border: var(
 ) !default;
 
 //swiper（✅）
-$swiper-pagination-bottom: var(--nutui-swiper-pagination-bottom, 12px);
-$swiper-pagination-item-background-color: var(
-  --nutui-swiper-pagination-item-background-color,
+$swiper-indicator-bottom: var(--nutui-swiper-indicator-bottom, 12px);
+$swiper-indicator-item-background-color: var(
+  --nutui-swiper-indicator-item-background-color,
   #ddd
 ) !default;
 
 //address
-$address-region-tab-line: linear-gradient(
+$address-tab-line-background: linear-gradient(
   90deg,
   $primary-color 0%,
   $primary-color-end 100%
 ) !default;
-$address-icon-color: var(--nutui-address-icon-color, $primary-color) !default;
-$address-header-title-font-size: var(
-  --nutui-address-header-title-font-size,
-  18px
-) !default;
-$address-header-title-color: var(
-  --nutui-address-header-title-color,
-  #262626
-) !default;
-$address-region-tab-font-size: var(
-  --nutui-address-region-tab-font-size,
-  13px
-) !default;
-$address-region-tab-color: var(
-  --nutui-address-region-tab-color,
-  #1d1e1e
-) !default;
-$address-region-tab-active-item-font-weight: var(
-  --nutui-address-region-tab-active-item-font-weight,
-  bold
-) !default;
-$address-region-tab-line-border-radius: var(
-  --nutui-address-region-tab-line-border-radius,
-  0
-) !default;
-$address-region-tab-line-opacity: var(
-  --nutui-address-region-tab-line-opacity,
-  1
-) !default;
-$address-region-item-color: var(
-  --nutui-address-region-item-color,
-  #333
-) !default;
-$address-region-item-font-size: var(
-  --nutui-address-region-item-font-size,
-  $font-size-1
-) !default;
-$address-item-margin-right: var(
-  --nutui-address-item-margin-right,
-  9px
-) !default;
 
 //steps（✅）
 $steps-base-icon-width: var(--nutui-steps-base-icon-width, 25px) !default;
@@ -1000,12 +954,12 @@ $steps-base-title-margin-bottom: var(
   --nutui-steps-base-title-margin-bottom,
   10px
 ) !default;
-$steps-base-content-font-size: var(
-  --nutui-steps-base-content-font-size,
+$steps-base-description-font-size: var(
+  --nutui-steps-base-description-font-size,
   12px
 ) !default;
 $steps-base-content-color: var(
-  --nutui-steps-base-content-color,
+  --nutui-steps-base-description-color,
   $title-color2
 ) !default;
 
@@ -1014,17 +968,12 @@ $steps-wait-icon-bg-color: var(
   #959fb1
 ) !default;
 $steps-wait-icon-color: var(--nutui-steps-wait-icon-color, $white) !default;
-$steps-wait-head-color: var(--nutui-steps-wait-head-color, #909ca4) !default;
-$steps-wait-head-border-color: var(
-  --nutui-steps-wait-head-border-color,
-  #909ca4
-) !default;
 $steps-wait-title-color: var(
   --nutui-steps-wait-title-color,
   $title-color2
 ) !default;
 $steps-wait-content-color: var(
-  --nutui-steps-wait-content-color,
+  --nutui-steps-wait-description-color,
   $title-color2
 ) !default;
 $steps-process-icon-bg-color: var(
@@ -1035,14 +984,6 @@ $steps-process-icon-color: var(
   --nutui-steps-process-icon-color,
   $white
 ) !default;
-$steps-process-head-color: var(
-  --nutui-steps-process-head-color,
-  $primary-color
-) !default;
-$steps-process-head-border-color: var(
-  --nutui-steps-process-head-border-color,
-  $primary-color
-) !default;
 $steps-process-title-color: var(
   --nutui-steps-process-title-color,
   $primary-color
@@ -1056,7 +997,7 @@ $steps-process-title-font-weight: var(
   400
 ) !default;
 $steps-process-content-color: var(
-  --nutui-steps-process-content-color,
+  --nutui-steps-process-description-color,
   $title-color2
 ) !default;
 
@@ -1068,20 +1009,12 @@ $steps-finish-icon-color: var(
   --nutui-steps-finish-icon-color,
   $primary-color
 ) !default;
-$steps-finish-head-color: var(
-  --nutui-steps-finish-head-color,
-  $primary-color
-) !default;
-$steps-finish-head-border-color: var(
-  --nutui-steps-finish-head-border-color,
-  $primary-color
-) !default;
 $steps-finish-title-color: var(
   --nutui-steps-finish-title-color,
   $primary-color
 ) !default;
 $steps-finish-content-color: var(
-  --nutui-steps-finish-content-color,
+  --nutui-steps-finish-description-color,
   $title-color2
 ) !default;
 $steps-finish-line-background: var(
@@ -1095,6 +1028,7 @@ $steps-dot-icon-border: var(
   --nutui-steps-dot-icon-border,
   2px solid $primary-text-color
 ) !default;
+$steps-dot-head-margin: var(--nutui-steps-dot-head-margin, 7px 0 0 0) !default;
 
 // dialog（✅）
 $dialog-width: var(--nutui-dialog-width, 296px) !default;
@@ -1122,8 +1056,15 @@ $dialog-content-line-height: var(
   --nutui-dialog-content-line-height,
   16px
 ) !default;
-$dialog-mask-z-index: var(--nutui-dialog-mask-z-index, $mask-z-index) !default;
-$dialog-mask-background-color: var(
+$dialog-content-text-align: var(
+  --nutui-dialog-content-text-align,
+  center
+) !default;
+$dialog-overlay-z-index: var(
+  --nutui-dialog-mask-z-index,
+  $mask-z-index
+) !default;
+$dialog-overlay-background-color: var(
   --nutui-dialog-mask-background-color,
   $mask-color
 ) !default;
@@ -1272,10 +1213,7 @@ $noticebar-right-icon-width: var(
   16px
 ) !default;
 $noticebar-box-padding: var(--nutui-noticebar-box-padding, 0 16px) !default;
-$noticebar-wrapable-padding: var(
-  --nutui-noticebar-wrapable-padding,
-  16px
-) !default;
+$noticebar-wrap-padding: var(--nutui-noticebar-wrapable-padding, 16px) !default;
 $noticebar-lefticon-margin: var(
   --nutui-noticebar-lefticon-margin,
   0px 10px
@@ -1286,121 +1224,84 @@ $noticebar-righticon-margin: var(
 ) !default;
 
 // TimeSelect（✅）
-$timeselect-title-font-size: var(
-  --nutui-timeselect-title-font-size,
-  $font-size-2
-) !default;
-$timeselect-title-color: var(
-  --nutui-timeselect-title-color,
-  $title-color
-) !default;
-$timeselect-title-width: var(--nutui-timeselect-title-width, 100%) !default;
 $timeselect-title-height: var(--nutui-timeselect-title-height, 50px) !default;
 $timeselect-title-line-height: var(
   --nutui-timeselect-title-line-height,
   50px
 ) !default;
-$timeselect-pannel-bg-color: var(
-  --nutui-timeselect-pannel-bg-color,
-  #f6f7f9
-) !default;
-
-// TimePannel（✅）
-$timeselect-timepannel-text-color: var(
-  --nutui-timeselect-timepannel-text-color,
-  $title-color2
+$timeselect-title-color: var(
+  --nutui-timeselect-title-color,
+  $title-color
 ) !default;
-$timeselect-timepannel-font-size: var(
-  --nutui-timeselect-timepannel-font-size,
+$timeselect-title-font-size: var(
+  --nutui-timeselect-title-font-size,
   $font-size-2
 ) !default;
-$timeselect-timepannel-cur-bg-color: var(
-  --nutui-timeselect-timepannel-cur-bg-color,
-  $white
-) !default;
-$timeselect-timepannel-cur-text-color: var(
-  --nutui-timeselect-timepannel-cur-text-color,
-  #333333
-) !default;
-$timeselect-timepannel-width: var(
-  --nutui-timeselect-timepannel-width,
-  140px
+$timeselect-title-background: var(
+  --nutui-timeselect-title-background,
+  $background-color3
 ) !default;
-$timeselect-timepannel-height: var(
-  --nutui-timeselect-timepannel-height,
+
+$timeselect-date-width: var(--nutui-timeselect-date-width, 140px) !default;
+$timeselect-date-height: var(--nutui-timeselect-date-height, 40px) !default;
+$timeselect-date-line-height: var(
+  --nutui-timeselect-date-line-height,
   40px
 ) !default;
-$timeselect-timepannel-padding: var(
-  --nutui-timeselect-timepannel-padding,
-  15px
-) !default;
-
-// TimeDetail（✅）
-$timeselect-timedetail-padding: var(
-  --nutui-timeselect-timedetail-padding,
-  0 5px 50px 13px
+$timeselect-date-color: var(
+  --nutui-timeselect-date-color,
+  $title-color2
 ) !default;
-$timeselect-timedetail-item-width: var(
-  --nutui-timeselect-timedetail-item-width,
-  100px
+$timeselect-date-active-color: var(
+  --nutui-timeselect-date-active-color,
+  $title-color
 ) !default;
-$timeselect-timedetail-item-height: var(
-  --nutui-timeselect-timedetail-item-height,
-  50px
+$timeselect-date-font-size: var(
+  --nutui-timeselect-date-font-size,
+  $font-size-2
 ) !default;
-$timeselect-timedetail-item-line-height: var(
-  --nutui-timeselect-timedetail-item-line-height,
+
+$timeselect-time-width: var(--nutui-timeselect-time-width, 100px) !default;
+$timeselect-time-height: var(--nutui-timeselect-time-height, 50px) !default;
+$timeselect-time-line-height: var(
+  --nutui-timeselect-time-line-height,
   50px
 ) !default;
-$timeselect-timedetail-item-bg-color: var(
-  --nutui-timeselect-timedetail-item-bg-color,
-  #f6f7f9
-) !default;
-$timeselect-timedetail-item-border-radius: var(
-  --nutui-timeselect-timedetail-item-border-radius,
-  5px
+$timeselect-time-font-size: var(--nutui-timeselect-font-size, 14px) !default;
+$timeselect-time-margin: var(
+  --nutui-timeselect-time-margin,
+  0 10px 10px 0
 ) !default;
-$timeselect-timedetail-item-text-color: var(
-  --nutui-timeselect-timedetail-item-text-color,
-  #333333
-) !default;
-$timeselect-timedetail-item-text-font-size: var(
-  --nutui-timeselect-timedetail-item-text-font-size,
-  $font-size-2
-) !default;
-$timeselect-timedetail-item-cur-bg-color: var(
-  --nutui-timeselect-timedetail-item-cur-bg-color,
-  rgba($primary-color, 0.15)
-) !default;
-$timeselect-timedetail-item-cur-border: var(
-  --nutui-timeselect-timedetail-item-cur-border,
-  $primary-color
+$timeselect-time-color: var(
+  --nutui-timeselect-time-color,
+  $title-color
 ) !default;
-$timeselect-timedetail-item-cur-text-color: var(
-  --nutui-timeselect-timedetail-item-cur-text-color,
+$timeselect-time-active-color: var(
+  --nutui-timeselect-time-active-color,
   $primary-color
 ) !default;
-$timeselect-timedetail-time-text-color: var(
-  --nutui-timeselect-timedetail-time-text-color,
-  #999
+$timeselect-time-background: var(
+  --nutui-timeselect-time-background,
+  $background-color
 ) !default;
-$timeselect-timedetail-time-font-size: var(
-  --nutui-timeselect-timedetail-time-font-size,
-  $font-size-1
+$timeselect-time-active-background: var(
+  --nutui-timeselect-time-active-background,
+  $background-color2
 ) !default;
 
 //tag（✅）
 $tag-padding: var(--nutui-tag-padding, 0 4px) !default;
 $tag-font-size: var(--nutui-tag-font-size, 12px) !default;
-$tag-default-border-radius: var(
-  --nutui-tag-default-border-radius,
-  4px
-) !default;
+$tag-border-radius: var(--nutui-tag-border-radius, 4px) !default;
+$tag-height: var(--nutui-tag-height, auto) !default;
+$tag-color: var(--nutui-tag-color, #ffffff) !default;
+$tag-border-width: var(--nutui-tag-border-width, 1px) !default;
 $tag-round-border-radius: var(--nutui-tag-round-border-radius, 8px) !default;
-$tag-default-background-color: var(
-  --nutui-tag-default-background-color,
-  #000000
+$tag-mark-border-radius: var(
+  --nutui-tag-mark-border-radius,
+  0 12px 12px 0
 ) !default;
+$tag-background-color: var(--nutui-tag-background-color, #000000) !default;
 $tag-primary-background-color: var(
   --nutui-tag-primary-background-color,
   $primary-color
@@ -1415,17 +1316,10 @@ $tag-danger-background-color: linear-gradient(
   rgba(232, 34, 14, 1) 69.83950099728881%,
   rgba(242, 77, 12, 1) 100%
 ) !default;
-$tag-danger-background-color-plain: var(
-  --nutui-tag-danger-background-color-plain,
-  #df3526
-) !default;
 $tag-warning-background-color: var(
   --nutui-tag-warning-background-color,
   #f3812e
 ) !default;
-$tag-default-color: var(--nutui-tag-default-color, #ffffff) !default;
-$tag-border-width: var(--nutui-tag-border-width, 1px) !default;
-$tag-height: var(--nutui-tag-height, auto) !default;
 
 //badge（✅）
 $badge-background-color: var(
@@ -1598,7 +1492,7 @@ $tabs-titles-background-color: var(
   $background-color
 ) !default;
 $tabs-titles-border-radius: var(--nutui-tabs-titles-border-radius, 0) !default;
-
+$nut-tabs-title-gap: var(--nutui-tabs-title-gap, 0) !default;
 $tabs-titles-item-font-size: var(
   --nutui-tabs-titles-item-font-size,
   $font-size-2
@@ -1761,18 +1655,6 @@ $collapse-item-disabled-color: var(
   --nutui-collapse-item-disabled-color,
   #c8c9cc
 ) !default;
-$collapse-item-icon-color: var(
-  --nutui-collapse-item-icon-color,
-  #666666
-) !default;
-$collapse-item-icon-margin-right: var(
-  --nutui-collapse-item-icon-margin-right,
-  5px
-) !default;
-$collapse-item-icon-margin-left: var(
-  --nutui-collapse-item-icon-margin-left,
-  5px
-) !default;
 $collapse-item-font-size: var(
   --nutui-collapse-item-font-size,
   $font-size-2
@@ -1781,18 +1663,14 @@ $collapse-item-line-height: var(
   --nutui-collapse-item-line-height,
   24px
 ) !default;
-$collapse-item-sub-title-color: var(
-  --nutui-collapse-item-sub-title-color,
+$collapse-item-extra-color: var(
+  --nutui-collapse-item-extra-color,
   #666666
 ) !default;
 $collapse-wrapper-content-padding: var(
   --nutui-collapse-wrapper-content-padding,
   12px 26px
 ) !default;
-$collapse-wrapper-empty-content-padding: var(
-  --nutui-collapse-wrapper-empty-content-padding,
-  0 26px
-) !default;
 $collapse-wrapper-content-color: var(
   --nutui-collapse-wrapper-content-color,
   #666666
@@ -1811,36 +1689,25 @@ $collapse-wrapper-content-background-color: var(
 ) !default;
 
 // searchbar（✅）
-
-$searchbar-background: var(--nutui-searchbar-background, $gray6) !default;
+$searchbar-background: var(--nutui-searchbar-background, #fff) !default;
 $searchbar-content-border-radius: var(
   --nutui-searchbar-content-border-radius,
   2px
 ) !default;
-$searchbar-right-out-color: var(
-  --nutui-searchbar-right-out-color,
-  $black
-) !default;
-$searchbar-padding: var(--nutui-searchbar-padding, 9px 16px) !default;
+$searchbar-padding: var(--nutui-searchbar-padding, 9px 10px) !default;
 $searchbar-width: var(--nutui-searchbar-width, 100%) !default;
-$searchbar-label-fontsize: var(--nutui-searchbar-label-fontsize, 12px) !default;
-$searchbar-label-padding: var(
-  --nutui-searchbar-label-padding,
+$searchbar-left-fontsize: var(--nutui-searchbar-left-fontsize, 12px) !default;
+$searchbar-left-padding: var(
+  --nutui-searchbar-left-padding,
   0 12px 0 0
 ) !default;
-$searchbar-label-color: var(--nutui-searchbar-label-color, $gray1) !default;
-$searchbar-action-text-fontsize: var(
-  --nutui-searchbar-action-text-fontsize,
-  14px
-) !default;
-$searchbar-action-text-padding: var(
-  --nutui-searchbar-action-text-padding,
+$searchbar-left-color: var(--nutui-searchbar-left-color, $gray1) !default;
+$searchbar-right-fontsize: var(--nutui-searchbar-right-fontsize, 14px) !default;
+$searchbar-right-padding: var(
+  --nutui-searchbar-right-padding,
   0 0 0 8px
 ) !default;
-$searchbar-action-text-color: var(
-  --nutui-searchbar-action-text-color,
-  $gray1
-) !default;
+$searchbar-right-color: var(--nutui-searchbar-right-color, $gray1) !default;
 $searchbar-input-height: var(--nutui-searchbar-input-height, 32px) !default;
 $searchbar-input-padding: var(--nutui-searchbar-input-padding, 0 5px) !default;
 $searchbar-input-background: var(
@@ -1856,22 +1723,14 @@ $searchbar-input-curror-color: var(
   $gray1
 ) !default;
 $searchbar-input-width: var(--nutui-searchbar-input-width, 100%) !default;
+$searchbar-input-text-align: var(
+  --nutui-searchbar-input-text-align,
+  left
+) !default;
 $searchbar-input-border-radius: var(
   --nutui-searchbar-input-border-radius,
   16px
 ) !default;
-$searchbar-input-box-shadow: var(
-  --nutui-searchbar-input-box-shadow,
-  0 0 8px 0 rgba(0, 0, 0, 0.04)
-) !default;
-$searchbar-input-bar-color: var(
-  --nutui-searchbar-input-bar-color,
-  inherit
-) !default;
-$searchbar-input-bar-placeholder-color: var(
-  --nutui-searchbar-input-bar-placeholder-color,
-  inherit
-) !default;
 $searchbar-clear-icon-padding: var(
   --nutui-searchbar-clear-icon-padding,
   0 10px 0 5px
@@ -1992,9 +1851,15 @@ $form-item-tip-font-size: var(--nutui-form-item-tip-font-size, 10px) !default;
 $form-item-tip-text-align: var(--nutui-form-item-tip-text-align, left) !default;
 
 // skeleton（✅）
-$skeleton-content-line-title-background-color: var(
-  --nutui-skeleton-content-line-title-background-color,
-  #efefef
+$skeleton-background: var(
+  --nutui-skeleton-background,
+  rgb(239, 239, 239)
+) !default;
+$skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default;
+$skeleton-line-height: var(--nutui-skeleton-line-height, 15px) !default;
+$skeleton-line-border-radius: var(
+  --nutui-skeleton-line-border-radius,
+  0
 ) !default;
 
 // sku（✅ todo：react版本该组件暂无，将变量先迁过来）
@@ -2074,9 +1939,6 @@ $sku-product-img-border-radius: var(
 
 // card（✅）
 $card-font-size-0: var(--nutui-card-font-size-0, $font-size-0) !default;
-$card-font-size-1: var(--nutui-card-font-size-1, $font-size-1) !default;
-$card-font-size-2: var(--nutui-card-font-size-2, $font-size-2) !default;
-$card-font-size-3: var(--nutui-card-font-size-3, $font-size-3) !default;
 $card-left-border-radius: var(--nutui-card-left-border-radius, 0) !default;
 $card-left-background-color: var(
   --nutui-card-left-background-color,
@@ -2119,7 +1981,10 @@ $navbar-box-shadow: var(
 ) !default;
 $navbar-color: var(--nutui-navbar-color, $gray1) !default;
 $navbar-font-size: var(--nutui-navbar-font-size, $font-size-2) !default;
-$navbar-title-font: var(--nutui-navbar-title-font-size, $font-size-2) !default;
+$navbar-title-font-size: var(
+  --nutui-navbar-title-font-size,
+  $font-size-2
+) !default;
 $navbar-title-font-weight: var(--nutui-navbar-title-font-weight, 0) !default;
 $navbar-title-font-color: var(
   --nutui-navbar-title-font-color,
@@ -2132,62 +1997,51 @@ $sidenavbar-content-bg-color: var(
   --nutui-sidenavbar-content-bg-color,
   $white
 ) !default;
-
-// subsidenavbar（✅）
-$sidenavbar-sub-title-border-color: var(
-  --nutui-sidenavbar-sub-title-border-color,
-  #f6f6f6
-) !default;
-$sidenavbar-sub-title-bg-color: var(
-  --nutui-sidenavbar-sub-title-bg-color,
-  #f6f6f6
-) !default;
-$sidenavbar-sub-title-font-size: var(
-  --nutui-sidenavbar-sub-title-font-size,
-  $font-size-large
-) !default;
-$sidenavbar-sub-title-radius: var(
-  --nutui-sidenavbar-sub-title-radius,
-  0
+$sidenav-bar-item-height: var(--nutui-sidenavbar-item-height, 40px) !default;
+$sidenavbar-head-bg-color: var(
+  --nutui-sidenavbar-head-bg-color,
+  #eeeff2
 ) !default;
-$sidenavbar-sub-title-border: var(
-  --nutui-sidenavbar-sub-title-border,
-  0
+$sidenavbar-head-padding: var(--nutui-sidenavbar-head-padding, 10px) !default;
+$sidenavbar-title-padding: var(
+  --nutui-sidenavbar-title-padding,
+  10px 8px 10px 20px
 ) !default;
-$sidenavbar-sub-title-width: var(
-  --nutui-sidenavbar-sub-title-width,
-  100%
+$sidenavbar-title-background: var(
+  --nutui-sidenavbar-title-background,
+  $gray4
 ) !default;
-$sidenavbar-sub-title-height: var(
-  --nutui-sidenavbar-sub-title-height,
-  40px
+$sidenavbar-title-color: var(--nutui-sidenavbar-title-color, $gray1) !default;
+// subsidenavbar（✅）
+$sidenavbar-sub-title-padding: var(
+  --nutui-sidenavbar-sub-title-padding,
+  10px 8px 10px 35px
 ) !default;
-$sidenavbar-sub-title-text-line-height: var(
-  --nutui-sidenavbar-sub-title-text-line-height,
-  40px
+$sidenavbar-sub-title-background: var(
+  --nutui-sidenavbar-sub-title-background,
+  $gray5
 ) !default;
-$sidenavbar-sub-title-text-color: var(
-  --nutui-sidenavbar-sub-title-text-color,
-  $title-color
+$sidenavbar-sub-title-color: var(
+  --nutui-sidenavbar-sub-title-color,
+  $gray1
 ) !default;
 
 // sidenavbaritem（✅）
-$sidenavbar-item-title-color: var(
-  --nutui-sidenavbar-item-title-color,
-  #333
+$sidenavbar-sub-item-color: var(
+  --nutui-sidenavbar-sub-item-color,
+  $gray2
 ) !default;
-$sidenavbar-item-title-bg-color: var(
-  --nutui-sidenavbar-item-title-bg-color,
-  $white
+$sidenavbar-sub-item-padding: var(
+  --nutui-sidenavbar-sub-item-padding,
+  10px 8px 10px 55px
 ) !default;
-$sidenavbar-item-height: var(--nutui-sidenavbar-item-height, 40px) !default;
-$sidenavbar-item-line-height: var(
-  --nutui-sidenavbar-item-line-height,
-  40px
+$sidenavbar-sub-list-background: var(
+  --nutui-sidenavbar-sub-list-background,
+  $gray6
 ) !default;
-$sidenavbar-item-font-size: var(
-  --nutui-sidenavbar-item-font-size,
-  16px
+$sidenavbar-sub-list-color: var(
+  --nutui-sidenavbar-sub-list-background,
+  $gray2
 ) !default;
 
 // elevator（✅）
@@ -2243,6 +2097,14 @@ $elevator-list-item-code-line-height: var(
   --nutui-elevator-list-item-code-line-height,
   35px
 ) !default;
+$elevator-list-item-code-border-bottom: var(
+  --nutui-elevator-list-item-code-border-bottom,
+  1px
+) !default;
+$elevator-list-item-code-border-bottom-color: var(
+  --nutui-elevator-list-item-code-border-bottom-color,
+  #f5f5f5
+) !default;
 $elevator-list-item-code-current-box-shadow: 0 3px 3px 1px
   rgba(240, 240, 240, 1) !default;
 $elevator-list-item-code-current-bg-color: var(
@@ -2461,10 +2323,7 @@ $invoice-padding: var(--nutui-invoice-padding, 10px 10px 20px) !default;
 
 // TrendArrow（✅ todo：react版本该组件暂无，将变量先迁过来）
 $trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default;
-$trendarrow-before-icon-margin: var(
-  --nutui-trendarrow-before-icon-margin,
-  4px
-) !default;
+$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default;
 
 // animatingnumbers（✅）
 $countup-height: var(--nutui-countup-height, 32px) !default;
@@ -2498,7 +2357,4 @@ $col-default-margin-bottom: var(
 
 // TrendArrow
 $trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default;
-$trendarrow-before-icon-margin: var(
-  --nutui-trendarrow-before-icon-margin,
-  4px
-) !default;
+$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default;