From be13e705a595c6cf4d7a1a86eb3c7cfa76983420 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 1 Apr 2024 00:44:59 +0300
Subject: [PATCH] Add more info to scoped css and colors docs

---
 doc/colors/OverviewDoc.vue          | 82 -----------------------------
 doc/colors/PaletteDoc.vue           | 25 ---------
 doc/colors/SurfacesDoc.vue          | 63 ----------------------
 doc/theming/styled/ColorsDoc.vue    | 13 ++++-
 doc/theming/styled/ScopedCSSDoc.vue | 23 +++++++-
 pages/colors/index.vue              | 49 -----------------
 6 files changed, 34 insertions(+), 221 deletions(-)
 delete mode 100644 doc/colors/OverviewDoc.vue
 delete mode 100644 doc/colors/PaletteDoc.vue
 delete mode 100644 doc/colors/SurfacesDoc.vue
 delete mode 100644 pages/colors/index.vue

diff --git a/doc/colors/OverviewDoc.vue b/doc/colors/OverviewDoc.vue
deleted file mode 100644
index ee5870bda..000000000
--- a/doc/colors/OverviewDoc.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Colors are exported as CSS variables and used with the standard <i>var</i> syntax such as <i>var(--text-color)</i>. Following is the list of general variables used in a theme.</p>
-    </DocSectionText>
-
-    <div class="doc-tablewrapper">
-        <table class="doc-table">
-            <thead>
-                <tr>
-                    <th>Variable</th>
-                    <th>Description</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td>--text-color</td>
-                    <td>Font text color.</td>
-                </tr>
-                <tr>
-                    <td>--text-secondary-color</td>
-                    <td>Muted font text color with a secondary level.</td>
-                </tr>
-                <tr>
-                    <td>--primary-color</td>
-                    <td>Primary color of the theme.</td>
-                </tr>
-                <tr>
-                    <td>--primary-color-text</td>
-                    <td>Text color when background is primary color.</td>
-                </tr>
-                <tr>
-                    <td>--font-family</td>
-                    <td>Font family of the theme.</td>
-                </tr>
-                <tr>
-                    <td>--inline-spacing</td>
-                    <td>Spacing between to adjacent items.</td>
-                </tr>
-                <tr>
-                    <td>--border-radius</td>
-                    <td>Common border radius of elements.</td>
-                </tr>
-                <tr>
-                    <td>--focus-ring</td>
-                    <td>Box shadow of a focused element.</td>
-                </tr>
-                <tr>
-                    <td>--mask-bg</td>
-                    <td>Background of an overlay mask.</td>
-                </tr>
-                <tr>
-                    <td>--highlight-bg</td>
-                    <td>Background of a highlighted element.</td>
-                </tr>
-                <tr>
-                    <td>--highlight-text-color</td>
-                    <td>Text color of a highlighted element.</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    <div class="card flex justify-content-center gap-3 text-center">
-        <div :style="{ backgroundColor: 'var(--highlight-bg)', color: 'var(--highlight-text-color)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Highlighted Item</div>
-        <div :style="{ backgroundColor: 'var(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Primary Color</div>
-    </div>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<div style="backgroundColor: var(--highlight-bg), color: var(--highlight-text-color), borderRadius: var(--border-radius), padding: 3rem">Highlighted Item</div>
-<div style="backgroundColor: var(--primary-color), color: var(--primary-color-text), borderRadius: var(--border-radius), padding: 3rem">Primary Color</div>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/colors/PaletteDoc.vue b/doc/colors/PaletteDoc.vue
deleted file mode 100644
index cbc0ba8cf..000000000
--- a/doc/colors/PaletteDoc.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Colors palette consists of 13 main colors where each color provides tints/shades from 50 to 900.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex flex-wrap gap-6">
-            <div v-for="color of colors" :key="color" class="flex flex-column">
-                <template v-for="shade of shades" :key="shade">
-                    <div class="w-18rem flex align-items-center p-3 font-bold" :style="{ backgroundColor: `var(--${color}-${shade})`, color: shade > 500 ? '#fff' : '#000' }">{{ color }}-{{ shade }}</div>
-                </template>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            colors: ['primary', 'blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'red', 'gray'],
-            shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
-        };
-    }
-};
-</script>
diff --git a/doc/colors/SurfacesDoc.vue b/doc/colors/SurfacesDoc.vue
deleted file mode 100644
index abc01170f..000000000
--- a/doc/colors/SurfacesDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Surface palette is used when designing the layers such as headers, content, footers, overlays and dividers. Surface palette varies between 0 - 900 and named surfaces are also available.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex flex-column">
-            <div
-                v-for="shade in shades"
-                :key="shade"
-                class="w-18rem flex align-items-center p-3 font-bold"
-                :style="{ backgroundColor: `var(--surface-${shade})`, color: $appState.darkTheme ? (shade > 500 ? '#000' : '#fff') : shade > 500 ? '#fff' : '#000' }"
-            >
-                surface-{{ shade }}
-            </div>
-        </div>
-    </div>
-    <div class="doc-tablewrapper">
-        <table class="doc-table">
-            <thead>
-                <tr>
-                    <th>Variable</th>
-                    <th>Description</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td>--surface-ground</td>
-                    <td>Base ground color.</td>
-                </tr>
-                <tr>
-                    <td>--surface-section</td>
-                    <td>Background color of a section on a ground surface.</td>
-                </tr>
-                <tr>
-                    <td>--surface-card</td>
-                    <td>Color of a surface used as a card.</td>
-                </tr>
-                <tr>
-                    <td>--surface-overlay</td>
-                    <td>Color of overlay surfaces.</td>
-                </tr>
-                <tr>
-                    <td>--surface-border</td>
-                    <td>Color of a divider.</td>
-                </tr>
-                <tr>
-                    <td>--surface-hover</td>
-                    <td>Color of an element in hover state.</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
-        };
-    }
-};
-</script>
diff --git a/doc/theming/styled/ColorsDoc.vue b/doc/theming/styled/ColorsDoc.vue
index 33c727bf7..f13860983 100644
--- a/doc/theming/styled/ColorsDoc.vue
+++ b/doc/theming/styled/ColorsDoc.vue
@@ -4,6 +4,8 @@
             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>
