@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-button {
   position: relative;
   display: flex;
@@ -16,18 +20,18 @@
   margin: 0;
   padding: 0;
   height: var(--nutui-button-default-height, 32px);
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px));
-  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;
-  -webkit-appearance: none;
   user-select: none;
   touch-action: manipulation;
+  -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  color: var(--nutui-button-default-color, var(--nutui-gray-7, #1a1a1a));
+  color: var(--nutui-button-default-color, var(--nutui-gray-7));
   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);
@@ -46,9 +50,9 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-black-10, rgba(0, 0, 0, 0.7));
+  background-color: var(--nutui-black-10);
   border: inherit;
-  border-color: var(--nutui-black-10, rgba(0, 0, 0, 0.7));
+  border-color: var(--nutui-black-10);
   border-radius: inherit;
   transform: translate(-50%, -50%);
   opacity: 0;
@@ -72,9 +76,9 @@
   /* #endif */
 }
 .nut-button-wrap .nut-icon {
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px));
-  width: var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px));
-  height: var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px));
+  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;
@@ -87,23 +91,38 @@
   width: var(--nutui-button-default-height, 32px);
   padding: 0;
 }
+.nut-button-round {
+  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-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, var(--nutui-radius-s, 6px));
+}
+.nut-button-round-mini {
+  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-gray-6, #505259));
+  border-color: var(--nutui-button-default-border-color, var(--nutui-gray-4));
 }
 .nut-button-default-disabled, .nut-button-default-solid-disabled {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #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));
+  color: var(--nutui-button-primary-color, #ffffff);
+  background: var(--nutui-button-default-disabled, var(--nutui-gray-4));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
 }
 .nut-button-default-none-disabled {
-  color: var(--nutui-button-default-disabled-color, var(--nutui-gray-5, #888b94));
+  color: var(--nutui-button-default-disabled-color, var(--nutui-gray-5));
 }
 .nut-button-default-outline-disabled, .nut-button-default-dashed-disabled {
   background: transparent;
-  color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
 }
 .nut-button-normal {
   padding: var(--nutui-button-normal-padding, 0px 12px);
@@ -111,204 +130,223 @@
 .nut-button-xlarge {
   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-8, 24px));
-  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 500));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  border-radius: var(--nutui-radius-base, 8px);
+}
+.nut-button-xlarge .nut-button-text {
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-xlarge .nut-button-text-right {
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
 }
 .nut-button-xlarge .nut-icon {
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-8, 24px));
-  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-8, 24px));
-  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-8, 24px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-button-xlarge-children {
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-8, 24px));
-  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 500));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
 }
 .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-4, 16px));
-  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 500));
+  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);
+}
+.nut-button-large .nut-button-text-right {
+  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-4, 16px));
-  width: var(--nutui-button-large-font-size, var(--nutui-font-size-4, 16px));
-  height: var(--nutui-button-large-font-size, var(--nutui-font-size-4, 16px));
+  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-4, 16px));
-  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 500));
+  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-2, 12px));
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  border-radius: var(--nutui-radius-xs, 4px);
 }
 .nut-button-small .nut-icon {
-  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px));
-  width: var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px));
-  height: var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px));
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  width: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
 }
 .nut-button-small-children {
-  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px));
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
 }
 .nut-button-mini {
   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-2, 12px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  border-radius: var(--nutui-radius-xs, 4px);
 }
 .nut-button-mini .nut-icon {
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px));
-  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px));
-  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
 }
 .nut-button-mini-children {
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px));
+  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: var(--nutui-color-primary, #ff0f23);
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+  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, #ffffff);
   border-color: transparent;
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
+.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-solid-disabled {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
-  background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #ffadbe));
+  color: var(--nutui-button-primary-color, #ffffff);
+  background: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
 }
 .nut-button-primary-none {
-  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
 }
 .nut-button-primary-none-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #ffadbe));
+  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
 }
 .nut-button-primary-outline {
-  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
 }
 .nut-button-primary-outline-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #ffadbe));
+  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
 }
 .nut-button-primary-dashed {
-  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
 }
 .nut-button-primary-dashed-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #ffadbe));
+  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+}
+.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));
-  background: var(--nutui-button-success-background-color, var(--nutui-color-success, #2aa32a));
+  color: var(--nutui-button-success-color, #ffffff);
+  background: var(--nutui-button-success-background-color, var(--nutui-green-2));
   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));
   border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
 }
 .nut-button-success-outline, .nut-button-success-dashed {
-  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #2aa32a));
-  border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #2aa32a));
+  color: var(--nutui-button-success-border-color, var(--nutui-green-2));
+  border-color: var(--nutui-button-success-border-color, var(--nutui-green-2));
 }
 .nut-button-success-outline-disabled, .nut-button-success-dashed-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #ffadbe));
