From ad7eb10b57efa2a890d360b974a1527fb988ade2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 25 Jul 2024 10:21:54 +0300
Subject: [PATCH] Update docs

---
 apps/showcase/doc/tailwind/PresetsDoc.vue                 | 1 -
 apps/showcase/doc/theming/styled/ArchitectureDoc.vue      | 2 +-
 apps/showcase/doc/theming/styled/ColorsDoc.vue            | 2 +-
 .../styled/{DarkModeToggleDoc.vue => DarkModeDoc.vue}     | 3 ++-
 apps/showcase/doc/theming/styled/PresetsDoc.vue           | 2 +-
 .../doc/theming/styled/configuration/OptionsDoc.vue       | 4 ++--
 .../doc/theming/styled/configuration/ThemeDoc.vue         | 2 +-
 apps/showcase/pages/theming/styled/index.vue              | 8 ++++----
 8 files changed, 12 insertions(+), 12 deletions(-)
 rename apps/showcase/doc/theming/styled/{DarkModeToggleDoc.vue => DarkModeDoc.vue} (81%)

diff --git a/apps/showcase/doc/tailwind/PresetsDoc.vue b/apps/showcase/doc/tailwind/PresetsDoc.vue
index 869bf67a6..6e30fa344 100644
--- a/apps/showcase/doc/tailwind/PresetsDoc.vue
+++ b/apps/showcase/doc/tailwind/PresetsDoc.vue
@@ -1,6 +1,5 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <div class="doc-notification">Currently, the Tailwind CSS Presets are not compatible with v4 and will be with a future update after v4 final.</div>
         <p>
             In unstyled mode of PrimeVue, default styling elements like design tokens and css classes are turned off so that you have full control over the component styling with pass-through properties. This feature is quite useful when you'd like
             to build your own UI library based on a custom design by wrapping PrimeVue components or simply utilitze Tailwind CSS to style the PrimeVue components.
diff --git a/apps/showcase/doc/theming/styled/ArchitectureDoc.vue b/apps/showcase/doc/theming/styled/ArchitectureDoc.vue
index dad1c04af..c238e0470 100644
--- a/apps/showcase/doc/theming/styled/ArchitectureDoc.vue
+++ b/apps/showcase/doc/theming/styled/ArchitectureDoc.vue
@@ -16,7 +16,7 @@
         <h3>Semantic Tokens</h3>
         <p>
             Semantic tokens define content and their names indicate where they are utilized, a well known example of a semantic token is the <i>primary.color</i>. Semantic tokens map to primitive tokens or other semantic tokens. The
-            <i>colorScheme</i> token group is a special variable to define tokens based on the color scheme active in the application, this allows defining different tokens based on the color scheme like implementing dark mode.
+            <i>colorScheme</i> token group is a special variable to define tokens based on the color scheme active in the application, this allows defining different tokens based on the color scheme like dark mode.
         </p>
 
         <h3>Component Tokens</h3>
diff --git a/apps/showcase/doc/theming/styled/ColorsDoc.vue b/apps/showcase/doc/theming/styled/ColorsDoc.vue
index fa5545897..efe863f0e 100644
--- a/apps/showcase/doc/theming/styled/ColorsDoc.vue
+++ b/apps/showcase/doc/theming/styled/ColorsDoc.vue
@@ -3,8 +3,8 @@
         <p>
             Color palette of a preset is defined by the <i>primitive</i> design token group. The default colors are derived from the Tailwind colors with some extensions to make it consistent with the Tailwind Presets projects of the unstyled mode.
         </p>
+        <p>Colors can be accessed at CSS as a variable and programmatically using the <i>$dt</i> utility.</p>
     </DocSectionText>
-    <p>Colors can be accessed at CSS as a variable and programmatically using the <i>$dt</i> utility.</p>
     <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
     <div class="card">
         <ul class="p-0 m-0 list-none flex sm:flex-col gap-4 flex-wrap sm:flex-nowrap">
