npm - @nutui/nutui-react-taro - Versions diffs - 3.0.21-cpp → 4.0.0-beta.1 - Mend

@nutui/nutui-react-taro 3.0.21-cpp → 4.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1305) hide show

package/dist/cjs/packages/radio/style/radio.scss CHANGED Viewed

@@ -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: 0px 2px 4px 0px #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%;
       }
@@ -59,14 +65,14 @@
     display: inline-flex;
     /* #endif */
     align-items: center;
-    min-height: 30px;
+    min-height: scale-px(30px);
     padding: $radio-button-padding;
     font-size: $radio-button-font-size;
     background: $radio-button-background;
     border-radius: $radio-button-border-radius;
     color: $radio-label-color;
     box-sizing: border-box;
-    border: 1px solid $radio-button-background;
+    border: scale-px(1px) solid $radio-button-background;
     &-active {
       background: $color-primary-light-pressed;
@@ -76,14 +82,14 @@
     &-disabled {
       color: $color-text-disabled;
-      border: 1px solid $radio-button-background;
+      border: scale-px(1px) solid $radio-button-background;
     }
   }
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 }

package/dist/cjs/packages/radio/style/style.css CHANGED Viewed

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
@@ -6,17 +16,22 @@
   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;
 }
 .nut-radio.nut-radio-reverse .nut-radio-label {
-  margin-right: var(--nutui-radio-label-margin-left, 4px);
+  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, 4px);
-  font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12px));
+  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)))));
   color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-radio-label-disabled {
@@ -24,21 +39,21 @@
 }
 .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, 16px));
+  font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-icon, calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1)))));
   border-radius: 50%;
 }
 .nut-radio-icon-checked {
   color: var(--nutui-color-primary, #ff0f23);
   background-color: #ffffff;
-  box-shadow: 0px 2px 4px 0px 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%;
 }
@@ -53,28 +68,28 @@
   display: inline-flex;
   /* #endif */
   align-items: center;
-  min-height: 30px;
-  padding: var(--nutui-radio-button-padding, 5px 18px);
-  font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, 12px));
+  min-height: calc(30px * var(--nut-scale-f, 1));
+  padding: var(--nutui-radio-button-padding, calc(5px * var(--nut-scale-f, 1)) calc(18px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   background: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
-  border-radius: var(--nutui-radio-button-border-radius, 15px);
+  border-radius: var(--nutui-radio-button-border-radius, calc(15px * var(--nut-scale-f, 1)));
   color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
   box-sizing: border-box;
-  border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
+  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, 1px solid 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));
 }
 .nut-radio-button-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
-  border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio .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);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 [dir=rtl] .nut-radio:last-child,
@@ -84,11 +99,11 @@
 }
 [dir=rtl] .nut-radio.nut-radio-reverse .nut-radio-label,
 .nut-rtl .nut-radio.nut-radio-reverse .nut-radio-label {
-  margin-left: var(--nutui-radio-label-margin-left, 4px);
+  margin-left: var(--nutui-radio-label-margin-left, calc(4px * var(--nut-scale-f, 1)));
   margin-right: 0;
 }
 [dir=rtl] .nut-radio-label,
 .nut-rtl .nut-radio-label {
   margin-left: 0;
-  margin-right: var(--nutui-radio-label-margin-left, 4px);
+  margin-right: var(--nutui-radio-label-margin-left, calc(4px * var(--nut-scale-f, 1)));
 }

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

@@ -1,12 +1,22 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
 .nut-radiogroup .nut-radio {
-  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
+  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;
 }
 .nut-radiogroup .nut-radio-label {
-  margin: var(--nutui-radiogroup-radio-label-margin, 0 5px);
+  margin: var(--nutui-radiogroup-radio-label-margin, 0 calc(5px * var(--nut-scale-f, 1)));
 }
 .nut-radiogroup .nut-radio-button {
   background-color: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
@@ -22,8 +32,8 @@
   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);
