@nutui/nutui-react 4.0.0-beta.6 → 4.0.0-beta.7

package/dist/style.scss

@@ -2,108 +2,108 @@
 @import './styles/mixins/index.scss';
 @import './styles/animation/index.scss';
 @import './es/packages/watermark/style/watermark.scss';
-@import './es/packages/uploader/style/uploader.scss';
 @import './es/packages/virtuallist/style/virtuallist.scss';
 @import './es/packages/video/style/video.scss';
+@import './es/packages/uploader/style/uploader.scss';
+@import './es/packages/tour/style/tour.scss';
 @import './es/packages/trendarrow/style/trendarrow.scss';
 @import './es/packages/timeselect/style/timeselect.scss';
-@import './es/packages/tour/style/tour.scss';
 @import './es/packages/timedetail/style/timedetail.scss';
 @import './es/packages/toast/style/toast.scss';
-@import './es/packages/tag/style/tag.scss';
 @import './es/packages/textarea/style/textarea.scss';
-@import './es/packages/tabs/style/tabs.scss';
+@import './es/packages/tag/style/tag.scss';
 @import './es/packages/tabpane/style/tabpane.scss';
+@import './es/packages/tabs/style/tabs.scss';
 @import './es/packages/tabbaritem/style/tabbaritem.scss';
-@import './es/packages/switch/style/switch.scss';
-@import './es/packages/table/style/table.scss';
 @import './es/packages/tabbar/style/tabbar.scss';
+@import './es/packages/table/style/table.scss';
+@import './es/packages/switch/style/switch.scss';
+@import './es/packages/swipe/style/swipe.scss';
 @import './es/packages/swiperitem/style/swiperitem.scss';
 @import './es/packages/swiper/style/swiper.scss';
-@import './es/packages/swipe/style/swipe.scss';
 @import './es/packages/sticky/style/sticky.scss';
 @import './es/packages/steps/style/steps.scss';
+@import './es/packages/space/style/space.scss';
 @import './es/packages/step/style/step.scss';
 @import './es/packages/skeleton/style/skeleton.scss';
-@import './es/packages/space/style/space.scss';
 @import './es/packages/signature/style/signature.scss';
 @import './es/packages/sidebaritem/style/sidebaritem.scss';
 @import './es/packages/sidebar/style/sidebar.scss';
 @import './es/packages/shortpassword/style/shortpassword.scss';
 @import './es/packages/searchbar/style/searchbar.scss';
+@import './es/packages/safearea/style/safearea.scss';
 @import './es/packages/segmented/style/segmented.scss';
 @import './es/packages/row/style/row.scss';
-@import './es/packages/safearea/style/safearea.scss';
 @import './es/packages/resultpage/style/resultpage.scss';
-@import './es/packages/rate/style/rate.scss';
 @import './es/packages/radiogroup/style/radiogroup.scss';
+@import './es/packages/rate/style/rate.scss';
 @import './es/packages/range/style/range.scss';
-@import './es/packages/quickenter/style/quickenter.scss';
-@import './es/packages/pulltorefresh/style/pulltorefresh.scss';
 @import './es/packages/radio/style/radio.scss';
-@import './es/packages/progress/style/progress.scss';
+@import './es/packages/quickenter/style/quickenter.scss';
 @import './es/packages/price/style/price.scss';
+@import './es/packages/progress/style/progress.scss';
+@import './es/packages/pulltorefresh/style/pulltorefresh.scss';
 @import './es/packages/popup/style/popup.scss';
 @import './es/packages/popover/style/popover.scss';
-@import './es/packages/pagination/style/pagination.scss';
-@import './es/packages/picker/style/picker.scss';
 @import './es/packages/pickerview/style/pickerview.scss';
+@import './es/packages/picker/style/picker.scss';
+@import './es/packages/pagination/style/pagination.scss';
 @import './es/packages/overlay/style/overlay.scss';
 @import './es/packages/numberkeyboard/style/numberkeyboard.scss';
 @import './es/packages/notify/style/notify.scss';
-@import './es/packages/navbar/style/navbar.scss';
 @import './es/packages/noticebar/style/noticebar.scss';
 @import './es/packages/menuitem/style/menuitem.scss';
 @import './es/packages/menu/style/menu.scss';
 @import './es/packages/lottie/style/lottie.scss';
