@nutui/nutui-react 3.1.0-beta.1 → 4.0.0-beta.2

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

@@ -76,7 +76,7 @@
       .nut-icon {
         width: $icon-size-12;
         height: $icon-size-12;
-        color: var(--nutui-black-5);
+        color: var(--nutui-black-5, rgba(0, 0, 0, 0.2));
         margin-right: $searchbar-inner-gap;
       }
       &::after {
@@ -94,7 +94,7 @@
     display: flex;
     flex-direction: row;
     z-index: 2;
-    background-color: #fff;
+    background-color: $searchbar-content-background;
     top: scale-px(9px);
     left: scale-px(6px);
     font-size: $font-size-s;
@@ -105,7 +105,7 @@
       flex-direction: row;
       align-items: center;
       padding: scale-px(4px) scale-px(8px);
-      background-color: #f7f8fc;
+      background-color: $color-background-sunken;
       border-radius: scale-px(4px);
       margin-right: scale-px(2px);
     }
@@ -114,7 +114,7 @@
       width: $icon-size-6;
       height: $icon-size-6;
       font-size: $icon-size-6;
-      color: #c2c4cc;
+      color: $color-text-disabled;
       margin-left: scale-px(4px);
     }
   }
@@ -196,7 +196,7 @@
     padding: scale-px(5px) $searchbar-gap;
 
     .nut-searchbar-content {
-      border: scale-px(0.5px) solid #ff5c67;
+      border: scale-px(0.5px) solid $color-primary;
     }
   }
 }

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

