From d80a18c0527baf459bc472b0c90f5fd397d05d1a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 30 Mar 2024 15:19:34 +0300
Subject: [PATCH] Initiated docs and default preset update

---
 assets/menu/menu.json                         | 54 ++---------
 .../lib/themes/primeone/presets/aura/index.js | 48 +++++-----
 doc/theming/ArchitectureDoc.vue               | 10 --
 doc/theming/BuiltInThemesDoc.vue              | 66 --------------
 doc/theming/CSSVariablesDoc.vue               |  5 -
 doc/theming/CustomThemeDoc.vue                | 58 ------------
 doc/theming/PrimeFlexDoc.vue                  | 35 -------
 doc/theming/SwitchThemesDoc.vue               | 73 ---------------
 doc/theming/UtilsDoc.vue                      | 49 ----------
 doc/theming/styled/ArchitectureDoc.vue        | 35 +++++++
 doc/theming/styled/CSSLayerDoc.vue            | 22 +++++
 doc/theming/{ => styled}/CSSModulesDoc.vue    |  0
 doc/theming/styled/DarkModeToggleDoc.vue      | 22 +++++
 doc/theming/{ => styled}/ScaleDoc.vue         |  0
 doc/theming/{ => styled}/ScopedCSSDoc.vue     |  0
 .../styled/configuration/OptionsDoc.vue       | 17 ++++
 doc/theming/styled/configuration/ThemeDoc.vue | 38 ++++++++
 .../unstyled/ArchitectureDoc.vue              |  0
 doc/{ => theming}/unstyled/ExampleDoc.vue     |  0
 doc/{ => theming}/unstyled/SetupDoc.vue       |  0
 doc/{ => theming}/unstyled/ThemeDoc.vue       |  0
 layouts/AppConfigurator.vue                   |  2 +-
 pages/theming/index.vue                       | 91 -------------------
 pages/theming/styled/index.vue                | 85 +++++++++++++++++
 pages/{ => theming}/unstyled/index.vue        |  8 +-
 themes/aura.js                                | 51 ++++++++++-
 26 files changed, 307 insertions(+), 462 deletions(-)
 delete mode 100644 doc/theming/ArchitectureDoc.vue
 delete mode 100644 doc/theming/BuiltInThemesDoc.vue
 delete mode 100644 doc/theming/CSSVariablesDoc.vue
 delete mode 100644 doc/theming/CustomThemeDoc.vue
 delete mode 100644 doc/theming/PrimeFlexDoc.vue
 delete mode 100644 doc/theming/SwitchThemesDoc.vue
 delete mode 100644 doc/theming/UtilsDoc.vue
 create mode 100644 doc/theming/styled/ArchitectureDoc.vue
 create mode 100644 doc/theming/styled/CSSLayerDoc.vue
 rename doc/theming/{ => styled}/CSSModulesDoc.vue (100%)
 create mode 100644 doc/theming/styled/DarkModeToggleDoc.vue
 rename doc/theming/{ => styled}/ScaleDoc.vue (100%)
 rename doc/theming/{ => styled}/ScopedCSSDoc.vue (100%)
 create mode 100644 doc/theming/styled/configuration/OptionsDoc.vue
 create mode 100644 doc/theming/styled/configuration/ThemeDoc.vue
 rename doc/{ => theming}/unstyled/ArchitectureDoc.vue (100%)
 rename doc/{ => theming}/unstyled/ExampleDoc.vue (100%)
 rename doc/{ => theming}/unstyled/SetupDoc.vue (100%)
 rename doc/{ => theming}/unstyled/ThemeDoc.vue (100%)
 delete mode 100755 pages/theming/index.vue
 create mode 100755 pages/theming/styled/index.vue
 rename pages/{ => theming}/unstyled/index.vue (83%)

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index b2ce0f19b..360dc56cc 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -95,13 +95,11 @@
                         },
                         {
                             "name": "FloatLabel",
-                            "to": "/floatlabel",
-                            "badge": "NEW"
+                            "to": "/floatlabel"
                         },
                         {
                             "name": "IconField",
-                            "to": "/iconfield",
-                            "badge": "NEW"
+                            "to": "/iconfield"
                         },
                         {
                             "name": "InputGroup",
@@ -117,8 +115,7 @@
                         },
                         {
                             "name": "InputOtp",
-                            "to": "/inputotp",
-                            "badge": "NEW"
+                            "to": "/inputotp"
                         },
                         {
                             "name": "InputSwitch",
@@ -273,8 +270,7 @@
                         },
                         {
                             "name": "Stepper",
-                            "to": "/stepper",
-                            "badge": "NEW"
+                            "to": "/stepper"
                         },
                         {
                             "name": "TabView",
@@ -445,8 +441,7 @@
                         },
                         {
                             "name": "MeterGroup",
-                            "to": "/metergroup",
-                            "badge": "NEW"
+                            "to": "/metergroup"
                         },
                         {
                             "name": "ScrollTop",
@@ -494,41 +489,11 @@
             "children": [
                 {
                     "name": "Styled Mode",
-                    "children": [
-                        {
-                            "name": "Overview",
-                            "to": "/theming"
-                        },
-                        {
-                            "name": "Colors",
-                            "to": "/colors"
-                        },
-                        {
-                            "name": "SASS API",
-                            "href": "https://www.primefaces.org/designer/api/primevue/3.9.0"
-                        }
-                    ]
+                    "to": "/theming/styled"
                 },
                 {
                     "name": "Unstyled Mode",
-                    "children": [
-                        {
-                            "name": "Overview",
-                            "to": "/unstyled"
-                        },
-                        {
-                            "name": "Bootstrap",
-                            "to": "/bootstrap"
-                        },
-                        {
-                            "name": "Bulma",
-                            "to": "/bulma"
-                        },
-                        {
-                            "name": "UnoCSS",
-                            "to": "/unocss"
-                        }
-                    ]
+                    "to": "/theming/unstyled"
                 }
             ]
         },
