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

package/dist/es/packages/inputnumber/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 */
@@ -9,24 +19,24 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  width: calc(2 * var(--nutui-inputnumber-input-margin, 0px) + 2 * var(--nutui-inputnumber-button-width, 20px) + var(--nutui-inputnumber-input-width, 26px));
+  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, 4px);
+  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, 20px);
-  height: var(--nutui-inputnumber-button-height, 20px);
-  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 {
-  --nut-icon-width: 10px;
-  --nut-icon-height: 10px;
+  width: calc(10px * var(--nut-scale-f, 1));
+  height: calc(10px * var(--nut-scale-f, 1));
 }
 .nut-inputnumber-icon {
   color: var(--nutui-color-text, #505259);
@@ -36,20 +46,25 @@
   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, 26px);
-  font-size: var(--nutui-inputnumber-input-font-size, var(--nutui-font-size-s, 12px));
-  height: var(--nutui-inputnumber-input-height, 20px);
+  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)))));
+  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);
@@ -61,10 +76,10 @@
   color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-inputnumber-icon-minus {
-  --nut-icon-width: 16px;
-  --nut-icon-height: 16px;
+  width: calc(16px * var(--nut-scale-f, 1));
+  height: calc(16px * var(--nut-scale-f, 1));
 }
 .nut-inputnumber-icon-plus {
-  --nut-icon-width: 16px;
-  --nut-icon-height: 16px;
+  width: calc(16px * var(--nut-scale-f, 1));
+  height: calc(16px * var(--nut-scale-f, 1));
 }

package/dist/es/packages/inputnumber/style/style.harmony.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 */
@@ -9,24 +19,24 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  width: calc(2 * var(--nutui-inputnumber-input-margin, 0px) + 2 * var(--nutui-inputnumber-button-width, 20px) + var(--nutui-inputnumber-input-width, 26px));
+  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, 4px);
+  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, 20px);
-  height: var(--nutui-inputnumber-button-height, 20px);
-  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 {
-  --nut-icon-width: 10px;
-  --nut-icon-height: 10px;
+  width: calc(10px * var(--nut-scale-f, 1));
+  height: calc(10px * var(--nut-scale-f, 1));
 }
 .nut-inputnumber-icon {
   color: var(--nutui-color-text, #505259);
@@ -36,20 +46,25 @@
   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, 26px);
-  font-size: var(--nutui-inputnumber-input-font-size, var(--nutui-font-size-s, 12px));
-  height: var(--nutui-inputnumber-input-height, 20px);
+  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)))));
+  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);
@@ -61,10 +76,10 @@
   color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-inputnumber-icon-minus {
-  --nut-icon-width: 16px;
-  --nut-icon-height: 16px;
+  width: calc(16px * var(--nut-scale-f, 1));
+  height: calc(16px * var(--nut-scale-f, 1));
 }
 .nut-inputnumber-icon-plus {
-  --nut-icon-width: 16px;
-  --nut-icon-height: 16px;
+  width: calc(16px * var(--nut-scale-f, 1));
+  height: calc(16px * var(--nut-scale-f, 1));
 }

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,
@@ -23,8 +23,8 @@
     height: $inputnumber-button-height;
     background-color: $inputnumber-button-background-color;
     .nut-icon {
-      --nut-icon-width: 10px;
-      --nut-icon-height: 10px;
+      width: scale-px(10px);
+      height: scale-px(10px);
     }
   }
 
@@ -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;
     }
@@ -66,12 +72,12 @@
   }
 
   &-icon-minus {
-    --nut-icon-width: 16px;
-    --nut-icon-height: 16px;
+    width: scale-px(16px);
+    height: scale-px(16px);
   }
 
   &-icon-plus {
-    --nut-icon-width: 16px;
-    --nut-icon-height: 16px;
+    width: scale-px(16px);
+    height: scale-px(16px);
   }
 }

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;
 }
@@ -25,8 +25,8 @@
   background-color: var(--nutui-inputnumber-button-background-color, var(--nutui-color-surface-1));
 }
 .nut-inputnumber-minus .nut-icon, .nut-inputnumber-add .nut-icon {
-  --nut-icon-width: 10px;
-  --nut-icon-height: 10px;
+  width: scale-px(10px);
+  height: scale-px(10px);
 }
 .nut-inputnumber-icon {
   color: var(--nutui-color-text);
@@ -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);
@@ -61,10 +66,10 @@
   color: var(--nutui-color-text-disabled);
 }
 .nut-inputnumber-icon-minus {
-  --nut-icon-width: 16px;
-  --nut-icon-height: 16px;
+  width: scale-px(16px);
+  height: scale-px(16px);
 }
 .nut-inputnumber-icon-plus {
-  --nut-icon-width: 16px;
-  --nut-icon-height: 16px;
+  width: scale-px(16px);
+  height: scale-px(16px);
 }

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,
@@ -23,8 +23,8 @@
     height: $inputnumber-button-height;
     background-color: $inputnumber-button-background-color;
     .nut-icon {
-      --nut-icon-width: 10px;
-      --nut-icon-height: 10px;
+      width: scale-px(10px);
+      height: scale-px(10px);
     }
   }
 
