@nutui/nutui-react-taro 3.0.16 → 3.0.17

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

@@ -8,11 +8,11 @@
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  min-width: 46px;
-  height: 28px;
-  line-height: 28px;
-  background-color: #ff0f23;
-  border-radius: 50px;
+  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-color-primary, #ff0f23));
+  border-radius: var(--nutui-switch-border-radius, 50px);
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center center;
@@ -26,37 +26,37 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  height: calc(28px - 2px * 2);
-  width: calc(28px - 2px * 2);
-  border-radius: 50%;
+  height: calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2);
+  width: calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2);
+  border-radius: var(--nutui-switch-inside-border-radius, 50%);
   background: #ffffff;
   transition: left 0.3s linear;
-  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--nutui-switch-inside-box-shadow, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
 }
 .nut-switch-button-open {
-  left: calc(100% - 28px + 2px);
+  left: calc(100% - var(--nutui-switch-height, 28px) + var(--nutui-switch-border-width, 2px));
 }
 .nut-switch-button-open-rtl {
-  left: 2px;
+  left: var(--nutui-switch-border-width, 2px);
 }
 .nut-switch-button-close {
-  left: 2px;
+  left: var(--nutui-switch-border-width, 2px);
 }
 .nut-switch-button-close-rtl {
-  left: calc(100% - 28px + 2px);
+  left: calc(100% - var(--nutui-switch-height, 28px) + var(--nutui-switch-border-width, 2px));
 }
 .nut-switch-button .nut-icon {
-  width: calc((28px - 2px * 2) / 2);
-  height: calc((28px - 2px * 2) / 2);
-  color: #ffadbe;
+  width: calc((var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2) / 2);
+  height: calc((var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2) / 2);
+  color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-switch-close {
-  background-color: #c2c4cc;
+  background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-switch-close-line {
-  width: calc((28px - 2px * 2) / 2);
+  width: calc((var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2) / 2);
   height: 2px;
-  background: #ffffff;
+  background: var(--nutui-switch-inactive-line-background-color, #ffffff);
   border-radius: 2px;
 }
 .nut-switch-label {
@@ -64,33 +64,33 @@
   align-items: center;
   height: 100%;
   white-space: nowrap;
-  color: #ffffff;
-  font-size: 12px;
+  color: var(--nutui-switch-label-text-color, #ffffff);
+  font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-s, 12px));
 }
 .nut-switch-label .nut-icon {
-  color: #ffffff;
+  color: var(--nutui-switch-label-text-color, #ffffff);
 }
 .nut-switch-label-open {
-  margin: 0 calc(28px - 2px + 3px) 0 7px;
+  margin: 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px) 0 7px;
 }
 .nut-switch-label-open-rtl {
-  margin: 0 7px 0 calc(28px - 2px + 3px);
+  margin: 0 7px 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px);
 }
 .nut-switch-label-close {
-  margin: 0 7px 0 calc(28px - 2px + 3px);
+  margin: 0 7px 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px);
 }
 .nut-switch-label-close-rtl {
-  margin: 0 calc(28px - 2px + 3px) 0 7px;
+  margin: 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px) 0 7px;
 }
 .nut-switch-label-close-disabled {
-  color: #c2c4cc;
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-switch-label-close-disabled .nut-icon {
-  color: #c2c4cc;
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-switch-disabled {
-  background-color: #ffadbe;
+  background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-switch-disabled-close {
-  background-color: #f2f3f5;
+  background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background, #f2f3f5));
 }

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

@@ -2,16 +2,166 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
+.nut-badge {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  box-sizing: content-box;
+  width: auto;
+}
+.nut-badge-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  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);
+}
+.nut-badge-icon .nut-icon {
+  width: var(--nutui-badge-icon-size, 10px);
+  height: var(--nutui-badge-icon-size, 10px);
+  font-size: var(--nutui-badge-icon-size, 10px);
+}
+.nut-badge-sup, .nut-badge-icon {
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup::after, .nut-badge-icon::after {
+  content: "";
+  position: absolute;
+  top: -50%;
+  bottom: -50%;
+  left: -50%;
+  right: -50%;
+  transform: scale(0.5);
+  border: var(--nutui-badge-border, 1px solid #ffffff);
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup {
+  display: inline-flex;
+  text-align: center;
+  min-width: var(--nutui-badge-min-width, 6px);
+  padding: var(--nutui-badge-padding, 1px 4px);
+  box-sizing: border-box;
+  color: var(--nutui-badge-color, #ffffff);
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
+  line-height: 12px;
+  white-space: nowrap;
+  font-weight: normal;
+  vertical-align: middle;
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
+  z-index: 1;
+}
+.nut-badge-disabled {
+  background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
+.nut-badge-number {
+  font-family: "JD";
+}
+.nut-badge-one {
+  height: var(--nutui-badge-height, 14px);
+  width: var(--nutui-badge-height, 14px);
+}
+.nut-badge-content {
+  position: absolute;
+  transform: var(--nutui-badge-content-transform, translate(50%, -50%));
+}
+.nut-badge-dot {
+  padding: 0;
+  border-radius: 50%;
+}
+.nut-badge-dot::after {
+  border: var(--nutui-badge-dot-border, 1px solid #ffffff);
+  border-radius: 50%;
+}
+.nut-badge-dot-normal {
+  min-width: var(--nutui-badge-dot-width, 6px);
+  width: var(--nutui-badge-dot-width, 6px);
+  height: var(--nutui-badge-dot-width, 6px);
+}
+.nut-badge-dot-small {
+  min-width: var(--nutui-badge-dot-small-width, 4px);
+  width: var(--nutui-badge-dot-small-width, 4px);
+  height: var(--nutui-badge-dot-small-width, 4px);
+}
+.nut-badge-dot-large {
+  min-width: var(--nutui-badge-dot-large-width, 8px);
+  width: var(--nutui-badge-dot-large-width, 8px);
+  height: var(--nutui-badge-dot-large-width, 8px);
+}
+.nut-badge-outline {
+  background: #ffffff;
+  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-color-primary, #ff0f23));
+}
+
+.nut-tabbar-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  padding: 6px 0 2px;
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
+  height: 100%;
+}
+.nut-tabbar-item .nut-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+  /* #ifdef harmony dynamic*/
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
+  /* #endif*/
+  /* #ifndef harmony dynamic*/
+  color: inherit;
+  /* #endif*/
+}
+.nut-tabbar-item-text {
+  display: block;
+  color: var(--nutui-color-text, #505259);
+  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
+  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
+  margin-top: var(--nutui-tabbar-text-margin-top, 4px);
+}
+.nut-tabbar-item .nut-image-default {
+  width: 38px;
+  height: 38px;
+  border-radius: 38px;
+}
+.nut-tabbar-item-large {
+  justify-content: center;
+  padding: 0;
+}
+.nut-tabbar-item-large .nut-tabbar-item-text {
+  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
+  margin-top: 0;
+  line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
+  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-color-primary, #ff0f23));
+}
+.nut-tabbar-item-active .nut-tabbar-item-text,
+.nut-tabbar-item-active .nut-icon {
+  /* #ifdef harmony dynamic*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  /* #endif*/
+  /* #ifndef harmony dynamic*/
+  color: inherit;
+  /* #endif*/
+}
+
 .nut-tabbar {
   border: 0px;
-  box-shadow: none;
-  border-bottom: 0;
-  border-top: 0;
+  box-shadow: var(--nutui-tabbar-box-shadow, none);
+  border-bottom: var(--nutui-tabbar-border-bottom, 0);
+  border-top: var(--nutui-tabbar-border-top, 0);
   width: 100%;
-  background: #ffffff;
+  background: var(--nutui-color-background-overlay, #ffffff);
 }
 .nut-tabbar-wrap {
-  height: 46px;
+  height: var(--nutui-tabbar-height, 46px);
   display: flex;
 }
 .nut-tabbar-wrap-3 {

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

@@ -2,13 +2,108 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
+.nut-badge {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  box-sizing: content-box;
+  width: auto;
+}
+.nut-badge-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  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);
+}
+.nut-badge-icon .nut-icon {
+  width: var(--nutui-badge-icon-size, 10px);
+  height: var(--nutui-badge-icon-size, 10px);
+  font-size: var(--nutui-badge-icon-size, 10px);
+}
+.nut-badge-sup, .nut-badge-icon {
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup::after, .nut-badge-icon::after {
+  content: "";
+  position: absolute;
+  top: -50%;
+  bottom: -50%;
+  left: -50%;
+  right: -50%;
+  transform: scale(0.5);
+  border: var(--nutui-badge-border, 1px solid #ffffff);
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup {
+  display: inline-flex;
+  text-align: center;
+  min-width: var(--nutui-badge-min-width, 6px);
+  padding: var(--nutui-badge-padding, 1px 4px);
+  box-sizing: border-box;
+  color: var(--nutui-badge-color, #ffffff);
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
+  line-height: 12px;
+  white-space: nowrap;
+  font-weight: normal;
+  vertical-align: middle;
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
+  z-index: 1;
+}
+.nut-badge-disabled {
+  background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
+.nut-badge-number {
+  font-family: "JD";
+}
+.nut-badge-one {
+  height: var(--nutui-badge-height, 14px);
+  width: var(--nutui-badge-height, 14px);
+}
+.nut-badge-content {
+  position: absolute;
+  transform: var(--nutui-badge-content-transform, translate(50%, -50%));
+}
+.nut-badge-dot {
+  padding: 0;
+  border-radius: 50%;
+}
+.nut-badge-dot::after {
+  border: var(--nutui-badge-dot-border, 1px solid #ffffff);
+  border-radius: 50%;
+}
+.nut-badge-dot-normal {
+  min-width: var(--nutui-badge-dot-width, 6px);
+  width: var(--nutui-badge-dot-width, 6px);
+  height: var(--nutui-badge-dot-width, 6px);
+}
+.nut-badge-dot-small {
+  min-width: var(--nutui-badge-dot-small-width, 4px);
+  width: var(--nutui-badge-dot-small-width, 4px);
+  height: var(--nutui-badge-dot-small-width, 4px);
+}
+.nut-badge-dot-large {
+  min-width: var(--nutui-badge-dot-large-width, 8px);
+  width: var(--nutui-badge-dot-large-width, 8px);
+  height: var(--nutui-badge-dot-large-width, 8px);
+}
+.nut-badge-outline {
+  background: #ffffff;
+  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-color-primary, #ff0f23));
+}
+
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   flex: 1;
   padding: 6px 0 2px;
-  color: #1a1a1a;
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   height: 100%;
 }
 .nut-tabbar-item .nut-icon {
@@ -16,7 +111,7 @@
   height: 24px;
   font-size: 24px;
   /* #ifdef harmony dynamic*/
-  color: #1a1a1a;
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   /* #endif*/
   /* #ifndef harmony dynamic*/
   color: inherit;
@@ -24,10 +119,10 @@
 }
 .nut-tabbar-item-text {
   display: block;
-  color: #505259;
-  font-size: 10px;
-  line-height: 10px;
-  margin-top: 4px;
+  color: var(--nutui-color-text, #505259);
+  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
+  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
+  margin-top: var(--nutui-tabbar-text-margin-top, 4px);
 }
 .nut-tabbar-item .nut-image-default {
   width: 38px;
@@ -39,25 +134,18 @@
   padding: 0;
 }
 .nut-tabbar-item-large .nut-tabbar-item-text {
-  font-size: 16px;
+  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
   margin-top: 0;
-  line-height: 16px;
-  font-weight: 400;
+  line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
+  font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400));
 }
 .nut-tabbar-item-active {
-  color: #ff0f23;
-}
-.nut-tabbar-item-active .nut-tabbar-item-text {
-  /* #ifdef harmony dynamic*/
-  color: #ff0f23;
-  /* #endif*/
-  /* #ifndef harmony dynamic*/
-  color: inherit;
-  /* #endif*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
+.nut-tabbar-item-active .nut-tabbar-item-text,
 .nut-tabbar-item-active .nut-icon {
   /* #ifdef harmony dynamic*/
-  color: #ff0f23;
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
   /* #endif*/
   /* #ifndef harmony dynamic*/
   color: inherit;

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

@@ -12,12 +12,12 @@
   display: flex;
   width: 100%;
   flex-direction: column;
-  font-size: 14px;
-  color: #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 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;
@@ -25,21 +25,21 @@
 .nut-table-main {
   display: table;
   overflow-x: auto;
-  color: #1a1a1a;
-  background-color: #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: #f2f3f5;
+  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: #ffffff;
+  background-color: var(--nutui-table-tr-odd-bg-color, #ffffff);
 }
 .nut-table-main-striped .nut-table-main-body-tr:nth-child(even) {
-  background-color: #f2f3f5;
+  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f2f3f5));
 }
 .nut-table-main-head, .nut-table-main-body {
   background: inherit;
@@ -51,17 +51,9 @@
 .nut-table-main-head-tr:last-child .nut-table-main-body-tr-td, .nut-table-main-body-tr:last-child .nut-table-main-body-tr-td {
   border-bottom: none;
 }
-.nut-table-main-head-tr-th {
+.nut-table-main-head-tr-th, .nut-table-main-body-tr-th {
   display: table-cell;
-  padding: 10px;
-  table-layout: fixed;
-  background: inherit;
-  position: sticky;
-  top: 0;
-}
-.nut-table-main-body-tr-th {
-  display: table-cell;
-  padding: 10px;
+  padding: var(--nutui-table-cols-padding, 10px);
   table-layout: fixed;
   background: inherit;
   position: sticky;
@@ -73,15 +65,9 @@
 .nut-table-main-head-tr-th:last-child, .nut-table-main-body-tr-th:last-child {
   border-right: none;
 }
-.nut-table-main-head-tr-td {
+.nut-table-main-head-tr-td, .nut-table-main-body-tr-td {
   display: table-cell;
-  padding: 10px;
-  table-layout: fixed;
-  background: inherit;
-}
-.nut-table-main-body-tr-td {
-  display: table-cell;
-  padding: 10px;
+  padding: var(--nutui-table-cols-padding, 10px);
   table-layout: fixed;
   background: inherit;
 }
@@ -94,13 +80,9 @@
   align-items: center;
   justify-content: center;
 }
-.nut-table-main-head-tr-border {
-  border-right: 1px solid rgba(0, 0, 0, 0.06);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-}
-.nut-table-main-body-tr-border {
-  border-right: 1px solid rgba(0, 0, 0, 0.06);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+.nut-table-main-head-tr-border, .nut-table-main-body-tr-border {
+  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;
@@ -132,33 +114,30 @@
 }
 .nut-table-sticky-left {
   left: 1px;
-  box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: var(--nutui-table-sticky-left-shadow, 4px 0 8px 0 rgba(0, 0, 0, 0.1));
 }
 .nut-table-sticky-right {
   right: 1px;
-  box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: var(--nutui-table-sticky-right-shadow, -4px 0 8px 0 rgba(0, 0, 0, 0.1));
 }
 .nut-table-fixed-left, .nut-table-fixed-right {
   position: sticky;
   z-index: 2;
 }
-.nut-table-fixed-left.h5-div {
-  padding: 10px 0;
-}
-.nut-table-fixed-right.h5-div {
-  padding: 10px 0;
+.nut-table-fixed-left.h5-div, .nut-table-fixed-right.h5-div {
+  padding: var(--nutui-table-cols-padding, 10px) 0;
 }
 .nut-table-fixed-left-last {
   border-right: none;
 }
 .nut-table-summary {
-  color: #1a1a1a;
-  background-color: #ffffff;
+  color: var(--nutui-color-title, #1a1a1a);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
   display: flex;
   align-items: center;
   justify-content: center;
   height: 30px;
-  padding: 10px;
+  padding: var(--nutui-table-cols-padding, 10px);
   position: relative;
   z-index: 5;
 }
@@ -175,21 +154,11 @@
   border-right: none;
   border-left: none;
 }
-[dir=rtl] .nut-table-main-head-tr-border {
-  border-right: none;
-  border-left: 1px solid rgba(0, 0, 0, 0.06);
-}
-[dir=rtl] .nut-table-main-body-tr-border {
-  border-right: none;
-  border-left: 1px solid rgba(0, 0, 0, 0.06);
-}
-.nut-rtl .nut-table-main-head-tr-border {
-  border-right: none;
-  border-left: 1px solid rgba(0, 0, 0, 0.06);
-}
+[dir=rtl] .nut-table-main-head-tr-border, [dir=rtl] .nut-table-main-body-tr-border,
+.nut-rtl .nut-table-main-head-tr-border,
 .nut-rtl .nut-table-main-body-tr-border {
   border-right: none;
-  border-left: 1px solid 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,
@@ -203,25 +172,17 @@
 .nut-rtl .nut-table-main-body-tr-alignright {
   text-align: left;
 }
-[dir=rtl] .nut-table-sticky-left {
-  left: auto;
-  right: 1px;
-  box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.1);
-}
+[dir=rtl] .nut-table-sticky-left,
 .nut-rtl .nut-table-sticky-left {
   left: auto;
   right: 1px;
-  box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.1);
-}
-[dir=rtl] .nut-table-sticky-right {
-  right: auto;
-  left: 1px;
-  box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: var(--nutui-table-sticky-right-shadow, -4px 0 8px 0 rgba(0, 0, 0, 0.1));
 }
+[dir=rtl] .nut-table-sticky-right,
 .nut-rtl .nut-table-sticky-right {
   right: auto;
   left: 1px;
-  box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: var(--nutui-table-sticky-left-shadow, 4px 0 8px 0 rgba(0, 0, 0, 0.1));
 }
 [dir=rtl] .nut-table-fixed-left-last,
 .nut-rtl .nut-table-fixed-left-last {

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

@@ -6,9 +6,9 @@
   width: 100%;
   flex-shrink: 0;
   display: block;
-  background-color: #fff;
-  color: #1a1a1a;
-  padding: 24px 20px;
+  background-color: var(--nutui-tabs-tabpane-background-color, #fff);
+  color: var(--nutui-color-title, #1a1a1a);
+  padding: var(--nutui-tabs-tabpane-padding, 24px 20px);
   box-sizing: border-box;
   overflow: auto;
 }