From aec97b279e5dbfd351c4c6d19b7deab758a82950 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 29 Dec 2024 21:44:40 +0300
Subject: [PATCH] Fixed casing

---
 apps/showcase/components/layout/AppDesigner.vue           | 4 +++-
 .../layout/designer/create/DesignCreateTheme.vue          | 4 ++--
 .../layout/designer/dashboard/DesignDashboard.vue         | 4 ++--
 .../layout/designer/editor/settings/DesignSettings.vue    | 8 ++++----
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index e07fbc59b..6df1ec6f4 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -120,7 +120,8 @@ export default {
         },
         generateACTokens(parentPath, obj) {
             for (let key in obj) {
-                if (key === 'dark' || key === 'components') {
+
+                if (key === 'dark' || key === 'components' || key === 'directives') {
                     continue;
                 }
 
@@ -131,6 +132,7 @@ export default {
                         this.generateACTokens(parentPath ? parentPath + '.' + key : key, obj[key]);
                     } else {
                         const regex = /\.\d+$/;
+
                         const tokenName = this.camelCaseToDotCase(parentPath ? parentPath + '.' + key : key);
                         const tokenValue = $dt(tokenName).value;
                         const isColor = tokenName.includes('color') || tokenName.includes('background') || regex.test(tokenName);
diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
index 1bb71c4d9..5193add55 100644
--- a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
+++ b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -173,8 +173,8 @@ export default {
                 key: t_key,
                 preset: preset,
                 config: {
-                    baseFontSize: '14px',
-                    fontFamily: 'Inter var'
+                    font_size: '14px',
+                    font_family: 'Inter var'
                 }
             };
             this.design;
diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
index fc5b115a3..8b86daf8a 100644
--- a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
+++ b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -175,8 +175,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.applyFont(this.$appState.designer.theme.config.font_family);
+                document.documentElement.style.fontSize = this.$appState.designer.theme.config.font_size;
                 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
index 233d1e816..b1562e4cb 100644
--- 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.baseFontSize" @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.font_size" @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">
+                <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">
                     <option v-for="font of fonts" :key="font" :value="font">{{ font }}</option>
                 </select>
             </div>
@@ -44,11 +44,11 @@ export default {
     },
     methods: {
         changeFont() {
-            this.designerService.applyFont(this.$appState.designer.theme.config.fontFamily);
+            this.designerService.applyFont(this.$appState.designer.theme.config.font_size);
             this.designerService.saveTheme(this.$appState.designer.theme);
         },
         changeBaseFontSize() {
-            document.documentElement.style.fontSize = this.$appState.designer.theme.config.baseFontSize;
+            document.documentElement.style.fontSize = this.$appState.designer.theme.config.font_family;
             this.designerService.saveTheme(this.$appState.designer.theme);
         }
     }