fix(button): [button,tag] fix the display problem of the button and t…

…ag components in dark mode (#2928) * fix(button): fix button in dark mode, is-icon and is-only-icon dont have color * fix(tag): add lost style for tag's demo * fix(tag): update tag adapter dark mode
opentiny · Feb 20, 2025 · c1080ec · c1080ec
1 parent 1957cbf
commit c1080ec
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 13 deletions.
diff --git a/examples/sites/demos/pc/app/tag/color-border-composition-api.vue b/examples/sites/demos/pc/app/tag/color-border-composition-api.vue
@@ -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>
diff --git a/examples/sites/demos/pc/app/tag/color-border.vue b/examples/sites/demos/pc/app/tag/color-border.vue
@@ -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>
diff --git a/examples/sites/demos/pc/app/tag/effect-composition-api.vue b/examples/sites/demos/pc/app/tag/effect-composition-api.vue
@@ -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>
diff --git a/examples/sites/demos/pc/app/tag/effect.vue b/examples/sites/demos/pc/app/tag/effect.vue
@@ -37,3 +37,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-tag-demo .tiny-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tag/size-composition-api.vue b/examples/sites/demos/pc/app/tag/size-composition-api.vue
@@ -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;

diff --git a/examples/sites/demos/pc/app/tag/size.vue b/examples/sites/demos/pc/app/tag/size.vue
@@ -22,7 +22,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .tiny-tag-demo .tiny-tag {
   margin-right: 10px;
   margin-bottom: 10px;

diff --git a/examples/sites/demos/pc/app/tag/tag-event-click-composition-api.vue b/examples/sites/demos/pc/app/tag/tag-event-click-composition-api.vue
@@ -22,3 +22,10 @@ function handleClick() {
   TinyModal.message('click 事件')
 }
 </script>
+
+<style scoped>
+.tiny-tag-demo .tiny-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tag/tag-event-click.vue b/examples/sites/demos/pc/app/tag/tag-event-click.vue
@@ -31,3 +31,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-tag-demo .tiny-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/packages/theme/src/button/index.less b/packages/theme/src/button/index.less
@@ -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);
+      }
     }
   }
 
@@ -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);
     }
   }

diff --git a/packages/theme/src/tag/vars.less b/packages/theme/src/tag/vars.less
@@ -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); // 没有正确的边框色
 
@@ -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);
 
@@ -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);
 
@@ -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);
 
@@ -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);