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

package/dist/cjs/packages/audio/audio.js

@@ -17,6 +17,7 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _taro = require("@tarojs/taro");
 var _iconsreacttaro = require("@nutui/icons-react-taro");
+var _components = require("@tarojs/components");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../range/index"));
 var _index1 = /*#__PURE__*/ _interop_require_default._(require("../button/index"));
 var _configprovider = require("../configprovider/configprovider");
@@ -85,19 +86,19 @@ var Audio = function Audio(props) {
     audioCtx.autoplay = autoplay || false;
     audioCtx.loop = loop || false;
     audioCtx.onPause(function() {
-        props.onPause && props.onPause(audioCtx);
+        onPause === null || onPause === void 0 ? void 0 : onPause(audioCtx);
     });
     audioCtx.onEnded(function() {
-        if (props.loop) {
+        if (loop) {
             console.warn(locale.audio.tips || 'onPlayEnd事件在loop=false时才会触发');
         } else {
-            props.onPlayEnd && props.onPlayEnd(audioCtx);
+            onPlayEnd === null || onPlayEnd === void 0 ? void 0 : onPlayEnd(audioCtx);
         }
     });
     audioCtx.onPlay(function() {
         var duration = audioCtx.duration;
         setTotalSeconds(Math.floor(duration));
-        props.onPlay && props.onPlay(audioCtx);
+        onPlay === null || onPlay === void 0 ? void 0 : onPlay(audioCtx);
     });
     audioCtx.onCanplay(function() {
         var intervalID = setInterval(function() {
@@ -107,7 +108,7 @@ var Audio = function Audio(props) {
             }
         }, 500);
         setIsCanPlay(true);
-        props.onCanPlay && props.onCanPlay(audioCtx);
+        onCanPlay === null || onCanPlay === void 0 ? void 0 : onCanPlay(audioCtx);
     });
     audioCtx.onTimeUpdate(function() {
         var time = parseInt("".concat(audioCtx.currentTime));
@@ -117,22 +118,21 @@ var Audio = function Audio(props) {
         setCurrentDuration(formatSeconds(audioCtx.currentTime.toString()));
     });
     audioCtx.onError(function(res) {
-        console.warn('code', res.errCode);
-        console.warn('message', res.errMsg);
+        console.warn('onError', res.errCode, res.errMsg);
     });
     var handleBack = function handleBack() {
         var currentTime = Math.floor(audioCtx.currentTime);
         statusRef.current.currentTime = Math.max(currentTime - 1, 0);
         setCurrentDuration(formatSeconds(statusRef.current.currentTime.toString()));
         audioCtx.seek(statusRef.current.currentTime);
-        props.onFastBack && props.onFastBack(audioCtx);
+        onFastBack === null || onFastBack === void 0 ? void 0 : onFastBack(audioCtx);
     };
     var handleForward = function handleForward() {
         var currentTime = Math.floor(audioCtx.currentTime);
         statusRef.current.currentTime = Math.min(currentTime + 1, audioCtx.duration);
         setCurrentDuration(formatSeconds(statusRef.current.currentTime.toString()));
         audioCtx.seek(statusRef.current.currentTime);
-        props.onForward && props.onForward(audioCtx);
+        onForward === null || onForward === void 0 ? void 0 : onForward(audioCtx);
     };
     var handleStatusChange = function handleStatusChange() {
         setPlaying(!playing);
@@ -143,21 +143,21 @@ var Audio = function Audio(props) {
         }
     };
     var renderIcon = function renderIcon() {
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-icon")
-        }, /*#__PURE__*/ _react.default.createElement("div", {
+        }, /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-icon-box} ").concat(playing ? "".concat(classPrefix, "-icon-play}") : "".concat(classPrefix, "-icon-stop}")),
             onClick: handleStatusChange
         }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Service, {
             className: playing ? 'nut-icon-loading' : ''
-        }))));
+        })));
     };
     var renderProgerss = function renderProgerss() {
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-progress")
-        }, /*#__PURE__*/ _react.default.createElement("div", {
+        }, /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "time"
-        }, currentDuration), /*#__PURE__*/ _react.default.createElement("div", {
+        }, currentDuration), /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-progress-bar-wrapper")
         }, /*#__PURE__*/ _react.default.createElement(_index.default, {
             value: percent,
@@ -169,9 +169,9 @@ var Audio = function Audio(props) {
             minDescription: null,
             "inactive-color": "#cccccc",
             "active-color": "#FF0F23"
-        })), /*#__PURE__*/ _react.default.createElement("div", {
+        })), /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "time"
-        }, formatSeconds("".concat(totalSeconds)) || '00:00:00')), /*#__PURE__*/ _react.default.createElement("div", {
+        }, formatSeconds("".concat(totalSeconds)) || '00:00:00')), /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: isCanPlay ? 'custom-button-group' : 'custom-button-group-disable'
         }, /*#__PURE__*/ _react.default.createElement(_index1.default, {
             type: "primary",
@@ -190,7 +190,7 @@ var Audio = function Audio(props) {
         }, locale.audio.forward || '快进')));
     };
     var renderNone = function renderNone() {
-        return /*#__PURE__*/ _react.default.createElement("div", {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-none-container"),
             onClick: handleStatusChange
         }, children);
@@ -207,10 +207,9 @@ var Audio = function Audio(props) {
                 return null;
         }
     };
