@nutui/nutui-react-taro 3.0.0-beta.9 → 3.0.1

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

@@ -11,7 +11,7 @@
   min-width: var(--nutui-switch-width, 46px);
   height: var(--nutui-switch-height, 28px);
   line-height: var(--nutui-switch-line-height, 28px);
-  background-color: var(--nutui-switch-active-background-color, var(--nutui-brand-6));
+  background-color: var(--nutui-switch-active-background-color, var(--nutui-color-primary, #ff0f23));
   border-radius: var(--nutui-switch-border-radius, 50px);
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -46,7 +46,7 @@
   left: calc(100% - var(--nutui-switch-height, 28px) + var(--nutui-switch-border-width, 2px));
 }
 .nut-switch-close {
-  background-color: var(--nutui-switch-inactive-background-color, var(--nutui-gray-4));
+  background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-switch-close-line {
   width: calc((var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2) / 2);
@@ -78,14 +78,14 @@
   margin: 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px) 0 7px;
 }
 .nut-switch-label-close-disabled {
-  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-gray-4));
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-switch-label-close-disabled .nut-icon {
-  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-gray-4));
+  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-brand-3));
+  background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-switch-disabled-close {
-  background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-gray-3));
+  background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background, #f2f3f5));
 }

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

@@ -0,0 +1,91 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-switch {
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 46px;
+  height: 28px;
+  line-height: 28px;
+  background-color: #ff0f23;
+  border-radius: 50px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  flex: 0 0 auto;
+}
+.nut-switch-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: calc(28px - 2px * 2);
+  width: calc(28px - 2px * 2);
+  border-radius: 50%;
+  background: #ffffff;
+  transition: left 0.3s linear;
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
+}
+.nut-switch-button-open {
+  left: calc(100% - 28px + 2px);
+}
+.nut-switch-button-open-rtl {
+  left: 2px;
+}
+.nut-switch-button-close {
+  left: 2px;
+}
+.nut-switch-button-close-rtl {
+  left: calc(100% - 28px + 2px);
+}
+.nut-switch-close {
+  background-color: #c2c4cc;
+}
+.nut-switch-close-line {
+  width: calc((28px - 2px * 2) / 2);
+  height: 2px;
+  background: #ffffff;
+  border-radius: 2px;
+}
+.nut-switch-label {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  white-space: nowrap;
+  color: #ffffff;
+  font-size: 12px;
+}
+.nut-switch-label .nut-icon {
+  color: #ffffff;
+}
+.nut-switch-label-open {
+  margin: 0 calc(28px - 2px + 3px) 0 7px;
+}
+.nut-switch-label-open-rtl {
+  margin: 0 7px 0 calc(28px - 2px + 3px);
+}
+.nut-switch-label-close {
+  margin: 0 7px 0 calc(28px - 2px + 3px);
+}
+.nut-switch-label-close-rtl {
+  margin: 0 calc(28px - 2px + 3px) 0 7px;
+}
+.nut-switch-label-close-disabled {
+  color: #c2c4cc;
+}
+.nut-switch-label-close-disabled .nut-icon {
+  color: #c2c4cc;
+}
+.nut-switch-disabled {
+  background-color: #ffadbe;
+}
+.nut-switch-disabled-close {
+  background-color: #f2f3f5;
+}

package/dist/cjs/packages/switch/switch.js

@@ -18,7 +18,7 @@ var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _components = require("@tarojs/components");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _typings = require("../../utils/typings");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var _index = require("../configprovider/index");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     disabled: false,