@@ -538,10 +503,9 @@
             "to": "/passthrough"
         },
         {
-            "name": "Tailwind",
+            "name": "Tailwind Presets",
             "icon": "pi pi-heart",
-            "href": "https://tailwind.primevue.org/",
-            "badge": "NEW"
+            "href": "https://tailwind.primevue.org/"
         },
         {
             "name": "Figma UI Kit",
diff --git a/components/lib/themes/primeone/presets/aura/index.js b/components/lib/themes/primeone/presets/aura/index.js
index 3cc8664bc..26c54c86a 100644
--- a/components/lib/themes/primeone/presets/aura/index.js
+++ b/components/lib/themes/primeone/presets/aura/index.js
@@ -125,17 +125,17 @@ export default {
         },
         anchorGutter: '2px',
         primary: {
-            50: '{zinc.50}',
-            100: '{zinc.100}',
-            200: '{zinc.200}',
-            300: '{zinc.300}',
-            400: '{zinc.400}',
-            500: '{zinc.500}',
-            600: '{zinc.600}',
-            700: '{zinc.700}',
-            800: '{zinc.800}',
-            900: '{zinc.900}',
-            950: '{zinc.950}'
+            50: '{emerald.50}',
+            100: '{emerald.100}',
+            200: '{emerald.200}',
+            300: '{emerald.300}',
+            400: '{emerald.400}',
+            500: '{emerald.500}',
+            600: '{emerald.600}',
+            700: '{emerald.700}',
+            800: '{emerald.800}',
+            900: '{emerald.900}',
+            950: '{emerald.950}'
         },
         colorScheme: {
             light: {
@@ -154,16 +154,16 @@ export default {
                     950: '{slate.950}'
                 },
                 primary: {
-                    color: '#09090b',
+                    color: '{primary.500}',
                     inverseColor: '#ffffff',
-                    hoverColor: '#18181b',
-                    activeColor: '#27272a'
+                    hoverColor: '{primary.600}',
+                    activeColor: '{primary.700}'
                 },
                 highlight: {
-                    background: '#09090b',
-                    focusBackground: '#3f3f46',
-                    color: '#ffffff',
-                    focusColor: '#ffffff'
+                    background: '{primary.50}',
+                    focusBackground: '{primary.100}',
+                    color: '{primary.700}',
+                    focusColor: '{primary.800}'
                 },
                 maskBackground: 'rgba(0,0,0,0.4)',
                 formField: {
@@ -200,14 +200,14 @@ export default {
                     950: '{zinc.950}'
                 },
                 primary: {
-                    color: '#fafafa',
-                    inverseColor: '#09090b',
-                    hoverColor: '#f4f4f5',
-                    activeColor: '#e4e4e7'
+                    color: '{primary.400}',
+                    inverseColor: '{surface.900}',
+                    hoverColor: '{primary.300}',
+                    activeColor: '{primary.200}'
                 },
                 highlight: {
-                    background: 'rgba(250, 250, 250, .16)',
-                    focusBackground: 'rgba(250, 250, 250, .24)',
+                    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+                    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
                     color: 'rgba(255,255,255,.87)',
                     focusColor: 'rgba(255,255,255,.87)'
                 },
diff --git a/doc/theming/ArchitectureDoc.vue b/doc/theming/ArchitectureDoc.vue
deleted file mode 100644
index 08b3ff4d7..000000000
--- a/doc/theming/ArchitectureDoc.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p class="notification"><strong>Note</strong>: By the end of Q1 2024, PrimeVue v4 will be introduced with a modern theming architecture based on design tokens and css variables.</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
-            inside PrimeVue to implement the structure of the components such as positioning whereas theme brings the colors and spacing.
-        </p>
-        <img alt="Architecture" src="https://primefaces.org/cdn/primevue/images/architecture.jpg" class="w-full" />
-    </DocSectionText>
-</template>
diff --git a/doc/theming/BuiltInThemesDoc.vue b/doc/theming/BuiltInThemesDoc.vue
deleted file mode 100644
index 2a41ed30e..000000000
--- a/doc/theming/BuiltInThemesDoc.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            PrimeVue ships with various free themes to choose from. The list below states all the available themes in the npm distribution with import paths. For a live preview, use the configurator
-            <span class="border-round inline-flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center bg-primary"><span class="pi pi-palette"></span></span> at the topbar to switch themes.
-        </p>
-    </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz scrollable />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-primevue/resources/themes/md-light-indigo/theme.css
-primevue/resources/themes/md-light-deeppurple/theme.css
-primevue/resources/themes/md-dark-indigo/theme.css
-primevue/resources/themes/md-dark-deeppurple/theme.css
-primevue/resources/themes/mdc-light-indigo/theme.css
-primevue/resources/themes/mdc-light-deeppurple/theme.css
-primevue/resources/themes/mdc-dark-indigo/theme.css
-primevue/resources/themes/mdc-dark-deeppurple/theme.css
-primevue/resources/themes/aura-light-blue/theme.css
-primevue/resources/themes/aura-light-indigo/theme.css
-primevue/resources/themes/aura-light-purple/theme.css
-primevue/resources/themes/aura-light-teal/theme.css
-primevue/resources/themes/aura-light-green/theme.css
-primevue/resources/themes/aura-light-amber/theme.css
-primevue/resources/themes/aura-light-cyan/theme.css
-primevue/resources/themes/aura-light-pink/theme.css
-primevue/resources/themes/aura-light-lime/theme.css
-primevue/resources/themes/aura-light-noir/theme.css
-primevue/resources/themes/aura-dark-blue/theme.css
-primevue/resources/themes/aura-dark-indigo/theme.css
-primevue/resources/themes/aura-dark-purple/theme.css
-primevue/resources/themes/aura-dark-teal/theme.css
-primevue/resources/themes/aura-dark-green/theme.css
-primevue/resources/themes/aura-dark-amber/theme.css
-primevue/resources/themes/aura-dark-cyan/theme.css
-primevue/resources/themes/aura-dark-pink/theme.css
-primevue/resources/themes/aura-dark-lime/theme.css
-primevue/resources/themes/aura-dark-noir/theme.css
-primevue/resources/themes/lara-light-blue/theme.css
-primevue/resources/themes/lara-light-indigo/theme.css
-primevue/resources/themes/lara-light-purple/theme.css
-primevue/resources/themes/lara-light-teal/theme.css
-primevue/resources/themes/lara-light-green/theme.css
-primevue/resources/themes/lara-light-amber/theme.css
-primevue/resources/themes/lara-light-cyan/theme.css
-primevue/resources/themes/lara-light-pink/theme.css
-primevue/resources/themes/lara-dark-blue/theme.css
-primevue/resources/themes/lara-dark-indigo/theme.css
-primevue/resources/themes/lara-dark-purple/theme.css
-primevue/resources/themes/lara-dark-teal/theme.css
-primevue/resources/themes/lara-dark-green/theme.css
-primevue/resources/themes/lara-dark-amber/theme.css
-primevue/resources/themes/lara-dark-cyan/theme.css
-primevue/resources/themes/lara-dark-pink/theme.css
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/theming/CSSVariablesDoc.vue b/doc/theming/CSSVariablesDoc.vue
deleted file mode 100644
index 88625b93e..000000000
--- a/doc/theming/CSSVariablesDoc.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Each PrimeVue theme exports numerous CSS variables, refer to <PrimeVueNuxtLink to="/colors">Colors</PrimeVueNuxtLink> page for more details.</p>
-    </DocSectionText>
-</template>
diff --git a/doc/theming/CustomThemeDoc.vue b/doc/theming/CustomThemeDoc.vue
deleted file mode 100644
index 1661235a8..000000000
--- a/doc/theming/CustomThemeDoc.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Themes are created with SASS using the <i>primevue-sass-theme</i> project available at <a href="http://github.com/primefaces/primevue-sass-theme">github</a>. This repository contains all the scss files for the components and the variables
-            of the built-in themes so that you may customize an existing theme or create your own. The scss variables used in a theme are available at the <a href="https://www.primefaces.org/designer/api/primevue/3.9.0">SASS API</a> documentation.
-        </p>
-        <p>
-            There are 2 alternatives to create your own theme. First option is compiling a theme with command line sass whereas second option is embedding scss files within your project to let your build environment do the compilation. In all cases,
-            the generated theme file should be imported to your project.
-        </p>
-
-        <h3>Theme SCSS</h3>
-        <p>
-            The theme scss is available as open source at <a href="http://github.com/primefaces/primevue-sass-theme">primevue-sass-theme</a> repository. The <i>theme-base</i> folder contains the theming structure of the components, themes under
-            <i>themes</i> folder import the base and define the SCSS variables. The <i>themes</i> folder also contains all the built-in themes so you can customize their code as well.
-        </p>
-        <p>
-            To create your own theme, <a href="https://github.com/primefaces/primevue-sass-theme/releases">download</a> the release matching your PrimeVue version and access the <i>themes/mytheme</i> folder. The sass variables to customize are
-            available under the <i>variables</i> folder. The <i>_fonts</i> file can be used to define a custom font for your project whereas the optional <i>_extensions</i> file is provided to add overrides to the components designs. The
-            <i>theme.scss</i> file imports the theme files along with the <i>theme-base</i> folder at the root to combine everything together. Next step would be compilation of the scss that can either be command line or within your project.
-        </p>
-
-        <h3>Compile SCSS Manually</h3>
-        <p>Once your theme is ready run the following command to compile it. Note that <a href="https://www.npmjs.com/package/sass">sass</a> command should be available in your terminal.</p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-        <p>
-            Then copy and import the theme.css file in your application. For example, in a Vite based template like <a href="https://github.com/vuejs/create-vue">create-vue</a>, you may place theme.css under assets folder and then import it an
-            <i>main.js</i>.
-        </p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
-
-        <h3>Build Time Compilation</h3>
-        <p>
-            This approach eliminates the manual compilation by delegating it to your build environment that has the ability to compile SCSS. Copy the <i>theme-base</i> folder along with <i>themes/mytheme</i> folder to your application where assets
-            reside. At a suitable location like <i>main.js</i> or <i>App.vue</i>, import the <i>theme.scss</i> from <i>assets/themes/mytheme</i>. That would be it, during build time, your project will compile the sass and import the theme. Any
-            changes to your theme will be reflected instantly.
-        </p>
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-sass --update themes/mytheme/theme.scss:themes/mytheme/theme.css
-        `
-            },
-            code2: {
-                basic: `
-import './assets/theme.css';
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/theming/PrimeFlexDoc.vue b/doc/theming/PrimeFlexDoc.vue
deleted file mode 100644
index ce2fd35a8..000000000
--- a/doc/theming/PrimeFlexDoc.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            <a href="https://primeflex.org/">PrimeFlex</a> is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. PrimeVue can be used with any CSS utility library like bootstrap and tailwind
-            however PrimeFlex has benefits like integration with PrimeVue themes using CSS variables so that colors classes e.g. <i>bg-blue-500</i> receive the color code from the PrimeVue theme being used. PrimeVue follows the CSS utility approach
-            of PrimeFlex and currently does not provide an extended style property like <i>sx</i>. Same approach is also utilized in <a href="https://blocks.primevue.org">PrimeBlocks for PrimeVue</a> project as well.
-        </p>
-
-        <p>Here is an example to demonstrate how to align 3 buttons horizontally on bigger screens and display them as stacked on smaller ones.</p>
-    </DocSectionText>
-    <div class="card flex flex-column md:flex-row md:justify-content-between row-gap-3">
-        <Button type="button" label="Button 1"></Button>
-        <Button type="button" label="Button 2" severity="secondary"></Button>
-        <Button type="button" label="Button 3" severity="help"></Button>
-    </div>
-    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<div class="flex flex-column md:flex-row md:justify-content-between row-gap-3">
-    <Button type="button" label="Button 1"></Button>
-    <Button type="button" label="Button 2" severity="secondary"></Button>
-    <Button type="button" label="Button 3" severity="help"></Button>
-</div>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/theming/SwitchThemesDoc.vue b/doc/theming/SwitchThemesDoc.vue
deleted file mode 100644
index 5c868020b..000000000
--- a/doc/theming/SwitchThemesDoc.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p class="notification">
-            Solution below works however there is room for improvement. The upcoming styling api will greatly improve dynamic theme switching ability, eliminates the prerequisites with the introduction of CSS variables and dynamic imports.
-        </p>
-        <p>
-            Themes can be dynamically changed using the <i>PrimeVue.changeTheme</i> function. For this feature to work, there are two prerequisites. To begin with, the themes should be publicly available under the <i>public</i> folder in your project
-            by copying them from PrimeVue <i>resources/themes</i> folder. Second part is making the theme.css accessible via a link element so that the id of the link can be provided as the 3rd parameter to the <i>changeTheme</i> function.
-        </p>
-    </DocSectionText>
-    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
-    <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
-    <div class="doc-section-description">
-        <p>In a Vite based project like <a href="https://github.com/vuejs/create-vue">create-vue</a>, the link can be placed at index.html.</p>
-    </div>
-    <DocSectionCode :code="code4" hideToggleCode hideStackBlitz />
-    <div class="doc-section-description">
-        <p><a href="https://nuxtjs.org/">Nuxt</a> applications can configure the link element using <i>nuxt.config.js</i>.</p>
-    </div>
-    <DocSectionCode :code="code5" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-primevue.changeTheme(currentTheme: string, newTheme: string, linkElementId: string, callback: Function)
-`
-            },
-            code2: {
-                basic: `
-// Options API
-this.$primevue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {});
-`
-            },
-            code3: {
-                basic: `
-// Composition API
-import { usePrimeVue } from 'primevue/config';
-
-const PrimeVue = usePrimeVue();
-PrimeVue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {});
-`
-            },
-            code4: {
-                basic: `
-<link id="theme-link" rel="stylesheet" href="/themes/aura-light-green/theme.css">
-`
-            },
-            code5: {
-                basic: `
-export default defineNuxtConfig({
-    app: {
-        head: {
-            link: [
-                {
-                    id: 'theme-link',
-                    rel: 'stylesheet',
-                    href: baseUrl + 'themes/aura-light-green/theme.css'
-                }
-            ]
-        }
-    }
-});
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/theming/UtilsDoc.vue b/doc/theming/UtilsDoc.vue
deleted file mode 100644
index 4f0c64ad6..000000000
--- a/doc/theming/UtilsDoc.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>In addition to PrimeFlex, PrimeVue has a couple of css utility classes on its own as well.</p>
-    </DocSectionText>
-    <div class="doc-tablewrapper">
-        <table class="doc-table">
-            <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Description</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td>p-component</td>
-                    <td>Applies component theming such as font-family and font-size to an element.</td>
-                </tr>
-                <tr>
-                    <td>p-fluid</td>
-                    <td>Applies 100% width to all descendant components.</td>
-                </tr>
-                <tr>
-                    <td>p-disabled</td>
-                    <td>Applies an opacity to display as disabled.</td>
-                </tr>
-                <tr>
-                    <td>p-sr-only</td>
-                    <td>Element becomes visually hidden however accessibility is still available.</td>
-                </tr>
-                <tr>
-                    <td>p-reset</td>
-                    <td>Resets the browsers defaults.</td>
-                </tr>
-                <tr>
-                    <td>p-link</td>
-                    <td>Renders a button as a link.</td>
-                </tr>
-                <tr>
-                    <td>p-error</td>
-                    <td>Indicates an error text.</td>
-                </tr>
-                <tr>
-                    <td>p-invalid</td>
-                    <td>Applies the invalid style to a text or a form field.</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
diff --git a/doc/theming/styled/ArchitectureDoc.vue b/doc/theming/styled/ArchitectureDoc.vue
new file mode 100644
index 000000000..9a70dc14b
--- /dev/null
+++ b/doc/theming/styled/ArchitectureDoc.vue
@@ -0,0 +1,35 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue is a design agnostic library so unlike some other UI libraries it does not enforce a certain styling such as material design. Styling is decoupled from the components using the themes instead. A theme consists of two parts;
+            <i>base</i> and <i>preset</i>. The base is the style rules with CSS variables as placeholders whereas the preset is a set of design tokens to feed a base by mapping the tokens to CSS variables. A base may be configured with different
+            presets, currently Aura is the only preset and in upcoming version more presets will be available. Similarly, PrimeOne is the default base and a new base inspired by Material Design is coming up with a near future update.
+        </p>
+        <img alt="Architecture" src="https://primefaces.org/cdn/primevue/images/architecture.jpg" class="w-full mb-3" />
+        <p>The core of the styled mode architecture is based on a concept named <i>design token</i>, a preset defines the token configuration in 3 tiers; <i>primitive</i>, <i>semantic</i> and <i>component</i>.</p>
+        <h3>Primitive Tokens</h3>
+        <p>
+            Primitive tokens have no context, a color palette is a good example for a primitive token such as <i>blue-50</i> to <i>blue-900</i>. A token named <i>blue-500</i> may be used as the primary color, the background of a message however on
+            its own, the name of the token does not indicate context. Usually they are utilized by the semantic tokens.
+        </p>
+
+        <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.
+        </p>
+
+        <h3>Component Tokens</h3>
+        <p>
+            Component tokens are isolated tokens per component such as <i>inputtext.background</i> or <i>button.color</i> that map to the semantic tokens. As an example, <i>button.background</i> component token maps to the
+            <i>primary.color</i> semantic token which maps to the <i>green.500</i> primitive token.
+        </p>
+
+        <h3>Best Practices</h3>
+        <p>
+            Use primitive tokens when defining the core color palette and semantic tokens to specify the common design elements such as focus ring, primary colors and surfaces. Components tokens should only be used when customizing a specific
+            component. By defining your own design tokens as a custom preset, you'll be able to define your own style without touching CSS. Overriding the PrimeVue components using style classes is not a best practice and should be the last resort,
+            design tokens are the suggested approach.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/theming/styled/CSSLayerDoc.vue b/doc/theming/styled/CSSLayerDoc.vue
new file mode 100644
index 000000000..a4c9e2788
--- /dev/null
+++ b/doc/theming/styled/CSSLayerDoc.vue
@@ -0,0 +1,22 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>CSS Layer.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+html {
+    font-size: 14px;
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/theming/CSSModulesDoc.vue b/doc/theming/styled/CSSModulesDoc.vue
similarity index 100%
rename from doc/theming/CSSModulesDoc.vue
rename to doc/theming/styled/CSSModulesDoc.vue
diff --git a/doc/theming/styled/DarkModeToggleDoc.vue b/doc/theming/styled/DarkModeToggleDoc.vue
new file mode 100644
index 000000000..a4c9e2788
--- /dev/null
+++ b/doc/theming/styled/DarkModeToggleDoc.vue
@@ -0,0 +1,22 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>CSS Layer.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+html {
+    font-size: 14px;
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/theming/ScaleDoc.vue b/doc/theming/styled/ScaleDoc.vue
similarity index 100%
rename from doc/theming/ScaleDoc.vue
rename to doc/theming/styled/ScaleDoc.vue
diff --git a/doc/theming/ScopedCSSDoc.vue b/doc/theming/styled/ScopedCSSDoc.vue
similarity index 100%
rename from doc/theming/ScopedCSSDoc.vue
rename to doc/theming/styled/ScopedCSSDoc.vue
diff --git a/doc/theming/styled/configuration/OptionsDoc.vue b/doc/theming/styled/configuration/OptionsDoc.vue
new file mode 100644
index 000000000..b2f29f46e
--- /dev/null
+++ b/doc/theming/styled/configuration/OptionsDoc.vue
@@ -0,0 +1,17 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>options</i> property defines the how the CSS would be generated from the design tokens of the preset.</p>
+        <h3>prefix</h3>
+        <p>The prefix of the CSS variables, defaults to <i>p</i>. For instance, the <i>primary.color</i> design token would be <i>var(--p-primary-color)</i>.</p>
+        <h3>darkModeSelector</h3>
+        <p>
+            The CSS rule to encapsulate the CSS variables of the dark mode, the default is the <i>system</i> to generate <i>@media (prefers-color-scheme: dark)</i>. If you need to make the dark mode toggleable based on the user selection define a
+            class selector such as <i>.app-dark</i> and toggle this class at the document root. See the dark mode toggle section below for example.
+        </p>
+        <h3>cssLayer</h3>
+        <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>primevue</i> or not. A CSS layer would be handy to
+            declare a custom cascade layer for easier customization. The default is <i>false</i>. View the CSS layer section for an example usage.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/theming/styled/configuration/ThemeDoc.vue b/doc/theming/styled/configuration/ThemeDoc.vue
new file mode 100644
index 000000000..0b485674f
--- /dev/null
+++ b/doc/theming/styled/configuration/ThemeDoc.vue
@@ -0,0 +1,38 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>theme</i> property is used to customize the initial theme that is preconfigured to be PrimeOne base with the Aura preset by default. The following is the default configuration and only needs to be defined for customization.</p>
+        <p></p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import PrimeVue from 'primevue/config';
+import PrimeOne from 'primevue/themes/primeone';
+import Aura from 'primevue/themes/primeone/aura';
+
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    // Default theme configuration
+    theme: {
+        base: PrimeOne,
+        preset: Aura,
+        options: {
+            prefix: 'p',
+            darkModeSelector: 'system',
+            cssLayer: false
+        }
+    }
+ });
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/unstyled/ArchitectureDoc.vue b/doc/theming/unstyled/ArchitectureDoc.vue
similarity index 100%
rename from doc/unstyled/ArchitectureDoc.vue
rename to doc/theming/unstyled/ArchitectureDoc.vue
diff --git a/doc/unstyled/ExampleDoc.vue b/doc/theming/unstyled/ExampleDoc.vue
similarity index 100%
rename from doc/unstyled/ExampleDoc.vue
rename to doc/theming/unstyled/ExampleDoc.vue
diff --git a/doc/unstyled/SetupDoc.vue b/doc/theming/unstyled/SetupDoc.vue
similarity index 100%
rename from doc/unstyled/SetupDoc.vue
rename to doc/theming/unstyled/SetupDoc.vue
diff --git a/doc/unstyled/ThemeDoc.vue b/doc/theming/unstyled/ThemeDoc.vue
similarity index 100%
rename from doc/unstyled/ThemeDoc.vue
rename to doc/theming/unstyled/ThemeDoc.vue
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 2a0d17068..645908cbf 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -44,7 +44,7 @@ import { updatePreset, updateSurface } from 'primevue/themes';
 export default {
     data() {
         return {
-            selectedPrimaryColor: 'noir',
+            selectedPrimaryColor: 'emerald',
             selectedSurfaceColor: null,
             primaryColors: [
                 { name: 'noir', palette: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' } },
diff --git a/pages/theming/index.vue b/pages/theming/index.vue
deleted file mode 100755
index 0c03d8c0b..000000000
--- a/pages/theming/index.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-    <div>
-        <Head>
-            <Title>Theming - PrimeVue</Title>
-            <Meta name="description" content="Choose from a variety of themes or develop your own theme easily." />
-        </Head>
-
-        <div class="doc">
-            <div class="doc-main">
-                <div class="doc-intro">
-                    <h1>Theming</h1>
-                    <p>Choose from a variety of themes or develop your own theme easily.</p>
-                </div>
-                <DocSections :docs="docs" />
-            </div>
-            <DocSectionNav :docs="docs" />
-        </div>
-    </div>
-</template>
-
-<script>
-import ArchitectureDoc from '@/doc/theming/ArchitectureDoc.vue';
-import BuiltInThemesDoc from '@/doc/theming/BuiltInThemesDoc.vue';
-import CSSModulesDoc from '@/doc/theming/CSSModulesDoc.vue';
-import CSSVariablesDoc from '@/doc/theming/CSSVariablesDoc.vue';
-import CustomThemeDoc from '@/doc/theming/CustomThemeDoc.vue';
-import PrimeFlexDoc from '@/doc/theming/PrimeFlexDoc.vue';
-import ScaleDoc from '@/doc/theming/ScaleDoc.vue';
-import ScopedCSSDoc from '@/doc/theming/ScopedCSSDoc.vue';
-import SwitchThemesDoc from '@/doc/theming/SwitchThemesDoc.vue';
-import UtilsDoc from '@/doc/theming/UtilsDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'architecture',
-                    label: 'Architecture',
-                    component: ArchitectureDoc
-                },
-                {
-                    id: 'builtinthemes',
-                    label: 'Built-in Themes',
-                    component: BuiltInThemesDoc
-                },
-                {
-                    id: 'switchthemes',
-                    label: 'Switch Themes',
-                    component: SwitchThemesDoc
-                },
-                {
-                    id: 'customtheme',
-                    label: 'Custom Theme',
-                    component: CustomThemeDoc
-                },
-                {
-                    id: 'scopedcss',
-                    label: 'Scoped CSS',
-                    component: ScopedCSSDoc
-                },
-                {
-                    id: 'cssmodules',
-                    label: 'CSS Modules',
-                    component: CSSModulesDoc
-                },
-                {
-                    id: 'scale',
-                    label: 'Scale',
-                    component: ScaleDoc
-                },
-                {
-                    id: 'primeflex',
-                    label: 'PrimeFlex',
-                    component: PrimeFlexDoc
-                },
-                {
-                    id: 'utils',
-                    label: 'Utils',
-                    component: UtilsDoc
-                },
-                {
-                    id: 'cssvariables',
-                    label: 'CSS Variables',
-                    component: CSSVariablesDoc
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/pages/theming/styled/index.vue b/pages/theming/styled/index.vue
new file mode 100755
index 000000000..89fac5591
--- /dev/null
+++ b/pages/theming/styled/index.vue
@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <Head>
+            <Title>Styled Mode - PrimeVue</Title>
+            <Meta name="description" content="Choose from a variety of pre-styled themes or develop your own." />
+        </Head>
+
+        <div class="doc">
+            <div class="doc-main">
+                <div class="doc-intro">
+                    <h1>Styled Mode</h1>
+                    <p>Choose from a variety of pre-styled themes or develop your own..</p>
+                </div>
+                <DocSections :docs="docs" />
+            </div>
+            <DocSectionNav :docs="docs" />
+        </div>
+    </div>
+</template>
+
+<script>
+import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
+import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
+import ScaleDoc from '@/doc/theming/styled/ScaleDoc.vue';
+import ScopedCSSDoc from '@/doc/theming/styled/ScopedCSSDoc.vue';
+import CSSLayerDoc from '@/doc/theming/styled/CSSLayerDoc.vue';
+import DarkModeToggleDoc from '@/doc/theming/styled/DarkModeToggleDoc.vue';
+import OptionsDoc from '@/doc/theming/styled/configuration/OptionsDoc.vue';
+import ThemeDoc from '@/doc/theming/styled/configuration/ThemeDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'architecture',
+                    label: 'Architecture',
+                    component: ArchitectureDoc
+                },
+                {
+                    id: 'configuration',
+                    label: 'Configuration',
+                    children: [
+                        {
+                            id: 'theme',
+                            label: 'Theme',
+                            component: ThemeDoc
+                        },
+                        {
+                            id: 'options',
+                            label: 'Options',
+                            component: OptionsDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'darkmodetoggle',
+                    label: 'Dark Mode Toggle',
+                    component: DarkModeToggleDoc
+                },
+                {
+                    id: 'csslayer',
+                    label: 'CSS Layer',
+                    component: CSSLayerDoc
+                },
+                {
+                    id: 'scopedcss',
+                    label: 'Scoped CSS',
+                    component: ScopedCSSDoc
+                },
+                {
+                    id: 'cssmodules',
+                    label: 'CSS Modules',
+                    component: CSSModulesDoc
+                },
+                {
+                    id: 'scale',
+                    label: 'Scale',
+                    component: ScaleDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/pages/unstyled/index.vue b/pages/theming/unstyled/index.vue
similarity index 83%
rename from pages/unstyled/index.vue
rename to pages/theming/unstyled/index.vue
index 36bdc339f..06964b549 100644
--- a/pages/unstyled/index.vue
+++ b/pages/theming/unstyled/index.vue
@@ -19,10 +19,10 @@
 </template>
 
 <script>
-import ArchitectureDoc from '@/doc/unstyled/ArchitectureDoc.vue';
-import ExampleDoc from '@/doc/unstyled/ExampleDoc.vue';
-import SetupDoc from '@/doc/unstyled/SetupDoc.vue';
-import ThemeDoc from '@/doc/unstyled/ThemeDoc.vue';
+import ArchitectureDoc from '@/doc/theming/unstyled/ArchitectureDoc.vue';
+import ExampleDoc from '@/doc/theming/unstyled/ExampleDoc.vue';
+import SetupDoc from '@/doc/theming/unstyled/SetupDoc.vue';
+import ThemeDoc from '@/doc/theming/unstyled/ThemeDoc.vue';
 
 export default {
     data() {
diff --git a/themes/aura.js b/themes/aura.js
index 489ec0772..13d425f39 100644
--- a/themes/aura.js
+++ b/themes/aura.js
@@ -1,9 +1,58 @@
+import { definePreset } from 'primevue/themes';
 import PrimeOne from 'primevue/themes/primeone';
 import Aura from 'primevue/themes/primeone/aura';
 
+const Noir = definePreset(Aura, {
+    semantic: {
+        primary: {
+            50: '{zinc.50}',
+            100: '{zinc.100}',
+            200: '{zinc.200}',
+            300: '{zinc.300}',
+            400: '{zinc.400}',
+            500: '{zinc.500}',
+            600: '{zinc.600}',
+            700: '{zinc.700}',
+            800: '{zinc.800}',
+            900: '{zinc.900}',
+            950: '{zinc.950}'
+        },
+        colorScheme: {
+            light: {
+                primary: {
+                    color: '#09090b',
+                    inverseColor: '#ffffff',
+                    hoverColor: '#18181b',
+                    activeColor: '#27272a'
+                },
+                highlight: {
+                    background: '#09090b',
+                    focusBackground: '#3f3f46',
+                    color: '#ffffff',
+                    focusColor: '#ffffff'
+                }
+            },
+            dark: {
+                primary: {
+                    color: '#fafafa',
+                    inverseColor: '#09090b',
+                    hoverColor: '#f4f4f5',
+                    activeColor: '#e4e4e7'
+                },
+                highlight: {
+                    background: 'rgba(250, 250, 250, .16)',
+                    focusBackground: 'rgba(250, 250, 250, .24)',
+                    color: 'rgba(255,255,255,.87)',
+                    focusColor: 'rgba(255,255,255,.87)'
+                }
+            }
+        }
+    }
+});
+
 export default {
     base: PrimeOne,
-    preset: Aura,
+    preset: Noir,
     options: {
         darkModeSelector: '.p-dark'
     }