@nutui/nutui-react-taro 3.0.16 → 3.0.17

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

@@ -2,6 +2,21 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
+.nut-tabpane {
+  width: 100%;
+  flex-shrink: 0;
+  display: block;
+  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;
+}
+.nut-tabpane.inactive {
+  overflow: visible;
+  height: 0;
+}
+
 .nut-tabs {
   display: flex;
 }
@@ -13,11 +28,11 @@
 .nut-tabs-titles {
   display: flex;
   box-sizing: border-box;
-  height: 44px;
+  height: var(--nutui-tabs-titles-height, 44px);
   user-select: none;
   overflow-x: auto;
   overflow-y: hidden;
-  background: #f2f3f5;
+  background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f2f3f5));
   scrollbar-width: none;
 }
 .nut-tabs-titles::-webkit-scrollbar {
@@ -48,25 +63,25 @@
   align-items: center;
   justify-content: center;
   flex: 1 0 auto;
-  padding: 0 12px;
-  height: 44px;
-  line-height: 44px;
-  min-width: 50px;
-  font-size: 14px;
-  color: #1a1a1a;
+  padding: 0 var(--nutui-tabs-titles-gap, 12px);
+  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-base, 14px));
+  color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a));
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .nut-tabs-titles-item .nut-icon {
-  color: #1a1a1a;
+  color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-tabs-titles-item-left, .nut-tabs-titles-item-right {
   flex: none;
 }
 .nut-tabs-titles-item-text {
-  color: #1a1a1a;
+  color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a));
 }
-.nut-tabs-titles-item-smile {
+.nut-tabs-titles-item-smile, .nut-tabs-titles-item-line {
   position: absolute;
   transition: width 0.3s ease;
   width: 0;
@@ -74,26 +89,13 @@
   content: " ";
   left: 50%;
   transform: translate(-50%, 0);
-  bottom: 15%;
-  border-radius: 2px;
-  opacity: 1;
-  overflow: hidden;
-}
-.nut-tabs-titles-item-line {
-  position: absolute;
-  transition: width 0.3s ease;
-  width: 0;
-  height: 0;
-  content: " ";
-  left: 50%;
-  transform: translate(-50%, 0);
-  bottom: 15%;
-  border-radius: 2px;
-  opacity: 1;
+  bottom: var(--nutui-tabs-line-bottom, 15%);
+  border-radius: var(--nutui-tabs-line-border-radius, 2px);
+  opacity: var(--nutui-tabs-tab-line-opacity, 1);
   overflow: hidden;
 }
 .nut-tabs-titles-item-smile {
-  bottom: -10%;
+  bottom: var(--nutui-tabs-titles-item-smile-bottom, -10%);
 }
 .nut-tabs-titles-item-smile .nut-icon {
   position: absolute;
@@ -102,18 +104,18 @@
   height: 100%;
 }
 .nut-tabs-titles-item-active .nut-icon {
-  color: #ff0f23;
+  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-titles-item-active .nut-tabs-titles-item-text {
-  color: #ff0f23;
-  font-weight: 600;
+  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, 600));
 }
 .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
   overflow: unset;
   content: " ";
