@arco-design/mobile-react 2.30.0 → 2.30.1

package/esm/carousel/index.js

@@ -722,7 +722,9 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
     // @en When noLoop is used, the blank space of spaceBetween needs to be exposed at the end, so when sliding to the last one, the transform value moves to the left by the corresponding width
 
     var translateDis = noLoop ? noLoopDis - (total > 1 && index === total - 1 ? spaceBetween : 0) * rtlRatio : dis;
-    var transStr = childSize > 0 ? translateDis + "px" : "-" + index * 100 + "%";
+    var initTranslateDis = -1 * index * 100; // bugfix: prop `style` did not match in ssr
+
+    var transStr = childSize > 0 ? "" + translateDis + (translateDis ? 'px' : '') : "" + initTranslateDis + (initTranslateDis ? '%' : '');
 
     if (vertical) {
       var _translateStyle = getStyleWithVendor({

package/esm/context-provider/index.d.ts

@@ -47,11 +47,15 @@ export interface GlobalContextParams {
      * @default false
      */
     useRtl?: boolean;
+    /**
+     * 当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效
+     * @en Triggered when the system's native dark mode changes, valid when useDarkMode=true
+     */
+    onDarkModeChange?: (isDark: boolean) => void;
 }
 export declare const defaultContext: GlobalContextParams;
 export declare const GlobalContext: React.Context<GlobalContextParams>;
 export interface ContextProviderProps extends GlobalContextParams {
-    onDarkModeChange?: (isDark: boolean) => void;
     children: React.ReactNode;
 }
 export declare type WithGlobalContext<T> = T & {

package/esm/context-provider/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["children", "useDarkMode", "isDarkMode", "darkModeSelector", "theme", "locale", "onDarkModeChange"],
     _excluded2 = ["context"];
-import React, { createContext, useState, useEffect, useCallback, useMemo } from 'react';
+import React, { createContext, useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { addCssRules, removeCssStyleDom, defaultLocale } from '@arco-design/mobile-utils';
 var DEFAULT_DARK_MODE_SELECTOR = 'arco-theme-dark';
 export var defaultContext = {
@@ -45,9 +45,15 @@ export default function ContextProvider(props) {
       isDarkModeState = _useState[0],
       setIsDarkModeState = _useState[1];
 
-  var setDarkModeState = function setDarkModeState(isDark) {
+  var mountedRef = useRef(false);
+
+  var setDarkModeState = function setDarkModeState(isDark, needChange) {
+    if (needChange === void 0) {
+      needChange = true;
+    }
+
     setIsDarkModeState(isDark);
-    onDarkModeChange && onDarkModeChange(isDark);
+    needChange && onDarkModeChange && onDarkModeChange(isDark);
   };
 
   var isDarkMode = useMemo(function () {
@@ -76,7 +82,7 @@ export default function ContextProvider(props) {
 
     if (useDarkMode) {
       var dark = matchMedia.matches;
-      setDarkModeState(dark);
+      setDarkModeState(dark, mountedRef.current);
 
       if (typeof matchMedia.addEventListener === 'function') {
         matchMedia.addEventListener('change', changeDarkMode);
@@ -85,6 +91,7 @@ export default function ContextProvider(props) {
       }
     }
 
+    mountedRef.current = true;
     return function () {
       if (useDarkMode) {
         if (typeof matchMedia.removeEventListener === 'function') {

package/esm/dialog/demo/style/css/mobile.css

@@ -509,7 +509,7 @@
   padding: 0.16rem 0.24rem;
   font-size: 0.28rem;
   line-height: 0.4rem;
-  background-color: #F2F3F5;
+  background-color:  #F7F8FA ;
   width: 100%;
   caret-color:  #165DFF ;
 }
@@ -536,6 +536,7 @@
   color:  #929293 ;
 }
 .arco-theme-dark .dialog-input-demo-input {
+  background-color:  hsla(0, 0%, 100%, 0.08) ;
   caret-color:  #3C7EFF ;
 }
 .arco-theme-dark .dialog-input-demo-hint {

package/esm/dialog/demo/style/mobile.less

@@ -17,7 +17,7 @@
         .rem(padding, 8, 12);
         .rem(font-size, 14);
         .rem(line-height, 20);
-        background-color: #F2F3F5;
+        .use-var(background-color, card-background-color);
         width: 100%;
         .use-var(caret-color, primary-color);
     }
@@ -59,6 +59,7 @@
   .dialog-input-demo {
     &-input {
       @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-card-background-color);
         .use-var(caret-color, dark-primary-color);
       }
     }

package/esm/form/form-item.js

@@ -70,12 +70,14 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
           fieldValidator.validate((_fieldValidator$valid = {}, _fieldValidator$valid[field] = value, _fieldValidator$valid), function (errorsMap) {
             var _getErrorAndWarnings = getErrorAndWarnings((errorsMap == null ? void 0 : errorsMap[field]) || []),
                 errors = _getErrorAndWarnings.errors,
-                warnings = _getErrorAndWarnings.warnings;
+                warnings = _getErrorAndWarnings.warnings,
+                errorTypes = _getErrorAndWarnings.errorTypes;
 
             _this._errors = errors;
             onValidateStatusChange({
               errors: _this._errors,
-              warnings: warnings
+              warnings: warnings,
+              errorTypes: errorTypes
             });
             return resolve({
               errors: _this._errors,
@@ -319,16 +321,22 @@ export default /*#__PURE__*/forwardRef(function (props, ref) {
       errors = _useState[0],
       setErrors = _useState[1];
 
-  var _useState2 = useState([]),
-      warnings = _useState2[0],
-      setWarnings = _useState2[1];
+  var _useState2 = useState(null),
+      errorTypes = _useState2[0],
+      setErrorTypes = _useState2[1];
+
+  var _useState3 = useState([]),
+      warnings = _useState3[0],
+      setWarnings = _useState3[1];
 
   var formItemRef = useRef(null);
 
   var onValidateStatusChange = function onValidateStatusChange(validateResult) {
     var _errors = validateResult.errors,
-        _warnings = validateResult.warnings;
+        _warnings = validateResult.warnings,
+        _errorTypes = validateResult.errorTypes;
     setErrors(_errors.length ? _errors[0] : null);
+    setErrorTypes(_errorTypes.length ? _errorTypes[0] : null);
     setWarnings(_warnings);
   };
 
@@ -350,7 +358,7 @@ export default /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: cls(prefixCls + "-form-item", prefixCls + "-form-item-" + (itemLayout || layout), className, (_cls = {
       disabled: fieldDisabled
-    }, _cls[prefixCls + "-form-item-error"] = !!errors, _cls[prefixCls + "-form-item-warning"] = Boolean(!errors && warnings), _cls)),
+    }, _cls[prefixCls + "-form-item-error"] = !!errors, _cls[prefixCls + "-form-item-warning"] = Boolean(!errors && warnings), _cls[prefixCls + "-form-item-error-" + errorTypes] = errorTypes, _cls)),
     style: style,
     ref: formItemRef
   }, /*#__PURE__*/React.createElement("div", {

package/esm/form/type.d.ts

@@ -344,8 +344,9 @@ export interface IFormItemInnerProps {
      * @en The callback when validating status changes
      */
     onValidateStatusChange: (data: {
-        errors: any;
-        warnings: any;
+        errors: ReactNode[];
+        warnings: ReactNode[];
+        errorTypes: string[];
     }) => void;
     /**
      * 获取内部表单项的dom

package/esm/form/utils.d.ts

@@ -3,4 +3,5 @@ export declare const isFieldRequired: (rules?: IRules[]) => boolean;
 export declare const getErrorAndWarnings: (result: ValidatorError[]) => {
     warnings: string[];
     errors: string[];
+    errorTypes: string[];
 };

package/esm/form/utils.js

@@ -10,11 +10,13 @@ export var isFieldRequired = function isFieldRequired(rules) {
 export var getErrorAndWarnings = function getErrorAndWarnings(result) {
   var errors = [];
   var warnings = [];
+  var errorTypes = [];
   result.map(function (_ref) {
     var _ref$message = _ref.message,
         message = _ref$message === void 0 ? [] : _ref$message,
         _ref$validateLevel = _ref.validateLevel,
-        validateLevel = _ref$validateLevel === void 0 ? 'error' : _ref$validateLevel;
+        validateLevel = _ref$validateLevel === void 0 ? 'error' : _ref$validateLevel,
+        resultErrorTypes = _ref.errorTypes;
 
     if (!(message != null && message.length)) {
       return;
@@ -24,10 +26,12 @@ export var getErrorAndWarnings = function getErrorAndWarnings(result) {
       warnings = [].concat(warnings, message);
     } else {
       errors = [].concat(errors, message);
+      errorTypes = [].concat(errorTypes, resultErrorTypes);
     }
   });
   return {
     warnings: warnings,
-    errors: errors
+    errors: errors,
+    errorTypes: errorTypes
   };
 };

package/esm/input/demo/style/css/mobile.css

@@ -509,23 +509,23 @@
 }
 #demo-input .demo-input-maxlength {
   font-size: 0.28rem;
-  color: #86909c;
+  color:  #86909c ;
 }
 #demo-input .demo-input-maxlength.error {
-  color: #f53f3f;
+  color:  #F53F3F ;
 }
 #demo-input .demo-input-red-placeholder {
-  caret-color: #f53f3f;
+  caret-color:  #F53F3F ;
 }
 #demo-input .demo-input-red-placeholder::-webkit-input-placeholder {
-  color: #f53f3f;
+  color:  #F53F3F ;
 }
 #demo-input .demo-input-red-placeholder::placeholder {
-  color: #f53f3f;
+  color:  #F53F3F ;
 }
 #demo-input .demo-input-error-hint {
   font-size: 0.24rem;
-  color: #f53f3f;
+  color:  #F53F3F ;
   padding: 0 0 0.32rem 2.08rem;
   margin-top: -0.16rem;
 }
@@ -579,6 +579,24 @@
   color:  #929293 ;
 }
 .arco-theme-dark #demo-input .arco-input-container {
-  background:  #17171A ;
+  background:  #232324 ;
+}
+.arco-theme-dark #demo-input .demo-input-maxlength {
+  color:  #929293 ;
+}
+.arco-theme-dark #demo-input .demo-input-maxlength.error {
+  color:  #F76965 ;
+}
+.arco-theme-dark #demo-input .demo-input-red-placeholder {
+  caret-color:  #F76965 ;
+}
+.arco-theme-dark #demo-input .demo-input-red-placeholder::-webkit-input-placeholder {
+  color:  #F76965 ;
+}
+.arco-theme-dark #demo-input .demo-input-red-placeholder::placeholder {
+  color:  #F76965 ;
+}
+.arco-theme-dark #demo-input .demo-input-error-hint {
+  color:  #F76965 ;
 }
 /********************* End *************************/

package/esm/input/demo/style/mobile.less

@@ -8,7 +8,7 @@
         background: transparent;
     }
     .@{prefix}-input-container {
-        .use-var(background, background-color);
+        .use-var(background, cell-background-color);
 
         &:not(:first-of-type) {
             .rem(margin-top, 8);
@@ -17,24 +17,24 @@
 
     .demo-input-maxlength {
         .rem(font-size, 14);
-        color: #86909c;
+        .use-var(color, sub-info-font-color);
 
         &.error {
-            color: #f53f3f;
+            .use-var(color, danger-color);
         }
     }
 
     .demo-input-red-placeholder {
-        caret-color: #f53f3f;
+        .use-var(caret-color, danger-color);
 
         &::placeholder {
-            color: #f53f3f;
+            .use-var(color, danger-color);
         }
     }
 
     .demo-input-error-hint {
         .rem(font-size, 12);
-        color: #f53f3f;
+        .use-var(color, danger-color);
         .rem(padding, 0, 0, 16, 104);
         .rem(margin-top, -8);
 
@@ -99,7 +99,32 @@
   #demo-input {
     .@{prefix}-input-container {
       @{arco-dark-mode-selector} & {
-        .use-var(background, dark-background-color);
+        .use-var(background, dark-cell-background-color);
+      }
+    }
+    .demo-input-maxlength {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-sub-info-font-color);
+      }
+      &.error {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-danger-color);
+        }
+      }
+    }
+    .demo-input-red-placeholder {
+      @{arco-dark-mode-selector} & {
+        .use-var(caret-color, dark-danger-color);
+      }
+      &::placeholder {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-danger-color);
+        }
+      }
+    }
+    .demo-input-error-hint {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-danger-color);
       }
     }
   }

package/esm/nav-bar/style/css/index.css

@@ -650,7 +650,7 @@
 }
 .arco-theme-dark .arco-nav-bar {
   color:  #f6f6f6 ;
-  background:  #232324 ;
+  background:  #17171A ;
 }
 .arco-theme-dark .arco-nav-bar-wrapper.arco-nav-bar-wrapper-border {
   position: relative;

package/esm/notify/demo/style/css/mobile.css

@@ -512,7 +512,8 @@
   padding: 0 0.32rem;
   height: 0.72rem;
   color: inherit;
-  border: 0.5px solid #e5e6eb;
+  border: 0.5px solid;
+  border-color:  #e5e6eb ;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
@@ -538,4 +539,7 @@
   background:  #2e2e30 ;
   color:  #929293 ;
 }
+.arco-theme-dark #demo-notify .notify-custom-content {
+  border-color:  #484849 ;
+}
 /********************* End *************************/

package/esm/notify/demo/style/mobile.less

@@ -17,7 +17,8 @@
         .rem(padding, 0, 16);
         .rem(height, 36);
         color: inherit;
-        border: 0.5px solid #e5e6eb;
+        border: 0.5px solid;
+        .use-var(border-color, line-color);
         display: flex;
         justify-content: center;
         align-items: center;
@@ -48,5 +49,12 @@
       .use-var(color, dark-sub-info-font-color);
     }
   }
+  #demo-notify {
+    .notify-custom-content {
+      @{arco-dark-mode-selector} & {
+        .use-var(border-color, dark-line-color);
+      }
+    }
+  }
 }
 /********************* End *************************/

package/esm/popover/demo/style/css/mobile.css

@@ -605,9 +605,9 @@
           justify-content: center;
   width: 64px;
   height: 24px;
-  background: #fff;
+  background-color:  #FFFFFF ;
   border-radius: 40px;
-  color: #1d2129;
+  color:  #1d2129 ;
   font-size: 12px;
 }
 #demo-popover .custom-demo-wrapper {
@@ -642,4 +642,8 @@
   background:  #2e2e30 ;
   color:  #929293 ;
 }
+.arco-theme-dark #demo-popover .suffix-demo-wrapper .custom-suffix-btn {
+  background-color:  #232324 ;
+  color:  #f6f6f6 ;
+}
 /********************* End *************************/

package/esm/popover/demo/style/mobile.less

@@ -78,9 +78,9 @@
             justify-content: center;
             width: 64px;
             height: 24px;
-            background: #fff;
+            .use-var(background-color, container-background-color);
             border-radius: 40px;
-            color: #1d2129;
+            .use-var(color, font-color);
             font-size: 12px;
         }
     }