-    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
+    return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
         className: "".concat(classPrefix, " ").concat(className),
         style: style
     }, rest), renderAudio());
 };
-Audio.defaultProps = defaultProps;
 Audio.displayName = 'NutAudio';

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

@@ -16,7 +16,7 @@
   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-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-button-default-font-weight, var(--nutui-font-weight, 400));
   text-align: center;
   cursor: pointer;
@@ -25,7 +25,7 @@
   user-select: none;
   touch-action: manipulation;
   -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-color-title, #1a1a1a));
   background: var(--nutui-button-default-background-color, transparent);
   border-width: var(--nutui-button-border-width, 1px);
 }
@@ -46,9 +46,9 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-black-10, rgba(0, 0, 0, 0.7));
+  background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border: inherit;
-  border-color: var(--nutui-black-10, rgba(0, 0, 0, 0.7));
+  border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border-radius: inherit;
   transform: translate(-50%, -50%);
   opacity: 0;
@@ -72,9 +72,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;
@@ -90,7 +90,7 @@
 .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-color-text, #505259));
 }
 .nut-button-default-disabled, .nut-button-default-solid-disabled {
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
@@ -98,7 +98,7 @@
   border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .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-color-text-help, #888b94));
 }
 .nut-button-default-outline-disabled, .nut-button-default-dashed-disabled {
   background: transparent;
@@ -111,58 +111,58 @@
 .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-xxl, 24px));
+  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .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-xxl, 24px));
+  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
+  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
 }
 .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-xxl, 24px));
+  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-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));
+  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .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));
+  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .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));
 }
 .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-s, 12px));
 }
 .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-s, 12px));
+  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
 }
 .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-s, 12px));
 }
 .nut-button-primary {
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
@@ -179,34 +179,34 @@
 }
 .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));
+  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));
 }
 .nut-button-primary-none {
   color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
 }
 .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-color-primary-disabled-special, #ffadbe));
 }
 .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));
 }
 .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-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .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));
 }
 .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-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .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));
+  background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -218,15 +218,15 @@
   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-color-success, #00d900));
+  border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
 }
 .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-color-primary-disabled-special, #ffadbe));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .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-color-success, #00d900));
 }
 .nut-button-success-none-disabled {
   color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
@@ -245,15 +245,15 @@
   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));
