@nutui/nutui-react 2.4.0 → 2.4.1

package/dist/locales/tr-TR.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:23:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:52:07 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:23:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:52:07 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:23:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:52:07 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-UG.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:23:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:52:07 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:22:38 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:51:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -1197,7 +1197,7 @@ const Button = React__default.forwardRef(
             [`${prefixCls$2}-${size}`]: size,
             [`${prefixCls$2}-${shape}`]: shape,
             [`${prefixCls$2}-block`]: block,
-            [`${prefixCls$2}-disabled`]: disabled,
+            [`${prefixCls$2}-disabled`]: disabled || loading,
             [`${prefixCls$2}-loading`]: loading
           },
           className
@@ -11113,19 +11113,33 @@ const defaultProps$1b = {
   max: 99,
   top: "4",
   right: "8",
-  color: ""
+  color: "",
+  fill: "solid"
 };
 const Badge = (props) => {
   var _a;
   const rtl = useRtl();
-  const { className, style, value, max, children, dot, top, right, color } = {
+  const {
+    className,
+    style,
+    value,
+    max,
+    children,
+    dot,
+    top,
+    right,
+    color,
+    fill
+  } = {
     ...defaultProps$1b,
     ...props
   };
   const classPrefix2 = "nut-badge";
-  const classes = classNames(classPrefix2, className);
+  const classes = classNames(classPrefix2, className, {
+    [`${classPrefix2}-${fill}`]: fill === "outline"
+  });
   function content() {
-    if (dot || typeof value === "object")
+    if (dot || typeof value === "object" || value === 0)
       return null;
     if (typeof value === "number" && typeof max === "number") {
       return max < value ? `${max}+` : `${value}`;
@@ -11157,7 +11171,18 @@ const Badge = (props) => {
     style2.top = `${Number(top) || parseFloat(String(top)) || 0}px`;
     const dir = rtl ? "left" : "right";
     style2[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`;
-    style2.background = color;
+    if (color) {
+      if (fill === "outline") {
+        style2.color = color;
+        style2.background = "#fff";
+        if (!(color == null ? void 0 : color.includes("gradient"))) {
+          style2.border = `1px solid ${color}`;
+        }
+      } else {
+        style2.color = "#fff";
+        style2.background = color;
+      }
+    }
     return style2;
   };
   return /* @__PURE__ */ React__default.createElement("div", { className: classes, style }, isIcon() && /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-icon` }, value), children, !isIcon() && /* @__PURE__ */ React__default.createElement("div", { className: contentClasses, style: getStyle() }, content()));
@@ -11328,6 +11353,7 @@ const defaultProps$17 = {
 };
 const classPrefix$j = "nut-tabs";
 const Tabs = (props) => {
+  const rtl = useRtl();
   const {
     activeColor,
     tabStyle,
@@ -11434,9 +11460,10 @@ const Tabs = (props) => {
     background: activeType === "line" ? activeColor : ""
   };
   useEffect(() => {
-    const index = titles.current.findIndex((t2) => t2.value == value);
+    let index = titles.current.findIndex((t2) => t2.value == value);
+    index = index < 0 ? 0 : index;
     setContentStyle({
-      transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
+      transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
       transitionDuration: `${duration}ms`
     });
     setTimeout(() => {
@@ -13586,7 +13613,7 @@ const CalendarCard = React__default.forwardRef((props, ref) => {
           change([day]);
         } else if (len === 1) {
           const t2 = compareDay(innerValue[0], day);
-          if (t2 === 0 || t2 === null || t2 === void 0) {
+          if (t2 === null || t2 === void 0) {
             change([]);
           } else if (t2 < 0) {
             change([innerValue[0], day]);
@@ -19643,9 +19670,9 @@ const Drag = (props) => {
 Drag.defaultProps = defaultProps$D;
 Drag.displayName = "NutDrag";
 const defaultStatus = {
-  empty: "https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png",
-  error: "https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png",
-  network: "https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png"
+  empty: "https://storage.360buyimg.com/imgtools/30186cfda0-0d3eee40-c0ac-11ee-9382-9125782aa3b8.png",
+  error: "https://storage.360buyimg.com/imgtools/f3278d0ebb-0ce360c0-c0ac-11ee-8375-193101bb1a46.png",
+  network: "https://storage.360buyimg.com/imgtools/43c30f7e29-0d483d10-c0ac-11ee-bec4-eb4d2a09a51d.png"
 };
 const defaultProps$C = {
   ...ComponentDefaults,
@@ -19719,6 +19746,7 @@ Empty.defaultProps = defaultProps$C;
 Empty.displayName = "NutEmpty";
 const defaultProps$B = {
   ...ComponentDefaults,
+  type: "default",
   hasMore: true,
   threshold: 200,
   target: "",
@@ -19730,6 +19758,7 @@ const InfiniteLoading = (props) => {
   const { locale } = useConfig();
   const {
     children,
+    type: type4,
     hasMore,
     threshold,
     target,
@@ -19756,7 +19785,7 @@ const InfiniteLoading = (props) => {
   const refreshMaxH = useRef(0);
   const y = useRef(0);
   const distance = useRef(0);
-  const classes = classNames(classPrefix$d, className);
+  const classes = classNames(classPrefix$d, className, `${classPrefix$d}-${type4}`);
   useEffect(() => {
     var _a;
     if (target && document.getElementById(target)) {
@@ -20788,6 +20817,7 @@ function rubberbandIfOutOfBounds(position, min, max, dimension, constant = 0.15)
 const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
 const defaultProps$x = {
   ...ComponentDefaults,
+  type: "default",
   pullingText: "",
   canReleaseText: "",
   refreshingText: "",
@@ -20812,6 +20842,11 @@ const PullToRefresh = (p) => {
       completeText: p.completeText || locale.pullToRefresh.completeText
     }
   };
+  const classes = classNames(
+    classPrefix2,
+    props.className,
+    `${classPrefix2}-${props.type}`
+  );
   const headHeight = props.headHeight;
   const threshold = props.threshold;
   const [status, setStatus] = useState("pulling");
@@ -20938,24 +20973,15 @@ const PullToRefresh = (p) => {
       return props.completeText;
     return "";
   };
-  return /* @__PURE__ */ React__default.createElement(
-    animated.div,
+  return /* @__PURE__ */ React__default.createElement(animated.div, { ref: elementRef, className: classes, style: props.style }, /* @__PURE__ */ React__default.createElement(animated.div, { style: springStyles, className: `${classPrefix2}-head` }, /* @__PURE__ */ React__default.createElement(
+    "div",
     {
-      ref: elementRef,
-      className: `${classPrefix2} ${props.className}`,
-      style: props.style
+      className: `${classPrefix2}-head-content`,
+      style: { height: headHeight }
     },
-    /* @__PURE__ */ React__default.createElement(animated.div, { style: springStyles, className: `${classPrefix2}-head` }, /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: `${classPrefix2}-head-content`,
-        style: { height: headHeight }
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, renderStatusIcon()),
-      /* @__PURE__ */ React__default.createElement("div", null, renderStatusText())
-    )),
-    /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-content` }, props.children)
-  );
+    /* @__PURE__ */ React__default.createElement("div", null, renderStatusIcon()),
+    /* @__PURE__ */ React__default.createElement("div", null, renderStatusText())
+  )), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-content` }, props.children));
 };
 PullToRefresh.defaultProps = defaultProps$x;
 PullToRefresh.displayName = "NutPullToRefresh";

package/dist/nutui.react.umd.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory((global2.nutui = global2.nutui || {}, global2.nutui.react = {}), global2.React, global2.ReactDOM));
 })(this, function(exports2, React, ReactDOM) {
   "use strict";/*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:22:38 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:51:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -1215,7 +1215,7 @@ Check the top-level render call using <` + t2 + ">.");
               [`${prefixCls$2}-${size}`]: size,
               [`${prefixCls$2}-${shape}`]: shape,
               [`${prefixCls$2}-block`]: block,
-              [`${prefixCls$2}-disabled`]: disabled,
+              [`${prefixCls$2}-disabled`]: disabled || loading,
               [`${prefixCls$2}-loading`]: loading
             },
             className
@@ -11131,19 +11131,33 @@ Please add \`${key}Action\` when creating your handler.`);
     max: 99,
     top: "4",
     right: "8",
-    color: ""
+    color: "",
+    fill: "solid"
   };
   const Badge = (props) => {
     var _a;
     const rtl = useRtl();
-    const { className, style, value, max, children, dot, top, right, color } = {
+    const {
+      className,
+      style,
+      value,
+      max,
+      children,
+      dot,
+      top,
+      right,
+      color,
+      fill
+    } = {
       ...defaultProps$1b,
       ...props
     };
     const classPrefix2 = "nut-badge";
-    const classes = classNames(classPrefix2, className);
+    const classes = classNames(classPrefix2, className, {
+      [`${classPrefix2}-${fill}`]: fill === "outline"
+    });
     function content() {
-      if (dot || typeof value === "object")
+      if (dot || typeof value === "object" || value === 0)
         return null;
       if (typeof value === "number" && typeof max === "number") {
         return max < value ? `${max}+` : `${value}`;
@@ -11175,7 +11189,18 @@ Please add \`${key}Action\` when creating your handler.`);
       style2.top = `${Number(top) || parseFloat(String(top)) || 0}px`;
       const dir = rtl ? "left" : "right";
       style2[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`;
-      style2.background = color;
+      if (color) {
+        if (fill === "outline") {
+          style2.color = color;
+          style2.background = "#fff";
+          if (!(color == null ? void 0 : color.includes("gradient"))) {
+            style2.border = `1px solid ${color}`;
+          }
+        } else {
+          style2.color = "#fff";
+          style2.background = color;
+        }
+      }
       return style2;
     };
     return /* @__PURE__ */ React.createElement("div", { className: classes, style }, isIcon() && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-icon` }, value), children, !isIcon() && /* @__PURE__ */ React.createElement("div", { className: contentClasses, style: getStyle() }, content()));
@@ -11346,6 +11371,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   const classPrefix$j = "nut-tabs";
   const Tabs = (props) => {
+    const rtl = useRtl();
     const {
       activeColor,
       tabStyle,
@@ -11452,9 +11478,10 @@ Please add \`${key}Action\` when creating your handler.`);
       background: activeType === "line" ? activeColor : ""
     };
     React.useEffect(() => {
-      const index = titles.current.findIndex((t2) => t2.value == value);
+      let index = titles.current.findIndex((t2) => t2.value == value);
+      index = index < 0 ? 0 : index;
       setContentStyle({
-        transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
+        transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
         transitionDuration: `${duration}ms`
       });
       setTimeout(() => {
@@ -13604,7 +13631,7 @@ Please add \`${key}Action\` when creating your handler.`);
             change([day]);
           } else if (len === 1) {
             const t2 = compareDay(innerValue[0], day);
-            if (t2 === 0 || t2 === null || t2 === void 0) {
+            if (t2 === null || t2 === void 0) {
               change([]);
             } else if (t2 < 0) {
               change([innerValue[0], day]);
@@ -19661,9 +19688,9 @@ Please add \`${key}Action\` when creating your handler.`);
   Drag.defaultProps = defaultProps$D;
   Drag.displayName = "NutDrag";
   const defaultStatus = {
-    empty: "https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png",
-    error: "https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png",
-    network: "https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png"
+    empty: "https://storage.360buyimg.com/imgtools/30186cfda0-0d3eee40-c0ac-11ee-9382-9125782aa3b8.png",
+    error: "https://storage.360buyimg.com/imgtools/f3278d0ebb-0ce360c0-c0ac-11ee-8375-193101bb1a46.png",
+    network: "https://storage.360buyimg.com/imgtools/43c30f7e29-0d483d10-c0ac-11ee-bec4-eb4d2a09a51d.png"
   };
   const defaultProps$C = {
     ...ComponentDefaults,
@@ -19737,6 +19764,7 @@ Please add \`${key}Action\` when creating your handler.`);
   Empty.displayName = "NutEmpty";
   const defaultProps$B = {
     ...ComponentDefaults,
+    type: "default",
     hasMore: true,
     threshold: 200,
     target: "",
@@ -19748,6 +19776,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const { locale } = useConfig();
     const {
       children,
+      type: type2,
       hasMore,
       threshold,
       target,
@@ -19774,7 +19803,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const refreshMaxH = React.useRef(0);
     const y = React.useRef(0);
     const distance = React.useRef(0);
-    const classes = classNames(classPrefix$d, className);
+    const classes = classNames(classPrefix$d, className, `${classPrefix$d}-${type2}`);
     React.useEffect(() => {
       var _a;
       if (target && document.getElementById(target)) {
@@ -20806,6 +20835,7 @@ Please add \`${key}Action\` when creating your handler.`);
   const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
   const defaultProps$x = {
     ...ComponentDefaults,
+    type: "default",
     pullingText: "",
     canReleaseText: "",
     refreshingText: "",
@@ -20830,6 +20860,11 @@ Please add \`${key}Action\` when creating your handler.`);
         completeText: p.completeText || locale.pullToRefresh.completeText
       }
     };
+    const classes = classNames(
+      classPrefix2,
+      props.className,
+      `${classPrefix2}-${props.type}`
+    );
     const headHeight = props.headHeight;
     const threshold = props.threshold;
     const [status, setStatus] = React.useState("pulling");
@@ -20956,24 +20991,15 @@ Please add \`${key}Action\` when creating your handler.`);
         return props.completeText;
       return "";
     };
-    return /* @__PURE__ */ React.createElement(
-      animated.div,
+    return /* @__PURE__ */ React.createElement(animated.div, { ref: elementRef, className: classes, style: props.style }, /* @__PURE__ */ React.createElement(animated.div, { style: springStyles, className: `${classPrefix2}-head` }, /* @__PURE__ */ React.createElement(
+      "div",
       {
-        ref: elementRef,
-        className: `${classPrefix2} ${props.className}`,
-        style: props.style
+        className: `${classPrefix2}-head-content`,
+        style: { height: headHeight }
       },
-      /* @__PURE__ */ React.createElement(animated.div, { style: springStyles, className: `${classPrefix2}-head` }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `${classPrefix2}-head-content`,
-          style: { height: headHeight }
-        },
-        /* @__PURE__ */ React.createElement("div", null, renderStatusIcon()),
-        /* @__PURE__ */ React.createElement("div", null, renderStatusText())
-      )),
-      /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-content` }, props.children)
-    );
+      /* @__PURE__ */ React.createElement("div", null, renderStatusIcon()),
+      /* @__PURE__ */ React.createElement("div", null, renderStatusText())
+    )), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-content` }, props.children));
   };
   PullToRefresh.defaultProps = defaultProps$x;
   PullToRefresh.displayName = "NutPullToRefresh";

package/dist/packages/badge/badge.scss

@@ -59,6 +59,14 @@
     border-radius: $badge-dot-width;
     padding: 0;
   }
+
+  &-outline {
+    .nut-badge-content {
+      background: $color-primary-text;
+      border: 1px solid $color-primary;
+      color: $color-primary;
+    }
+  }
 }
 
 [dir='rtl'] .nut-badge,

package/dist/packages/button/button.scss

@@ -13,7 +13,7 @@
   font-weight: $button-default-font-weight;
   text-align: center;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: $button-transition;
   -webkit-appearance: none;
   user-select: none;
   touch-action: manipulation;
@@ -59,6 +59,11 @@
     align-items: center;
     justify-content: center;
     background: initial;
+    .nut-icon {
+      font-size: $button-default-font-size;
+      width: $button-default-font-size;
+      height: $button-default-font-size;
+    }
   }
 
   &-loading,
@@ -78,7 +83,7 @@
     border: $button-border-width solid $button-default-border-color;
 
     &.nut-button-disabled {
-      color: $color-text-help;
+      color: $button-default-disabled-color;
       background: transparent;
     }
 
@@ -86,7 +91,7 @@
       background: transparent;
 
       &.nut-button-disabled {
-        color: $color-text-help;
+        color: $button-default-disabled-color;
       }
     }
 
@@ -95,7 +100,7 @@
       background: transparent;
 
       &.nut-button-disabled {
-        color: $color-text-help;
+        color: $button-default-disabled-color;
         border-color: $button-default-disabled;
       }
     }
@@ -105,22 +110,54 @@
     padding: $button-normal-padding;
   }
 
+  &-xlarge {
+    height: $button-xlarge-height;
+    padding: $button-xlarge-padding;
+    font-size: $button-xlarge-font-size;
+    font-weight: $button-large-font-weight;
+
+    .nut-icon {
+      font-size: $button-xlarge-font-size;
+      width: $button-xlarge-font-size;
+      height: $button-xlarge-font-size;
+    }
+  }
+
   &-large {
     height: $button-large-height;
     padding: $button-large-padding;
     font-size: $button-large-font-size;
+    font-weight: $button-large-font-weight;
+
+    .nut-icon {
+      font-size: $button-large-font-size;
+      width: $button-large-font-size;
+      height: $button-large-font-size;
+    }
   }
 
   &-small {
     height: $button-small-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
+
+    .nut-icon {
+      font-size: $button-small-font-size;
+      width: $button-small-font-size;
+      height: $button-small-font-size;
+    }
   }
 
   &-mini {
     height: $button-mini-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
+
+    .nut-icon {
+      font-size: $button-mini-font-size;
+      width: $button-mini-font-size;
+      height: $button-mini-font-size;
+    }
   }
 
   &-primary {
@@ -290,7 +327,7 @@
     border: $button-border-width solid transparent;
 
     &.nut-button-disabled {
-      color: #ffffff;
+      color: $button-default-disabled-color;
       background: $button-default-disabled;
     }
   }
@@ -308,7 +345,6 @@
 
   &-disabled {
     cursor: not-allowed;
-    font-weight: 400;
     color: #ffffff;
     background: $button-default-disabled;
     border-color: $button-default-disabled;
@@ -321,6 +357,19 @@
 
   &-round {
     border-radius: $button-border-radius;
+
+    &.nut-button-xlarge,
+    &.nut-button-large {
+      border-radius: $button-large-border-radius;
+    }
+
+    &.nut-button-small {
+      border-radius: $button-small-border-radius;
+    }
+
+    &.nut-button-mini {
+      border-radius: $button-mini-border-radius;
+    }
   }
 
   &-square {

package/dist/packages/calendarcard/calendarcard.scss

@@ -61,22 +61,28 @@
       line-height: 12px;
     }
 
-    &.active,
+    &.weekend {
+      color: $calendar-choose-color;
+    }
+
+    &.active {
+      background-color: $calendar-active-background-color;
+      color: $color-primary-text;
+      border-radius: $calendar-day-active-border-radius;
+    }
+
     &.start,
     &.end {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text !important;
-      border-radius: $calendar-day-active-border-radius;
+      color: $color-primary-text;
     }
 
     &.start {
-      border-radius: 0px;
       border-top-left-radius: $calendar-day-active-border-radius;
       border-bottom-left-radius: $calendar-day-active-border-radius;
     }
 
     &.end {
-      border-radius: 0px;
       border-top-right-radius: $calendar-day-active-border-radius;
       border-bottom-right-radius: $calendar-day-active-border-radius;
     }
@@ -86,10 +92,6 @@
       color: $calendar-choose-color;
     }
 
-    &.weekend {
-      color: $calendar-choose-color;
-    }
-
     .nut-calendar-day-info {
       color: $color-primary-text;
     }
@@ -127,17 +129,17 @@
     }
   }
   &-day {
+    &.start,
+    &.end {
+      border-radius: 0;
+    }
     &.start {
-      border-top-left-radius: 0;
       border-top-right-radius: $calendar-day-active-border-radius;
-      border-bottom-left-radius: 0;
       border-bottom-right-radius: $calendar-day-active-border-radius;
     }
 
     &.end {
-      border-top-right-radius: 0;
       border-top-left-radius: $calendar-day-active-border-radius;
-      border-bottom-right-radius: 0;
       border-bottom-left-radius: $calendar-day-active-border-radius;
     }
   }

package/dist/packages/infiniteloading/infiniteloading.scss

@@ -47,6 +47,13 @@
       }
     }
   }
+  &-primary {
+    background-color: $color-primary;
+    .nut-infinite-bottom,
+    .nut-infinite-top {
+      color: $color-text-dark;
+    }
+  }
 }
 
 [dir='rtl'] .nut-infiniteloading,

package/dist/packages/pulltorefresh/pulltorefresh.scss

@@ -22,6 +22,19 @@
       }
     }
   }
+
+  &-primary {
+    background: $pulltorefresh-color-primary;
+    .nut-pulltorefresh-content {
+      color: $color-text-dark;
+    }
+
+    .nut-pulltorefresh-head {
+      &-content {
+        color: $color-text-dark;
+      }
+    }
+  }
 }
 
 [dir='rtl'] .nut-pulltorefresh,