fix: improve dialog-content and sheet-content component

Author: phojie

components/layout/Header.vue

@@ -8,17 +8,17 @@ const config = useConfig()
     :class="{ 'lg:border-b': config.header.border }"
   >
     <div
-      class="flex items-center justify-between px-4 md:px-8 h-14 gap-0.5"
+      class="flex items-center justify-between px-4 md:px-8 h-14 gap-2"
       :class="{ 'border-b lg:border-none': config.header.border, 'container max-w-screen-2xl': config.main.padded }"
     >
       <LayoutHeaderLogo class="hidden flex-1 md:flex" />
       <LayoutMobileNav />
       <LayoutHeaderLogo v-if="config.header.showTitleInMobile" class="flex md:hidden" />
       <LayoutHeaderNav class="hidden flex-1 lg:flex" />
-      <div class="flex flex-1 gap-0.5 justify-end">
+      <div class="flex flex-1 gap-2 justify-end">
         <LayoutSearchButton v-if="!config.search.inAside && config.search.style === 'input'" />
         <LayoutSearchButton v-if="!config.search.inAside && config.search.style === 'button'" />
-        <div class="inline-flex gap-0.5">
+        <div class="inline-flex gap-2">
           <NButton
             v-for="(link, i) in config.header.links"
             :key="i"

components/ui/command/CommandSeparator.vue

@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
 <template>
   <ComboboxSeparator
     v-bind="delegatedProps"
-    :class="cn('-mx-1 h-px bg-border', props.class)"
+    :class="cn('-mx-1 h-px bg-$c-border', props.class)"
   >
     <slot />
   </ComboboxSeparator>

components/ui/dialog/DialogContent.vue

@@ -39,7 +39,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <slot />
 
       <DialogClose
-        class="absolute right-4 top-4 ring-offset-base focus:ring-ring rounded-sm data-[state=open]:bg-accent data-[state=open]:text-muted opacity-70 transition-opacity disabled:pointer-events-none hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2"
+        class="absolute right-4 top-4 ring-offset-base focus:ring-base rounded-sm data-[state=open]:bg-accent data-[state=open]:text-muted opacity-70 transition-opacity disabled:pointer-events-none hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2"
       >
         <Icon name="lucide:x" class="block size-4" />
         <span class="sr-only">Close</span>

components/ui/sheet/SheetContent.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 import {
+  DialogClose,
   DialogContent,
   type DialogContentEmits,
   type DialogContentProps,
@@ -44,7 +45,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     >
       <slot />
 
-      <NDialogClose />
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-base transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-base focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent"
+      >
+        <Icon name="lucide:x" class="block size-4" />
+      </DialogClose>
     </DialogContent>
   </DialogPortal>
 </template>