@nutui/nutui-react-taro 3.0.0-beta.11 → 3.0.0-beta.12

package/dist/cjs/packages/popup/types.taro.d.ts

@@ -0,0 +1,8 @@
+import { ITouchEvent } from '@tarojs/components';
+import { PopupProps as PopupWebProps } from './types';
+export type { CloseIconPosition, Teleport } from './types';
+export type PopupProps = Omit<PopupWebProps, 'onOverlayClick' | 'onCloseIconClick' | 'onClick'> & {
+    onClick: (event: ITouchEvent) => void;
+    onOverlayClick: (e: ITouchEvent) => boolean | void;
+    onCloseIconClick: (e: ITouchEvent) => boolean | void;
+};

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

@@ -20,7 +20,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));
+  color: var(--nutui-price-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-price-symbol {
   padding-right: var(--nutui-price-symbol-padding-right, 0px);

package/dist/cjs/packages/progress/progress.js

@@ -144,7 +144,7 @@ var Progress = function Progress(props) {
     (0, _react.useEffect)(function() {
         if ((0, _platformtaro.web)()) {
             handleWebObserver();
-        } else if (!(0, _platformtaro.harmonyAndRn)()) {
+        } else if (!(0, _platformtaro.harmony)()) {
             handleOtherObserver();
         }
     }, []);
@@ -159,19 +159,16 @@ var Progress = function Progress(props) {
         if (children) {
             return 0;
         }
-        if (!(0, _platformtaro.harmonyAndRn)()) {
+        if (!(0, _platformtaro.harmony)()) {
             return Math.floor("".concat(percent, "%").length * 9 / 2);
         }
-        if ((0, _platformtaro.rn)()) {
-            return "".concat(percent, "%").length * 9 + 4;
-        }
         return Math.floor(("".concat(percent, "%").length * 9 + 4) / 2);
     };
     var computeInnerStyle = function computeInnerStyle() {
         var style = {
             backgroundColor: color || '#ff0f23'
         };
-        if ((0, _platformtaro.harmonyAndRn)()) {
+        if ((0, _platformtaro.harmony)()) {
             style.width = (0, _platformtaro.harmony)() ? (0, _pxtransform.default)("".concat(percent, "%").length * 9 + 4) : "".concat(percent, "%").length * 9 + 4;
         }
         return style;

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

@@ -12,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-gray-3));
+  background: var(--nutui-progress-background, var(--nutui-color-background, #f2f3f5));
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";

package/dist/cjs/packages/pulltorefresh/pulltorefresh.js

@@ -27,7 +27,6 @@ var _rubberband = require("../../utils/rubberband");
 var _sleep = require("../../utils/sleep");
 var _typings = require("../../utils/typings");
 var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
-var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     type: 'default',
     pullingText: '',
@@ -99,11 +98,6 @@ var PullToRefresh = function PullToRefresh(p) {
             setStatus(height > threshold ? 'canRelease' : 'pulling');
         }
         clearTimeout(timer.current);
-        if ((0, _platformtaro.rn)()) {
-            timer.current = setTimeout(function() {
-                handleTouchEnd();
-            }, 300);
-        }
     };
     function _doRefresh() {
         _doRefresh = (0, _async_to_generator._)(function() {

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

@@ -12,7 +12,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  color: var(--nutui-gray-5);
+  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/radio/style/style.css

@@ -19,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-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;
@@ -29,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-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 .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,
@@ -63,28 +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-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;
@@ -93,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-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/radiogroup/style/style.css

@@ -19,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-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;
@@ -29,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-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 .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/range/range.js

@@ -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,

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

@@ -21,7 +21,7 @@
   width: var(--nutui-resultpage-width, 240px);
   margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12px);
   font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18px));
-  color: var(--nutui-resultpage-title-color, var(--nutui-gray-7));
+  color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a));
   font-weight: var(--nutui-font-weight-bold, 600);
   text-align: center;
 }
@@ -29,7 +29,7 @@
   width: var(--nutui-resultpage-width, 240px);
   line-height: var(--nutui-resultpage-description-line-height, 20px);
   font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-resultpage-description-color, var(--nutui-gray-6));
+  color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259));
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;

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

@@ -7,8 +7,8 @@
   align-items: center;
   width: var(--nutui-searchbar-width, 100%);
   padding: var(--nutui-searchbar-padding, 6px 16px);
-  background: var(--nutui-searchbar-background, var(--nutui-gray-3));
-  color: var(--nutui-searchbar-color, var(--nutui-gray-7));
+  background: var(--nutui-searchbar-background, var(--nutui-color-background, #f2f3f5));
+  color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;
   justify-content: center;
@@ -20,7 +20,7 @@
   justify-content: center;
   padding: var(--nutui-searchbar-content-padding, 0 12px);
   height: var(--nutui-searchbar-input-height, 32px);
-  background: var(--nutui-searchbar-content-background, var(--nutui-gray-1));
+  background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff));
   border-radius: var(--nutui-searchbar-content-border-radius, 4px);
 }
 .nut-searchbar-icon {
@@ -87,8 +87,8 @@
   width: 100%;
   padding: var(--nutui-searchbar-input-padding, 0 4px);
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-searchbar-input-text-color, var(--nutui-gray-7));
-  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-gray-7));
+  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));
+  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-title, #1a1a1a));
   background: transparent;
   text-align: var(--nutui-searchbar-input-text-align, left);
 }

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

@@ -9,7 +9,7 @@
   padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2px));
   align-items: center;
   border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4px));
-  background: var(--nutui-black-7);
+  background: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4));
   box-sizing: border-box;
 }
 
