feat(slider): [slider] Adapt slider component smb theme (#1974)

packages/theme/src/slider/index.less

@@ -52,13 +52,15 @@
 
     .@{slider-prefix-cls}__handle {
       border-color: var(--ti-slider-handle-border-color-hover);
+      border-width: var(--ti-slider-handle-border-weight-hover);
     }
   }
 
   &.disabled {
     cursor: default;
+    background-color: var(--ti-slider-bg-color-disabled);
 
-    .@{slider-prefix-cls}__range  {
+    .@{slider-prefix-cls}__range {
       background-color: var(--ti-slider-range-disabled-bg-color);
     }
 
@@ -66,11 +68,11 @@
       cursor: not-allowed;
       border-color: var(--ti-slider-handle-disabled-border-color);
 
-      &:hover svg, svg {
+      &:hover svg,
+      svg {
         fill: var(--ti-slider-handle-icon-disabled-fill-color);
       }
     }
-    
   }
 
   &__vertical {
@@ -116,7 +118,6 @@
       margin-left: var(--ti-slider-mark-label-margin-top);
       margin-top: 0;
     }
-
   }
 
   &__range {
@@ -234,7 +235,7 @@
     display: inline-block;
     line-height: var(--ti-slider-input-height);
     vertical-align: top;
-    margin-left:var(--ti-slider-input-margin-left);
+    margin-left: var(--ti-slider-input-margin-left);
     font-size: var(--ti-common-font-size-base);
 
     &__split {
@@ -259,6 +260,7 @@
 
     &__unit {
       margin-left: var(--ti-slider-input-unit-margin-left);
+      color: var(--ti-slider-input-unit-text-color);
     }
   }
 }

packages/theme/src/slider/smb-theme.js

@@ -1,5 +1,5 @@
 export const tinySliderSmbTheme = {
-  'ti-slider-border-radius': 'var(--ti-common-border-radius-1)',
+  'ti-slider-border-radius': 'var(--ti-common-border-radius-2)',
   'ti-slider-bg-color': 'var(--ti-common-color-bg-normal)',
   'ti-slider-height': 'var(--ti-common-space-2x)',
   'ti-slider-margin-left': 'calc(var(--ti-common-space-base) * -1)',
@@ -8,18 +8,22 @@ export const tinySliderSmbTheme = {
   'ti-slider-range-hover-bg-color': 'var(--ti-common-color-data-1)',
   'ti-slider-range-height': 'var(--ti-common-space-2x)',
   'ti-slider-range-margin-top': '0',
-  'ti-slider-range-border-radius': 'var(--ti-common-border-radius-1)',
+  'ti-slider-range-border-radius': 'var(--ti-common-border-radius-2)',
   'ti-slider-range-disabled-bg-color': 'var(--ti-common-color-bg-secondary)',
 
-  'ti-slider-handle-width': 'var(--ti-common-space-4x)',
+  'ti-slider-handle-width': 'var(--ti-common-space-6x)',
   'ti-slider-handle-height': 'var(--ti-common-space-6x)',
-  'ti-slider-handle-border-color': 'var(--ti-common-color-data-1)',
+  'ti-slider-handle-border-color': 'var(--ti-common-color-line-disabled)',
   'ti-slider-handle-border-color-hover': 'var(--ti-common-color-data-1)',
+  'ti-slider-handle-box-shadow': '0 1px 4px 0 rgba(0, 0, 0, 0.08)', // 没有这个变量
   'ti-slider-handle-margin-top': 'calc(var(--ti-common-space-2x) * -1)',
   'ti-slider-handle-icon-fill-color': 'var(--ti-common-color-data-1)',
-  'ti-slider-handle-border-radius': 'var(--ti-common-border-radius-4)',
+  'ti-slider-handle-border-radius': 'var(--ti-common-border-radius-5)',
   'ti-slider-handle-icon-disabled-fill-color': 'var(--ti-common-color-icon-disabled)',
   'ti-slider-handle-disabled-border-color': 'var(--ti-common-color-icon-disabled)',
+  'ti-slider-handle-icon-display': 'none',
+  'ti-slider-handle-bg-color': 'var(--ti-common-color-bg-white-normal)',
+  'ti-slider-handle-border-weight-hover': 'var(--ti-common-border-weight-1)',
 
   'ti-slider-tips-text-color': 'var(--ti-common-color-dark)',
   'ti-slider-tips-box-shadow': 'var(--ti-common-box-shadow-popover)',
@@ -29,5 +33,7 @@ export const tinySliderSmbTheme = {
   'ti-slider-input-text-align': 'left',
 
   'ti-slider-mark-label-font-size': 'var(--ti-common-font-size-1)',
-  'ti-slider-mark-label-text-color': '#999999'
+  'ti-slider-mark-label-text-color': 'var(--ti-common-color-text-weaken)',
+
+  'ti-slider-input-unit-margin-left': 'var(--ti-common-space-base)'
 }

packages/theme/src/slider/vars.less

@@ -13,6 +13,8 @@
 .component-css-vars-slider() {
   // 滑块线条默认背景色
   --ti-slider-bg-color: var(--ti-common-color-bg-light-normal, #e9edfa);
+  // 滑块线条禁用背景色
+  --ti-slider-bg-color-disabled: var(--ti-common-color-bg-disabled);
   // 滑块线条高度
   --ti-slider-height: var(--ti-common-size-2x, 8px);
   // 滑块线条圆角
@@ -58,6 +60,8 @@
   --ti-slider-handle-top: calc(-1 * var(--ti-common-space-base));
   // 滑块点边框厚度
   --ti-slider-handle-border-weight: var(--ti-common-border-weight-normal, 1px);
+  // 滑块点边框悬浮厚度
+  --ti-slider-handle-border-weight-hover: var(--ti-common-border-weight-normal, 1px);
   // 滑块点图标的display(hide)
   --ti-slider-handle-icon-display: inline-block;
   // 滑块点图标色
@@ -93,6 +97,8 @@
   --ti-slider-input-margin-left: var(--ti-common-size-3x, 12px);
   // 滑块输入框单位左边padding
   --ti-slider-input-unit-margin-left: var(--ti-common-space-2x, 8px);
+  // 滑块输入框单位文本色
+  --ti-slider-input-unit-text-color: var(--ti-common-color-text-primary);
   // 滑块输入框单位文字对齐方式(hide)
   --ti-slider-input-text-align: center;