From cfa9435d2643672834e5adcbd4a245b4c2497651 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Thu, 14 Nov 2024 03:58:28 +0000
Subject: [PATCH] Update deep watcher for `config.theme` and Improve designer

---
 .../components/layout/AppDesigner.vue         | 208 +++++++++++++++++-
 .../layout/designer/DesignColorPalette.vue    |  15 +-
 .../designer/semantic/DesignGeneral.vue       |  17 +-
 apps/showcase/themes/app-theme.js             |   4 +-
 packages/core/src/config/PrimeVue.js          |   2 +-
 5 files changed, 237 insertions(+), 9 deletions(-)

diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 9e33c250d..ac41b9952 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -156,7 +156,8 @@
 </template>
 
 <script>
-import { updatePreset, usePreset } from '@primevue/themes';
+import { NoirPreset } from '@/themes/app-theme.js';
+import { $t, updatePreset, usePreset } from '@primevue/themes';
 import Aura from '@primevue/themes/aura';
 import Lara from '@primevue/themes/lara';
 import Material from '@primevue/themes/material';
@@ -181,8 +182,8 @@ export default {
         return {
             activeTab: '0',
             preset: {
-                primitive: Aura.primitive,
-                semantic: Aura.semantic
+                primitive: NoirPreset.primitive,
+                semantic: NoirPreset.semantic
             },
             presetOptions: [
                 { label: 'Aura', value: 'Aura' },
@@ -199,6 +200,173 @@ export default {
         this.generateACTokens(null, this.preset);
     },
     methods: {
+        getPresetExt() {
+            const color = this.primaryColors.find((c) => c.name === this.selectedPrimaryColor);
+
+            if (color.name === 'noir') {
+                document.documentElement.style.setProperty('--logo-color', 'var(--text-secondary-color)');
+
+                return {
+                    semantic: {
+                        primary: {
+                            50: '{surface.50}',
+                            100: '{surface.100}',
+                            200: '{surface.200}',
+                            300: '{surface.300}',
+                            400: '{surface.400}',
+                            500: '{surface.500}',
+                            600: '{surface.600}',
+                            700: '{surface.700}',
+                            800: '{surface.800}',
+                            900: '{surface.900}',
+                            950: '{surface.950}'
+                        },
+                        colorScheme: {
+                            light: {
+                                primary: {
+                                    color: '{primary.950}',
+                                    contrastColor: '#ffffff',
+                                    hoverColor: '{primary.800}',
+                                    activeColor: '{primary.700}'
+                                },
+                                highlight: {
+                                    background: '{primary.950}',
+                                    focusBackground: '{primary.700}',
+                                    color: '#ffffff',
+                                    focusColor: '#ffffff'
+                                }
+                            },
+                            dark: {
+                                primary: {
+                                    color: '{primary.50}',
+                                    contrastColor: '{primary.950}',
+                                    hoverColor: '{primary.200}',
+                                    activeColor: '{primary.300}'
+                                },
+                                highlight: {
+                                    background: '{primary.50}',
+                                    focusBackground: '{primary.300}',
+                                    color: '{primary.950}',
+                                    focusColor: '{primary.950}'
+                                }
+                            }
+                        }
+                    }
+                };
+            } else {
+                document.documentElement.style.setProperty('--logo-color', 'var(--primary-color)');
+
+                if (this.$appState.preset === 'Nora') {
+                    return {
+                        semantic: {
+                            primary: color.palette,
+                            colorScheme: {
+                                light: {
+                                    primary: {
+                                        color: '{primary.600}',
+                                        contrastColor: '#ffffff',
+                                        hoverColor: '{primary.700}',
+                                        activeColor: '{primary.800}'
+                                    },
+                                    highlight: {
+                                        background: '{primary.600}',
+                                        focusBackground: '{primary.700}',
+                                        color: '#ffffff',
+                                        focusColor: '#ffffff'
+                                    }
+                                },
+                                dark: {
+                                    primary: {
+                                        color: '{primary.500}',
+                                        contrastColor: '{surface.900}',
+                                        hoverColor: '{primary.400}',
+                                        activeColor: '{primary.300}'
+                                    },
+                                    highlight: {
+                                        background: '{primary.500}',
+                                        focusBackground: '{primary.400}',
+                                        color: '{surface.900}',
+                                        focusColor: '{surface.900}'
+                                    }
+                                }
+                            }
+                        }
+                    };
+                } else if (this.$appState.preset === 'Material') {
+                    return {
+                        semantic: {
+                            primary: color.palette,
+                            colorScheme: {
+                                light: {
+                                    primary: {
+                                        color: '{primary.500}',
+                                        contrastColor: '#ffffff',
+                                        hoverColor: '{primary.400}',
+                                        activeColor: '{primary.300}'
+                                    },
+                                    highlight: {
+                                        background: 'color-mix(in srgb, {primary.color}, transparent 88%)',
+                                        focusBackground: 'color-mix(in srgb, {primary.color}, transparent 76%)',
+                                        color: '{primary.700}',
+                                        focusColor: '{primary.800}'
+                                    }
+                                },
+                                dark: {
+                                    primary: {
+                                        color: '{primary.400}',
+                                        contrastColor: '{surface.900}',
+                                        hoverColor: '{primary.300}',
+                                        activeColor: '{primary.200}'
+                                    },
+                                    highlight: {
+                                        background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+                                        focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+                                        color: 'rgba(255,255,255,.87)',
+                                        focusColor: 'rgba(255,255,255,.87)'
+                                    }
+                                }
+                            }
+                        }
+                    };
+                } else {
+                    return {
+                        semantic: {
+                            primary: color.palette,
+                            colorScheme: {
+                                light: {
+                                    primary: {
+                                        color: '{primary.500}',
+                                        contrastColor: '#ffffff',
+                                        hoverColor: '{primary.600}',
+                                        activeColor: '{primary.700}'
+                                    },
+                                    highlight: {
+                                        background: '{primary.50}',
+                                        focusBackground: '{primary.100}',
+                                        color: '{primary.700}',
+                                        focusColor: '{primary.800}'
+                                    }
+                                },
+                                dark: {
+                                    primary: {
+                                        color: '{primary.400}',
+                                        contrastColor: '{surface.900}',
+                                        hoverColor: '{primary.300}',
+                                        activeColor: '{primary.200}'
+                                    },
+                                    highlight: {
+                                        background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+                                        focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+                                        color: 'rgba(255,255,255,.87)',
+                                        focusColor: 'rgba(255,255,255,.87)'
+                                    }
+                                }
+                            }
+                        }
+                    };
+                }
+            }
+        },
         apply() {
             this.saveTheme();
             updatePreset(this.preset);
@@ -247,6 +415,8 @@ app.mount("#app");
                 document.body.classList.remove('material');
             }
 
+            /*
+            @todo: ask to the team about this
             this.preset = {
                 primitive: newPreset.primitive,
                 semantic: newPreset.semantic
@@ -257,6 +427,13 @@ app.mount("#app");
             this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc };
 
             usePreset(this.preset);
+            */
+            const currentPreset = $t().preset(newPreset).preset(this.getPresetExt()).use({ useDefaultOptions: true }).preset;
+
+            this.preset = {
+                primitive: currentPreset.primitive,
+                semantic: currentPreset.semantic
+            };
         },
         saveTheme() {
             const localState = {
@@ -310,9 +487,12 @@ app.mount("#app");
             this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Tokens saved', life: 3000 });
         },
         replaceColorPalette() {
+            /*
+            @todo: ask to the team about this
             this.preset.semantic.primary = this.preset.primitive.emerald;
             this.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.slate };
             this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc };
+            */
         },
         transformTokenName(name) {
             if (name && name.trim().length) {
@@ -358,6 +538,28 @@ app.mount("#app");
                 event.preventDefault();
             }
         }
+    },
+    computed: {
+        selectedPrimaryColor() {
+            return this.$appState.primary;
+        },
+        selectedSurfaceColor() {
+            return this.$appState.surface;
+        },
+        primaryColors() {
+            const presetPalette = presets[this.$appState.preset].primitive;
+            const colors = ['emerald', 'green', 'lime', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
+            const palettes = [{ name: 'noir', palette: {} }];
+
+            colors.forEach((color) => {
+                palettes.push({
+                    name: color,
+                    palette: presetPalette[color]
+                });
+            });
+
+            return palettes;
+        }
     }
 };
 </script>
diff --git a/apps/showcase/components/layout/designer/DesignColorPalette.vue b/apps/showcase/components/layout/designer/DesignColorPalette.vue
index 54bd22c7b..5e0d11822 100644
--- a/apps/showcase/components/layout/designer/DesignColorPalette.vue
+++ b/apps/showcase/components/layout/designer/DesignColorPalette.vue
@@ -1,16 +1,29 @@
 <template>
     <div class="flex border border-surface rounded-l-lg rounded-r-lg overflow-hidden">
-        <div v-for="color of value" :key="color" class="w-8 h-8" :style="{ backgroundColor: color }" :title="color"></div>
+        <div v-for="(color, i) of value" :key="i + '_' + color" class="w-8 h-8" :style="getStyle(color)" :title="color"></div>
     </div>
 </template>
 
 <script>
+import { isObject } from '@primeuix/utils';
+import { $dt } from '@primevue/themes';
+
 export default {
     props: {
         value: {
             type: Object,
             default: null
         }
+    },
+    methods: {
+        getStyle(color) {
+            const colorScheme = this.$appState.darkTheme ? 'light' : 'dark';
+            const token = color?.replace(/{|}/g, '');
+            const tokenValue = $dt(token)?.value;
+            const backgroundColor = (isObject(tokenValue) ? tokenValue[colorScheme]?.value : tokenValue) ?? color;
+
+            return { backgroundColor };
+        }
     }
 };
 </script>
diff --git a/apps/showcase/components/layout/designer/semantic/DesignGeneral.vue b/apps/showcase/components/layout/designer/semantic/DesignGeneral.vue
index 4b96dfd3b..edca3ea47 100644
--- a/apps/showcase/components/layout/designer/semantic/DesignGeneral.vue
+++ b/apps/showcase/components/layout/designer/semantic/DesignGeneral.vue
@@ -3,7 +3,7 @@
         <section class="flex justify-between items-center mb-4">
             <div class="flex gap-2 items-center">
                 <span class="text-sm">Primary</span>
-                <input :value="$preset.semantic.primary['500']" @input="onPrimaryColorChange($event)" type="color" />
+                <input :defaultValue="primaryColor" @input="onPrimaryColorChange($event)" type="color" :title="$preset.semantic.primary['500']" />
             </div>
             <DesignColorPalette :value="$preset.semantic.primary" />
         </section>
@@ -49,13 +49,26 @@
 </template>
 
 <script>
-import { palette } from '@primevue/themes';
+import { isObject } from '@primeuix/utils';
+import { $dt, palette } from '@primevue/themes';
 
 export default {
     inject: ['$preset'],
+    data() {
+        return {
+            primaryColor: this.getColor('{primary.500}')
+        };
+    },
     methods: {
         onPrimaryColorChange(event) {
             this.$preset.semantic.primary = palette(event.target.value);
+        },
+        getColor(color) {
+            const colorScheme = this.$appState.darkTheme ? 'light' : 'dark';
+            const token = color?.replace(/{|}/g, '');
+            const tokenValue = $dt(token)?.value;
+
+            return (isObject(tokenValue) ? tokenValue[colorScheme]?.value : tokenValue) ?? color;
         }
     }
 };
diff --git a/apps/showcase/themes/app-theme.js b/apps/showcase/themes/app-theme.js
index d32dd849e..0af3addce 100644
--- a/apps/showcase/themes/app-theme.js
+++ b/apps/showcase/themes/app-theme.js
@@ -1,7 +1,7 @@
 import { definePreset } from '@primevue/themes';
 import Aura from '@primevue/themes/aura';
 
-const Noir = definePreset(Aura, {
+export const NoirPreset = definePreset(Aura, {
     semantic: {
         primary: {
             50: '{surface.50}',
@@ -50,7 +50,7 @@ const Noir = definePreset(Aura, {
 });
 
 export default {
-    preset: Noir,
+    preset: NoirPreset,
     options: {
         darkModeSelector: '.p-dark'
     }
diff --git a/packages/core/src/config/PrimeVue.js b/packages/core/src/config/PrimeVue.js
index 84e5381bf..1874564e2 100644
--- a/packages/core/src/config/PrimeVue.js
+++ b/packages/core/src/config/PrimeVue.js
@@ -247,7 +247,7 @@ export function setupConfig(app, PrimeVue) {
             isThemeChanged.value = false;
             PrimeVueService.emit('config:theme:change', { newValue, oldValue });
         },
-        { immediate: true, deep: true }
+        { immediate: true, deep: false }
     );
 
     const stopUnstyledWatcher = watch(