Add color palette sample

assets/menu/menu.json

@@ -54,6 +54,20 @@
                 }
             ]
         },
+        {
+            "name": "Theming",
+            "icon": "pi pi-palette",
+            "children": [
+                {
+                    "name": "Styled Mode",
+                    "to": "/theming/styled"
+                },
+                {
+                    "name": "Unstyled Mode",
+                    "to": "/theming/unstyled"
+                }
+            ]
+        },
         {
             "name": "Components",
             "icon": "pi pi-compass",
@@ -479,20 +493,6 @@
                 }
             ]
         },
-        {
-            "name": "Theming",
-            "icon": "pi pi-palette",
-            "children": [
-                {
-                    "name": "Styled Mode",
-                    "to": "/theming/styled"
-                },
-                {
-                    "name": "Unstyled Mode",
-                    "to": "/theming/unstyled"
-                }
-            ]
-        },
         {
             "name": "Pass Through",
             "icon": "pi pi-directions",

doc/tailwind/ExtensionsDoc.vue

@@ -70,43 +70,7 @@
                 </tbody>
             </table>
         </div>
-        <div class="card">
-            <ul class="p-0 m-0 list-none flex sm:flex-col gap-4 flex-wrap sm:flex-nowrap">
-                <li v-for="(color, i) of colors" :key="i" class="flex-auto" style="min-width: 6rem">
-                    <span class="font-medium capitalize block mb-2 text-center sm:text-left">{{ color }}</span>
-                    <div class="flex gap-4 flex-auto flex-col sm:flex-row">
-                        <div v-for="(shade, j) of shades" :key="shade" :class="['flex flex-col items-center gap-1 flex-1', { invisible: color === 'primary' && shade === 0 }]">
-                            <div class="rounded h-8 w-full" :style="`background-color: var(--p-${color}-${shades[j]})`"></div>
-                            <span class="text-sm text-surface-500 dark:text-surface-400 font-medium">{{ shades[j] }}</span>
-                        </div>
-                    </div>
-                </li>
-            </ul>
-        </div>
     </DocSectionText>
 </template>
 
-<script>
+<script></script>
-export default {
-    data() {
-        return {
-            shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
-            colors: ['primary', 'surface'],
-            code1: {
-                basic: `
-npm i tailwindcss-primeui
-`
-            },
-            code2: {
-                basic: `
-// tailwind.config.js
-module.exports = {
-    // ...
-    plugins: [require('tailwindcss-primeui')]
-};
-`
-            }
-        };
-    }
-};
-</script>

doc/tailwind/OverviewDoc.vue

@@ -1,13 +1,13 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Tailwind CSS is a popular CSS framework with a utility-first approach. The core provides flexible CSS classes with predefined CSS rules to build your own UI elements. For example, instead of an opinionated <i>btn</i> class as in
+            Tailwind CSS is a popular CSS framework based on a utility-first design. The core provides flexible CSS classes with predefined CSS rules to build your own UI elements. For example, instead of an opinionated <i>btn</i> class as in
             Bootstrap, Tailwind offers primitive classes like <i>bg-blue-500</i>, <i>rounded</i> and <i>p-4</i> to apply a button. A set of reusable classes can also be grouped as a Tailwind CSS component and there are even a couple of libraries that
-            take this approach to build components for Tailwind.
+            take this approach to build components specifically for Tailwind.
         </p>
         <p>
-            Tailwind is an outstanding library, however it lacks a true comprehensive UI suite specifically when combined with Vue.js, this is where PrimeVue comes in by providing a wide range of highly accessible and feature rich UI component
+            Tailwind is an outstanding CSS library, however it lacks a true comprehensive UI suite when combined with Vue.js, this is where PrimeVue comes in by providing a wide range of highly accessible and feature rich UI component library. The
-            library. The core of PrimeVue does not depend on Tailwind CSS, instead we provide the necessary integration points such as the primeui tailwind plugin and the presets for the unstyled mode.
+            core of PrimeVue does not depend on Tailwind CSS, instead we provide the necessary integration points such as the primeui tailwind plugin and the presets for the unstyled mode.
         </p>
     </DocSectionText>
 </template>

doc/tailwind/PluginDoc.vue

@@ -16,6 +16,8 @@
 export default {
     data() {
         return {
+            shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
+            colors: ['primary', 'surface'],
             code1: {
                 basic: `
 npm i tailwindcss-primeui

doc/tailwind/SamplesDoc.vue

@@ -1,36 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            The <a href="https://www.npmjs.com/package/tailwindcss-primeui" target="_blank" rel="noopener noreferrer">tailwindcss-primeui</a> is an official plugin by PrimeTek to provide first class integration between a Prime UI library like
-            PrimeVue and Tailwind CSS. It is designed to work both in styled and unstyled modes. In styled mode, for instance the semantic colors such as primary and surfaces are provided as Tailwind utilities e.g. <i>bg-primary</i>,
-            <i>text-surface-500</i>, <i>text-muted-color</i>.
-        </p>
-        <p>Plugin is available on npm.</p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-        <p>After installation, configure the plugin at your tailwind configuration file.</p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-npm i tailwindcss-primeui
-`
-            },
-            code2: {
-                basic: `
-// tailwind.config.js
-module.exports = {
-    // ...
-    plugins: [require('tailwindcss-primeui')]
-};
-`
-            }
-        };
-    }
-};
-</script>

doc/tailwind/samples/ColorPaletteDoc.vue

@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeVue color palette as Tailwind CSS classes.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-col gap-12">
+            <ul class="p-0 m-0 list-none flex sm:flex-col gap-4 flex-wrap sm:flex-nowrap">
+                <li v-for="(color, i) of colors" :key="i" class="flex-auto" style="min-width: 6rem">
+                    <span class="font-medium capitalize block mb-2 text-center sm:text-left">{{ color }}</span>
+                    <div class="flex gap-4 flex-auto flex-col sm:flex-row">
+                        <div v-for="(shade, j) of shades" :key="shade" :class="['flex flex-col items-center gap-1 flex-1', { invisible: color === 'primary' && shade === 0 }]">
+                            <div class="rounded h-8 w-full" :style="`background-color: var(--p-${color}-${shades[j]})`"></div>
+                            <span class="text-sm text-surface-500 dark:text-surface-400 font-medium">{{ shades[j] }}</span>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+
+            <div class="flex gap-6 flex-wrap">
+                <div class="rounded-border p-4 border border-transparent flex items-center justify-center bg-primary hover:bg-primary-emphasis text-primary-contrast font-medium flex-auto transition-colors">primary</div>
+                <div class="rounded-border p-4 border border-transparent flex items-center justify-center bg-highlight hover:bg-highlight-emphasis font-medium flex-auto transition-colors">highlight</div>
+                <div class="rounded-border p-4 border border-surface flex items-center justify-center text-muted-color hover:text-color hover:bg-emphasis font-medium flex-auto transition-colors">box</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
+            colors: ['primary', 'surface'],
+            code1: {
+                basic: `
+npm i tailwindcss-primeui
+`
+            },
+            code2: {
+                basic: `
+// tailwind.config.js
+module.exports = {
+    // ...
+    plugins: [require('tailwindcss-primeui')]
+};
+`
+            }
+        };
+    }
+};
+</script>

pages/tailwind/index.vue

@@ -20,7 +20,7 @@ import ExtensionsDoc from '@/doc/tailwind/ExtensionsDoc.vue';
 import OverviewDoc from '@/doc/tailwind/OverviewDoc.vue';
 import PluginDoc from '@/doc/tailwind/PluginDoc.vue';
 import PresetsDoc from '@/doc/tailwind/PresetsDoc.vue';
-import SamplesDoc from '@/doc/tailwind/SamplesDoc.vue';
+import ColorPaletteDoc from '@/doc/tailwind/samples/ColorPaletteDoc.vue';
 
 export default {
     data() {
@@ -49,7 +49,13 @@ export default {
                 {
                     id: 'samples',
                     label: 'Samples',
-                    component: SamplesDoc
+                    description: 'Example uses cases with PrimeVue and Tailwind CSS.',
+                    children: [
+                        {
+                            label: 'Color Palette',
+                            component: ColorPaletteDoc
+                        }
+                    ]
                 }
             ]
         };