@nutui/nutui-react 3.0.20 → 4.0.0-beta.1

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

@@ -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 */
@@ -30,25 +40,25 @@
   flex-shrink: 0;
 }
 .nut-rate-item-normal {
-  margin-left: var(--nutui-rate-item-margin, 4px);
+  margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-rate-item-normal .nut-icon {
-  height: var(--nutui-rate-icon-size, 12px);
-  width: var(--nutui-rate-icon-size, 12px);
+  height: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  width: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-rate-item-large {
-  margin-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
+  margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
 }
 .nut-rate-item-large .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) + 8px);
-  width: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+  height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
+  width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
 }
 .nut-rate-item-small {
-  margin-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
+  margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
 }
 .nut-rate-item-small .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) - 4px);
-  width: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+  height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
+  width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
 }
 .nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
   margin-left: 0;
@@ -86,19 +96,21 @@
   align-items: center;
   color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
   font-family: "JDZH-Regular";
-  line-height: 1;
 }
 .nut-rate-score-normal {
-  padding-left: var(--nutui-rate-item-margin, 4px);
-  font-size: var(--nutui-rate-font-size, 12px);
+  padding-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-rate-score-large {
-  font-size: calc(var(--nutui-rate-font-size, 12px) + 6px);
-  padding-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
+  font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) + 6px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: var(--nutui-line-height-xl, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
 }
 .nut-rate-score-small {
-  font-size: calc(var(--nutui-rate-font-size, 12px) - 2px);
-  padding-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
+  font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) - 2px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: var(--nutui-line-height-xxs, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
 }
 .nut-rate-score-disabled {
   color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
@@ -114,15 +126,15 @@
 }
 [dir=rtl] .nut-rate-item-normal,
 .nut-rtl .nut-rate-item-normal {
-  margin-right: var(--nutui-rate-item-margin, 4px);
+  margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-rate-item-large,
 .nut-rtl .nut-rate-item-large {
-  margin-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
+  margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
 }
 [dir=rtl] .nut-rate-item-small,
 .nut-rtl .nut-rate-item-small {
-  margin-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
+  margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
 }
 [dir=rtl] .nut-rate-item:last-child,
 .nut-rtl .nut-rate-item:last-child {
@@ -149,13 +161,13 @@
 }
 [dir=rtl] .nut-rate-score-large,
 .nut-rtl .nut-rate-score-large {
-  padding-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
+  padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
 }
 [dir=rtl] .nut-rate-score-normal,
 .nut-rtl .nut-rate-score-normal {
-  padding-right: var(--nutui-rate-item-margin, 4px);
+  padding-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-rate-score-small,
 .nut-rtl .nut-rate-score-small {
-  padding-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
+  padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
 }

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

@@ -44,16 +44,16 @@
     &-large {
       margin-left: calc($rate-item-margin * 2);
       .nut-icon {
-        height: calc($rate-icon-size + 8px);
-        width: calc($rate-icon-size + 8px);
+        height: calc($rate-icon-size + scale-px(8px));
+        width: calc($rate-icon-size + scale-px(8px));
       }
     }
 
     &-small {
       margin-left: calc($rate-item-margin / 2);
       .nut-icon {
-        height: calc($rate-icon-size - 4px);
-        width: calc($rate-icon-size - 4px);
+        height: calc($rate-icon-size - scale-px(4px));
+        width: calc($rate-icon-size - scale-px(4px));
       }
     }
 
@@ -106,20 +106,22 @@
     align-items: center;
     color: $rate-font-color;
     font-family: 'JDZH-Regular';
-    line-height: 1;
 
     &-normal {
       padding-left: $rate-item-margin;
       font-size: $rate-font-size;
+      line-height: $line-height-s;
     }
 
     &-large {
-      font-size: calc($rate-font-size + 6px);
+      font-size: $rate-font-size-large;
+      line-height: $line-height-xl;
       padding-left: calc($rate-item-margin * 2);
     }
 
     &-small {
-      font-size: calc($rate-font-size - 2px);
+      font-size: $rate-font-size-small;
+      line-height: $line-height-xxs;
       padding-left: calc($rate-item-margin / 2);
     }
 
@@ -146,7 +148,7 @@
     }
 
     &-small {
-      margin-right: calc($rate-item-margin - 2px);
+      margin-right: calc($rate-item-margin - scale-px(2px));
     }
 
     &:last-child {
@@ -183,7 +185,7 @@
     }
 
     &-small {
-      padding-right: calc($rate-item-margin - 2px);
+      padding-right: calc($rate-item-margin - scale-px(2px));
     }
   }
 }

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

