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

package/dist/packages/divider/divider.scss

@@ -1,3 +1,12 @@
+.nut-theme-dark {
+  a {
+    color: $primary-link-color !important;
+  }
+  .nut-divider {
+    color: $white;
+  }
+}
+
 .nut-divider {
   display: flex;
   align-items: center;

package/dist/packages/elevator/elevator.scss

@@ -1,15 +1,18 @@
 .nut-theme-dark {
   .nut-elevator {
-    background-color: $dark-background2;
+    background-color: $dark6;
     &__list {
+      &__inner {
+        background-color: $dark6;
+      }
       &__item {
-        color: $dark-color;
+        color: $dark1;
         &__code {
-          color: $dark-color;
+          color: $dark1;
         }
       }
       &__fixed {
-        background-color: $dark-background2;
+        background-color: $dark6;
       }
     }
   }
@@ -28,6 +31,7 @@
       height: 100%;
       width: 100%;
       display: block;
+      background-color: $elevator-list-inner-bg-color;
       //   overflow: auto;
     }
     &__item {

package/dist/packages/empty/empty.scss

@@ -1,6 +1,9 @@
 .nut-theme-dark {
   .nut-empty {
-    background: $dark-background;
+    background: $dark6;
+    &__description {
+      color: $dark1;
+    }
   }
 }
 
@@ -11,7 +14,7 @@
   flex-direction: column;
   justify-content: center;
   padding: $empty-padding;
-
+  background-color: $background-color3;
   &__image {
     width: $empty-image-size;
     height: $empty-image-size;

package/dist/packages/fixednav/fixednav.scss

@@ -1,3 +1,11 @@
+.nut-theme-dark {
+  .nut-fixednav {
+    &__list {
+      // background-color: $dark2;
+      // color: $white;
+    }
+  }
+}
 .nut-fixednav {
   position: fixed;
   z-index: $fixednav-index;

package/dist/packages/formitem/formitem.scss

@@ -3,7 +3,7 @@
     &__body {
       &__slots {
         .nut-input-text {
-          color: $dark-color;
+          color: $dark1;
         }
       }
     }

package/dist/packages/griditem/griditem.scss

@@ -1,11 +1,14 @@
 .nut-theme-dark {
   .nut-grid-item {
     &__content {
-      background: $dark-background;
-      color: $dark-color;
+      background: $dark5;
+      color: $dark1;
+      i {
+        color: $dark1;
+      }
     }
     &__text {
-      color: $dark-color;
+      color: $dark1;
     }
   }
 }
@@ -31,7 +34,9 @@
     padding: $grid-item-content-padding;
     background: $grid-item-content-bg-color;
     border: 0 solid $grid-border-color;
-
+    i {
+      color: $grid-item-icon-color;
+    }
     &--border {
       border-right-width: 1px;
       border-bottom-width: 1px;

package/dist/packages/image/image.scss

@@ -1,11 +1,11 @@
 .nut-theme-dark {
   .nut-image {
     .nut-img-loading {
-      background: $dark-background;
+      background: $mask-color;
     }
 
     .nut-img-error {
-      background: $dark-background;
+      background: $mask-color;
     }
   }
 }

package/dist/packages/indicator/indicator.scss

@@ -1,3 +1,10 @@
+.nut-theme-dark {
+  .nut-indicator {
+    .nut-indicator__number {
+      border: none;
+    }
+  }
+}
 .nut-indicator {
   &__block {
     display: block;

package/dist/packages/infiniteloading/infiniteloading.scss

@@ -1,16 +1,15 @@
 .nut-theme-dark {
   .nut-infiniteloading {
-    .nut-infinite-top {
-      .top-text {
-        color: $dark-color;
+    .nut-infinite-container {
+      .infiniteLi {
+        color: $dark1;
       }
     }
-
     .nut-infinite-bottom {
-      color: $dark-color;
-
-      .bottom-text {
-        color: $dark-color;
+      .bottom-box {
+        .bottom-text {
+          color: $dark2;
+        }
       }
     }
   }
@@ -42,6 +41,11 @@
       }
     }
   }
+  .nut-infinite-container {
+    .infiniteLi {
+      color: $title-color;
+    }
+  }
   .nut-infinite-bottom {
     display: block;
     width: 100%;

package/dist/packages/input/input.scss

@@ -1,12 +1,26 @@
 .nut-theme-dark {
   .nut-input {
-    background: $dark-background;
+    background: $dark4;
     &-label {
-      color: $dark-color;
+      color: $dark1;
+      .label-string {
+        color: $dark1;
+      }
     }
     .input-text,
     &__text--readonly {
-      color: $dark-color;
+      color: $dark1;
+    }
+    &-left-icon,
+    &-right-icon {
+      i {
+        color: $dark1;
+      }
+    }
+    &-inner {
+      .nut-input-clear {
+        color: $dark1;
+      }
     }
   }
 }
@@ -32,6 +46,7 @@ textarea {
   }
   input {
     width: 230px;
+    color: $gray1;
     flex: 1;
     padding: 0 10px;
     padding-right: 35px;
@@ -39,7 +54,7 @@ textarea {
     border: 0;
     text-decoration: none;
   }
-  &__label {
+  &-label {
     width: 80px;
     overflow: hidden;
     text-align: left;
@@ -48,6 +63,7 @@ textarea {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+      color: $gray1;
     }
   }
   &__clear {
@@ -83,6 +99,7 @@ textarea {
     text-decoration: none;
     background: transparent;
     resize: none;
+    color: $gray1;
   }
 
   &-label {
@@ -129,6 +146,9 @@ textarea {
     display: flex;
     align-items: center;
     font-size: 0;
+    i {
+      color: $gray1;
+    }
   }
   &-clear,
   &-right-icon {

package/dist/packages/inputnumber/inputnumber.scss

@@ -1,20 +1,20 @@
 .nut-theme-dark {
   .nut-inputnumber {
     &__icon {
-      color: $dark-color;
+      color: $dark1;
       &--disabled {
-        color: $dark-color-gray;
+        color: $dark2;
       }
     }
     input,
     &__text--readonly {
-      background-color: $dark-background;
-      color: $dark-color;
-      border: 1px solid $dark-color-gray;
+      background-color: $dark4;
+      color: $dark1;
+      border: 1px solid $dark2;
     }
     &--disabled {
       input {
-        color: $dark-color-gray;
+        color: $dark3 !important;
       }
     }
   }
@@ -26,7 +26,7 @@
 
   &--disabled {
     input {
-      color: $inputnumber-icon-void-color;
+      color: $inputnumber-icon-void-color !important;
     }
   }
 
@@ -35,7 +35,7 @@
     font-size: $inputnumber-icon-size;
     cursor: pointer;
     &--disabled {
-      color: $inputnumber-icon-void-color;
+      color: $inputnumber-icon-disabled-color;
       cursor: not-allowed;
     }
   }
@@ -48,6 +48,7 @@
     outline: none;
     border: $inputnumber-input-border;
     margin: $inputnumber-input-margin;
+    color: $inputnumber-input-font-color;
     background-color: $inputnumber-input-background-color;
     border-radius: $inputnumber-input-border-radius;
   }

package/dist/packages/menu/menu.scss

@@ -3,10 +3,9 @@
 .nut-theme-dark {
   .nut-menu {
     .nut-menu__bar {
-      background-color: $dark-background;
-
+      background-color: $dark6;
       .nut-menu__item {
-        color: $dark-color;
+        color: $gray6;
       }
     }
   }

package/dist/packages/menuitem/menuitem.scss

@@ -1,8 +1,9 @@
 
 .nut-theme-dark {
   .nut-menu-item__content {
+    background: $dark6;
     .nut-menu-item__option {
-      color: $dark-color;
+      color: $dark1;
     }
   }
 }
@@ -13,7 +14,7 @@
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
-  background: #fff;
+  background: $menu-item-content-bg-color;
 
   &_fixed {
     width: 100%;

package/dist/packages/navbar/navbar.scss

@@ -1,10 +1,27 @@
 .nut-theme-dark {
   .nut-navbar {
-    background: $dark-background;
-    color: $dark-color;
+    background: $dark5;
+    color: $dark1;
+    box-shadow: none;
     .title {
-      color: $dark-color;
+      color: $dark1;
     }
+    &__left {
+      color: $dark2;
+      i {
+        color: $dark2 !important;
+      }
+    }
+    &__right {
+      color: $dark1;
+    }
+    &--border {
+      border-bottom: none;
+    }
+  }
+  .nut-tabs__titles-item__text {
+    background: $dark5;
+    color: $dark1;
   }
 }
 .nut-navbar {
@@ -97,6 +114,9 @@
 
     .nut-tabs__titles {
       background: $white;
+      &-item__text {
+        color: $title-color;
+      }
     }
 
     .nut-tabpane {
@@ -110,7 +130,7 @@
 
   &__left {
     font-size: $cell-desc-font;
-    color: $cell-desc-color;
+    color: $gray2;
     position: absolute;
     left: 0;
     top: 0;
@@ -122,7 +142,7 @@
   }
   &__right {
     font-size: $cell-desc-font;
-    color: $cell-desc-color;
+    color: $gray2;
     position: absolute;
     right: 0;
     top: 0;

package/dist/packages/noticebar/noticebar.scss

@@ -1,12 +1,18 @@
 .nut-theme-dark {
-  .nut-noticebar-page {
-    background: $dark-background2;
-    color: $dark-color;
-  }
-
-  .nut-noticebar-vertical {
-    .horseLamp_list_item {
-      color: $dark-color;
+  .nut-noticebar {
+    .wrap {
+      .content {
+        a {
+          color: $noticebar-color;
+        }
+      }
+    }
+    .nut-noticebar-vertical {
+      .horseLamp_list {
+        .custom-item {
+          color: $noticebar-color;
+        }
+      }
     }
   }
 }

package/dist/packages/numberkeyboard/numberkeyboard.scss

@@ -1,9 +1,30 @@
 .nut-theme-dark {
   .nut-numberkeyboard {
-    background-color: $dark-background4;
-    .number-board-body .key-board-wrapper .key {
-      background-color: $dark-background5;
-      color: $dark-color;
+    background-color: $dark5;
+    &__body {
+      background-color: $dark5;
+      color: $dark1;
+      .nut-numberkeyboard__body__keys,
+      .nut-numberkeyboard__sidebar {
+        .key-board-wrapper {
+          background-color: $dark5;
+          .key {
+            background-color: $dark4;
+            color: $dark1;
+          }
+        }
+      }
+    }
+    .nut-numberkeyboard__header {
+      .nut-numberkeyboard__header__tit {
+        color: $dark1;
+      }
+    }
+
+    &__header {
+      &__close {
+        color: $dark1 !important;
+      }
     }
   }
 }
@@ -13,7 +34,7 @@
   padding: $numberkeyboard-padding;
   background-color: $numberkeyboard-background-color;
   user-select: none;
-
+  background-color: $gray4;
   .nut-numberkeyboard__header {
     position: relative;
     display: flex;
@@ -26,6 +47,7 @@
     font-size: $numberkeyboard-header-font-size;
 
     .nut-numberkeyboard__header__tit {
+      color: $title-color;
       display: inline-block;
     }
 
@@ -58,7 +80,7 @@
       flex-basis: 33%;
       box-sizing: border-box;
       padding: 0 6px 6px 0;
-
+      background-color: $gray5;
       .key {
         display: flex;
         align-items: center;

package/dist/packages/overlay/overlay.scss

@@ -1,3 +1,22 @@
+.nut-theme-dark {
+  .nut-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: $dark7;
+  }
+  .overlay-fade-enter-active {
+    .wrapper {
+      .content {
+        background-color: $dark2;
+        color: $white;
+      }
+    }
+  }
+}
+
 .nut-overlay {
   position: fixed;
   top: 0;
@@ -11,6 +30,12 @@
 }
 .overlay-fade-enter-active {
   animation: nut-fade-in;
+  .wrapper {
+    .content {
+      background-color: $overlay-content-bg-color;
+      color: $overlay-content-color;
+    }
+  }
 }
 .overlay-fade-leave-active {
   animation: nut-fade-out;

package/dist/packages/pagination/pagination.scss

@@ -1,19 +1,30 @@
 .nut-theme-dark {
   .nut-pagination {
-    &-prev,
-    &-item,
-    &-next {
-      background: $dark-background;
-      border-color: $dark-color-gray;
+    &__prev,
+    &__item,
+    &__next {
+      background: $dark5;
+      border: 1px solid $dark5;
     }
     &-simple {
-      background: $dark-background;
+      background: $dark4;
     }
     .simple-border {
-      border-color: $dark-color-gray;
+      border-color: $dark2;
     }
     .disabled {
-      background: $dark-background;
+      background-color: $dark2;
+      color: $disable-color;
+      border: 1px solid $dark2;
+    }
+    &.active {
+      background: $dark-pagination-active-background-color;
+    }
+    &__contain {
+      .nut-pagination__item {
+        background-color: $dark5;
+        border: 1px solid $dark4;
+      }
     }
   }
 }

package/dist/packages/picker/picker.scss

@@ -1,20 +1,50 @@
 
 .nut-theme-dark {
   .nut-picker {
+    background-color: $dark6;
     &__title {
-      color: $dark-color;
+      color: $dark1;
     }
-
-    &-roller {
-      &-item {
-        color: $dark-color;
-      }
-
-      &-item-tile {
-        color: $dark-color;
+    &__confirm-btn {
+      color: $dark1;
+      cursor: pointer;
+    }
+    .nut-picker__control {
+      background-color: $dark10;
+    }
+    .nut-picker-indicator {
+      background-color: $dark7;
+      z-index: 0;
+      border-top: 1px solid $gray2;
+      border-bottom: 1px solid $gray2;
+    }
+    .nut-picker-mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: linear-gradient(
+          180deg,
+          rgba(31, 31, 31, 1),
+          rgba(31, 31, 31, 0.4)
+        ),
+        linear-gradient(0deg, rgba(31, 31, 31, 1), rgba(31, 31, 31, 0.4));
+      background-position: top, bottom;
+      background-size: 100% 108px;
+      background-repeat: no-repeat;
+      z-index: 3;
+    }
+    .nut-picker-list {
+      .nut-picker-roller {
+        &-item {
+          color: $white;
+          &-tile {
+            color: $white;
+          }
+        }
       }
     }
-
     &-roller-mask {
       background-image: linear-gradient(
           180deg,
@@ -29,16 +59,16 @@
     }
 
     &-content {
-      color: $dark-color;
+      color: $dark1;
     }
     &-item {
-      color: $dark-color;
+      color: $dark1;
     }
   }
 }
 
 .nut-picker {
-  background-color: #fff;
+  background-color: $background-color3;
   width: 100%;
 }
 .nut-picker__control {
@@ -90,12 +120,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-image: linear-gradient(
-        180deg,
-        rgba(255, 255, 255, 0.9),
-        rgba(255, 255, 255, 0.4)
-      ),
-      linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
+    background-image: $picker-mask-bg-img;
     background-position: top, bottom;
     background-size: 100% 108px;
     background-repeat: no-repeat;
@@ -139,7 +164,7 @@
       position: absolute;
       top: 0;
       width: 100%;
-      color: #262626;
+      color: $gray1;
     }
 
     .nut-picker-roller-item-tile {
@@ -147,7 +172,7 @@
       width: 100%;
       height: 36px;
       line-height: 36px;
-      color: #262626;
+      color: $gray1;
       font-size: 14px;
     }
     .nut-picker-roller-item-hidden {

package/dist/packages/popup/popup.scss

@@ -1,12 +1,15 @@
 .nut-theme-dark {
   .nut-popup {
-    background: $dark-background2;
+    background: $dark6;
   }
   .nutui-popup {
     &__close-icon {
-      color: $dark-color;
+      color: $dark1;
     }
   }
+  .popup-slide-center-enter-done {
+    color: $dark1;
+  }
 }
 
 .popup-slide {
@@ -103,6 +106,7 @@
   max-height: 100%;
   overflow-y: auto;
   background-color: $white;
+  color: $gray1;
   transition: transform 0.5s;
   -webkit-overflow-scrolling: touch;
 }