@@ -121,5 +121,15 @@
       .use-var(color, dark-sub-info-font-color);
     }
   }
+  #demo-popover {
+    .suffix-demo-wrapper {
+      .custom-suffix-btn {
+        @{arco-dark-mode-selector} & {
+          .use-var(background-color, dark-container-background-color);
+          .use-var(color, dark-font-color);
+        }
+      }
+    }
+  }
 }
 /********************* End *************************/

package/esm/tabs/demo/style/css/mobile.css

@@ -496,6 +496,7 @@
  */
 #demo-tabs .arcodesign-mobile-demo-content {
   padding: 0;
+  background:  #FFFFFF ;
 }
 #demo-tabs .demo-tab-content {
   display: -webkit-box;
@@ -551,8 +552,8 @@
           transform: rotate(180deg);
 }
 .arco-theme-dark #demo-tabs .demo-tabs-add-extra {
-  background: -webkit-linear-gradient(right, #232324 66.04%, rgba(35, 35, 36, 0) 105%);
-  background: linear-gradient(270deg, #232324 66.04%, rgba(35, 35, 36, 0) 105%);
+  background: -webkit-linear-gradient(right, #17171A 66.04%, rgba(23, 23, 26, 0) 105%);
+  background: linear-gradient(270deg, #17171A 66.04%, rgba(23, 23, 26, 0) 105%);
 }
 #demo-tabs .demo-tab-custom-bar .arco-tab-cell-container-wrap {
   height: 1.52rem;
@@ -603,6 +604,9 @@
   background:  #2e2e30 ;
   color:  #929293 ;
 }
+.arco-theme-dark #demo-tabs .arcodesign-mobile-demo-content {
+  background:  #17171A ;
+}
 .arco-theme-dark #demo-tabs .demo-tab-content {
   color:  #929293 ;
 }