+  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
 }
 .nut-button-success-none {
-  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #2aa32a));
+  color: var(--nutui-button-success-border-color, var(--nutui-green-2));
 }
 .nut-button-success-none-disabled {
   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));
   border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
 }
 .nut-button-info-outline, .nut-button-info-dashed {
-  color: var(--nutui-button-info-border-color, var(--nutui-color-info, #1988fa));
-  border-color: var(--nutui-button-info-border-color, var(--nutui-color-info, #1988fa));
+  color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff));
+  border-color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff));
 }
 .nut-button-info-outline-disabled, .nut-button-info-dashed-disabled {
   color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
   border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
 }
 .nut-button-info-none {
-  color: var(--nutui-button-info-border-color, var(--nutui-color-info, #1988fa));
+  color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff));
 }
 .nut-button-info-none-disabled {
   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));
-  background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23));
+  color: var(--nutui-button-danger-color, #ffffff);
+  background: var(--nutui-button-danger-background-color, var(--nutui-red-2));
   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, #ffadbe)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #ffadbe)));
+  background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
 }
 .nut-button-danger-outline, .nut-button-danger-dashed {
-  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
-  border-color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+  color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
+  border-color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
 }
 .nut-button-danger-outline-disabled, .nut-button-danger-dashed-disabled {
-  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #ffadbe)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #ffadbe)));
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
 }
 .nut-button-danger-none {
-  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+  color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
 }
 .nut-button-danger-none-disabled {
-  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #ffadbe)));
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
 }
 .nut-button-warning {
-  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
-  background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #c47600));
+  color: var(--nutui-button-warning-color, #ffffff);
+  background: var(--nutui-button-warning-background-color, var(--nutui-yellow-2));
   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));
 }
 .nut-button-warning-outline, .nut-button-warning-dashed {
-  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #c47600));
-  border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #c47600));
+  color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
+  border-color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
 }
 .nut-button-warning-outline-disabled, .nut-button-warning-dashed-disabled {
   color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }
 .nut-button-warning-none {
-  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #c47600));
+  color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
 }
 .nut-button-warning-none-disabled {
   color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
@@ -333,18 +371,6 @@
   cursor: default;
   opacity: 0.9;
 }
-.nut-button-round {
-  border-radius: var(--nutui-button-border-radius, 8px);
-}
-.nut-button-round-xlarge, .nut-button-round-large {
-  border-radius: var(--nutui-button-large-border-radius, 12px);
-}
-.nut-button-round-small {
-  border-radius: var(--nutui-button-small-border-radius, 8px);
-}
-.nut-button-round-mini {
-  border-radius: var(--nutui-button-mini-border-radius, 6px);
-}
 .nut-button-square {
   border-radius: var(--nutui-button-square-border-radius, 0);
 }
@@ -383,7 +409,7 @@
   position: relative;
   height: var(--nutui-range-height, 4px);
   margin: 0 var(--nutui-range-margin, 15px);
-  background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffebf1));
+  background-color: var(--nutui-range-inactive-color, var(--nutui-brand-1));
   border-radius: 2px;
   flex: 1;
   cursor: pointer;
@@ -395,8 +421,8 @@
   content: "";
 }
 .nut-range-min, .nut-range-max {
-  font-size: var(--nutui-font-size-2, 12px);
-  color: var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-font-size-s, 12px);
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   user-select: none;
 }
 .nut-range-bar {
@@ -404,7 +430,9 @@
   position: relative;
   width: 100%;
   height: 100%;
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  max-width: 100%;
+  max-height: 100%;
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
   border-radius: 2px;
   transition: all 0.2s;
 }
@@ -413,10 +441,10 @@
   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));
+  border: var(--nutui-range-button-border, 1px solid var(--nutui-brand-6));
   outline: none;
   align-items: center;
   top: 50%;
@@ -453,8 +481,8 @@
   align-items: center;
   justify-content: center;
   user-select: none;
-  font-size: var(--nutui-font-size-2, 12px);
-  color: var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-font-size-s, 12px);
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   text-align: center;
   vertical-align: center;
   box-sizing: border-box;
@@ -498,10 +526,10 @@
   height: 11px;
   left: 0px;
   border-radius: 6px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
 }
 .nut-range-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
 }
 
 .nut-range-vertical-container {
@@ -564,10 +592,10 @@
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
 }
 .nut-range-vertical-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
 }
 
 [dir=rtl] .nut-range-button-wrapper, [dir=rtl] .nut-range-button-wrapper-right,
@@ -630,7 +658,7 @@
   height: 30px;
   background: #ffffff;
   border-radius: 50%;