+@import './es/packages/navbar/style/navbar.scss';
 @import './es/packages/loading/style/loading.scss';
-@import './es/packages/layout/style/layout.scss';
 @import './es/packages/inputnumber/style/inputnumber.scss';
-@import './es/packages/infiniteloading/style/infiniteloading.scss';
+@import './es/packages/layout/style/layout.scss';
 @import './es/packages/input/style/input.scss';
+@import './es/packages/infiniteloading/style/infiniteloading.scss';
 @import './es/packages/indicator/style/indicator.scss';
 @import './es/packages/image/style/image.scss';
+@import './es/packages/hoverbuttonitem/style/hoverbuttonitem.scss';
 @import './es/packages/imagepreview/style/imagepreview.scss';
-@import './es/packages/griditem/style/griditem.scss';
 @import './es/packages/hoverbutton/style/hoverbutton.scss';
-@import './es/packages/hoverbuttonitem/style/hoverbuttonitem.scss';
+@import './es/packages/griditem/style/griditem.scss';
 @import './es/packages/grid/style/grid.scss';
-@import './es/packages/fixednav/style/fixednav.scss';
 @import './es/packages/formitem/style/formitem.scss';
+@import './es/packages/fixednav/style/fixednav.scss';
 @import './es/packages/form/style/form.scss';
 @import './es/packages/empty/style/empty.scss';
 @import './es/packages/ellipsis/style/ellipsis.scss';
-@import './es/packages/drag/style/drag.scss';
 @import './es/packages/elevator/style/elevator.scss';
+@import './es/packages/divider/style/divider.scss';
+@import './es/packages/drag/style/drag.scss';
 @import './es/packages/dialog/style/dialog.scss';
 @import './es/packages/datepickerview/style/datepickerview.scss';
-@import './es/packages/divider/style/divider.scss';
 @import './es/packages/datepicker/style/datepicker.scss';
 @import './es/packages/countup/style/countup.scss';
 @import './es/packages/countdown/style/countdown.scss';
-@import './es/packages/configprovider/style/configprovider.scss';
 @import './es/packages/collapseitem/style/collapseitem.scss';
+@import './es/packages/configprovider/style/configprovider.scss';
 @import './es/packages/collapse/style/collapse.scss';
 @import './es/packages/col/style/col.scss';
 @import './es/packages/circleprogress/style/circleprogress.scss';
 @import './es/packages/checkboxgroup/style/checkboxgroup.scss';
-@import './es/packages/checkbox/style/checkbox.scss';
 @import './es/packages/cellgroup/style/cellgroup.scss';
+@import './es/packages/checkbox/style/checkbox.scss';
 @import './es/packages/cell/style/cell.scss';
-@import './es/packages/card/style/card.scss';
 @import './es/packages/cascader/style/cascader.scss';
+@import './es/packages/calendaritem/style/calendaritem.scss';
+@import './es/packages/card/style/card.scss';
 @import './es/packages/calendarcard/style/calendarcard.scss';
+@import './es/packages/barrage/style/barrage.scss';
 @import './es/packages/calendar/style/calendar.scss';
-@import './es/packages/calendaritem/style/calendaritem.scss';
 @import './es/packages/button/style/button.scss';
-@import './es/packages/barrage/style/barrage.scss';
 @import './es/packages/badge/style/badge.scss';
 @import './es/packages/backtop/style/backtop.scss';
 @import './es/packages/avatargroup/style/avatargroup.scss';
 @import './es/packages/avatarcropper/style/avatarcropper.scss';
 @import './es/packages/avatar/style/avatar.scss';
 @import './es/packages/audio/style/audio.scss';
-@import './es/packages/animatingnumbers/style/animatingnumbers.scss';
 @import './es/packages/animate/style/animate.scss';
-@import './es/packages/address/style/address.scss';
-@import './es/packages/actionsheet/style/actionsheet.scss';
+@import './es/packages/actionsheet/style/actionsheet.scss';
+@import './es/packages/animatingnumbers/style/animatingnumbers.scss';
+@import './es/packages/address/style/address.scss';

package/dist/styles/variables-daojia.scss

