@arco-design/mobile-react 2.25.3 → 2.26.0

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

@@ -2735,6 +2735,100 @@
             "en": "Base disabled font color"
         }
     },
+    "dividerContentFontColor": {
+        "cssKey": "divider-content-font-color",
+        "desc": "分割线文本字体颜色",
+        "override": "",
+        "value": "@sub-font-color",
+        "jsValue": "@global@subFontColor",
+        "staticValue": "#4e5969",
+        "localeDesc": {
+            "ch": "分割线文本字体颜色",
+            "en": "Font color of divider content"
+        }
+    },
+    "dividerContentFontSize": {
+        "cssKey": "divider-content-font-size",
+        "desc": "分割线文本字体大小",
+        "override": "",
+        "value": "~`pxtorem(14)`",
+        "jsValue": "@getRem@14",
+        "staticValue": "0.28rem",
+        "localeDesc": {
+            "ch": "分割线文本字体大小",
+            "en": "Font size of divider content"
+        }
+    },
+    "dividerContentPadding": {
+        "cssKey": "divider-content-padding",
+        "desc": "分割线文本左右padding",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "分割线文本左右padding",
+            "en": "Padding of content"
+        }
+    },
+    "dividerLeftWidth": {
+        "cssKey": "divider-left-width",
+        "desc": "分割线左对齐时左边长度",
+        "override": "",
+        "value": "~`pxtorem(28)`",
+        "jsValue": "@getRem@28",
+        "staticValue": "0.56rem",
+        "localeDesc": {
+            "ch": "分割线左对齐时左边长度"
+        }
+    },
+    "dividerLineColor": {
+        "cssKey": "divider-line-color",
+        "desc": "分割线线条颜色",
+        "override": "",
+        "value": "@line-color",
+        "jsValue": "@global@lineColor",
+        "staticValue": "#e5e6eb",
+        "localeDesc": {
+            "ch": "分割线线条颜色",
+            "en": "Color of divider line"
+        }
+    },
+    "dividerLineThickness": {
+        "cssKey": "divider-line-thickness",
+        "desc": "分割线线条粗细",
+        "override": "",
+        "value": "1PX",
+        "jsValue": "1PX",
+        "staticValue": "1PX",
+        "localeDesc": {
+            "ch": "分割线线条粗细",
+            "en": "Thickness of divider line"
+        }
+    },
+    "dividerPadding": {
+        "cssKey": "divider-padding",
+        "desc": "分割线上下padding",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "分割线上下padding",
+            "en": "Top and Bottom padding of divider"
+        }
+    },
+    "dividerRightWidth": {
+        "cssKey": "divider-right-width",
+        "desc": "分割线右对齐时右边长度",
+        "override": "",
+        "value": "~`pxtorem(28)`",
+        "jsValue": "@getRem@28",
+        "staticValue": "0.56rem",
+        "localeDesc": {
+            "ch": "分割线右对齐时右边长度"
+        }
+    },
     "dropdownMaskBackgroundColor": {
         "cssKey": "dropdown-mask-background-color",
         "desc": "dropdown的弹出框中mask的背景颜色",
@@ -8481,6 +8575,174 @@
             "en": "Textareaword count font size"
         }
     },
