Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(swicth): [switch]refactor switch theme #2183

Merged
merged 2 commits into from
Sep 25, 2024
Merged

refactor(swicth): [switch]refactor switch theme #2183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22d69a8
refactor(swicth): [switch]refactor witch theme
zzcr Sep 25, 2024
d048623
refactor(swicth): [switch]refactor witch theme
zzcr Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions examples/sites/demos/pc/app/switch/basic-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ test('基本用法', async ({ page }) => {
const switchBtn = demo.locator('.tiny-switch')

await expect(switchBtn).toHaveCSS('background-color', 'rgb(20, 118, 255)')
await expect(switchBtn).toHaveCSS('border-top-color', 'rgb(20, 118, 255)')
await switchBtn.click()
await expect(switchBtn).toHaveCSS('background-color', 'rgb(194, 194, 194)')
await expect(switchBtn).toHaveCSS('border-top-color', 'rgb(194, 194, 194)')
})
81 changes: 38 additions & 43 deletions packages/theme/src/switch/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,15 @@
@switch-prefix-cls: ~'@{css-prefix}switch';

.@{switch-prefix-cls} {
.component-css-vars-switch();
.inject-Switch-vars();

display: inline-block;
width: var(--ti-switch-width);
height: var(--ti-switch-height);
line-height: calc(var(--ti-switch-height) - var(--ti-switch-border-weight) * 2);
border-radius: var(--ti-switch-border-radius);
width: var(--tv-Switch-width);
height: var(--tv-Switch-height);
line-height: var(--tv-Switch-height);
border-radius: var(--tv-Switch-border-radius);
vertical-align: middle;
border: var(--ti-switch-border-weight) solid var(--ti-switch-off-bg-color);
background-color: var(--ti-switch-off-bg-color);
background-color: var(--tv-Switch-off-bg-color);
position: relative;
cursor: pointer;
outline: none;
Expand All @@ -34,103 +33,99 @@
background-color 0.2s ease-in-out;

&:focus-visible {
outline: 2px solid var(--ti-switch-on-bg-color);
outline: 2px solid var(--tv-Switch-on-bg-color);
outline-offset: 1px;
}

& &-inner {
color: var(--ti-switch-text-color);
font-size: var(--ti-switch-inner-font-size);
color: var(--tv-Switch-text-color);
font-size: var(--tv-Switch-inner-font-size);
position: absolute;
}

&__text {
width: var(--ti-switch-text-width);
width: var(--tv-Switch-text-width);
.@{switch-prefix-cls}-inner {
left: calc(var(--ti-switch-dot-size));
width: calc(100% - var(--ti-switch-dot-size));
left: calc(var(--tv-Switch-dot-size));
width: calc(100% - var(--tv-Switch-dot-size));
text-align: center;
overflow: hidden;
}
}

&__on-loading {
font-size: var(--ti-switch-on-loading-font-size);
fill: var(--ti-switch-on-loading-fill);
font-size: var(--tv-Switch-on-loading-font-size);
fill: var(--tv-Switch-on-loading-fill);
}

&__off-loading {
font-size: var(--ti-switch-off-loading-font-size);
fill: var(--ti-switch-off-loading-fill);
font-size: var(--tv-Switch-off-loading-font-size);
fill: var(--tv-Switch-off-loading-fill);
}

&__loading-mini {
font-size: var(--ti-switch-loading-mini-font-size);
font-size: var(--tv-Switch-loading-mini-font-size);
}

&.mini {
width: var(--ti-switch-mini-width);
height: var(--ti-switch-mini-height);
width: var(--tv-Switch-mini-width);
height: var(--tv-Switch-mini-height);
}

&&-checked.disabled,
&.disabled {
cursor: not-allowed;
background: var(--ti-switch-disabled-bg-color);
border-color: var(--ti-switch-disabled-bg-color);
background: var(--tv-Switch-disabled-bg-color);
border-color: var(--tv-Switch-disabled-bg-color);

&::after {
background: var(--ti-switch-disabled-dot-bg-color);
&:after {
cursor: not-allowed;
}

.@{switch-prefix-cls}-inner {
color: var(--ti-switch-disabled-text-color);
}
}

&&-checked.disabled {
background: var(--ti-switch-checked-disabled-bg-color);
border-color: var(--ti-switch-checked-disabled-border-color);
background: var(--tv-Switch-checked-disabled-bg-color);
}

&__button {
display: flex;
justify-content: center;
align-items: center;
content: '';
width: var(--ti-switch-dot-size);
height: var(--ti-switch-dot-size);
width: var(--tv-Switch-dot-size);
height: var(--tv-Switch-dot-size);
border-radius: 50%;
background-color: var(--ti-switch-dot-bg-color);
background-color: var(--tv-Switch-dot-bg-color);
position: absolute;
left: var(--ti-switch-dot-position-left); // smb新增
top: var(--ti-switch-dot-position-top); // smb新增
left: var(--tv-Switch-dot-position-left);
top: var(--tv-Switch-dot-position-top);
cursor: pointer;
transition:
left 0.2s ease-in-out,
width 0.2s ease-in-out;
}

&.mini &__button {
height: var(--ti-switch-mini-button-height);
width: var(--ti-switch-mini-button-width);
}
height: var(--tv-Switch-mini-button-height);
width: var(--tv-Switch-mini-button-width);
}

&&-checked {
border-color: var(--ti-switch-on-bg-color);
background-color: var(--ti-switch-on-bg-color);
background-color: var(--tv-Switch-on-bg-color);

.@{switch-prefix-cls}-inner {
left: 2px;
width: calc(100% - var(--ti-switch-dot-size));
width: calc(100% - var(--tv-Switch-dot-size));
text-align: center;
overflow: hidden;
}
}

&&-checked .@{switch-prefix-cls}__button {
left: calc(100% - var(--ti-switch-dot-offset));
left: calc(100% - var(--tv-Switch-dot-offset));
}

&&-checked&.mini &__button {
left: var(--ti-switch-mini-button-left);
left: var(--tv-Switch-mini-button-left);
}
}
77 changes: 40 additions & 37 deletions packages/theme/src/switch/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,58 +10,61 @@
*
*/