+  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, #ffe8ee);
 }
 .nut-radiogroup-horizontal {
   display: flex;
@@ -32,11 +42,11 @@
   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);
+  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, #ffe8ee);
 }
 .nut-radiogroup-horizontal .nut-radio:last-child {
-  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
+  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;
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
   background: var(--nutui-color-text-disabled, #c2c4cc);
@@ -46,7 +56,7 @@
 [dir=rtl] .nut-radiogroup .nut-radio,
 .nut-rtl .nut-radiogroup .nut-radio {
-  margin-left: var(--nutui-radiogroup-radio-margin, 20px);
+  margin-left: var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1)));
   margin-right: 0;
 }
@@ -54,17 +64,22 @@
   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;
 }
 .nut-radio.nut-radio-reverse .nut-radio-label {
-  margin-right: var(--nutui-radio-label-margin-left, 4px);
+  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, 4px);
-  font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12px));
+  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)))));
   color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-radio-label-disabled {
@@ -72,21 +87,21 @@
 }
 .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, 16px));
+  font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-icon, calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1)))));
   border-radius: 50%;
 }
 .nut-radio-icon-checked {
   color: var(--nutui-color-primary, #ff0f23);
   background-color: #ffffff;
-  box-shadow: 0px 2px 4px 0px 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%;
 }
@@ -101,28 +116,28 @@
   display: inline-flex;
   /* #endif */
   align-items: center;
-  min-height: 30px;
-  padding: var(--nutui-radio-button-padding, 5px 18px);
-  font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, 12px));
+  min-height: calc(30px * var(--nut-scale-f, 1));
+  padding: var(--nutui-radio-button-padding, calc(5px * var(--nut-scale-f, 1)) calc(18px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   background: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
-  border-radius: var(--nutui-radio-button-border-radius, 15px);
+  border-radius: var(--nutui-radio-button-border-radius, calc(15px * var(--nut-scale-f, 1)));
   color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
   box-sizing: border-box;
-  border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
+  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, 1px solid 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));
 }
 .nut-radio-button-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
-  border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio .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);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 [dir=rtl] .nut-radio:last-child,
@@ -132,11 +147,11 @@
 }
 [dir=rtl] .nut-radio.nut-radio-reverse .nut-radio-label,
 .nut-rtl .nut-radio.nut-radio-reverse .nut-radio-label {
-  margin-left: var(--nutui-radio-label-margin-left, 4px);
+  margin-left: var(--nutui-radio-label-margin-left, calc(4px * var(--nut-scale-f, 1)));
   margin-right: 0;
 }
 [dir=rtl] .nut-radio-label,
 .nut-rtl .nut-radio-label {
   margin-left: 0;
-  margin-right: var(--nutui-radio-label-margin-left, 4px);
+  margin-right: var(--nutui-radio-label-margin-left, calc(4px * var(--nut-scale-f, 1)));
 }

package/dist/cjs/packages/radio/style-jmapp/radio.scss CHANGED Viewed

@@ -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: 0px 2px 4px 0px #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%;
       }
@@ -59,14 +65,14 @@
     display: inline-flex;
     /* #endif */
     align-items: center;
-    min-height: 30px;
+    min-height: scale-px(30px);
     padding: $radio-button-padding;
     font-size: $radio-button-font-size;
     background: $radio-button-background;
     border-radius: $radio-button-border-radius;
     color: $radio-label-color;
     box-sizing: border-box;
-    border: 1px solid $radio-button-background;
+    border: scale-px(1px) solid $radio-button-background;
     &-active {
       background: $color-primary-light-pressed;
@@ -76,14 +82,14 @@
     &-disabled {
       color: $color-text-disabled;
-      border: 1px solid $radio-button-background;
+      border: scale-px(1px) solid $radio-button-background;
     }
   }
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 }

package/dist/cjs/packages/radio/style-jmapp/style.css CHANGED Viewed

@@ -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: 0px 2px 4px 0px 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%;
 }
@@ -53,14 +58,14 @@
   display: inline-flex;
   /* #endif */
   align-items: center;
