feat(ui): switch fonts to DM Sans and DM Mono to align with Nuxt's theme

Author: antfu

packages/devtools-ui-kit/src/unocss.ts

@@ -10,6 +10,7 @@ import {
   presetIcons,
   presetTypography,
   presetUno,
+  presetWebFonts,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
@@ -25,9 +26,6 @@ export function unocssPreset(): Preset {
         primary: '#099e61',
         context: 'rgba(var(--nui-c-context),%alpha)',
       },
-      fontFamily: {
-        sans: 'Avenir, Helvetica, Arial, sans-serif',
-      },
     }),
     rules: [
       [/^n-(.*)$/, ([, body]: string[], { theme }: RuleContext<Theme>) => {
@@ -177,6 +175,12 @@ export function extendUnocssOptions(user: UnocssNuxtOptions = {}): UnocssNuxtOpt
         },
         // ...(user?.icons || {})
       }),
+      presetWebFonts({
+        fonts: {
+          sans: 'DM Sans',
+          mono: 'DM Mono',
+        },
+      }),
       unocssPreset(),
       ...(user.presets || []),
     ],

packages/devtools-ui-kit/unocss.config.ts

@@ -80,7 +80,7 @@ registerCommands(() =>
 </script>
 
 <template>
-  <div fixed inset-0 h-screen w-screen>
+  <div fixed inset-0 h-screen w-screen font-sans>
     <NuxtLoadingIndicator />
     <Notification />
     <NLoading v-if="waiting">

packages/devtools/client/app.vue

@@ -31,8 +31,8 @@ export default defineConfig({
     }),
     presetWebFonts({
       fonts: {
-        sans: 'Inter:400,500',
-        mono: 'Fira Code',
+        sans: 'DM Sans',
+        mono: 'DM Mono',
         stylish: 'Caveat',
       },
     }),
@@ -52,4 +52,7 @@ export default defineConfig({
     'simple-icons-nuxtdotjs',
     'bxl-visual-studio',
   ],
+  configDeps: [
+    '../../packages/devtools-ui-kit/src/unocss.ts',
+  ],
 })

packages/devtools/client/unocss.config.ts

@@ -1 +1,11 @@
-export { default } from './packages/devtools/client/unocss.config'
+import { defineConfig } from 'unocss'
+
+import config from './packages/devtools/client/unocss.config'
+
+export default defineConfig({
+  ...config,
+  configDeps: [
+    './packages/devtools-ui-kit/src/unocss.ts',
+    './packages/devtools/client/unocss.config.ts',
+  ],
+})