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

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

@@ -30,7 +30,7 @@
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
   color: var(--nutui-badge-color, #fff);
   padding: var(--nutui-badge-padding, 0 4px);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-1, 10px));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
   font-weight: normal;
   text-align: center;
   border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
@@ -78,7 +78,7 @@
   flex: 1;
   text-align: center;
   text-decoration: none;
-  color: var(--nutui-tabbar-inactive-color, var(--nutui-gray-7, #1a1a1a));
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   height: 100%;
 }
 .nut-tabbar-item-icon-box {
@@ -95,11 +95,11 @@
 }
 .nut-tabbar-item-icon-box-nav {
   display: block;
-  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-1, 10px));
+  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
   margin-top: var(--nutui-tabbar-text-margin-top, 3px);
 }
 .nut-tabbar-item-icon-box-large {
-  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-4, 16px));
+  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
   margin-top: 0;
   line-height: var(--nutui-tabbar-text-line-height, 20px);
   font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400));
@@ -125,7 +125,7 @@
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  background: var(--nutui-gray-1, #ffffff);
+  background: var(--nutui-color-background-overlay, #ffffff);
 }
 .nut-tabbar-wrap {
   width: 100%;

package/dist/cjs/packages/tabbar/tabbar.js

@@ -15,6 +15,7 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _usepropsvalue = require("../../utils/use-props-value");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../tabbaritem/index"));
@@ -36,10 +37,10 @@ var Tabbar = function Tabbar(props) {
         finalValue: 0,
         onChange: onSwitch
     }), 2), selectIndex = _usePropsValue[0], setSelectIndex = _usePropsValue[1];
-    return /*#__PURE__*/ _react.default.createElement("div", {
+    return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-fixed"), fixed), className),
         style: style
-    }, /*#__PURE__*/ _react.default.createElement("div", {
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-wrap")
     }, /*#__PURE__*/ _react.default.createElement(_context.default.Provider, {
         value: {
@@ -53,7 +54,7 @@ var Tabbar = function Tabbar(props) {
         return /*#__PURE__*/ _react.default.cloneElement(child, (0, _object_spread_props._)((0, _object_spread._)({}, child.props), {
             index: index
         }));
-    }))), (fixed || safeArea) && /*#__PURE__*/ _react.default.createElement("div", {
+    }))), (fixed || safeArea) && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-safe-area")
     }));
 };

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

@@ -30,7 +30,7 @@
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
   color: var(--nutui-badge-color, #fff);
   padding: var(--nutui-badge-padding, 0 4px);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-1, 10px));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
   font-weight: normal;
   text-align: center;
   border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
@@ -78,7 +78,7 @@
   flex: 1;
   text-align: center;
   text-decoration: none;
-  color: var(--nutui-tabbar-inactive-color, var(--nutui-gray-7, #1a1a1a));
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   height: 100%;
 }
 .nut-tabbar-item-icon-box {
@@ -95,11 +95,11 @@
 }
 .nut-tabbar-item-icon-box-nav {
   display: block;
-  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-1, 10px));
+  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
   margin-top: var(--nutui-tabbar-text-margin-top, 3px);
 }
 .nut-tabbar-item-icon-box-large {
-  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-4, 16px));
+  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
   margin-top: 0;
   line-height: var(--nutui-tabbar-text-line-height, 20px);
   font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400));

package/dist/cjs/packages/tabbaritem/tabbaritem.js

@@ -16,6 +16,7 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../badge/index"));
 var _context = /*#__PURE__*/ _interop_require_default._(require("../tabbar/context"));
@@ -55,7 +56,7 @@ var TabbarItem = function TabbarItem(props) {
         right: right,
         color: ctx === null || ctx === void 0 ? void 0 : ctx.activeColor
     };
-    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
+    return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
         className: tabbarItemClass,
         style: (0, _object_spread._)({
             color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
@@ -63,11 +64,11 @@ var TabbarItem = function TabbarItem(props) {
         onClick: function onClick() {
             return ctx === null || ctx === void 0 ? void 0 : ctx.handleClick(index);
         }
-    }, rest), icon ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, /*#__PURE__*/ _react.default.createElement("div", {
+    }, rest), icon ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: boxPrefix
-    }, icon)), /*#__PURE__*/ _react.default.createElement("div", {
+    }, icon)), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: titleClass
-    }, title)) : /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, /*#__PURE__*/ _react.default.createElement("div", {
+    }, title)) : /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: titleClass
     }, title)));
 };

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