-  min-height: 30px;
+  min-height: scale-px(30px);
   padding: var(--nutui-radio-button-padding, 5px 18px);
   font-size: var(--nutui-radio-button-font-size, var(--nutui-font-text));
   background: var(--nutui-radio-button-background, var(--nutui-color-surface-1));
   border-radius: var(--nutui-radio-button-border-radius, var(--nutui-radius-xs));
   color: var(--nutui-radio-label-color, var(--nutui-color-text));
   box-sizing: border-box;
-  border: 1px solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
+  border: scale-px(1px) solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
 }
 .nut-radio-button-active {
   background: var(--nutui-color-primary-light-pressed);
@@ -69,12 +74,12 @@
 }
 .nut-radio-button-disabled {
   color: var(--nutui-color-text-disabled);
-  border: 1px solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
+  border: scale-px(1px) solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
 }
 .nut-radio .nut-radio-button-active.nut-radio-button-disabled {
   background: var(--nutui-color-text-disabled);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled);
+  border: scale-px(1px) solid var(--nutui-color-text-disabled);
 }
 [dir=rtl] .nut-radio:last-child,

package/dist/cjs/packages/radio/style-jrkf/radio.scss CHANGED Viewed

@@ -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: 0px 2px 4px 0px #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%;
       }
@@ -59,14 +65,14 @@
     display: inline-flex;
     /* #endif */
     align-items: center;
-    min-height: 30px;
+    min-height: scale-px(30px);
     padding: $radio-button-padding;
     font-size: $radio-button-font-size;
     background: $radio-button-background;
     border-radius: $radio-button-border-radius;
     color: $radio-label-color;
     box-sizing: border-box;
-    border: 1px solid $radio-button-background;
+    border: scale-px(1px) solid $radio-button-background;
     &-active {
       background: $color-primary-light-pressed;
@@ -76,14 +82,14 @@
     &-disabled {
       color: $color-text-disabled;
-      border: 1px solid $radio-button-background;
+      border: scale-px(1px) solid $radio-button-background;
     }
   }
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 }

package/dist/cjs/packages/radio/style-jrkf/style.css CHANGED Viewed

@@ -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: 0px 2px 4px 0px 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%;
 }
@@ -53,14 +58,14 @@
   display: inline-flex;
   /* #endif */
   align-items: center;
-  min-height: 30px;
+  min-height: scale-px(30px);
   padding: var(--nutui-radio-button-padding, 5px 18px);
   font-size: var(--nutui-radio-button-font-size, var(--nutui-font-text));
   background: var(--nutui-radio-button-background, var(--nutui-color-surface-1));
   border-radius: var(--nutui-radio-button-border-radius, var(--nutui-radius-xs));
   color: var(--nutui-radio-label-color, var(--nutui-color-text));
   box-sizing: border-box;
-  border: 1px solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
+  border: scale-px(1px) solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
 }
 .nut-radio-button-active {
   background: var(--nutui-color-primary-light-pressed, #ffcccc);
@@ -69,12 +74,12 @@
 }
 .nut-radio-button-disabled {
   color: var(--nutui-color-text-disabled);
-  border: 1px solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
+  border: scale-px(1px) solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
 }
 .nut-radio .nut-radio-button-active.nut-radio-button-disabled {
   background: var(--nutui-color-text-disabled);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled);
+  border: scale-px(1px) solid var(--nutui-color-text-disabled);
 }
 [dir=rtl] .nut-radio:last-child,

package/dist/cjs/packages/radiogroup/style/radiogroup.scss CHANGED Viewed

@@ -23,7 +23,7 @@
       }
       &-button {
-        border: 1px solid $radio-button-background;
+        border: scale-px(1px) solid $radio-button-background;
       }
       &-button-active {
@@ -38,7 +38,7 @@
     .nut-radio {
       &-button {
-        border: 1px solid $white;
+        border: scale-px(1px) solid $white;
       }
       &-button-active {
@@ -55,7 +55,7 @@
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 }