Skip to content

fix(button): [button] Adapt to dark themes #3208

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

Merged
merged 4 commits into from
Mar 28, 2025
Merged

fix(button): [button] Adapt to dark themes #3208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
52272ae
fix(button): [button] Adapt to dark themes
Youyou-smiles Mar 27, 2025
f0bcc84
fix(buttono): [button] Adapt to dark themes
Youyou-smiles Mar 27, 2025
b484f55
fix(button): [button] Adapt to fark themes
Youyou-smiles Mar 28, 2025
338d7db
fix(button): [button] Adapt to fark themes
Youyou-smiles Mar 28, 2025
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
34 changes: 31 additions & 3 deletions packages/theme/src/button/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@
&.is-disabled.is-disabled.is-disabled.is-disabled.is-disabled,
&.is-loading.is-loading.is-loading.is-loading.is-loading,
&[disabled][disabled][disabled][disabled][disabled] {
color: var(--tv-Button-text-color-disabled);
color: var(--tv-Button-text-color-disabled);
background-color: var(--tv-Button-bg-color-disabled);
border-color: var(--tv-Button-border-color-disabled);
fill: var(--tv-Button-icon-color-disabled);
Expand All @@ -232,6 +232,10 @@
&.is-ghost {
border-color: var(--tv-Button-border-color-ghost-disabled);
}
// 仅图标，禁用时无背景
&.is-only-icon {
background-color: transparent;
}
}

/** 4、图标 + 文字场景 */
Expand Down Expand Up @@ -267,12 +271,19 @@
justify-content: center;
&.@{button-prefix-cls}--default {
border-color: var(--tv-Button-border-color-only-icon-default);

// 为适配暗色主题，仅图标增加默认图标颜色
svg {
fill: var(--tv-Button-color-only-icon-default);
}
&:active,
&:focus,
&:hover,
&.is-active {
border-color: var(--tv-Button-border-color-only-icon-default-hover);
// 为适配暗色主题，仅图标增加图标悬浮颜色
svg {
fill: var(--tv-Button-color-only-icon-default-hover);
}
}
}

Expand Down Expand Up @@ -303,12 +314,19 @@
border-radius: var(--tv-Button-border-radius-only-icon-ontext); // 影响hover时的阴影

background-color: var(--tv-Button-bg-color-only-icon-ontext);

// 无边框时的仅图标按钮，增加图标默认颜色
svg {
fill: var(--tv-Button-bg-color-only-icon)
}
&:active,
&:focus,
&:hover,
&.is-active {
background-color: var(--tv-Button-bg-color-only-icon-ontext-hover);
// 无边框时的仅图标按钮，增加图标悬浮颜色
svg {
fill: var(--tv-Button-bg-color-only-icon-hover)
}
}
// 不同的尺寸，icon大小 为高度。 原型稿不包含
.size-only-icon-ontext-iconsize-mixin(e(''));
Expand All @@ -330,6 +348,14 @@
fill: var(--tv-Button-icon-color);
color: var(--tv-Button-icon-color);
}
// 上面为图标加上悬浮颜色，这里禁用时去掉图标hover颜色
&.is-disabled {
&:hover {
svg {
fill: var(--tv-Button-disabled-color-only-icon-hover)
}
}
}
}
}

Expand Down Expand Up @@ -366,6 +392,8 @@

.tiny-svg {
margin-right: var(--tv-Button-margin-right-isicon-svg);
// 混排时 适配图标浅色暗色主题，增加图标默认颜色
fill: var(--tv-Button-color-icon-svg);
}
}

Expand Down
15 changes: 12 additions & 3 deletions packages/theme/src/button/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,6 +331,10 @@

// 仅图标且default主题时， 外边框的颜色
--tv-Button-border-color-only-icon-default: var(--tv-color-border, #c2c2c2);
// 仅图标且default主题时， 图标颜色
--tv-Button-color-only-icon-default: var(--tv-color-icon);
// 仅图标且default主题时， 图标颜色
--tv-Button-color-only-icon-default-hover: var(--tv-color-icon-hover);
// 仅图标且default主题时， 外边框的悬浮色
--tv-Button-border-color-only-icon-default-hover: var(--tv-color-border-hover, #191919);
// 仅图标且有边框时，边框的圆角大
Expand All @@ -340,12 +344,16 @@
--tv-Button-border-radius-only-icon-ontext: var(--tv-border-radius-sm, 4px);
// 仅图标-无边框的背景色
--tv-Button-bg-color-only-icon-ontext: transparent;
// 仅图标-无边框的悬浮时的图标色
--tv-Button-bg-color-only-icon: var(--tv-color-icon);
// 仅图标-无边框的悬浮时的背景色
--tv-Button-bg-color-only-icon-ontext-hover: var(--tv-color-bg, #f5f5f5);

// 仅图标-无边框的悬浮时的图标色
--tv-Button-bg-color-only-icon-hover: var(--tv-color-icon-hover);
// 有图标-图标颜色
--tv-Button-icon-color: var(--tv-color-icon, #808080);

// 仅图标-无边框的悬浮时的禁用事的图标色
--tv-Button-disabled-color-only-icon-hover: var(--tv-color-icon);
// 纯文字时，文字颜色
--tv-Button-text-color-ontext: var(--tv-color-text-link, #1476ff); // 蓝色文字
// 纯文字时，文字的禁用色
Expand All @@ -355,7 +363,8 @@

// 混排有边框和无边框时，图标右边距
--tv-Button-margin-right-isicon-svg: var(--tv-space-sm, 4px);

// 混排有边框和无边框时，图标颜色
--tv-Button-color-icon-svg: var(--tv-color-icon);
// 混排无边框时,文字的颜色
--tv-Button-text-color-isicon-ontext: var(--tv-color-text-control, #191919); // 黑色文字
// 混排无边框时,文字的禁用色
Expand Down