package/esm/tabs/demo/style/mobile.less

@@ -4,6 +4,7 @@
 
     .arcodesign-mobile-demo-content {
         padding: 0;
+        .use-var(background, background-color);
     }
 
     .demo-tab-content {
@@ -41,7 +42,7 @@
             transform: rotate(180deg);
         }
         .arco-theme-dark & {
-            background: linear-gradient(270deg, @dark-container-background-color 66.04%, rgba(@dark-container-background-color, 0) 105%);
+            background: linear-gradient(270deg, @dark-background-color 66.04%, rgba(@dark-background-color, 0) 105%);
         }
     }
 
@@ -118,6 +119,11 @@
     }
   }
   #demo-tabs {
+    .arcodesign-mobile-demo-content {
+      @{arco-dark-mode-selector} & {
+        .use-var(background, dark-background-color);
+      }
+    }
     .demo-tab-content {
       @{arco-dark-mode-selector} & {
         .use-var(color, dark-sub-info-font-color);

package/esm/tabs/style/css/index.css

@@ -1052,7 +1052,7 @@
   color:  #f6f6f6 ;
 }
 .arco-theme-dark .arco-tab-cell-container-wrap {
-  background:  #232324 ;
+  background:  #17171A ;
 }
 .arco-theme-dark .arco-tab-cell-container-inner.has-divider.pos-top {
   box-shadow: 0 -1PX 0 0 #484849 inset;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.30.0",
+    "version": "2.30.1",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.17.0",
+        "@arco-design/mobile-utils": "2.17.1",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -49,5 +49,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "1fcfc18668d480891d2fc6052b4dc2d84557e97e"
+    "gitHead": "219839170a2387d4b13338636023b9177073fba7"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -272,8 +272,8 @@
     --checkbox-text-disabled-opacity: 0.5;
     --checkbox-group-gutter: ~`pxtorem(24)`;
     --tabs-tab-bar-font-size: ~`pxtorem(15)`;
-    --dark-tabs-tab-bar-background: var(--dark-container-background-color);
-    --tabs-tab-bar-background: var(--container-background-color);
+    --dark-tabs-tab-bar-background: var(--dark-background-color);
+    --tabs-tab-bar-background: var(--background-color);
     --tabs-tab-bar-height: ~`pxtorem(42)`;
     --tabs-tab-bar-width: ~`pxtorem(78)`;
     --tabs-tab-bar-horizontal-height: ~`pxtorem(54)`;
@@ -318,8 +318,8 @@
     --nav-bar-height: ~`pxtorem(44)`;
     --dark-nav-bar-bottom-border-color: var(--dark-line-color);
     --nav-bar-bottom-border-color: var(--line-color);
-    --dark-nav-bar-background: var(--dark-container-background-color);
-    --nav-bar-background: var(--container-background-color);
+    --dark-nav-bar-background: var(--dark-background-color);
+    --nav-bar-background: var(--background-color);
     --dark-nav-bar-font-color: var(--dark-font-color);
     --nav-bar-font-color: var(--font-color);
     --nav-bar-two-sides-font-size: ~`pxtorem(16)`;

package/tokens/app/arcodesign/default/index.js

@@ -283,8 +283,8 @@ var tokens = {
   "checkbox-text-disabled-opacity": "0.5",
   "checkbox-group-gutter": "0.48rem",
   "tabs-tab-bar-font-size": "0.3rem",
-  "dark-tabs-tab-bar-background": "var(--dark-container-background-color)",
-  "tabs-tab-bar-background": "var(--container-background-color)",
+  "dark-tabs-tab-bar-background": "var(--dark-background-color)",
+  "tabs-tab-bar-background": "var(--background-color)",
   "tabs-tab-bar-height": "0.84rem",
   "tabs-tab-bar-width": "1.56rem",
   "tabs-tab-bar-horizontal-height": "1.08rem",
@@ -329,8 +329,8 @@ var tokens = {
   "nav-bar-height": "0.88rem",
   "dark-nav-bar-bottom-border-color": "var(--dark-line-color)",
   "nav-bar-bottom-border-color": "var(--line-color)",
-  "dark-nav-bar-background": "var(--dark-container-background-color)",
-  "nav-bar-background": "var(--container-background-color)",
+  "dark-nav-bar-background": "var(--dark-background-color)",
+  "nav-bar-background": "var(--background-color)",
   "dark-nav-bar-font-color": "var(--dark-font-color)",
   "nav-bar-font-color": "var(--font-color)",
   "nav-bar-two-sides-font-size": "0.32rem",

package/tokens/app/arcodesign/default/index.json

@@ -3239,9 +3239,9 @@
         "cssKey": "dark-nav-bar-background",
         "desc": "",
         "override": "",
-        "value": "@dark-container-background-color",
-        "jsValue": "@global@darkContainerBackgroundColor",
-        "staticValue": "#232324"
+        "value": "@dark-background-color",
+        "jsValue": "@global@darkBackgroundColor",
+        "staticValue": "#17171A"
     },
     "darkNavBarBottomBorderColor": {
         "cssKey": "dark-nav-bar-bottom-border-color",
@@ -4063,9 +4063,9 @@
         "cssKey": "dark-tabs-tab-bar-background",
         "desc": "",
         "override": "",
-        "value": "@dark-container-background-color",
-        "jsValue": "@global@darkContainerBackgroundColor",
-        "staticValue": "#232324"
+        "value": "@dark-background-color",
+        "jsValue": "@global@darkBackgroundColor",
+        "staticValue": "#17171A"
     },
     "darkTabsTabBarCardColor": {
         "cssKey": "dark-tabs-tab-bar-card-color",
@@ -6737,8 +6737,8 @@
         "cssKey": "nav-bar-background",
         "desc": "navBar 背景色",
         "override": "",
-        "value": "@container-background-color",
-        "jsValue": "@global@containerBackgroundColor",
+        "value": "@background-color",
+        "jsValue": "@global@backgroundColor",
         "staticValue": "#FFFFFF",
         "localeDesc": {
             "ch": "navBar 背景色",
@@ -10709,8 +10709,8 @@
         "cssKey": "tabs-tab-bar-background",
         "desc": "tabs tabbar 背景色",
         "override": "tab-bar-background",
-        "value": "@container-background-color",
-        "jsValue": "@global@containerBackgroundColor",
+        "value": "@background-color",
+        "jsValue": "@global@backgroundColor",
         "staticValue": "#FFFFFF",
         "localeDesc": {
             "ch": "tabs tabbar 背景色",

package/tokens/app/arcodesign/default/index.less

@@ -271,8 +271,8 @@
 @checkbox-text-disabled-opacity: 0.5;
 @checkbox-group-gutter: ~`pxtorem(24)`;
 @tabs-tab-bar-font-size: ~`pxtorem(15)`;
-@dark-tabs-tab-bar-background: @dark-container-background-color;
-@tabs-tab-bar-background: @container-background-color;
+@dark-tabs-tab-bar-background: @dark-background-color;
+@tabs-tab-bar-background: @background-color;
 @tabs-tab-bar-height: ~`pxtorem(42)`;
 @tabs-tab-bar-width: ~`pxtorem(78)`;
 @tabs-tab-bar-horizontal-height: ~`pxtorem(54)`;
@@ -317,8 +317,8 @@
 @nav-bar-height: ~`pxtorem(44)`;
 @dark-nav-bar-bottom-border-color: @dark-line-color;
 @nav-bar-bottom-border-color: @line-color;
-@dark-nav-bar-background: @dark-container-background-color;
-@nav-bar-background: @container-background-color;
+@dark-nav-bar-background: @dark-background-color;
+@nav-bar-background: @background-color;
 @dark-nav-bar-font-color: @dark-font-color;
 @nav-bar-font-color: @font-color;
 @nav-bar-two-sides-font-size: ~`pxtorem(16)`;

package/umd/carousel/index.js

@@ -742,7 +742,9 @@
       // @en When noLoop is used, the blank space of spaceBetween needs to be exposed at the end, so when sliding to the last one, the transform value moves to the left by the corresponding width
 
       var translateDis = noLoop ? noLoopDis - (total > 1 && index === total - 1 ? spaceBetween : 0) * rtlRatio : dis;
-      var transStr = childSize > 0 ? translateDis + "px" : "-" + index * 100 + "%";
+      var initTranslateDis = -1 * index * 100; // bugfix: prop `style` did not match in ssr
+
+      var transStr = childSize > 0 ? "" + translateDis + (translateDis ? 'px' : '') : "" + initTranslateDis + (initTranslateDis ? '%' : '');
 
       if (vertical) {
         var _translateStyle = (0, _helpers.getStyleWithVendor)({