@nutui/nutui 3.1.23-beta.6 → 3.2.2-beta.1

package/dist/packages/_es/style.css

@@ -1,111 +1 @@
-.nut-categorypane__cateList {
-  display: flex;
-  background: rgb(255, 255, 255);
-}
-.nut-categorypane__cateListLeft {
-  background: rgb(246, 247, 249);
-}
-.nut-categorypane__cateListItemChecked, .nut-categorypane__cateListItem {
-  width: 100px;
-  height: 50px;
-  font-size: 13px;
-  font-family: PingFangSC;
-  font-weight: normal;
-  color: rgb(51, 51, 51);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.3s;
-}
-.nut-categorypane__cateListItemChecked {
-  background: rgb(255, 255, 255);
-  font-weight: 500;
-  transition: all 0.3s;
-}
-.nut-categorypane__cateListRight {
-  padding-left: 15px;
-  background: rgb(255, 255, 255);
-}
-.nut-categorypane__childTitle {
-  margin-top: 15px;
-  margin-bottom: 15px;
-  font-size: 13px;
-  font-family: PingFangSC;
-  font-weight: 500;
-  color: rgb(51, 51, 51);
-}
-.nut-categorypane__childItemList {
-  display: flex;
-  flex-wrap: wrap;
-}
-.nut-categorypane__childItem {
-  margin-right: 10px;
-}
-.nut-categorypane__childImg {
-  width: 75px;
-  height: 75px;
-  border-radius: 5px;
-}
-.nut-categorypane__skuName {
-  margin-right: 10px;
-  width: 75px;
-  height: 40px;
-  border: 1px solid rgb(153, 153, 153);
-  border-radius: 5px;
-  font-size: 12px;
-  font-family: PingFangSC;
-  font-weight: normal;
-  color: rgb(102, 102, 102);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.nut-categorypane__skuName:nth-child(3n) {
-  margin-right: 0;
-}
-.nut-categorypane__skuName:nth-child(n+4) {
-  margin-top: 15px;
-}
-.nut-categorypane__skuImg {
-  font-size: 12px;
-  font-family: PingFangSC;
-  font-weight: normal;
-  color: rgb(102, 102, 102);
-  margin-top: 10px;
-  margin-bottom: 10px;
-  text-align: center;
-}
-.nut-categorypane__selfItemList {
-  display: flex;
-  flex-wrap: wrap;
-}
-.nut-categorypane__selfskuName {
-  margin-left: 15px;
-  margin-top: 15px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 75px;
-  height: 40px;
-  border: 1px solid rgb(153, 153, 153);
-  border-radius: 5px;
-  font-size: 12px;
-  font-family: PingFangSC;
-  font-weight: normal;
-  color: rgb(102, 102, 102);
-}
-.nut-categorypane__skuName {
-  margin-left: 15px;
-  margin-top: 15px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 75px;
-  height: 40px;
-  border: 1px solid rgb(153, 153, 153);
-  border-radius: 5px;
-  font-size: 12px;
-  font-family: PingFangSC;
-  font-weight: normal;
-  color: rgb(102, 102, 102);
-}/* @import './index.scss'; */
+/* @import './index.scss'; */

package/dist/packages/actionsheet/index.scss

@@ -1,3 +1,20 @@
+.nut-theme-dark {
+  .nut-actionsheet-panel {
+    .nut-actionsheet-cancel {
+      border-top: 1px solid $dark-background2;
+    }
+    .nut-actionsheet-title {
+      border-bottom: 1px solid $dark-background2;
+    }
+    .nut-actionsheet-cancel,
+    .nut-actionsheet-item,
+    .nut-actionsheet-title {
+      background: $dark-background;
+      color: $dark-color;
+    }
+  }
+}
+
 .nut-actionsheet-panel {
   display: block;
   .nut-actionsheet-title {

package/dist/packages/address/index.scss

@@ -1,3 +1,45 @@
+.nut-theme-dark {
+  .nut-address {
+    &__header {
+      color: $dark-color;
+
+      &__title {
+        color: $dark-color;
+      }
+    }
+
+    .custom-address {
+      .region-tab {
+        color: $dark-color;
+      }
+      .region-con {
+        .region-group {
+          .region-item {
+            color: $dark-color;
+          }
+        }
+      }
+    }
+
+    .exist-address {
+      .exist-address-group {
+        .exist-ul {
+          .exist-item {
+            color: $dark-color;
+          }
+        }
+      }
+
+      .choose-other {
+        border-top: 1px solid $dark-background;
+      }
+    }
+    &-custom-buttom {
+      border-top: 1px solid $dark-background;
+    }
+  }
+}
+
 .nut-address {
   display: block;
   &__header {
@@ -152,4 +194,22 @@
       }
     }
   }
+
+  &-custom-buttom {
+    width: 100%;
+    height: 54px;
+    padding: 6px 0px 0;
+    border-top: 1px solid #f2f2f2;
+    .btn {
+      width: 90%;
+      height: 42px;
+      line-height: 42px;
+      margin: auto;
+      text-align: center;
+      background: $button-primary-background-color;
+      border-radius: 21px;
+      font-size: 15px;
+      color: $white;
+    }
+  }
 }

package/dist/packages/addresslist/index.scss

@@ -1,3 +1,43 @@
+.nut-theme-dark {
+  .nut-addresslist {
+    .nut-long-press-shell {
+      &__contain {
+        background-color: $dark-background2;
+        border-bottom: 1px solid $dark-color-gray;
+        color: $dark-color;
+        &-mask {
+          background-color: $dark-color3;
+          &-copy {
+            color: $dark-color-gray;
+            background-color: $dark-color;
+          }
+        }
+      }
+    }
+    .nut-swipe-shell,
+    .nut-general-shell {
+      background-color: $dark-background2;
+      border-bottom: 1px solid $dark-color-gray;
+      color: $dark-color;
+    }
+    .nut-item-contents {
+      &__info {
+        &-contact {
+          &-default {
+            background: $addresslist-contnts-contact-default;
+            color: $addresslist-contnts-contact-color;
+          }
+        }
+      }
+      &__addr {
+        color: $dark-color-gray;
+      }
+    }
+    &__bottom {
+      background-color: $dark-background2;
+    }
+  }
+}
 .nut-addresslist {
   overflow: hidden;
   .nut-long-press-shell {
@@ -5,10 +45,10 @@
       width: 100%;
       min-height: 76px;
       padding: 5px 10px;
-      background-color: #fff;
-      border-bottom: 1px solid #f0f0f0;
-      color: #333333;
-      font-size: 16px;
+      background-color: $addresslist-bg;
+      border-bottom: 1px solid $addresslist-border;
+      color: $addresslist-font-color;
+      font-size: $addresslist-font-size;
       display: flex;
       align-items: center;
       position: relative;
@@ -19,7 +59,7 @@
         left: 0;
         bottom: 0;
         right: 0;
-        background-color: rgba(0, 0, 0, 0.4);
+        background-color: $addresslist-mask-bg;
         display: flex;
         justify-content: space-around;
         align-items: center;
@@ -32,19 +72,19 @@
           width: 55px;
           border-radius: 50%;
           text-align: center;
-          background-color: #fff;
+          background-color: $white;
           font-size: 14px;
           display: flex;
           justify-content: center;
           align-items: center;
         }
         &-set {
-          color: #fff;
-          background-color: #f5a623;
+          color: $white;
+          background-color: $addresslist-set-bg;
         }
         &-del {
-          color: #fff;
-          background-color: #e1251b;
+          color: $white;
+          background-color: $addresslist-del-bg;
         }
       }
     }
