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

package/dist/cjs/packages/swipe/swipe.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "Swipe", {
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
+var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
@@ -20,15 +21,15 @@ var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames")
 var _components = require("@tarojs/components");
 var _taro = require("@tarojs/taro");
 var _usetouch = require("../../hooks/use-touch");
-var _getrect = require("../../utils/taro/get-rect");
 var _typings = require("../../utils/typings");
+var _platform = require("../../utils/taro/platform");
 var _userefstate = require("../../hooks/use-ref-state");
 var _useuuid = require("../../hooks/use-uuid");
 function preventDefault(event, isStopPropagation) {
-    if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    if (event.preventDefault && (typeof event.cancelable !== 'boolean' || event.cancelable)) {
         event.preventDefault();
     }
-    if (isStopPropagation) {
+    if (isStopPropagation && event.stopPropagation) {
         event.stopPropagation();
     }
 }
@@ -41,44 +42,73 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
     var uid = (0, _useuuid.useUuid)();
     var leftId = "swipe-left-".concat(uid);
     var rightId = "swipe-right-".concat(uid);
-    var getWidth = function getWidth() {
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style;
+    var root = (0, _react.useRef)();
+    var opened = (0, _react.useRef)(false);
+    var lockClick = (0, _react.useRef)(false);
+    var startOffset = (0, _react.useRef)(0);
+    var leftWrapper = (0, _react.useRef)(null);
+    var rightWrapper = (0, _react.useRef)(null);
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)({
+        offset: 0,
+        dragging: false
+    }), 2), state = _useState[0], setState = _useState[1];
+    var _useRefState = (0, _sliced_to_array._)((0, _userefstate.useRefState)({
+        left: 0,
+        right: 0
+    }), 2), actionWidth = _useRefState[0], updateState = _useRefState[1];
+    var setActionWidth = (0, _react.useCallback)(function(side, width) {
+        if (actionWidth.current[side] === width) return;
+        updateState((0, _object_spread_props._)((0, _object_spread._)({}, actionWidth.current), (0, _define_property._)({}, side, width)));
+    }, [
+        actionWidth,
+        updateState
+    ]);
+    var getActionRect = function getActionRect(element, id) {
+        return new Promise(function(resolve) {
+            if (!element) {
+                resolve(null);
+                return;
+            }
+            var query = (0, _taro.createSelectorQuery)();
+            var scope = element === null || element === void 0 ? void 0 : element._scope;
+            var scopedQuery = scope ? query.in(scope) : query;
+            scopedQuery.select("#".concat(id)).boundingClientRect().exec(function() {
+                var rect = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+                resolve(rect[0] || null);
+            });
+        });
+    };
+    var getWidth = (0, _react.useCallback)(function() {
         return (0, _async_to_generator._)(function() {
             var leftRect, rightRect;
             return (0, _ts_generator._)(this, function(_state) {
                 switch(_state.label){
                     case 0:
-                        if (!leftWrapper.current) return [
+                        if (!props.leftAction) return [
                             3,
                             2
                         ];
                         return [
                             4,
-                            (0, _getrect.getRectInMultiPlatform)(leftWrapper.current, leftId)
+                            getActionRect(leftWrapper.current, leftId)
                         ];
                     case 1:
                         leftRect = _state.sent();
-                        leftRect && setActionWidth(function(v) {
-                            return (0, _object_spread_props._)((0, _object_spread._)({}, v), {
-                                left: leftRect.width
-                            });
-                        });
+                        leftRect && setActionWidth('left', leftRect.width);
                         _state.label = 2;
                     case 2:
-                        if (!rightWrapper.current) return [
+                        if (!props.rightAction) return [
                             3,
                             4
                         ];
                         return [
                             4,
-                            (0, _getrect.getRectInMultiPlatform)(rightWrapper.current, rightId)
+                            getActionRect(rightWrapper.current, rightId)
                         ];
                     case 3:
                         rightRect = _state.sent();
-                        rightRect && setActionWidth(function(v) {
-                            return (0, _object_spread_props._)((0, _object_spread._)({}, v), {
-                                right: rightRect.width
-                            });
-                        });
+                        rightRect && setActionWidth('right', rightRect.width);
                         _state.label = 4;
                     case 4:
                         return [
@@ -87,48 +117,29 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
                 }
             });
         })();
-    };
-    // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期
+    }, [
+        leftId,
+        props.leftAction,
+        props.rightAction,
+        rightId,
+        setActionWidth
+    ]);
+    var getWidthRef = (0, _react.useRef)(getWidth);
+    (0, _react.useEffect)(function() {
+        getWidthRef.current = getWidth;
+    }, [
+        getWidth
+    ]);
+    // 页面 ready 后测量操作区域宽度，宽度未变化时不触发更新。
     (0, _taro.useReady)(function() {
         (0, _taro.nextTick)(function() {
-            return getWidth();
+            getWidthRef.current();
         });
     });
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style;
-    var root = (0, _react.useRef)();
-    var opened = (0, _react.useRef)(false);
-    var lockClick = (0, _react.useRef)(false);
-    var startOffset = (0, _react.useRef)(0);
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)({
-        offset: 0,
-        dragging: false
-    }), 2), state = _useState[0], setState = _useState[1];
-    var _useRefState = (0, _sliced_to_array._)((0, _userefstate.useRefState)({
-        left: 0,
-        right: 0
-    }), 2), actionWidth = _useRefState[0], updateState = _useRefState[1];
-    var setActionWidth = function setActionWidth(fn) {
-        var res = fn();
-        if (res.left !== undefined) {
-            updateState((0, _object_spread_props._)((0, _object_spread._)({}, actionWidth.current), {
-                left: res.left
-            }));
-        }
-        if (res.right !== undefined) {
-            updateState((0, _object_spread_props._)((0, _object_spread._)({}, actionWidth.current), {
-                right: res.right
-            }));
-        }
+    var wrapperStyle = {
+        transform: "translate(".concat(state.offset).concat(!(0, _platform.harmony)() ? 'px' : '', ", 0)"),
+        transitionDuration: state.dragging ? '0s' : '.6s'
     };
-    var wrapperStyle = (0, _react.useMemo)(function() {
-        return {
-            transform: "translate(".concat(state.offset, "px, 0)"),
-            transitionDuration: state.dragging ? '0.01s' : '.6s'
-        };
-    }, [
-        state.offset,
-        state.dragging
-    ]);
     var onTouchStart = function onTouchStart(event) {
         return (0, _async_to_generator._)(function() {
             var _props_onTouchStart;
@@ -148,29 +159,29 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
     };
     var onTouchMove = function onTouchMove(event) {
         var _props_onTouchMove;
-        if (props.disabled) return;
+        if (props.disabled) {
+            return;
+        }
         touch.move(event);
         (_props_onTouchMove = props.onTouchMove) === null || _props_onTouchMove === void 0 ? void 0 : _props_onTouchMove.call(props, event);
         if (touch.isHorizontal()) {
             lockClick.current = true;
+            var newState = (0, _object_spread_props._)((0, _object_spread._)({}, state), {
+                dragging: true
+            });
             var isEdge = !opened || touch.deltaX.current * startOffset.current < 0;
             if (isEdge) {
                 preventDefault(event, true);
             }
-            var offset = rangeCalculation(touch.deltaX.current + startOffset.current, -actionWidth.current.right || 0, actionWidth.current.left || 0);
-            setState(function(prevState) {
-                return (0, _object_spread_props._)((0, _object_spread._)({}, prevState), {
-                    dragging: true,
-                    offset: Number(offset) || 0
-                });
-            });
+            newState.offset = rangeCalculation(touch.deltaX.current + startOffset.current, -actionWidth.current.right || 0, actionWidth.current.left || 0);
+            setState(newState);
         }
     };
     var onTouchEnd = function onTouchEnd(event) {
         if (state.dragging) {
             var _props_onTouchEnd;
-            setState(function(prevState) {
-                return (0, _object_spread_props._)((0, _object_spread._)({}, prevState), {
+            setState(function(v) {
+                return (0, _object_spread_props._)((0, _object_spread._)({}, v), {
                     dragging: false
                 });
             });
@@ -201,13 +212,13 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
             name: name,
             position: side
         });
-        setState(function(prevState) {
-            return (0, _object_spread_props._)((0, _object_spread._)({}, prevState), {
+        setState(function(v) {
+            return (0, _object_spread_props._)((0, _object_spread._)({}, v), {
                 offset: Number(offset) || 0
             });
         });
     };
-    var close = (0, _react.useCallback)(function(position) {
+    var close = function close(position) {
         if (opened.current) {
             var _props_onClose;
             opened.current = false;
@@ -216,19 +227,15 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
                 position: position || 'left'
             });
         }
-        setState(function(prevState) {
-            return (0, _object_spread_props._)((0, _object_spread._)({}, prevState), {
+        setState(function(v) {
+            return (0, _object_spread_props._)((0, _object_spread._)({}, v), {
                 offset: 0
             });
         });
-    }, [
-        props
-    ]);
+    };
     var rangeCalculation = function rangeCalculation(num, min, max) {
         return Math.min(Math.max(Number(num), Number(min)), Number(max));
     };
-    var leftWrapper = (0, _react.useRef)(null);
-    var rightWrapper = (0, _react.useRef)(null);
     var renderActionContent = function renderActionContent(side) {
         if (props["".concat(side, "Action")]) {
             return /*#__PURE__*/ _react.default.createElement(_components.View, {
@@ -260,7 +267,7 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
         };
     });
     (0, _react.useEffect)(function() {
-        // 并没有生效
+        if ((0, _platform.harmony)()) return;
         var handler = function handler(event) {
             var targets = [
                 root
@@ -277,9 +284,7 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
         return function() {
             document.removeEventListener('touchstart', handler);
         };
-    }, [
-        close
-    ]);
+    }, []);
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         ref: root,
         className: (0, _classnames.default)(classPrefix, className),

package/dist/cjs/packages/swiper/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 */
@@ -19,16 +29,16 @@
   flex-direction: row;
   justify-content: center;
   position: absolute;
-  height: 4px;
+  height: calc(4px * var(--nut-scale-f, 1));
   width: 100%;
   top: 89.33%;
   z-index: 10;
 }
 .nut-swiper-indicator-vertical {
-  width: 8px;
+  width: calc(8px * var(--nut-scale-f, 1));
   height: 100%;
   top: 0;
-  left: 12px;
+  left: calc(12px * var(--nut-scale-f, 1));
   flex-direction: column;
   justify-content: center;
   z-index: 1;
@@ -64,5 +74,5 @@
 [dir=rtl] .nut-swiper-indicator-vertical,
 .nut-rtl .nut-swiper-indicator-vertical {
   left: auto;
-  right: 12px;
+  right: calc(12px * var(--nut-scale-f, 1));
 }

package/dist/cjs/packages/swiper/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 */
@@ -15,25 +25,25 @@
 .nut-indicator-dot, .nut-indicator-line {
   display: inline-block;
   vertical-align: middle;
-  width: var(--nutui-indicator-dot-size, 3px);
-  height: var(--nutui-indicator-dot-size, 3px);
+  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
   border-radius: 50%;
   background-color: var(--nutui-color-border-disabled, #c2c4cc);
-  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
+  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
   opacity: 0.4;
 }
 .nut-indicator-dot-0, .nut-indicator-line-0 {
   margin-left: 0px;
 }
 .nut-indicator-dot-active, .nut-indicator-line-active {
-  width: var(--nutui-indicator-dot-active-size, 6px);
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  width: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
   opacity: 1;
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
   width: 12px;
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-fixed-width .nut-indicator-dot-active {
   width: 6px;
@@ -46,7 +56,7 @@
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot {
   width: 3px;
   height: 12px;
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
   height: 6px;
@@ -55,9 +65,9 @@
   height: 6px;
 }
 .nut-indicator-line {
-  width: var(--nutui-indicator-dot-active-size, 6px);
+  width: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
   margin: 0;
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background-color: transparent;
 }
 .nut-indicator-line-active {
@@ -75,7 +85,7 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background-color: var(--nutui-color-border-disabled, #c2c4cc);
   opacity: 0.4;
 }
@@ -112,23 +122,23 @@
 }
 .nut-indicator-vertical .nut-indicator-dot {
   margin: 0px;
-  margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
+  margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-vertical .nut-indicator-dot-0 {
   margin-top: 0px;
 }
 .nut-indicator-vertical .nut-indicator-dot-active {
-  width: var(--nutui-indicator-dot-size, 3px);
-  height: var(--nutui-indicator-dot-active-size, 6px);
+  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-vertical.nut-indicator-track .nut-indicator-line {
-  width: var(--nutui-indicator-dot-size, 3px);
-  height: var(--nutui-indicator-dot-active-size, 6px);
+  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
 }
 
 [dir=rtl] .nut-indicator-dot-0,
 .nut-rtl .nut-indicator-dot-0 {
-  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
+  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
   margin-left: 0px;
 }
 
@@ -149,16 +159,16 @@
   flex-direction: row;
   justify-content: center;
   position: absolute;
-  height: 4px;
+  height: calc(4px * var(--nut-scale-f, 1));
   width: 100%;
   top: 89.33%;
   z-index: 10;
 }
 .nut-swiper-indicator-vertical {
-  width: 8px;
+  width: calc(8px * var(--nut-scale-f, 1));
   height: 100%;
   top: 0;
-  left: 12px;
+  left: calc(12px * var(--nut-scale-f, 1));
   flex-direction: column;
   justify-content: center;
   z-index: 1;
@@ -194,5 +204,5 @@
 [dir=rtl] .nut-swiper-indicator-vertical,
 .nut-rtl .nut-swiper-indicator-vertical {
   left: auto;
-  right: 12px;
+  right: calc(12px * var(--nut-scale-f, 1));
 }

package/dist/cjs/packages/swiper/style/swiper.scss

@@ -17,17 +17,17 @@
     flex-direction: row;
     justify-content: center;
     position: absolute;
-    height: 4px;
+    height: scale-px(4px);
     width: 100%;
     top: 89.33%;
     z-index: 10;
   }
 
   &-indicator-vertical {
-    width: 8px;
+    width: scale-px(8px);
     height: 100%;
     top: 0;
-    left: 12px;
+    left: scale-px(12px);
     flex-direction: column;
     justify-content: center;
     z-index: 1;
@@ -66,6 +66,6 @@
 
   &-indicator-vertical {
     left: auto;
-    right: 12px;
+    right: scale-px(12px);
   }
 }

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

@@ -19,16 +19,16 @@
   flex-direction: row;
   justify-content: center;
   position: absolute;
-  height: 4px;
+  height: scale-px(4px);
   width: 100%;
   top: 89.33%;
   z-index: 10;
 }
 .nut-swiper-indicator-vertical {
-  width: 8px;
+  width: scale-px(8px);
   height: 100%;
   top: 0;
-  left: 12px;
+  left: scale-px(12px);
   flex-direction: column;
   justify-content: center;
   z-index: 1;
@@ -64,5 +64,5 @@
 [dir=rtl] .nut-swiper-indicator-vertical,
 .nut-rtl .nut-swiper-indicator-vertical {
   left: auto;
-  right: 12px;
+  right: scale-px(12px);
 }

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

@@ -17,17 +17,17 @@
     flex-direction: row;
     justify-content: center;
     position: absolute;
-    height: 4px;
+    height: scale-px(4px);
     width: 100%;
     top: 89.33%;
     z-index: 10;
   }
 
   &-indicator-vertical {
-    width: 8px;
+    width: scale-px(8px);
     height: 100%;
     top: 0;
-    left: 12px;
+    left: scale-px(12px);
     flex-direction: column;
     justify-content: center;
     z-index: 1;
@@ -66,6 +66,6 @@
 
   &-indicator-vertical {
     left: auto;
-    right: 12px;
+    right: scale-px(12px);
   }
 }

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

@@ -19,16 +19,16 @@
   flex-direction: row;
   justify-content: center;
   position: absolute;
-  height: 4px;
+  height: scale-px(4px);
   width: 100%;
   top: 89.33%;
   z-index: 10;
 }
 .nut-swiper-indicator-vertical {
-  width: 8px;
+  width: scale-px(8px);
   height: 100%;
   top: 0;
-  left: 12px;
+  left: scale-px(12px);
   flex-direction: column;
   justify-content: center;
   z-index: 1;
@@ -64,5 +64,5 @@
 [dir=rtl] .nut-swiper-indicator-vertical,
 .nut-rtl .nut-swiper-indicator-vertical {
   left: auto;
-  right: 12px;
+  right: scale-px(12px);
 }

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

@@ -17,17 +17,17 @@
     flex-direction: row;
     justify-content: center;
     position: absolute;
-    height: 4px;
+    height: scale-px(4px);
     width: 100%;
     top: 89.33%;
     z-index: 10;
   }
 
   &-indicator-vertical {
-    width: 8px;
+    width: scale-px(8px);
     height: 100%;
     top: 0;
-    left: 12px;
+    left: scale-px(12px);
     flex-direction: column;
     justify-content: center;
     z-index: 1;
@@ -66,6 +66,6 @@
 
   &-indicator-vertical {
     left: auto;
-    right: 12px;
+    right: scale-px(12px);
   }
 }

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