From 32625b00ad87fa4f5319feeed90e5069ab36fad6 Mon Sep 17 00:00:00 2001 From: You-Hw-Y <1664677472@qq.com> Date: Tue, 15 Oct 2024 20:22:39 -0700 Subject: [PATCH 1/5] refactor(time-select): [time-select] refactor the theme --- packages/theme/src/time-select/index.less | 28 +++++++++++------------ packages/theme/src/time-select/vars.less | 25 ++++++++------------ 2 files changed, 23 insertions(+), 30 deletions(-) diff --git a/packages/theme/src/time-select/index.less b/packages/theme/src/time-select/index.less index 7d8fb01b7f..01333e8cf6 100644 --- a/packages/theme/src/time-select/index.less +++ b/packages/theme/src/time-select/index.less @@ -18,36 +18,36 @@ @time-select-scrollbar-cls: ~'@{css-prefix}scrollbar'; .@{time-select-prefix-cls} { - .component-css-vars-time-select(); + .inject-Time-Select-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(--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: 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(--ti-Time-Select-item-selected-text-color); + background-color: var(--ti-Time-Select-item-select-hover-bg-color); } &:not(.disabled):hover { - background-color: var(--ti-time-select-item-hover-bg-color); + background-color: var(--ti-Time-Select-item-hover-bg-color); cursor: pointer; } &.disabled { - color: var(--ti-time-select-item-disabled-text-color); + color: var(--ti-Time-Select-item-disabled-text-color); cursor: not-allowed; } } @@ -55,7 +55,7 @@ &__content { padding-left: 0; padding-right: 0; - padding-top: var(--ti-time-select-content-padding-top); + padding-top: var(--ti-Time-Select-content-padding-top); } } } diff --git a/packages/theme/src/time-select/vars.less b/packages/theme/src/time-select/vars.less index dcb94a0c1c..e9e5761dcc 100644 --- a/packages/theme/src/time-select/vars.less +++ b/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-Time-Select-vars() { // 时间选择选项字体色 - --ti-time-select-item-text-color: var(--ti-common-color-text-primary, #191919); + --ti-Time-Select-item-text-color: var(--tv-color-act-primary-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); + --ti-Time-Select-item-font-size: var(--tv-font-size-md); // 时间选择选项左右内边距 - --ti-time-select-item-padding-horizontal: var(--ti-common-space-4x, 16px); + --ti-Time-Select-item-padding-horizontal: var(--tv-space-xl); // 时间选择选项悬浮背景色 - --ti-time-select-item-hover-bg-color: var(--ti-common-color-bg-normal, #f5f5f5); + --ti-Time-Select-item-hover-bg-color: var(--tv-color-bg-hover); // 时间选择选项禁用文本色 - --ti-time-select-item-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2); + --ti-Time-Select-item-disabled-text-color: var(--tv-color-text-disabled); // 时间选择选项悬浮背景色(选中项) - --ti-time-select-item-select-hover-bg-color: var(--ti-common-color-selected-background, #f5f5f5); + --ti-Time-Select-item-select-hover-bg-color: var(--tv-color-bg-active); // 时间选择选项字体色(选中项) - --ti-time-select-item-selected-text-color: var(--ti-common-color-text-highlight, #1476ff); + --ti-Time-Select-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); + --ti-Time-Select-content-padding-top: var(--tv-space-md); } From 755a52a6edfb2604ccaa602c90941d38afbcb34e Mon Sep 17 00:00:00 2001 From: You-Hw-Y <1664677472@qq.com> Date: Tue, 15 Oct 2024 20:34:28 -0700 Subject: [PATCH 2/5] refactor(time-select): [time-select] refactor the theme --- examples/sites/demos/pc/app/time-select/size-medium.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/sites/demos/pc/app/time-select/size-medium.spec.ts b/examples/sites/demos/pc/app/time-select/size-medium.spec.ts index c7b22eb26f..137f09d374 100644 --- a/examples/sites/demos/pc/app/time-select/size-medium.spec.ts +++ b/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') }) From 585744ba6d19ea815d58e2f95c8f200b4e219de3 Mon Sep 17 00:00:00 2001 From: You-Hw-Y <1664677472@qq.com> Date: Tue, 15 Oct 2024 23:15:17 -0700 Subject: [PATCH 3/5] refactor(time-select): [time-select] refactor the theme --- packages/theme/src/time-select/index.less | 18 +++++++++--------- packages/theme/src/time-select/vars.less | 18 +++++++++--------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/theme/src/time-select/index.less b/packages/theme/src/time-select/index.less index 01333e8cf6..bd94026136 100644 --- a/packages/theme/src/time-select/index.less +++ b/packages/theme/src/time-select/index.less @@ -18,7 +18,7 @@ @time-select-scrollbar-cls: ~'@{css-prefix}scrollbar'; .@{time-select-prefix-cls} { - .inject-Time-Select-vars(); + .inject-TimeSelect-vars(); height: 242px; .@{time-select-scrollbar-cls} { @@ -29,25 +29,25 @@ } & &__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); + color: var(--ti-TimeSelect-item-text-color); + font-size: var(--ti-TimeSelect-item-font-size); + padding: 0 var(--ti-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(--ti-TimeSelect-item-selected-text-color); + background-color: var(--ti-TimeSelect-item-select-hover-bg-color); } &:not(.disabled):hover { - background-color: var(--ti-Time-Select-item-hover-bg-color); + background-color: var(--ti-TimeSelect-item-hover-bg-color); cursor: pointer; } &.disabled { - color: var(--ti-Time-Select-item-disabled-text-color); + color: var(--ti-TimeSelect-item-disabled-text-color); cursor: not-allowed; } } @@ -55,7 +55,7 @@ &__content { padding-left: 0; padding-right: 0; - padding-top: var(--ti-Time-Select-content-padding-top); + padding-top: var(--ti-TimeSelect-content-padding-top); } } } diff --git a/packages/theme/src/time-select/vars.less b/packages/theme/src/time-select/vars.less index e9e5761dcc..9ac752f8f7 100644 --- a/packages/theme/src/time-select/vars.less +++ b/packages/theme/src/time-select/vars.less @@ -10,21 +10,21 @@ * */ -.inject-Time-Select-vars() { +.inject-TimeSelect-vars() { // 时间选择选项字体色 - --ti-Time-Select-item-text-color: var(--tv-color-act-primary-text); + --ti-TimeSelect-item-text-color: var(--tv-color-act-primary-text); // 时间选择选项字号 - --ti-Time-Select-item-font-size: var(--tv-font-size-md); + --ti-TimeSelect-item-font-size: var(--tv-font-size-md); // 时间选择选项左右内边距 - --ti-Time-Select-item-padding-horizontal: var(--tv-space-xl); + --ti-TimeSelect-item-padding-horizontal: var(--tv-space-xl); // 时间选择选项悬浮背景色 - --ti-Time-Select-item-hover-bg-color: var(--tv-color-bg-hover); + --ti-TimeSelect-item-hover-bg-color: var(--tv-color-bg-hover); // 时间选择选项禁用文本色 - --ti-Time-Select-item-disabled-text-color: var(--tv-color-text-disabled); + --ti-TimeSelect-item-disabled-text-color: var(--tv-color-text-disabled); // 时间选择选项悬浮背景色(选中项) - --ti-Time-Select-item-select-hover-bg-color: var(--tv-color-bg-active); + --ti-TimeSelect-item-select-hover-bg-color: var(--tv-color-bg-active); // 时间选择选项字体色(选中项) - --ti-Time-Select-item-selected-text-color: var(--tv-color-text-active); + --ti-TimeSelect-item-selected-text-color: var(--tv-color-text-active); // 面板高度 - --ti-Time-Select-content-padding-top: var(--tv-space-md); + --ti-TimeSelect-content-padding-top: var(--tv-space-md); } From cdde57adb0a2d60cd5db911af25f55e97c00880d Mon Sep 17 00:00:00 2001 From: You-Hw-Y <1664677472@qq.com> Date: Tue, 15 Oct 2024 23:28:32 -0700 Subject: [PATCH 4/5] refactor(time-select): [time-select] refactor the theme --- packages/theme/src/time-select/index.less | 16 ++++++++-------- packages/theme/src/time-select/vars.less | 16 ++++++++-------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/theme/src/time-select/index.less b/packages/theme/src/time-select/index.less index bd94026136..431d9d1e9a 100644 --- a/packages/theme/src/time-select/index.less +++ b/packages/theme/src/time-select/index.less @@ -29,25 +29,25 @@ } & &__item { - color: var(--ti-TimeSelect-item-text-color); - font-size: var(--ti-TimeSelect-item-font-size); - padding: 0 var(--ti-TimeSelect-item-padding-horizontal); + 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-TimeSelect-item-selected-text-color); - background-color: var(--ti-TimeSelect-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-TimeSelect-item-hover-bg-color); + background-color: var(--tv-TimeSelect-item-hover-bg-color); cursor: pointer; } &.disabled { - color: var(--ti-TimeSelect-item-disabled-text-color); + color: var(--tv-TimeSelect-item-disabled-text-color); cursor: not-allowed; } } @@ -55,7 +55,7 @@ &__content { padding-left: 0; padding-right: 0; - padding-top: var(--ti-TimeSelect-content-padding-top); + padding-top: var(--tv-TimeSelect-content-padding-top); } } } diff --git a/packages/theme/src/time-select/vars.less b/packages/theme/src/time-select/vars.less index 9ac752f8f7..0be03472ab 100644 --- a/packages/theme/src/time-select/vars.less +++ b/packages/theme/src/time-select/vars.less @@ -12,19 +12,19 @@ .inject-TimeSelect-vars() { // 时间选择选项字体色 - --ti-TimeSelect-item-text-color: var(--tv-color-act-primary-text); + --tv-TimeSelect-item-text-color: var(--tv-color-act-primary-text); // 时间选择选项字号 - --ti-TimeSelect-item-font-size: var(--tv-font-size-md); + --tv-TimeSelect-item-font-size: var(--tv-font-size-md); // 时间选择选项左右内边距 - --ti-TimeSelect-item-padding-horizontal: var(--tv-space-xl); + --tv-TimeSelect-item-padding-horizontal: var(--tv-space-xl); // 时间选择选项悬浮背景色 - --ti-TimeSelect-item-hover-bg-color: var(--tv-color-bg-hover); + --tv-TimeSelect-item-hover-bg-color: var(--tv-color-bg-hover); // 时间选择选项禁用文本色 - --ti-TimeSelect-item-disabled-text-color: var(--tv-color-text-disabled); + --tv-TimeSelect-item-disabled-text-color: var(--tv-color-text-disabled); // 时间选择选项悬浮背景色(选中项) - --ti-TimeSelect-item-select-hover-bg-color: var(--tv-color-bg-active); + --tv-TimeSelect-item-select-hover-bg-color: var(--tv-color-bg-active); // 时间选择选项字体色(选中项) - --ti-TimeSelect-item-selected-text-color: var(--tv-color-text-active); + --tv-TimeSelect-item-selected-text-color: var(--tv-color-text-active); // 面板高度 - --ti-TimeSelect-content-padding-top: var(--tv-space-md); + --tv-TimeSelect-content-padding-top: var(--tv-space-md); } From f57916d14238137cf6f2082ebe69fa4d87874149 Mon Sep 17 00:00:00 2001 From: You-Hw-Y <1664677472@qq.com> Date: Tue, 15 Oct 2024 23:55:14 -0700 Subject: [PATCH 5/5] refactor(time-select): [time-select] refactor the theme --- packages/theme/src/time-select/vars.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/src/time-select/vars.less b/packages/theme/src/time-select/vars.less index 0be03472ab..cc7506ef4d 100644 --- a/packages/theme/src/time-select/vars.less +++ b/packages/theme/src/time-select/vars.less @@ -12,7 +12,7 @@ .inject-TimeSelect-vars() { // 时间选择选项字体色 - --tv-TimeSelect-item-text-color: var(--tv-color-act-primary-text); + --tv-TimeSelect-item-text-color: var(--tv-color-text); // 时间选择选项字号 --tv-TimeSelect-item-font-size: var(--tv-font-size-md); // 时间选择选项左右内边距