From c55e6fa54d520cf0cfba2b21a97dcf5c03345ac2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 14:48:31 +0300
Subject: [PATCH 01/17] Replaced light-dark for compatibility

---
 .../assets/styles/layout/_designer.scss       | 42 +++++++++----------
 .../styles/layout/variables/main/_dark.scss   | 11 +++--
 .../styles/layout/variables/main/_light.scss  |  3 ++
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/apps/showcase/assets/styles/layout/_designer.scss b/apps/showcase/assets/styles/layout/_designer.scss
index 85280939f..6afa3f53e 100644
--- a/apps/showcase/assets/styles/layout/_designer.scss
+++ b/apps/showcase/assets/styles/layout/_designer.scss
@@ -25,15 +25,15 @@
     }
 
     &.p-drawer {
-        background: light-dark(var(--p-surface-0), var(--p-surface-900));
-        border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
-        color: light-dark(#09090b, #ffffff);
+        background: var(--overlay-background);
+        border-color: var(--border-color);
+        color: var(--high-contrast-text-color);
         box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
     }
 
     .p-fieldset {
         background: transparent;
-        border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+        border-color: var(--border-color);
         border-radius: 4px;
         color: inherit;
         padding: 0 1.125rem 1.125rem 1.125rem;
@@ -84,15 +84,15 @@
         .p-tablist-tab-list {
             background: transparent;
             border-style: solid;
-            border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+            border-color: var(--border-color);
             border-width: 0 0 1px 0;
         }
 
         .p-tab {
             background: transparent;
             border-width: 0 0 1px 0;
-            border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
-            color: light-dark(var(--p-surface-500), var(--p-surface-400));
+            border-color: var(--border-color);
+            color: var(--text-secondary-color);
             padding: 1rem 1.125rem;
             font-weight: 600;
             transition: none;
@@ -102,19 +102,19 @@
         .p-tab:not(.p-tab-active):not(.p-disabled):hover {
             background: transparent;
             border-color: transparent;
-            color: light-dark(var(--p-surface-700), var(--p-surface-0));
+            color: var(--high-contrast-text-color);
         }
 
         .p-tab-active {
             background: transparent;
             border-color: transparent;
-            color: light-dark(#09090b, #ffffff);
+            color: var(--high-contrast-text-color);
         }
 
         .p-tablist-active-bar {
             inset-block-end: -1px;
             height: 1px;
-            background: light-dark(#09090b, #ffffff);
+            background: var(--high-contrast-text-color);
             transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
         }
 
@@ -128,12 +128,12 @@
     .p-accordion {
         .p-accordionpanel {
             border-width: 0 0 1px 0;
-            border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+            border-color: var(--border-color);
         }
 
         .p-accordionheader {
             padding: 1.125rem;
-            color: light-dark(var(--p-surface-500), var(--p-surface-400));
+            color: var(--text-secondary-color);
             background: transparent;
             border-width: 0;
             border-color: unset;
@@ -159,13 +159,13 @@
         }
 
         .p-accordionheader-toggle-icon {
-            color: light-dark(var(--p-surface-500), var(--p-surface-400));
+            color: var(--text-secondary-color);
         }
 
         .p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled)>.p-accordionheader:hover,
         .p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader {
             background: transparent;
-            color: light-dark(var(--p-surface-700), var(--p-surface-0));
+            color: var(--text-color);
         }
 
         .p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon,
@@ -175,7 +175,7 @@
 
         .p-accordioncontent-content {
             border-width: 0;
-            border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
+            border-color: var(--border-color);
             background-color: transparent;
             color: inherit;
             padding: 0 1.125rem 1.125rem 1.125rem;
@@ -184,21 +184,21 @@
 
     .p-fileupload-choose-button {
         padding: 0.5rem 0.75rem;
-        background: light-dark(#09090b, #ffffff);
-        border-color: light-dark(#09090b, #ffffff);
-        color: light-dark(#ffffff, #000000);
+        background: var(--designer-primary-color);
+        border-color: var(--designer-primary-color);
+        color: var(--designer-primary-contrast-color);
         cursor: pointer;
         font-weight: medium;
         border-radius: 4px;
         transition: background 0.2s;
 
         &:hover {
-            background: light-dark(#27272a, #f3f4f6);
-            border-color: light-dark(#27272a, #f3f4f6);
+            background: var(--designer-primary--emphasis-color);
+            border-color: var(--designer-primary--emphasis-color);
         }
 
         &:focus-visible {
-            outline: 1px solid light-dark(#09090b, #ffffff);
+            outline: 1px solid var(--designer-primary-color);
             outline-offset: 2px;
             box-shadow: none;
         }
diff --git a/apps/showcase/assets/styles/layout/variables/main/_dark.scss b/apps/showcase/assets/styles/layout/variables/main/_dark.scss
index 1e85ae81c..415fcb1fc 100644
--- a/apps/showcase/assets/styles/layout/variables/main/_dark.scss
+++ b/apps/showcase/assets/styles/layout/variables/main/_dark.scss
@@ -1,14 +1,14 @@
 :root[class="p-dark"] {
-    --primary-text-color:var(--p-primary-400);
+    --primary-text-color: var(--p-primary-400);
     --primary-color: var(--p-primary-color);
-    --primary-contrast-color:var(--p-primary-contrast-color);
+    --primary-contrast-color: var(--p-primary-contrast-color);
     --primary-hover-color: var(--p-primary-hover-color);
     --text-color: var(--p-surface-0);
     --text-secondary-color: var(--p-surface-400);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
     --glow-blend: hard-light, color-dodge;
-    --topbar-sticky-background:rgba(0,0,0,.3);
-    --mobile-menu-background: rgba(0,0,0,.3);
+    --topbar-sticky-background: rgba(0, 0, 0, .3);
+    --mobile-menu-background: rgba(0, 0, 0, .3);
     --card-border: 1px solid transparent;
     --card-background: var(--p-surface-900);
     --border-color: var(--p-surface-700);
@@ -25,4 +25,7 @@
     --code-button-text-color: var(--p-surface-300);
     --docsearch-mask-background: var(--p-mask-background);
     --logo-color: var(--text-secondary-color);
+    --designer-primary-color: #ffffff;
+    --designer-primary-emphasis-color: #f3f4f6;
+    --designer-primary-contrast-color: #000000;
 }
\ No newline at end of file
diff --git a/apps/showcase/assets/styles/layout/variables/main/_light.scss b/apps/showcase/assets/styles/layout/variables/main/_light.scss
index a2d43e5d5..56ef61701 100644
--- a/apps/showcase/assets/styles/layout/variables/main/_light.scss
+++ b/apps/showcase/assets/styles/layout/variables/main/_light.scss
@@ -25,4 +25,7 @@
     --code-button-text-color: var(--p-surface-300);
     --docsearch-mask-background: var(--p-mask-background);
     --logo-color: var(--text-secondary-color);
+    --designer-primary-color: #09090b;
+    --designer-primary-emphasis-color: #27272a;
+    --designer-primary-contrast-color: #ffffff;
 }
\ No newline at end of file

From 747465806d3465ba5720a99a975db4c7a6fc9f4a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 14:53:26 +0300
Subject: [PATCH 02/17] Cosmetics for pencil icon

---
 .../components/layout/designer/dashboard/DesignDashboard.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
index c2232b302..db8ebccb1 100644
--- a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
+++ b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -57,8 +57,8 @@
                 </button>
                 <div class="flex flex-col items-center gap-1">
                     <div class="group flex items-center gap-2 relative">
-                        <input v-model="theme.t_name" type="text" class="w-24 text-sm px-2 text-center" maxlength="100" @blur="renameTheme(theme)" />
-                        <i class="hidden group-hover:block pi pi-pencil !text-sm absolute top-50 right-0 text-muted-color"></i>
+                        <input v-model="theme.t_name" type="text" class="w-24 text-sm px-2 text-center pr-4" maxlength="100" @blur="renameTheme(theme)" />
+                        <i class="hidden group-hover:block pi pi-pencil !text-xs absolute top-50 text-muted-color" style="right: 2px"></i>
                     </div>
                     <span class="text-muted-color text-xs">{{ formatTimestamp(theme.t_last_updated) }}</span>
                 </div>

From 8413c0e1f1a7d83a3d6cc63f878b5f279bda7ee3 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 14:56:07 +0300
Subject: [PATCH 03/17] Fixed size for designer icons

---
 apps/showcase/assets/styles/layout/_designer.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/apps/showcase/assets/styles/layout/_designer.scss b/apps/showcase/assets/styles/layout/_designer.scss
index 6afa3f53e..273d3f150 100644
--- a/apps/showcase/assets/styles/layout/_designer.scss
+++ b/apps/showcase/assets/styles/layout/_designer.scss
@@ -13,6 +13,13 @@
         cursor: pointer;
     }
 
+    .p-icon,
+    .pi {
+        font-size: 14px !important;
+        width: 14px !important;
+        height: 14px !important;
+    }
+
     [type='color']::-webkit-color-swatch {
         border-radius: 4px;
         width: 24px;

From 4f812f10fa7abaad7a38105c3f4b125ac1ae1b86 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 14:59:15 +0300
Subject: [PATCH 04/17] Reset font settings on creation of new theme

---
 .../components/layout/designer/create/DesignCreateTheme.vue    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
index 14050d56d..b7c1f4eda 100644
--- a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
+++ b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -199,6 +199,9 @@ export default {
                     font_family: 'Inter var'
                 }
             };
+            this.designerService.applyFont('Inter var');
+            document.documentElement.style.fontSize = '14px';
+
             this.designerService.replaceColorPalette();
             usePreset(preset);
             this.designerService.refreshACTokens();

From a0bd06611fa0f134cbe452a3dd3534ffa7ca43aa Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 16:17:13 +0300
Subject: [PATCH 05/17] Update focus visuals

---
 .../assets/styles/layout/_designer.scss       | 33 ++++++++++++++++++-
 .../styles/layout/variables/main/_dark.scss   |  1 +
 .../styles/layout/variables/main/_light.scss  |  1 +
 .../designer/editor/DesignTokenField.vue      |  4 +--
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/apps/showcase/assets/styles/layout/_designer.scss b/apps/showcase/assets/styles/layout/_designer.scss
index 273d3f150..cadced68c 100644
--- a/apps/showcase/assets/styles/layout/_designer.scss
+++ b/apps/showcase/assets/styles/layout/_designer.scss
@@ -13,6 +13,16 @@
         cursor: pointer;
     }
 
+    input:focus-visible {
+        outline: 1px solid var(--designer-focus-outline-color);
+        outline-offset: 0px;
+    }
+
+    button:focus-visible {
+        outline: 1px solid var(--designer-focus-outline-color);
+        outline-offset: 2px;
+    }
+
     .p-icon,
     .pi {
         font-size: 14px !important;
@@ -63,7 +73,11 @@
             background: transparent;
             border: 0 none;
             border-radius: 4px;
-            outline-color: transparent;
+
+            &:focus-visible {
+                outline: 1px solid var(--designer-focus-outline-color);
+                outline-offset: -1px;
+            }
         }
 
         .p-fieldset-toggle-icon {
@@ -104,6 +118,11 @@
             font-weight: 600;
             transition: none;
             margin: 0 0 -1px 0;
+
+            &:focus-visible {
+                outline: 1px solid var(--designer-focus-outline-color);
+                outline-offset: -1px;
+            }
         }
 
         .p-tab:not(.p-tab-active):not(.p-disabled):hover {
@@ -130,6 +149,13 @@
             color: inherit;
             padding: 0.875rem 0 1.125rem 0;
         }
+
+        .p-tabpanel {
+            &:focus-visible {
+                outline: 1px solid var(--designer-focus-outline-color);
+                outline-offset: 0;
+            }
+        }
     }
 
     .p-accordion {
@@ -147,6 +173,11 @@
             font-weight: 600;
             border-radius: 4px;
             transition: none;
+
+            &:focus-visible {
+                outline: 1px solid var(--designer-focus-outline-color);
+                outline-offset: -1px;
+            }
         }
 
         .p-accordionpanel:first-child>.p-accordionheader {
diff --git a/apps/showcase/assets/styles/layout/variables/main/_dark.scss b/apps/showcase/assets/styles/layout/variables/main/_dark.scss
index 415fcb1fc..82207f76f 100644
--- a/apps/showcase/assets/styles/layout/variables/main/_dark.scss
+++ b/apps/showcase/assets/styles/layout/variables/main/_dark.scss
@@ -28,4 +28,5 @@
     --designer-primary-color: #ffffff;
     --designer-primary-emphasis-color: #f3f4f6;
     --designer-primary-contrast-color: #000000;
+    --designer-focus-outline-color: #ffffff;
 }
\ No newline at end of file
diff --git a/apps/showcase/assets/styles/layout/variables/main/_light.scss b/apps/showcase/assets/styles/layout/variables/main/_light.scss
index 56ef61701..0f57f0ac3 100644
--- a/apps/showcase/assets/styles/layout/variables/main/_light.scss
+++ b/apps/showcase/assets/styles/layout/variables/main/_light.scss
@@ -28,4 +28,5 @@
     --designer-primary-color: #09090b;
     --designer-primary-emphasis-color: #27272a;
     --designer-primary-contrast-color: #ffffff;
+    --designer-focus-outline-color: #09090b;
 }
\ No newline at end of file
diff --git a/apps/showcase/components/layout/designer/editor/DesignTokenField.vue b/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
index 4585a33e7..841fc2e3b 100644
--- a/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
+++ b/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
@@ -2,7 +2,7 @@
     <div class="group">
         <div class="flex justify-between justify-items-center">
             <label :for="inputId" class="text-xs text-zinc-700 dark:text-white/70 block capitalize text-ellipsis overflow-hidden w-full whitespace-nowrap mb-px" :title="label">{{ label }}</label>
-            <button v-if="switchable" type="button" @click="transfer">
+            <button v-if="switchable" type="button" @click="transfer" tabindex="-1">
                 <i class="pi pi-sort-alt !text-xs text-zinc-500 dark:text-white/50 hidden group-hover:block animate-fadein" title="Transfer between color scheme and common"></i>
             </button>
         </div>
@@ -47,8 +47,8 @@
 </template>
 
 <script>
-import { uuid } from '@primeuix/utils';
 import { $dt } from '@primeuix/themes';
+import { uuid } from '@primeuix/utils';
 
 export default {
     emits: ['update:modelValue'],

From fa1282da9d87c08eab64e09b663525eecf411522 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 16:24:04 +0300
Subject: [PATCH 06/17] Check for valid theme name

---
 .../designer/create/DesignCreateTheme.vue     | 94 ++++++++++---------
 1 file changed, 51 insertions(+), 43 deletions(-)

diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
index b7c1f4eda..d0b2a640a 100644
--- a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
+++ b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -98,46 +98,20 @@ export default {
     },
     methods: {
         async createThemeFromPreset() {
-            const newPreset = presets[this.basePreset];
-
-            if (this.basePreset === 'Material') {
-                document.body.classList.add('material');
-                this.$primevue.config.ripple = true;
+            if (this.themeName == null || !this.themeName.trim().length) {
+                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Name is required', life: 3000 });
             } else {
-                document.body.classList.remove('material');
-            }
+                const newPreset = presets[this.basePreset];
 
-            if (this.$appState.designer.verified) {
-                const { data, error } = await $fetch(this.designerApiUrl + '/theme/create', {
-                    method: 'POST',
-                    credentials: 'include',
-                    headers: {
-                        'X-CSRF-Token': this.$appState.designer.csrfToken
-                    },
-                    body: {
-                        name: this.themeName,
-                        preset: newPreset,
-                        project: 'primevue',
-                        config: {
-                            font_size: '14px',
-                            font_family: 'Inter var'
-                        }
-                    }
-                });
-
-                if (error) {
-                    this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
+                if (this.basePreset === 'Material') {
+                    document.body.classList.add('material');
+                    this.$primevue.config.ripple = true;
                 } else {
-                    this.loadThemeEditor(data.t_key, newPreset);
+                    document.body.classList.remove('material');
                 }
-            } else {
-                this.loadThemeEditor('trial', newPreset);
-            }
-        },
-        async createThemeFromFigma() {
-            if (this.figmaData) {
+
                 if (this.$appState.designer.verified) {
-                    const { data, error } = await $fetch(this.designerApiUrl + '/theme/figma', {
+                    const { data, error } = await $fetch(this.designerApiUrl + '/theme/create', {
                         method: 'POST',
                         credentials: 'include',
                         headers: {
@@ -145,7 +119,7 @@ export default {
                         },
                         body: {
                             name: this.themeName,
-                            figma_tokens: this.figmaData,
+                            preset: newPreset,
                             project: 'primevue',
                             config: {
                                 font_size: '14px',
@@ -157,17 +131,51 @@ export default {
                     if (error) {
                         this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
                     } else {
-                        this.loadThemeEditor(data.t_key, data.t_preset);
-
-                        if (data.lostAndFound?.length) {
-                            this.$toast.add({ severity: 'warn', summary: 'Warning', detail: 'There are missing tokens. An update is recommended using the "Migration Assistant" in the settings section.' });
-                        }
+                        this.loadThemeEditor(data.t_key, newPreset);
                     }
                 } else {
-                    this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'A valid license required', life: 3000 });
+                    this.loadThemeEditor('trial', newPreset);
                 }
+            }
+        },
+        async createThemeFromFigma() {
+            if (this.themeName == null || !this.themeName.trim().length) {
+                this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Name is required', life: 3000 });
             } else {
-                this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'File is required', life: 3000 });
+                if (this.figmaData) {
+                    if (this.$appState.designer.verified) {
+                        const { data, error } = await $fetch(this.designerApiUrl + '/theme/figma', {
+                            method: 'POST',
+                            credentials: 'include',
+                            headers: {
+                                'X-CSRF-Token': this.$appState.designer.csrfToken
+                            },
+                            body: {
+                                name: this.themeName,
+                                figma_tokens: this.figmaData,
+                                project: 'primevue',
+                                config: {
+                                    font_size: '14px',
+                                    font_family: 'Inter var'
+                                }
+                            }
+                        });
+
+                        if (error) {
+                            this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
+                        } else {
+                            this.loadThemeEditor(data.t_key, data.t_preset);
+
+                            if (data.lostAndFound?.length) {
+                                this.$toast.add({ severity: 'warn', summary: 'Warning', detail: 'There are missing tokens. An update is recommended using the "Migration Assistant" in the settings section.' });
+                            }
+                        }
+                    } else {
+                        this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'A valid license required', life: 3000 });
+                    }
+                } else {
+                    this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'File is required', life: 3000 });
+                }
             }
         },
         onFileSelect(event) {

From 86b076eca8b3034aa621d79d00ad5fcf6a61b6a6 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 16:26:22 +0300
Subject: [PATCH 07/17] Fixed fileupload button hover

---
 apps/showcase/assets/styles/layout/_designer.scss | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/showcase/assets/styles/layout/_designer.scss b/apps/showcase/assets/styles/layout/_designer.scss
index cadced68c..aa5d4ae04 100644
--- a/apps/showcase/assets/styles/layout/_designer.scss
+++ b/apps/showcase/assets/styles/layout/_designer.scss
@@ -228,14 +228,16 @@
         cursor: pointer;
         font-weight: medium;
         border-radius: 4px;
-        transition: background 0.2s;
+        transition: background-color 0.2s;
 
-        &:hover {
-            background: var(--designer-primary--emphasis-color);
-            border-color: var(--designer-primary--emphasis-color);
+        &:enabled:hover,
+        &:enabled:active {
+            background: var(--designer-primary-emphasis-color);
+            border-color: var(--designer-primary-emphasis-color);
         }
 
-        &:focus-visible {
+        &:enabled:active,
+        &:enabled:focus-visible {
             outline: 1px solid var(--designer-primary-color);
             outline-offset: 2px;
             box-shadow: none;

From 421a48789db31f0e0854a24a21d161671a17ddb6 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 16:34:47 +0300
Subject: [PATCH 08/17] Fixed tab border

---
 apps/showcase/assets/styles/layout/_designer.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/showcase/assets/styles/layout/_designer.scss b/apps/showcase/assets/styles/layout/_designer.scss
index aa5d4ae04..e3627b5d1 100644
--- a/apps/showcase/assets/styles/layout/_designer.scss
+++ b/apps/showcase/assets/styles/layout/_designer.scss
@@ -133,11 +133,12 @@
 
         .p-tab-active {
             background: transparent;
-            border-color: transparent;
+            border-color: var(--high-contrast-text-color);
             color: var(--high-contrast-text-color);
         }
 
         .p-tablist-active-bar {
+            display: none;
             inset-block-end: -1px;
             height: 1px;
             background: var(--high-contrast-text-color);

From 3b00f6691729cae0f29e0cf72cb22f75d62dda90 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 16:42:07 +0300
Subject: [PATCH 09/17] No need to replace palette for created themes

---
 apps/showcase/components/layout/AppDesigner.vue                 | 1 -
 .../components/layout/designer/dashboard/DesignDashboard.vue    | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 1cdf3533e..2b97a7a0d 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -226,7 +226,6 @@ export default {
             usePreset(this.$appState.designer.theme.preset);
             this.applyFont(this.$appState.designer.theme.config.font_family);
             document.documentElement.style.fontSize = this.$appState.designer.theme.config.font_size;
-            this.replaceColorPalette();
             this.refreshACTokens();
         },
         getCookie(name) {
diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
index db8ebccb1..dc16560f0 100644
--- a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
+++ b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -40,7 +40,7 @@
             ]"
             @click="openNewTheme"
         >
-            <i class="pi pi-plus !text-2xl"></i>
+            <i class="pi pi-plus"></i>
         </button>
         <template v-if="loading">
             <Skeleton class="!rounded-xl !h-32 !w-32">-</Skeleton>

From f4e1ba7241bd87ef8a91f9bdbdfd0c5d6256979d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 19:46:43 +0300
Subject: [PATCH 10/17] New color palette logic

---
 apps/showcase/components/layout/AppDesigner.vue   | 15 +++++++++------
 .../layout/designer/create/DesignCreateTheme.vue  |  1 -
 .../layout/designer/editor/DesignColorPalette.vue |  3 ++-
 .../designer/editor/primitive/DesignColors.vue    |  3 ++-
 .../designer/editor/semantic/DesignGeneral.vue    |  3 ++-
 .../semantic/colorscheme/DesignCSCommon.vue       |  4 ++--
 6 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 2b97a7a0d..be74eab60 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -53,7 +53,7 @@ export default {
                 activateTheme: this.activateTheme,
                 applyTheme: this.applyTheme,
                 applyFont: this.applyFont,
-                replaceColorPalette: this.replaceColorPalette
+                resolveColor: this.resolveColor
             }
         };
     },
@@ -207,11 +207,6 @@ export default {
                 // silent fail as some fonts may have not all the font weights
             }
         },
-        replaceColorPalette() {
-            this.$appState.designer.theme.preset.semantic.primary = this.$appState.designer.theme.preset.primitive.emerald;
-            this.$appState.designer.theme.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.slate };
-            this.$appState.designer.theme.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.zinc };
-        },
         toggleDarkMode() {
             EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme });
         },
@@ -240,6 +235,14 @@ export default {
             }
 
             return null;
+        },
+        resolveColor(token) {
+            if (token.startsWith('{') && token.endsWith('}')) {
+                let cssVariable = $dt(token).variable.slice(4, -1);
+                return getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
+            } else {
+                return token;
+            }
         }
     },
     computed: {
diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
index d0b2a640a..73b9a75fe 100644
--- a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
+++ b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -210,7 +210,6 @@ export default {
             this.designerService.applyFont('Inter var');
             document.documentElement.style.fontSize = '14px';
 
-            this.designerService.replaceColorPalette();
             usePreset(preset);
             this.designerService.refreshACTokens();
 
diff --git a/apps/showcase/components/layout/designer/editor/DesignColorPalette.vue b/apps/showcase/components/layout/designer/editor/DesignColorPalette.vue
index d83d7425d..bbed58074 100644
--- a/apps/showcase/components/layout/designer/editor/DesignColorPalette.vue
+++ b/apps/showcase/components/layout/designer/editor/DesignColorPalette.vue
@@ -1,11 +1,12 @@
 <template>
     <div class="flex flex-1 border border-surface rounded-l-lg rounded-r-lg overflow-hidden">
-        <div v-for="color of value" :key="color" class="flex-1 h-8" :style="{ backgroundColor: color }" :title="color"></div>
+        <div v-for="color of value" :key="color" class="flex-1 h-8" :style="{ backgroundColor: designerService.resolveColor(color) }" :title="color"></div>
     </div>
 </template>
 
 <script>
 export default {
+    inject: ['designerService'],
     props: {
         value: {
             type: Object,
diff --git a/apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue b/apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue
index 66e4075d0..a35f4511e 100644
--- a/apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue
+++ b/apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue
@@ -4,7 +4,7 @@
             <section v-if="key !== 'borderRadius'" class="flex justify-between items-center mb-4 gap-8">
                 <div class="flex gap-2 items-center">
                     <span class="text-sm capitalize block w-20">{{ key }}</span>
-                    <input :value="$appState.designer.theme.preset.primitive[key]['500']" @input="onColorChange($event, key)" type="color" />
+                    <input :value="designerService.resolveColor($appState.designer.theme.preset.primitive[key]['500'])" @input="onColorChange($event, key)" type="color" />
                 </div>
                 <DesignColorPalette :value="$appState.designer.theme.preset.primitive[key]" />
             </section>
@@ -16,6 +16,7 @@
 import { palette } from '@primeuix/themes';
 
 export default {
+    inject: ['designerService'],
     methods: {
         onColorChange(event, color) {
             this.$appState.designer.theme.preset.primitive[color] = palette(event.target.value);
diff --git a/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue b/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
index 99ad6eb3d..469c9e613 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
@@ -3,7 +3,7 @@
         <section class="flex justify-between items-center mb-5 gap-8">
             <div class="flex gap-2 items-center">
                 <span class="text-sm">Primary</span>
-                <input :value="$appState.designer.theme.preset.semantic.primary['500']" @input="onPrimaryColorChange($event)" type="color" />
+                <input :value="designerService.resolveColor($appState.designer.theme.preset.semantic.primary['500'])" @input="onPrimaryColorChange($event)" type="color" class="w-0 h-0" />
             </div>
             <DesignColorPalette :value="$appState.designer.theme.preset.semantic.primary" />
         </section>
@@ -52,6 +52,7 @@
 import { palette } from '@primeuix/themes';
 
 export default {
+    inject: ['designerService'],
     methods: {
         onPrimaryColorChange(event) {
             this.$appState.designer.theme.preset.semantic.primary = palette(event.target.value);
diff --git a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue
index 541a791ab..22287f1fa 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue
@@ -3,7 +3,7 @@
         <section class="flex justify-between items-center mb-5 gap-8">
             <div class="flex gap-2 items-center">
                 <span class="text-sm">Surface</span>
-                <input :value="$colorScheme.surface['500']" @input="onSurfaceColorChange($event)" type="color" />
+                <input :value="designerService.resolveColor($colorScheme.surface['500'])" @input="onSurfaceColorChange($event)" type="color" />
             </div>
             <DesignColorPalette :value="$colorScheme.surface" />
         </section>
@@ -82,7 +82,7 @@
 import { palette } from '@primeuix/themes';
 
 export default {
-    inject: ['$colorScheme'],
+    inject: ['$colorScheme', 'designerService'],
     methods: {
         onSurfaceColorChange(event) {
             this.$colorScheme.surface = { ...{ 0: '#ffffff' }, ...palette(event.target.value) };

From 87645d9f22165e015ba6cf00b003b6dc20c2c3fb Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 21:14:33 +0300
Subject: [PATCH 11/17] Improved text

---
 .../designer/create/DesignCreateTheme.vue       |  1 +
 .../designer/dashboard/DesignDashboard.vue      | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
index 73b9a75fe..5fb6ed813 100644
--- a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
+++ b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -213,6 +213,7 @@ export default {
             usePreset(preset);
             this.designerService.refreshACTokens();
 
+            this.$appState.designer.activeTab = '0';
             this.$appState.designer.activeView = 'editor';
         }
     }
diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
index dc16560f0..33b00dda1 100644
--- a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
+++ b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -6,11 +6,17 @@
     </div>
 
     <div class="text-lg font-semibold mb-2">Authenticate</div>
-    <span class="block text-muted-color leading-6 mb-4"
-        >A license can be purchased from PrimeStore, if you do not have a license key, you are still able to experience the Designer in trial mode. In trial mode, downloads, figma to code, migration assistant and cloud storage are not available.
-        <NuxtLink to="/designer" class="doc-link">Learn more</NuxtLink> about the Theme Designer.</span
-    >
-    <span class="block text-muted-color leading-6 mb-4">License key and pass key are available at <a href="https://primefaces.org/store/designer.xhtml" class="doc-link" rel="noopener noreferrer">PrimeStore</a>.</span>
+    <div v-if="!$appState.designer.verified">
+        <span class="block leading-6 mb-4"
+            >Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to code, cloud storage, and migration assistant. <NuxtLink to="/designer" class="doc-link">Discover</NuxtLink> more about the
+            Theme Designer by visiting the detailed <NuxtLink to="/designer/guide" class="doc-link">documentation</NuxtLink></span
+        >
+        <span class="block leading-6 mb-4"
+            >A license can be purchased from <a href="https://primefaces.org/store/designer.xhtml" class="doc-link" rel="noopener noreferrer">PrimeStore</a>, if you do not have a license key, you are still able to experience the Designer in trial
+            mode. Note that in trial mode, downloads, figma to code, migration assistant and cloud storage are not available.</span
+        >
+        <span class="block leading-6 mb-4">Sign-in at <a href="https://primefaces.org/store/designer.xhtml" class="doc-link" rel="noopener noreferrer">PrimeStore</a> to retrieve your license key along with the pass key.</span>
+    </div>
     <form v-if="!$appState.designer.verified" @submit.prevent class="flex gap-4">
         <input v-model="licenseKey" type="password" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" placeholder="License Key" />
         <input v-model="otp" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700" placeholder="Pass Key" />
@@ -227,6 +233,7 @@ export default {
                 this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
             } else {
                 this.designerService.activateTheme(data);
+                this.$appState.designer.activeTab = '0';
                 this.$appState.designer.activeView = 'editor';
             }
         },

From d5b5616fbf5ec5b0db81439f4326b11db8b992ff Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 21:21:27 +0300
Subject: [PATCH 12/17] Cleanup material specific configuration

---
 apps/showcase/assets/styles/layout/_core.scss              | 4 ----
 apps/showcase/components/layout/AppConfigurator.vue        | 7 -------
 .../layout/designer/create/DesignCreateTheme.vue           | 7 -------
 .../layout/designer/dashboard/DesignDashboard.vue          | 2 --
 apps/showcase/nuxt.config.js                               | 3 +--
 5 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/apps/showcase/assets/styles/layout/_core.scss b/apps/showcase/assets/styles/layout/_core.scss
index 5bddda336..31aeb6fec 100644
--- a/apps/showcase/assets/styles/layout/_core.scss
+++ b/apps/showcase/assets/styles/layout/_core.scss
@@ -5,10 +5,6 @@ html {
     line-height: normal;
 }
 
-.material {
-    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
 body {
     margin: 0px;
     min-height: 100%;
diff --git a/apps/showcase/components/layout/AppConfigurator.vue b/apps/showcase/components/layout/AppConfigurator.vue
index 6d49874e2..8d2c913cd 100755
--- a/apps/showcase/components/layout/AppConfigurator.vue
+++ b/apps/showcase/components/layout/AppConfigurator.vue
@@ -306,13 +306,6 @@ export default {
             const preset = presets[value];
             const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor)?.palette;
 
-            if (value === 'Material') {
-                document.body.classList.add('material');
-                this.$primevue.config.ripple = true;
-            } else {
-                document.body.classList.remove('material');
-            }
-
             $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
         },
         onRTLChange(value) {
diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
index 5fb6ed813..18e5bae73 100644
--- a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
+++ b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -103,13 +103,6 @@ export default {
             } else {
                 const newPreset = presets[this.basePreset];
 
-                if (this.basePreset === 'Material') {
-                    document.body.classList.add('material');
-                    this.$primevue.config.ripple = true;
-                } else {
-                    document.body.classList.remove('material');
-                }
-
                 if (this.$appState.designer.verified) {
                     const { data, error } = await $fetch(this.designerApiUrl + '/theme/create', {
                         method: 'POST',
diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
index 33b00dda1..0f12e95b1 100644
--- a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
+++ b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -195,8 +195,6 @@ export default {
                 this.currentTheme = null;
 
                 usePreset(Aura);
-                document.body.classList.remove('material');
-                this.$primevue.config.ripple = false;
             }
         },
         openNewTheme() {
diff --git a/apps/showcase/nuxt.config.js b/apps/showcase/nuxt.config.js
index 25a099929..8bb2921fa 100644
--- a/apps/showcase/nuxt.config.js
+++ b/apps/showcase/nuxt.config.js
@@ -73,8 +73,7 @@ export default defineNuxtConfig({
             ],
             link: [
                 { rel: 'icon', href: baseUrl + 'favicon.ico' },
-                { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
-                { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:400|Roboto:500|Roboto:600|Roboto:700', fetchpriority: 'low' }
+                { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
             ],
             script: [
                 {

From c1b98c069ad0c50b43ad8e14e1477126b40453d7 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 21:24:48 +0300
Subject: [PATCH 13/17] Apply preset after custom token change

---
 .../layout/designer/editor/custom/DesignCustomTokens.vue       | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue b/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
index fa9c6d40c..c51946d4d 100644
--- a/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
+++ b/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import { usePreset } from '@primeuix/themes';
+
 export default {
     inject: ['designerService'],
     data() {
@@ -61,6 +63,7 @@ export default {
             });
 
             this.designerService.saveTheme(this.$appState.designer.theme);
+            usePreset(this.$appState.designer.theme.preset);
             this.designerService.refreshACTokens();
             this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Tokens saved', life: 3000 });
         },

From 9fa14d859bfddeb11aba4734a520acb3fdd28841 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 21:41:36 +0300
Subject: [PATCH 14/17] Refresh AC on theme save

---
 apps/showcase/components/layout/AppDesigner.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index be74eab60..7243e4136 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -140,6 +140,7 @@ export default {
         applyTheme(theme) {
             if (this.$appState.designer.verified) {
                 this.saveTheme(theme);
+                this.refreshACTokens();
             }
 
             updatePreset(theme.preset);

From 0c1816e4f578f6448fdb771af49861f478dd6d42 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 22:14:44 +0300
Subject: [PATCH 15/17] Send base preset

---
 .../components/layout/designer/create/DesignCreateTheme.vue     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
index 18e5bae73..1d9f23d2e 100644
--- a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
+++ b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -114,6 +114,7 @@ export default {
                             name: this.themeName,
                             preset: newPreset,
                             project: 'primevue',
+                            base: this.basePreset,
                             config: {
                                 font_size: '14px',
                                 font_family: 'Inter var'
@@ -147,6 +148,7 @@ export default {
                                 name: this.themeName,
                                 figma_tokens: this.figmaData,
                                 project: 'primevue',
+                                base: 'Figma',
                                 config: {
                                     font_size: '14px',
                                     font_family: 'Inter var'

From f9070d0478105d885f19d83e7944be0fe6d81b87 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 22:37:41 +0300
Subject: [PATCH 16/17] usePreset instead of updatePreset

---
 apps/showcase/components/layout/AppDesigner.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 7243e4136..79a932327 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -34,7 +34,7 @@
 
 <script>
 import EventBus from '@/app/AppEventBus';
-import { $dt, updatePreset, usePreset } from '@primeuix/themes';
+import { $dt, usePreset } from '@primeuix/themes';
 
 export default {
     setup() {
@@ -143,7 +143,7 @@ export default {
                 this.refreshACTokens();
             }
 
-            updatePreset(theme.preset);
+            usePreset(theme.preset);
             EventBus.emit('theme-palette-change');
         },
         camelCaseToDotCase(name) {

From d9793fd5ae9360993532406bf025392a4fca3031 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 18 Feb 2025 23:22:56 +0300
Subject: [PATCH 17/17] Improved autocomplete tokens

---
 apps/showcase/components/layout/AppDesigner.vue            | 4 ++--
 .../components/layout/designer/editor/DesignTokenField.vue | 7 ++++++-
 .../layout/designer/editor/primitive/DesignColors.vue      | 5 ++++-
 .../layout/designer/editor/semantic/DesignGeneral.vue      | 5 ++++-
 .../editor/semantic/colorscheme/DesignCSCommon.vue         | 5 ++++-
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 79a932327..59cffc5f9 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -1,5 +1,5 @@
 <template>
-    <Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide">
+    <Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" blockScroll @after-show="onShow" @after-hide="onHide">
         <template #container="{ closeCallback }">
             <div class="flex items-center justify-between p-5">
                 <div class="flex items-center gap-2">
@@ -164,7 +164,7 @@ export default {
                         const regex = /\.\d+$/;
 
                         const tokenName = this.camelCaseToDotCase(parentPath ? parentPath + '.' + key : key);
-                        const tokenValue = $dt(tokenName).value;
+                        const tokenValue = obj[key];
                         const isColor = tokenName.includes('color') || tokenName.includes('background') || regex.test(tokenName);
 
                         this.$appState.designer.acTokens.push({ token: tokenName, label: '{' + tokenName + '}', variable: $dt(tokenName).variable, value: tokenValue, isColor: isColor });
diff --git a/apps/showcase/components/layout/designer/editor/DesignTokenField.vue b/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
index 841fc2e3b..6fe571dda 100644
--- a/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
+++ b/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
@@ -10,6 +10,7 @@
             <AutoComplete
                 :modelValue="modelValue"
                 @input="onInput"
+                @blur="onBlur"
                 :inputId="inputId"
                 :suggestions="items"
                 @complete="search"
@@ -34,7 +35,7 @@
                 <template #option="slotProps">
                     <div v-tooltip.left="slotProps.option.value" class="flex items-center justify-between gap-4 px-2">
                         <span>{{ slotProps.option.token }}</span>
-                        <div v-if="slotProps.option.isColor" class="border border-surface-200 dark:border-surface-700 w-4 h-4 rounded-full" :style="{ backgroundColor: slotProps.option.variable }"></div>
+                        <div v-if="slotProps.option.isColor" class="border border-surface-200 dark:border-surface-700 w-4 h-4 rounded-full" :style="{ backgroundColor: designerService.resolveColor(slotProps.option.value) }"></div>
                         <div v-else class="text-xs max-w-16 text-ellipsis whitespace-nowrap overflow-hidden">
                             {{ slotProps.option.value }}
                         </div>
@@ -52,6 +53,7 @@ import { uuid } from '@primeuix/utils';
 
 export default {
     emits: ['update:modelValue'],
+    inject: ['designerService'],
     props: {
         label: {
             type: String,
@@ -212,6 +214,9 @@ export default {
             delete current[lastKey];
 
             return true;
+        },
+        onBlur() {
+            this.designerService.refreshACTokens();
         }
     },
     computed: {
diff --git a/apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue b/apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue
index a35f4511e..3da30bf24 100644
--- a/apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue
+++ b/apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue
@@ -4,7 +4,7 @@
             <section v-if="key !== 'borderRadius'" class="flex justify-between items-center mb-4 gap-8">
                 <div class="flex gap-2 items-center">
                     <span class="text-sm capitalize block w-20">{{ key }}</span>
-                    <input :value="designerService.resolveColor($appState.designer.theme.preset.primitive[key]['500'])" @input="onColorChange($event, key)" type="color" />
+                    <input :value="designerService.resolveColor($appState.designer.theme.preset.primitive[key]['500'])" @input="onColorChange($event, key)" type="color" @blur="onBlur" />
                 </div>
                 <DesignColorPalette :value="$appState.designer.theme.preset.primitive[key]" />
             </section>
@@ -20,6 +20,9 @@ export default {
     methods: {
         onColorChange(event, color) {
             this.$appState.designer.theme.preset.primitive[color] = palette(event.target.value);
+        },
+        onBlur() {
+            this.designerService.refreshACTokens();
         }
     }
 };
diff --git a/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue b/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
index 469c9e613..f25f12607 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
@@ -3,7 +3,7 @@
         <section class="flex justify-between items-center mb-5 gap-8">
             <div class="flex gap-2 items-center">
                 <span class="text-sm">Primary</span>
-                <input :value="designerService.resolveColor($appState.designer.theme.preset.semantic.primary['500'])" @input="onPrimaryColorChange($event)" type="color" class="w-0 h-0" />
+                <input :value="designerService.resolveColor($appState.designer.theme.preset.semantic.primary['500'])" @input="onPrimaryColorChange($event)" type="color" class="w-0 h-0" @onBlur="onColorPickerBlur" />
             </div>
             <DesignColorPalette :value="$appState.designer.theme.preset.semantic.primary" />
         </section>
@@ -56,6 +56,9 @@ export default {
     methods: {
         onPrimaryColorChange(event) {
             this.$appState.designer.theme.preset.semantic.primary = palette(event.target.value);
+        },
+        onColorPickerBlur() {
+            this.designerService.refreshACTokens();
         }
     }
 };
diff --git a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue
index 22287f1fa..489ec3753 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue
@@ -3,7 +3,7 @@
         <section class="flex justify-between items-center mb-5 gap-8">
             <div class="flex gap-2 items-center">
                 <span class="text-sm">Surface</span>
-                <input :value="designerService.resolveColor($colorScheme.surface['500'])" @input="onSurfaceColorChange($event)" type="color" />
+                <input :value="designerService.resolveColor($colorScheme.surface['500'])" @input="onSurfaceColorChange($event)" type="color" @blur="onColorPickerBlur" />
             </div>
             <DesignColorPalette :value="$colorScheme.surface" />
         </section>
@@ -86,6 +86,9 @@ export default {
     methods: {
         onSurfaceColorChange(event) {
             this.$colorScheme.surface = { ...{ 0: '#ffffff' }, ...palette(event.target.value) };
+        },
+        onColorPickerBlur() {
+            this.designerService.refreshACTokens();
         }
     }
 };