.component-css-vars-switch() {
.inject-Switch-vars() {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Old mixin .component-css-vars-switch() references remain in the codebase

  • packages/theme-mobile/src/switch/vars.less: .component-css-vars-switch() {
  • packages/theme-mobile/src/switch/index.less: .component-css-vars-switch();
🔗 Analysis chain

Ensure all references to the old mixin name are updated

The mixin name has been changed from .component-css-vars-switch() to .inject-Switch-vars(). Please verify that all references to the old mixin name are updated throughout the codebase to prevent any build or styling issues.

You can run the following script to check for any remaining references:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Search for occurrences of the old mixin name `.component-css-vars-switch()`

# Test: Expect no matches for the old mixin name
rg --type less '\.component-css-vars-switch\(\)'

Length of output: 200

// 开关开启状态背景色
--ti-switch-on-bg-color: var(--ti-common-color-data-1);
--tv-Switch-on-bg-color: var(--tv-color-bg-active-control);
// 开关关闭状态背景色
--ti-switch-off-bg-color: #C2C2C2;
--tv-Switch-off-bg-color: var(--tv-color-bg-control);
// 开关关闭禁用状态背景色
--ti-switch-disabled-bg-color: var(--ti-common-color-bg-dark-disabled);
--tv-Switch-disabled-bg-color: var(--tv-color-bg-disabled-control-unactive);
// 开关开启禁用状态背景色
--ti-switch-checked-disabled-bg-color: var(--ti-common-color-bg-light-emphasize, #beccfa);
// 开关开启禁用状态边框色
--ti-switch-checked-disabled-border-color: var(--ti-common-color-bg-light-emphasize, #beccfa);
--tv-Switch-checked-disabled-bg-color: var(--tv-color-bg-disabled-control-active);
// 开关禁用状态文本色
--ti-switch-disabled-text-color: var(--ti-common-color-info-disabled, #bfbfbf);
--tv-Switch-disabled-text-color: var(--tv-color-text-disabled);
// 开关禁用状态圆点色
--ti-switch-disabled-dot-bg-color: #ffffff;
--tv-Switch-disabled-dot-bg-color: var(--tv-color-bg-secondary);
// 开关默认圆点色
--ti-switch-dot-bg-color: var(--ti-common-color-light, #fff);
--tv-Switch-dot-bg-color: var(--tv-color-bg-secondary);
// 开关圆点尺寸
--ti-switch-dot-size: var(--ti-common-size-4x, 16px);
--tv-Switch-dot-size: 16px;
// 开关圆点左边距(hide)
--ti-switch-dot-position-left: 2px;
--tv-Switch-dot-position-left: 2px;
// 开关圆点上边距(hide)
--ti-switch-dot-position-top: 2px;
--tv-Switch-dot-position-top: 2px;
// 开关圆点偏移量(hide)
--ti-switch-dot-offset: calc(var(--ti-switch-dot-size) + 2px);
--tv-Switch-dot-offset: calc(var(--tv-Switch-dot-size) + 2px);
// 开关文本色
--ti-switch-text-color: var(--ti-common-color-light, #fff);
--tv-Switch-text-color: var(--tv-color-text-white);
// 默认开关宽度
--ti-switch-width: var(--ti-common-size-10x);
--tv-Switch-width: 40px;
// 开关高度
--ti-switch-height: var(--ti-common-size-5x, 20px);
--tv-Switch-height: 20px;
// 开关圆角
--ti-switch-border-radius: calc(var(--ti-common-border-radius-3) * 2.5);
// 开关边框厚度
--ti-switch-border-weight: 0px;
--tv-Switch-border-radius: 15px;
// 开关字号
--ti-switch-inner-font-size: 12px;
// 开关左侧距离(hide)
--ti-switch-inner-position-left: var(--ti-common-space-4x, 16px);
--tv-Switch-inner-font-size: var(--tv-font-size-sm);
// 开关内部button圆角
--tv-Switch-inner-border-radius: var(--tv-border-radius-round);
// 自定义文本开关宽度
--ti-switch-text-width: calc(var(--ti-common-size-11x, 44px) + 1px);
// mini尺寸
--ti-switch-mini-height: calc(var(--ti-common-size-height-normal)/2);
--ti-switch-mini-width: calc(var(--ti-common-size-width-minor) + 2px);
// mini尺寸button
--ti-switch-mini-button-height: calc(var(--ti-common-size-height-small)/2);
--ti-switch-mini-button-width: calc(var(--ti-common-size-width-mini)/2);
--ti-switch-mini-button-left: calc(var(--ti-common-space-4x) + 2px);
// 加载ICON样式
--ti-switch-on-loading-font-size: var(--ti-common-font-size-0);
--ti-switch-on-loading-fill: var(--ti-common-color-bg-light-emphasize);
--ti-switch-off-loading-font-size: var(--ti-common-font-size-0);
--ti-switch-off-loading-fill: #DBDBDB;
--ti-switch-loading-mini-font-size: 8px;
--tv-Switch-text-width: 46px;
// mini尺寸高度
--tv-Switch-mini-height: 16px;
// mini尺寸宽度
--tv-Switch-mini-width: 32px;
// mini尺寸内部button高度
--tv-Switch-mini-button-height: 12px;
// mini尺寸内部button宽度度
--tv-Switch-mini-button-width: 12px;
// mini尺寸内部button宽度度
--tv-Switch-mini-button-left: 18px;
// 开启loading字体大小
--tv-Switch-on-loading-font-size: var(--tv-font-size-sm);
// 开启loading图标填充色
--tv-Switch-on-loading-fill: var(--tv-color-bg-disabled-control-active);
// 关闭loading字体大小
--tv-Switch-off-loading-font-size: var(--tv-font-size-sm);
// 关闭loading图标填充色
--tv-Switch-off-loading-fill: var(--tv-color-bg-disabled-control-unactive);
// mini尺寸loading大小
--tv-Switch-loading-mini-font-size: 8px;
}
Loading