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

package/dist/styles/variables.scss

@@ -461,13 +461,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,
@@ -539,37 +538,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(
@@ -671,8 +663,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(
@@ -749,52 +741,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-color: var(
-  --nutui-calendar-choose-color,
+$calendar-choose-background-color: var(
+  --nutui-calendar-choose-background-color,
   rgba(#fa2c19, 0.09)
 ) !default;
-$calendar-choose-font-color: var(
-  --nutui-calendar-choose-font-color,
+$calendar-choose-color: var(
+  --nutui-calendar-choose-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（✅）
@@ -806,9 +799,13 @@ $overlay-content-bg-color: var(
 $overlay-content-color: var(--nutui-overlay-content-color, $gray1) !default;
 //popup（✅）
 $popup-close-icon-margin: var(--nutui-popup-close-icon-margin, 16px) !default;
-$popup-border-radius: var(--nutui-popup-border-radius, 20px) !default;
+$popup-border-radius: var(--nutui-popup-border-radius, 24px) !default;
 $popup-close-icon-color: var(--nutui-popup-close-icon-color, #969799) !default;
 $popup-close-icon-size: var(--nutui-popup-close-icon-size, 30px) !default;
+$popup-title-padding: var(--nutui-popup-title-padding, 15px) !default;
+$popup-title-font-size: var(--nutui-popup-title-font-size, 18px) !default;
+$popup-title-line-height: var(--nutui-popup-title-line-height, 18px) !default;
+$popup-title-border-bottom: var(--nutui-popup-title-border-bottom, 0) !default;
 
 // Notify（✅）
 $notify-text-color: var(--nutui-notify-text-color, $white) !default;
@@ -897,59 +894,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;
@@ -984,12 +940,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;
 
@@ -998,17 +954,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;
 
@@ -1020,14 +971,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
@@ -1041,7 +984,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;
 
@@ -1053,20 +996,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(
@@ -1080,6 +1015,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;
@@ -1264,10 +1200,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
@@ -1278,124 +1211,87 @@ $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
-) !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
+$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-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,
-  #3460fa
+  $primary-color
 ) !default;
 $tag-success-background-color: var(
   --nutui-tag-success-background-color,
@@ -1407,17 +1303,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(
@@ -1442,19 +1331,15 @@ $badge-dot-width: var(--nutui-badge-dot-width, 7px) !default;
 
 //popover（✅）
 $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default;
-$popover-font-size: var(--nutui-popover-font-size, $font-size-1) !default;
+$popover-font-size: var(--nutui-popover-font-size, $font-size-2) !default;
 $popover-menu-item-height: var(--nutui-popover-menu-item-height, 30px) !default;
-$popover-menu-item-name-margin: var(
-  --nutui-popover-menu-item-name-margin,
-  0px 10px
-) !default;
 $popover-menu-item-hover-background-color: var(
   --nutui-popover-menu-item-hover-background-color,
-  $primary-color
+  #fff
 ) !default;
 $popover-menu-item-hover-text-color: var(
   --nutui-popover-menu-item-hover-text-color,
-  $primary-text-color
+  #1a1a1a
 ) !default;
 $popover-menu-item-border-width: var(
   --nutui-popover-menu-item-border-width,
@@ -1474,19 +1359,23 @@ $popover-menu-item-border-bottom: var(
 ) !default;
 $popover-white-background-color: var(
   --nutui-popover-white-background-color,
-  rgba(255, 255, 255, 1)
+  $gray6
 ) !default;
 $popover-dark-background-color: var(
   --nutui-popover-dark-background-color,
   rgba(75, 76, 77, 1)
 ) !default;
+$popover-content-background-color: var(
+  --nutui-popover-content-background-color,
+  $gray6
+) !default;
 $popover-border-bottom-color: var(
   --nutui-popover-border-bottom-color,
   rgba(229, 229, 229, 1)
 ) !default;
 $popover-primary-text-color: var(
   --nutui-popover-primary-text-color,
-  rgba(51, 51, 51, 1)
+  $gray1
 ) !default;
 $popover-disable-color: var(
   --nutui-popover-disable-color,
@@ -1494,7 +1383,7 @@ $popover-disable-color: var(
 ) !default;
 $popover-menu-item-padding: var(
   --nutui-popover-menu-item-padding,
-  8px 0
+  8px
 ) !default;
 $popover-menu-item-margin: var(
   --nutui-popover-menu-item-margin,
@@ -1746,18 +1635,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
@@ -1766,18 +1643,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
@@ -1797,35 +1670,25 @@ $collapse-wrapper-content-background-color: var(
 
 // 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(
@@ -1841,22 +1704,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
@@ -1889,15 +1744,6 @@ $empty-description-padding: var(
 // cascader（✅）
 $cascader-font-size: var(--nutui-cascader-font-size, $font-size-2) !default;
 $cascader-line-height: var(--nutui-cascader-line-height, 22px) !default;
-$cascader-title-padding: var(
-  --nutui-cascader-title-padding,
-  24px 20px 17px
-) !default;
-$cascader-title-font-size: var(--nutui-cascader-title-font-size, 18px) !default;
-$cascader-title-line-height: var(
-  --nutui-cascader-title-line-height,
-  20px
-) !default;
 $cascader-pane-height: var(--nutui-cascader-pane-height, 342px) !default;
 $cascader-pane-paddingTop: var(--nutui-cascader-pane-paddingTop, 10px) !default;
 $cascader-icon-checklist-marginLeft: var(
@@ -1978,9 +1824,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版本该组件暂无，将变量先迁过来）
@@ -2060,9 +1912,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,
@@ -2116,62 +1965,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（✅）
@@ -2453,10 +2291,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;
@@ -2490,7 +2325,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;