feat(kit): adjust styling

Author: antfu

packages/core/src/client/webcomponents/.generated/css.ts

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import VitePlusCore from './icons/VitePlusCore.vue'
 
 const props = defineProps<{
-  icon: string
+  icon: string | { dark: string, light: string }
   title?: string
 }>()
 
@@ -19,9 +19,15 @@ function getIconUrl(str: string, color: 'dark' | 'light') {
 }
 
 const icon = computed(() => {
+  if (typeof props.icon === 'string') {
+    return {
+      dark: getIconUrl(props.icon, 'dark'),
+      light: getIconUrl(props.icon, 'light'),
+    }
+  }
   return {
-    dark: getIconUrl(props.icon, 'dark'),
-    light: getIconUrl(props.icon, 'light'),
+    dark: getIconUrl(props.icon.dark, 'dark'),
+    light: getIconUrl(props.icon.light, 'light'),
   }
 })
 </script>

packages/core/src/client/webcomponents/components/DockIcon.vue

@@ -19,7 +19,7 @@
 
 #vite-devtools-anchor #vite-devtools-dock {
   --uno: h-full rounded-full select-none touch-none px4 ma h-[40px];
-  --uno: shadow text-white bg-glass border border-base;
+  --uno: shadow text-white bg-glass;
   --uno: transition-all duration-500;
   width: calc-size(max-content, size);
 }

packages/core/src/client/webcomponents/style.css

@@ -20,7 +20,7 @@ export default defineConfig({
       'z-floating-anchor': 'z-[2147483644]',
       'z-floating-tooltip': 'z-[2147483645]',
     },
-    [/^bg-glass(:\d+)?$/, ([, opacity = ':75']) => `bg-white${opacity} dark:bg-#111${opacity} backdrop-blur-5`],
+    [/^bg-glass(:\d+)?$/, ([, opacity = ':50']) => `bg-white${opacity} dark:bg-#111${opacity} backdrop-blur-5`],
   ],
   transformers: [
     transformerDirectives(),

packages/core/src/client/webcomponents/uno.config.ts

@@ -18,10 +18,24 @@ export interface DevToolsViewHost {
   hostStatic: (baseUrl: string, distDir: string) => void
 }
 
+// TODO: refine categories more clearly
+export type DevToolsDockEntryCategory = 'app' | 'framework' | 'web' | 'advanced' | 'default'
+
 export interface DevToolsDockEntryBase {
   id: string
   title: string
-  icon: string
+  icon: string | { light: string, dark: string }
+  /**
+   * The default order of the entry in the dock.
+   * The higher the number the earlier it appears.
+   * @default 0
+   */
+  defaultOrder?: number
+  /**
+   * The category of the entry
+   * @default 'default'
+   */
+  category?: DevToolsDockEntryCategory
 }
 
 export interface ClientScriptEntry {
@@ -52,11 +66,6 @@ export interface DevToolsViewIframe extends DevToolsDockEntryBase {
   import?: ClientScriptEntry
 }
 
-export interface DevToolsViewWebComponent extends DevToolsDockEntryBase {
-  type: 'webcomponent'
-  import: ClientScriptEntry
-}
-
 export interface DevToolsViewAction extends DevToolsDockEntryBase {
   type: 'action'
   import: ClientScriptEntry
@@ -67,4 +76,4 @@ export interface DevToolsViewCustomRender extends DevToolsDockEntryBase {
   import: ClientScriptEntry
 }
 
-export type DevToolsDockEntry = DevToolsViewIframe | DevToolsViewWebComponent | DevToolsViewAction | DevToolsViewCustomRender
+export type DevToolsDockEntry = DevToolsViewIframe | DevToolsViewAction | DevToolsViewCustomRender