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

package/dist/cjs/packages/inputnumber/style/style.harmony.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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/packages/pagination/pagination.js

@@ -85,7 +85,7 @@ var Pagination = function Pagination(props) {
         onClick: function onClick() {
             return prevPage();
         }
-    }, (0, _addcolorforharmony.addColorForHarmony)(prev || locale.pagination.prev, current === 1 ? '#c2c4cc' : '#ff0f23')), mode === 'multi' && /*#__PURE__*/ _react.default.createElement(_components.View, {
+    }, (0, _addcolorforharmony.addColorForHarmony)(prev || locale.pagination.prev, current === 1 ? 'var(--nutui-color-text-disabled, #c2c4cc)' : 'var(--nutui-color-primary, #ff0f23)')), mode === 'multi' && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-contain")
     }, pages.map(function(item, index) {
         var _obj;
@@ -105,7 +105,7 @@ var Pagination = function Pagination(props) {
         onClick: function onClick() {
             return nextPage();
         }
-    }, (0, _addcolorforharmony.addColorForHarmony)(next || locale.pagination.next, current >= pageCount ? '#c2c4cc' : '#ff0f23'))), mode === 'lite' && /*#__PURE__*/ _react.default.createElement(_components.View, {
+    }, (0, _addcolorforharmony.addColorForHarmony)(next || locale.pagination.next, current >= pageCount ? 'var(--nutui-color-text-disabled, #c2c4cc)' : 'var(--nutui-color-primary, #ff0f23)'))), mode === 'lite' && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-lite")
     }, /*#__PURE__*/ _react.default.createElement(_components.Text, {
         className: "".concat(classPrefix, "-lite-active")

package/dist/cjs/packages/price/price.js

@@ -20,6 +20,7 @@ var _typings = require("../../utils/typings");
 var _index = require("../configprovider/index");
 var _types = require("../../types");
 var _platform = require("../../utils/taro/platform");
+var _shouldrenderpriceraw = require("../../utils/should-render-price-raw");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     color: 'primary',
     price: 0,
@@ -34,10 +35,17 @@ var Price = function Price(props) {
     var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), color = _$_object_spread.color, originalPrice = _$_object_spread.price, symbol = _$_object_spread.symbol, digits = _$_object_spread.digits, thousands = _$_object_spread.thousands, position = _$_object_spread.position, size = _$_object_spread.size, line = _$_object_spread.line, className = _$_object_spread.className, style = _$_object_spread.style;
     var classPrefix = 'nut-price';
     var rtl = (0, _index.useRtl)();
+    var isRenderPriceRaw = (0, _react.useMemo)(function() {
+        return typeof originalPrice === 'string' && (0, _shouldrenderpriceraw.shouldRenderPriceAsRaw)(originalPrice);
+    }, [
+        originalPrice
+    ]);
     var price = (0, _react.useMemo)(function() {
+        if (isRenderPriceRaw) return '';
         return originalPrice.toString().replace(/[^\d.]/g, '');
     }, [
-        originalPrice
+        originalPrice,
+        isRenderPriceRaw
     ]);
     var isCustomPriceColor = (0, _react.useMemo)(function() {
         var specificPriceColor = Object.values(_types.PriceColorEnum);
@@ -118,12 +126,15 @@ var Price = function Price(props) {
             style: priceColorStyle
         }, formatDecimal(price))) : null, symbol && position === 'after' ? renderSymbol() : null);
     };
-    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (0, _platform.harmony)() || (0, _platform.td)() ? /*#__PURE__*/ _react.default.createElement(_components.Text, {
+    var renderRawContent = function renderRawContent() {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, originalPrice);
+    };
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (0, _platform.harmony)() || process.env.TARO_ENV === 'dynamic' ? /*#__PURE__*/ _react.default.createElement(_components.Text, {
         className: "".concat(classPrefix, " ").concat(classPrefix, "-").concat(color, " ").concat(className),
         style: style
-    }, renderInner()) : /*#__PURE__*/ _react.default.createElement(_components.View, {
+    }, isRenderPriceRaw ? renderRawContent() : renderInner()) : /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, " ").concat(classPrefix, "-").concat(color, " ").concat(className),
         style: style
-    }, renderInner()));
+    }, isRenderPriceRaw ? renderRawContent() : renderInner()));
 };
 Price.displayName = 'NutPrice';

package/dist/cjs/packages/progress/progress.js

@@ -83,7 +83,7 @@ var Progress = function Progress(props) {
             }, baseStyles),
             inner: (0, _object_spread._)({
                 width: "".concat(displayPercent, "%"),
-                background: effectiveColor || '#FF0F23'
+                background: effectiveColor || 'var(--nutui-color-primary, #ff0f23)'
             }, baseStyles, transitionStyle)
         };
     };
@@ -207,7 +207,7 @@ var Progress = function Progress(props) {
     };
     var computeInnerStyle = function computeInnerStyle() {
         var style = {
-            backgroundColor: effectiveColor || '#ff0f23',
+            backgroundColor: effectiveColor || 'var(--nutui-color-primary, #ff0f23)',
             fontSize: fontSize && (0, _pxtransform.pxTransform)(parseInt(fontSize.toString()))
         };
         if ((0, _platform.harmony)()) {

package/dist/cjs/packages/radio/radio.js

@@ -102,7 +102,7 @@ var Radio = function Radio(props) {
     };
     var renderLabel = function renderLabel() {
         var labelcls = (0, _classnames.default)("".concat(classPrefix, "-label"), (0, _define_property._)({}, "".concat(classPrefix, "-label-disabled"), disabled));
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderIcon(), /*#__PURE__*/ _react.default.createElement(_components.View, {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderIcon(), children && /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: labelcls
         }, children));
     };
@@ -123,7 +123,8 @@ var Radio = function Radio(props) {
         if (disabled || checkedStatement) return;
         setCheckedStatement(!checkedStatement);
     };
-    var cls = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-reverse"), labelPosition === 'left'), className);
+    var _obj;
+    var cls = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-reverse"), labelPosition === 'left'), (0, _define_property._)(_obj, "".concat(classPrefix, "-nolabel"), !children), _obj), className);
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: cls,
         style: style,

package/dist/cjs/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/cjs/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/cjs/packages/radio/style/style.harmony.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;
@@ -64,6 +64,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;
@@ -72,6 +73,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)))));
@@ -82,7 +87,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)))));
@@ -91,12 +96,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%;
 }
@@ -121,7 +126,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/cjs/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/cjs/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/cjs/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%;
       }