@nutui/nutui-react-taro 3.0.0-beta.11 → 3.0.0-beta.12

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

@@ -9,11 +9,11 @@ import { User } from "@nutui/icons-react-taro";
 import { AvatarContext } from "../avatargroup/context";
 // import Image from '@/packages/image/index.taro'
 import { ComponentDefaults } from "../../utils/typings";
-import { harmonyAndRn } from "../../utils/platform-taro";
+import { harmony } from "../../utils/platform-taro";
 import AvatarGroup from "../avatargroup/index";
 import pxTransform from "../../utils/px-transform";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
-    size: harmonyAndRn() ? '40' : '',
+    size: harmony() ? '40' : '',
     shape: 'round',
     icon: '',
     background: '#eee',
@@ -49,7 +49,7 @@ export var Avatar = function(props) {
         height: sizeValue.indexOf(size) > -1 ? '' : pxTransform(parseInt(size)),
         backgroundColor: "".concat(background),
         color: color
-    }, _define_property(_obj1, harmonyAndRn() ? 'marginRight' : 'marginLeft', avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap, "px") : ''), _define_property(_obj1, "zIndex", (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === 'right' ? Math.abs(groupCount - avatarIndex) : ''), _obj1), style);
+    }, _define_property(_obj1, harmony() ? 'marginRight' : 'marginLeft', avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap, "px") : ''), _define_property(_obj1, "zIndex", (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === 'right' ? Math.abs(groupCount - avatarIndex) : ''), _obj1), style);
     var maxStyles = {
         backgroundColor: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxBackground),
         color: "".concat(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxColor)

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

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

package/dist/es/packages/backtop/backtop.js

@@ -9,7 +9,6 @@ import classNames from "classnames";
 import { Top } from "@nutui/icons-react-taro";
 import { ComponentDefaults } from "../../utils/typings";
 import HoverButton from "../hoverbutton/index";
-import { rn } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     threshold: 200,
     zIndex: 900,
@@ -19,8 +18,7 @@ export var BackTop = function(props) {
     var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, icon = _$_object_spread.icon, style = _$_object_spread.style, scrollRes = _$_object_spread.scrollRes, onClick = _$_object_spread.onClick;
     var classPrefix = 'nut-backtop';
     var _useState = _sliced_to_array(useState(false), 2), backTop = _useState[0], setBackTop = _useState[1];
-    var _obj;
-    var cls = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-show"), backTop), _define_property(_obj, "".concat(classPrefix, "-rn"), rn()), _obj), className);
+    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-show"), backTop), className);
     var systemInfo = useRef({});
     useEffect(function() {
         getSystemInfo().then(function(res) {

package/dist/es/packages/backtop/style/backtop.scss

@@ -1,10 +1,6 @@
 .nut-backtop {
   display: none;
 
-  &-rn {
-    position: absolute;
-  }
-
   &-show {
     display: flex;
     align-items: center;

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

@@ -33,8 +33,8 @@
   width: 20px;
   height: 20px;
   margin: 9px;
-  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7));
-  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7));
+  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-icon .nut-icon {
   display: block;
@@ -43,8 +43,8 @@
   font-size: 20px;
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
-  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-7));
-  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-7));
+  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-text-icon {
   width: 14px;
@@ -67,9 +67,6 @@
   bottom: var(--nutui-hoverbutton-position-bottom, 60px);
   z-index: 10;
 }