@@ -69,10 +109,10 @@
     // width:100%;
     min-height: 76px;
     padding: 5px 10px;
-    background-color: #fff;
-    border-bottom: 1px solid #f0f0f0;
-    color: #333333;
-    font-size: 16px;
+    background-color: $addresslist-bg;
+    border-bottom: 1px solid $addresslist-border;
+    color: $addresslist-font-color;
+    font-size: $addresslist-font-size;
     display: flex;
     align-items: center;
     position: relative;
@@ -120,8 +160,8 @@
       }
     }
     &__addr {
-      color: #666666;
-      font-size: 12px;
+      color: $addresslist-addr-font-color;
+      font-size: $addresslist-addr-font-size;
       margin-top: 5px;
     }
   }
@@ -135,7 +175,7 @@
     width: 100%;
     padding: 12px 18px 24px;
     z-index: 100000;
-    background-color: #fff;
+    background-color: $addresslist-bg;
     box-sizing: border-box;
   }
 }

package/dist/packages/audio/index.scss

@@ -1,3 +1,11 @@
+.nut-theme-dark {
+  .nut-audio-icon {
+    .nut-audio-icon-box {
+      background: $dark-color;
+    }
+  }
+}
+
 .nut-audio {
   padding: 0;
   .progress-wrapper {

package/dist/packages/barrage/index.scss

@@ -46,3 +46,10 @@
     }
   }
 }