@@ -1103,6 +1103,22 @@ $noticebar-left-icon-width: var(--nutui-noticebar-left-icon-width,
     16px) !default;
 $noticebar-right-icon-width: var(--nutui-noticebar-right-icon-width,
     16px) !default;
+$noticebar-icon-color: var(--nutui-noticebar-icon-color, $color-primary) !default;
+$noticebar-left-icon-wrap-width: var(--nutui-noticebar-left-icon-wrap-width, 32px) !default;
+$noticebar-close-size: var(--nutui-noticebar-close-size, 20px) !default;
+$noticebar-tag-size: var(--nutui-noticebar-tag-size, 12px) !default;
+$noticebar-tag-gap: var(--nutui-noticebar-tag-gap, 4px) !default;
+$noticebar-action-max-width: var(--nutui-noticebar-action-max-width, 99px) !default;
+$noticebar-action-gap: var(--nutui-noticebar-action-gap, 12px) !default;
+$noticebar-action-font-size: var(--nutui-noticebar-action-font-size, $font-size-xs) !default;
+$noticebar-description-font-size: var(--nutui-noticebar-description-font-size, 11px) !default;
+$noticebar-description-color: var(--nutui-noticebar-description-color, $color-text) !default;
+$noticebar-left-icon-border-radius: var(--nutui-noticebar-left-icon-border-radius, 4px) !default;
+$noticebar-description-line-height: var(--nutui-noticebar-description-line-height, 16px) !default;
+$noticebar-close-color: var(--nutui-noticebar-close-color, $color-text-help) !default;
+$noticebar-close-icon-size: var(--nutui-noticebar-close-icon-size, 10px) !default;
+$noticebar-close-ring-color: var(--nutui-noticebar-close-ring-color, $color-text-help) !default;
+$noticebar-close-ring-shadow-color: var(--nutui-noticebar-close-ring-shadow-color, $color-border) !default;
 
 // TimeSelect（✅）
 $timeselect-date-width: var(--nutui-timeselect-date-width, 140px) !default;
