Add css layer doc

assets/data/news.json

@@ -1,6 +1,6 @@
 {
     "id": 60,
-    "content": "Introducing the new Styled Mode Theming",
+    "content": "Introducing the all-new Styled Mode",
     "linkText": "Learn More",
-    "linkHref": "http://primevue.org/theming"
+    "linkHref": "http://primevue.org/theming/styled"
 }

assets/menu/menu.json

@@ -47,10 +47,6 @@
                 {
                     "name": "Auto Import",
                     "to": "/autoimport"
-                },
-                {
-                    "name": "CSS Layer",
-                    "to": "/csslayer"
                 }
             ]
         },

doc/csslayer/BootstrapDoc.vue

@@ -1,23 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Bootstrap has a <i>reboot</i> utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.</p>
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-@layer bootstrap-reboot, primevue;
-
-@import "bootstrap-reboot.css" layer(bootstrap-rebooot);
-`
-            }
-        };
-    }
-};
-</script>

doc/csslayer/NormalizeDoc.vue

@@ -1,23 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primevue coming after the normalized layer.</p>
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-@layer normalize, primevue;
-
-@import "normalize.css" layer(normalize-reset);
-`
-            }
-        };
-    }
-};
-</script>

doc/csslayer/TailwindDoc.vue

@@ -1,33 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Tailwind CSS includes a reset utility in base called <a href="https://tailwindcss.com/docs/preflight" target="_blank" rel="noopener noreferrer">preflight</a>. If you are using this feature, wrap the base and utilities in separate layers
-            and make sure primevue layer comes after the base.
-        </p>
-        <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-@layer tailwind-base, primevue, tailwind-utilities;
-
-@layer tailwind-base {
-    @tailwind base;
-}
-
-@layer tailwind-utilities {
-    @tailwind components;
-    @tailwind utilities;
-}
-`
-            }
-        };
-    }
-};
-</script>

doc/theming/styled/CSSLayerDoc.vue

@@ -1,22 +0,0 @@
-<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>

doc/theming/styled/ColorsDoc.vue

@@ -6,8 +6,8 @@
     </DocSectionText>
     <div class="card">
         <ul class="p-0 m-0 list-none flex sm:flex-column gap-3 flex-wrap sm:flex-nowrap">
-            <li v-for="(color, i) of colors" :key="i" class="flex-auto">
+            <li v-for="(color, i) of colors" :key="i" class="flex-auto" style="min-width: 6rem">
-                <span class="font-medium capitalize w-6rem block mb-2 text-center sm:text-left">{{ color }}</span>
+                <span class="font-medium capitalize block mb-2 text-center sm:text-left">{{ color }}</span>
                 <div class="flex gap-3 flex-auto flex-column sm:flex-row">
                     <div v-for="(shade, j) of shades" :key="shade" class="flex flex-column align-items-center gap-1 flex-1">
                         <div v-tooltip.click.top="'Copied'" class="border-round h-2rem w-full" :style="`background-color: var(--p-${color}-${shades[j]})`" @click="copyColor(`var(--p-${color}-${shades[j]})`)"></div>

doc/theming/styled/csslayer/LibrariesDoc.vue

@@ -0,0 +1,56 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Example layer configuration for the popular CSS libraries.</p>
+    </DocSectionText>
+    <h4>Bootstrap</h4>
+    <p>Bootstrap has a <i>reboot</i> utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.</p>
+    <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
+
+    <h4>Tailwind</h4>
+    <p>
+        Tailwind CSS includes a reset utility in base called <a href="https://tailwindcss.com/docs/preflight" target="_blank" rel="noopener noreferrer" class="doc-link">preflight</a>. If you are using this feature, wrap the base and utilities in
+        separate layers and make sure primevue layer comes after the base.
+    </p>
+    <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
+
+    <h4>Normalize</h4>
+    <p>Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primevue coming after the normalized layer.</p>
+    <DocSectionCode :code="code3" hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+@layer bootstrap-reboot, primevue;
+
+@import "bootstrap-reboot.css" layer(bootstrap-rebooot);
+`
+            },
+            code2: {
+                basic: `
+@layer tailwind-base, primevue, tailwind-utilities;
+
+@layer tailwind-base {
+    @tailwind base;
+}
+
+@layer tailwind-utilities {
+    @tailwind components;
+    @tailwind utilities;
+}
+`
+            },
+            code3: {
+                basic: `
+@layer normalize, primevue;
+
+@import "normalize.css" layer(normalize-reset);
+`
+            }
+        };
+    }
+};
+</script>

doc/theming/styled/csslayer/SpecificityDoc.vue

@@ -1,10 +1,10 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p class="notification">A CSS layer is utilized in styled mode only, in unstyled mode the built-in CSS classes are not included and as a result no layer is defined. This documentation only applies to styled mode.</p>
         <p>
             The <i>@layer</i> is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at