@@ -81,7 +81,7 @@ page {
 .nut-searchbar-clear.nut-searchbar-icon .nut-icon {
   width: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
   height: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
-  color: var(--nutui-black-5);
+  color: var(--nutui-black-5, rgba(0, 0, 0, 0.2));
   margin-right: var(--nutui-searchbar-inner-gap, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-clear.nut-searchbar-icon::after {
@@ -96,7 +96,7 @@ page {
   display: flex;
   flex-direction: row;
   z-index: 2;
-  background-color: #fff;
+  background-color: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff));
   top: calc(9px * var(--nut-scale-f, 1));
   left: calc(6px * var(--nut-scale-f, 1));
   font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
@@ -107,7 +107,7 @@ page {
   flex-direction: row;
   align-items: center;
   padding: calc(4px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1));
-  background-color: #f7f8fc;
+  background-color: var(--nutui-color-background-sunken, #f7f8fc);
   border-radius: calc(4px * var(--nut-scale-f, 1));
   margin-right: calc(2px * var(--nut-scale-f, 1));
 }
@@ -115,7 +115,7 @@ page {
   width: var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
   height: var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
   font-size: var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
-  color: #c2c4cc;
+  color: var(--nutui-color-text-disabled, #c2c4cc);
   margin-left: calc(4px * var(--nut-scale-f, 1));
 }
 .nut-searchbar-left, .nut-searchbar-right {
@@ -175,7 +175,7 @@ page {
   padding: calc(5px * var(--nut-scale-f, 1)) var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-focus .nut-searchbar-content {
-  border: calc(0.5px * var(--nut-scale-f, 1)) solid #ff5c67;
+  border: calc(0.5px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23);
 }
 
 [dir=rtl] .nut-searchbar-left,

package/dist/cjs/packages/searchbar/style-jmapp/searchbar.scss

@@ -76,7 +76,7 @@
       .nut-icon {
         width: $icon-size-12;
         height: $icon-size-12;
-        color: var(--nutui-black-5);
+        color: var(--nutui-black-5, rgba(0, 0, 0, 0.2));
         margin-right: $searchbar-inner-gap;
       }
       &::after {
@@ -94,7 +94,7 @@
     display: flex;
     flex-direction: row;
     z-index: 2;
-    background-color: #fff;
+    background-color: $searchbar-content-background;
     top: scale-px(9px);
     left: scale-px(6px);
     font-size: $font-size-s;
@@ -105,7 +105,7 @@
       flex-direction: row;
       align-items: center;
       padding: scale-px(4px) scale-px(8px);
-      background-color: #f7f8fc;
+      background-color: $color-background-sunken;
       border-radius: scale-px(4px);
       margin-right: scale-px(2px);
     }
@@ -114,7 +114,7 @@
       width: $icon-size-6;
       height: $icon-size-6;
       font-size: $icon-size-6;
-      color: #c2c4cc;
+      color: $color-text-disabled;
       margin-left: scale-px(4px);
     }
   }
@@ -196,7 +196,7 @@
     padding: scale-px(5px) $searchbar-gap;
 
     .nut-searchbar-content {
-      border: scale-px(0.5px) solid #ff5c67;
+      border: scale-px(0.5px) solid $color-primary;
     }
   }
 }

package/dist/cjs/packages/searchbar/style-jmapp/style.css

@@ -71,7 +71,7 @@
 .nut-searchbar-clear.nut-searchbar-icon .nut-icon {
   width: var(--nutui-icon-size-12, 12px);
   height: var(--nutui-icon-size-12, 12px);
-  color: var(--nutui-black-5);
+  color: var(--nutui-black-5, rgba(0, 0, 0, 0.2));
   margin-right: var(--nutui-searchbar-inner-gap, 8px);
 }
 .nut-searchbar-clear.nut-searchbar-icon::after {
@@ -86,7 +86,7 @@
   display: flex;
   flex-direction: row;
   z-index: 2;
-  background-color: #fff;
+  background-color: var(--nutui-searchbar-content-background, var(--nutui-color-default-light));
   top: scale-px(9px);
   left: scale-px(6px);
   font-size: var(--nutui-font-text-small);
@@ -97,7 +97,7 @@
   flex-direction: row;
   align-items: center;
   padding: scale-px(4px) scale-px(8px);
-  background-color: #f7f8fc;
+  background-color: var(--nutui-gray-2, #f8f8f8);
   border-radius: scale-px(4px);
   margin-right: scale-px(2px);
 }
@@ -105,7 +105,7 @@
   width: var(--nutui-icon-size-6, 6px);
   height: var(--nutui-icon-size-6, 6px);
   font-size: var(--nutui-icon-size-6, 6px);
-  color: #c2c4cc;
+  color: var(--nutui-color-text-disabled);
   margin-left: scale-px(4px);
 }
 .nut-searchbar-left, .nut-searchbar-right {
@@ -165,7 +165,7 @@
   padding: scale-px(5px) var(--nutui-searchbar-gap, 16px);
 }
 .nut-searchbar-focus .nut-searchbar-content {
-  border: scale-px(0.5px) solid #ff5c67;
+  border: scale-px(0.5px) solid var(--nutui-color-primary);
 }
 
 [dir=rtl] .nut-searchbar-left,

package/dist/cjs/packages/searchbar/style-jrkf/searchbar.scss

@@ -76,7 +76,7 @@
       .nut-icon {
         width: $icon-size-12;
         height: $icon-size-12;
-        color: var(--nutui-black-5);
+        color: var(--nutui-black-5, rgba(0, 0, 0, 0.2));
         margin-right: $searchbar-inner-gap;
       }
       &::after {
@@ -94,7 +94,7 @@
     display: flex;
     flex-direction: row;
     z-index: 2;
-    background-color: #fff;
+    background-color: $searchbar-content-background;
     top: scale-px(9px);
     left: scale-px(6px);
     font-size: $font-size-s;
@@ -105,7 +105,7 @@
       flex-direction: row;
       align-items: center;
       padding: scale-px(4px) scale-px(8px);
-      background-color: #f7f8fc;
+      background-color: $color-background-sunken;
       border-radius: scale-px(4px);
       margin-right: scale-px(2px);
     }
@@ -114,7 +114,7 @@
       width: $icon-size-6;
       height: $icon-size-6;
       font-size: $icon-size-6;
-      color: #c2c4cc;
+      color: $color-text-disabled;
       margin-left: scale-px(4px);
     }
   }
@@ -196,7 +196,7 @@
     padding: scale-px(5px) $searchbar-gap;
 
     .nut-searchbar-content {
-      border: scale-px(0.5px) solid #ff5c67;
+      border: scale-px(0.5px) solid $color-primary;
     }
   }
 }

