From 8b075c1de1d819539f7664b4b9efd0b63556126a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 28 May 2024 09:18:34 +0300
Subject: [PATCH] Add color palette sample

---
 assets/menu/menu.json                    | 28 ++++++-------
 doc/tailwind/ExtensionsDoc.vue           | 38 +-----------------
 doc/tailwind/OverviewDoc.vue             |  8 ++--
 doc/tailwind/PluginDoc.vue               |  2 +
 doc/tailwind/SamplesDoc.vue              | 36 -----------------
 doc/tailwind/samples/ColorPaletteDoc.vue | 51 ++++++++++++++++++++++++
 pages/tailwind/index.vue                 | 10 ++++-
 7 files changed, 80 insertions(+), 93 deletions(-)
 delete mode 100644 doc/tailwind/SamplesDoc.vue
 create mode 100644 doc/tailwind/samples/ColorPaletteDoc.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index c1e76acbc..d8601c17d 100644
--- a/assets/menu/menu.json
+++ b/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",
diff --git a/doc/tailwind/ExtensionsDoc.vue b/doc/tailwind/ExtensionsDoc.vue
index 1eefd5031..2ca7d6f0a 100644
--- a/doc/tailwind/ExtensionsDoc.vue
+++ b/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>
-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>
+<script></script>
diff --git a/doc/tailwind/OverviewDoc.vue b/doc/tailwind/OverviewDoc.vue
index 6386c730f..c5d8c4319 100644
--- a/doc/tailwind/OverviewDoc.vue
+++ b/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
-            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.
+            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
+            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>
diff --git a/doc/tailwind/PluginDoc.vue b/doc/tailwind/PluginDoc.vue
index 132cb4cb0..51e1cfc1b 100644
--- a/doc/tailwind/PluginDoc.vue
+++ b/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
diff --git a/doc/tailwind/SamplesDoc.vue b/doc/tailwind/SamplesDoc.vue
deleted file mode 100644
index 132cb4cb0..000000000
--- a/doc/tailwind/SamplesDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/tailwind/samples/ColorPaletteDoc.vue b/doc/tailwind/samples/ColorPaletteDoc.vue
new file mode 100644
index 000000000..a729a87e1
--- /dev/null
+++ b/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>
diff --git a/pages/tailwind/index.vue b/pages/tailwind/index.vue
index 1e2880138..eea3f2409 100644
--- a/pages/tailwind/index.vue
+++ b/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
+                        }
+                    ]
                 }
             ]
         };