@nutui/nutui-react-taro 3.0.0-beta.9 → 3.0.0

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

@@ -12,7 +12,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-text-help, #888b94);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -24,13 +24,13 @@
   margin-bottom: 4px;
 }
 .nut-pulltorefresh-primary {
-  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-brand-6));
+  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23));
 }
 .nut-pulltorefresh-primary-content {
-  color: var(--nutui-white-12);
+  color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9));
 }
 .nut-pulltorefresh-primary-head-content {
-  color: var(--nutui-white-12);
+  color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9));
 }
 .nut-pulltorefresh-primary-status-text {
   color: #ffffff;

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

@@ -0,0 +1,43 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-pulltorefresh-head {
+  overflow: hidden;
+  position: relative;
+  font-size: 12px;
+}
+.nut-pulltorefresh-head-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  color: #888b94;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.nut-pulltorefresh-head-content-icons {
+  width: 36px;
+  height: 26px;
+  margin-bottom: 4px;
+}
+.nut-pulltorefresh-primary {
+  background: #ff0f23;
+}
+.nut-pulltorefresh-primary-content {
+  color: rgba(255, 255, 255, 0.9);
+}
+.nut-pulltorefresh-primary-head-content {
+  color: rgba(255, 255, 255, 0.9);
+}
+.nut-pulltorefresh-primary-status-text {
+  color: #ffffff;
+}
+
+[dir=rtl] .nut-pulltorefresh-head-content,
+.nut-rtl .nut-pulltorefresh-head-content {
+  left: auto;
+  right: 0;
+}

package/dist/cjs/packages/radio/radio.js

@@ -21,7 +21,7 @@ var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames")
 var _components = require("@tarojs/components");
 var _context = /*#__PURE__*/ _interop_require_default._(require("../radiogroup/context"));
 var _typings = require("../../utils/typings");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     disabled: false,
     shape: 'round',

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

@@ -3,11 +3,6 @@
   align-items: center;
   flex-shrink: 0;
 