@@ -40,15 +40,15 @@
   margin-left: calc(var(--nutui-rate-item-margin, 14px) * 2);
 }
 .nut-rate-item-large .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) + 8px);
-  width: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+  height: calc(var(--nutui-rate-icon-size, 12px) + scale-px(8px));
+  width: calc(var(--nutui-rate-icon-size, 12px) + scale-px(8px));
 }
 .nut-rate-item-small {
   margin-left: calc(var(--nutui-rate-item-margin, 14px) / 2);
 }
 .nut-rate-item-small .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) - 4px);
-  width: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+  height: calc(var(--nutui-rate-icon-size, 12px) - scale-px(4px));
+  width: calc(var(--nutui-rate-icon-size, 12px) - scale-px(4px));
 }
 .nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
   margin-left: 0;
@@ -86,18 +86,20 @@
   align-items: center;
   color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
   font-family: "JDZH-Regular";
-  line-height: 1;
 }
 .nut-rate-score-normal {
   padding-left: var(--nutui-rate-item-margin, 14px);
   font-size: var(--nutui-rate-font-size, 12px);
+  line-height: var(--nutui-line-height-s, var(--nutui-font-text-small));
 }
 .nut-rate-score-large {
-  font-size: calc(var(--nutui-rate-font-size, 12px) + 6px);
+  font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, 12px) + 6px));
+  line-height: var(--nutui-line-height-xl, var(--nutui-font-h2));
   padding-left: calc(var(--nutui-rate-item-margin, 14px) * 2);
 }
 .nut-rate-score-small {
-  font-size: calc(var(--nutui-rate-font-size, 12px) - 2px);
+  font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, 12px) - 2px));
+  line-height: var(--nutui-line-height-xxs, var(--nutui-font-text-mini));
   padding-left: calc(var(--nutui-rate-item-margin, 14px) / 2);
 }
 .nut-rate-score-disabled {
@@ -122,7 +124,7 @@
 }
 [dir=rtl] .nut-rate-item-small,
 .nut-rtl .nut-rate-item-small {
-  margin-right: calc(var(--nutui-rate-item-margin, 14px) - 2px);
+  margin-right: calc(var(--nutui-rate-item-margin, 14px) - scale-px(2px));
 }
 [dir=rtl] .nut-rate-item:last-child,
 .nut-rtl .nut-rate-item:last-child {
@@ -157,5 +159,5 @@
 }
 [dir=rtl] .nut-rate-score-small,
 .nut-rtl .nut-rate-score-small {
-  padding-right: calc(var(--nutui-rate-item-margin, 14px) - 2px);
+  padding-right: calc(var(--nutui-rate-item-margin, 14px) - scale-px(2px));
 }

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

@@ -44,16 +44,16 @@
     &-large {
       margin-left: calc($rate-item-margin * 2);
       .nut-icon {
-        height: calc($rate-icon-size + 8px);
-        width: calc($rate-icon-size + 8px);
+        height: calc($rate-icon-size + scale-px(8px));
+        width: calc($rate-icon-size + scale-px(8px));
       }
     }
 
     &-small {
       margin-left: calc($rate-item-margin / 2);
       .nut-icon {
-        height: calc($rate-icon-size - 4px);
-        width: calc($rate-icon-size - 4px);
+        height: calc($rate-icon-size - scale-px(4px));
+        width: calc($rate-icon-size - scale-px(4px));
       }
     }
 
@@ -106,20 +106,22 @@
     align-items: center;
     color: $rate-font-color;
     font-family: 'JDZH-Regular';
-    line-height: 1;
 
     &-normal {
       padding-left: $rate-item-margin;
       font-size: $rate-font-size;
+      line-height: $line-height-s;
     }
 
     &-large {
-      font-size: calc($rate-font-size + 6px);
+      font-size: $rate-font-size-large;
+      line-height: $line-height-xl;
       padding-left: calc($rate-item-margin * 2);
     }
 
     &-small {
-      font-size: calc($rate-font-size - 2px);
+      font-size: $rate-font-size-small;
+      line-height: $line-height-xxs;
       padding-left: calc($rate-item-margin / 2);
     }
 
