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

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

@@ -35,12 +35,6 @@
   background-color: transparent;
 }
 
-/* #ifndef rn */
-.nut-input-native::placeholder {
-  color: $color-text-help;
-}
-/* #endif */
-
 .nut-input-readonly {
   .nut-input-native {
     color: $color-text-help;

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

@@ -13,7 +13,7 @@
   box-sizing: border-box;
 }
 .nut-input .nut-icon {
-  color: var(--nutui-gray-4);
+  color: var(--nutui-color-text-disabled, #c2c4cc);
   width: 14px;
   height: 14px;
   font-size: 14px;
@@ -21,14 +21,14 @@
 .nut-input-container {
   height: 38px;
   padding: var(--nutui-input-padding, 12px);
-  background-color: var(--nutui-input-background-color, var(--nutui-gray-1));
+  background-color: var(--nutui-input-background-color, var(--nutui-color-background-overlay, #ffffff));
   border-radius: var(--nutui-input-border-radius, var(--nutui-radius-s, 6px));
-  border-bottom: var(--nutui-input-border-bottom-width, 0px) solid var(--nutui-input-border-bottom, var(--nutui-black-3));
+  border-bottom: var(--nutui-input-border-bottom-width, 0px) solid var(--nutui-input-border-bottom, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 
 .nut-input-native {
   flex: 1;
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
   line-height: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
   padding: 0;
@@ -38,23 +38,17 @@
   background-color: transparent;
 }
 
-/* #ifndef rn */
-.nut-input-native::placeholder {
-  color: var(--nutui-gray-5);
-}
-
-/* #endif */
 .nut-input-readonly .nut-input-native {
-  color: var(--nutui-gray-5);
+  color: var(--nutui-color-text-help, #888b94);
 }
 
 .nut-input-disabled {
-  color: var(--nutui-gray-4) !important;
+  color: var(--nutui-color-text-disabled, #c2c4cc) !important;
 }
 .nut-input-disabled input:disabled {
-  color: var(--nutui-gray-4);
+  color: var(--nutui-color-text-disabled, #c2c4cc);
   cursor: not-allowed;
   background: none;
   opacity: 1;
-  -webkit-text-fill-color: var(--nutui-gray-4);
+  -webkit-text-fill-color: var(--nutui-color-text-disabled, #c2c4cc);
 }

package/dist/cjs/packages/input/style/style.harmony.css

@@ -38,12 +38,6 @@
   background-color: transparent;
 }
 
-/* #ifndef rn */
-.nut-input-native::placeholder {
-  color: #888b94;
-}
-
-/* #endif */
 .nut-input-readonly .nut-input-native {
   color: #888b94;
 }

package/dist/cjs/packages/inputnumber/inputnumber.js

@@ -60,8 +60,7 @@ var InputNumber = function InputNumber(props) {
         "onFocus",
         "onChange"
     ]);
-    var isRnAndHarmony = (0, _platformtaro.harmonyAndRn)();
-    var isRn = (0, _platformtaro.rn)();
+    var isHarmony = (0, _platformtaro.harmony)();
     var classes = (0, _classnames.default)(classPrefix, className);
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), focused = _useState[0], setFocused = _useState[1];
     var inputRef = (0, _react.useRef)(null);
@@ -208,20 +207,11 @@ var InputNumber = function InputNumber(props) {
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-minus"),
         onClick: handleReduce
-    }, isRnAndHarmony ? /*#__PURE__*/ _react.default.createElement(_components.Text, {
+    }, isHarmony ? /*#__PURE__*/ _react.default.createElement(_components.Text, {
         className: (0, _classnames.default)("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-minus"), (0, _define_property._)({}, "".concat(classPrefix, "-icon-disabled"), shadowValue === min || disabled))
     }, "-") : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Minus, {
         className: (0, _classnames.default)("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-minus"), (0, _define_property._)({}, "".concat(classPrefix, "-icon-disabled"), shadowValue === min || disabled))
-    })), isRn ? /*#__PURE__*/ _react.default.createElement(_components.Input, {
-        className: (0, _classnames.default)("".concat(classPrefix, "-input"), (0, _define_property._)({}, "".concat(classPrefix, "-input-disabled"), disabled)),
-        type: type,
-        ref: inputRef,
-        disabled: disabled || readOnly,
-        value: inputValue,
-        onInput: handleInputChange,
-        onBlur: handleBlur,
-        onFocus: handleFocus
-    }) : /*#__PURE__*/ _react.default.createElement("input", {
+    })), /*#__PURE__*/ _react.default.createElement("input", {
         className: (0, _classnames.default)("".concat(classPrefix, "-input"), (0, _define_property._)({}, "".concat(classPrefix, "-input-disabled"), disabled)),
         type: type,
         ref: inputRef,
@@ -235,7 +225,7 @@ var InputNumber = function InputNumber(props) {
     }), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-add"),
         onClick: handlePlus
-    }, isRnAndHarmony ? /*#__PURE__*/ _react.default.createElement(_components.Text, {
+    }, isHarmony ? /*#__PURE__*/ _react.default.createElement(_components.Text, {
         className: (0, _classnames.default)("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-plus"), (0, _define_property._)({}, "".concat(classPrefix, "-icon-disabled"), shadowValue === max || disabled))
     }, "+") : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Plus, {
         className: (0, _classnames.default)("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-plus"), (0, _define_property._)({}, "".concat(classPrefix, "-icon-disabled"), shadowValue === max || disabled))

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

@@ -7,7 +7,7 @@
   width: calc(2 * var(--nutui-inputnumber-input-margin, 0px) + 2 * var(--nutui-inputnumber-button-width, 20px) + var(--nutui-inputnumber-input-width, 26px));
   flex-direction: row;
   align-items: center;
-  background-color: var(--nutui-gray-3);
+  background-color: var(--nutui-color-background, #f2f3f5);
   border-radius: var(--nutui-inputnumber-input-border-radius, 4px);
   overflow: hidden;
 }
@@ -24,11 +24,11 @@
   --nut-icon-height: 10px;
 }
 .nut-inputnumber-icon {
-  color: var(--nutui-gray-6);
+  color: var(--nutui-color-text, #505259);
   cursor: pointer;
 }
 .nut-inputnumber-icon-disabled {
-  color: var(--nutui-gray-4);
+  color: var(--nutui-color-text-disabled, #c2c4cc);
   cursor: not-allowed;
 }
 .nut-inputnumber-input {
@@ -43,17 +43,17 @@
   border: var(--nutui-inputnumber-input-border, 0);
   margin-left: var(--nutui-inputnumber-input-margin, 0px);
   margin-right: var(--nutui-inputnumber-input-margin, 0px);
-  color: var(--nutui-gray-6);
-  background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-gray-3));
+  color: var(--nutui-color-text, #505259);
+  background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-background, #f2f3f5));
 }
 .nut-inputnumber-input-disabled {
-  color: var(--nutui-gray-4);
+  color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-inputnumber-input::-webkit-outer-spin-button, .nut-inputnumber-input::-webkit-inner-spin-button {
   appearance: none;
 }
 .nut-inputnumber-input-disabled {
-  color: var(--nutui-gray-4);
+  color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-inputnumber-icon-minus {
   --nut-icon-width: 16px;

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

@@ -18,7 +18,7 @@
   animation: nut-loading-rotation 1s infinite linear;
 }
 .nut-loading .nut-loading-icon-box .nut-loading-icon {
-  color: var(--nutui-loading-icon-color, var(--nutui-gray-5));
+  color: var(--nutui-loading-icon-color, var(--nutui-color-text-help, #888b94));
   width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
   height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
   font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
@@ -31,7 +31,7 @@
 }
 .nut-loading .nut-loading-text {
   padding-top: var(--nutui-spacing-base, 8px);
-  color: var(--nutui-loading-color, var(--nutui-gray-5));
+  color: var(--nutui-loading-color, var(--nutui-color-text-help, #888b94));
   font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, 12px));
 }
 

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

@@ -3,19 +3,14 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
@@ -68,7 +63,7 @@
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
-  background: var(--nutui-menu-content-background-color, var(--nutui-gray-1));
+  background: var(--nutui-menu-content-background-color, var(--nutui-color-background-overlay, #ffffff));
 }
 .nut-menu-container-content_fixed {
   width: 100%;
@@ -78,13 +73,13 @@
 .nut-menu-container-item {
   display: flex;
   align-items: center;
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-font-size-base, 14px);
   padding: var(--nutui-menu-item-padding, 12px 0);
 }
 .nut-menu-container-item.active {
   font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600));
-  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
+  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-menu-container-item .nut-icon {
   display: inline-flex;
@@ -185,7 +180,7 @@
   position: relative;
   display: flex;
   line-height: var(--nutui-menu-bar-line-height, 48px);
-  background-color: var(--nutui-gray-1);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
   box-shadow: var(--nutui-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, 0.12));
 }
 .nut-menu-bar.opened {
@@ -196,7 +191,7 @@
   flex: 1;
   text-align: center;
   font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-menu-title-color, var(--nutui-gray-7));
+  color: var(--nutui-menu-title-color, var(--nutui-color-title, #1a1a1a));
   min-width: 0;
   display: flex;
   align-items: center;
@@ -215,10 +210,10 @@
   transition: all 0.2s linear;
 }
 .nut-menu-title.active {
-  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
+  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-menu-title.disabled {
-  color: var(--nutui-menu-item-disabled-color, var(--nutui-gray-4));
+  color: var(--nutui-menu-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-menu-title.active .nut-menu-title-icon {
   transform: rotate(180deg);

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

@@ -3,19 +3,14 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
@@ -68,7 +63,7 @@
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
-  background: var(--nutui-menu-content-background-color, var(--nutui-gray-1));
+  background: var(--nutui-menu-content-background-color, var(--nutui-color-background-overlay, #ffffff));
 }
 .nut-menu-container-content_fixed {
   width: 100%;
@@ -78,13 +73,13 @@
 .nut-menu-container-item {
   display: flex;
   align-items: center;
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-font-size-base, 14px);
   padding: var(--nutui-menu-item-padding, 12px 0);
 }
 .nut-menu-container-item.active {
   font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600));
-  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
+  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-menu-container-item .nut-icon {
   display: inline-flex;

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

@@ -63,7 +63,7 @@
     max-width: 124px;
     height: 100%;
     cursor: pointer;
-    /* #ifndef rn harmony jd h5 weapp*/
+    /* #ifndef harmony jd h5 weapp*/
     .nut-icon,
     .nutui-iconfont {
       width: 20px;

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

@@ -12,7 +12,7 @@
   height: var(--nutui-navbar-height, 44px);
   box-sizing: border-box;
   font-size: var(--nutui-navbar-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-navbar-color, var(--nutui-gray-7));
+  color: var(--nutui-navbar-color, var(--nutui-color-title, #1a1a1a));
   overflow: hidden;
   padding: 0 16px;
 }
@@ -43,7 +43,7 @@
   align-items: center;
   font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-size-xl, 18px));
   font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 600));
-  color: var(--nutui-navbar-title-font-color, var(--nutui-gray-7));
+  color: var(--nutui-navbar-title-font-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-navbar-title-center {
   max-width: 129px;
@@ -59,7 +59,7 @@
   max-width: 124px;
   height: 100%;
   cursor: pointer;
-  /* #ifndef rn harmony jd h5 weapp*/
+  /* #ifndef harmony jd h5 weapp*/
   /* #endif */
 }
 .nut-navbar-left .nut-icon,

package/dist/cjs/packages/navbar/style/style.harmony.css

@@ -59,7 +59,7 @@
   max-width: 124px;
   height: 100%;
   cursor: pointer;
-  /* #ifndef rn harmony jd h5 weapp*/
+  /* #ifndef harmony jd h5 weapp*/
   /* #endif */
 }
 .nut-navbar-left .nut-icon,

package/dist/cjs/packages/notify/notify.js

@@ -29,7 +29,6 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _reacttransitiongroup = require("react-transition-group");
 var _components = require("@tarojs/components");
-var _taro = /*#__PURE__*/ _interop_require_default._(require("@tarojs/taro"));
 var _typings = require("../../utils/typings");
 var _usecustomevent = require("../../utils/use-custom-event");
 var _mergeprops = require("../../utils/merge-props");
@@ -84,7 +83,7 @@ var Notify = function Notify(props) {
     };
     var _obj;
     var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-popup-top"), position === 'top'), (0, _define_property._)(_obj, "".concat(classPrefix, "-popup-bottom"), position === 'bottom'), (0, _define_property._)(_obj, "".concat(classPrefix), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(type), true), _obj));
-    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, _taro.default.getEnv() !== _taro.default.ENV_TYPE.RN ? /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
+    return /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
         nodeRef: cssRef,
         in: showNotify,
         timeout: 300,
@@ -97,13 +96,7 @@ var Notify = function Notify(props) {
         className: "".concat(classes, " ").concat(className),
         style: style,
         onClick: clickHandle
-    }, children)) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, showNotify ? /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classes, " ").concat(className),
-        style: (0, _object_spread_props._)((0, _object_spread._)({}, style), {
-            position: 'absolute'
-        }),
-        onClick: clickHandle
-    }, children) : null));
+    }, children));
 };
 function open(selector) {
     // eslint-disable-next-line react-hooks/rules-of-hooks

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

@@ -73,17 +73,17 @@
   bottom: 0;
 }
 .nut-notify-base {
-  background: var(--nutui-notify-base-background-color, var(--nutui-brand-6));
+  background: var(--nutui-notify-base-background-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-notify-primary {
   background: var(--nutui-notify-primary-background-color, var(--nutui-color-info, #0073ff));
 }
 .nut-notify-success {
-  background: var(--nutui-notify-success-background-color, var(--nutui-green-2));
+  background: var(--nutui-notify-success-background-color, var(--nutui-color-success, #00d900));
 }
 .nut-notify-danger {
-  background: var(--nutui-notify-danger-background-color, var(--nutui-brand-6));
+  background: var(--nutui-notify-danger-background-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-notify-warning {
-  background: var(--nutui-notify-warning-background-color, var(--nutui-yellow-2));
+  background: var(--nutui-notify-warning-background-color, var(--nutui-color-warning, #ffbf00));
 }

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

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, ReactNode } from 'react';
-import { PopupProps } from "../popup/popup";
+import { PopupProps } from "../popup/index";
 export interface NumberKeyboardProps extends PopupProps {
     visible: boolean;
     rightActions: ReactNode;

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

@@ -4,19 +4,14 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
@@ -67,7 +62,7 @@
   position: fixed;
   min-height: 46%;
   max-height: 100%;
-  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1));
+  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
   font-size: var(--nutui-font-size-base, 14px);
 }
@@ -87,13 +82,13 @@
   align-items: center;
 }
 .nut-popup-title-title {
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
   line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-popup-title-description {
-  color: var(--nutui-gray-6);
+  color: var(--nutui-color-text, #505259);
   font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-font-weight, 400);
 }
@@ -112,7 +107,7 @@
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   cursor: pointer;
 }
 .nut-popup-title-right:active {
@@ -380,7 +375,7 @@
   width: 100%;
   padding: var(--nutui-numberkeyboard-padding, 0 0 22px 0);
   user-select: none;
-  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-gray-3));
+  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-background, #f2f3f5));
 }
 .nut-numberkeyboard-header {
   position: relative;
@@ -389,11 +384,11 @@
   justify-content: center;
   box-sizing: content-box;
   padding: var(--nutui-popup-title-padding, 16px);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-numberkeyboard-header-title {
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   display: inline-block;
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
@@ -404,7 +399,7 @@
   top: 50%;
   transform: translateY(-50%);
   padding: var(--nutui-numberkeyboard-header-close-padding, 0 16px);
-  color: var(--nutui-numberkeyboard-header-close-color, var(--nutui-gray-6));
+  color: var(--nutui-numberkeyboard-header-close-color, var(--nutui-color-text, #505259));
   font-size: var(--nutui-numberkeyboard-header-close-font-size, 14px);
   background-color: var(--nutui-numberkeyboard-header-close-background-color, transparent);
   border: none;
@@ -430,7 +425,7 @@
   /* #endif */
   box-sizing: border-box;
   padding: 0 6px 6px 0;
-  background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-color-background-sunken, var(--nutui-gray-2)));
+  background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-color-background-sunken, #f7f8fc));
 }
 .nut-numberkeyboard-body-wrapper .key {
   display: flex;
@@ -439,8 +434,8 @@
   height: var(--nutui-numberkeyboard-key-height, 48px);
   font-size: var(--nutui-numberkeyboard-key-font-size, var(--nutui-font-size-xl, 18px));
   line-height: var(--nutui-numberkeyboard-key-line-height, 1.5);
-  background-color: var(--nutui-numberkeyboard-key-background-color, var(--nutui-gray-1));
-  color: var(--nutui-numberkeyboard-key-color, var(--nutui-gray-6));
+  background-color: var(--nutui-numberkeyboard-key-background-color, var(--nutui-color-background-overlay, #ffffff));
+  color: var(--nutui-numberkeyboard-key-color, var(--nutui-color-text, #505259));
   border-radius: var(--nutui-numberkeyboard-key-border-radius, 8px);
   border: var(--nutui-numberkeyboard-key-border, none);
   font-weight: var(--nutui-font-weight-bold, 600);
@@ -469,7 +464,7 @@
 .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm {
   font-size: var(--nutui-numberkeyboard-key-confirm-font-size, var(--nutui-font-size-l, 16px));
   color: var(--nutui-numberkeyboard-key-confirm-color, #fff);
-  background-color: var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-brand-6));
+  background-color: var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm.active {
   background-color: rgba(255, 0, 0, 0.7);

package/dist/cjs/packages/overlay/index.d.ts

@@ -1,3 +1,3 @@
 import { Overlay } from "./overlay";
-export type { OverlayProps } from "./overlay";
+export type { OverlayProps } from './types.taro';
 export default Overlay;

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

@@ -1,15 +1,4 @@
 import React, { FunctionComponent } from 'react';
-import { ITouchEvent } from '@tarojs/components';
-import { BasicComponent } from "../../utils/typings";
-export interface OverlayProps extends BasicComponent {
-    zIndex: number;
-    duration: number;
-    closeOnOverlayClick: boolean;
-    visible: boolean;
-    lockScroll: boolean;
-    onClick: (event: ITouchEvent) => void;
-    afterShow: () => void;
-    afterClose: () => void;
-}
+import { OverlayProps } from './types.taro';
 export declare const defaultOverlayProps: OverlayProps;
 export declare const Overlay: FunctionComponent<Partial<OverlayProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;

package/dist/cjs/packages/overlay/overlay.js

@@ -35,19 +35,11 @@ var defaultOverlayProps = (0, _object_spread_props._)((0, _object_spread._)({},
     closeOnOverlayClick: true,
     visible: false,
     lockScroll: true,
-    onClick: function onClick(event) {}
+    onClick: function onClick() {},
+    afterShow: function afterShow() {},
+    afterClose: function afterClose() {}
 });
 var Overlay = function Overlay(props) {
-    var renderHarmony = function renderHarmony() {
-        return innerVisible ? /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread_props._)((0, _object_spread._)({
-            ref: nodeRef,
-            className: classes,
-            style: styles
-        }, rest), {
-            catchMove: lockScroll,
-            onClick: handleClick
-        }), children) : null;
-    };
     var _ref = (0, _object_spread._)({}, defaultOverlayProps, props), children = _ref.children, zIndex = _ref.zIndex, duration = _ref.duration, className = _ref.className, closeOnOverlayClick = _ref.closeOnOverlayClick, visible = _ref.visible, lockScroll = _ref.lockScroll, style = _ref.style, afterShow = _ref.afterShow, afterClose = _ref.afterClose, onClick = _ref.onClick, rest = (0, _object_without_properties._)(_ref, [
         "children",
         "zIndex",
@@ -61,46 +53,41 @@ var Overlay = function Overlay(props) {
         "afterClose",
         "onClick"
     ]);
-    var classPrefix = "nut-overlay";
+    var classPrefix = 'nut-overlay';
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(visible), 2), innerVisible = _useState[0], setInnerVisible = _useState[1];
     var nodeRef = (0, _uselockscolltaro.useLockScrollTaro)(!!lockScroll && innerVisible);
     (0, _react.useEffect)(function() {
-        if (visible) {
-            setInnerVisible(true);
-        } else {
-            setInnerVisible(false);
-        }
+        setInnerVisible(visible);
     }, [
         visible
     ]);
     var classes = (0, _classnames.default)(classPrefix, className);
-    var styles = (0, _object_spread._)({}, style);
+    var styles = (0, _object_spread_props._)((0, _object_spread._)({}, style), {
+        zIndex: zIndex
+    });
     var handleClick = function handleClick(e) {
         if (closeOnOverlayClick) {
             onClick && onClick(e);
         }
     };
-    var onHandleOpened = function onHandleOpened(e) {
-        afterShow && afterShow();
-    };
-    var onHandleClosed = function onHandleClosed(e) {
-        afterClose && afterClose();
+    var renderOverlay = function renderOverlay() {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread_props._)((0, _object_spread._)({
+            ref: nodeRef,
+            className: classes,
+            style: styles
+        }, rest), {
+            catchMove: lockScroll,
+            onClick: handleClick
+        }), children);
     };
-    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, !(0, _platformtaro.harmonyAndRn)() ? /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, !(0, _platformtaro.harmony)() ? /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
         nodeRef: nodeRef,
         classNames: "".concat(classPrefix, "-slide"),
         unmountOnExit: true,
         timeout: duration,
         in: innerVisible,
-        onEntered: onHandleOpened,
-        onExited: onHandleClosed
-    }, /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread_props._)((0, _object_spread._)({
-        ref: nodeRef,
-        className: classes,
-        style: styles
-    }, rest), {
-        catchMove: lockScroll,
-        onClick: handleClick
-    }), children)) : renderHarmony());
+        onEntered: afterShow,
+        onExited: afterClose
+    }, renderOverlay()) : innerVisible && renderOverlay());
 };
 Overlay.displayName = 'NutOverlay';

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

@@ -1,10 +1,5 @@
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;