+    <p>Colors can be accessed at CSS as a variable and programmatically using the <i>$dt</i> utility.</p>
+    <DocSectionCode :code="code1" importCode hideToggleCode 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" style="min-width: 6rem">
@@ -24,7 +26,16 @@ export default {
     data() {
         return {
             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']
+            colors: ['emerald', 'green', 'lime', 'red', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'slate', 'gray', 'zinc', 'neutral', 'stone'],
+            code1: {
+                basic: `
+// With CSS
+var(--p-blue-500)
+
+// With JS
+$dt('blue.500', 'value')
+`
+            }
         };
     }
 };
diff --git a/doc/theming/styled/ScopedCSSDoc.vue b/doc/theming/styled/ScopedCSSDoc.vue
index 9e8c732a9..eb6fb098d 100644
--- a/doc/theming/styled/ScopedCSSDoc.vue
+++ b/doc/theming/styled/ScopedCSSDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Design tokens can be scoped to a certain component using CSS variables. In an upcoming update, a special <i>dt</i> property would be introduced to generate the CSS variables from a design token object.</p>
+        <p>Design tokens can be scoped to a certain component using CSS variables.</p>
     </DocSectionText>
     <div class="card flex justify-content-center gap-3">
         <InputSwitch v-model="checked1" class="blue-switch" />
@@ -8,6 +8,9 @@
     </div>
     <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
     <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
+    <h3>Future API Preview</h3>
+    <p>In an upcoming update, a special <i>dt</i> property would be introduced for each component to generate the CSS variables from a design token object.</p>
+    <DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
 </template>
 
 <script>
@@ -40,6 +43,24 @@ export default {
         --p-inputswitch-handle-checked-hover-background: var(--p-zinc-950);
     }
 </style>
+`
+            },
+            code3: {
+                basic: `
+<InputSwitch v-model="checked" :dt="blueSwitch" />
+
+/*
+ const blueSwitch = {
+    root: {
+        checkedBackground: '{blue.500}',
+        checkedHoverBackground: '{blue.500}',
+        borderRadius: '40x'
+    },
+    handle: {
+        background: '{blue.50}'
+    }
+ }
+*/
 `
             }
         };
diff --git a/pages/colors/index.vue b/pages/colors/index.vue
deleted file mode 100644
index c21c6fbbb..000000000
--- a/pages/colors/index.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-    <div>
-        <Head>
-            <Title>Color System - PrimeVue</Title>
-            <Meta name="description" content="Each PrimeVue theme exports its own color palette." />
-        </Head>
-
-        <div class="doc">
-            <div class="doc-main">
-                <div class="doc-intro">
-                    <h1>Color System</h1>
-                    <p>Each PrimeVue theme exports its own color palette.</p>
-                </div>
-                <DocSections :docs="docs" />
-            </div>
-            <DocSectionNav :docs="docs" />
-        </div>
-    </div>
-</template>
-
-<script>
-import OverviewDoc from '@/doc/colors/OverviewDoc.vue';
-import PaletteDoc from '@/doc/colors/PaletteDoc.vue';
-import SurfacesDoc from '@/doc/colors/SurfacesDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'overview',
-                    label: 'Overview',
-                    component: OverviewDoc
-                },
-                {
-                    id: 'surfaces',
-                    label: 'Surfaces',
-                    component: SurfacesDoc
-                },
-                {
-                    id: 'palette',
-                    label: 'Palette',
-                    component: PaletteDoc
-                }
-            ]
-        };
-    }
-};
-</script>