Migrated to new design tokens of v4

src/layout/AppConfigurator.vue

@@ -221,10 +221,10 @@ function applyTheme(type, color) {
 
 function onPresetChange(value) {
     setPreset(value);
-    const preset = presetOptions[value];
+    const presetValue = presets[value];
     const surfacePalette = surfaces.value.find((s) => s.name === selectedSurfaceColor.value)?.palette;
 
-    $t().preset(preset).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
+    $t().preset(presetValue).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
 }
 
 const selectedPrimaryColor = computed(() => {
@@ -236,7 +236,7 @@ const selectedSurfaceColor = computed(() => {
 });
 
 const preset = computed(() => {
-    return layoutConfig.preset;
+    return layoutConfig.preset.value;
 });
 </script>
 

src/layout/AppMenu.vue

@@ -178,7 +178,7 @@ const model = ref([
         </template>
         <li>
             <a href="https://www.primefaces.org/primeblocks-vue/#/" target="_blank">
-                <img src="/layout/images/banner-primeblocks.png" alt="Prime Blocks" class="w-full mt-3" />
+                <img src="/layout/images/banner-primeblocks.png" alt="Prime Blocks" class="w-full mt-4" />
             </a>
         </li>
     </ul>

src/layout/AppTopbar.vue

@@ -88,7 +88,7 @@ const isOutsideClicked = (event) => {
             <button type="button" class="p-link layout-topbar-button" @click="toggleDarkMode">
                 <i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
             </button>
-            <div>
+            <div class="relative">
                 <button
                     v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
                     type="button" class="p-link layout-topbar-button">