@@ -268,26 +268,26 @@
   color: var(--nutui-button-danger-color, var(--nutui-color-primary-text, #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-color-primary-disabled-special, #ffadbe)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
 }
 .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));
 }
 .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-color-primary-disabled-special, #ffadbe)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
 }
 .nut-button-danger-none {
   color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
 }
 .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-color-primary-disabled-special, #ffadbe)));
 }
 .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));
+  background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -300,15 +300,15 @@
   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-color-warning, #ffbf00));
+  border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
 }
 .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-color-warning, #ffbf00));
 }
 .nut-button-warning-none-disabled {
   color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
@@ -383,7 +383,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-color-primary-light-pressed, #ffebf1));
   border-radius: 2px;
   flex: 1;
   cursor: pointer;
@@ -395,8 +395,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-color-title, #1a1a1a));
   user-select: none;
 }
 .nut-range-bar {
@@ -404,6 +404,8 @@
   position: relative;
   width: 100%;
   height: 100%;
+  max-width: 100%;
+  max-height: 100%;
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
   border-radius: 2px;
   transition: all 0.2s;
@@ -453,8 +455,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-color-title, #1a1a1a));
   text-align: center;
   vertical-align: center;
   box-sizing: border-box;
@@ -498,7 +500,7 @@
   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-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-tick-active {
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
@@ -564,7 +566,7 @@
   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-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-vertical-tick-active {
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
@@ -678,7 +680,7 @@
   color: blue;
 }
 .nut-audio .nut-audio-none-container .nut-voice {
-  border: 1px solid var(--nutui-gray-7, #1a1a1a);
+  border: 1px solid var(--nutui-color-title, #1a1a1a);
   align-items: center;
 }
 

package/dist/cjs/packages/avatar/avatar.js

@@ -27,15 +27,14 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     size: (0, _platformtaro.harmonyAndRn)() ? '40' : '',
     shape: 'round',
     icon: '',
-    fit: 'cover',
     background: '#eee',
     color: '#666',
+    fit: 'cover',
     src: '',
     avatarIndex: 0
 });
 var classPrefix = "nut-avatar";
 var Avatar = function Avatar(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 = (0, _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 // 是否显示的最大头像个数
      = (0, _sliced_to_array._)((0, _react.useState)(false), 2), showMax = _useState[0], setShowMax = _useState[1];
@@ -46,10 +45,11 @@ var Avatar = function Avatar(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 = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "nut-avatar-".concat(groupSize || size || 'normal'), true), (0, _define_property._)(_obj, "nut-avatar-".concat(groupShape || shape), true), (0, _define_property._)(_obj, "nut-avatar-".concat(groupSize || size || 'normal', "-round"), shape === 'round' && true), _obj));
     var nativeClasses = (0, _classnames.default)((0, _define_property._)({}, "nut-avatar-first-child", avatarIndex === 1));
@@ -60,10 +60,10 @@ var Avatar = function Avatar(props) {
         height: sizeValue.indexOf(size) > -1 ? '' : (0, _pxtransform.default)(parseInt(size)),
         backgroundColor: "".concat(background),
         color: color
-    }, (0, _define_property._)(_obj1, (0, _platformtaro.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") : ''), (0, _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);
+    }, (0, _define_property._)(_obj1, (0, _platformtaro.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") : ''), (0, _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)
     };
     (0, _react.useEffect)(function() {
         var maxCount = groupMax || groupCount;
@@ -75,9 +75,7 @@ var Avatar = function Avatar(props) {
         groupCount
     ]);
     var errorEvent = function errorEvent() {
-        if (onError) {
-            onError();
-        }
+        onError && onError();
     };
     var clickAvatar = function clickAvatar(e) {
         onClick && onClick(e);
@@ -109,7 +107,7 @@ var Avatar = function Avatar(props) {
         }
     })), showMax && /*#__PURE__*/ _react.default.createElement(_components.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)))));
+    }, (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 = _index.default;

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

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