Skip to content

fix(button): [button,tag] fix the display problem of the button and tag components in dark mode #2928

New issue

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

#

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

Already on GitHub? # to your account

Merged
merged 3 commits into from
Feb 20, 2025
Merged

fix(button): [button,tag] fix the display problem of the button and tag components in dark mode #2928

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e43a57
fix(button): fix button in dark mode, is-icon and is-only-icon dont h…
shenjunjian Feb 19, 2025
3e36b0e
fix(tag): add lost style for tag's demo
shenjunjian Feb 19, 2025
5febde2
fix(tag): update tag adapter dark mode
shenjunjian Feb 19, 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
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/tag/color-border-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ import { TinyTag } from '@opentiny/vue'
</script>

<style scoped>
.tiny-tag-demo > * {
margin-bottom: 8px;
margin-top: 8px;
.tiny-tag-demo .tiny-tag {
margin-right: 10px;
margin-bottom: 10px;
}
</style>
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/tag/color-border.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ export default {
</script>

<style scoped>
.tiny-tag-demo > * {
margin-bottom: 8px;
margin-top: 8px;
.tiny-tag-demo .tiny-tag {
margin-right: 10px;
margin-bottom: 10px;
}
</style>
7 changes: 7 additions & 0 deletions examples/sites/demos/pc/app/tag/effect-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,10 @@ const items = ref([
{ type: 'warning', label: '标签五' }
])
</script>

<style scoped>
.tiny-tag-demo .tiny-tag {
margin-right: 10px;
margin-bottom: 10px;
}
</style>
7 changes: 7 additions & 0 deletions examples/sites/demos/pc/app/tag/effect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,10 @@ export default {
}
}
</script>

<style scoped>
.tiny-tag-demo .tiny-tag {
margin-right: 10px;
margin-bottom: 10px;
}
</style>
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/tag/size-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { IconHeartempty } from '@opentiny/vue-icon'
const TinyIconHeartempty = IconHeartempty()
</script>

<style>
<style scoped>
.tiny-tag-demo .tiny-tag {
margin-right: 10px;
margin-bottom: 10px;
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/tag/size.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default {
}
</script>

<style>
<style scoped>
.tiny-tag-demo .tiny-tag {
margin-right: 10px;
margin-bottom: 10px;
Expand Down
7 changes: 7 additions & 0 deletions examples/sites/demos/pc/app/tag/tag-event-click-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,10 @@ function handleClick() {
TinyModal.message('click 事件')
}
</script>

<style scoped>
.tiny-tag-demo .tiny-tag {
margin-right: 10px;
margin-bottom: 10px;
}
</style>
7 changes: 7 additions & 0 deletions examples/sites/demos/pc/app/tag/tag-event-click.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,10 @@ export default {
}
}
</script>

<style scoped>
.tiny-tag-demo .tiny-tag {
margin-right: 10px;
margin-bottom: 10px;
}
</style>
7 changes: 7 additions & 0 deletions packages/theme/src/button/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,6 +325,11 @@
&.@{button-prefix-cls}--mini {
.size-only-icon-ontext-iconsize-mixin(-mini);
}

& .@{svg-prefix-cls} {
fill: var(--tv-color-icon);
color: var(--tv-color-icon);
}
}
}

Expand Down Expand Up @@ -360,6 +365,8 @@
align-items: center;

.tiny-svg {
fill: var(--tv-color-icon);
color: var(--tv-color-icon);
margin-right: var(--tv-Button-margin-right-isicon-svg);
}
}
Expand Down
10 changes: 5 additions & 5 deletions packages/theme/src/tag/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
// 默认标签plain的文本色
--tv-Tag-text-color-plain: var(--tv-color-text);
// 默认标签plain的背景色
--tv-Tag-bg-color-plain: var(--tv-color-bg-secondary);
--tv-Tag-bg-color-plain: transparent;
// 默认标签plain的边框色
--tv-Tag-border-color-plain: var(--tv-color-border-hover); // 没有正确的边框色

Expand All @@ -110,7 +110,7 @@
// success 主题时标签plain的文本色
--tv-Tag-text-color-plain-success: var(--tv-color-success-text);
// success 主题时标签plain的背景色
--tv-Tag-bg-color-plain-success: var(--tv-color-success-text-white);
--tv-Tag-bg-color-plain-success: transparent;
// success 主题时标签plain的边框色
--tv-Tag-border-color-plain-success: var(--tv-color-success-border);

Expand All @@ -129,7 +129,7 @@
// error 主题时标签plain的文本色
--tv-Tag-text-color-plain-danger: var(--tv-color-error-text);
// error 主题时标签plain的背景色
--tv-Tag-bg-color-plain-danger: var(--tv-color-error-bg-white);
--tv-Tag-bg-color-plain-danger: transparent;
// error 主题时标签plain的边框色
--tv-Tag-border-color-plain-danger: var(--tv-color-error-border);

Expand All @@ -148,7 +148,7 @@
// warning 主题时标签plain的文本色
--tv-Tag-text-color-plain-warning: var(--tv-color-warn-text);
// warning 主题时标签plain的背景色
--tv-Tag-bg-color-plain-warning: var(--tv-color-warn-text-white);
--tv-Tag-bg-color-plain-warning: transparent;
// warning 主题时标签plain的边框色
--tv-Tag-border-color-plain-warning: var(--tv-color-warn-border);

Expand All @@ -167,7 +167,7 @@
// info 主题时标签plain的文本色
--tv-Tag-text-color-plain-info: var(--tv-color-info-text);
// info 主题时标签plain的背景色
--tv-Tag-bg-color-plain-info: var(--tv-color-info-bg-white);
--tv-Tag-bg-color-plain-info: transparent;
// info 主题时标签plain的边框色
--tv-Tag-border-color-plain-info: var(--tv-color-info-border);

Expand Down
Loading