@nutui/nutui-react 1.3.15 → 1.4.0-beta.0

package/dist/packages/actionsheet/actionsheet.scss

@@ -1,16 +1,32 @@
 .nut-theme-dark {
-  .nut-actionsheet-panel {
-    .nut-actionsheet-cancel {
-      border-top: 1px solid $dark-background2;
+  .nut-actionsheet {
+    background-color: $dark5;
+    color: $dark1;
+    &__menu {
+      .nut-actionsheet__item {
+        background-color: $dark5;
+        color: $dark1 !important;
+        .subdesc {
+          color: $dark2;
+        }
+      }
+      .nut-actionsheet__item:hover {
+        background-color: $dark5;
+      }
     }
-    .nut-actionsheet-title {
-      border-bottom: 1px solid $dark-background2;
+    .nut-actionsheet__cancel {
+      background-color: $dark5;
+      color: $dark2;
+      border-top: none;
     }
-    .nut-actionsheet-cancel,
-    .nut-actionsheet-item,
-    .nut-actionsheet-title {
-      background: $dark-background;
-      color: $dark-color;
+    .nut-actionsheet__title {
+      background-color: $dark5;
+      color: $dark1;
+      border-top: none;
+    }
+    .desc {
+      background-color: $dark5;
+      color: $dark2;
     }
   }
 }
@@ -60,19 +76,19 @@
     font-size: $font-size-base;
     color: $title-color;
     text-align: center;
-    background-color: #fff;
+    background-color: $background-color3;
     cursor: pointer;
   }
 
   .desc {
     font-size: $font-size-2;
-    color: #999;
+    color: $title-color2;
   }
 
   .subdesc {
     display: block;
     font-size: $font-size-small;
-    color: #999;
+    color: $title-color2;
   }
 
   .nut-actionsheet__item-disabled {

package/dist/packages/address/address.scss

@@ -1,41 +1,67 @@
 .nut-theme-dark {
   .nut-address {
+    .nut-elevator {
+      &__list {
+        &__inner {
+          background-color: $dark6;
+        }
+      }
+    }
     &__header {
-      color: $dark-color;
+      color: $dark1;
 
       &__title {
-        color: $dark-color;
+        color: $dark1;
       }
     }
 
-    .custom-address {
-      .region-tab {
-        color: $dark-color;
+    &__custom {
+    }
+    .nut-address__region-tab {
+      .nut-address__tab-item {
+        color: $dark1;
+      }
+    }
+    .nut-address__region-con {
+      .nut-address__region-group {
+        .nut-address__region-item {
+          div {
+            color: $dark1;
+          }
+        }
       }
-      .region-con {
-        .region-group {
-          .region-item {
-            color: $dark-color;
+    }
+    .nut-address__exist-item-info {
+      color: $dark1;
+    }
+    &__exist {
+      &-group {
+        .nut-address__exist-ul {
+          li {
+            div {
+              i {
+                color: $dark1;
+              }
+            }
           }
         }
       }
     }
-
     .exist-address {
       .exist-address-group {
         .exist-ul {
           .exist-item {
-            color: $dark-color;
+            color: $dark1;
           }
         }
       }
 
       .choose-other {
-        border-top: 1px solid $dark-background;
+        border-top: 1px solid $dark4;
       }
     }
     &-custom-buttom {
-      border-top: 1px solid $dark-background;
+      border-top: 1px solid $dark4;
     }
   }
 }
@@ -51,11 +77,11 @@
     padding: 0 20px;
     text-align: center;
     font-weight: bold;
-    color: #333;
+    color: $title-color;
     line-height: 20px;
     &__title {
       display: block;
-      color: #262626;
+      color: $title-color;
       font-size: 18px;
     }
   }
@@ -69,13 +95,14 @@
       padding: 0 20px;
       display: flex;
       font-size: 13px;
-      color: #1d1e1e;
+      color: $title-color;
 
       .nut-address__tab-item {
         min-width: 2px;
         margin-right: 30px;
         display: block;
         &.active {
+          clear: $title-color;
           font-weight: bold;
         }
 
@@ -115,9 +142,10 @@
           align-items: center;
           margin-bottom: 20px;
           font-size: $font-size-1;
-          color: #333;
+          color: $title-color;
           &.active {
             font-weight: bold;
+            color: $title-color;
           }
 
           .nut-address__region-item--icon {
@@ -153,7 +181,7 @@
           margin-bottom: 20px;
           font-size: $font-size-1;
           line-height: 14px;
-          color: $black;
+          color: $title-color;
           &.active {
             font-weight: bold;
           }

package/dist/packages/animatingnumbers/countup.scss

@@ -1,3 +1,12 @@
+.nut-theme-dark {
+  .nut-countup {
+    &__list {
+      .nut-countup__listitem {
+        color: $dark1;
+      }
+    }
+  }
+}
 .nut-countup {
   &__list {
     display: inline-flex;
@@ -8,7 +17,7 @@
     height: $countup-height;
     overflow: hidden;
     font-size: $countup-base-size;
-    color: #000;
+    color: $title-color;
     font-weight: bold;
   }
   &__number,

package/dist/packages/audio/audio.scss

@@ -1,10 +1,18 @@
 .nut-theme-dark {
-  .nut-audio__icon {
-    .nut-audio__icon-box {
-      background: $dark-color;
+  .nut-audio {
+    .nut-audio__icon {
+      &-stop::after {
+        background-color: $dark3;
+      }
+    }
+    .nut-audio__none-container {
+      .nut-voice {
+        border: 1px solid $white;
+      }
     }
   }
 }
+
 .nut-audio {
   &__icon {
     position: relative;
@@ -17,7 +25,7 @@
       height: 30px;
       background: #fff;
       border-radius: 50%;
-      box-shadow: 0 0 8px rgba($color: $text-color, $alpha: 0.5);
+      box-shadow: 0 0 8px rgba(117, 117, 117, 0.5);
 
       .nut-icon-am-rotate {
         transform: rotate((360));
@@ -77,4 +85,9 @@
   .disable {
     color: blue;
   }
+  .nut-audio__none-container {
+    .nut-voice {
+      border: 1px solid $title-color;
+    }
+  }
 }

package/dist/packages/backtop/backtop.scss

@@ -1,8 +1,8 @@
 .nut-theme-dark {
   .nut-backtop {
     &.show {
-      background: $dark-background;
-      color: $dark-color;
+      background: $dark6;
+      color: $dark1;
     }
   }
 }
@@ -12,7 +12,8 @@
   &.show {
     width: 40px;
     height: 40px;
-    background: $white;
+    background: $background-color3;
+    color: $title-color;
     border: 1px solid $backtop-border-color;
     border-radius: 50%;
     display: flex;

package/dist/packages/badge/badge.scss

@@ -1,8 +1,8 @@
 .nut-theme-dark {
   .nut-badge {
     &.show {
-      background: $dark-background;
-      color: $dark-color;
+      background: $dark4;
+      color: $dark1;
     }
   }
 }

package/dist/packages/barrage/barrage.scss

@@ -1,3 +1,13 @@
+.nut-theme-dark {
+  .nut-barrage {
+    background-color: $dark6;
+    color: $dark1;
+    .barrage-item {
+      background: linear-gradient(to right, $dark3, $dark10);
+    }
+  }
+}
+
 .nut-barrage {
   position: absolute;
   left: 0;
@@ -6,7 +16,8 @@
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  background-color: #f7f8fa;
+  background-color: $background-color;
+  color: $title-color;
   .barrage-item {
     width: 120px;
     // max-width: 150px;
@@ -19,11 +30,7 @@
     text-align: center;
     white-space: pre;
     transform: translateX(100%);
-    background: linear-gradient(
-      to right,
-      rgba(0, 0, 0, 0.15),
-      rgba(0, 0, 0, 0)
-    );
+    background: linear-gradient(to right, $gray3, rgba(0, 0, 0, 0));
     box-sizing: border-box;
     &.move {
       will-change: transform;

package/dist/packages/button/button.scss

@@ -1,4 +1,60 @@
 
+.nut-theme-dark {
+  .nut-button {
+    &--default {
+      color: $dark1;
+      background: $dark6;
+    }
+
+    &--primary {
+      color: $dark6;
+    }
+
+    &--info {
+      color: $dark6;
+    }
+
+    &--success {
+      color: $dark6;
+    }
+
+    &--danger {
+      color: $dark6;
+    }
+
+    &--warning {
+      color: $dark6;
+    }
+    &--plain {
+      background: $dark6;
+
+      &.nut-button--primary {
+        color: $button-primary-border-color;
+        border-color: $button-primary-border-color;
+      }
+
+      &.nut-button--info {
+        color: $button-info-border-color;
+        border-color: $button-info-border-color;
+      }
+
+      &.nut-button--success {
+        color: $button-success-border-color;
+        border-color: $button-success-border-color;
+      }
+
+      &.nut-button--danger {
+        color: $button-danger-border-color;
+        border-color: $button-danger-border-color;
+      }
+
+      &.nut-button--warning {
+        color: $button-warning-border-color;
+        border-color: $button-warning-border-color;
+      }
+    }
+  }
+}
 .nut-button {
   position: relative;
   display: inline-block;

package/dist/packages/calendar/calendar.scss

@@ -1,17 +1,17 @@
 .nut-theme-dark {
   .nut-calendar {
-    background: $dark-background;
-    color: $dark-color;
+    background: $dark5;
+    color: $dark1;
     .nut-calendar-header {
-      background: $dark-background;
-      color: $dark-color;
+      background: $dark5;
+      color: $dark1;
     }
     .nut-calendar-content {
       .calendar-months-panel {
         .calendar-month-con {
           .calendar-month-day {
             &-choose {
-              background-color: $dark-calendar-choose-color;
+              background-color: rgba(#fa2c19, 0.09);
               color: $calendar-choose-font-color;
             }
           }
@@ -19,8 +19,8 @@
       }
     }
     .nut-calendar-footer {
-      background: $dark-background2;
-      color: $dark-color;
+      background: $dark5;
+      color: $dark1;
     }
   }
 }
@@ -32,6 +32,7 @@
   color: $calendar-base-color;
   font-size: $calendar-base-font;
   background-color: $white;
+  color: $gray1;
   overflow: hidden;
   height: 100%;
   flex-direction: column;

package/dist/packages/card/card.scss

@@ -3,7 +3,7 @@
 .nut-theme-dark {
   .nut-card {
     .nut-card__right {
-      color: $dark-color;
+      color: $dark1;
     }
   }
 }

package/dist/packages/cascader/cascader.scss

@@ -1,16 +1,24 @@
 
 .nut-theme-dark {
-  .nut-cascader__bar {
-    background: $dark-background2;
-    color: $dark-color;
-  }
-
-  .nut-tabs__titles {
-    background: $dark-background3 !important;
-  }
+  .nut-cascader {
+    .nut-cascader__bar {
+      background: $dark5;
+      color: $dark1;
+    }
 
-  .nut-cascader-item {
-    color: $dark-color-gray;
+    .nut-tabs__titles {
+      background: $dark5;
+    }
+    &__title {
+      color: $dark1;
+      background-color: $dark5;
+    }
+    .nut-tabpane {
+      background-color: $dark5;
+    }
+    .nut-cascader-item {
+      color: $dark1;
+    }
   }
 }
 
@@ -19,6 +27,7 @@
   font-size: $cascader-font-size;
   line-height: $cascader-line-height;
   &__title {
+    background-color: $gray6;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -26,12 +35,12 @@
     text-align: center;
     font-weight: bold;
     line-height: $cascader-title-line-height;
-    color: #1a1a1a;
+    color: $gray1;
     font-size: $cascader-title-font-size;
   }
   .nut-tabs__titles {
     padding: $cascader-tabs-item-padding;
-    background: #fff;
+    background: $gray6;
   }
   .nut-tabs__titles-item {
     flex: initial;

package/dist/packages/cell/cell.scss

@@ -1,8 +1,13 @@
 .nut-theme-dark {
   .nut-cell {
-    background: $dark-background2;
-    color: $dark-color;
+    background: $dark5;
+    color: $dark1;
     box-shadow: none;
+    &__value {
+      &--alone {
+        color: $cell-desc-color;
+      }
+    }
   }
 }
 
@@ -14,7 +19,7 @@
   padding: $cell-padding;
   background: $cell-background;
   border-radius: $cell-border-radius;
-  box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+  box-shadow: $cell-box-shaow;
   font-size: $cell-title-font;
   color: $cell-color;
   margin: 10px 0;
@@ -82,6 +87,7 @@
   }
   &__subtitle {
     font-size: $cell-title-desc-font;
+    color: $cell-subtitle-color;
   }
   &__value {
     display: inline-block;

package/dist/packages/cellgroup/cellgroup.scss

@@ -1,7 +1,7 @@
 .nut-theme-dark {
   .nut-cell-group__wrap {
-    background: $dark-background2;
-    color: $dark-color;
+    background: $dark5;
+    color: $dark1;
     box-shadow: none;
   }
 }

package/dist/packages/checkbox/checkbox.scss

@@ -1,7 +1,7 @@
 .nut-theme-dark {
   .nut-checkbox {
     &__label {
-      color: $dark-color;
+      color: $dark1;
       &--disabled {
         color: $checkbox-label-disable-color;
       }

package/dist/packages/circleprogress/circleprogress.scss

@@ -1,6 +1,6 @@
 .nut-theme-dark {
   .nut-circleprogress-text {
-    color: $dark-color;
+    color: $dark1;
   }
 }
 

package/dist/packages/collapseitem/collapseitem.scss

@@ -1,27 +1,46 @@
 .nut-theme-dark {
-  .nut-collapse-item {
-    .collapse-item {
-      background: $dark-background;
-      color: $dark-color;
-      box-shadow: none;
+  .nut-collapse {
+    &-item__header {
+      background-color: $dark6;
+      .nut-collapse-item__title {
+        color: $dark1;
+      }
+      .nut-collapse-item__icon-box {
+        .nut-collapse-item__icon {
+          i {
+            color: $dark1 !important;
+          }
+        }
+      }
+      .nut-collapse-item__sub-title {
+        color: $dark2;
+      }
+      &::after {
+        border-bottom: 1px solid $dark4;
+      }
     }
-    .collapse-wrapper {
-      .collapse-content,
-      .collapse-extraRender {
-        background: $dark-background;
-        color: $dark-color;
+    .nut-collapse-item__header--disabled {
+      .nut-collapse-item__title {
+        color: $dark2;
+      }
+      .nut-collapse-item__icon-box {
+        .nut-collapse-item__icon {
+          i {
+            color: $dark2 !important;
+          }
+        }
       }
     }
-    .collapse-extraWrapper {
-      .collapse-extraRender {
-        background: $dark-background;
+    &-item__content {
+      background-color: $dark6;
+      color: $dark1;
+      &-text {
+        color: $dark1;
       }
     }
   }
 }
 
-.nut-collapseitem {
-}
 .nut-collapse-item {
   &__header {
     position: relative;
@@ -29,10 +48,9 @@
     width: 100%;
     overflow: hidden;
     padding: 13px 0px 13px 26px;
-    color: #666666;
     font-size: 14px;
     line-height: 24px;
-    background-color: #fff;
+    background-color: $background-color3;
     box-sizing: border-box;
     &::after {
       position: absolute;
@@ -48,6 +66,7 @@
     }
   }
   &__title {
+    color: $title-color;
     display: flex;
     align-items: center;
     &-icon-left {
@@ -69,11 +88,17 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    color: $title-color2;
   }
   &__icon-box {
     display: flex;
     padding-right: 40px;
     position: relative;
+    .nut-collapse-item__icon {
+      i {
+        color: $title-color !important;
+      }
+    }
   }
   &__icon {
     display: flex;
@@ -87,6 +112,14 @@
   }
   &__header--disabled {
     color: #c2c2c2;
+    .nut-collapse-item__title {
+      color: $disable-color;
+    }
+    .nut-collapse-item__icon {
+      i {
+        color: $disable-color !important;
+      }
+    }
   }
   &__content {
     overflow: hidden;
@@ -94,9 +127,10 @@
     color: #666666;
     font-size: 14px;
     line-height: 1.5;
-    background-color: #fff;
+    background-color: $background-color3;
     transition: all 0.3s linear;
     &-text {
+      color: $title-color;
       padding: 12px 26px;
     }
   }

package/dist/packages/dialog/dialog.scss

@@ -14,7 +14,7 @@
     text-align: center;
     height: $dialog-header-height;
     font-size: $font-size-3;
-    color: $dialog-header-color;
+    color: $title-color;
     @include oneline-ellipsis();
   }