From 630f3a98e62593faf25d9a50f297ad368b592e1d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 31 Mar 2024 15:10:06 +0300
Subject: [PATCH] Add colors, css modules and css doc

---
 doc/theming/styled/CSSModulesDoc.vue |  8 ++-----
 doc/theming/styled/ColorsDoc.vue     | 32 ++++++++++++++++++++--------
 doc/theming/styled/ScaleDoc.vue      |  3 ++-
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/doc/theming/styled/CSSModulesDoc.vue b/doc/theming/styled/CSSModulesDoc.vue
index 63e029a47..f120b76b7 100644
--- a/doc/theming/styled/CSSModulesDoc.vue
+++ b/doc/theming/styled/CSSModulesDoc.vue
@@ -1,18 +1,14 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            <a href="https://github.com/css-modules/css-modules">CSS modules</a> are supported by enabling the <i>module</i> property on a style element within your component and using the <i>$style</i> keyword to apply classes to a PrimeVue
-            component.
+            <a href="https://github.com/css-modules/css-modules">CSS modules</a> are supported by enabling the <i>module</i> property on a style element within your SFC. Use the <i>$style</i> keyword to apply classes to a PrimeVue component. It is
+            recommend to enable <i>cssLayer</i> when using CSS modules so that the PrimeVue styles have low CSS specificity.
         </p>
         <div class="card flex justify-content-center">
             <InputText :class="$style.myinput" placeholder="Search" />
         </div>
         <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
-        <p>An in-depth video tutorial is available to cover advanced uses cases with Pass Through props.</p>
-        <div class="video-container">
-            <iframe width="560" height="315" src="https://www.youtube.com/embed/n5zvMo7ykgw?si=lw1dGEHclmhIfZTr" frameborder="0" allowfullscreen></iframe>
-        </div>
     </DocSectionText>
 </template>
 
diff --git a/doc/theming/styled/ColorsDoc.vue b/doc/theming/styled/ColorsDoc.vue
index abd10b1db..278a03546 100644
--- a/doc/theming/styled/ColorsDoc.vue
+++ b/doc/theming/styled/ColorsDoc.vue
@@ -1,22 +1,36 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Lorem Ipsum.</p>
+        <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>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+    <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">
+                <span class="font-medium capitalize w-6rem 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>
+                        <span class="text-sm text-secondary font-medium">{{ shades[j] }}</span>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
-                basic: `
-html {
-    font-size: 14px;
-}
-`
-            }
+            shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
+            colors: ['emerald', 'green', 'lime', 'red', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'slate', 'gray', 'zinc', 'neutral', 'stone']
         };
+    },
+    methods: {
+        copyColor(value) {
+            navigator.clipboard.writeText(value);
+        }
     }
 };
 </script>
diff --git a/doc/theming/styled/ScaleDoc.vue b/doc/theming/styled/ScaleDoc.vue
index b515c3708..c415889d2 100644
--- a/doc/theming/styled/ScaleDoc.vue
+++ b/doc/theming/styled/ScaleDoc.vue
@@ -1,7 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Lorem Ipsum.
+            PrimeVue UI component use <i>rem</i> units, 1rem equals to the font size of the <i>html</i> element which is <i>16px</i> by default. Use the root font-size to adjust the size of the components globally. This website uses <i>14px</i> as
+            the base so it may differ from your application if your base font size is different.
         </p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />