feat(gui-v2): add plugins to windi config

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/nc-gui-v2/plugins/vuetify.ts

@@ -6,19 +6,11 @@ import { defineNuxtPlugin } from 'nuxt/app'
 // Import everything
 import * as components from 'vuetify/components'
 
+import { themeColors } from '~/utils/colorsUtils'
+
 const ncLightTheme: ThemeDefinition = {
   dark: false,
-  colors: {
-    'background': '#FFFFFF',
-    'surface': '#FFFFFF',
-    'primary': '#1348ba',
-    'secondary': '#03DAC6',
-    'secondary-darken-1': '#018786',
-    'error': '#B00020',
-    'info': '#2196F3',
-    'success': '#4CAF50',
-    'warning': '#FB8C00',
-  },
+  colors: themeColors,
 }
 
 export default defineNuxtPlugin((nuxtApp) => {

packages/nc-gui-v2/utils/colorsUtils.ts

@@ -14,7 +14,7 @@ export default {
   ],
 }
 
-const enumColor = {
+export const enumColor = {
   light: ['#cfdffe', '#d0f1fd', '#c2f5e8', '#ffdaf6', '#ffdce5', '#fee2d5', '#ffeab6', '#d1f7c4', '#ede2fe', '#eeeeee'],
   dark: [
     '#2d7ff999',
@@ -30,4 +30,14 @@ const enumColor = {
   ],
 }
 
-export { enumColor }
+export const themeColors = {
+  'background': '#FFFFFF',
+  'surface': '#FFFFFF',
+  'primary': '#1348ba',
+  'secondary': '#03DAC6',
+  'secondary-darken-1': '#018786',
+  'error': '#B00020',
+  'info': '#2196F3',
+  'success': '#4CAF50',
+  'warning': '#FB8C00',
+}

packages/nc-gui-v2/windi.config.ts

@@ -1,7 +1,12 @@
 import { defineConfig } from 'windicss/helpers'
+import formsPlugin from 'windicss/plugin/forms'
+import typographyPlugin from 'windicss/plugin/typography'
+import aspectRatioPlugin from 'windicss/plugin/aspect-ratio'
+import lineClampPlugin from 'windicss/plugin/line-clamp'
+import windiColors from 'windicss/colors'
 // @ts-expect-error no types for plugin-scrollbar
 import scrollbar from '@windicss/plugin-scrollbar'
-import colors from './utils/colorsUtils'
+import colors, { themeColors } from './utils/colorsUtils'
 
 export default defineConfig({
   extract: {
@@ -12,11 +17,18 @@ export default defineConfig({
   attributify: true,
   darkMode: 'class',
 
-  plugins: [scrollbar],
+  plugins: [scrollbar, formsPlugin, typographyPlugin, aspectRatioPlugin, lineClampPlugin],
 
   theme: {
+    fontFamily: {
+      sans: ['Vazirmatn', 'sans-serif'],
+      serif: ['Vazirmatn', 'serif'],
+      mono: ['Roboto', 'mono'],
+    },
     extend: {
       colors: {
+        ...windiColors,
+        ...themeColors,
         dark: colors.dark,
         light: colors.light,
       },