feat(unocss): introduce new global preset stylesheet variable with unocss package on formating design layout

docs/.vitepress/theme/types/index.ts

@@ -0,0 +1,4 @@
+export interface PageInfo {
+    readTime: number | string
+    words: number | string
+}

unocss.config.ts

@@ -0,0 +1,33 @@
+import {
+    defineConfig,
+    presetAttributify,
+    presetIcons,
+    presetUno,
+    transformerDirectives,
+    transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+    shortcuts: {
+        'border-main': 'border-gray-400 border-opacity-30',
+        'bg-main': 'bg-gray-400',
+        'bg-base': 'bg-white dark:bg-hex-1a1a1a',
+    },
+    presets: [
+        presetUno(),
+        presetAttributify(),
+        presetIcons({
+            scale: 1.2,
+            warn: true,
+        }),
+    ],
+    theme: {
+        colors: {
+            primary: '#3eaf7c',
+        },
+        fontFamily: {
+            mono: 'var(--vt-font-family-mono)',
+        },
+    },
+    transformers: [transformerDirectives(), transformerVariantGroup()],
+})