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

package/dist/cjs/packages/barrage/barrage.js

@@ -43,6 +43,7 @@ var InternalBarrage = function InternalBarrage(props, ref) {
     var barrageContainer = (0, _react.useRef)(null);
     var barrageCWidth = (0, _react.useRef)(0);
     var timer = (0, _react.useRef)(0);
+    var domTimer = (0, _react.useRef)(0);
     var index = (0, _react.useRef)(0);
     var times = (0, _react.useRef)([]);
     var historyIndex = (0, _react.useRef)(-1);
@@ -59,7 +60,7 @@ var InternalBarrage = function InternalBarrage(props, ref) {
             }
         };
     });
-    var getNodeWidth = function() {
+    var getNodeWidth = /*#__PURE__*/ function() {
         var _ref = (0, _async_to_generator._)(function(node) {
             var type, refe;
             var _arguments = arguments;
@@ -93,9 +94,16 @@ var InternalBarrage = function InternalBarrage(props, ref) {
             return _ref.apply(this, arguments);
         };
     }();
+    var clearDomTimeout = function clearDomTimeout() {
+        if (domTimer.current) {
+            clearTimeout(domTimer.current);
+            domTimer.current = 0;
+        }
+    };
     (0, _react.useEffect)(function() {
-        var init = function() {
+        var init = /*#__PURE__*/ function() {
             var _ref = (0, _async_to_generator._)(function() {
+                var _barrageBody_current;
                 return (0, _ts_generator._)(this, function(_state) {
                     switch(_state.label){
                         case 0:
@@ -109,6 +117,9 @@ var InternalBarrage = function InternalBarrage(props, ref) {
                             ];
                         case 1:
                             barrageCWidth.current = _state.sent();
+                            (_barrageBody_current = barrageBody.current) === null || _barrageBody_current === void 0 ? void 0 : _barrageBody_current.style.setProperty('--move-distance', "-".concat(barrageCWidth.current, "px"));
+                            index.current = 0;
+                            run();
                             _state.label = 2;
                         case 2:
                             return [
@@ -121,21 +132,17 @@ var InternalBarrage = function InternalBarrage(props, ref) {
                 return _ref.apply(this, arguments);
             };
         }();
-        init();
-        setTimeout(function() {
-            var _barrageBody_current;
-            (_barrageBody_current = barrageBody.current) === null || _barrageBody_current === void 0 ? void 0 : _barrageBody_current.style.setProperty('--move-distance', "-".concat(barrageCWidth.current, "px"));
-            index.current = 0;
-            run();
+        domTimer.current = window.setTimeout(function() {
+            init();
         }, 300);
         return function() {
-            clearInterval(timer.current);
+            clearDomTimeout();
         };
     }, [
         list
     ]);
     var run = function run() {
-        clearInterval(timer.current);
+        clearTimeout(timer.current);
         var intervalCache = interval;
         var _index = (loop ? index.current % list.length : index.current) % rows;
         var result = times.current[_index] - rows * interval;
@@ -146,80 +153,85 @@ var InternalBarrage = function InternalBarrage(props, ref) {
             play();
         }, intervalCache);
     };
-    var play = function() {
-        var _ref = (0, _async_to_generator._)(function() {
-            var _index, el, currentIndex, width, height, elScrollDuration, error;
+    var setStyle = /*#__PURE__*/ function() {
+        var _ref = (0, _async_to_generator._)(function(el, currentIndex) {
+            var refe, width, height, elScrollDuration, error;
             return (0, _ts_generator._)(this, function(_state) {
                 switch(_state.label){
                     case 0:
-                        if (!loop && index.current >= list.length) {
-                            return [
-                                2
-                            ];
-                        }
-                        _index = loop ? index.current % list.length : index.current;
-                        el = document.createElement("View");
-                        currentIndex = _index % rows;
-                        if (currentIndex <= historyIndex.current || historyIndex.current === 3 && currentIndex !== 0 || Math.abs(currentIndex - historyIndex.current) !== 1) {
-                            currentIndex = historyIndex.current + 1 >= rows ? 0 : historyIndex.current + 1;
-                        }
-                        historyIndex.current = currentIndex;
-                        el.innerHTML = list[_index];
-                        el.classList.add('barrage-item');
-                        barrageContainer.current.appendChild(el);
-                        _state.label = 1;
-                    case 1:
                         _state.trys.push([
-                            1,
-                            4,
+                            0,
+                            3,
                             ,
-                            5
+                            4
                         ]);
-                        return [
-                            4,
-                            getNodeWidth(el)
+                        if (!el) return [
+                            3,
+                            2
                         ];
-                    case 2:
-                        width = _state.sent();
                         return [
                             4,
-                            getNodeWidth(el, 'height')
+                            (0, _getrectbytaro.getRectByTaro)(el)
                         ];
-                    case 3:
-                        height = _state.sent();
+                    case 1:
+                        refe = _state.sent();
+                        width = refe.width;
+                        height = refe.height;
                         el.classList.add('move');
-                        elScrollDuration = width / barrageCWidth.current * duration;
-                        times.current[currentIndex] = Math.ceil(elScrollDuration);
-                        el.style.animationDuration = "".concat((duration + elScrollDuration).toFixed(2), "ms");
+                        elScrollDuration = Math.round(width / barrageCWidth.current * duration);
+                        times.current[currentIndex] = elScrollDuration;
+                        el.style.animationDuration = "".concat(duration + elScrollDuration, "ms");
                         el.style.top = "".concat(currentIndex * (height + gapY) + 20, "px");
                         el.style.width = "".concat(width, "px");
+                        _state.label = 2;
+                    case 2:
                         return [
                             3,
-                            5
+                            4
                         ];
-                    case 4:
+                    case 3:
                         error = _state.sent();
-                        console.log('异常自动流转到下一个');
+                        console.log('异常自动流转到下一个', error);
+                        barrageContainer.current.removeChild(el);
                         return [
                             3,
-                            5
+                            4
                         ];
-                    case 5:
+                    case 4:
                         el.addEventListener('animationend', function() {
+                            ;
                             barrageContainer.current.removeChild(el);
                         });
-                        index.current++;
-                        run();
                         return [
                             2
                         ];
                 }
             });
         });
-        return function play() {
+        return function setStyle(el, currentIndex) {
             return _ref.apply(this, arguments);
         };
     }();
+    var play = function play() {
+        if (!loop && index.current >= list.length) {
+            return;
+        }
+        var _index = loop ? index.current % list.length : index.current;
+        var el = document.createElement("View");
+        var currentIndex = _index % rows;
+        if (currentIndex <= historyIndex.current || historyIndex.current === 3 && currentIndex !== 0 || Math.abs(currentIndex - historyIndex.current) !== 1) {
+            currentIndex = historyIndex.current + 1 >= rows ? 0 : historyIndex.current + 1;
+        }
+        historyIndex.current = currentIndex;
+        el.innerHTML = list[_index];
+        barrageContainer.current.appendChild(el);
+        el.classList.add('barrage-item');
+        requestAnimationFrame(function() {
+            return setStyle(el, currentIndex);
+        });
+        index.current++;
+        run();
+    };
     return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
         className: classes,
         ref: barrageBody

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

@@ -15,7 +15,7 @@
     right: 0;
     padding: 4px 16px;
     border-radius: 16px;
-    font-size: $font-size-small;
+    font-size: $font-size-s;
     text-align: center;
     white-space: pre;
     transform: translateX(100%);

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

@@ -6,8 +6,8 @@
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  background-color: var(--nutui-gray-3, #f5f6fa);
-  color: var(--nutui-gray-7, #1a1a1a);
+  background-color: var(--nutui-color-background, #f5f6fa);
+  color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-barrage .barrage-item {
   display: block;
@@ -15,7 +15,7 @@
   right: 0;
   padding: 4px 16px;
   border-radius: 16px;
-  font-size: var(--nutui-font-size-2, 12px);
+  font-size: var(--nutui-font-size-s, 12px);
   text-align: center;
   white-space: pre;
   transform: translateX(100%);

package/dist/cjs/packages/button/button.js

@@ -55,7 +55,7 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
     ]);
     var getStyle = (0, _react.useCallback)(function() {
         var style = {};
-        if (props.color) {
+        if (color) {
             if (props.fill === 'outline' || props.fill === 'dashed') {
                 style.color = color;
                 if (!(color === null || color === void 0 ? void 0 : color.includes('gradient'))) {
@@ -72,7 +72,8 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         }
         return style;
     }, [
-        color
+        color,
+        props.fill
     ]);
     var getContStyle = (0, _react.useCallback)(function() {
         var style = {};
@@ -95,6 +96,7 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         }
     };
     if ((0, _taro.getEnv)() === 'WEB') {
+        ;
         rest.type = rest.formType;
     }
     var _obj;
@@ -114,7 +116,7 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
     }, loading && !(0, _platformtaro.harmonyAndRn)() && /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Loading, {
         className: "nut-icon-loading"
     }), !loading && icon ? icon : null, children && /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "nut-button-children nut-button-".concat(size, "-children nut-button-").concat(type, "-children ").concat(!(props.fill || disabled || loading) ? '' : "nut-button-".concat(type).concat(props.fill ? "-".concat(fill) : '').concat(disabled || loading ? '-disabled' : ''), " ").concat(icon || loading ? "nut-button-text" : '').concat(rightIcon ? " nut-button-text-right" : ''),
+        className: "nut-button-children nut-button-".concat(size, "-children nut-button-").concat(type, "-children ").concat(!(props.fill || disabled || loading) ? '' : "nut-button-".concat(type).concat(props.fill ? "-".concat(fill) : '').concat(disabled || loading ? '-disabled' : '')).concat(icon || loading ? " nut-button-text" : '').concat(rightIcon ? " nut-button-text-right" : ''),
         style: (0, _platformtaro.harmonyAndRn)() ? getContStyle() : {}
     }, children), rightIcon || null)));
 });

package/dist/cjs/packages/button/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));

package/dist/cjs/packages/calendar/calendar.d.ts

@@ -17,8 +17,10 @@ export interface CalendarProps {
     showSubTitle?: boolean;
     scrollAnimation?: boolean;
     firstDayOfWeek: number;
+    closeIcon?: ReactNode;
     disableDate: (date: CalendarDay) => boolean;
     renderHeaderButtons?: () => string | JSX.Element;
+    renderBottomButton?: () => string | JSX.Element;
     renderDay?: (date: CalendarDay) => string | JSX.Element;
     renderDayTop?: (date: CalendarDay) => string | JSX.Element;
     renderDayBottom?: (date: CalendarDay) => string | JSX.Element;

package/dist/cjs/packages/calendar/calendar.js

@@ -49,7 +49,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var Calendar = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
     var locale = (0, _configprovider.useConfig)().locale;
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), style = _$_object_spread.style, className = _$_object_spread.className, children = _$_object_spread.children, popup = _$_object_spread.popup, visible = _$_object_spread.visible, type = _$_object_spread.type, autoBackfill = _$_object_spread.autoBackfill, title = _$_object_spread.title, defaultValue = _$_object_spread.defaultValue, startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, showToday = _$_object_spread.showToday, startText = _$_object_spread.startText, endText = _$_object_spread.endText, confirmText = _$_object_spread.confirmText, showTitle = _$_object_spread.showTitle, showSubTitle = _$_object_spread.showSubTitle, scrollAnimation = _$_object_spread.scrollAnimation, firstDayOfWeek = _$_object_spread.firstDayOfWeek, disableDate = _$_object_spread.disableDate, renderHeaderButtons = _$_object_spread.renderHeaderButtons, renderDay = _$_object_spread.renderDay, renderDayTop = _$_object_spread.renderDayTop, renderDayBottom = _$_object_spread.renderDayBottom, onClose = _$_object_spread.onClose, onConfirm = _$_object_spread.onConfirm, onDayClick = _$_object_spread.onDayClick, onPageChange = _$_object_spread.onPageChange;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), style = _$_object_spread.style, className = _$_object_spread.className, children = _$_object_spread.children, popup = _$_object_spread.popup, visible = _$_object_spread.visible, type = _$_object_spread.type, autoBackfill = _$_object_spread.autoBackfill, title = _$_object_spread.title, defaultValue = _$_object_spread.defaultValue, startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, showToday = _$_object_spread.showToday, startText = _$_object_spread.startText, endText = _$_object_spread.endText, confirmText = _$_object_spread.confirmText, showTitle = _$_object_spread.showTitle, showSubTitle = _$_object_spread.showSubTitle, scrollAnimation = _$_object_spread.scrollAnimation, firstDayOfWeek = _$_object_spread.firstDayOfWeek, closeIcon = _$_object_spread.closeIcon, disableDate = _$_object_spread.disableDate, renderHeaderButtons = _$_object_spread.renderHeaderButtons, renderBottomButton = _$_object_spread.renderBottomButton, renderDay = _$_object_spread.renderDay, renderDayTop = _$_object_spread.renderDayTop, renderDayBottom = _$_object_spread.renderDayBottom, onClose = _$_object_spread.onClose, onConfirm = _$_object_spread.onConfirm, onDayClick = _$_object_spread.onDayClick, onPageChange = _$_object_spread.onPageChange;
     var calendarRef = (0, _react.useRef)(null);
     var close = function close() {
         onClose && onClose();
@@ -99,6 +99,7 @@ var Calendar = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
             firstDayOfWeek: firstDayOfWeek,
             disableDate: disableDate,
             renderHeaderButtons: renderHeaderButtons,
+            renderBottomButton: renderBottomButton,
             renderDay: renderDay,
             renderDayTop: renderDayTop,
             renderDayBottom: renderDayBottom,
@@ -118,7 +119,8 @@ var Calendar = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         onCloseIconClick: closePopup,
         style: {
             height: '83%'
-        }
+        },
+        closeIcon: closeIcon
     }, renderItem()) : renderItem());
 });
 Calendar.displayName = 'NutCalendar';

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

@@ -92,7 +92,7 @@
       top: -50px;
       left: 0;
       right: 0;
-      font-size: $font-size-small;
+      font-size: $font-size-s;
       color: $color-text;
     }
   }