Add two new utils

doc/theming/styled/utils/UpdatePrimaryPaletteDoc.vue

@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Updates the primary colors, this is a shorthand to do the same update using <i>updatePreset</i>.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import { updatePrimaryPalette } from 'primevue/themes'; 
+
+const changePrimaryColor() {
+    updatePrimaryPalette({
+        50: '{indigo.50}',
+        100: '{indigo.100}',
+        200: '{indigo.200}',
+        300: '{indigo.300}',
+        400: '{indigo.400}',
+        500: '{indigo.500}',
+        600: '{indigo.600}',
+        700: '{indigo.700}',
+        800: '{indigo.800}',
+        900: '{indigo.900}',
+        950: '{indigo.950}'
+    });
+}
+`
+            }
+        };
+    }
+};
+</script>

doc/theming/styled/utils/UpdateSurfacePaletteDoc.vue

@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Updates the surface colors, this is a shorthand to do the same update using <i>updatePreset</i>.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import { updateSurfacePalette } from 'primevue/themes'; 
+
+const changeSurfaces() {
+    //changes surfaces both in light and dark mode
+    updateSurfacePalette({
+        50: '{zinc.50}',
+        // ...
+        950: '{zinc.950}'
+    });
+}
+
+const changeLightSurfaces() {
+    //changes surfaces only in light
+    updateSurfacePalette({
+        light: {
+            50: '{zinc.50}',
+            // ...
+            950: '{zinc.950}'
+        }
+    });
+}
+
+const changeDarkSurfaces() {
+    //changes surfaces only in dark mode
+    updateSurfacePalette({
+        dark: {
+            50: '{zinc.50}',
+            // ...
+            950: '{zinc.950}'
+        }
+    });
+}
+`
+            }
+        };
+    }
+};
+</script>

pages/migration/v4/index.vue

@@ -41,7 +41,7 @@ export default {
                     label: 'Breaking Changes',
                     children: [
                         {
-                            id: 'pluging',
+                            id: 'plugin',
                             label: 'Plugin',
                             component: PluginDoc
                         },

pages/theming/styled/index.vue

@@ -43,6 +43,8 @@ import SurfaceDoc from '@/doc/theming/styled/customization/SurfaceDoc.vue';
 import DTDoc from '@/doc/theming/styled/utils/DTDoc.vue';
 import PaletteDoc from '@/doc/theming/styled/utils/PaletteDoc.vue';
 import UpdatePresetDoc from '@/doc/theming/styled/utils/UpdatePresetDoc.vue';
+import UpdatePrimaryPaletteDoc from '@/doc/theming/styled/utils/UpdatePrimaryPaletteDoc.vue';
+import UpdateSurfacePaletteDoc from '@/doc/theming/styled/utils/UpdateSurfacePaletteDoc.vue';
 import UsePresetDoc from '@/doc/theming/styled/utils/UsePresetDoc.vue';
 import UseThemeDoc from '@/doc/theming/styled/utils/UseThemeDoc.vue';
 
@@ -141,6 +143,16 @@ export default {
                             label: 'updatePreset',
                             component: UpdatePresetDoc
                         },
+                        {
+                            id: 'updateprimarypalette',
+                            label: 'updatePrimaryPalette',
+                            component: UpdatePrimaryPaletteDoc
+                        },
+                        {
+                            id: 'updatesurfacepalette',
+                            label: 'updateSurfacePalette',
+                            component: UpdateSurfacePaletteDoc
+                        },
                         {
                             id: 'usetheme',
                             label: 'useTheme',