package/dist/cjs/packages/searchbar/style-jrkf/style.css

@@ -71,7 +71,7 @@
 .nut-searchbar-clear.nut-searchbar-icon .nut-icon {
   width: var(--nutui-icon-size-12, 12px);
   height: var(--nutui-icon-size-12, 12px);
-  color: var(--nutui-black-5);
+  color: var(--nutui-black-5, rgba(0, 0, 0, 0.2));
   margin-right: var(--nutui-searchbar-inner-gap, 8px);
 }
 .nut-searchbar-clear.nut-searchbar-icon::after {
@@ -86,7 +86,7 @@
   display: flex;
   flex-direction: row;
   z-index: 2;
-  background-color: #fff;
+  background-color: var(--nutui-searchbar-content-background, var(--nutui-color-default-light));
   top: scale-px(9px);
   left: scale-px(6px);
   font-size: var(--nutui-font-text-small);
@@ -97,7 +97,7 @@
   flex-direction: row;
   align-items: center;
   padding: scale-px(4px) scale-px(8px);
-  background-color: #f7f8fc;
+  background-color: var(--nutui-gray-2, #f0f0f0);
   border-radius: scale-px(4px);
   margin-right: scale-px(2px);
 }
@@ -105,7 +105,7 @@
   width: var(--nutui-icon-size-6, 6px);
   height: var(--nutui-icon-size-6, 6px);
   font-size: var(--nutui-icon-size-6, 6px);
-  color: #c2c4cc;
+  color: var(--nutui-color-text-disabled);
   margin-left: scale-px(4px);
 }
 .nut-searchbar-left, .nut-searchbar-right {
@@ -165,7 +165,7 @@
   padding: scale-px(5px) var(--nutui-searchbar-gap, 16px);
 }
 .nut-searchbar-focus .nut-searchbar-content {
-  border: scale-px(0.5px) solid #ff5c67;
+  border: scale-px(0.5px) solid var(--nutui-color-primary, #ff6666);
 }
 
 [dir=rtl] .nut-searchbar-left,

package/dist/cjs/packages/signature/signature.js

@@ -20,7 +20,7 @@ var _canusedom = require("../../utils/can-use-dom");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     type: 'png',
     lineWidth: 2,
-    strokeStyle: '#1A1A1A',
+    strokeStyle: 'var(--nutui-color-title, #1a1a1a)',
     unsupported: ''
 });
 var InternalSignature = function InternalSignature(props, ref) {

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

@@ -240,7 +240,7 @@ page {
 .nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon,
 .nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon,
 .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text {
-  background-color: var(--nutui-steps-enhanced-finish-head-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background-color: var(--nutui-steps-enhanced-finish-head-background-color, var(--nutui-color-primary-light-pressed, #ffe8ee));
 }
 .nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon .nut-icon,
 .nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text .nut-icon, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon .nut-icon,
@@ -251,5 +251,5 @@ page {
   color: var(--nutui-steps-enhanced-finish-head-text-color, var(--nutui-color-primary-stop-1, #ff475d));
 }
 .nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-dot, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-dot {
-  background-color: var(--nutui-steps-enhanced-finish-head-dot-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
+  background-color: var(--nutui-steps-enhanced-finish-head-dot-background-color, var(--nutui-color-primary-disabled-special, #ff91a5));
 }

package/dist/cjs/packages/swipe/swipe.js

@@ -44,6 +44,8 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
         left: 0,
         right: 0
     }), 2), actionWidth = _useState1[0], setActionWidth = _useState1[1];
+    var actionWidthRef = (0, _react.useRef)(actionWidth);
+    actionWidthRef.current = actionWidth;
     var wrapperStyle = {
         transform: "translate3d(".concat(state.offset, "px, 0, 0)"),
         transitionDuration: state.dragging ? '0s' : '.6s'
@@ -70,7 +72,7 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
             var newState = (0, _object_spread_props._)((0, _object_spread._)({}, state), {
                 dragging: true
             });
-            var isEdge = !opened || touch.deltaX.current * startOffset.current < 0;
+            var isEdge = !opened.current || touch.deltaX.current * startOffset.current < 0;
             if (isEdge) {
                 preventDefault(event, true);
             }
@@ -96,7 +98,7 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
     var toggle = function toggle(side) {
         var offset = Math.abs(state.offset);
         var base = 0.3;
-        var baseNum = opened ? 1 - base : base;
+        var baseNum = opened.current ? 1 - base : base;
         var width = side === 'left' ? leftWidth : rightWidth;
         if (width && offset > Number(width) * baseNum) {
             open(side);
@@ -146,26 +148,28 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
     };
     var leftRef = (0, _react.useCallback)(function(node) {
         if (node !== null) {
-            setActionWidth(function(v) {
-                return (0, _object_spread_props._)((0, _object_spread._)({}, v), {
-                    left: getNodeWidth(node)
+            var width = getNodeWidth(node);
+            if (width !== actionWidthRef.current.left) {
+                setActionWidth(function(v) {
+                    return (0, _object_spread_props._)((0, _object_spread._)({}, v), {
+                        left: width
+                    });
                 });
-            });
+            }
         }
-    }, [
-        props.leftAction
-    ]);
+    }, []);
     var rightRef = (0, _react.useCallback)(function(node) {
         if (node !== null) {
-            setActionWidth(function(v) {
-                return (0, _object_spread_props._)((0, _object_spread._)({}, v), {
-                    right: getNodeWidth(node)
+            var width = getNodeWidth(node);
+            if (width !== actionWidthRef.current.right) {
+                setActionWidth(function(v) {
+                    return (0, _object_spread_props._)((0, _object_spread._)({}, v), {
+                        right: width
+                    });
                 });
-            });
+            }
         }
-    }, [
-        props.rightAction
-    ]);
+    }, []);
     var renderActionContent = function renderActionContent(side, measuredRef) {
         if (props["".concat(side, "Action")]) {
             return /*#__PURE__*/ _react.default.createElement("div", {

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

@@ -63,7 +63,7 @@ page {
 .nut-switch-button .nut-icon {
   width: calc((var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) * 2) / 2);
   height: calc((var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) * 2) / 2);
-  color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
+  color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ff91a5));
 }
 .nut-switch-close {
   background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc));
@@ -109,7 +109,7 @@ page {
   color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-switch-disabled {
-  background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
+  background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ff91a5));
 }
 .nut-switch-disabled-close {
   background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background, #f2f3f5));

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

@@ -163,7 +163,7 @@ page {
   color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
   border-radius: var(--nutui-tabs-button-border-radius, calc(50px * var(--nut-scale-f, 1)));
   font-weight: var(--nutui-font-weight-bold, 600);
-  background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light-pressed, #ffe8ee));
   border: var(--nutui-tabs-button-active-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-titles-divider {
@@ -228,7 +228,7 @@ page {
   left: calc(10px * var(--nut-scale-f, 1));
   width: var(--nutui-tabs-vertical-tab-line-width, calc(3px * var(--nut-scale-f, 1)));
   height: var(--nutui-tabs-vertical-tab-line-height, calc(12px * var(--nut-scale-f, 1)));
-  background: var(--nutui-tabs-vertical-tab-line-color, linear-gradient(180deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-light-pressed, #ffebf1) 100%));
+  background: var(--nutui-tabs-vertical-tab-line-color, linear-gradient(180deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-light-pressed, #ffe8ee) 100%));
 }
 .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile {
   right: calc(-12px * var(--nut-scale-f, 1));

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

@@ -43,7 +43,7 @@ page {
   background: #fa2c19;
 }
 .nut-tag-info {
-  background: var(--nutui-tag-info-background-color, var(--nutui-color-info, #0073ff));
+  background: var(--nutui-tag-info-background-color, var(--nutui-color-info, #0c82f7));
 }
 .nut-tag-success {
   background: var(--nutui-tag-success-background-color, #4fc08d);
@@ -52,7 +52,7 @@ page {
   background: var(--nutui-tag-danger-background-color, var(--nutui-color-danger, #ff0f23));
 }
 .nut-tag-warning {
-  background: var(--nutui-tag-warning-background-color, var(--nutui-color-warning, #ffbf00));
+  background: var(--nutui-tag-warning-background-color, var(--nutui-color-warning, #ffaa00));
 }
 .nut-tag-round {
   border-radius: var(--nutui-tag-round-border-radius, calc(8px * var(--nut-scale-f, 1)));

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

@@ -32,7 +32,7 @@ page {
   border: calc(1px * var(--nut-scale-f, 1)) solid transparent;
 }
 .nut-timedetail-item.active {
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  background-color: var(--nutui-color-primary-light-pressed, #ffe8ee);
   border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23);
   color: var(--nutui-color-primary, #ff0f23);
   font-weight: var(--nutui-font-weight-bold, 600);

package/dist/cjs/packages/toast/Notification.js

@@ -142,7 +142,7 @@ var Notification = /*#__PURE__*/ function(_superClass) {
                     className: "".concat(classPrefix, " ").concat(classes),
                     id: "toast-".concat(id)
                 }, /*#__PURE__*/ _react.createElement("div", {
-                    className: (0, _classnames.default)("".concat(classPrefix, "-inner"), "".concat(classPrefix, "-").concat(position), contentClassName, "".concat(classPrefix, "-inner-").concat(size), "".concat(classPrefix, "-inner-").concat(wordBreak), (0, _define_property._)({}, "".concat(classPrefix, "-inner-descrption"), content)),
+                    className: (0, _classnames.default)("".concat(classPrefix, "-inner"), "".concat(classPrefix, "-").concat(position), contentClassName, "".concat(classPrefix, "-inner-").concat(size), "".concat(classPrefix, "-inner-").concat(wordBreak)),
                     style: (0, _object_spread._)({}, contentStyle),
                     role: "alert",
                     "aria-label": (title !== null && title !== void 0 ? title : '') + (content !== null && content !== void 0 ? content : '')

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

@@ -52,19 +52,20 @@ page {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  min-width: calc(96px * var(--nut-scale-f, 1));
-  max-width: 60%;
+  min-width: var(--nutui-toast-inner-min-width, calc(88px * var(--nut-scale-f, 1)));
+  max-width: var(--nutui-toast-inner-max-width, calc(200px * var(--nut-scale-f, 1)));
   box-sizing: border-box;
   font-size: var(--nutui-toast-text-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   text-align: var(--nutui-toast-inner-text-align, center);
-  padding: var(--nutui-toast-inner-padding, calc(13px * var(--nut-scale-f, 1)) calc(16px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-toast-inner-padding, calc(12px * var(--nut-scale-f, 1)) calc(16px * var(--nut-scale-f, 1)));
   word-break: break-all;
   background: var(--nutui-toast-inner-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   border-radius: var(--nutui-toast-inner-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
   color: var(--nutui-toast-font-color, #ffffff);
 }
-.nut-toast-inner-descrption {
-  max-width: 68.2%;
+.nut-toast-has-icon .nut-toast-inner {
+  min-width: var(--nutui-toast-inner-has-icon-min-width, calc(97px * var(--nut-scale-f, 1)));
+  max-width: var(--nutui-toast-inner-has-icon-max-width, calc(225px * var(--nut-scale-f, 1)));
 }
 .nut-toast-inner-normal {
   word-break: normal;
@@ -90,8 +91,9 @@ page {
   top: var(--nutui-toast-inner-top, 20%);
 }
 .nut-toast-text {
-  color: #ffffff;
+  color: var(--nutui-toast-font-color, var(--nutui-white, #ffffff));
   text-align: var(--nutui-toast-inner-text-align, center);
+  font-weight: var(--nutui-toast-text-font-weight, 400);
   /* #ifdef harmony dynamic*/
   line-height: normal;
   /* #endif */
@@ -101,9 +103,9 @@ page {
   height: auto;
 }
 .nut-toast-title {
-  color: #ffffff;
+  color: var(--nutui-toast-font-color, var(--nutui-white, #ffffff));
   font-size: var(--nutui-toast-title-font-size, var(--nutui-font-size-md, calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
-  font-weight: 600;
+  font-weight: var(--nutui-toast-title-font-weight, 600);
   text-align: var(--nutui-toast-inner-text-align, center);
   /* #ifdef harmony dynamic*/
   line-height: normal;
@@ -113,21 +115,22 @@ page {
   /* #endif */
 }
 .nut-toast .nut-icon {
-  width: calc(24px * var(--nut-scale-f, 1));
-  height: calc(24px * var(--nut-scale-f, 1));
-  color: #ffffff;
+  width: calc(20px * var(--nut-scale-f, 1));
+  height: calc(20px * var(--nut-scale-f, 1));
+  color: var(--nutui-toast-icon-color, var(--nutui-toast-font-color, var(--nutui-white, #ffffff)));
 }
 .nut-toast-icon-wrapper {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: calc(3px * var(--nut-scale-f, 1)) 0 calc(5px * var(--nut-scale-f, 1));
-  color: #ffffff;
+  margin: 0;
+  padding: calc(10px * var(--nut-scale-f, 1)) 0;
+  color: var(--nutui-toast-icon-color, var(--nutui-toast-font-color, var(--nutui-white, #ffffff)));
 }
 .nut-toast-icon-wrapper-icon {
-  width: calc(24px * var(--nut-scale-f, 1));
-  height: calc(24px * var(--nut-scale-f, 1));
+  width: calc(20px * var(--nut-scale-f, 1));
+  height: calc(20px * var(--nut-scale-f, 1));
 }
 .nut-toast-rtl {
   left: auto;

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

@@ -42,9 +42,8 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    min-width: scale-px(96px);
-    max-width: 60%;
-    // max-width: 224px;
+    min-width: var(--nutui-toast-inner-min-width, scale-px(88px));
+    max-width: var(--nutui-toast-inner-max-width, scale-px(200px));
     box-sizing: border-box;
     font-size: $toast-text-font-size;
     text-align: $toast-inner-text-align;
@@ -54,9 +53,9 @@
     border-radius: $toast-inner-border-radius;
     color: $toast-font-color;
 
-    &-descrption {
-      max-width: 68.2%;
-      // max-width: 256px;
+    .nut-toast-has-icon & {
+      min-width: var(--nutui-toast-inner-has-icon-min-width, scale-px(97px));
+      max-width: var(--nutui-toast-inner-has-icon-max-width, scale-px(225px));
     }
 
     &-normal {
@@ -91,8 +90,9 @@
   }
 
   &-text {
-    color: #ffffff;
+    color: var(--nutui-toast-font-color, var(--nutui-white, #ffffff));
     text-align: $toast-inner-text-align;
+    font-weight: var(--nutui-toast-text-font-weight, 400);
     /* #ifdef harmony dynamic*/
     line-height: normal;
     /* #endif */
@@ -103,9 +103,9 @@
   }
 
   &-title {
-    color: #ffffff;
+    color: var(--nutui-toast-font-color, var(--nutui-white, #ffffff));
     font-size: $toast-title-font-size;
-    font-weight: 600;
+    font-weight: var(--nutui-toast-title-font-weight, 600);
     text-align: $toast-inner-text-align;
     /* #ifdef harmony dynamic*/
     line-height: normal;
@@ -116,9 +116,12 @@
   }
 
   .nut-icon {
-    width: scale-px(24px);
-    height: scale-px(24px);
-    color: #ffffff;
+    width: scale-px(20px);
+    height: scale-px(20px);
+    color: var(
+      --nutui-toast-icon-color,
+      var(--nutui-toast-font-color, var(--nutui-white, #ffffff))
+    );
   }
 
   &-icon-wrapper {
@@ -126,12 +129,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: scale-px(3px) 0 scale-px(5px);
-    color: #ffffff;
+    margin: 0;
+    padding: scale-px(10px) 0;
+    color: var(
+      --nutui-toast-icon-color,
+      var(--nutui-toast-font-color, var(--nutui-white, #ffffff))
+    );
 
     &-icon {
-      width: scale-px(24px);
-      height: scale-px(24px);
+      width: scale-px(20px);
+      height: scale-px(20px);
     }
   }