-  box-shadow: 0 0 8px var(--nutui-color-text-disabled, #c2c4cc);
+  box-shadow: 0 0 8px var(--nutui-gray-4);
 }
 .nut-audio-icon .nut-audio-icon-stop {
   position: relative;
@@ -643,7 +671,7 @@
   content: "";
   height: 2px;
   width: 30px;
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-gray-4);
   transform: rotate(45deg);
   transform-origin: 8px -18px;
 }
@@ -678,7 +706,7 @@
   color: blue;
 }
 .nut-audio .nut-audio-none-container .nut-voice {
-  border: 1px solid var(--nutui-gray-7, #1a1a1a);
+  border: 1px solid var(--nutui-gray-7);
   align-items: center;
 }
 

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

@@ -7,6 +7,7 @@ import { View, Image } from "@tarojs/components";
 import classNames from "classnames";
 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 AvatarGroup from "../avatargroup/index";
@@ -15,15 +16,14 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     size: harmonyAndRn() ? '40' : '',
     shape: 'round',
     icon: '',
-    fit: 'cover',
     background: '#eee',
     color: '#666',
+    fit: 'cover',
     src: '',
     avatarIndex: 0
 });
 var classPrefix = "nut-avatar";
 export var Avatar = function(props) {
-    var _parent_propAvatarGroup, _parent_propAvatarGroup1, _parent_propAvatarGroup2, _parent_propAvatarGroup3, _parent_propAvatarGroup4, _parent_propAvatarGroup5, _parent_propAvatarGroup6, _parent_propAvatarGroup7, _parent_propAvatarGroup8, _parent_propAvatarGroup9, _parent_propAvatarGroup10;
     var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, size = _$_object_spread.size, shape = _$_object_spread.shape, background = _$_object_spread.background, color = _$_object_spread.color, src = _$_object_spread.src, icon = _$_object_spread.icon, fit = _$_object_spread.fit, avatarIndex = _$_object_spread.avatarIndex, className = _$_object_spread.className, style = _$_object_spread.style, onClick = _$_object_spread.onClick, onError = _$_object_spread.onError;
     var _useState // 是否显示的最大头像个数
      = _sliced_to_array(useState(false), 2), showMax = _useState[0], setShowMax = _useState[1];
@@ -34,10 +34,11 @@ export var Avatar = function(props) {
         'normal',
         'small'
     ];
-    var groupSize = parent === null || parent === void 0 ? void 0 : (_parent_propAvatarGroup = parent.propAvatarGroup) === null || _parent_propAvatarGroup === void 0 ? void 0 : _parent_propAvatarGroup.size;
-    var groupShape = parent === null || parent === void 0 ? void 0 : (_parent_propAvatarGroup1 = parent.propAvatarGroup) === null || _parent_propAvatarGroup1 === void 0 ? void 0 : _parent_propAvatarGroup1.shape;
-    var groupCount = parent === null || parent === void 0 ? void 0 : (_parent_propAvatarGroup2 = parent.propAvatarGroup) === null || _parent_propAvatarGroup2 === void 0 ? void 0 : _parent_propAvatarGroup2.avatarCount;
-    var groupMax = parent === null || parent === void 0 ? void 0 : (_parent_propAvatarGroup3 = parent.propAvatarGroup) === null || _parent_propAvatarGroup3 === void 0 ? void 0 : _parent_propAvatarGroup3.max;
+    var propAvatarGroup = parent.propAvatarGroup;
+    var groupSize = propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size;
+    var groupShape = propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.shape;
+    var groupCount = propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.avatarCount;
+    var groupMax = propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max;
     var _obj;
     var classes = classNames((_obj = {}, _define_property(_obj, "nut-avatar-".concat(groupSize || size || 'normal'), true), _define_property(_obj, "nut-avatar-".concat(groupShape || shape), true), _define_property(_obj, "nut-avatar-".concat(groupSize || size || 'normal', "-round"), shape === 'round' && true), _obj));
     var nativeClasses = classNames(_define_property({}, "nut-avatar-first-child", avatarIndex === 1));
@@ -48,10 +49,10 @@ 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 && (parent === null || parent === void 0 ? void 0 : (_parent_propAvatarGroup4 = parent.propAvatarGroup) === null || _parent_propAvatarGroup4 === void 0 ? void 0 : _parent_propAvatarGroup4.gap) ? "".concat(parent === null || parent === void 0 ? void 0 : (_parent_propAvatarGroup5 = parent.propAvatarGroup) === null || _parent_propAvatarGroup5 === void 0 ? void 0 : _parent_propAvatarGroup5.gap, "px") : ''), _define_property(_obj1, "zIndex", (parent === null || parent === void 0 ? void 0 : (_parent_propAvatarGroup6 = parent.propAvatarGroup) === null || _parent_propAvatarGroup6 === void 0 ? void 0 : _parent_propAvatarGroup6.level) === 'right' ? Math.abs(groupCount - avatarIndex) : ''), _obj1), style);
+    }, _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);
     var maxStyles = {
-        backgroundColor: "".concat(parent === null || parent === void 0 ? void 0 : (_parent_propAvatarGroup7 = parent.propAvatarGroup) === null || _parent_propAvatarGroup7 === void 0 ? void 0 : _parent_propAvatarGroup7.maxBackground),
-        color: "".concat(parent === null || parent === void 0 ? void 0 : (_parent_propAvatarGroup8 = parent.propAvatarGroup) === null || _parent_propAvatarGroup8 === void 0 ? void 0 : _parent_propAvatarGroup8.maxColor)
+        backgroundColor: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxBackground),
+        color: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxColor)
     };
     useEffect(function() {
         var maxCount = groupMax || groupCount;
@@ -63,41 +64,44 @@ export var Avatar = function(props) {
         groupCount
     ]);
     var errorEvent = function() {
-        if (onError) {
-            onError();
-        }
+        onError && onError();
     };
     var clickAvatar = function(e) {
         onClick && onClick(e);
     };
     return /*#__PURE__*/ React.createElement(React.Fragment, null, (showMax || !groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ React.createElement(View, {
         className: cls,
-        // {...rest}
         style: !showMax ? styles : maxStyles,
         onClick: clickAvatar,
         ref: avatarRef
     }, (!groupMax || avatarIndex <= groupMax) && /*#__PURE__*/ React.createElement(React.Fragment, null, src && /*#__PURE__*/ React.createElement(Image, {
         className: "nut-avatar-img nut-avatar-".concat(groupSize || size || 'normal', "-img"),
         src: src,
-        style: _object_spread({
+        style: {
             objectFit: fit
-        }, styles),
+        },
         onError: errorEvent
-    }), /*#__PURE__*/ React.isValidElement(icon) ? /*#__PURE__*/ React.cloneElement(icon, _object_spread_props(_object_spread({}, icon.props), {
-        className: "".concat(icon.props.className || '', " nut-avatar-icon nut-avatar-").concat(groupSize || size || 'normal', "-icon"),
+    }), /*#__PURE__*/ React.isValidElement(icon) ? /*#__PURE__*/ React.createElement(View, {
+        className: "nut-avatar-text"
+    }, /*#__PURE__*/ React.cloneElement(icon, _object_spread_props(_object_spread({}, icon.props), {
+        color: color,
+        className: "".concat(icon.props.className || '', " nut-avatar-icon nut-avatar-").concat(groupSize || size || 'normal', "-icon")
+    }))) : null, children && /*#__PURE__*/ React.createElement(View, {
         style: {
-            position: 'absolute'
-        }
-    })) : null, children && /*#__PURE__*/ React.createElement(View, {
+            color: color
+        },
         className: "nut-avatar-text nut-avatar-".concat(groupSize || size || 'normal', "-text")
-    }, children), !src && !icon && !children && !harmonyAndRn() && /*#__PURE__*/ React.createElement(User, {
-        className: "nut-avatar-icon nut-avatar-".concat(groupSize || size || 'normal', "-icon"),
+    }, children), !src && !icon && !children && /*#__PURE__*/ React.createElement(View, {
+        className: "nut-avatar-text"
+    }, /*#__PURE__*/ React.createElement(User, {
         style: {
-            position: 'absolute'
-        }
-    })), showMax && /*#__PURE__*/ React.createElement(View, {
-        className: "nut-avatar-text nut-avatar-".concat(groupSize || 'normal', "-text")
-    }, (parent === null || parent === void 0 ? void 0 : (_parent_propAvatarGroup9 = parent.propAvatarGroup) === null || _parent_propAvatarGroup9 === void 0 ? void 0 : _parent_propAvatarGroup9.maxContent) ? parent === null || parent === void 0 ? void 0 : (_parent_propAvatarGroup10 = parent.propAvatarGroup) === null || _parent_propAvatarGroup10 === void 0 ? void 0 : _parent_propAvatarGroup10.maxContent : "+ ".concat(avatarIndex - Number(groupMax || 0)))));
+            color: color
+        },
+        className: "nut-avatar-icon nut-avatar-".concat(groupSize || size || 'normal', "-icon")
+    }))), showMax && /*#__PURE__*/ React.createElement(View, {
+        className: "nut-avatar-text nut-avatar-".concat(groupSize || 'normal', "-text"),
+        style: _object_spread({}, maxStyles)
+    }, (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent : "+ ".concat(avatarIndex - Number(groupMax || 0)))));
 };
 Avatar.displayName = 'NutAvatar';
 Avatar.Group = AvatarGroup;