@@ -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;
     }
@@ -66,12 +72,12 @@
   }
 
   &-icon-minus {
-    --nut-icon-width: 16px;
-    --nut-icon-height: 16px;
+    width: scale-px(16px);
+    height: scale-px(16px);
   }
 
   &-icon-plus {
-    --nut-icon-width: 16px;
-    --nut-icon-height: 16px;
+    width: scale-px(16px);
+    height: scale-px(16px);
   }
 }

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;
 }
@@ -25,8 +25,8 @@
   background-color: var(--nutui-inputnumber-button-background-color, var(--nutui-color-surface-1));
 }
 .nut-inputnumber-minus .nut-icon, .nut-inputnumber-add .nut-icon {
-  --nut-icon-width: 10px;
-  --nut-icon-height: 10px;
+  width: scale-px(10px);
+  height: scale-px(10px);
 }
 .nut-inputnumber-icon {
   color: var(--nutui-color-text);
@@ -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);
@@ -61,10 +66,10 @@
   color: var(--nutui-color-text-disabled);
 }
 .nut-inputnumber-icon-minus {
-  --nut-icon-width: 16px;
-  --nut-icon-height: 16px;
+  width: scale-px(16px);
+  height: scale-px(16px);
 }
 .nut-inputnumber-icon-plus {
-  --nut-icon-width: 16px;
-  --nut-icon-height: 16px;
+  width: scale-px(16px);
+  height: scale-px(16px);
 }

package/dist/es/packages/layout/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/layout/style/style.harmony.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/loading/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 */
@@ -24,16 +34,16 @@
 }
 .nut-loading .nut-loading-icon-box .nut-loading-icon {
   color: var(--nutui-loading-icon-color, var(--nutui-color-text-help, #888b94));
-  width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
-  height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
-  font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
+  width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-loading .nut-loading-text {
   color: var(--nutui-loading-color, var(--nutui-color-text-help, #888b94));
-  font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-loading-vertical .nut-loading-text {
-  padding-top: var(--nutui-spacing-base, 8px);
+  padding-top: var(--nutui-spacing-base, calc(8px * var(--nut-scale-f, 1)));
 }
 
 @keyframes nut-loading-rotation {

package/dist/es/packages/loading/style/style.harmony.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 */
@@ -24,16 +34,16 @@
 }
 .nut-loading .nut-loading-icon-box .nut-loading-icon {
   color: var(--nutui-loading-icon-color, var(--nutui-color-text-help, #888b94));
-  width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
-  height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
-  font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
+  width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-loading .nut-loading-text {
   color: var(--nutui-loading-color, var(--nutui-color-text-help, #888b94));
-  font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-loading-vertical .nut-loading-text {
-  padding-top: var(--nutui-spacing-base, 8px);
+  padding-top: var(--nutui-spacing-base, calc(8px * var(--nut-scale-f, 1)));
 }
 
 @keyframes nut-loading-rotation {

package/dist/es/packages/lottie/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/lottie/style/style.harmony.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/menu/menu.js

@@ -118,13 +118,9 @@ export var Menu = function(props) {
                     if (titleIcon) return titleIcon;
                     if (icon) return icon;
                     return direction === 'up' ? /*#__PURE__*/ React.createElement(ArrowUp, {
-                        className: "nut-menu-title-icon",
-                        width: "12px",
-                        height: "12px"
+                        className: "nut-menu-title-icon"
                     }) : /*#__PURE__*/ React.createElement(ArrowDown, {
-                        className: "nut-menu-title-icon",
-                        width: "12px",
-                        height: "12px"
+                        className: "nut-menu-title-icon"
                     });
                 };
                 return /*#__PURE__*/ React.createElement(View, {

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

@@ -41,6 +41,8 @@
   }
 
   &-icon {
+    width: $icon-size-12;
+    height: $icon-size-12;
     flex-shrink: 0;
     transition: all 0.2s linear;
   }