-            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer">MDN</a> to begin with. In styled mode, PrimeVue wraps the built-in style classes under the <i>primevue</i> cascade layer to make the library styles easy to override. CSS in
+            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" class="doc-link">MDN</a> to begin with. In styled mode, when the <i>cssLayer</i> option is enabled at theme configuration, PrimeVue wraps the built-in style classes under
-            your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written.
+            the <i>primevue</i> cascade layer to make the library styles easy to override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is
+            written. The <i>cssLayer</i> is disabled by default to avoid compatibility issues with 3rd party CSS libraries which requires a layer configuration for compatibility that is discussed in the next reset section.
         </p>
         <p>
             For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, <i>.p-inputswitch .p-inputswitch-slider</i> selector needs to be overriden. Without the
@@ -15,7 +15,7 @@
             <InputSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
         </div>
         <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
-        <p>Layers also make it possible to use CSS Modules, view the <NuxtLink to="/theming/#cssmodules">CSS Modules</NuxtLink> guide for examples.</p>
+        <p>Layers also make it easier to use CSS Modules, view the CSS Modules guide for examples.</p>
     </DocSectionText>
 </template>
 

pages/csslayer/index.vue

@@ -1,68 +0,0 @@
-<template>
-    <div>
-        <Head>
-            <Title>CSS Layer - PrimeVue</Title>
-            <Meta name="description" content="Best practices for the PrimeVue cascade layer in styled mode." />
-        </Head>
-
-        <div class="doc">
-            <div class="doc-main">
-                <div class="doc-intro">
-                    <h1>CSS Layer</h1>
-                    <p>Best practices for the PrimeVue cascade layer in styled mode.</p>
-                </div>
-                <DocSections :docs="docs" />
-            </div>
-            <DocSectionNav :docs="docs" />
-        </div>
-    </div>
-</template>
-
-<script>
-import BootstrapDoc from '@/doc/csslayer/BootstrapDoc.vue';
-import NormalizeDoc from '@/doc/csslayer/NormalizeDoc.vue';
-import ResetDoc from '@/doc/csslayer/ResetDoc.vue';
-import SpecificityDoc from '@/doc/csslayer/SpecificityDoc.vue';
-import TailwindDoc from '@/doc/csslayer/TailwindDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'css-specificity',
-                    label: 'CSS Specificity',
-                    component: SpecificityDoc
-                },
-                {
-                    id: 'reset',
-                    label: 'Reset',
-                    component: ResetDoc
-                },
-                {
-                    id: 'libraries',
-                    label: 'Libraries',
-                    description: 'Compatibility between PrimeVue and CSS libraries.',
-                    children: [
-                        {
-                            id: 'tailwind',
-                            label: 'Tailwind CSS',
-                            component: TailwindDoc
-                        },
-                        {
-                            id: 'bootstrap',
-                            label: 'Bootstrap',
-                            component: BootstrapDoc
-                        },
-                        {
-                            id: 'normalize',
-                            label: 'Normalize',
-                            component: NormalizeDoc
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-</script>

pages/theming/styled/index.vue

@@ -20,7 +20,6 @@
 
 <script>
 import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
-import CSSLayerDoc from '@/doc/theming/styled/CSSLayerDoc.vue';
 import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
 import ColorsDoc from '@/doc/theming/styled/ColorsDoc.vue';
 import DarkModeToggleDoc from '@/doc/theming/styled/DarkModeToggleDoc.vue';
@@ -29,6 +28,9 @@ import ScaleDoc from '@/doc/theming/styled/ScaleDoc.vue';
 import ScopedCSSDoc from '@/doc/theming/styled/ScopedCSSDoc.vue';
 import OptionsDoc from '@/doc/theming/styled/configuration/OptionsDoc.vue';
 import ThemeDoc from '@/doc/theming/styled/configuration/ThemeDoc.vue';
+import LibrariesDoc from '@/doc/theming/styled/csslayer/LibrariesDoc.vue';
+import ResetDoc from '@/doc/theming/styled/csslayer/ResetDoc.vue';
+import SpecificityDoc from '@/doc/theming/styled/csslayer/SpecificityDoc.vue';
 import ComponentDoc from '@/doc/theming/styled/customization/ComponentDoc.vue';
 import DefinePresetDoc from '@/doc/theming/styled/customization/DefinePresetDoc.vue';
 import FocusRingDoc from '@/doc/theming/styled/customization/FocusRingDoc.vue';
@@ -163,7 +165,24 @@ export default {
                 {
                     id: 'csslayer',
                     label: 'CSS Layer',
-                    component: CSSLayerDoc
+                    description: 'The PrimeVue CSS layer only applies to styled mode when layering is enabled explicitly at theme configuration, in unstyled mode the built-in CSS classes are not included and as a result no layer is necessary.',
+                    children: [
+                        {
+                            id: 'specificity',
+                            label: 'Specificity',
+                            component: SpecificityDoc
+                        },
+                        {
+                            id: 'reset',
+                            label: 'Reset',
+                            component: ResetDoc
+                        },
+                        {
+                            id: 'libraries',
+                            label: 'Libraries',
+                            component: LibrariesDoc
+                        }
+                    ]
                 },
                 {
                     id: 'scopedcss',