@@ -27,7 +27,7 @@
 }
 
 .nut-segmented-item-active {
-  background: var(--nutui-segmented-active-background, var(--nutui-black-7));
+  background: var(--nutui-segmented-active-background, var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)));
 }
 
 .nut-segmented-icon {

package/dist/cjs/packages/shortpassword/shortpassword.d.ts

@@ -1,5 +1,5 @@
 import React, { ForwardRefRenderFunction, ReactNode } from 'react';
-import { PopupProps } from "../popup/popup";
+import { PopupProps } from "../popup/index";
 export interface ShortPasswordProps extends PopupProps {
     value: string;
     visible: boolean;

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

@@ -4,19 +4,14 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
@@ -67,7 +62,7 @@
   position: fixed;
   min-height: 46%;
   max-height: 100%;
-  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1));
+  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
   font-size: var(--nutui-font-size-base, 14px);
 }
@@ -87,13 +82,13 @@
   align-items: center;
 }
 .nut-popup-title-title {
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
   line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-popup-title-description {
-  color: var(--nutui-gray-6);
+  color: var(--nutui-color-text, #505259);
   font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-font-weight, 400);
 }
@@ -112,7 +107,7 @@
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   cursor: pointer;
 }
 .nut-popup-title-right:active {
@@ -379,14 +374,14 @@
 .nut-shortpassword-title {
   line-height: 1;
   font-size: var(--nutui-font-size-l, 16px);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-shortpassword-description {
   margin-top: 12px;
   margin-bottom: 24px;
   line-height: 1;
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-gray-6);
+  color: var(--nutui-color-text, #505259);
 }
 .nut-shortpassword-input {
   padding: 0 0 10px;
@@ -415,9 +410,9 @@
   height: 41px;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--nutui-shortpassword-background-color, var(--nutui-gray-3));
+  background: var(--nutui-shortpassword-background-color, var(--nutui-color-background, #f2f3f5));
   border-radius: 4px;
-  border: 1px solid var(--nutui-shortpassword-border-color, var(--nutui-gray-3));
+  border: 1px solid var(--nutui-shortpassword-border-color, var(--nutui-color-background, #f2f3f5));
   display: flex;
   position: absolute;
   left: 0;
@@ -444,12 +439,12 @@
 .nut-shortpassword-message-error {
   line-height: 1;
   font-size: var(--nutui-font-size-xs, 11px);
-  color: var(--nutui-shortpassword-error, var(--nutui-brand-6));
+  color: var(--nutui-shortpassword-error, var(--nutui-color-primary, #ff0f23));
 }
 .nut-shortpassword-message-forget {
   line-height: 1;
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-shortpassword-forget, var(--nutui-gray-5));
+  color: var(--nutui-shortpassword-forget, var(--nutui-color-text-help, #888b94));
   display: flex;
   align-items: center;
 }
@@ -463,15 +458,15 @@
 }
 .nut-shortpassword-footer-cancel {
   background: #ffffff;
-  border: 1px solid var(--nutui-brand-6);
+  border: 1px solid var(--nutui-color-primary, #ff0f23);
   border-radius: 15px;
   padding: 8px 38px;
   line-height: 1;
   font-size: var(--nutui-font-size-base, 14px);
-  color: var(--nutui-brand-6);
+  color: var(--nutui-color-primary, #ff0f23);
 }
 .nut-shortpassword-footer-sure {
-  background: linear-gradient(135deg, var(--nutui-brand-6) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
+  background: linear-gradient(135deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
   border-radius: 15px;
   padding: 8px 38px;
   line-height: 1;
@@ -491,5 +486,5 @@
 }
 [dir=rtl] .nut-shortpassword-footer-sure,
 .nut-rtl .nut-shortpassword-footer-sure {
-  background: linear-gradient(-135deg, var(--nutui-brand-6) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
+  background: linear-gradient(-135deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
 }

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

@@ -8,7 +8,7 @@
   flex-shrink: 0;
   display: block;
   background-color: var(--nutui-sidebar-item-background, #ffffff);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   padding: var(--nutui-sidebar-item-padding, 24px 20px);
   box-sizing: border-box;
   overflow: auto;
@@ -30,7 +30,7 @@
   overflow: hidden;
 }
 .nut-sidebar-titles {
-  background: var(--nutui-sidebar-background-color, var(--nutui-gray-3));
+  background: var(--nutui-sidebar-background-color, var(--nutui-color-background, #f2f3f5));
   flex-direction: column;
   border-radius: var(--nutui-sidebar-border-radius, 0);
   height: 100%;
@@ -60,7 +60,7 @@
   justify-content: center;
   height: var(--nutui-sidebar-title-height, 52px);
   font-size: var(--nutui-sidebar-inactive-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-gray-6);
+  color: var(--nutui-color-text, #505259);
 }
 .nut-sidebar-titles-item-text {
   text-align: center;
@@ -69,11 +69,11 @@
 }
 .nut-sidebar-titles-item-active .nut-sidebar-titles-item-text {
   font-family: PingFangSC-Semibold;
-  color: var(--nutui-sidebar-active-color, var(--nutui-brand-6));
+  color: var(--nutui-sidebar-active-color, var(--nutui-color-primary, #ff0f23));
   font-weight: var(--nutui-sidebar-active-font-weight, var(--nutui-font-weight-bold, 600));
   font-size: var(--nutui-sidebar-active-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-sidebar-titles-item-disabled {
-  color: var(--nutui-gray-4);
+  color: var(--nutui-color-text-disabled, #c2c4cc);
   cursor: not-allowed;
 }

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

@@ -8,7 +8,7 @@
   flex-shrink: 0;
   display: block;
   background-color: var(--nutui-sidebar-item-background, #ffffff);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   padding: var(--nutui-sidebar-item-padding, 24px 20px);
   box-sizing: border-box;
   overflow: auto;