@nutui/nutui-react-taro 3.0.16 → 3.0.17

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

@@ -5,18 +5,18 @@
 .nut-searchbar {
   display: flex;
   align-items: center;
-  width: 100%;
-  padding: 1px 8px;
-  background: #f7f8fc;
-  color: #1a1a1a;
-  font-size: 14px;
+  width: var(--nutui-searchbar-width, 100%);
+  padding: var(--nutui-searchbar-padding, 1px 8px);
+  background: var(--nutui-searchbar-background, var(--nutui-color-background-sunken, #f7f8fc));
+  color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;
   justify-content: center;
 }
 .nut-searchbar .nut-icon {
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
+  width: var(--nutui-searchbar-icon-size, 20px);
+  height: var(--nutui-searchbar-icon-size, 20px);
+  font-size: var(--nutui-searchbar-icon-size, 20px);
 }
 .nut-searchbar-content {
   position: relative;
@@ -24,28 +24,28 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 12px;
-  height: 38px;
-  background: #ffffff;
-  border-radius: 8px;
-  border: 1px solid #ff0f23;
+  padding: 0 var(--nutui-searchbar-gap, 12px);
+  height: var(--nutui-searchbar-input-height, 38px);
+  background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff));
+  border-radius: var(--nutui-searchbar-content-border-radius, 8px);
+  border: 1px solid var(--nutui-color-primary, #ff0f23);
 }
 .nut-searchbar-icon {
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #ff0f23;
+  color: var(--nutui-color-primary, #ff0f23);
 }
 .nut-searchbar-leftin {
-  margin-right: 8px;
+  margin-right: var(--nutui-searchbar-inner-gap, 8px);
 }
 .nut-searchbar-rightin {
   font-size: 15px;
   font-weight: 500;
-  color: #ff0f23;
+  color: var(--nutui-color-primary, #ff0f23);
 }
 .nut-searchbar-rightin.nut-searchbar-icon {
-  color: rgba(0, 0, 0, 0.2);
+  color: var(--nutui-black-5);
 }
 .nut-searchbar-input-box, .nut-searchbar-input {
   display: flex;
@@ -59,11 +59,11 @@
   width: 100%;
   padding: 0;
   margin: 0;
-  font-size: 14px;
-  color: #1a1a1a;
-  caret-color: #ff0f23;
+  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));
+  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-primary, #ff0f23));
   background: transparent;
-  text-align: left;
+  text-align: var(--nutui-searchbar-input-text-align, left);
 }
 .nut-searchbar-clear.nut-searchbar-icon {
   position: relative;
@@ -71,8 +71,8 @@
 .nut-searchbar-clear.nut-searchbar-icon .nut-icon {
   width: 12px;
   height: 12px;
-  color: rgba(0, 0, 0, 0.2);
-  margin-right: 8px;
+  color: var(--nutui-black-5);
+  margin-right: var(--nutui-searchbar-inner-gap, 8px);
 }
 .nut-searchbar-clear.nut-searchbar-icon::after {
   content: "";
@@ -117,112 +117,63 @@
   height: 20px;
 }
 .nut-searchbar-left {
-  margin-right: 12px;
-}
-.nut-searchbar-left > div {
-  margin-right: 12px;
-}
-.nut-searchbar-left > span {
-  margin-right: 12px;
-}
-.nut-searchbar-left > i {
-  margin-right: 12px;
-}
-.nut-searchbar-left > svg {
-  margin-right: 12px;
+  margin-right: var(--nutui-searchbar-gap, 12px);
 }
+.nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > i, .nut-searchbar-left > svg,
 .nut-searchbar-left .nut-icon {
-  margin-right: 12px;
+  margin-right: var(--nutui-searchbar-gap, 12px);
 }
 .nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
 .nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
-  margin-left: 12px;
-}
-.nut-searchbar-right > div {
-  margin-left: 12px;
-}
-.nut-searchbar-right > span {
-  margin-left: 12px;
-}
-.nut-searchbar-right > i {
-  margin-left: 12px;
-}
-.nut-searchbar-right > svg {
-  margin-left: 12px;
+  margin-left: var(--nutui-searchbar-gap, 12px);
 }
+.nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > i, .nut-searchbar-right > svg,
 .nut-searchbar-right .nut-icon {
-  margin-left: 12px;
+  margin-left: var(--nutui-searchbar-gap, 12px);
 }
 .nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
 .nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
-.nut-searchbar-left > text {
-  margin-right: 12px;
-}
-.nut-searchbar-left > view {
-  margin-right: 12px;
+.nut-searchbar-left > text, .nut-searchbar-left > view {
+  margin-right: var(--nutui-searchbar-gap, 12px);
 }
 .nut-searchbar-left > text:last-child, .nut-searchbar-left > view:last-child {
   margin-right: 0;
 }
-.nut-searchbar-right > text {
-  margin-left: 12px;
-}
-.nut-searchbar-right > view {
-  margin-left: 12px;
+.nut-searchbar-right > text, .nut-searchbar-right > view {
+  margin-left: var(--nutui-searchbar-gap, 12px);
 }
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
 .nut-searchbar-round {
-  border-radius: 19px;
+  border-radius: var(--nutui-searchbar-content-round-border-radius, 19px);
 }
 .nut-searchbar-disabled {
   cursor: not-allowed;
 }
 .nut-searchbar-focus {
-  padding: 5px 12px;
+  padding: 5px var(--nutui-searchbar-gap, 12px);
 }
 .nut-searchbar-focus .nut-searchbar-content {
   border: 0.5px solid #ff5c67;
 }
 
-[dir=rtl] .nut-searchbar-left {
-  margin-right: 0;
-  margin-left: 12px;
-}
-
+[dir=rtl] .nut-searchbar-left,
 .nut-rtl .nut-searchbar-left {
   margin-right: 0;
-  margin-left: 12px;
-}
-[dir=rtl] .nut-searchbar-left > div {
-  margin-right: 0;
-  margin-left: 12px;
-}
-[dir=rtl] .nut-searchbar-left > span {
-  margin-right: 0;
-  margin-left: 12px;
-}
-[dir=rtl] .nut-searchbar-left > svg {
-  margin-right: 0;
-  margin-left: 12px;
-}
-.nut-rtl .nut-searchbar-left > div {
-  margin-right: 0;
-  margin-left: 12px;
-}
-.nut-rtl .nut-searchbar-left > span {
-  margin-right: 0;
-  margin-left: 12px;
+  margin-left: var(--nutui-searchbar-gap, 12px);
 }
+[dir=rtl] .nut-searchbar-left > div, [dir=rtl] .nut-searchbar-left > span, [dir=rtl] .nut-searchbar-left > svg,
+.nut-rtl .nut-searchbar-left > div,
+.nut-rtl .nut-searchbar-left > span,
 .nut-rtl .nut-searchbar-left > svg {
   margin-right: 0;
-  margin-left: 12px;
+  margin-left: var(--nutui-searchbar-gap, 12px);
 }
 [dir=rtl] .nut-searchbar-left > div.nut-icon, [dir=rtl] .nut-searchbar-left > span.nut-icon, [dir=rtl] .nut-searchbar-left > svg.nut-icon,
 .nut-rtl .nut-searchbar-left > div.nut-icon,
@@ -237,37 +188,17 @@
   margin-right: 0;
   margin-left: 0;
 }
-[dir=rtl] .nut-searchbar-right {
-  margin-left: 0;
-  margin-right: 12px;
-}
+[dir=rtl] .nut-searchbar-right,
 .nut-rtl .nut-searchbar-right {
   margin-left: 0;
-  margin-right: 12px;
-}
-[dir=rtl] .nut-searchbar-right > div {
-  margin-left: 0;
-  margin-right: 12px;
-}
-[dir=rtl] .nut-searchbar-right > span {
-  margin-left: 0;
-  margin-right: 12px;
-}
-[dir=rtl] .nut-searchbar-right > svg {
-  margin-left: 0;
-  margin-right: 12px;
-}
-.nut-rtl .nut-searchbar-right > div {
-  margin-left: 0;
-  margin-right: 12px;
-}
-.nut-rtl .nut-searchbar-right > span {
-  margin-left: 0;
-  margin-right: 12px;
+  margin-right: var(--nutui-searchbar-gap, 12px);
 }
+[dir=rtl] .nut-searchbar-right > div, [dir=rtl] .nut-searchbar-right > span, [dir=rtl] .nut-searchbar-right > svg,
+.nut-rtl .nut-searchbar-right > div,
+.nut-rtl .nut-searchbar-right > span,
 .nut-rtl .nut-searchbar-right > svg {
   margin-left: 0;
-  margin-right: 12px;
+  margin-right: var(--nutui-searchbar-gap, 12px);
 }
 [dir=rtl] .nut-searchbar-right > div:first-child, [dir=rtl] .nut-searchbar-right > span:first-child, [dir=rtl] .nut-searchbar-right > svg:first-child,
 .nut-rtl .nut-searchbar-right > div:first-child,
@@ -276,21 +207,11 @@
   margin-left: 0;
   margin-right: 0;
 }
-[dir=rtl] .nut-searchbar-left > text {
-  margin-right: 0;
-  margin-left: 12px;
-}
-[dir=rtl] .nut-searchbar-left > view {
-  margin-right: 0;
-  margin-left: 12px;
-}
-.nut-rtl .nut-searchbar-left > text {
-  margin-right: 0;
-  margin-left: 12px;
-}
+[dir=rtl] .nut-searchbar-left > text, [dir=rtl] .nut-searchbar-left > view,
+.nut-rtl .nut-searchbar-left > text,
 .nut-rtl .nut-searchbar-left > view {
   margin-right: 0;
-  margin-left: 12px;
+  margin-left: var(--nutui-searchbar-gap, 12px);
 }
 [dir=rtl] .nut-searchbar-left > text:last-child, [dir=rtl] .nut-searchbar-left > view:last-child,
 .nut-rtl .nut-searchbar-left > text:last-child,
@@ -298,21 +219,11 @@
   margin-right: 0;
   margin-left: 0;
 }