@@ -8,12 +8,12 @@
   display: flex;
   width: 100%;
   flex-direction: column;
-  font-size: var(--nutui-font-size-3, 14px);
-  color: var(--nutui-gray-7, #1a1a1a);
+  font-size: var(--nutui-font-size-base, 14px);
+  color: var(--nutui-color-title, #1a1a1a);
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
-  border: 1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
+  border: 1px solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-table-wrapper-sticky {
   overflow-x: auto;
@@ -21,21 +21,21 @@
 .nut-table-main {
   display: table;
   overflow-x: auto;
-  color: var(--nutui-gray-7, #1a1a1a);
-  background-color: var(--nutui-gray-1, #ffffff);
+  color: var(--nutui-color-title, #1a1a1a);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
   table-layout: fixed;
   width: max-content;
   min-width: 100%;
   position: relative;
 }
 .nut-table-main-striped .nut-table-main-head-tr {
-  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-gray-3, #f5f6fa));
+  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f5f6fa));
 }
 .nut-table-main-striped .nut-table-main-body-tr:nth-child(odd) {
   background-color: var(--nutui-table-tr-odd-bg-color, #ffffff);
 }
 .nut-table-main-striped .nut-table-main-body-tr:nth-child(even) {
-  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-gray-3, #f5f6fa));
+  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f5f6fa));
 }
 .nut-table-main-head, .nut-table-main-body {
   background: inherit;
@@ -77,8 +77,8 @@
   justify-content: center;
 }
 .nut-table-main-head-tr-border, .nut-table-main-body-tr-border {
-  border-right: 1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
-  border-bottom: 1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
+  border-right: 1px solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-bottom: 1px solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-table-main-head-tr-alignleft, .nut-table-main-head-tr-align, .nut-table-main-body-tr-alignleft, .nut-table-main-body-tr-align {
   text-align: start;
@@ -127,8 +127,8 @@
   border-right: none;
 }
 .nut-table-summary {
-  color: var(--nutui-gray-7, #1a1a1a);
-  background-color: var(--nutui-gray-1, #ffffff);
+  color: var(--nutui-color-title, #1a1a1a);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -154,7 +154,7 @@
 .nut-rtl .nut-table-main-head-tr-border,
 .nut-rtl .nut-table-main-body-tr-border {
   border-right: none;
-  border-left: 1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
+  border-left: 1px solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 [dir=rtl] .nut-table-main-head-tr-alignleft, [dir=rtl] .nut-table-main-head-tr-align, [dir=rtl] .nut-table-main-body-tr-alignleft, [dir=rtl] .nut-table-main-body-tr-align,
 .nut-rtl .nut-table-main-head-tr-alignleft,

package/dist/cjs/packages/table/table.js

@@ -19,6 +19,7 @@ var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _iconsreacttaro = require("@nutui/icons-react-taro");
+var _components = require("@tarojs/components");
 var _configprovider = require("../configprovider/configprovider");
 var _typings = require("../../utils/typings");
 var _usepropsvalue = require("../../utils/use-props-value");
@@ -92,7 +93,7 @@ var Table = function Table(props) {
     };
     var renderHeadCells = function renderHeadCells() {
         return columns.map(function(item, index) {
-            return /*#__PURE__*/ _react.default.createElement("div", {
+            return /*#__PURE__*/ _react.default.createElement(_components.View, {
                 className: (0, _classnames.default)("".concat(headerClassPrefix, "-th"), cellClasses(item), getStickyClass(item.key)),
                 key: item.key,
                 onClick: function onClick() {
@@ -114,51 +115,54 @@ var Table = function Table(props) {
         });
     };
     var renderBodyTds = function renderBodyTds(item, rowIndex) {
-        var rowRender = item.rowRender;
-        if (rowRender && typeof rowRender === 'function') {
-            return rowRender(item, rowIndex);
-        }
         return sortDataItem().map(function(param) {
             var _param = (0, _sliced_to_array._)(param, 2), value = _param[0], render = _param[1];
-            return /*#__PURE__*/ _react.default.createElement("div", {
+            return /*#__PURE__*/ _react.default.createElement(_components.View, {
                 className: (0, _classnames.default)("".concat(bodyClassPrefix, "-td"), cellClasses(getColumnItem(value)), getStickyClass(value)),
                 key: value,
                 style: getStickyStyle(value)
-            }, typeof item[value] === 'function' || typeof render === 'function' ? /*#__PURE__*/ _react.default.createElement("div", null, render ? render(item, rowIndex) : item[value](item)) : item[value]);
+            }, typeof item[value] === 'function' || typeof render === 'function' ? /*#__PURE__*/ _react.default.createElement(_components.View, null, render ? render(item, rowIndex) : item[value](item)) : item[value]);
         });
     };
     var renderBodyTrs = function renderBodyTrs() {
         return innerValue.map(function(item, index) {
-            return /*#__PURE__*/ _react.default.createElement("div", {
+            var inner = renderBodyTds(item, index);
+            var rowRender = item.rowRender;
+            if (rowRender && typeof rowRender === 'function') {
+                return rowRender(item, index, {
+                    inner: inner
+                });
+            }
+            return /*#__PURE__*/ _react.default.createElement(_components.View, {
                 className: bodyClassPrefix,
                 key: index
-            }, renderBodyTds(item, index));
+            }, inner);
         });
     };
     return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
         className: cls
-    }, rest), /*#__PURE__*/ _react.default.createElement("div", {
+    }, rest), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)("".concat(classPrefix, "-wrapper ").concat(isSticky ? "".concat(classPrefix, "-wrapper-sticky") : '')),
         style: style
-    }, /*#__PURE__*/ _react.default.createElement("div", {
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)("".concat(classPrefix, "-main"), (0, _define_property._)({}, "".concat(classPrefix, "-main-striped"), striped))
-    }, showHeader && /*#__PURE__*/ _react.default.createElement("div", {
+    }, showHeader && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-main-head")
-    }, /*#__PURE__*/ _react.default.createElement("div", {
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: headerClassPrefix
-    }, renderHeadCells())), /*#__PURE__*/ _react.default.createElement("div", {
+    }, renderHeadCells())), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-main-body")
-    }, renderBodyTrs()))), isSticky ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
+    }, renderBodyTrs()))), isSticky ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-sticky-left"),
         style: {
             width: stickyLeftWidth
         }
-    }), /*#__PURE__*/ _react.default.createElement("div", {
+    }), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-sticky-right"),
         style: {
             width: stickyRightWidth
         }
