@nutui/nutui-react 3.1.0-beta.1 → 4.0.0-beta.2

package/dist/es/packages/inputnumber/style/inputnumber.scss

@@ -6,12 +6,12 @@
   display: inline-flex;
   /* #endif */
   width: calc(
-    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} +
+    2 * #{$inputnumber-divider-width} + 2 * #{$inputnumber-button-width} +
       #{$inputnumber-input-width}
   );
   flex-direction: row;
   align-items: center;
-  background-color: $color-background;
+  background-color: $inputnumber-input-background-color;
   border-radius: $inputnumber-input-border-radius;
   overflow: hidden;
   &-minus,
@@ -38,20 +38,26 @@
     }
   }
 
+  &-divider {
+    width: $inputnumber-divider-width;
+    align-self: stretch;
+    background-color: $color-background-overlay;
+  }
+
   &-input {
     display: flex;
     justify-content: center;
     align-items: center;
     width: $inputnumber-input-width;
-    font-size: $inputnumber-input-font-size;
     height: $inputnumber-input-height;
+    font-size: $inputnumber-input-font-size;
+    font-family: $inputnumber-input-font-family;
     text-align: center;
     outline: none;
     border: $inputnumber-input-border;
-    margin-left: $inputnumber-input-margin;
-    margin-right: $inputnumber-input-margin;
     color: $color-text;
     background-color: $inputnumber-input-background-color;
+    padding: 0;
     &-disabled {
       color: $color-text-disabled;
     }

package/dist/es/packages/inputnumber/style/style.css

@@ -19,20 +19,20 @@ page {
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  width: calc(2 * var(--nutui-inputnumber-input-margin, 0px) + 2 * var(--nutui-inputnumber-button-width, calc(20px * var(--nut-scale-f, 1))) + var(--nutui-inputnumber-input-width, calc(26px * var(--nut-scale-f, 1))));
+  width: calc(2 * var(--nutui-inputnumber-divider-width, 1px) + 2 * var(--nutui-inputnumber-button-width, calc(28px * var(--nut-scale-f, 1))) + var(--nutui-inputnumber-input-width, calc(32px * var(--nut-scale-f, 1))));
   flex-direction: row;
   align-items: center;
-  background-color: var(--nutui-color-background, #f2f3f5);
-  border-radius: var(--nutui-inputnumber-input-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-background-component));
+  border-radius: var(--nutui-inputnumber-input-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
   overflow: hidden;
 }
 .nut-inputnumber-minus, .nut-inputnumber-add {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--nutui-inputnumber-button-width, calc(20px * var(--nut-scale-f, 1)));
-  height: var(--nutui-inputnumber-button-height, calc(20px * var(--nut-scale-f, 1)));
-  background-color: var(--nutui-inputnumber-button-background-color, transparent);
+  width: var(--nutui-inputnumber-button-width, calc(28px * var(--nut-scale-f, 1)));
+  height: var(--nutui-inputnumber-button-height, calc(28px * var(--nut-scale-f, 1)));
+  background-color: var(--nutui-inputnumber-button-background-color, var(--nutui-color-background-component));
 }
 .nut-inputnumber-minus .nut-icon, .nut-inputnumber-add .nut-icon {
   width: calc(10px * var(--nut-scale-f, 1));
@@ -46,20 +46,25 @@ page {
   color: var(--nutui-color-text-disabled, #c2c4cc);
   cursor: not-allowed;
 }
+.nut-inputnumber-divider {
+  width: var(--nutui-inputnumber-divider-width, 1px);
+  align-self: stretch;
+  background-color: var(--nutui-color-background-overlay, #ffffff);
+}
 .nut-inputnumber-input {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--nutui-inputnumber-input-width, calc(26px * var(--nut-scale-f, 1)));
+  width: var(--nutui-inputnumber-input-width, calc(32px * var(--nut-scale-f, 1)));
+  height: var(--nutui-inputnumber-input-height, calc(28px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-inputnumber-input-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
-  height: var(--nutui-inputnumber-input-height, calc(20px * var(--nut-scale-f, 1)));
+  font-family: var(--nutui-inputnumber-input-font-family, JDZH);
   text-align: center;
   outline: none;
   border: var(--nutui-inputnumber-input-border, 0);
-  margin-left: var(--nutui-inputnumber-input-margin, 0px);
-  margin-right: var(--nutui-inputnumber-input-margin, 0px);
   color: var(--nutui-color-text, #505259);
-  background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-background, #f2f3f5));
+  background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-background-component));
+  padding: 0;
 }
 .nut-inputnumber-input-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);

package/dist/es/packages/inputnumber/style-jmapp/inputnumber.scss

@@ -6,12 +6,12 @@
   display: inline-flex;
   /* #endif */
   width: calc(
-    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} +
+    2 * #{$inputnumber-divider-width} + 2 * #{$inputnumber-button-width} +
       #{$inputnumber-input-width}
   );
   flex-direction: row;
   align-items: center;
-  background-color: $color-background;
+  background-color: $inputnumber-input-background-color;
   border-radius: $inputnumber-input-border-radius;
   overflow: hidden;
   &-minus,
@@ -38,20 +38,26 @@
     }
   }
 