+    "timeLineAxisColor": {
+        "cssKey": "time-line-axis-color",
+        "desc": "时间轴轴线的颜色",
+        "override": "",
+        "value": "@line-color",
+        "jsValue": "@global@lineColor",
+        "staticValue": "#e5e6eb",
+        "localeDesc": {
+            "ch": "时间轴轴线的颜色",
+            "en": "Color of the Axis of TimeLine"
+        }
+    },
+    "timeLineAxisWidth": {
+        "cssKey": "time-line-axis-width",
+        "desc": "时间轴轴线的宽度",
+        "override": "",
+        "value": "~`pxtorem(1)`",
+        "jsValue": "@getRem@1",
+        "staticValue": "0.02rem",
+        "localeDesc": {
+            "ch": "时间轴轴线的宽度",
+            "en": "Width of the Axis of TimeLine"
+        }
+    },
+    "timeLineContentBackgroundColor": {
+        "cssKey": "time-line-content-background-color",
+        "desc": "时间轴content的背景色",
+        "override": "",
+        "value": "@line-color",
+        "jsValue": "@global@lineColor",
+        "staticValue": "#e5e6eb",
+        "localeDesc": {
+            "ch": "时间轴content的背景色",
+            "en": "Background color of the Content of TimeLine"
+        }
+    },
+    "timeLineContentBorderRadius": {
+        "cssKey": "time-line-content-border-radius",
+        "desc": "时间轴content的圆角值",
+        "override": "",
+        "value": "~`pxtorem(4)`",
+        "jsValue": "@getRem@4",
+        "staticValue": "0.08rem",
+        "localeDesc": {
+            "ch": "时间轴content的圆角值",
+            "en": "Border radius of the Content of TimeLine"
+        }
+    },
+    "timeLineContentColor": {
+        "cssKey": "time-line-content-color",
+        "desc": "时间轴content的字体颜色",
+        "override": "",
+        "value": "@font-color",
+        "jsValue": "@global@fontColor",
+        "staticValue": "#1d2129",
+        "localeDesc": {
+            "ch": "时间轴content的字体颜色",
+            "en": "Font color of the Content of TimeLine"
+        }
+    },
+    "timeLineContentFontSize": {
+        "cssKey": "time-line-content-font-size",
+        "desc": "时间轴content的字体大小",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "时间轴content的字体大小",
+            "en": "Font size of the content of TimeLine"
+        }
+    },
+    "timeLineContentMarginBottom": {
+        "cssKey": "time-line-content-margin-bottom",
+        "desc": "时间轴content的下外边距（13 + 12 / 2）",
+        "override": "",
+        "value": "~`pxtorem(19)`",
+        "jsValue": "@getRem@19",
+        "staticValue": "0.38rem",
+        "localeDesc": {
+            "ch": "时间轴content的下外边距（13 + 12 / 2）",
+            "en": "Bottom margin of the Content of TimeLine"
+        }
+    },
+    "timeLineContentMarginLeft": {
+        "cssKey": "time-line-content-margin-left",
+        "desc": "时间轴content的左外边距",
+        "override": "",
+        "value": "~`pxtorem(8)`",
+        "jsValue": "@getRem@8",
+        "staticValue": "0.16rem",
+        "localeDesc": {
+            "ch": "时间轴content的左外边距",
+            "en": "Left margin of the Content of TimeLine"
+        }
+    },
+    "timeLineContentMarginTop": {
+        "cssKey": "time-line-content-margin-top",
+        "desc": "时间轴content的上外边距（13 - 12 / 2）",
+        "override": "",
+        "value": "~`pxtorem(7)`",
+        "jsValue": "@getRem@7",
+        "staticValue": "0.14rem",
+        "localeDesc": {
+            "ch": "时间轴content的上外边距（13 - 12 / 2）",
+            "en": "Top margin of the Content of TimeLine"
+        }
+    },
+    "timeLineDotBackgroundColor": {
+        "cssKey": "time-line-dot-background-color",
+        "desc": "时间轴节点的背景色",
+        "override": "",
+        "value": "@background-color",
+        "jsValue": "@global@backgroundColor",
+        "staticValue": "#ffffff",
+        "localeDesc": {
+            "ch": "时间轴节点的背景色",
+            "en": "Background color of the dot of TimeLine"
+        }
+    },
+    "timeLineDotBorderColor": {
+        "cssKey": "time-line-dot-border-color",
+        "desc": "时间轴节点的线颜色",
+        "override": "",
+        "value": "@primary-color",
+        "jsValue": "@global@primaryColor",
+        "staticValue": "#165dff",
+        "localeDesc": {
+            "ch": "时间轴节点的线颜色",
+            "en": "Border color of the dot of TimeLine"
+        }
+    },
+    "timeLineDotWidth": {
+        "cssKey": "time-line-dot-width",
+        "desc": "时间轴节点的宽度",
+        "override": "",
+        "value": "~`pxtorem(9)`",
+        "jsValue": "@getRem@9",
+        "staticValue": "0.18rem",
+        "localeDesc": {
+            "ch": "时间轴节点的宽度",
+            "en": "Width of the dot of TimeLine"
+        }
+    },
+    "timeLineLabelColor": {
+        "cssKey": "time-line-label-color",
+        "desc": "时间轴label的字体颜色",
+        "override": "",
+        "value": "@sub-info-font-color",
+        "jsValue": "@global@subInfoFontColor",
+        "staticValue": "#86909c",
+        "localeDesc": {
+            "ch": "时间轴label的字体颜色",
+            "en": "Font color of the label of TimeLine"
+        }
+    },
+    "timeLineLabelFontSize": {
+        "cssKey": "time-line-label-font-size",
+        "desc": "时间轴label的字体大小",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "时间轴label的字体大小",
+            "en": "Font size of the label of TimeLine"
+        }
+    },
     "toastBackground": {
         "cssKey": "toast-background",
         "desc": "toast 背景色",

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

@@ -727,4 +727,26 @@
 @form-item-label-item-required-asterisk-color: @danger-color;
 @form-item-error-message-color: @danger-color;
 @form-item-warning-message-color: @warning-color;
+@time-line-dot-width: ~`pxtorem(9)`;
+@time-line-dot-border-color: @primary-color;
+@time-line-dot-background-color: @background-color;
+@time-line-axis-width: ~`pxtorem(1)`;
+@time-line-axis-color: @line-color;
+@time-line-label-font-size: ~`pxtorem(12)`;
+@time-line-label-color: @sub-info-font-color;
+@time-line-content-margin-top: ~`pxtorem(7)`;
+@time-line-content-margin-bottom: ~`pxtorem(19)`;
+@time-line-content-margin-left: ~`pxtorem(8)`;
+@time-line-content-border-radius: ~`pxtorem(4)`;
+@time-line-content-font-size: ~`pxtorem(16)`;
+@time-line-content-background-color: @line-color;
+@time-line-content-color: @font-color;
+@divider-line-thickness: 1PX;
+@divider-line-color: @line-color;
+@divider-content-font-size: ~`pxtorem(14)`;
+@divider-content-font-color: @sub-font-color;
+@divider-left-width: ~`pxtorem(28)`;
+@divider-right-width: ~`pxtorem(28)`;
+@divider-content-padding: ~`pxtorem(12)`;
+@divider-padding: ~`pxtorem(16)`;
 

package/tokens/mixin/index.less

@@ -2,7 +2,7 @@
 @import './vars-switch.less';
 @import './pxtorem.less';
 
-.rem (@property; @values...) {
+.rem(@property; @values...) {
     @{property}: ~`(function () {
         var baseFontSize=@{base-font-size};
         var sizeList = @{values};
@@ -15,6 +15,15 @@
     }())`;
 }
 
+.rem-with-rtl(@property; @values...) {
+    .rem(@property; @values...);
+    [dir="rtl"] & {
+        @{property}: initial;
+        @new-property: .prop-with-rtl(@property)[@property-name];
+        .rem(@new-property; @values...);
+    }
+}
+
 // for hack dark mode
 .use-dark-mode-query(@rules) {
     & when (@use-dark-mode = 1) {
@@ -31,6 +40,15 @@
     }
 }
 
+.use-var-with-rtl(@property, @variables, @preValues: '', @nextValues: '') {
+    .use-var(@property, @variables, @preValues, @nextValues);
+    [dir="rtl"] & {
+        @{property}: initial;
+        @new-property: .prop-with-rtl(@property)[@property-name];
+        .use-var(@new-property, @variables, @preValues, @nextValues);
+    }
+}
+
 .hairline-var(@color, @direction: all) {
     .hairline(@@color, @direction);
     & when (@use-css-vars = 1) {