maxjhandsome
/
tiny-vue
forked from opentiny/tiny-vue
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

* fix(button): [button] Adapt to dark themes

* fix(buttono): [button] Adapt to dark themes

* fix(button): [button] Adapt to fark themes

* fix(button): [button] Adapt to fark themes
This commit is contained in:
东风使命必达 2025-03-28 14:19:38 +08:00 committed by GitHub
parent 8d64d0e459
commit db2499761e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 43 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/theme/src/button/index.less
View File

@ -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);
@ -232,6 +232,10 @@
&.is-ghost {
border-color: var(--tv-Button-border-color-ghost-disabled);
}
// 仅图标，禁用时无背景
&.is-only-icon {
background-color: transparent;
}
}
/** 4、图标 + 文字场景 */
@ -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);
}
}
}
@ -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(''));
@ -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)
}
}
}
}
}
@ -366,6 +392,8 @@
.tiny-svg {
margin-right: var(--tv-Button-margin-right-isicon-svg);
// 混排时 适配图标浅色暗色主题，增加图标默认颜色
fill: var(--tv-Button-color-icon-svg);
}
}

15
packages/theme/src/button/vars.less
View File

@ -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);
// 仅图标且有边框时，边框的圆角大
@ -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); // 蓝色文字
// 纯文字时，文字的禁用色
@ -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); // 黑色文字
// 混排无边框时,文字的禁用色