+  &-divider {
+    width: $inputnumber-divider-width;
+    align-self: stretch;
+    background-color: $color-background-overlay;
+  }
+
   &-input {
     display: flex;
     justify-content: center;
     align-items: center;
     width: $inputnumber-input-width;
-    font-size: $inputnumber-input-font-size;
     height: $inputnumber-input-height;
+    font-size: $inputnumber-input-font-size;
+    font-family: $inputnumber-input-font-family;
     text-align: center;
     outline: none;
     border: $inputnumber-input-border;
-    margin-left: $inputnumber-input-margin;
-    margin-right: $inputnumber-input-margin;
     color: $color-text;
     background-color: $inputnumber-input-background-color;
+    padding: 0;
     &-disabled {
       color: $color-text-disabled;
     }

package/dist/es/packages/inputnumber/style-jmapp/style.css

@@ -9,10 +9,10 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  width: calc(2 * var(--nutui-inputnumber-input-margin, 0 6px) + 2 * var(--nutui-inputnumber-button-width, 16px) + var(--nutui-inputnumber-input-width, 40px));
+  width: calc(2 * var(--nutui-inputnumber-divider-width, 1px) + 2 * var(--nutui-inputnumber-button-width, 16px) + var(--nutui-inputnumber-input-width, 40px));
   flex-direction: row;
   align-items: center;
-  background-color: var(--nutui-color-surface-1);
+  background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-surface-2));
   border-radius: var(--nutui-inputnumber-input-border-radius, 6px);
   overflow: hidden;
 }
@@ -36,20 +36,25 @@
   color: var(--nutui-color-text-disabled);
   cursor: not-allowed;
 }
+.nut-inputnumber-divider {
+  width: var(--nutui-inputnumber-divider-width, 1px);
+  align-self: stretch;
+  background-color: var(--nutui-color-surface-2);
+}
 .nut-inputnumber-input {
   display: flex;
   justify-content: center;
   align-items: center;
   width: var(--nutui-inputnumber-input-width, 40px);
-  font-size: var(--nutui-inputnumber-input-font-size, 14px);
   height: var(--nutui-inputnumber-input-height, 24px);
+  font-size: var(--nutui-inputnumber-input-font-size, 14px);
+  font-family: var(--nutui-inputnumber-input-font-family, JDZH);
   text-align: center;
   outline: none;
   border: var(--nutui-inputnumber-input-border, 0);
-  margin-left: var(--nutui-inputnumber-input-margin, 0 6px);
-  margin-right: var(--nutui-inputnumber-input-margin, 0 6px);
   color: var(--nutui-color-text);
   background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-surface-2));