@@ -1167,15 +1183,45 @@ $badge-outline-border: var(--nutui-badge-outline-border,
 //popover（✅）
 $popover-border-radius: var(--nutui-popover-border-radius, $radius-xs) !default;
 $popover-font-size: var(--nutui-popover-font-size, $font-size-s) !default;
-$popover-content-background-color: var(--nutui-popover-content-background-color,
-    #ffffff) !default;
-$popover-text-color: var(--nutui-popover-text-color, $color-mask) !default;
-$popover-disable-color: var(--nutui-popover-disable-color,
-    $color-text-disabled) !default;
-$popover-divider-color: var(--nutui-popover-divider-color,
-    $color-border) !default;
-$popover-padding: var(--nutui-popover-padding, 8px) !default;
-$popover-item-width: var(--nutui-popover-item-width, 160px) !default;
+$popover-content-background-color: var(
+  --nutui-popover-content-background-color,
+  $color-mask
+) !default;
+$popover-text-color: var(--nutui-popover-text-color, $color-primary-text) !default;
+$popover-disable-color: var(
+  --nutui-popover-disable-color,
+  $color-text-disabled
+) !default;
+$popover-divider-color: var(
+  --nutui-popover-divider-color,
+  rgba(255, 255, 255, 0.12)
+) !default;
+$popover-padding-horizontal: var(--nutui-popover-padding-horizontal, 8px) !default;
+$popover-padding-vertical: var(--nutui-popover-padding-vertical, 6px) !default;
+$popover-height: var(--nutui-popover-height, 28px) !default;
+$popover-icon-size: var(--nutui-popover-icon-size, 12px) !default;
+$popover-icon-color: var(--nutui-popover-icon-color, rgba(255, 255, 255, 0.8)) !default;
+$popover-status-max-width: var(--nutui-popover-status-max-width, 240px) !default;
+$popover-description-max-width: var(
+  --nutui-popover-description-max-width,
+  208px
+) !default;
+$popover-action-hotspot-size: var(--nutui-popover-action-hotspot-size, 36px) !default;
+$popover-light-content-background-color: var(
+  --nutui-popover-light-content-background-color,
+  #ffffff
+) !default;
+$popover-light-text-color: var(--nutui-popover-light-text-color, $color-mask) !default;
+$popover-light-icon-color: var(
+  --nutui-popover-light-icon-color,
+  rgba(17, 20, 26, 0.8)
+) !default;
+$popover-light-divider-color: var(
+  --nutui-popover-light-divider-color,
+  $color-border
+) !default;
+$popover-padding: var(--nutui-popover-padding, $popover-padding-horizontal) !default;
+$popover-item-width: var(--nutui-popover-item-width, $popover-status-max-width) !default;
 
 //progress（✅）
 $progress-height: var(--nutui-progress-height, 10px) !default;

package/dist/styles/variables-jmapp.scss

@@ -1881,6 +1881,25 @@ $noticebar-right-icon-width: var(
   --nutui-noticebar-right-icon-width,
   16px
 ) !default;
+$noticebar-icon-color: var(--nutui-noticebar-icon-color, $color-primary) !default;
+$noticebar-left-icon-wrap-width: var(
+  --nutui-noticebar-left-icon-wrap-width,
+  32px
+) !default;
+$noticebar-close-size: var(--nutui-noticebar-close-size, 20px) !default;
+$noticebar-tag-size: var(--nutui-noticebar-tag-size, 12px) !default;
+$noticebar-tag-gap: var(--nutui-noticebar-tag-gap, 4px) !default;
+$noticebar-action-max-width: var(--nutui-noticebar-action-max-width, 99px) !default;
+$noticebar-action-gap: var(--nutui-noticebar-action-gap, 12px) !default;
+$noticebar-action-font-size: var(--nutui-noticebar-action-font-size, $font-size-xs) !default;
+$noticebar-description-font-size: var(--nutui-noticebar-description-font-size, 11px) !default;
+$noticebar-description-color: var(--nutui-noticebar-description-color, $color-text) !default;
+$noticebar-left-icon-border-radius: var(--nutui-noticebar-left-icon-border-radius, 4px) !default;
+$noticebar-description-line-height: var(--nutui-noticebar-description-line-height, 16px) !default;
+$noticebar-close-color: var(--nutui-noticebar-close-color, $color-text-help) !default;
+$noticebar-close-icon-size: var(--nutui-noticebar-close-icon-size, 10px) !default;
+$noticebar-close-ring-color: var(--nutui-noticebar-close-ring-color, $color-text-help) !default;
+$noticebar-close-ring-shadow-color: var(--nutui-noticebar-close-ring-shadow-color, $color-border) !default;
 
 // TimeSelect（✅）
 $timeselect-date-width: var(--nutui-timeselect-date-width, 140px) !default;
@@ -1972,19 +1991,46 @@ $badge-outline-border: var(
 
 //popover（✅）
 $popover-border-radius: var(--nutui-popover-border-radius, $radius-s) !default;
-$popover-font-size: var(--nutui-popover-font-size, $font-size-base) !default;
+$popover-font-size: var(--nutui-popover-font-size, $font-size-s) !default;
 $popover-content-background-color: var(
   --nutui-popover-content-background-color,
-  #ffffff
+  $color-mask
 ) !default;
-$popover-text-color: var(--nutui-popover-text-color, $color-text) !default;
+$popover-text-color: var(--nutui-popover-text-color, $color-primary-text) !default;
 $popover-disable-color: var(
   --nutui-popover-disable-color,
   $color-text-disabled
 ) !default;
-$popover-divider-color: var(--nutui-popover-divider-color, none) !default;
-$popover-padding: var(--nutui-popover-padding, $spacing-xl) !default;
-$popover-item-width: var(--nutui-popover-item-width, 160px) !default;
+$popover-divider-color: var(
+  --nutui-popover-divider-color,
+  rgba(255, 255, 255, 0.12)
+) !default;
+$popover-padding-horizontal: var(--nutui-popover-padding-horizontal, 8px) !default;
+$popover-padding-vertical: var(--nutui-popover-padding-vertical, 6px) !default;
+$popover-height: var(--nutui-popover-height, 28px) !default;
+$popover-icon-size: var(--nutui-popover-icon-size, 12px) !default;
+$popover-icon-color: var(--nutui-popover-icon-color, rgba(255, 255, 255, 0.8)) !default;
+$popover-status-max-width: var(--nutui-popover-status-max-width, 240px) !default;
+$popover-description-max-width: var(
+  --nutui-popover-description-max-width,
+  208px
+) !default;
+$popover-action-hotspot-size: var(--nutui-popover-action-hotspot-size, 36px) !default;
+$popover-light-content-background-color: var(
+  --nutui-popover-light-content-background-color,
+  #ffffff
+) !default;
+$popover-light-text-color: var(--nutui-popover-light-text-color, $color-mask) !default;
+$popover-light-icon-color: var(
+  --nutui-popover-light-icon-color,
+  rgba(17, 20, 26, 0.8)
+) !default;
+$popover-light-divider-color: var(
+  --nutui-popover-light-divider-color,
+  $color-border
+) !default;
+$popover-padding: var(--nutui-popover-padding, $popover-padding-horizontal) !default;
+$popover-item-width: var(--nutui-popover-item-width, $popover-status-max-width) !default;
 
 //progress（✅）
 $progress-height: var(--nutui-progress-height, 10px) !default;

package/dist/styles/variables-jrkf.scss

@@ -1984,6 +1984,25 @@ $noticebar-right-icon-width: var(
   --nutui-noticebar-right-icon-width,
   16px
 ) !default;
+$noticebar-icon-color: var(--nutui-noticebar-icon-color, $color-primary) !default;
+$noticebar-left-icon-wrap-width: var(
+  --nutui-noticebar-left-icon-wrap-width,
+  32px
+) !default;
+$noticebar-close-size: var(--nutui-noticebar-close-size, 20px) !default;
+$noticebar-tag-size: var(--nutui-noticebar-tag-size, 12px) !default;
+$noticebar-tag-gap: var(--nutui-noticebar-tag-gap, 4px) !default;
+$noticebar-action-max-width: var(--nutui-noticebar-action-max-width, 99px) !default;
+$noticebar-action-gap: var(--nutui-noticebar-action-gap, 12px) !default;
+$noticebar-action-font-size: var(--nutui-noticebar-action-font-size, $font-size-xs) !default;
+$noticebar-description-font-size: var(--nutui-noticebar-description-font-size, 11px) !default;
+$noticebar-description-color: var(--nutui-noticebar-description-color, $color-text) !default;
+$noticebar-left-icon-border-radius: var(--nutui-noticebar-left-icon-border-radius, 4px) !default;
+$noticebar-description-line-height: var(--nutui-noticebar-description-line-height, 16px) !default;
+$noticebar-close-color: var(--nutui-noticebar-close-color, $color-text-help) !default;
+$noticebar-close-icon-size: var(--nutui-noticebar-close-icon-size, 10px) !default;
+$noticebar-close-ring-color: var(--nutui-noticebar-close-ring-color, $color-text-help) !default;
+$noticebar-close-ring-shadow-color: var(--nutui-noticebar-close-ring-shadow-color, $color-border) !default;
 
 // TimeSelect（✅）
 $timeselect-date-width: var(--nutui-timeselect-date-width, 140px) !default;
@@ -2079,19 +2098,46 @@ $badge-outline-border: var(
 
 //popover（✅）
 $popover-border-radius: var(--nutui-popover-border-radius, $radius-s) !default;
-$popover-font-size: var(--nutui-popover-font-size, $font-size-base) !default;
+$popover-font-size: var(--nutui-popover-font-size, $font-size-s) !default;
 $popover-content-background-color: var(
   --nutui-popover-content-background-color,
-  #ffffff
+  $color-mask
 ) !default;
-$popover-text-color: var(--nutui-popover-text-color, $color-text) !default;
+$popover-text-color: var(--nutui-popover-text-color, $color-primary-text) !default;
 $popover-disable-color: var(
   --nutui-popover-disable-color,
   $color-text-disabled
 ) !default;
-$popover-divider-color: var(--nutui-popover-divider-color, none) !default;
-$popover-padding: var(--nutui-popover-padding, $spacing-xl) !default;
-$popover-item-width: var(--nutui-popover-item-width, 160px) !default;
+$popover-divider-color: var(
+  --nutui-popover-divider-color,
+  rgba(255, 255, 255, 0.12)
+) !default;
+$popover-padding-horizontal: var(--nutui-popover-padding-horizontal, 8px) !default;
+$popover-padding-vertical: var(--nutui-popover-padding-vertical, 6px) !default;
+$popover-height: var(--nutui-popover-height, 28px) !default;
+$popover-icon-size: var(--nutui-popover-icon-size, 12px) !default;
+$popover-icon-color: var(--nutui-popover-icon-color, rgba(255, 255, 255, 0.8)) !default;
+$popover-status-max-width: var(--nutui-popover-status-max-width, 240px) !default;
+$popover-description-max-width: var(
+  --nutui-popover-description-max-width,
+  208px
+) !default;
+$popover-action-hotspot-size: var(--nutui-popover-action-hotspot-size, 36px) !default;
+$popover-light-content-background-color: var(
+  --nutui-popover-light-content-background-color,
+  #ffffff
+) !default;
+$popover-light-text-color: var(--nutui-popover-light-text-color, $color-mask) !default;
+$popover-light-icon-color: var(
+  --nutui-popover-light-icon-color,
+  rgba(17, 20, 26, 0.8)
+) !default;
+$popover-light-divider-color: var(
+  --nutui-popover-light-divider-color,
+  $color-border
+) !default;
+$popover-padding: var(--nutui-popover-padding, $popover-padding-horizontal) !default;
+$popover-item-width: var(--nutui-popover-item-width, $popover-status-max-width) !default;
 
 //progress（✅）
 $progress-height: var(--nutui-progress-height, 10px) !default;

package/dist/styles/variables.scss

@@ -1770,30 +1770,90 @@ $fixednav-item-active-color: var(
 ) !default;
 
 // NoticeBar（✅）
-$noticebar-height: var(--nutui-noticebar-height, scale-px(36px)) !default;
+$noticebar-height: var(--nutui-noticebar-height, scale-px(40px)) !default;
 $noticebar-background: var(
   --nutui-noticebar-background,
-  rgba(251, 248, 220, 1)
+  $color-background-overlay
+) !default;
+$noticebar-color: var(--nutui-noticebar-color, $color-title) !default;
+$noticebar-icon-color: var(
+  --nutui-noticebar-icon-color,
+  $color-primary
 ) !default;
-$noticebar-color: var(--nutui-noticebar-color, #d9500b) !default;
-$noticebar-font-size: var(--nutui-noticebar-font-size, $font-size-s) !default;
-$noticebar-line-height: var(--nutui-noticebar-line-height, scale-px(24px)) !default;
-$noticebar-box-padding: var(--nutui-noticebar-box-padding, 0 scale-px(16px)) !default;
+$noticebar-font-size: var(--nutui-noticebar-font-size, $font-size-base) !default;
+$noticebar-line-height: var(--nutui-noticebar-line-height, scale-px(20px)) !default;
+$noticebar-box-padding: var(--nutui-noticebar-box-padding, scale-px(2px) scale-px(8px)) !default;
 $noticebar-border-radius: var(--nutui-noticebar-border-radius, 0) !default;
 $noticebar-wrap-padding: var(
   --nutui-noticebar-wrapable-padding,
-  scale-px(8px) scale-px(16px)
+  scale-px(9px) scale-px(8px)
 ) !default;
-$noticebar-icon-gap: var(--nutui-noticebar-icon-gap, scale-px(4px)) !default;
+$noticebar-icon-gap: var(--nutui-noticebar-icon-gap, scale-px(6px)) !default;
 $noticebar-left-icon-width: var(
   --nutui-noticebar-left-icon-width,
-  scale-px(16px)
+  scale-px(24px)
+) !default;
+$noticebar-left-icon-wrap-width: var(
+  --nutui-noticebar-left-icon-wrap-width,
+  scale-px(32px)
 ) !default;
 $noticebar-right-icon-width: var(
   --nutui-noticebar-right-icon-width,
   scale-px(16px)
 ) !default;
-
+$noticebar-close-size: var(
+  --nutui-noticebar-close-size,
+  scale-px(20px)
+) !default;
+$noticebar-tag-size: var(
+  --nutui-noticebar-tag-size,
+  scale-px(12px)
+) !default;
+$noticebar-tag-gap: var(--nutui-noticebar-tag-gap, scale-px(4px)) !default;
+$noticebar-action-max-width: var(
+  --nutui-noticebar-action-max-width,
+  scale-px(99px)
+) !default;
+$noticebar-action-gap: var(
+  --nutui-noticebar-action-gap,
+  scale-px(12px)
+) !default;
+$noticebar-action-font-size: var(
+  --nutui-noticebar-action-font-size,
+  $font-size-xs
+) !default;
+$noticebar-description-font-size: var(
+  --nutui-noticebar-description-font-size,
+  scale-px(11px)
+) !default;
+$noticebar-description-color: var(
+  --nutui-noticebar-description-color,
+  $color-text
+) !default;
+$noticebar-left-icon-border-radius: var(
+  --nutui-noticebar-left-icon-border-radius,
+  scale-px(4px)
+) !default;
+$noticebar-description-line-height: var(
+  --nutui-noticebar-description-line-height,
+  scale-px(16px)
+) !default;
+$noticebar-close-color: var(
+  --nutui-noticebar-close-color,
+  $color-text-help
+) !default;
+$noticebar-close-icon-size: var(
+  --nutui-noticebar-close-icon-size,
+  scale-px(10px)
+) !default;
+$noticebar-close-ring-color: var(
+  --nutui-noticebar-close-ring-color,
+  $color-text-help
+) !default;
+$noticebar-close-ring-shadow-color: var(
+  --nutui-noticebar-close-ring-shadow-color,
+  $color-border
+) !default;
 // TimeSelect（✅）
 $timeselect-date-width: var(--nutui-timeselect-date-width, scale-px(140px)) !default;
 $timeselect-date-height: var(--nutui-timeselect-date-height, scale-px(40px)) !default;
@@ -1883,23 +1943,71 @@ $badge-outline-border: var(
 );
 
 //popover（✅）
-$popover-border-radius: var(--nutui-popover-border-radius, $radius-xs) !default;
+$popover-border-radius: var(--nutui-popover-border-radius, $radius-s) !default;
 $popover-font-size: var(--nutui-popover-font-size, $font-size-s) !default;
 $popover-content-background-color: var(
   --nutui-popover-content-background-color,
-  #ffffff
+  $color-mask
 ) !default;
-$popover-text-color: var(--nutui-popover-text-color, $color-mask) !default;
+$popover-text-color: var(--nutui-popover-text-color, $color-primary-text) !default;
 $popover-disable-color: var(
   --nutui-popover-disable-color,
   $color-text-disabled
 ) !default;
 $popover-divider-color: var(
   --nutui-popover-divider-color,
+  rgba(255, 255, 255, 0.12)
+) !default;
+$popover-padding-horizontal: var(
+  --nutui-popover-padding-horizontal,
+  scale-px(8px)
+) !default;
+$popover-padding-vertical: var(
+  --nutui-popover-padding-vertical,
+  scale-px(6px)
+) !default;
+$popover-height: var(--nutui-popover-height, scale-px(28px)) !default;
+$popover-icon-size: var(--nutui-popover-icon-size, scale-px(12px)) !default;
+$popover-icon-color: var(
+  --nutui-popover-icon-color,
+  rgba(255, 255, 255, 0.8)
+) !default;
+$popover-status-max-width: var(
+  --nutui-popover-status-max-width,
+  scale-px(240px)
+) !default;
+$popover-description-max-width: var(
+  --nutui-popover-description-max-width,
+  scale-px(208px)
+) !default;
+$popover-action-hotspot-size: var(
+  --nutui-popover-action-hotspot-size,
+  scale-px(36px)
+) !default;
+$popover-light-content-background-color: var(
+  --nutui-popover-light-content-background-color,
+  #ffffff
+) !default;
+$popover-light-text-color: var(
+  --nutui-popover-light-text-color,
+  $color-mask
+) !default;
+$popover-light-icon-color: var(
+  --nutui-popover-light-icon-color,
+  rgba(17, 20, 26, 0.8)
+) !default;
+$popover-light-divider-color: var(
+  --nutui-popover-light-divider-color,
   $color-border
 ) !default;
-$popover-padding: var(--nutui-popover-padding, scale-px(8px)) !default;
-$popover-item-width: var(--nutui-popover-item-width, scale-px(160px)) !default;
+$popover-padding: var(
+  --nutui-popover-padding,
+  $popover-padding-horizontal
+) !default;
+$popover-item-width: var(
+  --nutui-popover-item-width,
+  $popover-status-max-width
+) !default;
 
 //progress（✅）
 $progress-height: var(--nutui-progress-height, scale-px(10px)) !default;

package/package.json

@@ -1 +1 @@
-{"name":"@nutui/nutui-react","version":"4.0.0-beta.6","style":"dist/style.css","main":"dist/nutui.react.umd.js","module":"dist/es/packages/nutui.react.build.js","typings":"dist/es/packages/nutui.react.build.d.ts","scripts":{"publish:beta":"npm publish --tag=beta --access public --no-git-checks","publish:latest":"npm publish --access public --no-git-checks","postinstall":"node postinstall.js"},"sideEffects":["*.scss","dist/es/**/style{,-jmapp,-jrkf}/*","dist/cjs/**/style{,-jmapp,-jrkf}/*","dist/style{,-jmapp,-jrkf}.css","dist/styles/**/*","dist/styles/font{,-jmapp,-jrkf}/*"],"description":"京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序","keywords":["nutui","nutui2","nutui3","react","nutui-react","webpack","react component","vite","jdc","jdcfe","taro"],"author":"jdcfe","license":"MIT","repository":{"type":"git","url":"git+https://github.com/jdf2e/nutui-react.git"},"files":["dist","README.md","package.json","LICENSE","CHANGELOG.md","postinstall.js"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"dependencies":{"@babel/runtime":"^7.23.9","@nutui/icons-react":"^3.0.2-beta.5","@nutui/jdesign-icons-react-taro":"1.0.6-beta.2","@nutui/lottie-miniprogram":"^1.0.2","@nutui/touch-emulator":"^1.0.0","@react-spring/web":"~9.6.1","@swc/helpers":"^0.5.7","@use-gesture/react":"10.2.20","async-validator":"^4.2.5","classnames":"^2.5.1","codesandbox":"^2.2.3","lodash.kebabcase":"^4.1.1","lottie-react":"^2.4.0","react-fast-compare":"^3.2.2","react-transition-group":"^4.4.5","rehype-highlight":"^7.0.2"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0"},"optionalDependencies":{"@jmfe/npm-usage-stats-tool":"latest"}}
+{"name":"@nutui/nutui-react","version":"4.0.0-beta.7","style":"dist/style.css","main":"dist/nutui.react.umd.js","module":"dist/es/packages/nutui.react.build.js","typings":"dist/es/packages/nutui.react.build.d.ts","scripts":{"publish:beta":"npm publish --tag=beta --access public --no-git-checks","publish:latest":"npm publish --access public --no-git-checks","postinstall":"node postinstall.js"},"sideEffects":["*.scss","dist/es/**/style{,-jmapp,-jrkf}/*","dist/cjs/**/style{,-jmapp,-jrkf}/*","dist/style{,-jmapp,-jrkf}.css","dist/styles/**/*","dist/styles/font{,-jmapp,-jrkf}/*"],"description":"京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序","keywords":["nutui","nutui2","nutui3","react","nutui-react","webpack","react component","vite","jdc","jdcfe","taro"],"author":"jdcfe","license":"MIT","repository":{"type":"git","url":"git+https://github.com/jdf2e/nutui-react.git"},"files":["dist","README.md","package.json","LICENSE","CHANGELOG.md","postinstall.js"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"dependencies":{"@babel/runtime":"^7.29.7","@nutui/icons-react":"^3.0.2","@nutui/jdesign-icons-react-taro":"1.0.6-beta.2","@nutui/lottie-miniprogram":"^1.0.2","@nutui/touch-emulator":"^1.0.0","@react-spring/web":"~9.6.1","@swc/helpers":"^0.5.23","@use-gesture/react":"10.2.20","async-validator":"^4.2.5","classnames":"^2.5.1","codesandbox":"^2.2.3","lodash.kebabcase":"^4.1.1","lottie-react":"^2.4.2","react-fast-compare":"^3.2.2","react-transition-group":"^4.4.5","rehype-highlight":"^7.0.2"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0"},"optionalDependencies":{"@jmfe/npm-usage-stats-tool":"latest"}}