diff --git a/apps/showcase/doc/theming/styled/DarkModeToggleDoc.vue b/apps/showcase/doc/theming/styled/DarkModeDoc.vue
similarity index 81%
rename from apps/showcase/doc/theming/styled/DarkModeToggleDoc.vue
rename to apps/showcase/doc/theming/styled/DarkModeDoc.vue
index e12a46c6a..6411a7453 100644
--- a/apps/showcase/doc/theming/styled/DarkModeToggleDoc.vue
+++ b/apps/showcase/doc/theming/styled/DarkModeDoc.vue
@@ -6,11 +6,12 @@
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <p>
-            An example implementation of a dark mode switch, you may extend it further by involving <i>prefers-color-scheme</i> to keep it from the system initially and <i>localStorage</i> to make it stateful. See this
+            Following is a very basic example implementation of a dark mode switch, you may extend it further by involving <i>prefers-color-scheme</i> to retrieve it from the system initially and use <i>localStorage</i> to make it stateful. See this
             <a href="https://dev.to/abbeyperini/dark-mode-toggle-and-prefers-color-scheme-4f3m" target="_blank" rel="noopener noreferrer">article</a> for more information.
         </p>
         <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
         <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
+        <p>In case you prefer to use dark mode all the time, apply the <i>darkModeSelector</i> initially and never change it.</p>
     </DocSectionText>
 </template>
 
diff --git a/apps/showcase/doc/theming/styled/PresetsDoc.vue b/apps/showcase/doc/theming/styled/PresetsDoc.vue
index aa83dbacd..a9979c2e1 100644
--- a/apps/showcase/doc/theming/styled/PresetsDoc.vue
+++ b/apps/showcase/doc/theming/styled/PresetsDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Currently Aura is the only available preset and more will follow in the upcoming updates.</p>
+        <p>Currently Aura, Lara and Nora are the available presets, a new preset based on Material Design is planned by the end of 2024.</p>
     </DocSectionText>
     <div class="card">
         <Tabs value="aura">
diff --git a/apps/showcase/doc/theming/styled/configuration/OptionsDoc.vue b/apps/showcase/doc/theming/styled/configuration/OptionsDoc.vue
index a67b49ca1..5caa114e4 100644
--- a/apps/showcase/doc/theming/styled/configuration/OptionsDoc.vue
+++ b/apps/showcase/doc/theming/styled/configuration/OptionsDoc.vue
@@ -12,8 +12,8 @@
         <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
         <h4>cssLayer</h4>
         <p>
-            Defines whether the styles should be defined inside a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" target="_blank" rel="noopener noreferrer">CSS layer</a> named <i>primeui</i> or not. A CSS layer would be handy to
-            declare a custom cascade layer for easier customization. The default is <i>false</i>.
+            Defines whether the styles should be defined inside a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" target="_blank" rel="noopener noreferrer">CSS layer</a> named <i>primeui</i> by default or not. A CSS layer would be
+            handy to declare a custom cascade layer for easier customization. The default is <i>false</i>.
         </p>
         <DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
diff --git a/apps/showcase/doc/theming/styled/configuration/ThemeDoc.vue b/apps/showcase/doc/theming/styled/configuration/ThemeDoc.vue
index 6d692163e..ffd5547dd 100644
--- a/apps/showcase/doc/theming/styled/configuration/ThemeDoc.vue
+++ b/apps/showcase/doc/theming/styled/configuration/ThemeDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The <i>theme</i> property is used to customize the initial theme, prefer the <i>PrimeVue</i> plugin for custom configuration instead of the preconfigured <i>PrimeVueStyled</i>.</p>
+        <p>The <i>theme</i> property is used to customize the initial theme.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
diff --git a/apps/showcase/pages/theming/styled/index.vue b/apps/showcase/pages/theming/styled/index.vue
index 417508f80..389d324d0 100755
--- a/apps/showcase/pages/theming/styled/index.vue
+++ b/apps/showcase/pages/theming/styled/index.vue
@@ -23,7 +23,7 @@ import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
 import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
 import CaseStyleDoc from '@/doc/theming/styled/CaseStyleDoc.vue';
 import ColorsDoc from '@/doc/theming/styled/ColorsDoc.vue';
-import DarkModeToggleDoc from '@/doc/theming/styled/DarkModeToggleDoc.vue';
+import DarkModeDoc from '@/doc/theming/styled/DarkModeDoc.vue';
 import PresetsDoc from '@/doc/theming/styled/PresetsDoc.vue';
 import ReservedKeysDoc from '@/doc/theming/styled/ReservedKeysDoc.vue';
 import ScaleDoc from '@/doc/theming/styled/ScaleDoc.vue';
@@ -181,9 +181,9 @@ export default {
                     component: ColorsDoc
                 },
                 {
-                    id: 'darkmodetoggle',
-                    label: 'Dark Mode Toggle',
-                    component: DarkModeToggleDoc
+                    id: 'darkmode',
+                    label: 'Dark Mode',
+                    component: DarkModeDoc
                 },
                 {
                     id: 'csslayer',