+.nut-theme-dark {
+  .nut-barrage {
+    .dmitem {
+      color: $dark-color-gray;
+    }
+  }
+}

package/dist/packages/button/index.scss

@@ -15,6 +15,7 @@
   appearance: none;
   user-select: none;
   touch-action: manipulation;
+  vertical-align: bottom;
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;

package/dist/packages/card/index.scss

@@ -1,10 +1,17 @@
+.nut-theme-dark {
+  .nut-card {
+    .nut-card__right {
+      color: $dark-color;
+    }
+  }
+}
+
 .nut-card {
   width: 100%;
   display: flex;
 
   .nut-card__left {
     width: 120px;
-    height: 120px;
     flex-shrink: 0;
 
     > img {

package/dist/packages/category/index.scss

@@ -1,3 +1,24 @@
+.nut-theme-dark {
+  .nut-category {
+    &__cateList {
+      background: $dark-background2;
+    }
+
+    &__cateListLeft {
+      background: $dark-background4;
+    }
+    &__cateListItem {
+      color: $dark-color-gray;
+    }
+    &__cateListItemChecked {
+      color: $dark-color;
+      background: $dark-background2;
+      &::before {
+        background: $category-list-item-checked-img-bg-color;
+      }
+    }
+  }
+}
 .nut-category {
   &__cateList {
     display: flex;
@@ -5,7 +26,7 @@
   }
 
   &__cateListLeft {
-    background: $category-ListLeft-bg-color;
+    background: $category-list-left-bg-color;
   }
 
   &__cateListItemChecked,
@@ -15,14 +36,14 @@
     font-size: 13px;
     font-family: PingFangSC;
     font-weight: normal;
-    color: $category-ListItem-color;
+    color: $category-list-item-color;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.3s;
   }
   &__cateListItemChecked {
-    background: $category-ListItemChecked-color;
+    background: $category-list-item-checked-color;
     font-weight: 500;
     transition: all 0.3s;
     position: relative;
@@ -32,7 +53,7 @@
       left: 0;
       width: 5px;
       height: 18px;
-      background: $category-ListItemChecked-img-bg-color;
+      background: $category-list-item-checked-img-bg-color;
     }
   }
 }

package/dist/packages/categorypane/index.scss

@@ -1,44 +1,25 @@
-.nut-categorypane {
-  &__cateList {
-    display: flex;
-    background: rgba(255, 255, 255, 1);
-  }
-
-  &__cateListLeft {
-    background: rgba(246, 247, 249, 1);
-  }
-
-  &__cateListItemChecked,
-  &__cateListItem {
-    width: 100px;
-    height: 50px;
-    font-size: 13px;
-    font-family: PingFangSC;
-    font-weight: normal;
-    color: rgba(51, 51, 51, 1);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: all 0.3s;
-  }
-  &__cateListItemChecked {
-    background: rgba(255, 255, 255, 1);
-    font-weight: 500;
-    transition: all 0.3s;
+.nut-theme-dark {
+  .nut-categorypane {
+    &__childTitle {
+      color: $white;
+    }
+    &__cateListRight {
+      background: $dark-background2;
+    }
   }
-
+}
+.nut-categorypane {
   &__cateListRight {
     padding-left: 15px;
-    background: rgba(255, 255, 255, 1);
+    background: $category-bg-color;
   }
-
   &__childTitle {
     margin-top: 15px;
     margin-bottom: 15px;
     font-size: 13px;
     font-family: PingFangSC;
     font-weight: 500;
-    color: rgba(51, 51, 51, 1);
+    color: $category-pane-title-color;
   }
 
   &__childItemList {
@@ -56,18 +37,21 @@
   }
 
   &__skuName {
+    margin-left: 15px;
+    margin-top: 15px;
     margin-right: 10px;
     width: 75px;
     height: 40px;
-    border: 1px solid rgba(153, 153, 153, 1);
+    border: 1px solid $category-pane-border-color;
     border-radius: 5px;
     font-size: 12px;
     font-family: PingFangSC;
     font-weight: normal;
-    color: rgba(102, 102, 102, 1);
+    color: $category-pane-gray-color;
     display: flex;
     justify-content: center;
     align-items: center;
+
     &:nth-child(3n) {
       margin-right: 0;
     }
@@ -80,7 +64,7 @@
     font-size: 12px;
     font-family: PingFangSC;
     font-weight: normal;
-    color: rgba(102, 102, 102, 1);
+    color: $category-pane-gray-color;
     margin-top: 10px;
     margin-bottom: 10px;
     text-align: center;
@@ -90,35 +74,4 @@
     display: flex;
     flex-wrap: wrap;
   }
-  &__selfskuName {
-    margin-left: 15px;
-    margin-top: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 75px;
-    height: 40px;
-    border: 1px solid rgba(153, 153, 153, 1);
-    border-radius: 5px;
-    font-size: 12px;
-    font-family: PingFangSC;
-    font-weight: normal;
-    color: rgba(102, 102, 102, 1);
-  }
-
-  &__skuName {
-    margin-left: 15px;
-    margin-top: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 75px;
-    height: 40px;
-    border: 1px solid rgba(153, 153, 153, 1);
-    border-radius: 5px;
-    font-size: 12px;
-    font-family: PingFangSC;
-    font-weight: normal;
-    color: rgba(102, 102, 102, 1);
-  }
 }

package/dist/packages/circleprogress/index.scss

@@ -1,3 +1,9 @@
+.nut-theme-dark {
+  .nut-circleprogress-text {
+    color: $dark-color;
+  }
+}
+
 .nut-circleprogress {
   position: relative;
 

package/dist/packages/collapseitem/index.scss

@@ -1,3 +1,24 @@
+.nut-theme-dark {
+  .nut-collapse-item {
+    .collapse-item {
+      background: $dark-background;
+      color: $dark-color;
+      box-shadow: none;
+    }
+    .collapse-wrapper {
+      .collapse-content,
+      .collapse-extraRender {
+        background: $dark-background;
+        color: $dark-color;
+      }
+    }
+    .collapse-extraWrapper {
+      .collapse-extraRender {
+        background: $dark-background;
+      }
+    }
+  }
+}
 .nut-collapse-item {
   position: relative;
   .collapse-item {

package/dist/packages/comment/index.scss

@@ -1,3 +1,40 @@
+.nut-theme-dark {
+  .nut-comment {
+    &-header {
+      &__user {
+        &-name {
+          color: $dark-color;
+        }
+
+        &-default {
+          &-name {
+            color: $dark-color;
+          }
+        }
+      }
+    }
+    &__follow {
+      &-title {
+        color: $dark-color;
+      }
+    }
+    &-bottom {
+      &__cpx {
+        color: $dark-color;
+
+        &-item {
+          span {
+            color: $dark-color;
+          }
+        }
+      }
+    }
+
+    .nut-comment-shop {
+      border-top: 1px solid $dark-color;
+    }
+  }
+}
 .nut-comment {
   width: 100%;
   font-size: 12px;

package/dist/packages/countup/index.scss

@@ -1,7 +1,28 @@
+.nut-theme-dark {
+  .nut-countup {
+    background: $dark-background;
+    color: $dark-color;
+    box-shadow: none;
+  }
+  .nut-collapse-item {
+    .collapse-wrapper {
+      .collapse-content,
+      .collapse-extraRender {
+        background: $dark-background;
+        color: $dark-color;
+      }
+    }
+    .collapse-extraWrapper {
+      .collapse-extraRender {
+        background: $dark-background;
+      }
+    }
+  }
+}
 .nut-countup {
-  display: inline-block;
-  width: 100%;
-  padding: 5px;
+  display: block;
+  // width: 100%;
+  padding: 5px 20px;
   color: #000;
   font-weight: bold;
   font-family: PingFangSC-Regular;