@@ -146,7 +148,7 @@
     }
 
     &-small {
-      margin-right: calc($rate-item-margin - 2px);
+      margin-right: calc($rate-item-margin - scale-px(2px));
     }
 
     &:last-child {
@@ -183,7 +185,7 @@
     }
 
     &-small {
-      padding-right: calc($rate-item-margin - 2px);
+      padding-right: calc($rate-item-margin - scale-px(2px));
     }
   }
 }

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

@@ -40,15 +40,15 @@
   margin-left: calc(var(--nutui-rate-item-margin, 14px) * 2);
 }
 .nut-rate-item-large .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) + 8px);
-  width: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+  height: calc(var(--nutui-rate-icon-size, 12px) + scale-px(8px));
+  width: calc(var(--nutui-rate-icon-size, 12px) + scale-px(8px));
 }
 .nut-rate-item-small {
   margin-left: calc(var(--nutui-rate-item-margin, 14px) / 2);
 }
 .nut-rate-item-small .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) - 4px);
-  width: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+  height: calc(var(--nutui-rate-icon-size, 12px) - scale-px(4px));
+  width: calc(var(--nutui-rate-icon-size, 12px) - scale-px(4px));
 }
 .nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
   margin-left: 0;
@@ -86,18 +86,20 @@
   align-items: center;
   color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
   font-family: "JDZH-Regular";
-  line-height: 1;
 }
 .nut-rate-score-normal {
   padding-left: var(--nutui-rate-item-margin, 14px);
   font-size: var(--nutui-rate-font-size, 12px);
+  line-height: var(--nutui-line-height-s, var(--nutui-font-text-small));
 }
 .nut-rate-score-large {
-  font-size: calc(var(--nutui-rate-font-size, 12px) + 6px);
+  font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, 12px) + 6px));
+  line-height: var(--nutui-line-height-xl, var(--nutui-font-h2));
   padding-left: calc(var(--nutui-rate-item-margin, 14px) * 2);
 }
 .nut-rate-score-small {
-  font-size: calc(var(--nutui-rate-font-size, 12px) - 2px);
+  font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, 12px) - 2px));
+  line-height: var(--nutui-line-height-xxs, var(--nutui-font-text-mini));
   padding-left: calc(var(--nutui-rate-item-margin, 14px) / 2);
 }
 .nut-rate-score-disabled {
@@ -122,7 +124,7 @@
 }
 [dir=rtl] .nut-rate-item-small,
 .nut-rtl .nut-rate-item-small {
-  margin-right: calc(var(--nutui-rate-item-margin, 14px) - 2px);
+  margin-right: calc(var(--nutui-rate-item-margin, 14px) - scale-px(2px));
 }
 [dir=rtl] .nut-rate-item:last-child,
 .nut-rtl .nut-rate-item:last-child {
@@ -157,5 +159,5 @@
 }
 [dir=rtl] .nut-rate-score-small,
 .nut-rtl .nut-rate-score-small {
-  padding-right: calc(var(--nutui-rate-item-margin, 14px) - 2px);
+  padding-right: calc(var(--nutui-rate-item-margin, 14px) - scale-px(2px));
 }

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", {

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

@@ -45,7 +45,7 @@
     }
   }
   &-action {
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-left: scale-px(6px);
+    margin-right: scale-px(6px);
   }
 }

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

