feat: use preset wind 4

Author: antfu

packages/devtools/src/app/components/display/ModuleId.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { vTooltip } from 'floating-vue'
+import { Tooltip } from 'floating-vue'
 import { relative } from 'pathe'
 import { computed } from 'vue'
 
@@ -37,24 +37,32 @@ const containerClass = computed(() => {
 </script>
 
 <template>
-  <div
-    v-if="id"
-    v-tooltip.bottom-start="{
-      content: props.id,
-      triggers: ['hover', 'focus'],
-    }"
-    my-auto text-sm font-mono
-    :class="containerClass"
+  <Tooltip
+    my-auto text-sm font-mono block w-full
+    :triggers="['hover']"
+    :delay="1200"
+    :disabled="(props.id?.length || 0) < 30"
+    placement="bottom-start"
   >
-    <DisplayFileIcon v-if="icon" :filename="id" mr1.5 />
-    <span>
-      <DisplayHighlightedPath :path="relativePath" />
-    </span>
-    <slot />
+    <div
+      v-if="id"
+      :class="containerClass"
+    >
+      <DisplayFileIcon v-if="icon" :filename="id" mr1.5 />
+      <span>
+        <DisplayHighlightedPath :path="relativePath" />
+      </span>
+      <slot />
     <!-- <DisplayBadge
       v-if="isVirtual"
       class="ml1"
       text="virtual"
     /> -->
-  </div>
+    </div>
+    <template #popper>
+      <span font-mono text-sm>
+        {{ props.id }}
+      </span>
+    </template>
+  </Tooltip>
 </template>

packages/devtools/src/app/styles/cm.css

@@ -66,11 +66,3 @@ html.dark {
 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
   background-color: var(--cm-background) !important;
 }
-
-.CodeMirror-dialog {
-  @apply !border-main !py-1;
-}
-
-#CodeMirror-search-field {
-  @apply !border-main !border !rounded !outline-none !border-solid !px-1.5 !py-0.25;
-}

packages/devtools/src/app/styles/global.css

@@ -63,10 +63,6 @@ summary::-webkit-details-marker {
   --at-apply: text-sm;
 }
 
-.v-popper--theme-tooltip {
-  max-width: 20rem;
-}
-
 .v-popper--theme-dropdown {
   max-width: 50vw;
   max-height: 50vh;

packages/devtools/src/nuxt.config.ts

@@ -41,10 +41,6 @@ export default defineNuxtConfig({
     inlineStyles: false,
   },
 
-  css: [
-    '@unocss/reset/tailwind.css',
-  ],
-
   nitro: {
     minify: NUXT_DEBUG_BUILD ? false : undefined,
     preset: 'static',

packages/devtools/src/uno.config.ts

@@ -6,7 +6,7 @@ import {
   presetIcons,
   presetTypography,
   presetWebFonts,
-  presetWind3,
+  presetWind4,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
@@ -20,11 +20,11 @@ export default defineConfig({
       'border-base': 'border-#8884',
 
       'border-flow': 'border-#8885',
-      'border-flow-line': 'border-#222',
+      'border-flow-line': 'border-#ccc dark:border-#222',
       'border-flow-active': 'border-primary-700/50 dark:border-primary-300/50',
       'border-flow-line-active': 'border-primary-700/30 dark:border-primary-300/30',
 
-      'fg-flow-line': 'color-#222',
+      'fg-flow-line': 'color-#ccc dark:color-#222',
       'fg-flow-line-active': 'color-primary-700/30 dark:color-primary-300/30',
 
       'bg-tooltip': 'bg-white:75 dark:bg-#111:75 backdrop-blur-8',
@@ -59,11 +59,11 @@ export default defineConfig({
       'op-mute': 'op30 dark:op25',
       'color-deprecated': 'text-op85 text-[#b71c1c] dark:text-[#f87171]',
 
-      'color-scale-neutral': 'text-gray7:75 dark:text-gray:75!',
-      'color-scale-low': 'text-lime7:75 dark:text-lime:75! dark:saturate-50',
-      'color-scale-medium': 'text-amber7:85 dark:text-amber:85! dark:saturate-80',
-      'color-scale-high': 'text-orange7:95 dark:text-orange:95!',
-      'color-scale-critical': 'text-red7:95 dark:text-red:95!',
+      'color-scale-neutral': 'text-gray-700:75 dark:text-gray-700:75!',
+      'color-scale-low': 'text-lime-700:75 dark:text-lime-700:75! dark:saturate-50',
+      'color-scale-medium': 'text-amber-700:85 dark:text-amber-700:85! dark:saturate-80',
+      'color-scale-high': 'text-orange-700:95 dark:text-orange-700:95!',
+      'color-scale-critical': 'text-red-700:95 dark:text-red-700:95!',
 
       'page-padding': 'pt-24 pl-112 pr-8 pb-8',
       'page-padding-collapsed': 'pt-24 pl-14 pr-8 pb-8',
@@ -90,7 +90,9 @@ export default defineConfig({
     },
   },
   presets: [
-    presetWind3(),
+    presetWind4({
+
+    }),
     presetAttributify(),
     presetIcons({
       scale: 1.2,