From 79e144377b010260c699bfe080543ce07b289023 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 1 Apr 2024 13:38:37 +0300
Subject: [PATCH] Add two new utils

---
 .../styled/utils/UpdatePrimaryPaletteDoc.vue  | 36 +++++++++++++
 .../styled/utils/UpdateSurfacePaletteDoc.vue  | 51 +++++++++++++++++++
 pages/migration/v4/index.vue                  |  2 +-
 pages/theming/styled/index.vue                | 12 +++++
 4 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 doc/theming/styled/utils/UpdatePrimaryPaletteDoc.vue
 create mode 100644 doc/theming/styled/utils/UpdateSurfacePaletteDoc.vue

diff --git a/doc/theming/styled/utils/UpdatePrimaryPaletteDoc.vue b/doc/theming/styled/utils/UpdatePrimaryPaletteDoc.vue
new file mode 100644
index 000000000..7ccf401a5
--- /dev/null
+++ b/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>
diff --git a/doc/theming/styled/utils/UpdateSurfacePaletteDoc.vue b/doc/theming/styled/utils/UpdateSurfacePaletteDoc.vue
new file mode 100644
index 000000000..ca9f8a3a7
--- /dev/null
+++ b/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>
diff --git a/pages/migration/v4/index.vue b/pages/migration/v4/index.vue
index 9c2ece647..9136dff91 100644
--- a/pages/migration/v4/index.vue
+++ b/pages/migration/v4/index.vue
@@ -41,7 +41,7 @@ export default {
                     label: 'Breaking Changes',
                     children: [
                         {
-                            id: 'pluging',
+                            id: 'plugin',
                             label: 'Plugin',
                             component: PluginDoc
                         },
diff --git a/pages/theming/styled/index.vue b/pages/theming/styled/index.vue
index 20620f829..7c5727edf 100755
--- a/pages/theming/styled/index.vue
+++ b/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',