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

package/dist/cjs/packages/animate/style/animate.scss

@@ -1,7 +1,4 @@
 .nut-animate {
-  .nut-ani-container {
-    display: inline-block;
-  }
   /* Animation css */
   [class*='nut-animate-'] {
     animation-duration: 0.5s;

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

@@ -1,9 +1,10 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-animate {
   /* Animation css */
 }
-.nut-animate .nut-ani-container {
-  display: inline-block;
-}
 .nut-animate [class*=nut-animate-] {
   animation-duration: 0.5s;
   animation-timing-function: ease-out;

package/dist/cjs/packages/animatingnumbers/countup.js

@@ -38,7 +38,7 @@ var CountUp = function CountUp(props) {
     ]);
     var classPrefix = 'nut-countup';
     var countupRef = (0, _react.useRef)(null);
-    var timerRef = (0, _react.useRef)(0);
+    var timerRef = (0, _react.useRef)();
     var numbers = Array.from({
         length: 10
     }, function(v, i) {
@@ -54,74 +54,77 @@ var CountUp = function CountUp(props) {
         thousands,
         value
     ]);
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)([]), 2), numerArr = _useState[0], setNumerArr = _useState[1];
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)([]), 2), numberArr = _useState[0], setNumberArr = _useState[1];
     var _useState1 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), transformArr = _useState1[0], setTransformArr = _useState1[1];
     var isLoaded = (0, _react.useRef)(false);
     var setNumberTransform = (0, _react.useCallback)(function() {
-        if (countupRef.current && numerArr.length) {
+        if (countupRef.current && numberArr.length) {
             (0, _taro.createSelectorQuery)().selectAll('.nut-countup-listitem').node(function(numberItems) {
                 var transformArrCache = [];
                 Object.keys(numberItems).forEach(function(key) {
                     var elem = numberItems[Number(key)];
-                    var idx = Number(numerArr[Number(key)]);
-                    if (elem) {
+                    var idx = Number(numberArr[Number(key)]);
+                    var enabled = elem && typeof idx === 'number' && !Number.isNaN(idx);
+                    if (enabled) {
                         // 计算规则：父元素和实际列表高度的百分比，分割成20等份
                         var transform = idx || idx === 0 ? "translate(0, -".concat((idx === 0 ? 10 : idx) * 5, "%)") : '';
-                        transformArrCache.push(transform);
+                        transformArrCache.push({
+                            transitionDuration: "".concat(duration, "s"),
+                            transform: transform
+                        });
                     }
                 });
                 setTransformArr((0, _to_consumable_array._)(transformArrCache));
             }).exec();
         }
     }, [
-        numerArr
+        numberArr
     ]);
-    var numberEaseStyle = function numberEaseStyle(idx) {
-        return {
-            transition: "transform ".concat(duration, "s ease-in-out"),
-            transform: transformArr[idx] ? transformArr[idx] : null
-        };
-    };
     (0, _react.useEffect)(function() {
-        setNumberTransform();
+        if (numberArr.length) {
+            if (!isLoaded.current) {
+                isLoaded.current = true;
+                // @ts-ignore
+                timerRef.current = setTimeout(function() {
+                    setNumberTransform();
+                }, delay);
+            } else {
+                setNumberTransform();
+            }
+        }
+        return function() {
+            clearTimeout(timerRef.current);
+            isLoaded.current = false;
+        };
     }, [
-        numerArr,
+        numberArr,
+        delay,
         setNumberTransform
     ]);
     (0, _react.useEffect)(function() {
-        if (!isLoaded.current) {
-            isLoaded.current = true;
-            timerRef.current = window.setTimeout(function() {
-                setNumerArr(getShowNumber());
-            }, delay);
-        } else {
-            setNumerArr(getShowNumber());
-        }
-        return function() {
-            window.clearTimeout(timerRef.current);
-        };
+        setNumberArr(getShowNumber());
     }, [
         value,
-        delay,
         getShowNumber
     ]);
-    return /*#__PURE__*/ _react.default.createElement(_components.View, {
+    return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
         className: "".concat(classPrefix, " ").concat(className),
         ref: countupRef
-    }, /*#__PURE__*/ _react.default.createElement("ul", {
+    }, rest), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-list")
-    }, numerArr.map(function(item, idx) {
-        return /*#__PURE__*/ _react.default.createElement("li", {
+    }, numberArr.map(function(item, idx) {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-listitem ").concat(!Number.isNaN(Number(item)) ? "".concat(classPrefix, "-listitem-number") : ''),
             key: idx
-        }, !Number.isNaN(Number(item)) ? /*#__PURE__*/ _react.default.createElement("span", {
+        }, !Number.isNaN(Number(item)) ? /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-number"),
-            style: numberEaseStyle(idx)
+            style: transformArr === null || transformArr === void 0 ? void 0 : transformArr[idx]
         }, (0, _to_consumable_array._)(numbers).concat((0, _to_consumable_array._)(numbers)).map(function(number, subidx) {
-            return /*#__PURE__*/ _react.default.createElement("span", {
+            return /*#__PURE__*/ _react.default.createElement(_components.Text, {
+                className: "".concat(classPrefix, "-number-text"),
                 key: subidx
             }, number);
-        })) : /*#__PURE__*/ _react.default.createElement("span", {
+        })) : /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-separator")
         }, item));
     })));

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-countup-list {
   display: inline-flex;
   height: var(--nutui-countup-height, 32px);
@@ -7,29 +11,35 @@
 .nut-countup-listitem {
   height: var(--nutui-countup-height, 32px);
   overflow: hidden;
-  color: var(--nutui-color-title, #1a1a1a);
-  font-size: var(--nutui-countup-base-size, 18px);
-  font-weight: var(--nutui-font-weight-bold, 600);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
 }
 .nut-countup-listitem-number {
   margin: 0 var(--nutui-countup-lr-margin, 0);
   border-radius: var(--nutui-countup-border-radius, 4px);
-  color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-countup-color, var(--nutui-gray-7));
   background-color: var(--nutui-countup-bg-color, inherit);
 }
 .nut-countup-separator {
   display: flex;
   height: 80%;
   align-items: flex-end;
-  color: var(--nutui-countup-bg-color, inherit);
+  color: var(--nutui-countup-separator-color, var(--nutui-gray-7));
+  font-size: var(--nutui-countup-base-size, 18px);
+  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-countup-number {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: var(--nutui-countup-width, auto);
+  transition: transform 1s ease-in-out;
+  transform: translate(0, 0);
 }
-.nut-countup-number span {
+.nut-countup-number-text {
   height: var(--nutui-countup-height, 32px);
   line-height: var(--nutui-countup-height, 32px);
+  color: var(--nutui-countup-color, var(--nutui-gray-7));
+  font-size: var(--nutui-countup-base-size, 18px);
+  font-weight: var(--nutui-font-weight-bold, 600);
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-button {
   position: relative;
   display: flex;
@@ -17,17 +21,17 @@
   padding: 0;
   height: var(--nutui-button-default-height, 32px);
   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));
+  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-color-title, #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-color-mask, rgba(0, 0, 0, 0.7));
+  background-color: var(--nutui-black-10);
   border: inherit;
-  border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
+  border-color: var(--nutui-black-10);
   border-radius: inherit;
   transform: translate(-50%, -50%);
   opacity: 0;
@@ -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-color-text, #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-color-text-help, #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,23 +130,34 @@
 .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-xxl, 24px));
-  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
+  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-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));
+  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-xxl, 24px));
-  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
+  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-l, 16px));
-  font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
+  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-l, 16px));
@@ -136,12 +166,12 @@
 }
 .nut-button-large-children {
   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-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-s, 12px));
