chore(Divider): enrich css vars (#3603)

Author: anlyyao

src/divider/README.en-US.md

@@ -24,8 +24,12 @@ t-class-content | \-
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
+--td-divider-border-width | 2rpx | - 
 --td-divider-color | @bg-color-component | - 
---td-divider-content-color | @font-gray-3 | - 
---td-divider-content-font-size | 24rpx | - 
+--td-divider-content-color | @text-color-placeholder | - 
+--td-divider-content-font-size | @font-size-s | - 
 --td-divider-content-line-height | 40rpx | - 
---td-divider-content-line-style | solid | -
+--td-divider-content-line-style | solid | - 
+--td-divider-content-margin | @spacer-1 | - 
+--td-divider-horizontal-margin | 20rpx | - 
+--td-divider-vertical-margin | @spacer | - 

src/divider/README.md

@@ -60,8 +60,12 @@ t-class-content | 内容样式类
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
+--td-divider-border-width | 2rpx | - 
 --td-divider-color | @bg-color-component | - 
---td-divider-content-color | @font-gray-3 | - 
---td-divider-content-font-size | 24rpx | - 
+--td-divider-content-color | @text-color-placeholder | - 
+--td-divider-content-font-size | @font-size-s | - 
 --td-divider-content-line-height | 40rpx | - 
---td-divider-content-line-style | solid | -
+--td-divider-content-line-style | solid | - 
+--td-divider-content-margin | @spacer-1 | - 
+--td-divider-horizontal-margin | 20rpx | - 
+--td-divider-vertical-margin | @spacer | - 

src/divider/divider.less

@@ -1,10 +1,14 @@
 @import '../common/style/base.less';
 
 @divider-color: var(--td-divider-color, @bg-color-component);
+@divider-border-width: var(--td-divider-border-width, 2rpx);
+@divider-horizontal-margin: var(--td-divider-horizontal-margin, 20rpx);
+@divider-vertical-margin: var(--td-divider-vertical-margin, @spacer);
 @divider-content-color: var(--td-divider-content-color, @text-color-placeholder);
-@divider-content-font-size: var(--td-divider-content-font-size, 24rpx);
+@divider-content-font-size: var(--td-divider-content-font-size, @font-size-s);
 @divider-content-line-height: var(--td-divider-content-line-height, 40rpx);
 @divider-content-line-style: var(--td-divider-content-line-style, solid);
+@divider-content-margin: var(--td-divider-content-margin, @spacer-1);
 
 .@{prefix}-divider {
   display: flex;
@@ -26,31 +30,30 @@
 
   &--horizontal {
     align-items: center;
-    margin-top: 20rpx;
-    margin-bottom: 20rpx;
+    margin: @divider-horizontal-margin 0;
 
     &::before,
     &::after {
-      border-top-width: 1px;
+      border-top-width: @divider-border-width;
       transform: scaleY(0.5);
-      transform-origin: bottom;
+      transform-origin: center;
     }
 
     .@{prefix}-divider__content:not(:empty) {
-      margin: 0 24rpx;
+      margin: 0 @divider-content-margin;
     }
   }
 
   &--vertical {
     flex-direction: column;
     height: 28rpx;
-    margin: 0 16rpx;
+    margin: 0 @divider-vertical-margin;
 
     &::before,
     &::after {
-      border-left-width: 1px;
+      border-left-width: @divider-border-width;
       transform: scaleX(0.5);
-      transform-origin: bottom;
+      transform-origin: center;
     }
 
     &-center {