refactor(time-select): [time-select] refactor the theme (#2275)

* refactor(time-select): [time-select] refactor the theme

* refactor(time-select): [time-select] refactor the theme

* refactor(time-select): [time-select] refactor the  theme

* refactor(time-select): [time-select] refactor the theme

* refactor(time-select): [time-select] refactor the theme

Author: Youyou-smiles

examples/sites/demos/pc/app/time-select/size-medium.spec.ts

@@ -7,6 +7,6 @@ test('medium 尺寸', async ({ page }) => {
   const smallBox = page.getByRole('textbox', { name: '尺寸: small' })
   const miniBox = page.getByRole('textbox', { name: '尺寸: mini' })
   await expect(mediumBox).toHaveCSS('height', '40px')
-  await expect(smallBox).toHaveCSS('height', '32px')
+  await expect(smallBox).toHaveCSS('height', '28px')
   await expect(miniBox).toHaveCSS('height', '24px')
 })

packages/theme/src/time-select/index.less

@@ -18,44 +18,44 @@
 @time-select-scrollbar-cls: ~'@{css-prefix}scrollbar';
 
 .@{time-select-prefix-cls} {
-  .component-css-vars-time-select();
+  .inject-TimeSelect-vars();
 
-  height: var(--ti-time-select-height);
+  height: 242px;
   .@{time-select-scrollbar-cls} {
-    height: var(--ti-time-select-scrollbar-height);
+    height: 242px;
     .@{css-prefix}scrollbar__wrap {
-      max-height: var(--ti-time-select-scrollbar-wrap-max-height);
+      max-height: unset;
     }
   }
 
   & &__item {
-    color: var(--ti-time-select-item-text-color);
-    font-size: var(--ti-time-select-item-font-size);
-    padding: 0 var(--ti-time-select-item-padding-horizontal);
-    line-height: var(--ti-time-select-item-line-height);
-    height: var(--ti-time-select-item-height);
+    color: var(--tv-TimeSelect-item-text-color);
+    font-size: var(--tv-TimeSelect-item-font-size);
+    padding: 0 var(--tv-TimeSelect-item-padding-horizontal);
+    line-height: 32px;
+    height: 32px;
 
 
     &.selected:not(.disabled) {
-      color: var(--ti-time-select-item-selected-text-color);
-      background-color: var(--ti-time-select-item-select-hover-bg-color);
+      color: var(--tv-TimeSelect-item-selected-text-color);
+      background-color: var(--tv-TimeSelect-item-select-hover-bg-color);
     }
 
     &:not(.disabled):hover {
-      background-color: var(--ti-time-select-item-hover-bg-color);
+      background-color: var(--tv-TimeSelect-item-hover-bg-color);
       cursor: pointer;
     }
 
     &.disabled {
-      color: var(--ti-time-select-item-disabled-text-color);
+      color: var(--tv-TimeSelect-item-disabled-text-color);
       cursor: not-allowed;
     }
   }
   .@{picker-panel-prefix-cls} {
     &__content {
       padding-left: 0;
       padding-right: 0;
-      padding-top: var(--ti-time-select-content-padding-top);
+      padding-top: var(--tv-TimeSelect-content-padding-top);
     }
   }
 }

packages/theme/src/time-select/vars.less

@@ -10,28 +10,21 @@
 *
 */
 
-.component-css-vars-time-select() {
-  // 时间选择选项高度
-  --ti-time-select-item-height: var(--ti-common-size-height-normal, 32px);
+.inject-TimeSelect-vars() {
   // 时间选择选项字体色
-  --ti-time-select-item-text-color: var(--ti-common-color-text-primary, #191919);
+  --tv-TimeSelect-item-text-color: var(--tv-color-text);
   // 时间选择选项字号
-  --ti-time-select-item-font-size: var(--ti-common-font-size-base, 14px);
-  // 时间选择选项行高
-  --ti-time-select-item-line-height: var(--ti-common-size-height-normal, 32px);
+  --tv-TimeSelect-item-font-size: var(--tv-font-size-md);
   // 时间选择选项左右内边距
-  --ti-time-select-item-padding-horizontal: var(--ti-common-space-4x, 16px);
+  --tv-TimeSelect-item-padding-horizontal: var(--tv-space-xl);
   // 时间选择选项悬浮背景色
-  --ti-time-select-item-hover-bg-color: var(--ti-common-color-bg-normal, #f5f5f5);
+  --tv-TimeSelect-item-hover-bg-color: var(--tv-color-bg-hover);
   // 时间选择选项禁用文本色
-  --ti-time-select-item-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
+  --tv-TimeSelect-item-disabled-text-color: var(--tv-color-text-disabled);
   // 时间选择选项悬浮背景色(选中项)
-  --ti-time-select-item-select-hover-bg-color: var(--ti-common-color-selected-background, #f5f5f5);
+  --tv-TimeSelect-item-select-hover-bg-color: var(--tv-color-bg-active);
   // 时间选择选项字体色(选中项)
-  --ti-time-select-item-selected-text-color: var(--ti-common-color-text-highlight, #1476ff);
+  --tv-TimeSelect-item-selected-text-color: var(--tv-color-text-active);
   // 面板高度
-  --ti-time-select-height: 242px;
-  --ti-time-select-scrollbar-height: 242px;
-  --ti-time-select-scrollbar-wrap-max-height: unset;
-  --ti-time-select-content-padding-top: var(--ti-common-space-2x, 8px);
+  --tv-TimeSelect-content-padding-top: var(--tv-space-md);
 }