-.nut-hoverbutton-container-rn {
-  position: absolute;
-}
 
 [dir=rtl] .nut-hoverbutton-container,
 .nut-hoverbutton-container-rtl {
@@ -108,8 +105,8 @@
   width: 20px;
   height: 20px;
   margin: 9px;
-  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7));
-  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7));
+  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-icon .nut-icon {
   display: block;
@@ -118,8 +115,8 @@
   font-size: 20px;
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
-  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-7));
-  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-7));
+  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-text-icon {
   width: 14px;
@@ -134,9 +131,6 @@
 .nut-backtop {
   display: none;
 }
-.nut-backtop-rn {
-  position: absolute;
-}
 .nut-backtop-show {
   display: flex;
   align-items: center;

package/dist/es/packages/backtop/style/style.harmony.css

@@ -5,9 +5,6 @@
 .nut-backtop {
   display: none;
 }
-.nut-backtop-rn {
-  position: absolute;
-}
 .nut-backtop-show {
   display: flex;
   align-items: center;

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

@@ -11,7 +11,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--nutui-badge-background-color, var(--nutui-brand-6));
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
   padding: var(--nutui-badge-icon-padding, 2px);
   text-align: center;
   z-index: var(--nutui-badge-z-index, 1);
@@ -48,7 +48,7 @@
   white-space: nowrap;
   font-weight: normal;
   vertical-align: middle;
-  background: var(--nutui-badge-background-color, var(--nutui-brand-6));
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
   z-index: 1;
 }
 .nut-badge-number {
@@ -93,8 +93,8 @@
 }
 .nut-badge-outline {
   background: #ffffff;
-  color: var(--nutui-badge-outline-color, var(--nutui-brand-6));
+  color: var(--nutui-badge-outline-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-badge-outline::after {
-  border: var(--nutui-badge-outline-border, 1px solid var(--nutui-brand-6));
+  border: var(--nutui-badge-outline-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }

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

@@ -10,8 +10,8 @@
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  background-color: var(--nutui-gray-3);
-  color: var(--nutui-gray-7);
+  background-color: var(--nutui-color-background, #f2f3f5);
+  color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-barrage .barrage-item {
   display: block;

package/dist/es/packages/button/button.js

@@ -2,13 +2,13 @@ import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import classNames from "classnames";
 import { View, Button as TaroButton } from "@tarojs/components";
 import { Loading } from "@nutui/icons-react-taro";
 import { getEnv } from "@tarojs/taro";
 import { ComponentDefaults } from "../../utils/typings";
-import { harmonyAndRn } from "../../utils/platform-taro";
+import { harmony } from "../../utils/platform-taro";
 var prefixCls = 'nut-button';
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     color: '',
@@ -41,7 +41,7 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         "nativeType",
         "onClick"
     ]);
-    var getStyle = useCallback(function() {
+    var getStyle = useMemo(function() {
         var style = {};
         if (color) {
             if (props.fill === 'outline' || props.fill === 'dashed') {
@@ -51,7 +51,7 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
                 }
             } else {
                 style.color = '#fff';
-                if (harmonyAndRn()) {
+                if (harmony()) {
                     style.backgroundColor = color;
                 }
                 style.background = color;
@@ -63,7 +63,7 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         color,
         props.fill
     ]);
-    var getContStyle = useCallback(function() {
+    var getContStyle = useMemo(function() {
         var style = {};
         if (props.color) {
             if (props.fill === 'outline' || props.fill === 'dashed') {
@@ -76,18 +76,25 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         }
         return style;
     }, [
-        color
+        color,
+        props.fill,
+        props.color
     ]);
-    var handleClick = function(e) {
+    var handleClick = useCallback(function(e) {
         if (!loading && !disabled && onClick) {
             onClick(e);
         }
-    };
+    }, [
+        loading,
+        disabled,
+        onClick
+    ]);
+    var _obj;
+    var buttonClassNames = classNames(prefixCls, "".concat(prefixCls, "-").concat(type), (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-").concat(type, "-solid"), type === 'primary' && !props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(type, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls, "-").concat(size), size), _define_property(_obj, "".concat(prefixCls, "-").concat(shape), shape), _define_property(_obj, "".concat(prefixCls, "-").concat(shape, "-").concat(size), shape && size), _define_property(_obj, "".concat(prefixCls, "-block"), block), _define_property(_obj, "".concat(prefixCls, "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-").concat(type).concat(props.fill ? "-".concat(fill) : '', "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-loading"), loading), _define_property(_obj, "".concat(prefixCls, "-icononly"), !children), _obj), className);
     if (getEnv() === 'WEB') {
         ;
         rest.type = rest.formType;
     }
-    var _obj;
     return (
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -95,8 +102,8 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         /*#__PURE__*/ (React.createElement(TaroButton, _object_spread_props(_object_spread({}, rest), {
             ref: ref,
             formType: nativeType,
-            className: classNames(prefixCls, "".concat(prefixCls, "-").concat(type), type === 'primary' && !props.fill ? "".concat(prefixCls, "-").concat(type, "-solid") : null, props.fill ? "".concat(prefixCls, "-").concat(fill) : null, props.fill ? "".concat(prefixCls, "-").concat(type, "-").concat(fill) : null, children ? '' : "".concat(prefixCls, "-icononly"), (_obj = {}, _define_property(_obj, "".concat(prefixCls, "-").concat(size), size), _define_property(_obj, "".concat(prefixCls, "-").concat(shape), shape), _define_property(_obj, "".concat(prefixCls, "-").concat(shape, "-").concat(size), shape && size), _define_property(_obj, "".concat(prefixCls, "-block"), block), _define_property(_obj, "".concat(prefixCls, "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-").concat(type).concat(props.fill ? "-".concat(fill) : '', "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls, "-loading"), loading), _obj), className),
-            style: _object_spread({}, getStyle(), style),
+            className: buttonClassNames,
+            style: _object_spread({}, getStyle, style),
             onClick: function(e) {
                 return handleClick(e);
             }
@@ -104,10 +111,10 @@ export var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             className: "nut-button-wrap"
         }, loading && /*#__PURE__*/ React.createElement(Loading, {
             className: "nut-icon-loading"
-        }), !loading && icon ? icon : null, children && /*#__PURE__*/ React.createElement(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" : ''),
-            style: harmonyAndRn() ? getContStyle() : {}
-        }, children), rightIcon || null)))
+        }), !loading && icon, children && /*#__PURE__*/ React.createElement(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' : ''),
+            style: harmony() ? getContStyle : {}
+        }, children), rightIcon)))
     );
 });
 Button.displayName = 'NutButton';

package/dist/es/packages/button/style/button.scss

@@ -2,10 +2,10 @@
   position: relative;
   display: flex;
   display: inline-block;
-  /* #ifdef rn harmony*/
+  /* #ifdef harmony*/
   width: 80px;
   /* #endif */
-  /* #ifndef rn harmony*/
+  /* #ifndef harmony*/
   width: auto;
   /* #endif */
   flex-direction: row;
@@ -72,7 +72,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    /* #ifndef rn harmony */
+    /* #ifndef harmony */
     background: initial;
     /* #endif */
     .nut-icon {

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

@@ -6,10 +6,10 @@
   position: relative;
   display: flex;
   display: inline-block;
-  /* #ifdef rn harmony*/
+  /* #ifdef harmony*/
   width: 80px;
   /* #endif */
-  /* #ifndef rn harmony*/
+  /* #ifndef harmony*/
   width: auto;
   /* #endif */
   flex-direction: row;
@@ -29,7 +29,7 @@
   touch-action: manipulation;
   -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  color: var(--nutui-button-default-color, var(--nutui-gray-7));
+  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, 0.5px);
 }
@@ -50,9 +50,9 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-black-10);
+  background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border: inherit;
-  border-color: var(--nutui-black-10);
+  border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border-radius: inherit;
   transform: translate(-50%, -50%);
   opacity: 0;
@@ -71,7 +71,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  /* #ifndef rn harmony */
+  /* #ifndef harmony */
   background: initial;
   /* #endif */
 }
@@ -109,20 +109,20 @@
 .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-4));
+  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-button-default-disabled, .nut-button-default-solid-disabled {
   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));
+  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));
 }
 .nut-button-default-none-disabled {
-  color: var(--nutui-button-default-disabled-color, var(--nutui-gray-5));
+  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;
-  color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
+  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));
 }
 .nut-button-normal {
   padding: var(--nutui-button-normal-padding, 0px 12px);
@@ -214,37 +214,37 @@
 }
 .nut-button-primary-disabled, .nut-button-primary-solid-disabled {
   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));
