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

package/dist/cjs/packages/calendarcard/style/style.css

@@ -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-calendarcard {
   background: var(--nutui-color-background-overlay, #ffffff);
-  border-radius: 12px;
+  border-radius: calc(12px * var(--nut-scale-f, 1));
   overflow: hidden;
-  font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15px));
+  font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-calendarcard-header {
@@ -15,23 +25,23 @@
   align-items: center;
   justify-content: space-between;
   font-weight: normal;
+  line-height: var(--nutui-line-height-l, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-calendarcard-header-left, .nut-calendarcard-header-right {
   display: flex;
   flex-direction: row;
   cursor: pointer;
-  margin: 16px;
-  line-height: 1;
+  margin: calc(16px * var(--nut-scale-f, 1));
 }
 .nut-calendarcard-header-left .left, .nut-calendarcard-header-right .left {
-  margin-left: 8px;
+  margin-left: calc(8px * var(--nut-scale-f, 1));
 }
 .nut-calendarcard-header-left .right, .nut-calendarcard-header-right .right {
-  margin-right: 8px;
+  margin-right: calc(8px * var(--nut-scale-f, 1));
 }
 .nut-calendarcard-icon {
-  width: 18px;
-  height: 18px;
+  width: calc(18px * var(--nut-scale-f, 1));
+  height: calc(18px * var(--nut-scale-f, 1));
   display: block;
 }
 .nut-calendarcard-days {
@@ -47,9 +57,9 @@
   flex-direction: column;
   position: relative;
   width: var(--nutui-calendar-day-width, 14.28%);
-  height: 48px;
+  height: calc(48px * var(--nut-scale-f, 1));
   cursor: pointer;
-  margin-bottom: 4px;
+  margin-bottom: calc(4px * var(--nut-scale-f, 1));
   text-align: center;
 }
 .nut-calendarcard-day-top, .nut-calendarcard-day-inner, .nut-calendarcard-day-bottom {
@@ -63,9 +73,9 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 12px;
-  font-size: 12px;
-  line-height: 12px;
+  height: calc(12px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: calc(12px * var(--nut-scale-f, 1));
 }
 .nut-calendarcard-day.weekend {
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23));
@@ -77,7 +87,7 @@
 }
 .nut-calendarcard-day.active {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23));
-  border-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-calendarcard-day.active .nut-calendarcard-day-top,
 .nut-calendarcard-day.active .nut-calendarcard-day-inner,
@@ -95,15 +105,15 @@
   color: #ffffff;
 }
 .nut-calendarcard-day.start {
-  border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
-  border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-top-left-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-calendarcard-day.end {
-  border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
-  border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-top-right-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-calendarcard-day.mid {
-  background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffe8ee));
 }
 .nut-calendarcard-day.mid .nut-calendarcard-day-top,
 .nut-calendarcard-day.mid .nut-calendarcard-day-inner,
@@ -130,13 +140,13 @@
 .nut-rtl .nut-calendarcard-header-left .left,
 .nut-rtl .nut-calendarcard-header-right .left {
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: calc(8px * var(--nut-scale-f, 1));
 }
 [dir=rtl] .nut-calendarcard-header-left .right, [dir=rtl] .nut-calendarcard-header-right .right,
 .nut-rtl .nut-calendarcard-header-left .right,
 .nut-rtl .nut-calendarcard-header-right .right {
   margin-right: 0;
-  margin-left: 8px;
+  margin-left: calc(8px * var(--nut-scale-f, 1));
 }
 [dir=rtl] .nut-calendarcard-header-left .nut-icon-ArrowLeft,
 [dir=rtl] .nut-calendarcard-header-left .nut-icon-ArrowRight,