+  padding: 0;
 }
 .nut-inputnumber-input-disabled {
   color: var(--nutui-color-text-disabled);

package/dist/es/packages/inputnumber/style-jrkf/inputnumber.scss

@@ -6,12 +6,12 @@
   display: inline-flex;
   /* #endif */
   width: calc(
-    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} +
+    2 * #{$inputnumber-divider-width} + 2 * #{$inputnumber-button-width} +
       #{$inputnumber-input-width}
   );
   flex-direction: row;
   align-items: center;
-  background-color: $color-background;
+  background-color: $inputnumber-input-background-color;
   border-radius: $inputnumber-input-border-radius;
   overflow: hidden;
   &-minus,
@@ -38,20 +38,26 @@
     }
   }
 
+  &-divider {
+    width: $inputnumber-divider-width;
+    align-self: stretch;
+    background-color: $color-background-overlay;
+  }
+
   &-input {
     display: flex;
     justify-content: center;
     align-items: center;
     width: $inputnumber-input-width;
-    font-size: $inputnumber-input-font-size;
     height: $inputnumber-input-height;
+    font-size: $inputnumber-input-font-size;
+    font-family: $inputnumber-input-font-family;
     text-align: center;
     outline: none;
     border: $inputnumber-input-border;
-    margin-left: $inputnumber-input-margin;
-    margin-right: $inputnumber-input-margin;
     color: $color-text;
     background-color: $inputnumber-input-background-color;
+    padding: 0;
     &-disabled {
       color: $color-text-disabled;
     }

package/dist/es/packages/inputnumber/style-jrkf/style.css

@@ -9,10 +9,10 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  width: calc(2 * var(--nutui-inputnumber-input-margin, 0 6px) + 2 * var(--nutui-inputnumber-button-width, 16px) + var(--nutui-inputnumber-input-width, 40px));
+  width: calc(2 * var(--nutui-inputnumber-divider-width, 1px) + 2 * var(--nutui-inputnumber-button-width, 16px) + var(--nutui-inputnumber-input-width, 40px));
   flex-direction: row;
   align-items: center;
-  background-color: var(--nutui-color-surface-1);
+  background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-surface-2));
   border-radius: var(--nutui-inputnumber-input-border-radius, 6px);
   overflow: hidden;
 }
@@ -36,20 +36,25 @@
   color: var(--nutui-color-text-disabled);
   cursor: not-allowed;
 }
+.nut-inputnumber-divider {
+  width: var(--nutui-inputnumber-divider-width, 1px);
+  align-self: stretch;
+  background-color: var(--nutui-color-surface-2);
+}
 .nut-inputnumber-input {
   display: flex;
   justify-content: center;
   align-items: center;
   width: var(--nutui-inputnumber-input-width, 40px);
-  font-size: var(--nutui-inputnumber-input-font-size, 14px);
   height: var(--nutui-inputnumber-input-height, 24px);
+  font-size: var(--nutui-inputnumber-input-font-size, 14px);
+  font-family: var(--nutui-inputnumber-input-font-family, JDZH);
   text-align: center;
   outline: none;
   border: var(--nutui-inputnumber-input-border, 0);
-  margin-left: var(--nutui-inputnumber-input-margin, 0 6px);
-  margin-right: var(--nutui-inputnumber-input-margin, 0 6px);
   color: var(--nutui-color-text);
   background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-surface-2));