@@ -154,91 +184,99 @@
 .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-s, 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-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));
+  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-s, 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-special, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #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-special, #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-special, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #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-special, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #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, #00d900));
+  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, #00d900));
-  border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+  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-special, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #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, #00d900));
+  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));
@@ -259,56 +297,56 @@
   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-special, #ffadbe)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #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-special, #ffadbe)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #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-special, #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, #ffbf00));
+  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, #ffbf00));
-  border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+  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, #ffbf00));
+  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-pressed, #ffebf1));
+  background-color: var(--nutui-range-inactive-color, var(--nutui-brand-1));
   border-radius: 2px;
   flex: 1;
   cursor: pointer;
@@ -396,7 +422,7 @@
 }
 .nut-range-min, .nut-range-max {
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   user-select: none;
 }
 .nut-range-bar {
@@ -406,7 +432,7 @@
   height: 100%;
   max-width: 100%;
   max-height: 100%;
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
   border-radius: 2px;
   transition: all 0.2s;
 }
@@ -415,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%;
@@ -456,7 +482,7 @@
   justify-content: center;
   user-select: none;
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   text-align: center;
   vertical-align: center;
   box-sizing: border-box;
@@ -500,10 +526,10 @@
   height: 11px;
   left: 0px;
   border-radius: 6px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #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 {
@@ -566,10 +592,10 @@
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #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,
@@ -632,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;
@@ -645,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;
 }
@@ -680,7 +706,7 @@
   color: blue;
 }
 .nut-audio .nut-audio-none-container .nut-voice {
-  border: 1px solid var(--nutui-color-title, #1a1a1a);
+  border: 1px solid var(--nutui-gray-7);
   align-items: center;
 }