@@ -158,11 +168,11 @@
 }
 [dir=rtl] .nut-calendarcard-day.start,
 .nut-rtl .nut-calendarcard-day.start {
-  border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
-  border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-top-right-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-calendarcard-day.end,
 .nut-rtl .nut-calendarcard-day.end {
-  border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
-  border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-top-left-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }

package/dist/cjs/packages/calendarcard/style/style.harmony.css

@@ -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-calendarcard {
   background: var(--nutui-color-background-overlay, #ffffff);
-  border-radius: 12px;
+  border-radius: calc(12px * var(--nut-scale-f, 1));
   overflow: hidden;
-  font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15px));
+  font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-calendarcard-header {
@@ -15,23 +25,23 @@
   align-items: center;
   justify-content: space-between;
   font-weight: normal;
+  line-height: var(--nutui-line-height-l, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-calendarcard-header-left, .nut-calendarcard-header-right {
   display: flex;
   flex-direction: row;
   cursor: pointer;
-  margin: 16px;
-  line-height: 1;
+  margin: calc(16px * var(--nut-scale-f, 1));
 }
 .nut-calendarcard-header-left .left, .nut-calendarcard-header-right .left {
-  margin-left: 8px;
+  margin-left: calc(8px * var(--nut-scale-f, 1));
 }
 .nut-calendarcard-header-left .right, .nut-calendarcard-header-right .right {
-  margin-right: 8px;
+  margin-right: calc(8px * var(--nut-scale-f, 1));
 }
 .nut-calendarcard-icon {
-  width: 18px;
-  height: 18px;
+  width: calc(18px * var(--nut-scale-f, 1));
+  height: calc(18px * var(--nut-scale-f, 1));
   display: block;
 }
 .nut-calendarcard-days {
@@ -47,9 +57,9 @@
   flex-direction: column;
   position: relative;
   width: var(--nutui-calendar-day-width, 14.28%);
-  height: 48px;
+  height: calc(48px * var(--nut-scale-f, 1));
   cursor: pointer;
-  margin-bottom: 4px;
+  margin-bottom: calc(4px * var(--nut-scale-f, 1));
   text-align: center;
 }
 .nut-calendarcard-day-top, .nut-calendarcard-day-inner, .nut-calendarcard-day-bottom {
@@ -63,9 +73,9 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 12px;
-  font-size: 12px;
-  line-height: 12px;
+  height: calc(12px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: calc(12px * var(--nut-scale-f, 1));
 }
 .nut-calendarcard-day.weekend {
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23));
@@ -77,7 +87,7 @@
 }
 .nut-calendarcard-day.active {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23));
-  border-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-calendarcard-day.active .nut-calendarcard-day-top,
 .nut-calendarcard-day.active .nut-calendarcard-day-inner,
@@ -95,15 +105,15 @@
   color: #ffffff;
 }
 .nut-calendarcard-day.start {
-  border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
-  border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-top-left-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-calendarcard-day.end {
-  border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
-  border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-top-right-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-calendarcard-day.mid {
-  background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffe8ee));
 }
 .nut-calendarcard-day.mid .nut-calendarcard-day-top,
 .nut-calendarcard-day.mid .nut-calendarcard-day-inner,
@@ -130,13 +140,13 @@
 .nut-rtl .nut-calendarcard-header-left .left,
 .nut-rtl .nut-calendarcard-header-right .left {
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: calc(8px * var(--nut-scale-f, 1));
 }
 [dir=rtl] .nut-calendarcard-header-left .right, [dir=rtl] .nut-calendarcard-header-right .right,
 .nut-rtl .nut-calendarcard-header-left .right,
 .nut-rtl .nut-calendarcard-header-right .right {
   margin-right: 0;
-  margin-left: 8px;
+  margin-left: calc(8px * var(--nut-scale-f, 1));
 }
 [dir=rtl] .nut-calendarcard-header-left .nut-icon-ArrowLeft,
 [dir=rtl] .nut-calendarcard-header-left .nut-icon-ArrowRight,
@@ -158,11 +168,11 @@
 }
 [dir=rtl] .nut-calendarcard-day.start,
 .nut-rtl .nut-calendarcard-day.start {
-  border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
-  border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-top-right-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-calendarcard-day.end,
 .nut-rtl .nut-calendarcard-day.end {
-  border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
-  border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4px);
+  border-top-left-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
+  border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, calc(4px * var(--nut-scale-f, 1)));
 }

package/dist/cjs/packages/calendarcard/style-jmapp/calendarcard.scss

