@nutui/nutui-react 3.0.0-beta.0 → 3.0.0-beta.10

package/dist/es/packages/price/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-price {
   direction: ltr;
   font-size: var(--nutui-font-size-l, 16px);
@@ -6,42 +10,61 @@
   align-items: baseline;
 }
 .nut-price-symbol, .nut-price-integer, .nut-price-decimal {
-  color: var(--nutui-color-primary, #ff0f23);
+  color: var(--nutui-price-color, var(--nutui-color-text-help));
+  font-family: "JD";
+  line-height: 1;
+}
+.nut-price-darkgray .nut-price-symbol, .nut-price-darkgray .nut-price-integer, .nut-price-darkgray .nut-price-decimal {
+  font-family: "JD-Bold";
+  color: var(--nutui-price-darkgray-color, var(--nutui-gray-7));
+}
+.nut-price-primary .nut-price-symbol, .nut-price-primary .nut-price-integer, .nut-price-primary .nut-price-decimal {
+  font-family: "JD-Bold";
+  color: var(--nutui-price-color, var(--nutui-brand-6));
 }
 .nut-price-symbol {
-  font-size: var(--nutui-price-symbol-medium-size, 14px);
-  padding-right: var(--nutui-price-symbol-padding-right, 1px);
+  padding-right: var(--nutui-price-symbol-padding-right, 0px);
+}
+.nut-price-symbol-xlarge {
+  font-size: var(--nutui-price-symbol-xlarge-size, 12px);
 }
 .nut-price-symbol-large {
-  font-size: var(--nutui-price-symbol-big-size, 18px);
+  font-size: var(--nutui-price-symbol-large-size, 12px);
+}
+.nut-price-symbol-normal {
+  font-size: var(--nutui-price-symbol-normal-size, 12px);
 }
 .nut-price-symbol-small {
-  font-size: var(--nutui-price-symbol-small-size, 10px);
+  font-size: var(--nutui-price-symbol-small-size, 12px);
 }
 .nut-price-symbol-rtl {
   padding-right: 0;
-  padding-left: var(--nutui-price-symbol-padding-right, 1px);
+  padding-left: var(--nutui-price-symbol-padding-right, 0px);
 }
-.nut-price-integer {
-  font-size: var(--nutui-price-integer-medium-size, 16px);
+.nut-price-integer-xlarge {
+  font-size: var(--nutui-price-integer-xlarge-size, 24px);
 }
 .nut-price-integer-large {
-  font-size: var(--nutui-price-integer-big-size, 24px);
+  font-size: var(--nutui-price-integer-large-size, 18px);
+}
+.nut-price-integer-normal {
+  font-size: var(--nutui-price-integer-normal-size, 16px);
 }
 .nut-price-integer-small {
   font-size: var(--nutui-price-integer-small-size, 12px);
 }
-.nut-price-decimal {
-  font-size: var(--nutui-price-decimal-medium-size, 14px);
+.nut-price-decimal-xlarge {
+  font-size: var(--nutui-price-decimal-xlarge-size, 12px);
 }
 .nut-price-decimal-large {
-  font-size: var(--nutui-price-decimal-big-size, 18px);
+  font-size: var(--nutui-price-decimal-large-size, 12px);
+}
+.nut-price-decimal-normal {
+  font-size: var(--nutui-price-decimal-normal-size, 12px);
 }
 .nut-price-decimal-small {
-  font-size: var(--nutui-price-decimal-small-size, 10px);
+  font-size: var(--nutui-price-decimal-small-size, 12px);
 }
 .nut-price-line {
-  text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  font-size: var(--nutui-price-line-font-size, 12px);
-  color: var(--nutui-price-line-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-text-help));
 }

package/dist/es/packages/price/types.d.ts

@@ -0,0 +1,13 @@
+import { BasicComponent } from "../../utils/typings";
+export type PriceSize = 'xlarge' | 'large' | 'normal' | 'small';
+export type PriceColor = 'primary' | 'gray' | 'darkgray';
+export interface PriceProps extends BasicComponent {
+    color: PriceColor;
+    price: number | string;
+    symbol: string;
+    digits: number;
+    thousands: boolean;
+    position: string;
+    size: PriceSize;
+    line: boolean;
+}

package/dist/es/packages/price/types.js

@@ -0,0 +1 @@
+export { };

package/dist/es/packages/progress/progress.js

@@ -39,7 +39,7 @@ export var Progress = function(props) {
     var _useState = _sliced_to_array(useState(0), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
     var stylesInner = {
         width: "".concat(displayPercent, "%"),
-        backgroundColor: color || '#FF0F23'
+        background: color || '#FF0F23'
     };
     useEffect(function() {
         setDispalyPercent(percent);

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

@@ -29,7 +29,7 @@
     justify-content: center;
     transition: all 0.4s;
     border-radius: $progress-border-radius;
-    background-color: $progress-color;
+    background: $progress-color;
   }
 
   &-text {
@@ -39,7 +39,7 @@
     top: $progress-text-position-top;
     bottom: $progress-text-position-bottom;
     transition: all 0.4s;
-    // transform: translate(-50%);
+    transform: translate(-50%);
 
     &-inner {
       display: flex;

package/dist/es/packages/progress/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-progress {
   display: flex;
   align-items: center;
@@ -8,7 +12,7 @@
   flex: auto;
   border-radius: var(--nutui-progress-border-radius, 12px);
   height: var(--nutui-progress-height, 10px);
-  background: var(--nutui-progress-background, var(--nutui-color-background, #f5f6fa));
+  background: var(--nutui-progress-background, var(--nutui-gray-3));
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";
@@ -27,7 +31,7 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: var(--nutui-progress-border-radius, 12px);
-  background-color: var(--nutui-progress-color, #ff0f23);
+  background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 .nut-progress-text {
   display: flex;
@@ -36,6 +40,7 @@
   top: var(--nutui-progress-text-position-top, -4px);
   bottom: var(--nutui-progress-text-position-bottom, -4px);
   transition: all 0.4s;
+  transform: translate(-50%);
 }
 .nut-progress-text-inner {
   display: flex;
@@ -44,12 +49,12 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  color: var(--nutui-progress-text-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-progress-text-color, #ffffff);
   padding: var(--nutui-progress-text-padding, 0 5px);
   border-radius: var(--nutui-progress-text-border-radius, 5px);
   font-size: var(--nutui-progress-text-font-size, 9px);
   line-height: 1;
-  background: var(--nutui-progress-text-background, #ff0f23);
+  background: var(--nutui-progress-text-background, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 @keyframes progressActive {
   0% {

package/dist/es/packages/pulltorefresh/pulltorefresh.js

@@ -24,7 +24,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     completeText: '',
     completeDelay: 500,
     disabled: false,
-    headHeight: 50,
+    headHeight: 80,
     threshold: 60,
     onRefresh: function() {}
 });

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

@@ -9,7 +9,7 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      color: $color-title;
+      color: $color-text-help;
       display: flex;
       flex-direction: column;
       justify-content: center;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-pulltorefresh-head {
   overflow: hidden;
   position: relative;
@@ -8,7 +12,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  color: var(--nutui-color-title, #1a1a1a);
+  color: var(--nutui-gray-5);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -20,7 +24,7 @@
   margin-bottom: 4px;
 }
 .nut-pulltorefresh-primary {
-  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-brand-6));
 }
 .nut-pulltorefresh-primary-content {
   color: var(--nutui-white-12);

package/dist/es/packages/radio/index.d.ts

@@ -1,4 +1,10 @@
-import { Radio } from './radio';
+import React from 'react';
+import { RadioProps } from './radio';
+import { RadioGroup } from '../radiogroup/radiogroup';
 export type { RadioProps } from './radio';
 export type { RadioShape, RadioPosition } from './types';
-export default Radio;
+type CompoundedComponent = React.FC<Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>> & {
+    Group: typeof RadioGroup;
+};
+declare const InnerRadio: CompoundedComponent;
+export default InnerRadio;

package/dist/es/packages/radio/index.js

@@ -1,2 +1,6 @@
+import React from "react";
 import { Radio } from "./radio";
-export default Radio;
+import { RadioGroup } from "../radiogroup/radiogroup";
+var InnerRadio = Radio;
+InnerRadio.Group = RadioGroup;
+export default InnerRadio;

package/dist/es/packages/radio/radio.d.ts

@@ -1,54 +1,15 @@
 import React, { FunctionComponent } from 'react';
-import RadioGroup from "../radiogroup";
 import { BasicComponent } from "../../utils/typings";
 import { RadioPosition, RadioShape } from "./types";
 export interface RadioProps extends BasicComponent {
-    /**
-    * 是否禁用选择
-    * @default false
-    */
-    disabled: boolean
-    /**
-    * 指定当前是否选中
-    * @default -
-    */
-    checked: boolean
-    /**
-    * 初始是否选中
-    * @default -
-    */
-    defaultChecked: boolean
-    /**
-    * 形状
-    * @default round
-    */
-    shape: RadioShape
-    /**
-    * 文本所在的位置
-    * @default right
-    */
-    labelPosition: RadioPosition
-    /**
-    * <a href="#/icon">图标名称</a>，选中前(建议和activeIcon一起修改)
-    * @default 'CheckNormal'
-    */
-    icon: React.ReactNode
-    /**
-    * <a href="#/icon">图标名称</a>，选中后(建议和icon一起修改)
-    * @default 'CheckChecked'
-    */
-    activeIcon: React.ReactNode
-    /**
-    * 携带的标识值，用于 Group 模式
-    * @default -
-    */
-    value: string | number
-    /**
-    * 选中态变化时触发
-    * @default -
-    */
-    onChange: (checked: boolean) => void
+    disabled: boolean;
+    checked: boolean;
+    defaultChecked: boolean;
+    shape: RadioShape;
+    labelPosition: RadioPosition;
+    icon: React.ReactNode;
+    activeIcon: React.ReactNode;
+    value: string | number;
+    onChange: (checked: boolean) => void;
 }
-export declare const Radio: FunctionComponent<Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>> & {
-    Group: typeof RadioGroup;
-};
+export declare const Radio: FunctionComponent<Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>>;

package/dist/es/packages/radio/radio.js

@@ -7,7 +7,6 @@ import React, { useContext } from "react";
 import { CheckChecked, CheckNormal, CheckDisabled } from "@nutui/icons-react";
 import classNames from "classnames";
 import RadioContext from "../radiogroup/context";
-import RadioGroup from "../radiogroup";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../utils/use-props-value";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -117,4 +116,3 @@ export var Radio = function(props) {
     }, rest), renderRadioItem());
 };
 Radio.displayName = 'NutRadio';
-Radio.Group = RadioGroup;

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

@@ -37,9 +37,12 @@
   &-icon {
     &-checked {
       color: $color-primary;
+      box-shadow: 0px 2px 4px 0px #ff0f2333;
+      border-radius: 50%;
 
       &.nut-radio-icon-disabled {
         color: $color-primary-disabled-special;
+        box-shadow: none;
       }
     }
 
@@ -77,6 +80,7 @@
     border: 1px solid $color-text-disabled;
   }
 }
+
 [dir='rtl'] .nut-radio,
 .nut-rtl .nut-radio {
   &:last-child {

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-radiogroup .nut-radio {
   margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
 }
@@ -15,8 +19,8 @@
   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-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background-color: var(--nutui-brand-1);
 }
 .nut-radiogroup-horizontal .nut-radio {
   display: inline-flex;
@@ -25,13 +29,13 @@
   border: 1px solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background-color: var(--nutui-brand-1);
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-gray-4);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: 1px solid var(--nutui-gray-4);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,
@@ -59,25 +63,28 @@
 .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-color-title, #1a1a1a));
+  color: var(--nutui-radio-label-color, var(--nutui-gray-7));
 }
 .nut-radio-label-disabled {
-  color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-radio-label-disable-color, var(--nutui-gray-4));
 }
 .nut-radio-icon {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-gray-4);
   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-color-primary, #ff0f23);
+  color: var(--nutui-brand-6);
+  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-color-primary-disabled-special, #ffadbe);
+  color: var(--nutui-brand-3);
+  box-shadow: none;
 }
 .nut-radio-icon-disabled {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-gray-4);
 }
 .nut-radio-button {
   display: inline-flex;
@@ -86,23 +93,23 @@
   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-color-title, #1a1a1a));
+  color: var(--nutui-radio-label-color, var(--nutui-gray-7));
   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-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));
+  background: var(--nutui-brand-1);
+  color: var(--nutui-brand-6);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
 }
 .nut-radio-button-disabled {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-gray-4);
   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-color-text-disabled, #c2c4cc);
+  background: var(--nutui-gray-4);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: 1px solid var(--nutui-gray-4);
 }
 
 [dir=rtl] .nut-radio:last-child,

package/dist/es/packages/radiogroup/radiogroup.d.ts

@@ -1,41 +1,13 @@
 import React from 'react';
 import { RadioGroupDirection, RadioGroupOption, RadioGroupPosition, RadioGroupShape } from './types';
 export interface RadioGroupProps {
-    /**
-    * 当前选中项的标识符
-    * @default -
-    */
-    value?: string | number
+    value?: string | number;
     defaultValue?: string | number;
-    /**
-    * 文本所在的位置
-    * @default right
-    */
-    labelPosition: RadioGroupPosition
-    /**
-    * 使用横纵方向
-    * @default vertical
-    */
-    direction: RadioGroupDirection
-    /**
-    * 形状
-    * @default -
-    */
-    shape?: RadioGroupShape
-    /**
-    * 是否禁用
-    * @default false
-    */
-    disabled?: boolean
-    /**
-    * 配置 options 渲染单选按钮
-    * @default -
-    */
-    options: RadioGroupOption[]
-    /**
-    * 值变化时触发
-    * @default -
-    */
-    onChange: (value: string | number) => void
+    labelPosition: RadioGroupPosition;
+    direction: RadioGroupDirection;
+    shape?: RadioGroupShape;
+    disabled?: boolean;
+    options: RadioGroupOption[];
+    onChange: (value: string | number) => void;
 }
 export declare const RadioGroup: React.ForwardRefExoticComponent<Partial<RadioGroupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<unknown>>;

package/dist/es/packages/radiogroup/radiogroup.js

@@ -28,7 +28,7 @@ export var RadioGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         "options",
         "disabled"
     ]);
-    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(props.direction), props.direction), className);
+    var cls = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(direction), direction), className);
     var _usePropsValue = _sliced_to_array(usePropsValue({
         defaultValue: props.defaultValue,
         value: props.value,

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-radiogroup .nut-radio {
   margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
 }
@@ -15,8 +19,8 @@
   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-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background-color: var(--nutui-brand-1);
 }
 .nut-radiogroup-horizontal .nut-radio {
   display: inline-flex;
@@ -25,13 +29,13 @@
   border: 1px solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background-color: var(--nutui-brand-1);
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-gray-4);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: 1px solid var(--nutui-gray-4);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-range-container {
   display: flex;
   flex-direction: row;
@@ -16,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-color-primary-light-pressed, #ffebf1));
+  background-color: var(--nutui-range-inactive-color, var(--nutui-brand-1));
   border-radius: 2px;
   flex: 1;
   cursor: pointer;
@@ -29,7 +33,7 @@
 }
 .nut-range-min, .nut-range-max {
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   user-select: none;
 }
 .nut-range-bar {
@@ -39,7 +43,7 @@
   height: 100%;
   max-width: 100%;
   max-height: 100%;
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
   border-radius: 2px;
   transition: all 0.2s;
 }
@@ -48,10 +52,10 @@
   display: flex;
   width: var(--nutui-range-button-width, 24px);
   height: var(--nutui-range-button-height, 24px);
-  background: var(--nutui-range-button-background, var(--nutui-color-primary-text, #ffffff));
+  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-color-primary, #ff0f23));
+  border: var(--nutui-range-button-border, 1px solid var(--nutui-brand-6));
   outline: none;
   align-items: center;
   top: 50%;
@@ -89,7 +93,7 @@
   justify-content: center;
   user-select: none;
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   text-align: center;
   vertical-align: center;
   box-sizing: border-box;
@@ -133,10 +137,10 @@
   height: 11px;
   left: 0px;
   border-radius: 6px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
 }
 .nut-range-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
 }
 
 .nut-range-vertical-container {
@@ -199,10 +203,10 @@
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
 }
 .nut-range-vertical-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
 }
 
 [dir=rtl] .nut-range-button-wrapper, [dir=rtl] .nut-range-button-wrapper-right,

package/dist/es/packages/rate/index.d.ts

@@ -1,3 +1,3 @@
 import { Rate } from './rate';
-export type { RateProps } from './rate';
+export type { RateSize, RateProps } from './types';
 export default Rate;