@nutui/nutui-react-taro 3.0.0-beta.8 → 3.0.0

package/dist/es/packages/animate/style/style.harmony.css

@@ -0,0 +1,236 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-animate {
+  /* Animation CSS */
+  /* Slide Animations */
+  /* Shake Animation */
+  /* Ripple Animation */
+  /* Breath Animation */
+  /* Twinkle Animation */
+  /* Flicker Animation */
+  /* Jump Animation */
+  /* Float Animation */
+  /* Loop Animation */
+}
+.nut-animate [class*=nut-animate-] {
+  animation-duration: 0.5s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+@keyframes slide-right {
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes slide-left {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes slide-top {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes slide-bottom {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.nut-animate .nut-animate-slide-right {
+  animation-name: slide-right;
+}
+.nut-animate .nut-animate-slide-left {
+  animation-name: slide-left;
+}
+.nut-animate .nut-animate-slide-top {
+  animation-name: slide-top;
+}
+.nut-animate .nut-animate-slide-bottom {
+  animation-name: slide-bottom;
+}
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(-9px);
+  }
+  20% {
+    transform: translateX(8px);
+  }
+  30% {
+    transform: translateX(-7px);
+  }
+  40% {
+    transform: translateX(6px);
+  }
+  50% {
+    transform: translateX(-5px);
+  }
+  60% {
+    transform: translateX(4px);
+  }
+  70% {
+    transform: translateX(-3px);
+  }
+  80% {
+    transform: translateX(2px);
+  }
+  90% {
+    transform: translateX(-1px);
+  }
+}
+.nut-animate .nut-animate-shake {
+  animation-name: shake;
+}
+@keyframes ripple {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+.nut-animate .nut-animate-ripple {
+  animation-name: ripple;
+}
+@keyframes breath {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+.nut-animate .nut-animate-breath {
+  animation-name: breath;
+  animation-duration: 2700ms;
+  animation-timing-function: ease-in-out;
+  animation-direction: alternate;
+}
+.nut-animate .nut-animate-twinkle {
+  position: relative;
+}
+.nut-animate .nut-animate-twinkle::after, .nut-animate .nut-animate-twinkle::before {
+  width: 60px;
+  height: 60px;
+  content: "";
+  box-sizing: border-box;
+  border: 4px solid rgba(255, 255, 255, 0.6);
+  position: absolute;
+  border-radius: 30px;
+  right: 50%;
+  margin-top: -30px;
+  margin-right: -30px;
+  z-index: 1;
+  transform: scale(0);
+  animation: twinkle 2s ease-out infinite;
+}
+.nut-animate .nut-animate-twinkle::after {
+  animation-delay: 0.4s;
+}
+@keyframes twinkle {
+  0% {
+    transform: scale(0);
+  }
+  20% {
+    opacity: 1;
+  }
+  50%, 100% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+.nut-animate .nut-animate-flicker {
+  position: relative;
+  overflow: hidden;
+}
+.nut-animate .nut-animate-flicker::after {
+  width: 100px;
+  height: 60px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0.73;
+  content: "";
+  background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%);
+  animation: flicker 1.5s linear infinite;
+  transform: skewX(-20deg);
+  filter: blur(3px);
+}
+@keyframes flicker {
+  0% {
+    transform: translateX(-100px) skewX(-20deg);
+  }
+  40%, 100% {
+    transform: translateX(150px) skewX(-20deg);
+  }
+}
+@keyframes jump {
+  0% {
+    transform: rotate(0) translateY(0);
+  }
+  25% {
+    transform: rotate(10deg) translateY(20px);
+  }
+  50% {
+    transform: rotate(0) translateY(-10px);
+  }
+  75% {
+    transform: rotate(-10deg) translateY(20px);
+  }
+  100% {
+    transform: rotate(0) translateY(0);
+  }
+}
+.nut-animate .nut-animate-jump {
+  transform-origin: center center;
+  animation: jump 0.7s linear;
+}
+@keyframes float-pop {
+  0% {
+    top: 0;
+  }
+  25% {
+    top: 1px;
+  }
+  50% {
+    top: 4px;
+  }
+  75% {
+    top: 1px;
+  }
+  100% {
+    top: 0;
+  }
+}
+.nut-animate .nut-animate-float {
+  position: relative;
+  animation-name: float-pop;
+}
+.nut-animate .loop {
+  animation-iteration-count: infinite;
+}

package/dist/es/packages/animatingnumbers/style/style.harmony.css

@@ -0,0 +1,4 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */

package/dist/es/packages/audio/audio.js

@@ -8,7 +8,7 @@ import { Service } from "@nutui/icons-react-taro";
 import { View } from "@tarojs/components";
 import Range from "../range/index";
 import Button from "../button/index";
-import { useConfig } from "../configprovider/configprovider";
+import { useConfig } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     className: '',

package/dist/es/packages/audio/style/style.css

@@ -5,10 +5,11 @@
 .nut-button {
   position: relative;
   display: flex;
-  /* #ifdef rn harmony*/
+  display: inline-block;
+  /* #ifdef harmony*/
   width: 80px;
   /* #endif */
-  /* #ifndef rn harmony*/
+  /* #ifndef harmony*/
   width: auto;
   /* #endif */
   flex-direction: row;
@@ -19,8 +20,8 @@
   margin: 0;
   padding: 0;
   height: var(--nutui-button-default-height, 32px);
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
-  font-weight: var(--nutui-button-default-font-weight, var(--nutui-font-weight, 400));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  font-weight: var(--nutui-font-weight, 400);
   text-align: center;
   cursor: pointer;
   transition: opacity 0.2s;
@@ -30,7 +31,7 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
   background: var(--nutui-button-default-background-color, transparent);
-  border-width: var(--nutui-button-border-width, 1px);
+  border-width: var(--nutui-button-border-width, 0.5px);
 }
 .nut-button-text {
   margin-left: var(--nutui-button-text-icon-margin, 4px);
@@ -70,14 +71,14 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  /* #ifndef rn harmony */
+  /* #ifndef harmony */
   background: initial;
   /* #endif */
 }
 .nut-button-wrap .nut-icon {
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
-  width: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
-  height: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
 }
 .nut-button-loading::before, .nut-button-disabled::before {
   display: none;
@@ -91,24 +92,27 @@
   padding: 0;
 }
 .nut-button-round {
-  border-radius: var(--nutui-button-border-radius, 8px);
+  border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
+}
+.nut-button-round-xlarge {
+  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
 }
-.nut-button-round-xlarge, .nut-button-round-large {
-  border-radius: var(--nutui-button-large-border-radius, 12px);
+.nut-button-round-large {
+  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
 }
 .nut-button-round-small {
-  border-radius: var(--nutui-button-small-border-radius, 8px);
+  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
 }
 .nut-button-round-mini {
-  border-radius: var(--nutui-button-mini-border-radius, 6px);
+  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
 }
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
-  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text, #505259));
+  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-button-default-disabled, .nut-button-default-solid-disabled {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-primary-color, #ffffff);
   background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
   border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
 }
@@ -127,7 +131,6 @@
   height: var(--nutui-button-xlarge-height, 48px);
   padding: var(--nutui-button-xlarge-padding, 0px 24px);
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
-  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
   border-radius: var(--nutui-radius-base, 8px);
 }
 .nut-button-xlarge .nut-button-text {
@@ -143,14 +146,12 @@
 }
 .nut-button-xlarge-children {
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
-  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-button-large {
   height: var(--nutui-button-large-height, 40px);
   padding: var(--nutui-button-large-padding, 0px 16px);
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
-  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
-  border-radius: var(--nutui-radius-base, 8px);
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  border-radius: var(--nutui-radius-s, 6px);
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -159,19 +160,18 @@
   margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
 }
 .nut-button-large .nut-icon {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
-  width: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
-  height: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-button-large-children {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
-  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-button-small {
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px 8px);
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  border-radius: var(--nutui-radius-s, 6px);
+  border-radius: var(--nutui-radius-xs, 4px);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -185,7 +185,7 @@
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px 8px);
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  border-radius: var(--nutui-radius-s, 6px);
+  border-radius: var(--nutui-radius-xs, 4px);
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
@@ -196,20 +196,24 @@
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
 }
 .nut-button-primary {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-primary-color, #ffffff);
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-primary-children {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-primary-color, #ffffff);
 }
 .nut-button-primary-solid {
   background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-primary-color, #ffffff);
   border-color: transparent;
+  font-weight: var(--nutui-font-weight-bold, 600);
 }
-.nut-button-primary-disabled, .nut-button-primary-solid-disabled {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+.nut-button-primary-solid.nut-button-small, .nut-button-primary-solid.nut-button-mini {
+  font-weight: var(--nutui-font-weight, 400);
+}
+.nut-button-primary-disabled, .nut-button-primary-disabled.nut-button-icononly, .nut-button-primary-solid-disabled {
+  color: var(--nutui-button-primary-color, #ffffff);
   background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
   border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
@@ -235,14 +239,17 @@
   color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
   border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
+.nut-button-primary.nut-button-solid.nut-button-normal {
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
 .nut-button-success {
-  color: var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-success-color, #ffffff);
   background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-success-children {
-  color: var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-success-color, #ffffff);
 }
 .nut-button-success-solid-disabled {
   background: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
@@ -263,13 +270,13 @@
   color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
 }
 .nut-button-info {
-  color: var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-info-color, #ffffff);
   background: var(--nutui-button-info-background-color, var(--nutui-color-info-background, #0073ff));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-info-children {
-  color: var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-info-color, #ffffff);
 }
 .nut-button-info-solid-disabled {
   background: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
@@ -290,13 +297,13 @@
   color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
 }
 .nut-button-danger {
-  color: var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-danger-color, #ffffff);
   background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-danger-children {
-  color: var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-danger-color, #ffffff);
 }
 .nut-button-danger-solid-disabled {
   background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
@@ -317,16 +324,16 @@
   color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
 }
 .nut-button-warning {
-  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-warning-color, #ffffff);
   background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-warning-children {
-  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-warning-color, #ffffff);
 }
 .nut-button-warning-disabled, .nut-button-warning-solid-disabled {
-  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-warning-color, #ffffff);
   background: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }
@@ -434,7 +441,7 @@
   display: flex;
   width: var(--nutui-range-button-width, 24px);
   height: var(--nutui-range-button-height, 24px);
-  background: var(--nutui-range-button-background, var(--nutui-color-primary-text, #ffffff));
+  background: var(--nutui-range-button-background, #ffffff);
   border-radius: 50%;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
   border: var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #ff0f23));

package/dist/es/packages/audio/style/style.harmony.css

@@ -0,0 +1,75 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-audio-icon {
+  position: relative;
+  display: inline-block;
+}
+.nut-audio-icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  background: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 8px #c2c4cc;
+}
+.nut-audio-icon .nut-audio-icon-stop {
+  position: relative;
+}
+.nut-audio-icon .nut-audio-icon-stop::after {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%);
+  content: "";
+  height: 2px;
+  width: 30px;
+  background: #c2c4cc;
+  transform: rotate(45deg);
+  transform-origin: 8px -18px;
+}
+.nut-audio-progress {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 0px auto;
+  padding: 10px 0;
+}
+.nut-audio-progress-bar-wrapper {
+  flex: 1;
+  margin: 0 10px;
+}
+.nut-audio-progress .time {
+  min-width: 50px;
+  font-size: 12px;
+  text-align: center;
+}
+.nut-audio-progress .nut-range-button {
+  width: 8px;
+  height: 8px;
+}
+.nut-audio .custom-button-group .nut-button-primary {
+  margin: 0 5px;
+}
+.nut-audio .custom-button-group-disable .nut-button-primary {
+  margin: 0 5px;
+  pointer-events: none;
+}
+.nut-audio .disable {
+  color: blue;
+}
+.nut-audio .nut-audio-none-container .nut-voice {
+  border: 1px solid #1a1a1a;
+  align-items: center;
+}
+
+[dir=rtl] .nut-audio-icon .nut-audio-icon-stop::after,
+.nut-rtl .nut-audio-icon .nut-audio-icon-stop::after {
+  left: auto;
+  right: 50%;
+  transform: rotate(-45deg);
+  transform-origin: 20px -18px;
+}

package/dist/es/packages/avatar/avatar.js

@@ -9,11 +9,11 @@ import { User } from "@nutui/icons-react-taro";
 import { AvatarContext } from "../avatargroup/context";
 // import Image from '@/packages/image/index.taro'
 import { ComponentDefaults } from "../../utils/typings";
-import { harmonyAndRn } from "../../utils/platform-taro";
+import { harmony } from "../../utils/platform-taro";
 import AvatarGroup from "../avatargroup/index";
 import pxTransform from "../../utils/px-transform";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
-    size: harmonyAndRn() ? '40' : '',
+    size: harmony() ? '40' : '',
     shape: 'round',
     icon: '',
     background: '#eee',
@@ -49,7 +49,7 @@ export var Avatar = function(props) {
         height: sizeValue.indexOf(size) > -1 ? '' : pxTransform(parseInt(size)),
         backgroundColor: "".concat(background),
         color: color
-    }, _define_property(_obj1, harmonyAndRn() ? 'marginRight' : 'marginLeft', avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap, "px") : ''), _define_property(_obj1, "zIndex", (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === 'right' ? Math.abs(groupCount - avatarIndex) : ''), _obj1), style);
+    }, _define_property(_obj1, harmony() ? 'marginRight' : 'marginLeft', avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap, "px") : ''), _define_property(_obj1, "zIndex", (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === 'right' ? Math.abs(groupCount - avatarIndex) : ''), _obj1), style);
     var maxStyles = {
         backgroundColor: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxBackground),
         color: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxColor)

package/dist/es/packages/avatar/style/style.css

@@ -25,7 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background, #f5f6fa);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -38,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background, #f5f6fa);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 

package/dist/es/packages/avatar/style/style.harmony.css

@@ -0,0 +1,64 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-avatar {
+  position: relative;
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+}
+.nut-avatar-round {
+  border-radius: 999px;
+  overflow: hidden;
+}
+.nut-avatar-square {
+  border-radius: 5px;
+}
+.nut-avatar-first-child {
+  margin-left: 0;
+  margin-right: 0;
+}
+.nut-avatar-img {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+.nut-avatar-icon {
+  background-size: 100% 100%;
+}
+.nut-avatar-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.nut-avatar-large {
+  width: 60px;
+  height: 60px;
+}
+.nut-avatar-large-img {
+  width: 60px;
+  height: 60px;
+}
+.nut-avatar-large-icon {
+  width: 60px;
+  height: 60px;
+}
+.nut-avatar-large-text {
+  width: 60px;
+  height: 60px;
+}
+.nut-avatar-small {
+  width: 32px;
+  height: 32px;
+}
+.nut-avatar-small-text {
+  width: 32px;
+  height: 32px;
+}