@@ -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 */
@@ -16,24 +26,24 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 12px);
+  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-resultpage-icon .nut-icon {
-  height: var(--nutui-resultpage-icon-size, 36px);
-  width: var(--nutui-resultpage-icon-size, 36px);
+  height: var(--nutui-resultpage-icon-size, calc(36px * var(--nut-scale-f, 1)));
+  width: var(--nutui-resultpage-icon-size, calc(36px * var(--nut-scale-f, 1)));
 }
 .nut-resultpage-title {
-  width: var(--nutui-resultpage-width, 240px);
-  margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12px);
-  font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18px));
+  width: var(--nutui-resultpage-width, calc(240px * var(--nut-scale-f, 1)));
+  margin-bottom: var(--nutui-resultpage-title-margin-bottom, calc(12px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a));
   font-weight: var(--nutui-font-weight-bold, 600);
   text-align: center;
 }
 .nut-resultpage-description {
-  width: var(--nutui-resultpage-width, 240px);
-  line-height: var(--nutui-resultpage-description-line-height, 20px);
-  font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-resultpage-width, calc(240px * var(--nut-scale-f, 1)));
+  line-height: var(--nutui-resultpage-description-line-height, calc(20px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259));
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -44,12 +54,12 @@
 .nut-resultpage-actions {
   display: flex;
   flex-direction: row;
-  margin-top: var(--nutui-resultpage-actions-margin-top, 16px);
+  margin-top: var(--nutui-resultpage-actions-margin-top, calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-resultpage-actions .nut-button-children {
   white-space: nowrap;
 }
 .nut-resultpage-action {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: calc(6px * var(--nut-scale-f, 1));
+  margin-right: calc(6px * var(--nut-scale-f, 1));
 }

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

@@ -45,7 +45,7 @@
     }
   }
   &-action {
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-left: scale-px(6px);
+    margin-right: scale-px(6px);
   }
 }

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

@@ -50,6 +50,6 @@
   white-space: nowrap;
 }
 .nut-resultpage-action {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: scale-px(6px);
+  margin-right: scale-px(6px);
 }

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

@@ -45,7 +45,7 @@
     }
   }
   &-action {
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-left: scale-px(6px);
+    margin-right: scale-px(6px);
   }
 }

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

@@ -50,6 +50,6 @@
   white-space: nowrap;
 }
 .nut-resultpage-action {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: scale-px(6px);
+  margin-right: scale-px(6px);
 }

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

@@ -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 */

package/dist/es/packages/safearea/safearea.js

@@ -1,18 +1,9 @@
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
-import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import React from "react";
 import classNames from "classnames";
 var classPrefix = 'nut-safe-area';
 export var SafeArea = function(props) {
-    var className = props.className, style = props.style, position = props.position, rest = _object_without_properties(props, [
-        "className",
-        "style",
-        "position"
-    ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, rest), {
-        className: classNames(classPrefix, "".concat(classPrefix, "-position-").concat(position), className),
-        style: style
-    }));
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames(classPrefix, "".concat(classPrefix, "-position-").concat(props.position))
+    });
 };
 SafeArea.displayName = 'NutSafeArea';

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

@@ -3,18 +3,12 @@
   width: 100%;
 
   &-position-top {
-    padding-top: calc(
-      constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-top: calc(
       env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
     );
   }
 
   &-position-bottom {
-    padding-bottom: calc(
-      constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-bottom: calc(
       env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
     );

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

@@ -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 */
@@ -7,10 +17,8 @@
   width: 100%;
 }
 .nut-safe-area-position-top {
-  padding-top: calc(constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
   padding-top: calc(env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
 }
 .nut-safe-area-position-bottom {
-  padding-bottom: calc(constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
   padding-bottom: calc(env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
 }

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

@@ -3,18 +3,12 @@
   width: 100%;
 
   &-position-top {
-    padding-top: calc(
-      constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-top: calc(
       env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
     );
   }
 
   &-position-bottom {
-    padding-bottom: calc(
-      constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-bottom: calc(
       env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
     );

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

@@ -7,10 +7,8 @@
   width: 100%;
 }
 .nut-safe-area-position-top {
-  padding-top: calc(constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
   padding-top: calc(env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
 }
 .nut-safe-area-position-bottom {
-  padding-bottom: calc(constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
   padding-bottom: calc(env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
 }

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

@@ -3,18 +3,12 @@
   width: 100%;
 
   &-position-top {
-    padding-top: calc(
-      constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-top: calc(
       env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
     );
   }
 
   &-position-bottom {
-    padding-bottom: calc(
-      constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-bottom: calc(
       env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
     );

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

@@ -7,10 +7,8 @@
   width: 100%;
 }
 .nut-safe-area-position-top {
-  padding-top: calc(constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
   padding-top: calc(env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
 }
 .nut-safe-area-position-bottom {
-  padding-bottom: calc(constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
   padding-bottom: calc(env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
 }