New color palette logic

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: {

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();
 

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,

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);

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);

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) };