@@ -1,6 +1,6 @@
 .nut-calendarcard {
   background: $color-background-overlay;
-  border-radius: 12px;
+  border-radius: scale-px(12px);
   overflow: hidden;
   font-size: $calendar-base-font-size;
   color: $color-title;
@@ -11,28 +11,28 @@
     align-items: center;
     justify-content: space-between;
     font-weight: normal;
+    line-height: $line-height-l;
 
     &-left,
     &-right {
       display: flex;
       flex-direction: row;
       cursor: pointer;
-      margin: 16px;
-      line-height: 1;
+      margin: scale-px(16px);
 
       .left {
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
 
       .right {
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
     }
   }
 
   &-icon {
-    width: 18px;
-    height: 18px;
+    width: scale-px(18px);
+    height: scale-px(18px);
     display: block;
   }
 
@@ -50,9 +50,9 @@
     flex-direction: column;
     position: relative;
     width: $calendar-day-width;
-    height: 48px;
+    height: scale-px(48px);
     cursor: pointer;
-    margin-bottom: 4px;
+    margin-bottom: scale-px(4px);
     text-align: center;
 
     // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。
@@ -72,9 +72,9 @@
       align-items: center;
       justify-content: center;
       width: 100%;
-      height: 12px;
-      font-size: 12px;
-      line-height: 12px;
+      height: scale-px(12px);
+      font-size: $font-size-s;
+      line-height: scale-px(12px);
     }
 
     &.weekend {
@@ -151,12 +151,12 @@
     &-right {
       .left {
         margin-left: 0;
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
 
       .right {
         margin-right: 0;
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
 
       .nut-icon-ArrowLeft,

package/dist/cjs/packages/calendarcard/style-jmapp/style.css

@@ -4,7 +4,7 @@
 /* #endif */
 .nut-calendarcard {
   background: var(--nutui-color-surface-2);
-  border-radius: 12px;
+  border-radius: scale-px(12px);
   overflow: hidden;
   font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-text-large));
   color: var(--nutui-color-title);
@@ -15,23 +15,23 @@
   align-items: center;
   justify-content: space-between;
   font-weight: normal;
+  line-height: var(--nutui-line-height-l, var(--nutui-font-text-large));
 }
 .nut-calendarcard-header-left, .nut-calendarcard-header-right {
   display: flex;
   flex-direction: row;
   cursor: pointer;
-  margin: 16px;
-  line-height: 1;
+  margin: scale-px(16px);
 }
 .nut-calendarcard-header-left .left, .nut-calendarcard-header-right .left {
-  margin-left: 8px;
+  margin-left: scale-px(8px);
 }
 .nut-calendarcard-header-left .right, .nut-calendarcard-header-right .right {
-  margin-right: 8px;
+  margin-right: scale-px(8px);
 }
 .nut-calendarcard-icon {
-  width: 18px;
-  height: 18px;
+  width: scale-px(18px);
+  height: scale-px(18px);
   display: block;
 }
 .nut-calendarcard-days {
@@ -47,9 +47,9 @@
   flex-direction: column;
   position: relative;
   width: var(--nutui-calendar-day-width, 14.28%);
-  height: 48px;
+  height: scale-px(48px);
   cursor: pointer;
-  margin-bottom: 4px;
+  margin-bottom: scale-px(4px);
   text-align: center;
 }
 .nut-calendarcard-day-top, .nut-calendarcard-day-inner, .nut-calendarcard-day-bottom {
@@ -63,9 +63,9 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 12px;
-  font-size: 12px;
-  line-height: 12px;
+  height: scale-px(12px);
+  font-size: var(--nutui-font-text-small);
+  line-height: scale-px(12px);
 }
 .nut-calendarcard-day.weekend {
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary));
@@ -130,13 +130,13 @@
 .nut-rtl .nut-calendarcard-header-left .left,
 .nut-rtl .nut-calendarcard-header-right .left {
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: scale-px(8px);
 }
 [dir=rtl] .nut-calendarcard-header-left .right, [dir=rtl] .nut-calendarcard-header-right .right,
 .nut-rtl .nut-calendarcard-header-left .right,
 .nut-rtl .nut-calendarcard-header-right .right {
   margin-right: 0;
-  margin-left: 8px;
+  margin-left: scale-px(8px);
 }
 [dir=rtl] .nut-calendarcard-header-left .nut-icon-ArrowLeft,
 [dir=rtl] .nut-calendarcard-header-left .nut-icon-ArrowRight,

package/dist/cjs/packages/calendarcard/style-jrkf/calendarcard.scss

@@ -1,6 +1,6 @@
 .nut-calendarcard {
   background: $color-background-overlay;
-  border-radius: 12px;
+  border-radius: scale-px(12px);
   overflow: hidden;
   font-size: $calendar-base-font-size;
   color: $color-title;
@@ -11,28 +11,28 @@
     align-items: center;
     justify-content: space-between;
     font-weight: normal;
+    line-height: $line-height-l;
 
     &-left,
     &-right {
       display: flex;
       flex-direction: row;
       cursor: pointer;
-      margin: 16px;
-      line-height: 1;
+      margin: scale-px(16px);
 
       .left {
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
 
       .right {
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
     }
   }
 
   &-icon {
-    width: 18px;
-    height: 18px;
+    width: scale-px(18px);
+    height: scale-px(18px);
     display: block;
   }
 
@@ -50,9 +50,9 @@
     flex-direction: column;
     position: relative;
     width: $calendar-day-width;
-    height: 48px;
+    height: scale-px(48px);
     cursor: pointer;
-    margin-bottom: 4px;
+    margin-bottom: scale-px(4px);
     text-align: center;
 
     // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。
@@ -72,9 +72,9 @@
       align-items: center;
       justify-content: center;
       width: 100%;
-      height: 12px;
-      font-size: 12px;
-      line-height: 12px;
+      height: scale-px(12px);
+      font-size: $font-size-s;
+      line-height: scale-px(12px);
     }
 
     &.weekend {
@@ -151,12 +151,12 @@
     &-right {
       .left {
         margin-left: 0;
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
 
       .right {
         margin-right: 0;
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
 
       .nut-icon-ArrowLeft,

package/dist/cjs/packages/calendarcard/style-jrkf/style.css

@@ -4,7 +4,7 @@
 /* #endif */
 .nut-calendarcard {
   background: var(--nutui-color-surface-2);
-  border-radius: 12px;
+  border-radius: scale-px(12px);
   overflow: hidden;
   font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-text-large));
   color: var(--nutui-color-title);
@@ -15,23 +15,23 @@
   align-items: center;
   justify-content: space-between;
   font-weight: normal;
+  line-height: var(--nutui-line-height-l, var(--nutui-font-text-large));
 }
 .nut-calendarcard-header-left, .nut-calendarcard-header-right {
   display: flex;
   flex-direction: row;
   cursor: pointer;
-  margin: 16px;
-  line-height: 1;
+  margin: scale-px(16px);
 }
 .nut-calendarcard-header-left .left, .nut-calendarcard-header-right .left {
-  margin-left: 8px;
+  margin-left: scale-px(8px);
 }
 .nut-calendarcard-header-left .right, .nut-calendarcard-header-right .right {
-  margin-right: 8px;
+  margin-right: scale-px(8px);
 }
 .nut-calendarcard-icon {
-  width: 18px;
-  height: 18px;
+  width: scale-px(18px);
+  height: scale-px(18px);
   display: block;
 }
 .nut-calendarcard-days {
@@ -47,9 +47,9 @@
   flex-direction: column;
   position: relative;
   width: var(--nutui-calendar-day-width, 14.28%);
-  height: 48px;
+  height: scale-px(48px);
   cursor: pointer;
-  margin-bottom: 4px;
+  margin-bottom: scale-px(4px);
   text-align: center;
 }
 .nut-calendarcard-day-top, .nut-calendarcard-day-inner, .nut-calendarcard-day-bottom {
@@ -63,9 +63,9 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 12px;
-  font-size: 12px;
-  line-height: 12px;
+  height: scale-px(12px);
+  font-size: var(--nutui-font-text-small);
+  line-height: scale-px(12px);
 }
 .nut-calendarcard-day.weekend {
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff6666));
@@ -130,13 +130,13 @@
 .nut-rtl .nut-calendarcard-header-left .left,
 .nut-rtl .nut-calendarcard-header-right .left {
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: scale-px(8px);
 }
 [dir=rtl] .nut-calendarcard-header-left .right, [dir=rtl] .nut-calendarcard-header-right .right,
 .nut-rtl .nut-calendarcard-header-left .right,
 .nut-rtl .nut-calendarcard-header-right .right {
   margin-right: 0;
-  margin-left: 8px;
+  margin-left: scale-px(8px);
 }
 [dir=rtl] .nut-calendarcard-header-left .nut-icon-ArrowLeft,
 [dir=rtl] .nut-calendarcard-header-left .nut-icon-ArrowRight,

package/dist/cjs/packages/calendaritem/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/cjs/packages/calendaritem/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 */