-[dir=rtl] .nut-searchbar-right > text {
-  margin-left: 0;
-  margin-right: 12px;
-}
-[dir=rtl] .nut-searchbar-right > view {
-  margin-left: 0;
-  margin-right: 12px;
-}
-.nut-rtl .nut-searchbar-right > text {
-  margin-left: 0;
-  margin-right: 12px;
-}
+[dir=rtl] .nut-searchbar-right > text, [dir=rtl] .nut-searchbar-right > view,
+.nut-rtl .nut-searchbar-right > text,
 .nut-rtl .nut-searchbar-right > view {
   margin-left: 0;
-  margin-right: 12px;
+  margin-right: var(--nutui-searchbar-gap, 12px);
 }
 [dir=rtl] .nut-searchbar-right > text:first-child, [dir=rtl] .nut-searchbar-right > view:first-child,
 .nut-rtl .nut-searchbar-right > text:first-child,
@@ -320,9 +231,7 @@
   margin-left: 0;
   margin-right: 0;
 }
-[dir=rtl] .nut-searchbar-input {
-  text-align: right;
-}
+[dir=rtl] .nut-searchbar-input,
 .nut-rtl .nut-searchbar-input {
-  text-align: right;
+  text-align: var(--nutui-searchbar-input-text-align, right);
 }

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

@@ -4,36 +4,36 @@
 /* #endif */
 .nut-segmented {
   display: inline-flex;
-  height: 24px;
+  height: var(--nutui-segmented-height, 24px);
   min-width: 24px;
-  padding: 2px;
+  padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2px));
   align-items: center;
-  border-radius: 4px;
-  background: rgba(0, 0, 0, 0.4);
+  border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4px));
+  background: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4));
   box-sizing: border-box;
 }
 
 .nut-segmented-item {
   display: flex;
-  height: 20px;
+  height: var(--nutui-segmented-height, 20px);
   align-items: center;
   justify-content: center;
-  padding: 0 6px;
-  border-radius: 4px;
-  color: #ffffff;
-  font-size: 12px;
+  padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, 6px));
+  border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, 4px));
+  color: var(--nutui-segmented-item-color, #ffffff);
+  font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, 12px));
   line-height: 1;
   box-sizing: border-box;
 }
 
 .nut-segmented-item-active {
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--nutui-segmented-active-background, var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)));
 }
 
 .nut-segmented-icon {
   height: 10px;
   width: 10px;
-  margin-right: 2px;
+  margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2px));
 }
 .nut-segmented-icon .nut-icon {
   height: 10px;