+  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-brand-6));
+  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-brand-3));
+  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-brand-6));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  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-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  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-brand-6));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  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-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  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.nut-button-solid.nut-button-normal {
   font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-success {
   color: var(--nutui-button-success-color, #ffffff);
-  background: var(--nutui-button-success-background-color, var(--nutui-green-2));
+  background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -256,15 +256,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-green-2));
-  border-color: var(--nutui-button-success-border-color, var(--nutui-green-2));
+  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-brand-3));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  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-green-2));
+  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));
@@ -298,7 +298,7 @@
 }
 .nut-button-danger {
   color: var(--nutui-button-danger-color, #ffffff);
-  background: var(--nutui-button-danger-background-color, var(--nutui-red-2));
+  background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -306,26 +306,26 @@
   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-brand-3)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  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-red-2));
-  border-color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
+  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-brand-3)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  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-red-2));
+  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-brand-3)));
+  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, #ffffff);
-  background: var(--nutui-button-warning-background-color, var(--nutui-yellow-2));
+  background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00));
   background-origin: border-box;
   border-color: transparent;
 }
@@ -338,15 +338,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-yellow-2));
-  border-color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
+  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-yellow-2));
+  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/es/packages/button/style/style.harmony.css

@@ -6,10 +6,10 @@
   position: relative;
   display: flex;
   display: inline-block;
-  /* #ifdef rn harmony*/
+  /* #ifdef harmony*/
   width: 80px;
   /* #endif */
-  /* #ifndef rn harmony*/
+  /* #ifndef harmony*/
   width: auto;
   /* #endif */
   flex-direction: row;
@@ -71,7 +71,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  /* #ifndef rn harmony */
+  /* #ifndef harmony */
   background: initial;
   /* #endif */
 }