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

package/dist/packages/progress/progress.scss

@@ -1,3 +1,12 @@
+.nut-theme-dark {
+  .nut-progress {
+    &-text {
+      .nut-icon-checked {
+        color: rgba(38, 191, 38, 1) !important;
+      }
+    }
+  }
+}
 .nut-progress {
   display: flex;
   align-items: center;
@@ -6,6 +15,7 @@
   &-outer {
     flex: auto;
     .nut-progress-text {
+      color: red;
     }
     .nut-progress-active:before {
       content: '';

package/dist/packages/pulltorefresh/pulltorefresh.scss

@@ -1,3 +1,11 @@
+.nut-theme-dark {
+  .nut-pulltorefresh {
+    &-head-content {
+      color: $dark1;
+    }
+  }
+}
+
 .nut-pulltorefresh {
   &-head {
     overflow: hidden;
@@ -9,7 +17,7 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      color: #000;
+      color: $title-color;
       display: flex;
       justify-content: center;
       align-items: center;

package/dist/packages/radio/radio.scss

@@ -1,17 +1,20 @@
 .nut-theme-dark {
   .nut-radio {
     &__label {
-      color: $dark-color;
+      color: $dark1;
       &--disabled {
-        color: $radio-label-disable-color;
+        color: $dark2;
       }
     }
     &__button {
-      background: $dark-background;
-      color: $dark-color;
+      background: $dark4;
+      color: $dark1;
+      &--active {
+        color: $primary-color;
+      }
       &--disabled {
-        color: $radio-label-disable-color;
-        border: 1px solid $radio-label-disable-color;
+        color: $dark2;
+        border: 1px solid $dark2;
       }
     }
   }

package/dist/packages/radiogroup/radiogroup.scss

@@ -1,9 +1,58 @@
+.nut-theme-dark {
+  .nut-radiogroup {
+    &--vertical {
+      .nut-radio {
+        &__label {
+          margin-right: 5px;
+        }
+        &__button {
+          background-color: $dark4;
+          border: 1px solid $dark6;
+        }
+        &__button--active {
+          border-color: $radio-label-button-border-color;
+        }
+      }
+    }
+    &--horizontal {
+      .nut-radio {
+        &__label {
+          margin-right: 5px;
+        }
+        &__button {
+          background-color: $dark4;
+          border: 1px solid $dark6;
+        }
+        &__button--active {
+          border-color: $radio-label-button-border-color;
+        }
+      }
+    }
+  }
+}
 .nut-radiogroup {
   display: inline-block;
   .nut-radio {
     margin-bottom: 5px;
+    &__label {
+      margin-right: 5px;
+    }
+    &__button {
+      background-color: $gray4;
+    }
   }
   &--vertical {
+    .nut-radio {
+      &__label {
+        margin-right: 5px;
+      }
+      &__button {
+        border: 1px solid $gray6;
+      }
+      &__button--active {
+        border-color: $radio-label-button-border-color;
+      }
+    }
   }
   &--horizontal {
     .nut-radio {

package/dist/packages/range/range.scss

@@ -1,18 +1,18 @@
 
 .nut-theme-dark {
   .nut-range-container {
-    background: $dark-background;
+    background: $dark5;
     .min,
     .max {
-      color: $dark-color-gray;
+      color: $dark1;
     }
     .nut-range {
       &-mark-text {
-        color: $dark-color-gray;
+        color: $dark2;
       }
       &-button {
         .number {
-          color: $dark-color;
+          color: $dark1;
         }
       }
     }

package/dist/packages/row/row.scss

@@ -1,3 +1,19 @@
+.nut-theme-dark {
+  .flex-content {
+    line-height: $row-content-line-height;
+    color: $row-content-color;
+    text-align: center;
+    border-radius: $row-content-border-radius;
+    background: $dark4;
+    &.flex-content-light {
+      background: $dark8;
+    }
+    &.flex-content-height {
+      height: $row-content-height;
+    }
+  }
+}
+
 .flex-content {
   line-height: $row-content-line-height;
   color: $row-content-color;

package/dist/packages/searchbar/searchbar.scss

@@ -1,21 +1,30 @@
 .nut-theme-dark {
   .nut-searchbar {
-    background: $black;
-    &__search-label {
-      color: $white;
+    background: $dark5;
+    &__label {
+      color: $dark1;
+    }
+    &__action-text {
+      color: $dark1;
     }
     .nut-searchbar__input-clear {
       & .nut-searchbar__nut-icon-mask-close {
-        color: $white;
+        color: $dark1;
         &:hover {
           cursor: pointer;
-          color: $white;
+          color: $dark1;
         }
       }
     }
     &__right-search-icon,
     &__left-search-icon {
-      color: $white;
+      color: $dark1;
+    }
+    &__leftout-icon,
+    &__rightout-icon {
+      i {
+        color: $dark1;
+      }
     }
   }
 }
@@ -31,6 +40,7 @@
   width: $searchbar-width;
   padding: $searchbar-padding;
   background: $searchbar-background;
+  color: $gray1;
   box-sizing: border-box;
   &__content {
     position: relative;
@@ -69,6 +79,7 @@
     font-size: $font-size-small;
     // box-shadow: $searchbar-input-box-shadow;
     background: $searchbar-input-background;
+    color: $searchbar-input-text-color;
   }
   &__round {
     border-radius: $searchbar-input-border-radius;
@@ -82,6 +93,9 @@
     right: 3px;
     top: 47%;
     transform: translate(-50%, -40%);
+    i {
+      color: $gray1 !important;
+    }
   }
   .pos-right {
     right: 40px;

package/dist/packages/shortpassword/shortpassword.scss

@@ -1,20 +1,31 @@
 .nut-theme-dark {
-  .nut-shortpsd-title {
-    color: $dark-color;
-  }
-  .nut-input-normalw {
-    .nut-input-real {
-      background: $dark-background3;
+  .nut-shortpassword {
+    &__title {
+      color: $dark1;
+    }
+    &__subtitle {
+      color: $dark2;
+    }
+    &__message__forget {
+      color: $dark3;
+    }
+    &__input-real {
+      background-color: $dark6;
+      border-radius: 4px;
+    }
+    &__input-site {
+      background-color: $dark6;
     }
-    .nut-shortpsd-fake {
+    &__input-fake {
       border: none;
-      background: $dark-background3;
-      .nut-shortpsd-li {
-        .nut-shortpsd-icon {
-          background: $dark-color;
-        }
+      background-color: $dark4;
+      &__li__icon {
+        background-color: $dark1;
       }
     }
+    &__message__forget {
+      color: $dark2;
+    }
   }
 }
 

package/dist/packages/sidenavbar/sidenavbar.scss

@@ -1,3 +1,20 @@
+.nut-theme-dark {
+  .nut-sidenavbar {
+    background-color: $dark4;
+    &__title {
+      background: $dark4;
+      color: $white;
+    }
+    &__content {
+      .nut-subsidenavbar__list {
+        .nut-subsidenavbar__title {
+          background: $dark4;
+        }
+      }
+    }
+  }
+}
+
 $nutSidenavbarItemHeight: 40px;
 .nut-sidenavbar {
   color: #1d1d21;
@@ -5,7 +22,7 @@ $nutSidenavbarItemHeight: 40px;
   height: 100%;
   overflow: auto;
   display: block;
-  background-color: #fff;
+  background-color: $gray6;
   .arrow-icon {
     position: absolute;
     width: 0;
@@ -32,7 +49,8 @@ $nutSidenavbarItemHeight: 40px;
   &__title {
     height: $nutSidenavbarItemHeight;
     padding: 10px 8px 10px 20px;
-    background: #f5f5f5;
+    background: $gray4;
+    color: $gray1;
   }
   &__content {
     position: relative;

package/dist/packages/sidenavbaritem/sidenavbaritem.scss

@@ -1,9 +1,8 @@
 .nut-theme-dark {
-  .nut-sidenavbaritem {
-    background-color: $dark-background2;
-    &__title {
-      background-color: $dark-background2;
-      color: $dark-color;
+  .nut-subsidenavbar {
+    &__item {
+      background-color: $dark6;
+      color: $dark2;
     }
   }
 }
@@ -12,6 +11,15 @@ $nutSidenavbarItemHeight: 40px;
 .nut-subsidenavbar {
   &__item {
     height: $nutSidenavbarItemHeight;
+    color: $gray2;
     padding: 10px 8px 10px 55px;
   }
+  &__title {
+    background-color: $gray5;
+    color: $gray1;
+  }
+  &__list {
+    background-color: $gray6;
+    color: $gray2;
+  }
 }

package/dist/packages/signature/signature.scss

@@ -1,5 +1,21 @@
+.nut-theme-dark {
+  .nut-signature {
+    &__inner {
+      canvas {
+        background-color: $dark3;
+      }
+    }
+  }
+  .demo-tips {
+    background-color: $dark3;
+    color: $dark1;
+  }
+}
 .nut-signature {
   &__inner {
+    canvas {
+      background-color: #fff;
+    }
     height: $signature-height;
     margin-bottom: $signature-margin-bottom;
     border: $signature-border-width solid $signature-border-color;

package/dist/packages/step/step.scss

@@ -1,3 +1,40 @@
+.nut-theme-dark {
+  .nut-step {
+    &.nut-step-wait {
+      .nut-step-main {
+        .nut-step-title {
+          color: $dark2;
+        }
+        .nut-step-content {
+          color: $dark2;
+        }
+      }
+      .nut-step-head {
+        color: $dark2;
+      }
+      .nut-step-icon.is-text {
+        background-color: $dark5;
+      }
+      .nut-step-icon.is-icon {
+        background-color: $dark5;
+        .nut-icon {
+          color: $dark2;
+        }
+      }
+      .nut-step-content {
+        color: $dark2;
+      }
+    }
+  }
+  .nut-step-process,
+  .nut-step-finish {
+    .nut-step-main {
+      .nut-step-content {
+        color: $dark1;
+      }
+    }
+  }
+}
 .nut-step {
   flex-grow: 0;
   flex-shrink: 0;
@@ -50,6 +87,9 @@
     padding-left: 10%;
     padding-right: 10%;
     text-align: center;
+    .nut-step-content {
+      color: $title-color;
+    }
   }
   &-title {
     display: block;
@@ -114,8 +154,11 @@
         color: $steps-wait-icon-color;
       }
     }
-    .nut-step-content {
-      color: $steps-wait-content-color;
+    .nut-step-main {
+      .nut-step-title,
+      .nut-step-content {
+        color: $steps-wait-content-color;
+      }
     }
   }
 }
@@ -135,6 +178,9 @@
     display: inline-block;
     padding-left: 6%;
     text-align: left;
+    .nut-step-content {
+      color: $title-color;
+    }
   }
   &.nut-steps-dot {
     .nut-step-head {

package/dist/packages/subsidenavbar/subsidenavbar.scss

@@ -1,11 +1,11 @@
 .nut-theme-dark {
   .nut-subsidenavbar {
-    background-color: $dark-background2;
+    background-color: $dark5;
     &__title {
-      background-color: $dark-background3;
-      color: $dark-color;
+      background-color: $dark6;
+      color: $dark1;
       &__text {
-        color: $dark-color;
+        color: $dark1;
       }
     }
   }

package/dist/packages/switch/switch.scss

@@ -1,3 +1,17 @@
+.nut-theme-dark {
+  .nut-switch {
+    background-color: $dark4;
+    &.switch-close {
+      color: $dark1;
+    }
+    .switch-button {
+      .close {
+        color: $dark4;
+      }
+    }
+  }
+}
+
 .nut-switch {
   cursor: pointer;
   display: flex;

package/dist/packages/tabbar/tabbar.scss

@@ -1,6 +1,6 @@
 .nut-theme-dark {
   .nut-tabbar {
-    background: $dark-background;
+    background: $dark4;
   }
 }
 .nut-tabbar {

package/dist/packages/tabbaritem/tabbaritem.scss

@@ -1,7 +1,8 @@
 .nut-theme-dark {
   .nut-tabbar-item {
-    &__icon--unactive {
-      color: $dark-color-gray;
+    color: $dark1;
+    &--active {
+      color: $primary-color;
     }
   }
 }
@@ -10,7 +11,7 @@
   flex: 1;
   text-align: center;
   text-decoration: none;
-  color: $black;
+  color: $gray1;
   height: 100%;
   display: flex;
   justify-content: center;

package/dist/packages/table/table.scss

@@ -1,38 +1,44 @@
 .nut-theme-dark {
   .nut-table {
+    margin-bottom: 3px;
     &__main {
-      color: $dark-color;
-      background-color: $dark-background2;
+      color: $dark1;
+      background-color: $dark5;
 
       &--striped {
         .nut-table__main__head {
           &__tr {
-            background-color: $dark-background3;
+            background-color: $dark6;
           }
         }
 
         .nut-table__main__body {
           &__tr:nth-child(odd) {
-            background-color: $dark-color-gray;
+            background-color: $dark4;
           }
         }
 
         .nut-table__main__body {
           &__tr:nth-child(even) {
-            background-color: $dark-background3;
+            background-color: $dark6;
           }
         }
       }
     }
-
+    .nut-table__nodata {
+      background-color: $dark6;
+      .nut-table__nodata {
+        color: $dark1;
+      }
+    }
     &__summary {
-      color: $dark-color;
-      background-color: $dark-background;
+      color: $dark1;
+      background-color: $dark4;
     }
 
     &__nodata {
-      color: $dark-color;
-      background-color: $dark-background;
+      color: $dark1;
+      background-color: $dark4;
     }
   }
 }
@@ -41,11 +47,14 @@
   width: 100%;
   flex-direction: column;
   font-size: $font-size-2;
+  color: $title-color;
   &__main {
     display: table;
     width: 100%;
     border-collapse: collapse;
     overflow-x: hidden;
+    color: $title-color;
+    background-color: $background-color3;
     &--striped {
       .nut-table__main__head {
         &__tr {
@@ -110,6 +119,8 @@
     padding: $table-cols-padding;
   }
   &__nodata {
+    color: $title-color;
+    background-color: $background-color3;
     display: flex;
     align-items: center;
     justify-content: center;

package/dist/packages/tabpane/tabpane.scss

@@ -1,13 +1,14 @@
 .nut-theme-dark {
   .nut-tabpane {
-    background: $dark-background2;
+    background: $dark4;
   }
 }
 .nut-tabpane {
   width: 100%;
   flex-shrink: 0;
   display: block;
-  background-color: #fff;
+  background-color: $gray6;
+  color: $gray1;
   padding: 24px 20px;
   box-sizing: border-box;
   overflow: auto;

package/dist/packages/tabs/tabs.scss

@@ -1,12 +1,21 @@
 @import '../../styles/mixins/index';
 .nut-theme-dark {
   .nut-tabs {
+    .nut-tabpane {
+      color: $white;
+    }
     &__titles {
-      background: $dark-background3;
+      background: $dark5;
       &-item {
-        color: $dark-color-gray;
+        color: $dark1;
         &.active {
-          color: $dark-color;
+          color: $dark1;
+          .nut-tabs__titles-item__text {
+            color: $dark1;
+          }
+        }
+        &__text {
+          color: $dark1;
         }
       }
     }
@@ -14,7 +23,7 @@
       .nut-tabs__titles {
         &-item {
           &.active {
-            background-color: $dark-background2;
+            background-color: $dark5;
           }
         }
       }
@@ -63,7 +72,7 @@
         }
 
         &.active {
-          background-color: #fff;
+          background-color: $background-color3;
 
           .nut-tabs__titles-item__line {
             left: 10px;
@@ -163,6 +172,7 @@
       color: $tabs-titles-item-color;
 
       &__text {
+        color: $gray1;
         &.ellipsis {
           @include oneline-ellipsis();
         }
@@ -199,7 +209,9 @@
 
       &.active {
         font-weight: 600;
-
+        .nut-tabs__titles-item__text {
+          color: $gray1;
+        }
         .nut-tabs__titles-item__line {
           content: ' ';
           width: $tabs-horizontal-titles-item-active-line-width;

package/dist/packages/textarea/textarea.scss

@@ -1,8 +1,8 @@
 .nut-theme-dark {
   .nut-textarea {
-    background: $dark-background;
+    background: $dark5;
     &__textarea {
-      color: $dark-color;
+      color: $dark1;
     }
   }
 }