+  padding: 0;
 }
 .nut-inputnumber-input-disabled {
   color: var(--nutui-color-text-disabled);

package/dist/es/packages/progress/progress.js

@@ -45,7 +45,7 @@ export var Progress = function(props) {
     var _useState = _sliced_to_array(useState(0), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
     var stylesInner = {
         width: "".concat(displayPercent, "%"),
-        background: color || '#FF0F23',
+        background: color || 'var(--nutui-color-primary, #ff0f23)',
         borderRadius: borderRadius && parseInt(borderRadius.toString()),
         transition: "width ".concat(duration || 300, "ms ease-in-out")
     };

package/dist/es/packages/radio/radio.js

@@ -87,7 +87,7 @@ export var Radio = function(props) {
     };
     var renderLabel = function() {
         var labelcls = classNames("".concat(classPrefix, "-label"), _define_property({}, "".concat(classPrefix, "-label-disabled"), disabled));
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, renderIcon(), /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, renderIcon(), children && /*#__PURE__*/ React.createElement("div", {
             className: labelcls
         }, children));
     };
@@ -108,7 +108,8 @@ export var Radio = function(props) {
         if (disabled || checkedStatement) return;
         setCheckedStatement(!checkedStatement);
     };
-    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-reverse"), labelPosition === 'left'), className);
+    var _obj;
+    var cls = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-reverse"), labelPosition === 'left'), _define_property(_obj, "".concat(classPrefix, "-nolabel"), !children), _obj), className);
     return /*#__PURE__*/ React.createElement("div", _object_spread({
         className: cls,
         style: style,

package/dist/es/packages/radio/style/radio.scss

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  min-height: scale-px(32px);
 
   &.nut-radio-reverse {
     flex-direction: row-reverse;
@@ -12,6 +13,11 @@
     }
   }
 
+  &.nut-radio-nolabel {
+    min-width: scale-px(32px);
+    justify-content: center;
+  }
+
   &-label {
     margin-left: $radio-label-margin-left;
     font-size: $radio-label-font-size;
@@ -24,7 +30,7 @@
 
   &-icon {
     color: $color-text-disabled;
-    background-color: $white;
+    background-color: $color-background-overlay;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
     font-size: $radio-icon-font-size;
@@ -35,12 +41,12 @@
     &-checked {
       color: $color-primary;
       background-color: $white;
-      box-shadow: 0 scale-px(2px) scale-px(4px) 0 #ff0f2333;
+      box-shadow: none;
       border-radius: 50%;
 
       &.nut-radio-icon-disabled {
         color: $color-primary-disabled-special;
-        background-color: $white;
+        background-color: $color-background-overlay;
         box-shadow: none;
         border-radius: 50%;
       }

package/dist/es/packages/radio/style/style.css

@@ -16,6 +16,7 @@ page {
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  min-height: calc(32px * var(--nut-scale-f, 1));
 }
 .nut-radio.nut-radio-reverse {
   flex-direction: row-reverse;
@@ -24,6 +25,10 @@ page {
   margin-right: var(--nutui-radio-label-margin-left, calc(4px * var(--nut-scale-f, 1)));
   margin-left: 0;
 }
+.nut-radio.nut-radio-nolabel {
+  min-width: calc(32px * var(--nut-scale-f, 1));
+  justify-content: center;
+}
 .nut-radio-label {
   margin-left: var(--nutui-radio-label-margin-left, calc(4px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
@@ -34,7 +39,7 @@ page {
 }
 .nut-radio-icon {
   color: var(--nutui-color-text-disabled, #c2c4cc);
-  background-color: #ffffff;
+  background-color: var(--nutui-color-background-overlay, #ffffff);
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
   font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-icon, calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1)))));
@@ -43,12 +48,12 @@ page {
 .nut-radio-icon-checked {
   color: var(--nutui-color-primary, #ff0f23);
   background-color: #ffffff;
-  box-shadow: 0 calc(2px * var(--nut-scale-f, 1)) calc(4px * var(--nut-scale-f, 1)) 0 rgba(255, 15, 35, 0.2);
+  box-shadow: none;
   border-radius: 50%;
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
-  color: var(--nutui-color-primary-disabled-special, #ffadbe);
-  background-color: #ffffff;
+  color: var(--nutui-color-primary-disabled-special, #ff91a5);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
   box-shadow: none;
   border-radius: 50%;
 }
@@ -73,7 +78,7 @@ page {
   border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio-button-active {
-  background: var(--nutui-color-primary-light-pressed, #ffebf1);
+  background: var(--nutui-color-primary-light-pressed, #ffe8ee);
   color: var(--nutui-color-primary, #ff0f23);
   border: var(--nutui-radio-button-active-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
 }

package/dist/es/packages/radio/style-jmapp/radio.scss

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  min-height: scale-px(32px);
 
   &.nut-radio-reverse {
     flex-direction: row-reverse;
@@ -12,6 +13,11 @@
     }
   }
 
+  &.nut-radio-nolabel {
+    min-width: scale-px(32px);
+    justify-content: center;
+  }
+
   &-label {
     margin-left: $radio-label-margin-left;
     font-size: $radio-label-font-size;
@@ -24,7 +30,7 @@
 
   &-icon {
     color: $color-text-disabled;
-    background-color: $white;
+    background-color: $color-background-overlay;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
     font-size: $radio-icon-font-size;
@@ -35,12 +41,12 @@
     &-checked {
       color: $color-primary;
       background-color: $white;
-      box-shadow: 0 scale-px(2px) scale-px(4px) 0 #ff0f2333;
+      box-shadow: none;
       border-radius: 50%;
 
       &.nut-radio-icon-disabled {
         color: $color-primary-disabled-special;
-        background-color: $white;
+        background-color: $color-background-overlay;
         box-shadow: none;
         border-radius: 50%;
       }

package/dist/es/packages/radio/style-jmapp/style.css

@@ -6,6 +6,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  min-height: scale-px(32px);
 }
 .nut-radio.nut-radio-reverse {
   flex-direction: row-reverse;
@@ -14,6 +15,10 @@
   margin-right: var(--nutui-radio-label-margin-left, 4px);
   margin-left: 0;
 }
+.nut-radio.nut-radio-nolabel {
+  min-width: scale-px(32px);
+  justify-content: center;
+}
 .nut-radio-label {
   margin-left: var(--nutui-radio-label-margin-left, 4px);
   font-size: var(--nutui-radio-label-font-size, var(--nutui-font-text));
@@ -24,7 +29,7 @@
 }
 .nut-radio-icon {
   color: var(--nutui-color-text-disabled);
-  background-color: #ffffff;
+  background-color: var(--nutui-color-surface-2);
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
   font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-text-large));
@@ -33,12 +38,12 @@
 .nut-radio-icon-checked {
   color: var(--nutui-color-primary);
   background-color: #ffffff;
-  box-shadow: 0 scale-px(2px) scale-px(4px) 0 rgba(255, 15, 35, 0.2);
+  box-shadow: none;
   border-radius: 50%;
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
   color: var(--nutui-color-primary-disabled);
-  background-color: #ffffff;
+  background-color: var(--nutui-color-surface-2);
   box-shadow: none;
   border-radius: 50%;
 }

package/dist/es/packages/radio/style-jrkf/radio.scss

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  min-height: scale-px(32px);
 
   &.nut-radio-reverse {
     flex-direction: row-reverse;
@@ -12,6 +13,11 @@
     }
   }
 
+  &.nut-radio-nolabel {
+    min-width: scale-px(32px);
+    justify-content: center;
+  }
+
   &-label {
     margin-left: $radio-label-margin-left;
     font-size: $radio-label-font-size;
@@ -24,7 +30,7 @@
 
   &-icon {
     color: $color-text-disabled;
-    background-color: $white;
+    background-color: $color-background-overlay;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
     font-size: $radio-icon-font-size;
@@ -35,12 +41,12 @@
     &-checked {
       color: $color-primary;
       background-color: $white;
-      box-shadow: 0 scale-px(2px) scale-px(4px) 0 #ff0f2333;
+      box-shadow: none;
       border-radius: 50%;
 
       &.nut-radio-icon-disabled {
         color: $color-primary-disabled-special;
-        background-color: $white;
+        background-color: $color-background-overlay;
         box-shadow: none;
         border-radius: 50%;
       }

package/dist/es/packages/radio/style-jrkf/style.css

@@ -6,6 +6,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  min-height: scale-px(32px);
 }
 .nut-radio.nut-radio-reverse {
   flex-direction: row-reverse;
@@ -14,6 +15,10 @@
   margin-right: var(--nutui-radio-label-margin-left, 4px);
   margin-left: 0;
 }
+.nut-radio.nut-radio-nolabel {
+  min-width: scale-px(32px);
+  justify-content: center;
+}
 .nut-radio-label {
   margin-left: var(--nutui-radio-label-margin-left, 4px);
   font-size: var(--nutui-radio-label-font-size, var(--nutui-font-text));
@@ -24,7 +29,7 @@
 }
 .nut-radio-icon {
   color: var(--nutui-color-text-disabled);
-  background-color: #ffffff;
+  background-color: var(--nutui-color-surface-2);
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
   font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-text-large));
@@ -33,12 +38,12 @@
 .nut-radio-icon-checked {
   color: var(--nutui-color-primary, #ff6666);
   background-color: #ffffff;
-  box-shadow: 0 scale-px(2px) scale-px(4px) 0 rgba(255, 15, 35, 0.2);
+  box-shadow: none;
   border-radius: 50%;
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
   color: var(--nutui-color-primary-disabled-special, #ffadbe);
-  background-color: #ffffff;
+  background-color: var(--nutui-color-surface-2);
   box-shadow: none;
   border-radius: 50%;
 }

package/dist/es/packages/radiogroup/style/style.css

@@ -33,7 +33,7 @@ page {
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
   border: var(--nutui-radio-button-active-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  background-color: var(--nutui-color-primary-light-pressed, #ffe8ee);
 }
 .nut-radiogroup-horizontal {
   display: flex;
@@ -43,7 +43,7 @@ page {
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
   border: var(--nutui-radio-button-active-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  background-color: var(--nutui-color-primary-light-pressed, #ffe8ee);
 }
 .nut-radiogroup-horizontal .nut-radio:last-child {
   margin: 0 var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1))) var(--nutui-radiogroup-radio-margin-bottom, calc(5px * var(--nut-scale-f, 1))) 0;

package/dist/es/packages/range/style/style.css

@@ -30,7 +30,7 @@ page {
   position: relative;
   height: var(--nutui-range-height, calc(4px * var(--nut-scale-f, 1)));
   margin: 0 var(--nutui-range-margin, calc(15px * var(--nut-scale-f, 1)));
-  background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffe8ee));
   border-radius: calc(2px * var(--nut-scale-f, 1));
   flex: 1;
   cursor: pointer;
@@ -149,7 +149,7 @@ page {
   height: calc(11px * var(--nut-scale-f, 1));
   left: 0;
   border-radius: calc(6px * var(--nut-scale-f, 1));
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffe8ee));
 }
 .nut-range-tick-active {
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
@@ -219,7 +219,7 @@ page {
   width: calc(10px * var(--nut-scale-f, 1));
   height: calc(10px * var(--nut-scale-f, 1));
   border-radius: calc(5px * var(--nut-scale-f, 1));
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffe8ee));
 }
 .nut-range-vertical-tick-active {
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));

package/dist/es/packages/resultpage/resultpage.js

@@ -19,19 +19,19 @@ export var ResultPage = function(props) {
     var cls = classNames(classPrefix, className);
     var defaultStatus = {
         success: /*#__PURE__*/ React.createElement(Success, {
-            color: "#00D900"
+            color: "var(--nutui-color-success, #0acc2a)"
         }),
         error: /*#__PURE__*/ React.createElement(Failure, {
-            color: "#FF0F23"
+            color: "var(--nutui-color-primary, #ff0f23)"
         }),
         warning: /*#__PURE__*/ React.createElement(Warning, {
-            color: "#FFBF00"
+            color: "var(--nutui-color-warning, #ffaa00)"
         }),
         info: /*#__PURE__*/ React.createElement(Tips, {
-            color: "#0073FF"
+            color: "var(--nutui-color-info, #0c82f7)"
         }),
         waiting: /*#__PURE__*/ React.createElement(Ask, {
-            color: "#0073FF"
+            color: "var(--nutui-color-info, #0c82f7)"
         })
     };
     return /*#__PURE__*/ React.createElement("div", {