package/dist/cjs/packages/tabbar/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,10 +93,10 @@
 }
 .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));
 }
 
 .nut-tabbar-item {
@@ -107,7 +107,7 @@
   flex: 1;
   text-align: center;
   text-decoration: none;
-  color: var(--nutui-tabbar-inactive-color, var(--nutui-gray-7));
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   height: 100%;
 }
 .nut-tabbar-item-icon-box {
@@ -118,13 +118,21 @@
   position: relative;
 }
 .nut-tabbar-item-icon-box .nut-icon {
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
+  width: 22px;
+  height: 22px;
+  font-size: 22px;
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
+  /* #endif*/
+  /* #ifndef harmony*/
+  color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-icon-box-nav {
   display: block;
+  color: var(--nutui-color-text, #505259);
   font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
+  line-height: 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 {
@@ -134,19 +142,12 @@
   font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400));
 }
 .nut-tabbar-item-active {
-  color: var(--nutui-tabbar-active-color, var(--nutui-brand-6));
-}
-.nut-tabbar-item-active .nut-tabbar-item-icon-box {
-  /* #ifdef harmony*/
-  color: var(--nutui-tabbar-active-color, var(--nutui-brand-6));
-  /* #endif*/
-  /* #ifndef harmony*/
-  color: inherit;
-  /* #endif*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
-.nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon {
+.nut-tabbar-item-active .nut-tabbar-item-icon-box,
+.nut-tabbar-item-active .nut-icon {
   /* #ifdef harmony*/
-  color: var(--nutui-tabbar-active-color, var(--nutui-brand-6));
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
   /* #endif*/
   /* #ifndef harmony*/
   color: inherit;
@@ -164,7 +165,7 @@
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  background: var(--nutui-gray-1);
+  background: var(--nutui-color-background-overlay, #ffffff);
 }
 .nut-tabbar-wrap {
   width: 100%;

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

@@ -0,0 +1,50 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-tabbar {
+  border: 0px;
+  box-shadow: none;
+  border-bottom: 1px solid #eee;
+  border-top: 1px solid #eee;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  background: #ffffff;
+}
+.nut-tabbar-wrap {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.nut-tabbar:last-child {
+  border-right: 0;
+}
+.nut-tabbar-fixed {
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+}
+.nut-tabbar-safe-area {
+  display: block;
+  width: 100%;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+[dir=rtl] .nut-tabbar:last-child,
+.nut-rtl .nut-tabbar:last-child {
+  border-right: none;
+  border-left: 0;
+}
+[dir=rtl] .nut-tabbar-fixed,
+.nut-rtl .nut-tabbar-fixed {
+  left: auto;
+  right: 0px;
+}

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

@@ -17,7 +17,7 @@ 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 _usepropsvalue = require("../../hooks/use-props-value");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../tabbaritem/index"));
 var _context = /*#__PURE__*/ _interop_require_default._(require("./context"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {

package/dist/cjs/packages/tabbaritem/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,10 +93,10 @@
 }
 .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));
 }
 
 .nut-tabbar-item {
@@ -107,7 +107,7 @@
   flex: 1;
   text-align: center;
   text-decoration: none;
-  color: var(--nutui-tabbar-inactive-color, var(--nutui-gray-7));
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   height: 100%;
 }
 .nut-tabbar-item-icon-box {
@@ -118,13 +118,21 @@
   position: relative;
 }
 .nut-tabbar-item-icon-box .nut-icon {
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
+  width: 22px;
+  height: 22px;
+  font-size: 22px;
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
+  /* #endif*/
+  /* #ifndef harmony*/
+  color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-icon-box-nav {
   display: block;
+  color: var(--nutui-color-text, #505259);
   font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
+  line-height: 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 {
@@ -134,19 +142,12 @@
   font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400));
 }
 .nut-tabbar-item-active {
-  color: var(--nutui-tabbar-active-color, var(--nutui-brand-6));
-}
-.nut-tabbar-item-active .nut-tabbar-item-icon-box {
-  /* #ifdef harmony*/
-  color: var(--nutui-tabbar-active-color, var(--nutui-brand-6));
-  /* #endif*/
-  /* #ifndef harmony*/
-  color: inherit;
-  /* #endif*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
-.nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon {
+.nut-tabbar-item-active .nut-tabbar-item-icon-box,
+.nut-tabbar-item-active .nut-icon {
   /* #ifdef harmony*/
-  color: var(--nutui-tabbar-active-color, var(--nutui-brand-6));
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
   /* #endif*/
   /* #ifndef harmony*/
   color: inherit;

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

@@ -0,0 +1,65 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-tabbar-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  text-align: center;
+  text-decoration: none;
+  color: #1a1a1a;
+  height: 100%;
+}
+.nut-tabbar-item-icon-box {
+  padding: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+.nut-tabbar-item-icon-box .nut-icon {
+  width: 22px;
+  height: 22px;
+  font-size: 22px;
+  /* #ifdef harmony*/
+  color: #1a1a1a;
+  /* #endif*/
+  /* #ifndef harmony*/
+  color: inherit;
+  /* #endif*/
+}
+.nut-tabbar-item-icon-box-nav {
+  display: block;
+  color: #505259;
+  font-size: 11px;
+  line-height: 11px;
+  margin-top: 3px;
+}
+.nut-tabbar-item-icon-box-large {
+  font-size: 16px;
+  margin-top: 0;
+  line-height: 20px;
+  font-weight: 400;
+}
+.nut-tabbar-item-active {
+  color: #ff0f23;
+}
+.nut-tabbar-item-active .nut-tabbar-item-icon-box {
+  /* #ifdef harmony*/
+  color: #ff0f23;
+  /* #endif*/
+  /* #ifndef harmony*/
+  color: inherit;
+  /* #endif*/
+}
+.nut-tabbar-item-active .nut-icon {
+  /* #ifdef harmony*/
+  color: #ff0f23;
+  /* #endif*/
+  /* #ifndef harmony*/
+  color: inherit;
+  /* #endif*/
+}

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

@@ -17,14 +17,22 @@
     position: relative;
 
     .nut-icon {
-      width: 24px;
-      height: 24px;
-      font-size: 24px;
+      width: 22px;
+      height: 22px;
+      font-size: 22px;
+      /* #ifdef harmony*/
+      color: $tabbar-inactive-color;
+      /* #endif*/
+      /* #ifndef harmony*/
+      color: inherit;
+      /* #endif*/
     }
 
     &-nav {
       display: block;
+      color: $color-text;
       font-size: $tabbar-text-font-size;
+      line-height: $tabbar-text-font-size;
       margin-top: $tabbar-text-margin-top;
     }
 
@@ -39,22 +47,14 @@
   &-active {
     color: $tabbar-active-color;
 
-    .nut-tabbar-item-icon-box {
+    .nut-tabbar-item-icon-box,
+    .nut-icon {
       /* #ifdef harmony*/
       color: $tabbar-active-color;
       /* #endif*/
       /* #ifndef harmony*/
       color: inherit;
       /* #endif*/
-
-      .nut-icon {
-        /* #ifdef harmony*/
-        color: $tabbar-active-color;
-        /* #endif*/
-        /* #ifndef harmony*/
-        color: inherit;
-        /* #endif*/
-      }
     }
   }
 }

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

@@ -28,7 +28,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     dot: false,
     max: 99,
     top: '0',
-    right: '5'
+    right: '0'
 });
 var TabbarItem = function TabbarItem(props) {
     var ctx = (0, _react.useContext)(_context.default);
@@ -57,6 +57,14 @@ var TabbarItem = function TabbarItem(props) {
         right: right,
         color: ctx === null || ctx === void 0 ? void 0 : ctx.activeColor
     };
+    var renderTitleText = function renderTitleText() {
+        return title && /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: titleClass,
+            style: {
+                color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
+            }
+        }, title);
+    };
     return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
         className: tabbarItemClass,
         style: (0, _object_spread._)({
@@ -67,15 +75,5 @@ var TabbarItem = function TabbarItem(props) {
         }
     }, 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
-    }, (0, _addcolorforharmony.default)(icon, active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor))), /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: titleClass,
-        style: {
-            color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
-        }
-    }, title)) : /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: titleClass,
-        style: {
-            color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
-        }
-    }, title)));
+    }, (0, _addcolorforharmony.default)(icon, active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor))), renderTitleText()) : /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, renderTitleText()));
 };

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

@@ -13,11 +13,11 @@
   width: 100%;
   flex-direction: column;
   font-size: var(--nutui-font-size-base, 14px);
-  color: var(--nutui-gray-7);
+  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));
+  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;
@@ -25,21 +25,21 @@
 .nut-table-main {
   display: table;
   overflow-x: auto;
-  color: var(--nutui-gray-7);
-  background-color: var(--nutui-gray-1);
+  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));
+  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f2f3f5));
 }
 .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));
+  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f2f3f5));
 }
 .nut-table-main-head, .nut-table-main-body {
   background: inherit;
@@ -81,8 +81,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));
-  border-bottom: 1px solid var(--nutui-table-border-color, var(--nutui-black-3));
+  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;
@@ -131,8 +131,8 @@
   border-right: none;
 }
 .nut-table-summary {
-  color: var(--nutui-gray-7);
-  background-color: var(--nutui-gray-1);
+  color: var(--nutui-color-title, #1a1a1a);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -158,7 +158,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));
+  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,