@arco-design/mobile-react 2.30.10 → 2.31.1

package/style/css/public.css

@@ -152,40 +152,6 @@
  * }
  * ```
  */
-/**
- * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
- * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
- * @param @property css属性名
- * @param @property {en} css property
- * @param @value css属性值
- * @param @value {en} css property value
- * @param @rules 自定义的复写规则，默认重置为initial
- * @param @rules {en} customized rewrite rules, default to initial
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .set-prop-with-rtl(right, auto);
- * }
- * ```
- */
-/**
- * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
- * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
- * @param @property css属性名
- * @param @property {en} css property
- * @param @value css属性值
- * @param @value {en} css property value
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .set-value-with-rtl(text-align, left);
- * }
- * ```
- */
 /**
  * 设置Loading组件颜色
  * @desc {en} set Loading component color
@@ -342,6 +308,56 @@
  * }
  * ```
  */
+/**
+ * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
+ * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @param @rules 自定义的复写规则，默认重置为initial
+ * @param @rules {en} customized rewrite rules, default to initial
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .set-prop-with-rtl(right, auto);
+ * }
+ * ```
+ */
+/**
+ * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
+ * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .set-value-with-rtl(text-align, left);
+ * }
+ * ```
+ */
+/**
+ * 在 rtl 模式下，自定义样式规则
+ * @desc {en} custom style in RTL mode
+ * @param @rules 对应的rtl模式下的规则
+ * @param @rules {en} property with rtl
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .style-with-rtl({
+ *         transform: scale(-1);
+ *     });
+ * }
+ * ```
+ */
 /**
  * 0.5px 的边框线
  * @desc {en} a border line of 0.5 pixels

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

@@ -1064,4 +1064,31 @@
     --skeleton-grid-text-height: ~`pxtorem(16)`;
     --skeleton-medium-gutter: ~`pxtorem(8)`;
     --skeleton-large-gutter: ~`pxtorem(20)`;
+    --uploader-item-height: ~`pxtorem(36)`;
+    --uploader-item-margin-top: ~`pxtorem(16)`;
+    --uploader-item-padding: 0 ~`pxtorem(12)`;
+    --dark-uploader-item-background-color: var(--dark-card-background-color);
+    --uploader-item-background-color: var(--card-background-color);
+    --uploader-file-icon-font-size: ~`pxtorem(16)`;
+    --uploader-file-icon-margin-right: ~`pxtorem(12)`;
+    --dark-uploader-file-icon-color: var(--dark-sub-font-color);
+    --uploader-file-icon-color: var(--sub-font-color);
+    --uploader-item-text-font-size: ~`pxtorem(14)`;
+    --uploader-item-border-radius: ~`pxtorem(2)`;
+    --dark-uploader-item-text-color: var(--dark-font-color);
+    --uploader-item-text-color: var(--font-color);
+    --uploader-loaded-icon-font-size: ~`pxtorem(16)`;
+    --dark-uploader-loaded-icon-color: var(--dark-success-color);
+    --uploader-loaded-icon-color: var(--success-color);
+    --uploader-error-text-font-size: ~`pxtorem(12)`;
+    --dark-uploader-error-text-color: var(--dark-primary-color);
+    --uploader-error-text-color: var(--primary-color);
+    --uploader-delete-icon-font-size: ~`pxtorem(12)`;
+    --uploader-delete-icon-padding-left: ~`pxtorem(12)`;
+    --dark-uploader-delete-icon-color: var(--dark-sub-font-color);
+    --uploader-delete-icon-color: var(--sub-font-color);
+    --dark-uploader-disabled-delete-icon-color: var(--dark-disabled-color);
+    --uploader-disabled-delete-icon-color: var(--disabled-color);
+    --dark-uploader-item-text-error-color: var(--dark-danger-color);
+    --uploader-item-text-error-color: var(--danger-color);
 }

package/tokens/app/arcodesign/default/index.d.ts

@@ -1063,6 +1063,33 @@ export interface ArcodesignToken extends Record<string, string> {
     'skeleton-grid-text-height': string;
     'skeleton-medium-gutter': string;
     'skeleton-large-gutter': string;
+    'uploader-item-height': string;
+    'uploader-item-margin-top': string;
+    'uploader-item-padding': string;
+    'dark-uploader-item-background-color': string;
+    'uploader-item-background-color': string;
+    'uploader-file-icon-font-size': string;
+    'uploader-file-icon-margin-right': string;
+    'dark-uploader-file-icon-color': string;
+    'uploader-file-icon-color': string;
+    'uploader-item-text-font-size': string;
+    'uploader-item-border-radius': string;
+    'dark-uploader-item-text-color': string;
+    'uploader-item-text-color': string;
+    'uploader-loaded-icon-font-size': string;
+    'dark-uploader-loaded-icon-color': string;
+    'uploader-loaded-icon-color': string;
+    'uploader-error-text-font-size': string;
+    'dark-uploader-error-text-color': string;
+    'uploader-error-text-color': string;
+    'uploader-delete-icon-font-size': string;
+    'uploader-delete-icon-padding-left': string;
+    'dark-uploader-delete-icon-color': string;
+    'uploader-delete-icon-color': string;
+    'dark-uploader-disabled-delete-icon-color': string;
+    'uploader-disabled-delete-icon-color': string;
+    'dark-uploader-item-text-error-color': string;
+    'uploader-item-text-error-color': string;
 }
 declare const tokens: ArcodesignToken;
 export default tokens;

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

@@ -1074,7 +1074,34 @@ var tokens = {
   "skeleton-grid-text-width": "1.28rem",
   "skeleton-grid-text-height": "0.32rem",
   "skeleton-medium-gutter": "0.16rem",
-  "skeleton-large-gutter": "0.4rem"
+  "skeleton-large-gutter": "0.4rem",
+  "uploader-item-height": "0.72rem",
+  "uploader-item-margin-top": "0.32rem",
+  "uploader-item-padding": "0 0.24rem",
+  "dark-uploader-item-background-color": "var(--dark-card-background-color)",
+  "uploader-item-background-color": "var(--card-background-color)",
+  "uploader-file-icon-font-size": "0.32rem",
+  "uploader-file-icon-margin-right": "0.24rem",
+  "dark-uploader-file-icon-color": "var(--dark-sub-font-color)",
+  "uploader-file-icon-color": "var(--sub-font-color)",
+  "uploader-item-text-font-size": "0.28rem",
+  "uploader-item-border-radius": "0.04rem",
+  "dark-uploader-item-text-color": "var(--dark-font-color)",
+  "uploader-item-text-color": "var(--font-color)",
+  "uploader-loaded-icon-font-size": "0.32rem",
+  "dark-uploader-loaded-icon-color": "var(--dark-success-color)",
+  "uploader-loaded-icon-color": "var(--success-color)",
+  "uploader-error-text-font-size": "0.24rem",
+  "dark-uploader-error-text-color": "var(--dark-primary-color)",
+  "uploader-error-text-color": "var(--primary-color)",
+  "uploader-delete-icon-font-size": "0.24rem",
+  "uploader-delete-icon-padding-left": "0.24rem",
+  "dark-uploader-delete-icon-color": "var(--dark-sub-font-color)",
+  "uploader-delete-icon-color": "var(--sub-font-color)",
+  "dark-uploader-disabled-delete-icon-color": "var(--dark-disabled-color)",
+  "uploader-disabled-delete-icon-color": "var(--disabled-color)",
+  "dark-uploader-item-text-error-color": "var(--dark-danger-color)",
+  "uploader-item-text-error-color": "var(--danger-color)"
 };
 var _default = tokens;
 exports["default"] = _default;

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

@@ -4283,6 +4283,70 @@
         "jsValue": "@global@darkMaskContentColor",
         "staticValue": "rgba(255, 255, 255, 0.9)"
     },
+    "darkUploaderDeleteIconColor": {
+        "cssKey": "dark-uploader-delete-icon-color",
+        "desc": "",
+        "override": "",
+        "value": "@dark-sub-font-color",
+        "jsValue": "@global@darkSubFontColor",
+        "staticValue": "#c5c5c5"
+    },
+    "darkUploaderDisabledDeleteIconColor": {
+        "cssKey": "dark-uploader-disabled-delete-icon-color",
+        "desc": "",
+        "override": "",
+        "value": "@dark-disabled-color",
+        "jsValue": "@global@darkDisabledColor",
+        "staticValue": "#5f5f60"
+    },
+    "darkUploaderErrorTextColor": {
+        "cssKey": "dark-uploader-error-text-color",
+        "desc": "",
+        "override": "",
+        "value": "@dark-primary-color",
+        "jsValue": "@global@darkPrimaryColor",
+        "staticValue": "#3C7EFF"
+    },
+    "darkUploaderFileIconColor": {
+        "cssKey": "dark-uploader-file-icon-color",
+        "desc": "",
+        "override": "",
+        "value": "@dark-sub-font-color",
+        "jsValue": "@global@darkSubFontColor",
+        "staticValue": "#c5c5c5"
+    },
+    "darkUploaderItemBackgroundColor": {
+        "cssKey": "dark-uploader-item-background-color",
+        "desc": "",
+        "override": "",
+        "value": "@dark-card-background-color",
+        "jsValue": "@global@darkCardBackgroundColor",
+        "staticValue": "hsla(0, 0%, 100%, 0.08)"
+    },
+    "darkUploaderItemTextColor": {
+        "cssKey": "dark-uploader-item-text-color",
+        "desc": "",
+        "override": "",
+        "value": "@dark-font-color",
+        "jsValue": "@global@darkFontColor",
+        "staticValue": "#f6f6f6"
+    },
+    "darkUploaderItemTextErrorColor": {
+        "cssKey": "dark-uploader-item-text-error-color",
+        "desc": "",
+        "override": "",
+        "value": "@dark-danger-color",
+        "jsValue": "@global@darkDangerColor",
+        "staticValue": "#F76965"
+    },
+    "darkUploaderLoadedIconColor": {
+        "cssKey": "dark-uploader-loaded-icon-color",
+        "desc": "",
+        "override": "",
+        "value": "@dark-success-color",
+        "jsValue": "@global@darkSuccessColor",
+        "staticValue": "#27C346"
+    },
     "darkWarningColor": {
         "cssKey": "dark-warning-color",
         "desc": "",
@@ -11713,6 +11777,234 @@
             "en": "Transition fade duration"
         }
     },
+    "uploaderDeleteIconColor": {
+        "cssKey": "uploader-delete-icon-color",
+        "desc": "文件上传组件上传列表删除图标颜色",
+        "override": "",
+        "value": "@sub-font-color",
+        "jsValue": "@global@subFontColor",
+        "staticValue": "#4e5969",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表删除图标颜色",
+            "en": "Color of the delete icon in the upload list"
+        }
+    },
+    "uploaderDeleteIconFontSize": {
+        "cssKey": "uploader-delete-icon-font-size",
+        "desc": "文件上传组件上传列表删除图标大小",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表删除图标大小",
+            "en": "Font size of the delete icon in the upload list"
+        }
+    },
+    "uploaderDeleteIconPaddingLeft": {
+        "cssKey": "uploader-delete-icon-padding-left",
+        "desc": "文件上传组件上传列表删除图标左内边距",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表删除图标左内边距",
+            "en": "Left padding of the delete icon in the upload list"
+        }
+    },
+    "uploaderDisabledDeleteIconColor": {
+        "cssKey": "uploader-disabled-delete-icon-color",
+        "desc": "文件上传组件禁用状态删除图标颜色",
+        "override": "",
+        "value": "@disabled-color",
+        "jsValue": "@global@disabledColor",
+        "staticValue": "#c9cdd4",
+        "localeDesc": {
+            "ch": "文件上传组件禁用状态删除图标颜色",
+            "en": "Disabled color of the delete icon in the upload list"
+        }
+    },
+    "uploaderErrorTextColor": {
+        "cssKey": "uploader-error-text-color",
+        "desc": "文件上传组件上传列表错误文字颜色",
+        "override": "",
+        "value": "@primary-color",
+        "jsValue": "@global@primaryColor",
+        "staticValue": "#165DFF",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表错误文字颜色",
+            "en": "Error color of the text in the uploader list"
+        }
+    },
+    "uploaderErrorTextFontSize": {
+        "cssKey": "uploader-error-text-font-size",
+        "desc": "文件上传组件上传列表错误文字大小",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表错误文字大小",
+            "en": "Error font size of the text in the uploader list"
+        }
+    },
+    "uploaderFileIconColor": {
+        "cssKey": "uploader-file-icon-color",
+        "desc": "文件上传组件上传列表文件图标颜色",
+        "override": "",
+        "value": "@sub-font-color",
+        "jsValue": "@global@subFontColor",
+        "staticValue": "#4e5969",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表文件图标颜色",
+            "en": "Color of the file icon in the uploader list"
+        }
+    },
+    "uploaderFileIconFontSize": {
+        "cssKey": "uploader-file-icon-font-size",
+        "desc": "文件上传组件上传列表文件图标大小",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表文件图标大小",
+            "en": "Font size of the file icon in the uploader list"
+        }
+    },
+    "uploaderFileIconMarginRight": {
+        "cssKey": "uploader-file-icon-margin-right",
+        "desc": "文件上传组件上传列表文件图标右边距",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表文件图标右边距",
+            "en": "Margin right of the file icon in the uploader list"
+        }
+    },
+    "uploaderItemBackgroundColor": {
+        "cssKey": "uploader-item-background-color",
+        "desc": "文件上传组件上传列表背景颜色",
+        "override": "",
+        "value": "@card-background-color",
+        "jsValue": "@global@cardBackgroundColor",
+        "staticValue": "#F7F8FA",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表背景颜色",
+            "en": "Background color of the uploader list"
+        }
+    },
+    "uploaderItemBorderRadius": {
+        "cssKey": "uploader-item-border-radius",
+        "desc": "文件上传组件上传列表外边框圆角",
+        "override": "",
+        "value": "~`pxtorem(2)`",
+        "jsValue": "@getRem@2",
+        "staticValue": "0.04rem",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表外边框圆角",
+            "en": "Border radius of the uploader list item"
+        }
+    },
+    "uploaderItemHeight": {
+        "cssKey": "uploader-item-height",
+        "desc": "文件上传组件上传列表高度",
+        "override": "",
+        "value": "~`pxtorem(36)`",
+        "jsValue": "@getRem@36",
+        "staticValue": "0.72rem",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表高度",
+            "en": "Height of the uploader list item"
+        }
+    },
+    "uploaderItemMarginTop": {
+        "cssKey": "uploader-item-margin-top",
+        "desc": "文件上传组件上传列表上边距",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表上边距",
+            "en": "Margin top of the uploader list item"
+        }
+    },
+    "uploaderItemPadding": {
+        "cssKey": "uploader-item-padding",
+        "desc": "文件上传组件上传列表内边距",
+        "override": "",
+        "value": "0 ~`pxtorem(12)`",
+        "jsValue": "0 @getRem@12",
+        "staticValue": "0 0.24rem",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表内边距",
+            "en": "Padding of the uploader list item"
+        }
+    },
+    "uploaderItemTextColor": {
+        "cssKey": "uploader-item-text-color",
+        "desc": "文件上传组件上传列表文字颜色",
+        "override": "",
+        "value": "@font-color",
+        "jsValue": "@global@fontColor",
+        "staticValue": "#1d2129",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表文字颜色",
+            "en": "Color of the text in the uploader list"
+        }
+    },
+    "uploaderItemTextErrorColor": {
+        "cssKey": "uploader-item-text-error-color",
+        "desc": "文件上传组件上传列表上传失败文字颜色",
+        "override": "",
+        "value": "@danger-color",
+        "jsValue": "@global@dangerColor",
+        "staticValue": "#F53F3F",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表上传失败文字颜色",
+            "en": "Error status color of the text in the uploader list"
+        }
+    },
+    "uploaderItemTextFontSize": {
+        "cssKey": "uploader-item-text-font-size",
+        "desc": "文件上传组件上传列表文字大小",
+        "override": "",
+        "value": "~`pxtorem(14)`",
+        "jsValue": "@getRem@14",
+        "staticValue": "0.28rem",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表文字大小",
+            "en": "Font size of the text in the uploader list"
+        }
+    },
+    "uploaderLoadedIconColor": {
+        "cssKey": "uploader-loaded-icon-color",
+        "desc": "文件上传组件上传列表加载成功图标颜色",
+        "override": "",
+        "value": "@success-color",
+        "jsValue": "@global@successColor",
+        "staticValue": "#00B42A",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表加载成功图标颜色",
+            "en": "Color of the loaded icon in the uploader list"
+        }
+    },
+    "uploaderLoadedIconFontSize": {
+        "cssKey": "uploader-loaded-icon-font-size",
+        "desc": "文件上传组件上传列表加载成功图标大小",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "文件上传组件上传列表加载成功图标大小",
+            "en": "Font size of the loaded icon in the uploader list"
+        }
+    },
     "warningColor": {
         "cssKey": "warning-color",
         "desc": "基础警告态颜色",

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

@@ -1063,4 +1063,31 @@
 @skeleton-grid-text-height: ~`pxtorem(16)`;
 @skeleton-medium-gutter: ~`pxtorem(8)`;
 @skeleton-large-gutter: ~`pxtorem(20)`;
+@uploader-item-height: ~`pxtorem(36)`;
+@uploader-item-margin-top: ~`pxtorem(16)`;
+@uploader-item-padding: 0 ~`pxtorem(12)`;
+@dark-uploader-item-background-color: @dark-card-background-color;
+@uploader-item-background-color: @card-background-color;
+@uploader-file-icon-font-size: ~`pxtorem(16)`;
+@uploader-file-icon-margin-right: ~`pxtorem(12)`;
+@dark-uploader-file-icon-color: @dark-sub-font-color;
+@uploader-file-icon-color: @sub-font-color;
+@uploader-item-text-font-size: ~`pxtorem(14)`;
+@uploader-item-border-radius: ~`pxtorem(2)`;
+@dark-uploader-item-text-color: @dark-font-color;
+@uploader-item-text-color: @font-color;
+@uploader-loaded-icon-font-size: ~`pxtorem(16)`;
+@dark-uploader-loaded-icon-color: @dark-success-color;
+@uploader-loaded-icon-color: @success-color;
+@uploader-error-text-font-size: ~`pxtorem(12)`;
+@dark-uploader-error-text-color: @dark-primary-color;
+@uploader-error-text-color: @primary-color;
+@uploader-delete-icon-font-size: ~`pxtorem(12)`;
+@uploader-delete-icon-padding-left: ~`pxtorem(12)`;
+@dark-uploader-delete-icon-color: @dark-sub-font-color;
+@uploader-delete-icon-color: @sub-font-color;
+@dark-uploader-disabled-delete-icon-color: @dark-disabled-color;
+@uploader-disabled-delete-icon-color: @disabled-color;
+@dark-uploader-item-text-error-color: @dark-danger-color;
+@uploader-item-text-error-color: @danger-color;
 

package/tokens/mixin/index.less

@@ -56,11 +56,11 @@
  */
 .rem-with-rtl(@property; @values...) {
     .rem(@property; @values...);
-    [dir="rtl"] & {
+    .style-with-rtl({
         @{property}: initial;
         @new-property: .prop-with-rtl(@property)[@property-name];
         .rem(@new-property; @values...);
-    }
+    });
 }
 
 /**
@@ -138,10 +138,87 @@
  */
 .use-var-with-rtl(@property, @variables, @preValues: '', @nextValues: '') {
     .use-var(@property, @variables, @preValues, @nextValues);
-    [dir="rtl"] & {
+    .style-with-rtl({
         @{property}: initial;
         @new-property: .prop-with-rtl(@property)[@property-name];
         .use-var(@new-property, @variables, @preValues, @nextValues);
+    });
+}
+
+/**
+ * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
+ * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @param @rules 自定义的复写规则，默认重置为initial
+ * @param @rules {en} customized rewrite rules, default to initial
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .set-prop-with-rtl(right, auto);
+ * }
+ * ```
+ */
+.set-prop-with-rtl(@property, @value, @rules: {
+    @{property}: initial;
+}) {
+    @{property}: @value;
+    .style-with-rtl({
+        @rules();
+        @new-property: .prop-with-rtl(@property)[@property-name];
+        @{new-property}: @value;
+    });
+}
+
+/**
+ * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
+ * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .set-value-with-rtl(text-align, left);
+ * }
+ * ```
+ */
+.set-value-with-rtl(@property, @value) {
+    @{property}: @value;
+    .style-with-rtl({
+        @new-value: .prop-with-rtl(@value)[@property-name];
+        @{property}: @new-value;
+    });
+}
+
+/**
+ * 在 rtl 模式下，自定义样式规则
+ * @desc {en} custom style in RTL mode
+ * @param @rules 对应的rtl模式下的规则
+ * @param @rules {en} property with rtl
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .style-with-rtl({
+ *         transform: scale(-1);
+ *     });
+ * }
+ * ```
+ */
+.style-with-rtl(@rules) {
+    & when (@use-rtl = 1) {
+        [dir="rtl"] & {
+            @rules();
+        }
     }
 }
 

package/tokens/mixin/vars-switch.less

@@ -1,3 +1,4 @@
 @use-css-vars: 0;
 @use-dark-mode: 1;
 @use-rem: 1;
+@use-rtl: 1;