fix(Button): 修复暗黑模式下样式显示异常

Signed-off-by: Tenny <joel.shu@qq.com>

Author: Tenny

docs/components/popover.md

@@ -252,6 +252,29 @@
   </CodePreview>
 </ClientOnly>
 
+### 不显示箭头
+
+通过传递 `show-arrow` 为 `false` 来取消箭头显示
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <nt-popover content="悬浮提示" :show-arrow="false">
+    <template #trigger>
+      <span>悬浮</span>
+    </template>
+  </nt-popover>
+  </textarea>
+  <template #preview>
+    <Popover content="悬浮提示" :show-arrow="false">
+      <template #trigger>
+        <span>悬浮</span>
+      </template>
+    </Popover>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
 ## API
 
 ### Popover Props

src/components/Button.vue

@@ -76,7 +76,7 @@ const colorStyle = computed(() => {
     const darken = adjust(props.color, 3, false);
     const cssVars = {
       '--nt-btn-border-color': props.text ? 'transparent' : props.color,
-      '--bt-btn-text-color':
+      '--nt-btn-text-color':
         props.ghost || props.text ? props.color : '#ffffff',
       '--nt-btn-hover-text-color':
         props.ghost || props.text ? lighten : '#ffffff',

src/components/popover/Popover.vue

@@ -240,7 +240,9 @@ export default defineComponent({
                         : props.content != null
                           ? h('span', props.content)
                           : null,
-                      h('span', { class: 'nt-popover-arrow' }),
+                      props.showArrow
+                        ? h('span', { class: 'nt-popover-arrow' })
+                        : null,
                     ],
                   ),
                   [[vShow, show.value]],

src/components/popover/constant.ts

@@ -33,4 +33,9 @@ export const popoverProps = {
   },
   /** 受控模式时对应的节点 */
   to: [Object, String] as PropType<HTMLElement | string | Ref<HTMLElement>>,
+  /** 是否显示箭头 */
+  showArrow: {
+    type: Boolean,
+    default: true,
+  },
 };

style/button/index.css

@@ -76,9 +76,9 @@
 
 .nt-btn-normal {
   /* 按钮的文字颜色 */
-  --nt-btn-text-color: rgba(0, 0, 0, 0.65);
+  --nt-btn-text-color: auto;
   /* 按钮的背景色 */
-  --nt-btn-background: #fff;
+  --nt-btn-background: transparent;
   /* 按钮的边框颜色 */
   --nt-btn-border-color: #d9d9d9;
   /* 按钮的悬浮边框 less lighten(var(--nt-primary-color), 10) */
@@ -164,3 +164,11 @@
 .nt-btn:not(.nt-btn-text) + .nt-btn {
   margin-left: 10px;
 }
+
+html.dark {
+  .nt-btn:disabled {
+    --nt-btn-disabled-background: rgba(255, 255, 255, 0.08);
+    --nt-btn-disabled-color: rgba(255, 255, 255, 0.3);
+    --nt-btn-disabled-border-color: rgba(255, 255, 255, 0.3);
+  }
+}