@nutui/nutui-react-taro 3.0.16 → 3.0.17

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

@@ -2,6 +2,54 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
+.nut-radiogroup .nut-radio {
+  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
+}
+.nut-radiogroup .nut-radio-label {
+  margin: var(--nutui-radiogroup-radio-label-margin, 0 5px);
+}
+.nut-radiogroup .nut-radio-button {
+  background-color: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
+}
+.nut-radiogroup .nut-radio:last-child {
+  margin: 0;
+}
+.nut-radiogroup-vertical .nut-radio.nut-radio-reverse {
+  width: 100%;
+  justify-content: space-between;
+}
+.nut-radiogroup-vertical .nut-radio-button {
+  border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
+}
+.nut-radiogroup-vertical .nut-radio-button-active {
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+}
+.nut-radiogroup-horizontal {
+  display: flex;
+}
+.nut-radiogroup-horizontal .nut-radio-button {
+  border: 1px solid #ffffff;
+}
+.nut-radiogroup-horizontal .nut-radio-button-active {
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+}
+.nut-radiogroup-horizontal .nut-radio:last-child {
+  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
+}
+.nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
+  background: var(--nutui-color-text-disabled, #c2c4cc);
+  color: #ffffff;
+  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+}
+
+[dir=rtl] .nut-radiogroup .nut-radio,
+.nut-rtl .nut-radiogroup .nut-radio {
+  margin-left: var(--nutui-radiogroup-radio-margin, 20px);
+  margin-right: 0;
+}
+
 .nut-radio {
   display: flex;
   align-items: center;
@@ -11,60 +59,60 @@
   flex-direction: row-reverse;
 }
 .nut-radio.nut-radio-reverse .nut-radio-label {
-  margin-right: 4px;
+  margin-right: var(--nutui-radio-label-margin-left, 4px);
   margin-left: 0;
 }
 .nut-radio-label {
-  margin-left: 4px;
-  font-size: 12px;
-  color: #1a1a1a;
+  margin-left: var(--nutui-radio-label-margin-left, 4px);
+  font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12px));
+  color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-radio-label-disabled {
-  color: #c2c4cc;
+  color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-radio-icon {
-  color: #c2c4cc;
+  color: var(--nutui-color-text-disabled, #c2c4cc);
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
-  font-size: 16px;
+  font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-radio-icon-checked {
-  color: #ff0f23;
+  color: var(--nutui-color-primary, #ff0f23);
   box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
   border-radius: 50%;
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
-  color: #ffadbe;
+  color: var(--nutui-color-primary-disabled-special, #ffadbe);
   box-shadow: none;
 }
 .nut-radio-icon-disabled {
-  color: #c2c4cc;
+  color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-radio-button {
   display: inline-flex;
   align-items: center;
   min-height: 30px;
-  padding: 5px 18px;
-  font-size: 12px;
-  background: rgba(250, 44, 25, 0.05);
-  border-radius: 15px;
-  color: #1a1a1a;
+  padding: var(--nutui-radio-button-padding, 5px 18px);
+  font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, 12px));
+  background: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
+  border-radius: var(--nutui-radio-button-border-radius, 15px);
+  color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
   box-sizing: border-box;
-  border: 1px solid rgba(250, 44, 25, 0.05);
+  border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio-button-active {
-  background: #ffebf1;
-  color: #ff0f23;
-  border: 1px solid #ff0f23;
+  background: var(--nutui-color-primary-light-pressed, #ffebf1);
+  color: var(--nutui-color-primary, #ff0f23);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-radio-button-disabled {
-  color: #c2c4cc;
-  border: 1px solid rgba(250, 44, 25, 0.05);
+  color: var(--nutui-color-text-disabled, #c2c4cc);
+  border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio .nut-radio-button-active.nut-radio-button-disabled {
-  background: #c2c4cc;
+  background: var(--nutui-color-text-disabled, #c2c4cc);
   color: #ffffff;
-  border: 1px solid #c2c4cc;
+  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 
 [dir=rtl] .nut-radio:last-child,
@@ -72,19 +120,13 @@
   margin-right: 0 !important;
   margin-left: 0 !important;
 }
-[dir=rtl] .nut-radio.nut-radio-reverse .nut-radio-label {
-  margin-left: 4px;
-  margin-right: 0;
-}
+[dir=rtl] .nut-radio.nut-radio-reverse .nut-radio-label,
 .nut-rtl .nut-radio.nut-radio-reverse .nut-radio-label {
-  margin-left: 4px;
+  margin-left: var(--nutui-radio-label-margin-left, 4px);
   margin-right: 0;
 }
-[dir=rtl] .nut-radio-label {
-  margin-left: 0;
-  margin-right: 4px;
-}
+[dir=rtl] .nut-radio-label,
 .nut-rtl .nut-radio-label {
   margin-left: 0;
-  margin-right: 4px;
+  margin-right: var(--nutui-radio-label-margin-left, 4px);
 }

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

@@ -3,13 +3,13 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-radiogroup .nut-radio {
-  margin: 0 20px 5px 0;
+  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
 }
 .nut-radiogroup .nut-radio-label {
-  margin: 0 5px;
+  margin: var(--nutui-radiogroup-radio-label-margin, 0 5px);
 }
 .nut-radiogroup .nut-radio-button {
-  background-color: rgba(250, 44, 25, 0.05);
+  background-color: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radiogroup .nut-radio:last-child {
   margin: 0;
@@ -19,11 +19,11 @@
   justify-content: space-between;
 }
 .nut-radiogroup-vertical .nut-radio-button {
-  border: 1px solid rgba(250, 44, 25, 0.05);
+  border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
-  border: 1px solid #ff0f23;
-  background-color: #ffebf1;
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
 }
 .nut-radiogroup-horizontal {
   display: flex;
@@ -32,24 +32,20 @@
   border: 1px solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
-  border: 1px solid #ff0f23;
-  background-color: #ffebf1;
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
 }
 .nut-radiogroup-horizontal .nut-radio:last-child {
-  margin: 0 20px 5px 0;
+  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: #c2c4cc;
+  background: var(--nutui-color-text-disabled, #c2c4cc);
   color: #ffffff;
-  border: 1px solid #c2c4cc;
-}
-
-[dir=rtl] .nut-radiogroup .nut-radio {
-  margin-left: 20px;
-  margin-right: 0;
+  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 
+[dir=rtl] .nut-radiogroup .nut-radio,
 .nut-rtl .nut-radiogroup .nut-radio {
-  margin-left: 20px;
+  margin-left: var(--nutui-radiogroup-radio-margin, 20px);
   margin-right: 0;
 }

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

@@ -7,7 +7,7 @@
   flex-direction: row;
   position: relative;
   width: 100%;
-  height: 4px;
+  height: var(--nutui-range-height, 4px);
   align-items: center;
   justify-content: space-between;
 }
@@ -18,9 +18,9 @@
 .nut-range {
   display: block;
   position: relative;
-  height: 4px;
-  margin: 0 15px;
-  background-color: #ffebf1;
+  height: var(--nutui-range-height, 4px);
+  margin: 0 var(--nutui-range-margin, 15px);
+  background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
   border-radius: 2px;
   flex: 1;
   cursor: pointer;
@@ -31,14 +31,9 @@
   inset-inline: 0;
   content: "";
 }
-.nut-range-min {
-  font-size: 12px;
-  color: #1a1a1a;
-  user-select: none;
-}
-.nut-range-max {
-  font-size: 12px;
-  color: #1a1a1a;
+.nut-range-min, .nut-range-max {
+  font-size: var(--nutui-font-size-s, 12px);
+  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
   user-select: none;
 }
 .nut-range-bar {
@@ -48,7 +43,7 @@
   height: 100%;
   max-width: 100%;
   max-height: 100%;
-  background: #ff0f23;
+  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
   border-radius: 2px;
 }
 .nut-range-bar-animate {
@@ -57,28 +52,20 @@
 .nut-range-button {
   position: absolute;
   display: flex;
-  width: 24px;
-  height: 24px;
-  background: #ffffff;
+  width: var(--nutui-range-button-width, 24px);
+  height: var(--nutui-range-button-height, 24px);
+  background: var(--nutui-range-button-background, #ffffff);
   border-radius: 50%;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-  border: 1px solid #ff0f23;
+  border: var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #ff0f23));
   outline: none;
   align-items: center;
   top: 50%;
   left: 50%;
 }
-.nut-range-button-wrapper {
-  width: 24px;
-  height: 24px;
-}
-.nut-range-button-wrapper-right {
-  width: 24px;
-  height: 24px;
-}
-.nut-range-button-wrapper-left {
-  width: 24px;
-  height: 24px;
+.nut-range-button-wrapper, .nut-range-button-wrapper-right, .nut-range-button-wrapper-left {
+  width: var(--nutui-range-button-width, 24px);
+  height: var(--nutui-range-button-height, 24px);
 }
 .nut-range-button-wrapper, .nut-range-button-wrapper-right {
   touch-action: none;
@@ -107,8 +94,8 @@
   align-items: center;
   justify-content: center;
   user-select: none;
-  font-size: 12px;
-  color: #1a1a1a;
+  font-size: var(--nutui-font-size-s, 12px);
+  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
   text-align: center;
   vertical-align: center;
   box-sizing: border-box;
@@ -152,10 +139,10 @@
   height: 11px;
   left: 0px;
   border-radius: 6px;
-  background: #ffebf1;
+  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-tick-active {
-  background: #ff0f23;
+  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-range-vertical-container {
@@ -165,8 +152,8 @@
 }
 
 .nut-range-vertical {
-  width: 4px;
-  margin: 15px 0px;
+  width: var(--nutui-range-height, 4px);
+  margin: var(--nutui-range-margin, 15px) 0px;
 }
 .nut-range-vertical-button-wrapper, .nut-range-vertical-button-wrapper-right {
   position: absolute;
@@ -218,10 +205,10 @@
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background: #ffebf1;
+  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-vertical-tick-active {
-  background: #ff0f23;
+  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
 }
 
 [dir=rtl] .nut-range-button-wrapper, [dir=rtl] .nut-range-button-wrapper-right,

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

@@ -30,25 +30,25 @@
   flex-shrink: 0;
 }
 .nut-rate-item-normal {
-  margin-left: 4px;
+  margin-left: var(--nutui-rate-item-margin, 4px);
 }
 .nut-rate-item-normal .nut-icon {
-  height: 12px;
-  width: 12px;
+  height: var(--nutui-rate-icon-size, 12px);
+  width: var(--nutui-rate-icon-size, 12px);
 }
 .nut-rate-item-large {
-  margin-left: calc(4px * 2);
+  margin-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
 }
 .nut-rate-item-large .nut-icon {
-  height: calc(12px + 8px);
-  width: calc(12px + 8px);
+  height: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+  width: calc(var(--nutui-rate-icon-size, 12px) + 8px);
 }
 .nut-rate-item-small {
-  margin-left: calc(4px / 2);
+  margin-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
 }
 .nut-rate-item-small .nut-icon {
-  height: calc(12px - 4px);
-  width: calc(12px - 4px);
+  height: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+  width: calc(var(--nutui-rate-icon-size, 12px) - 4px);
 }
 .nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
   margin-left: 0;
@@ -59,10 +59,10 @@
   cursor: pointer;
 }
 .nut-rate-item-icon .nut-icon {
-  color: #ff3333;
+  color: var(--nutui-rate-icon-color, var(--nutui-color-primary-icon, #ff3333));
 }
 .nut-rate-item-icon-disabled .nut-icon {
-  color: #dadce0;
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
 }
 .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {
   position: absolute;
@@ -79,24 +79,24 @@
 .nut-rate-score {
   display: inline-flex;
   align-items: center;
-  color: #ff3333;
+  color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
   font-family: "JD";
   line-height: 1;
 }
 .nut-rate-score-normal {
-  padding-left: 4px;
-  font-size: 12px;
+  padding-left: var(--nutui-rate-item-margin, 4px);
+  font-size: var(--nutui-rate-font-size, 12px);
 }
 .nut-rate-score-large {
-  font-size: calc(12px + 6px);
-  padding-left: calc(4px * 2);
+  font-size: calc(var(--nutui-rate-font-size, 12px) + 6px);
+  padding-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
 }
 .nut-rate-score-small {
-  font-size: calc(12px - 2px);
-  padding-left: calc(4px / 2);
+  font-size: calc(var(--nutui-rate-font-size, 12px) - 2px);
+  padding-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
 }
 .nut-rate-score-disabled {
-  color: #dadce0;
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
 }
 
 [dir=rtl] .nut-rate-item,
@@ -107,23 +107,17 @@
 .nut-rtl .nut-rate-item:first-child {
   margin-right: 0;
 }
-[dir=rtl] .nut-rate-item-normal {
-  margin-right: 4px;
-}
+[dir=rtl] .nut-rate-item-normal,
 .nut-rtl .nut-rate-item-normal {
-  margin-right: 4px;
-}
-[dir=rtl] .nut-rate-item-large {
-  margin-right: calc(4px * 2);
+  margin-right: var(--nutui-rate-item-margin, 4px);
 }
+[dir=rtl] .nut-rate-item-large,
 .nut-rtl .nut-rate-item-large {
-  margin-right: calc(4px * 2);
-}
-[dir=rtl] .nut-rate-item-small {
-  margin-right: calc(4px - 2px);
+  margin-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
 }
+[dir=rtl] .nut-rate-item-small,
 .nut-rtl .nut-rate-item-small {
-  margin-right: calc(4px - 2px);
+  margin-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
 }
 [dir=rtl] .nut-rate-item:last-child,
 .nut-rtl .nut-rate-item:last-child {
@@ -148,21 +142,15 @@
 .nut-rtl .nut-rate-score {
   padding-left: 0;
 }
-[dir=rtl] .nut-rate-score-large {
-  padding-right: calc(4px * 2);
-}
+[dir=rtl] .nut-rate-score-large,
 .nut-rtl .nut-rate-score-large {
-  padding-right: calc(4px * 2);
-}
-[dir=rtl] .nut-rate-score-normal {
-  padding-right: 4px;
+  padding-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
 }
+[dir=rtl] .nut-rate-score-normal,
 .nut-rtl .nut-rate-score-normal {
-  padding-right: 4px;
-}
-[dir=rtl] .nut-rate-score-small {
-  padding-right: calc(4px - 2px);
+  padding-right: var(--nutui-rate-item-margin, 4px);
 }
+[dir=rtl] .nut-rate-score-small,
 .nut-rtl .nut-rate-score-small {
-  padding-right: calc(4px - 2px);
+  padding-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
 }