Support for custom font size and family

apps/showcase/components/layout/AppDesigner.vue

@@ -48,7 +48,8 @@ export default {
                 refreshACTokens: this.refreshACTokens,
                 saveTheme: this.saveTheme,
                 downloadTheme: this.downloadTheme,
-                applyTheme: this.applyTheme
+                applyTheme: this.applyTheme,
+                applyFont: this.applyFont
             }
         };
     },
@@ -91,7 +92,7 @@ export default {
                 }
             }
         },
-        async updateTheme(theme) {
+        async saveTheme(theme) {
             const { error } = await $fetch(this.designerApiBase + '/theme/update', {
                 method: 'POST',
                 body: {
@@ -108,7 +109,7 @@ export default {
         },
         applyTheme(theme) {
             if (this.$appState.designer.licenseKey) {
-                this.updateTheme(theme);
+                this.saveTheme(theme);
             }
 
             updatePreset(theme.preset);
@@ -145,6 +146,36 @@ export default {
         },
         openDashboard() {
             this.$appState.designer.activeView = 'dashboard';
+        },
+        applyFont(fontFamily) {
+            if (fontFamily !== 'Inter var') {
+                this.loadFont(fontFamily, 400);
+                this.loadFont(fontFamily, 500);
+                this.loadFont(fontFamily, 600);
+                this.loadFont(fontFamily, 700);
+            } else {
+                document.body.style.fontFamily = `"Inter var", sans-serif`;
+            }
+        },
+        async loadFont(fontFamily, weight) {
+            const fontFamilyPath = fontFamily.toLowerCase().replace(/\s+/g, '-');
+            const fontUrl = `https://fonts.bunny.net/${fontFamilyPath}/files/${fontFamilyPath}-latin-${weight}-normal.woff2`;
+
+            const font = new FontFace(fontFamily, `url(${fontUrl})`, {
+                weight: weight.toString(),
+                style: 'normal'
+            });
+
+            try {
+                const loadedFont = await font.load();
+
+                document.fonts.add(loadedFont);
+                document.body.style.fontFamily = `"${fontFamily}", sans-serif`;
+
+                return loadedFont;
+            } catch (error) {
+                // silent fail as some fonts may have not all the font weights
+            }
         }
     },
     computed: {

apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue

@@ -177,6 +177,8 @@ export default {
                 };
 
                 usePreset(this.$appState.designer.theme.preset);
+                this.designerService.applyFont(this.$appState.designer.theme.config.fontFamily);
+                document.documentElement.style.fontSize = this.$appState.designer.theme.config.baseFontSize;
                 this.designerService.refreshACTokens();
                 this.$appState.designer.activeView = 'editor';
             }

apps/showcase/components/layout/designer/editor/DesignEditor.vue

@@ -5,6 +5,7 @@
             <Tab value="1">Semantic</Tab>
             <Tab value="2" :disabled="!isComponentRoute">Component</Tab>
             <Tab value="3">Custom</Tab>
+            <Tab value="4" class="ml-auto">Settings</Tab>
         </TabList>
         <TabPanels class="!px-0">
             <TabPanel value="0">
@@ -65,6 +66,9 @@
             <TabPanel value="3">
                 <DesignCustomTokens />
             </TabPanel>
+            <TabPanel value="4">
+                <DesignSettings />
+            </TabPanel>
         </TabPanels>
     </Tabs>
 </template>

apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue

@@ -0,0 +1,56 @@
+<template>
+    <section class="mb-6">
+        <div class="text-lg font-semibold mb-4">Font</div>
+
+        <div class="flex gap-4">
+            <div class="mb-4">
+                <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Base</div>
+                <select v-model="$appState.designer.theme.config.baseFontSize" @change="changeBaseFontSize" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-20">
+                    <option v-for="fontSize of fontSizes" :key="fontSize" :value="fontSize">{{ fontSize }}</option>
+                </select>
+            </div>
+
+            <div>
+                <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Family</div>
+                <select v-model="$appState.designer.theme.config.fontFamily" @change="changeFont" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-48">
+                    <option v-for="font of fonts" :key="font" :value="font">{{ font }}</option>
+                </select>
+            </div>
+        </div>
+    </section>
+    <section class="mb-6">
+        <div class="block text-lg font-semibold mb-2">Migration Assistant</div>
+        <span class="block text-muted-color leading-6 mb-4">Automatically update your themes to the latest version by adding any missing tokens.</span>
+        <div>
+            <button
+                type="button"
+                @click="checkForUpdates"
+                class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
+            >
+                Check for Updates
+            </button>
+        </div>
+    </section>
+</template>
+
+<script>
+export default {
+    inject: ['designerService'],
+    data() {
+        return {
+            fontSizes: ['12px', '13px', '14px', '15px', '16px', '17px', '18px'],
+            fonts: ['DM Sans', 'Inter var', 'Lato', 'Poppins', 'Public Sans', 'Roboto', 'Open Sans', 'Quicksand']
+        };
+    },
+    methods: {
+        changeFont() {
+            this.designerService.applyFont(this.$appState.designer.theme.config.fontFamily);
+            this.designerService.saveTheme(this.$appState.designer.theme);
+        },
+        changeBaseFontSize() {
+            document.documentElement.style.fontSize = this.$appState.designer.theme.config.baseFontSize;
+            this.designerService.saveTheme(this.$appState.designer.theme);
+        }
+    }
+};
+</script>