-    })) : null, (summary || innerValue.length === 0) && /*#__PURE__*/ _react.default.createElement("div", {
+    })) : null, (summary || innerValue.length === 0) && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-summary")
     }, summary || noData));
 };

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

@@ -3,7 +3,7 @@
   flex-shrink: 0;
   display: block;
   background-color: var(--nutui-tabs-tabpane-backgroundColor, #fff);
-  color: var(--nutui-gray-7, #1a1a1a);
+  color: var(--nutui-color-title, #1a1a1a);
   padding: var(--nutui-tabs-tabpane-padding, 24px 20px);
   box-sizing: border-box;
   overflow: auto;

package/dist/cjs/packages/tabpane/tabpane.js

@@ -12,6 +12,7 @@ var _interop_require_default = require("@swc/helpers/_/_interop_require_default"
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _components = require("@tarojs/components");
 var defaultProps = {
     title: '',
     value: '',
@@ -23,7 +24,7 @@ var TabPane = function TabPane(props) {
     var classes = (0, _classnames.default)(classPrefix, {
         active: !disabled && props.active
     }, autoHeightClassName, className);
-    return children ? /*#__PURE__*/ _react.default.createElement("div", {
+    return children ? /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classes
     }, !disabled && children) : null;
 };

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

@@ -3,7 +3,7 @@
   flex-shrink: 0;
   display: block;
   background-color: var(--nutui-tabs-tabpane-backgroundColor, #fff);
-  color: var(--nutui-gray-7, #1a1a1a);
+  color: var(--nutui-color-title, #1a1a1a);
   padding: var(--nutui-tabs-tabpane-padding, 24px 20px);
   box-sizing: border-box;
   overflow: auto;
@@ -23,7 +23,8 @@
   height: var(--nutui-tabs-titles-height, 44px);
   user-select: none;
   overflow: hidden;
-  background: var(--nutui-tabs-titles-background-color, var(--nutui-gray-3, #f5f6fa));
+  background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f5f6fa));
+  scrollbar-width: none;
 }
 .nut-tabs-titles::-webkit-scrollbar {
   display: none;
@@ -62,8 +63,8 @@
   height: var(--nutui-tabs-titles-height, 44px);
   line-height: var(--nutui-tabs-titles-height, 44px);
   min-width: var(--nutui-tabs-titles-item-min-width, 50px);
-  font-size: var(--nutui-tabs-titles-font-size, var(--nutui-font-size-3, 14px));
-  color: var(--nutui-tabs-titles-item-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-tabs-titles-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a));
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -98,7 +99,7 @@
 }
 .nut-tabs-titles-item-active {
   color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
-  font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 500));
+  font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
   overflow: unset;
@@ -116,8 +117,8 @@
   color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-tabs-titles-simple .nut-tabs-titles-item-active {
-  color: var(--nutui-gray-7, #1a1a1a);
-  font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-4, 16px));
+  color: var(--nutui-color-title, #1a1a1a);
+  font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-tabs-titles-card {
   padding: 0;
@@ -127,9 +128,9 @@
   padding: 0;
 }
 .nut-tabs-titles-card .nut-tabs-titles-item-active {
-  font-weight: var(--nutui-font-weight-bold, 500);
+  font-weight: var(--nutui-font-weight-bold, 600);
   background-color: #ffffff;
-  border-radius: var(--nutui-radius-6) var(--nutui-radius-6) 0 0;
+  border-radius: var(--nutui-radius-base, 8px) var(--nutui-radius-base, 8px) 0 0;
 }
 .nut-tabs-titles-button .nut-tabs-titles-item {
   padding: 0 10px;
@@ -144,16 +145,16 @@
 }
 .nut-tabs-titles-button .nut-tabs-titles-item-active .nut-tabs-titles-item-text {
   background: var(--nutui-color-default-light);
-  color: var(--nutui-gray-6, #505259);
+  color: var(--nutui-color-text, #505259);
   border-radius: var(--nutui-tabs-button-border-radius, 50px);
-  font-weight: var(--nutui-font-weight-bold, 500);
-  background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light, #ffebf1));
+  font-weight: var(--nutui-font-weight-bold, 600);
+  background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
   color: var(--nutui-color-primary, #ff0f23);
   border: var(--nutui-tabs-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-titles-divider {
   padding: 0;
-  border-bottom: 1px solid var(--nutui-black-3, rgba(0, 0, 0, 0.06));
+  border-bottom: 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06));
 }
 .nut-tabs-titles-divider .nut-tabs-titles-item {
   padding: 0;
@@ -166,7 +167,7 @@
   top: 50%;
   height: 50%;
   width: 1px;
-  background: var(--nutui-black-3, rgba(0, 0, 0, 0.06));
+  background: var(--nutui-color-border, rgba(0, 0, 0, 0.06));
   transform: translateY(-50%);
 }
 .nut-tabs-titles-divider .nut-tabs-titles-item:last-child::after {
@@ -242,13 +243,13 @@
   top: 50%;
 }
 .nut-tabs-vertical .nut-tabs-titles-item-active {
-  background-color: var(--nutui-tabs-titles-item-active-background-color, var(--nutui-gray-1, #ffffff));
+  background-color: var(--nutui-tabs-titles-item-active-background-color, var(--nutui-color-background-overlay, #ffffff));
 }
 .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
   left: 10px;
   width: var(--nutui-tabs-vertical-tab-line-width, 3px);
   height: var(--nutui-tabs-vertical-tab-line-height, 12px);
-  background: var(--nutui-tabs-vertical-tab-line-color, linear-gradient(180deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-light, #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, #ffebf1) 100%));
 }
 .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile {
   right: -12px;
@@ -310,8 +311,8 @@
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-titles-item-active {
   color: var(--nutui-color-primary, #ff0f23);
-  font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 500));
-  font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-4, 16px));
+  font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 600));
+  font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
   content: " ";

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

@@ -11,6 +11,7 @@
   user-select: none;
   overflow: hidden;
   background: $tabs-titles-background-color;
+  scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;
@@ -136,7 +137,7 @@
       &-active {
         font-weight: $font-weight-bold;
         background-color: $white;
-        border-radius: $radius-s $radius-s 0 0;
+        border-radius: $radius-base $radius-base 0 0;
       }
     }
   }
@@ -160,7 +161,7 @@
         border-radius: $tabs-tab-button-border-radius;
         font-weight: $font-weight-bold;
         background-color: $tabs-tab-button-active-background-color;
-        color: $color-text-link;
+        color: $color-primary;
         border: $tabs-tab-button-active-border;
       }
     }
@@ -422,10 +423,10 @@
 }
 
 .nut-tabs-content {
+  display: flex;
+  box-sizing: border-box;
+
   &-wrap {
     overflow: hidden;
   }
-
-  display: flex;
-  box-sizing: border-box;
 }

package/dist/cjs/packages/tabs/tabs.js

@@ -164,6 +164,8 @@ var Tabs = function Tabs(props) {
                         return prev + curr.width;
                     }, 0);
                     to = left - (navRectRef.current.width - titleRect.width) / 2;
+                    // to < 0 说明不需要进行滚动，页面元素已全部显示出来
+                    if (to < 0) return;
                     to = rtl ? -to : to;
                 }
                 (0, _taro.nextTick)(function() {

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

@@ -4,7 +4,7 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-1, 10px));
+  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));
   border-radius: var(--nutui-tag-border-radius, 2px);
   height: var(--nutui-tag-height, 14px);
   color: var(--nutui-tag-color, #ffffff);
@@ -15,20 +15,20 @@
   margin-left: 4px;
 }
 .nut-tag-text {
-  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-1, 10px));
+  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));
   color: var(--nutui-tag-color, #ffffff);
 }
 .nut-tag-text-plain {
-  color: var(--nutui-gray-7, #1a1a1a);
+  color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-tag-default {
-  background: var(--nutui-tag-background-color, var(--nutui-gray-7, #1a1a1a));
+  background: var(--nutui-tag-background-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-tag-primary {
   background: #fa2c19;
 }
 .nut-tag-info {
-  background: var(--nutui-tag-info-background-color, var(--nutui-color-info, #1988fa));
+  background: var(--nutui-tag-info-background-color, var(--nutui-color-info, #0073ff));
 }
 .nut-tag-success {
   background: var(--nutui-tag-success-background-color, #4fc08d);
@@ -37,7 +37,7 @@
   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, #c47600));
+  background: var(--nutui-tag-warning-background-color, var(--nutui-color-warning, #ffbf00));
 }
 .nut-tag-round {
   border-radius: var(--nutui-tag-round-border-radius, 8px);
@@ -52,11 +52,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-1, 10px));
+  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));
+  color: var(--nutui-tag-color, #ffffff);
+  margin-left: 4px;
 }
 .nut-tag-plain {
   background-color: #fff;
-  border: var(--nutui-tag-border-width, 1px) solid var(--nutui-gray-7, #1a1a1a);
+  border: var(--nutui-tag-border-width, 1px) solid var(--nutui-color-title, #1a1a1a);
 }
 
 [dir=rtl] .nut-tag .nut-icon,

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

@@ -28,7 +28,7 @@
   background: #fa2c19;
 }
 .nut-tag-info {
-  background: #1988fa;
+  background: #0073ff;
 }
 .nut-tag-success {
   background: #4fc08d;
@@ -37,7 +37,7 @@
   background: #ff0f23;
 }
 .nut-tag-warning {
-  background: #c47600;
+  background: #ffbf00;
 }
 .nut-tag-round {
   border-radius: 8px;
@@ -53,6 +53,8 @@
   align-items: center;
   justify-content: center;
   font-size: 10px;
+  color: #ffffff;
+  margin-left: 4px;
 }
 .nut-tag-plain {
   background-color: #fff;

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

@@ -67,6 +67,8 @@
     align-items: center;
     justify-content: center;
     font-size: $tag-font-size;
+    color: $tag-color;
+    margin-left: 4px;
   }
 
   &-plain {

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

@@ -1,5 +1,5 @@
-import React, { FunctionComponent, ReactNode } from 'react';
 import type { MouseEvent } from 'react';
+import React, { FunctionComponent, ReactNode } from 'react';
 import { ITouchEvent } from '@tarojs/components';
 import { BasicComponent } from "../../utils/typings";
 export type TagType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';

package/dist/cjs/packages/tag/tag.js

@@ -16,6 +16,7 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _components = require("@tarojs/components");
+var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _typings = require("../../utils/typings");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
@@ -76,20 +77,13 @@ var Tag = function Tag(props) {
             setVisible(false);
             onClose && onClose(e);
         }
-    }, closeIcon) : // <Close
-    //   size={8}
-    //   onClick={(e) => {
-    //     setVisible(false)
-    //     onClose && onClose(e)
-    //   }}
-    // />
-    /*#__PURE__*/ _react.default.createElement(_components.Text, {
+    }, closeIcon) : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, {
+        size: 8,
         onClick: function onClick(e) {
             setVisible(false);
             onClose && onClose(e);
-        },
-        className: "".concat(classPrefix, "-custom-icon")
-    }, "X")) : /*#__PURE__*/ _react.default.createElement(_components.View, {
+        }
+    })) : /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classes,
         style: (0, _object_spread._)({}, style, getStyle()),
         onClick: function onClick(e) {