From b67857abde92eaf503b26b95e3856fec703d90d0 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 16 Mar 2023 11:11:34 +0300
Subject: [PATCH] Documentation updates

---
 doc/installation/PluginDoc.vue  | 22 ++++++++++++++++++++++
 doc/theming/ArchitectureDoc.vue |  2 +-
 doc/theming/CSSVariablesDoc.vue |  5 +++++
 pages/installation/index.vue    |  6 ++++++
 pages/theming/index.vue         |  6 ++++++
 5 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 doc/installation/PluginDoc.vue
 create mode 100644 doc/theming/CSSVariablesDoc.vue

diff --git a/doc/installation/PluginDoc.vue b/doc/installation/PluginDoc.vue
new file mode 100644
index 000000000..38333ac4e
--- /dev/null
+++ b/doc/installation/PluginDoc.vue
@@ -0,0 +1,22 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeVue plugin is required to be installed with the <i>use</i> function to set up the default <NuxtLink to="/theming">configuration</NuxtLink>.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+
+const app = createApp(App);
+app.use(PrimeVue);`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/theming/ArchitectureDoc.vue b/doc/theming/ArchitectureDoc.vue
index 62d874ec4..b71e4ceb4 100644
--- a/doc/theming/ArchitectureDoc.vue
+++ b/doc/theming/ArchitectureDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">
             <strong>Note</strong>: In upcoming versions, theming architecture will be redesigned to utilize CSS variables instead of SCSS variables in a backward compatible way for a dynamic approach. In addition, a new <strong>Unstyled</strong> mode
-            will be provided as an optional approach to replace default styling so that CSS libraries like Tailwind or Bootstrap can be used to style the components. This work is planned to be completed by the end of Q2 2023.
+            will be provided as an alternative to the default styling so that CSS libraries like Tailwind or Bootstrap can be used to style the components. This work is planned to be completed by the end of Q2 2023.
         </p>
         <p>
             PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into two parts, core and theme. The core resides
diff --git a/doc/theming/CSSVariablesDoc.vue b/doc/theming/CSSVariablesDoc.vue
new file mode 100644
index 000000000..c2b7910eb
--- /dev/null
+++ b/doc/theming/CSSVariablesDoc.vue
@@ -0,0 +1,5 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Each PrimeVue theme exports numerous CSS variables, refer to <NuxtLink to="/colors">Colors</NuxtLink> page for more details.</p>
+    </DocSectionText>
+</template>
diff --git a/pages/installation/index.vue b/pages/installation/index.vue
index fcbe19233..e9e3d5083 100644
--- a/pages/installation/index.vue
+++ b/pages/installation/index.vue
@@ -19,6 +19,7 @@
 import DownloadDoc from '@/doc/installation/DownloadDoc';
 import ExamplesDoc from '@/doc/installation/ExamplesDoc';
 import NuxtIntegrationDoc from '@/doc/installation/NuxtIntegrationDoc';
+import PluginDoc from '@/doc/installation/PluginDoc';
 import PropCasesDoc from '@/doc/installation/PropCasesDoc';
 import StylesDoc from '@/doc/installation/StylesDoc';
 import UsageDoc from '@/doc/installation/UsageDoc';
@@ -34,6 +35,11 @@ export default {
                     label: 'Download',
                     component: DownloadDoc
                 },
+                {
+                    id: 'plugin',
+                    label: 'Plugin',
+                    component: PluginDoc
+                },
                 {
                     id: 'styles',
                     label: 'Styles',
diff --git a/pages/theming/index.vue b/pages/theming/index.vue
index 498531491..3ca100634 100755
--- a/pages/theming/index.vue
+++ b/pages/theming/index.vue
@@ -27,6 +27,7 @@ import PrimeFlexDoc from '@/doc/theming/PrimeFlexDoc';
 import ScaleDoc from '@/doc/theming/ScaleDoc';
 import ScopedCSSDoc from '@/doc/theming/ScopedCSSDoc';
 import UtilsDoc from '@/doc/theming/UtilsDoc';
+import CSSVariablesDoc from '../../doc/theming/CSSVariablesDoc';
 import SwitchThemesDoc from '../../doc/theming/SwitchThemesDoc';
 
 export default {
@@ -77,6 +78,11 @@ export default {
                     id: 'utils',
                     label: 'Utils',
                     component: UtilsDoc
+                },
+                {
+                    id: 'cssvariables',
+                    label: 'CSS Variables',
+                    component: CSSVariablesDoc
                 }
             ]
         };