-  &:last-child {
-    margin-bottom: 0 !important;
-    margin-right: 0 !important;
-  }
-
   &.nut-radio-reverse {
     flex-direction: row-reverse;
 
@@ -54,6 +49,7 @@
   &-button {
     display: inline-flex;
     align-items: center;
+    min-height: 30px;
     padding: $radio-button-padding;
     font-size: $radio-button-font-size;
     background: $radio-button-background;

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

@@ -11,6 +11,9 @@
 .nut-radiogroup .nut-radio-button {
   background-color: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
+.nut-radiogroup .nut-radio:last-child {
+  margin: 0;
+}
 .nut-radiogroup-vertical .nut-radio.nut-radio-reverse {
   width: 100%;
   justify-content: space-between;
@@ -19,23 +22,26 @@
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
-  background-color: var(--nutui-brand-1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
 }
-.nut-radiogroup-horizontal .nut-radio {
-  display: inline-flex;
+.nut-radiogroup-horizontal {
+  display: flex;
 }
 .nut-radiogroup-horizontal .nut-radio-button {
   border: 1px solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
-  background-color: var(--nutui-brand-1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+}
+.nut-radiogroup-horizontal .nut-radio:last-child {
+  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-gray-4);
+  background: var(--nutui-color-text-disabled, #c2c4cc);
   color: #ffffff;
-  border: 1px solid var(--nutui-gray-4);
+  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,
@@ -49,10 +55,6 @@
   align-items: center;
   flex-shrink: 0;
 }
-.nut-radio:last-child {
-  margin-bottom: 0 !important;
-  margin-right: 0 !important;
-}
 .nut-radio.nut-radio-reverse {
   flex-direction: row-reverse;
 }
@@ -63,53 +65,54 @@
 .nut-radio-label {
   margin-left: var(--nutui-radio-label-margin-left, 4px);
   font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12px));
-  color: var(--nutui-radio-label-color, var(--nutui-gray-7));
+  color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-radio-label-disabled {
-  color: var(--nutui-radio-label-disable-color, var(--nutui-gray-4));
+  color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-radio-icon {
-  color: var(--nutui-gray-4);
+  color: var(--nutui-color-text-disabled, #c2c4cc);
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
   font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-radio-icon-checked {
-  color: var(--nutui-brand-6);
+  color: var(--nutui-color-primary, #ff0f23);
   box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
   border-radius: 50%;
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
-  color: var(--nutui-brand-3);
+  color: var(--nutui-color-primary-disabled-special, #ffadbe);
   box-shadow: none;
 }
 .nut-radio-icon-disabled {
-  color: var(--nutui-gray-4);
+  color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-radio-button {
   display: inline-flex;
   align-items: center;
+  min-height: 30px;
   padding: var(--nutui-radio-button-padding, 5px 18px);
   font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, 12px));
   background: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
   border-radius: var(--nutui-radio-button-border-radius, 15px);
-  color: var(--nutui-radio-label-color, var(--nutui-gray-7));
+  color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
   box-sizing: border-box;
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio-button-active {
-  background: var(--nutui-brand-1);
-  color: var(--nutui-brand-6);
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background: var(--nutui-color-primary-light-pressed, #ffebf1);
+  color: var(--nutui-color-primary, #ff0f23);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-radio-button-disabled {
-  color: var(--nutui-gray-4);
+  color: var(--nutui-color-text-disabled, #c2c4cc);
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-gray-4);
+  background: var(--nutui-color-text-disabled, #c2c4cc);
   color: #ffffff;
-  border: 1px solid var(--nutui-gray-4);
+  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 
 [dir=rtl] .nut-radio:last-child,

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

@@ -0,0 +1,90 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-radio {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.nut-radio.nut-radio-reverse {
+  flex-direction: row-reverse;
+}
+.nut-radio.nut-radio-reverse .nut-radio-label {
+  margin-right: 4px;
+  margin-left: 0;
+}
+.nut-radio-label {
+  margin-left: 4px;
+  font-size: 12px;
+  color: #1a1a1a;
+}
+.nut-radio-label-disabled {
+  color: #c2c4cc;
+}
+.nut-radio-icon {
+  color: #c2c4cc;
+  transition-duration: 0.3s;
+  transition-property: color, border-color, background-color;
+  font-size: 16px;
+}
+.nut-radio-icon-checked {
+  color: #ff0f23;
+  box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+  border-radius: 50%;
+}
+.nut-radio-icon-checked.nut-radio-icon-disabled {
+  color: #ffadbe;
+  box-shadow: none;
+}
+.nut-radio-icon-disabled {
+  color: #c2c4cc;
+}
+.nut-radio-button {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 5px 18px;
+  font-size: 12px;
+  background: rgba(250, 44, 25, 0.05);
+  border-radius: 15px;
+  color: #1a1a1a;
+  box-sizing: border-box;
+  border: 1px solid rgba(250, 44, 25, 0.05);
+}
+.nut-radio-button-active {
+  background: #ffebf1;
+  color: #ff0f23;
+  border: 1px solid #ff0f23;
+}
+.nut-radio-button-disabled {
+  color: #c2c4cc;
+  border: 1px solid rgba(250, 44, 25, 0.05);
+}
+.nut-radio .nut-radio-button-active.nut-radio-button-disabled {
+  background: #c2c4cc;
+  color: #ffffff;
+  border: 1px solid #c2c4cc;
+}
+
+[dir=rtl] .nut-radio:last-child,
+.nut-rtl .nut-radio:last-child {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+[dir=rtl] .nut-radio.nut-radio-reverse .nut-radio-label {
+  margin-left: 4px;
+  margin-right: 0;
+}
+.nut-rtl .nut-radio.nut-radio-reverse .nut-radio-label {
+  margin-left: 4px;
+  margin-right: 0;
+}
+[dir=rtl] .nut-radio-label {
+  margin-left: 0;
+  margin-right: 4px;
+}
+.nut-rtl .nut-radio-label {
+  margin-left: 0;
+  margin-right: 4px;
+}

package/dist/cjs/packages/radiogroup/radiogroup.js

@@ -20,7 +20,7 @@ var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames")
 var _components = require("@tarojs/components");
 var _context = /*#__PURE__*/ _interop_require_default._(require("./context"));
 var _index = /*#__PURE__*/ _interop_require_default._(require("../radio/index"));
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var defaultProps = {
     labelPosition: 'right',
     onChange: function onChange(value) {},

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

@@ -9,6 +9,10 @@
     &-button {
       background-color: $radio-button-background;
     }
+
+    &:last-child {
+      margin: 0;
+    }
   }
 
   &-vertical {
@@ -30,9 +34,9 @@
   }
 
   &-horizontal {
-    .nut-radio {
-      display: inline-flex;
+    display: flex;
 
+    .nut-radio {
       &-button {
         border: 1px solid $white;
       }
@@ -41,6 +45,10 @@
         border: $radio-button-active-border;
         background-color: $color-primary-light-pressed;
       }
+
+      &:last-child {
+        margin: 0 $radiogroup-radio-margin $radiogroup-radio-margin-bottom 0;
+      }
     }
   }
 

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

@@ -11,6 +11,9 @@
 .nut-radiogroup .nut-radio-button {
   background-color: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
+.nut-radiogroup .nut-radio:last-child {
+  margin: 0;
+}
 .nut-radiogroup-vertical .nut-radio.nut-radio-reverse {
   width: 100%;
   justify-content: space-between;
@@ -19,23 +22,26 @@
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
-  background-color: var(--nutui-brand-1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
 }
-.nut-radiogroup-horizontal .nut-radio {
-  display: inline-flex;
+.nut-radiogroup-horizontal {
+  display: flex;
 }
 .nut-radiogroup-horizontal .nut-radio-button {
   border: 1px solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
-  background-color: var(--nutui-brand-1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+}
+.nut-radiogroup-horizontal .nut-radio:last-child {
+  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-gray-4);
+  background: var(--nutui-color-text-disabled, #c2c4cc);
   color: #ffffff;
-  border: 1px solid var(--nutui-gray-4);
+  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,

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

@@ -0,0 +1,55 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-radiogroup .nut-radio {
+  margin: 0 20px 5px 0;
+}
+.nut-radiogroup .nut-radio-label {
+  margin: 0 5px;
+}
+.nut-radiogroup .nut-radio-button {
+  background-color: rgba(250, 44, 25, 0.05);
+}
+.nut-radiogroup .nut-radio:last-child {
+  margin: 0;
+}
+.nut-radiogroup-vertical .nut-radio.nut-radio-reverse {
+  width: 100%;
+  justify-content: space-between;
+}
+.nut-radiogroup-vertical .nut-radio-button {
+  border: 1px solid rgba(250, 44, 25, 0.05);
+}
+.nut-radiogroup-vertical .nut-radio-button-active {
+  border: 1px solid #ff0f23;
+  background-color: #ffebf1;
+}
+.nut-radiogroup-horizontal {
+  display: flex;
+}
+.nut-radiogroup-horizontal .nut-radio-button {
+  border: 1px solid #ffffff;
+}
+.nut-radiogroup-horizontal .nut-radio-button-active {
+  border: 1px solid #ff0f23;
+  background-color: #ffebf1;
+}
+.nut-radiogroup-horizontal .nut-radio:last-child {
+  margin: 0 20px 5px 0;
+}
+.nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
+  background: #c2c4cc;
+  color: #ffffff;
+  border: 1px solid #c2c4cc;
+}
+
+[dir=rtl] .nut-radiogroup .nut-radio {
+  margin-left: 20px;
+  margin-right: 0;
+}
+
+.nut-rtl .nut-radiogroup .nut-radio {
+  margin-left: 20px;
+  margin-right: 0;
+}

package/dist/cjs/packages/range/range.js

@@ -20,9 +20,9 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
 var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
-var _usetouch = require("../../utils/use-touch");
+var _usetouch = require("../../hooks/use-touch");
 var _typings = require("../../utils/typings");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var _getrectbytaro = require("../../utils/get-rect-by-taro");
 var _index = require("../configprovider/index");
 var _platformtaro = require("../../utils/platform-taro");
@@ -34,9 +34,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     vertical: false,
     marks: {}
 });
-var isRn = (0, _platformtaro.rn)();
 var isHm = (0, _platformtaro.harmony)();
-var isNative = (0, _platformtaro.harmonyAndRn)();
 var classPrefix = 'nut-range';
 var verticalClassPrefix = "".concat(classPrefix, "-vertical");
 var isSameValue = function isSameValue(newValue, oldValue) {
@@ -114,9 +112,9 @@ var Range = function Range(props) {
         min
     ]);
     var _obj;
-    var classes = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj, verticalClassPrefix, vertical), (0, _define_property._)(_obj, "".concat(classPrefix, "-native"), isNative), _obj));
+    var classes = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj, verticalClassPrefix, vertical), (0, _define_property._)(_obj, "".concat(classPrefix, "-native"), isHm), _obj));
     var _obj1;
-    var containerClasses = (0, _classnames.default)("".concat(classPrefix, "-container"), (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-container-native"), isNative), (0, _define_property._)(_obj1, "".concat(verticalClassPrefix, "-container"), vertical), _obj1), className);
+    var containerClasses = (0, _classnames.default)("".concat(classPrefix, "-container"), (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-container-native"), isHm), (0, _define_property._)(_obj1, "".concat(verticalClassPrefix, "-container"), vertical), _obj1), className);
     var markClassName = (0, _react.useCallback)(function(mark) {
         var classPrefix = 'nut-range-mark';
         var verticalClassPrefix = 'nut-range-vertical-mark';
@@ -342,7 +340,7 @@ var Range = function Range(props) {
                         if (dragStatus === 'start') {
                             onStart && onStart();
                         }
-                        touch.move(isRn ? event.nativeEvent : event);
+                        touch.move(event);
                         setDragStatus('draging');
                         return [
                             4,
@@ -421,33 +419,12 @@ var Range = function Range(props) {
         var transform = {
             transform: 'translate(-50%, -50%)'
         };
-        if (isRn) {
-            // @TODO 支持变量
-            return (0, _object_spread_props._)((0, _object_spread._)({}, borderRadis), {
-                transform: [
-                    {
-                        translateX: (0, _pxtransform.default)(-12)
-                    }
-                ]
-            });
-        }
         if (isHm) {
             return (0, _object_spread._)({}, borderRadis, transform);
         }
         return (0, _object_spread._)({}, transform);
     }, []);
     var buttonNumberTransform = (0, _react.useMemo)(function() {
-        if (isRn) {
-            // @TODO 支持变量
-            return [
-                {
-                    translateX: (0, _pxtransform.default)(vertical ? 26 : -12)
-                },
-                {
-                    translateY: (0, _pxtransform.default)(vertical ? -12 : -26)
-                }
-            ];
-        }
         return vertical ? 'translate(100%, -50%)' : 'translate(-50%, -100%)';
     }, [
         vertical
@@ -515,22 +492,11 @@ var Range = function Range(props) {
             }
         ];
         var wrapperTransform = 'translate(-50%, -50%)';
-        return isRn ? wrapperTransformRN : wrapperTransform;
+        return wrapperTransform;
     }, [
         vertical
     ]);
     var rangeWrapperTransform = (0, _react.useMemo)(function() {
-        if (isRn) {
-            // @TODO 支持变量
-            return [
-                {
-                    translateX: (0, _pxtransform.default)(-12)
-                },
-                {
-                    translateY: (0, _pxtransform.default)(-13)
-                }
-            ];
-        }
         return 'translate(-50%, -50%)';
     }, []);
     var renderRangeButton = (0, _react.useCallback)(function() {
@@ -557,7 +523,7 @@ var Range = function Range(props) {
                 onTouchEnd: onTouchEnd,
                 onTouchCancel: onTouchEnd,
                 onClick: function onClick(e) {
-                    return !isRn && e.stopPropagation();
+                    return e.stopPropagation();
                 }
             }, renderButton(index));
         });
@@ -584,7 +550,7 @@ var Range = function Range(props) {
             onTouchEnd: onTouchEnd,
             onTouchCancel: onTouchEnd,
             onClick: function onClick(e) {
-                return !isRn && e.stopPropagation();
+                return e.stopPropagation();
             }
         }, renderButton());
     }, [

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

@@ -20,7 +20,7 @@
   position: relative;
   height: var(--nutui-range-height, 4px);
   margin: 0 var(--nutui-range-margin, 15px);
-  background-color: var(--nutui-range-inactive-color, var(--nutui-brand-1));
+  background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
   border-radius: 2px;
   flex: 1;
   cursor: pointer;
@@ -33,7 +33,7 @@
 }
 .nut-range-min, .nut-range-max {
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-gray-7));
+  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
   user-select: none;
 }
 .nut-range-bar {
@@ -43,7 +43,7 @@
   height: 100%;
   max-width: 100%;
   max-height: 100%;
-  background: var(--nutui-range-active-color, var(--nutui-brand-6));
+  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
   border-radius: 2px;
   transition: all 0.2s;
 }
@@ -55,7 +55,7 @@
   background: var(--nutui-range-button-background, #ffffff);
   border-radius: 50%;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-  border: var(--nutui-range-button-border, 1px solid var(--nutui-brand-6));
+  border: var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #ff0f23));
   outline: none;
   align-items: center;
   top: 50%;
@@ -93,7 +93,7 @@
   justify-content: center;
   user-select: none;
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-gray-7));
+  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
   text-align: center;
   vertical-align: center;
   box-sizing: border-box;
@@ -137,10 +137,10 @@
   height: 11px;
   left: 0px;
   border-radius: 6px;
-  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
+  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-brand-6));
+  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-range-vertical-container {
@@ -203,10 +203,10 @@
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
+  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-vertical-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-brand-6));
+  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
 }
 
 [dir=rtl] .nut-range-button-wrapper, [dir=rtl] .nut-range-button-wrapper-right,