-  width: 12px;
-  height: 2px;
-  background: #ff0f23;
+  width: var(--nutui-tabs-tab-line-width, 12px);
+  height: var(--nutui-tabs-tab-line-height, 2px);
+  background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-titles-item-active .nut-tabs-titles-item-smile {
   overflow: unset;
@@ -121,29 +123,26 @@
   height: 20px;
 }
 .nut-tabs-titles-item-active .nut-tabs-titles-item-smile .nut-icon {
-  color: #ff0f23;
+  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-titles-item-disabled {
-  color: #c2c4cc;
+  color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-tabs-titles-item-disabled .nut-icon {
-  color: #c2c4cc;
+  color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-tabs-titles-item-disabled .nut-tabs-titles-item-text {
-  color: #c2c4cc;
-}
-.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-tabs-titles-item-text {
-  color: #1a1a1a;
-  font-size: 16px;
+  color: var(--nutui-color-text-disabled, #c2c4cc);
 }
+.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-tabs-titles-item-text,
 .nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-icon {
-  color: #1a1a1a;
-  font-size: 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 .nut-tabs-titles-item-active {
-  font-weight: 600;
+  font-weight: var(--nutui-font-weight-bold, 600);
   background-color: #ffffff;
-  border-radius: 8px 8px 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;
@@ -157,15 +156,15 @@
   padding: 0 8px;
 }
 .nut-tabs-titles-button .nut-tabs-titles-item-active .nut-tabs-titles-item-text {
-  background: undefined;
-  color: #ff0f23;
-  border-radius: 50px;
-  font-weight: 600;
-  background-color: #ffebf1;
-  border: 1px solid #ff0f23;
+  background: var(--nutui-color-default-light);
+  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
+  border-radius: var(--nutui-tabs-button-border-radius, 50px);
+  font-weight: var(--nutui-font-weight-bold, 600);
+  background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  border: var(--nutui-tabs-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-titles-divider {
-  border-bottom: 1px solid 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 {
   position: relative;
@@ -177,7 +176,7 @@
   top: 50%;
   height: 50%;
   width: 1px;
-  background: 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 {
@@ -193,19 +192,19 @@
   padding-left: 6px;
   /* #endif */
   width: 90px;
-  line-height: 14px;
+  line-height: var(--nutui-font-size-base, 14px);
 }
 .nut-tabs-vertical .nut-tabs-titles {
   flex-direction: column;
   height: 100%;
-  width: 100px;
+  width: var(--nutui-tabs-vertical-titles-width, 100px);
   flex-shrink: 0;
 }
 .nut-tabs-vertical .nut-tabs-titles .nut-tabs-list {
   flex-direction: column;
 }
 .nut-tabs-vertical .nut-tabs-titles-item {
-  height: 40px;
+  height: var(--nutui-tabs-vertical-titles-item-height, 40px);
   flex: none;
 }
 .nut-tabs-vertical .nut-tabs-titles-item-smile {
@@ -220,13 +219,13 @@
   top: 50%;
 }
 .nut-tabs-vertical .nut-tabs-titles-item-active {
-  background-color: #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: 3px;
-  height: 12px;
-  background: linear-gradient(180deg, #ff475d 0%, #ffebf1 100%);
+  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-pressed, #ffebf1) 100%));
 }
 .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile {
   right: -12px;
@@ -236,7 +235,7 @@
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles {
   flex-direction: row;
-  height: 44px;
+  height: var(--nutui-tabs-titles-height, 44px);
   width: 100%;
   padding: 0 !important;
 }
@@ -253,9 +252,9 @@
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
   left: 50%;
   transform: translate(-50%, 0);
-  width: 12px;
-  height: 2px;
-  background: #ff0f23;
+  width: var(--nutui-tabs-tab-line-width, 12px);
+  height: var(--nutui-tabs-tab-line-height, 2px);
+  background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile {
   left: 50%;

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

@@ -3,52 +3,52 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-tag {
-  padding: 0px 2px;
+  padding: var(--nutui-tag-padding, 0px 2px);
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  font-size: 10px;
-  border-radius: 2px;
-  height: 14px;
-  color: #ffffff;
-  border: 1px solid transparent;
+  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);
+  border: var(--nutui-tag-border-width, 1px) solid transparent;
 }
 .nut-tag .nut-icon {
   vertical-align: middle;
   margin-left: 4px;
-  color: #ffffff;
+  color: var(--nutui-tag-color, #ffffff);
 }
 .nut-tag-text {
-  font-size: 10px;
-  color: #ffffff;
+  font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));
+  color: var(--nutui-tag-color, #ffffff);
 }
 .nut-tag-text-plain {
-  color: #1a1a1a;
+  color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-tag-default {
-  background: #1a1a1a;
+  background: var(--nutui-tag-background-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-tag-primary {
   background: #fa2c19;
 }
 .nut-tag-info {
-  background: #0073ff;
+  background: var(--nutui-tag-info-background-color, var(--nutui-color-info, #0073ff));
 }
 .nut-tag-success {
-  background: #4fc08d;
+  background: var(--nutui-tag-success-background-color, #4fc08d);
 }
 .nut-tag-danger {
-  background: #ff0f23;
+  background: var(--nutui-tag-danger-background-color, var(--nutui-color-danger, #ff0f23));
 }
 .nut-tag-warning {
-  background: #ffbf00;
+  background: var(--nutui-tag-warning-background-color, var(--nutui-color-warning, #ffbf00));
 }
 .nut-tag-round {
-  border-radius: 8px;
+  border-radius: var(--nutui-tag-round-border-radius, 8px);
 }
 .nut-tag-mark {
-  border-radius: 0 8px 8px 0;
+  border-radius: var(--nutui-tag-mark-border-radius, 0 8px 8px 0);
 }
 .nut-tag-close {
   cursor: pointer;
@@ -57,13 +57,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 10px;
-  color: #ffffff;
+  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: 1px solid #1a1a1a;
+  border: var(--nutui-tag-border-width, 1px) solid var(--nutui-color-title, #1a1a1a);
 }
 
 [dir=rtl] .nut-tag .nut-icon,

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

@@ -8,27 +8,27 @@
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  font-size: 14px;
-  border-radius: 6px;
+  font-size: var(--nutui-font-size-base, 14px);
+  border-radius: var(--nutui-radius-s, 6px);
 }
 .nut-textarea-container {
-  padding: 12px;
-  background-color: #ffffff;
+  padding: var(--nutui-textarea-padding, 12px);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
 }
 .nut-textarea-error {
-  border: 0.5px solid #ff0f23;
-  background-color: #ffebef;
+  border: 0.5px solid var(--nutui-color-danger, #ff0f23);
+  background-color: var(--nutui-color-danger-light, #ffebef);
 }
 .nut-textarea-limit {
   text-align: right;
-  font-size: 14px;
-  line-height: 14px;
-  margin-top: 8px;
-  color: #888b94;
+  font-size: var(--nutui-font-size-base, 14px);
+  line-height: var(--nutui-font-size-base, 14px);
+  margin-top: var(--nutui-spacing-base, 8px);
+  color: var(--nutui-color-text-help, #888b94);
 }
 .nut-textarea-limit-disabled {
   cursor: not-allowed;
-  color: #c2c4cc;
+  color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-textarea-textarea {
   outline: none;
@@ -39,34 +39,34 @@
   min-width: 0;
   margin: 0;
   padding: 0;
-  font-size: 14px;
-  color: #1a1a1a;
-  caret-color: #ff0f23;
+  font-size: var(--nutui-font-size-base, 14px);
+  color: var(--nutui-textarea-text-color, var(--nutui-color-title, #1a1a1a));
+  caret-color: var(--nutui-textarea-text-curror-color, var(--nutui-color-primary, #ff0f23));
   text-align: left;
   background-color: transparent;
   border: 0;
   resize: none;
 }
 .nut-textarea-textarea .taro-textarea {
-  color: #1a1a1a;
+  color: var(--nutui-textarea-text-color, var(--nutui-color-title, #1a1a1a));
   background-color: transparent;
   resize: none;
 }
 .nut-textarea-textarea::placeholder {
-  color: #888b94;
+  color: var(--nutui-color-text-help, #888b94);
 }
 .nut-textarea-textarea-disabled {
   cursor: not-allowed;
-  color: #c2c4cc;
+  color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-textarea-textarea-disabled::placeholder {
-  color: #c2c4cc;
+  color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-textarea-textarea-disabled .taro-textarea {
-  color: #c2c4cc;
+  color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-textarea-textarea-disabled .taro-textarea::placeholder {
-  color: #c2c4cc;
+  color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-textarea.nut-textarea-rtl-limit {
   right: auto;

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

@@ -11,21 +11,21 @@
   padding: 0 0 50px 12px;
 }
 .nut-timedetail-item {
-  width: 100px;
-  height: 50px;
-  line-height: 50px;
+  width: var(--nutui-timeselect-time-width, 100px);
+  height: var(--nutui-timeselect-time-height, 50px);
+  line-height: var(--nutui-timeselect-time-height, 50px);
   text-align: center;
-  margin: 0 10px 10px 0;
-  background: #f2f3f5;
+  margin: var(--nutui-timeselect-time-margin, 0 10px 10px 0);
+  background: var(--nutui-timeselect-time-background, var(--nutui-color-background, #f2f3f5));
   border-radius: 5px;
-  font-size: 14px;
+  font-size: var(--nutui-font-size-base, 14px);
   border: 1px solid transparent;
 }
 .nut-timedetail-item.active {
-  background-color: #ffebf1;
-  border: 1px solid #ff0f23;
-  color: #ff0f23;
-  font-weight: 600;
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  border: 1px solid var(--nutui-color-primary, #ff0f23);
+  color: var(--nutui-color-primary, #ff0f23);
+  font-weight: var(--nutui-font-weight-bold, 600);
 }
 
 [dir=rtl] .nut-timedetail,