export fonts

Author: quangtuanitmo18

@codexteam/ui/README.md

@@ -25,7 +25,18 @@ yarn add @codexteam/ui
 import '@codexteam/ui/styles';
 ```
 
-### 2. Import Themes (Tree-shakeable)
+### 2. Import Fonts (Optional)
+
+Fonts are **optional** and are **not** loaded by default. If you want to use the bundled **Inter** and **JetBrains Mono** fonts, import them explicitly:
+
+```typescript
+// main.ts
+import '@codexteam/ui/styles/fonts';
+```
+
+If you don't import fonts, typography will fall back to system fonts.
+
+### 3. Import Themes (Tree-shakeable)
 
 Import only the themes you need - others will NOT be included in the bundle:
 
@@ -36,13 +47,13 @@ import '@codexteam/ui/styles/themes/grass';
 
 **Available themes:** `graphite`, `crimson`, `red`, `violet`, `grass`, `amber`, `pure`, `sky`
 
-### 3. Import Components (Tree-shakeable)
+### 4. Import Components (Tree-shakeable)
 
 ```typescript
 import { Button, Avatar, Heading } from '@codexteam/ui/vue';
 ```
 
-### 4. Apply Theme in Template
+### 5. Apply Theme in Template
 
 ```vue
 <template>
@@ -62,6 +73,9 @@ import App from './App.vue';
 // Base styles (required)
 import '@codexteam/ui/styles';
 
+// Fonts (optional)
+import '@codexteam/ui/styles/fonts';
+
 // Themes (import only what you need)
 import '@codexteam/ui/styles/themes/pure';
 import '@codexteam/ui/styles/themes/grass';

@codexteam/ui/package.json

@@ -27,6 +27,9 @@
     "./styles": {
       "import": "./dist/style.css"
     },
+    "./styles/fonts": {
+      "import": "./dist/styles/fonts.css"
+    },
     "./styles/themes/graphite": {
       "import": "./dist/styles/themes/graphite.css"
     },

@codexteam/ui/vite.config.ts

@@ -28,10 +28,12 @@ export default defineConfig({
      * CSS Code Splitting: Enables CSS to be split into separate chunks
      * With cssInjectedByJsPlugin enabled:
      * - Component CSS is injected into vue.js bundle (no separate CSS files for components)
-     * - Theme CSS files are split separately in dist/styles/themes/ for tree-shaking
-     * - Base styles are in dist/style.css
+     * - Base styles are emitted as dist/style.css
+     * - Fonts are emitted as dist/styles/fonts.css (optional import)
+     * - Theme CSS files are emitted as dist/styles/themes/*.css
      * This allows users to import only the themes they need:
      * - import '@codexteam/ui/styles' (base styles)
+     * - import '@codexteam/ui/styles/fonts' (optional fonts)
      * - import '@codexteam/ui/styles/themes/graphite' (specific theme)
      */
     cssCodeSplit: true,
@@ -42,6 +44,13 @@ export default defineConfig({
          */
         style: resolve(__dirname, 'src/styles/index.pcss'),
 
+        /**
+         * Optional fonts (Inter + JetBrains Mono)
+         * Exported as: @codexteam/ui/styles/fonts
+         * Vite will automatically copy font files to dist/fonts/ when processing @import url()
+         */
+        'styles/fonts': resolve(__dirname, 'src/styles/fonts.pcss'),
+
         /**
          * Individual themes for tree-shaking
          */