Refactored font settings

primefaces · Jan 1, 2025 · e630a39 · e630a39
1 parent 681af39
commit e630a39
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 29 deletions.
diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
@@ -107,8 +107,7 @@ export default {
                 body: {
                     key: theme.key,
                     preset: theme.preset,
-                    config: theme.config,
-                    license_key: this.$appState.designer.licenseKey
+                    config: theme.config
                 }
             });
 
@@ -168,15 +167,14 @@ export default {
             }
         },
         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 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'
+                });
+
                 const loadedFont = await font.load();
 
                 document.fonts.add(loadedFont);

diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -108,8 +108,8 @@ export default {
                         name: this.themeName,
                         preset: newPreset,
                         config: {
-                            font_size: '14px',
-                            font_family: 'Inter var'
+                            fontSize: '14px',
+                            fontFamily: 'Inter var'
                         }
                     }
                 });
@@ -136,8 +136,8 @@ export default {
                             name: this.themeName,
                             figma_tokens: this.figmaData,
                             config: {
-                                font_size: '14px',
-                                font_family: 'Inter var'
+                                fontSize: '14px',
+                                fontFamily: 'Inter var'
                             }
                         }
                     });
@@ -179,8 +179,8 @@ export default {
                 key: t_key,
                 preset: preset,
                 config: {
-                    font_size: '14px',
-                    font_family: 'Inter var'
+                    fontSize: '14px',
+                    fontFamily: 'Inter var'
                 }
             };
             this.design;

diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -188,8 +188,8 @@ export default {
                 };
 
                 usePreset(this.$appState.designer.theme.preset);
-                this.designerService.applyFont(this.$appState.designer.theme.config.font_family);
-                document.documentElement.style.fontSize = this.$appState.designer.theme.config.font_size;
+                this.designerService.applyFont(this.$appState.designer.theme.config.fontFamily);
+                document.documentElement.style.fontSize = this.$appState.designer.theme.config.fontSize;
                 this.designerService.refreshACTokens();
                 this.$appState.designer.activeView = 'editor';
             }

diff --git a/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue b/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
@@ -5,14 +5,14 @@
         <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.font_size" @change="changeBaseFontSize" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-20">
+                <select v-model="$appState.designer.theme.config.fontSize" @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.font_family" @change="changeFont" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-48">
+                <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>
@@ -77,16 +77,16 @@ export default {
             missingTokens: [],
             status: null,
             fontSizes: ['12px', '13px', '14px', '15px', '16px'],
-            fonts: ['DM Sans', 'Inter var', 'Figtree', 'Lato', 'Lexend', 'Poppins', 'Public Sans', 'Raleway', 'Roboto', 'Open Sans', 'Quicksand']
+            fonts: ['DM Sans', 'Inter var', 'Figtree', 'Lato', 'Lexend', 'Montserrat', 'Poppins', 'Public Sans', 'Raleway', 'Roboto', 'Open Sans', 'Quicksand']
         };
     },
     methods: {
         changeFont() {
-            this.designerService.applyFont(this.$appState.designer.theme.config.font_size);
+            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.font_family;
+            document.documentElement.style.fontSize = this.$appState.designer.theme.config.fontSize;
             this.designerService.saveTheme(this.$appState.designer.theme);
         },
         async preview() {
@@ -95,9 +95,6 @@ export default {
                 headers: {
                     Authorization: `Bearer ${this.$appState.designer.ticket}`,
                     'X-License-Key': this.$appState.designer.licenseKey
-                },
-                body: {
-                    license_key: this.$appState.designer.licenseKey
                 }
             });
 
@@ -131,9 +128,6 @@ export default {
                 headers: {
                     Authorization: `Bearer ${this.$appState.designer.ticket}`,
                     'X-License-Key': this.$appState.designer.licenseKey
-                },
-                body: {
-                    license_key: this.$appState.designer.licenseKey
                 }
             });