From 3589ef9e3830b5bed065004739fc40bec7eee52a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 1 Apr 2024 15:55:29 +0300
Subject: [PATCH] Add scoped tokens doc

---
 .../themes/primeone/base/inputswitch/index.js |  2 +-
 .../presets/aura/inputswitch/index.js         |  3 +
 doc/theming/styled/ScopedCSSDoc.vue           | 86 ----------------
 doc/theming/styled/ScopedTokensDoc.vue        | 97 +++++++++++++++++++
 pages/theming/styled/index.vue                | 14 +--
 5 files changed, 108 insertions(+), 94 deletions(-)
 delete mode 100644 doc/theming/styled/ScopedCSSDoc.vue
 create mode 100644 doc/theming/styled/ScopedTokensDoc.vue

diff --git a/components/lib/themes/primeone/base/inputswitch/index.js b/components/lib/themes/primeone/base/inputswitch/index.js
index cc2c2cf60..37b26e6cc 100644
--- a/components/lib/themes/primeone/base/inputswitch/index.js
+++ b/components/lib/themes/primeone/base/inputswitch/index.js
@@ -45,7 +45,7 @@ export default {
     height: 1rem;
     left: 0.25rem;
     margin-top: -0.5rem;
-    border-radius: 50%;
+    border-radius: ${dt('inputswitch.handle.border.radius')};
     transition: all ${dt('transition.duration')};
 }
 
diff --git a/components/lib/themes/primeone/presets/aura/inputswitch/index.js b/components/lib/themes/primeone/presets/aura/inputswitch/index.js
index 9d4e5caa6..df66c5266 100644
--- a/components/lib/themes/primeone/presets/aura/inputswitch/index.js
+++ b/components/lib/themes/primeone/presets/aura/inputswitch/index.js
@@ -1,4 +1,7 @@
 export default {
+    handle: {
+        borderRadius: '50%'
+    },
     colorScheme: {
         light: {
             root: {
diff --git a/doc/theming/styled/ScopedCSSDoc.vue b/doc/theming/styled/ScopedCSSDoc.vue
deleted file mode 100644
index eb6fb098d..000000000
--- a/doc/theming/styled/ScopedCSSDoc.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <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" />
-        <InputSwitch v-model="checked2" class="amber-switch" />
-    </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>
-export default {
-    data() {
-        return {
-            checked1: true,
-            checked2: true,
-            code1: {
-                basic: `
-<InputSwitch v-model="checked1" class="blue-switch" />
-<InputSwitch v-model="checked2" class="amber-switch" />
-`
-            },
-            code2: {
-                basic: `
-<style scoped>
-    .blue-switch {
-        --p-inputswitch-checked-background: var(--p-blue-500);
-        --p-inputswitch-checked-hover-background: var(--p-blue-500);
-        --p-inputswitch-border-radius: 4px;
-    }
-
-    .amber-switch {
-        --p-inputswitch-checked-background: var(--p-amber-500);
-        --p-inputswitch-checked-hover-background: var(--p-amber-500);
-        --p-inputswitch-handle-background: var(--p-zinc-950);
-        --p-inputswitch-handle-hover-background: var(--p-zinc-950);
-        --p-inputswitch-handle-checked-background: var(--p-zinc-950);
-        --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}'
-    }
- }
-*/
-`
-            }
-        };
-    }
-};
-</script>
-
-<style scoped>
-.blue-switch {
-    --p-inputswitch-checked-background: var(--p-blue-500);
-    --p-inputswitch-checked-hover-background: var(--p-blue-500);
-    --p-inputswitch-border-radius: 4px;
-}
-
-.amber-switch {
-    --p-inputswitch-checked-background: var(--p-amber-500);
-    --p-inputswitch-checked-hover-background: var(--p-amber-500);
-    --p-inputswitch-handle-background: var(--p-zinc-950);
-    --p-inputswitch-handle-hover-background: var(--p-zinc-950);
-    --p-inputswitch-handle-checked-background: var(--p-zinc-950);
-    --p-inputswitch-handle-checked-hover-background: var(--p-zinc-950);
-}
-</style>
diff --git a/doc/theming/styled/ScopedTokensDoc.vue b/doc/theming/styled/ScopedTokensDoc.vue
new file mode 100644
index 000000000..6d2bb21e1
--- /dev/null
+++ b/doc/theming/styled/ScopedTokensDoc.vue
@@ -0,0 +1,97 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Design tokens can be scoped to a certain component using CSS variables. In this example, first switch uses the global tokens whereas second one overrides the global with its own tokens.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center gap-3">
+        <InputSwitch v-model="checked1" />
+        <InputSwitch v-model="checked2" :dt="amberSwitch" />
+    </div>
+    <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked1: true,
+            checked2: true,
+            amberSwitch: {
+                handle: {
+                    borderRadius: '4px'
+                },
+                colorScheme: {
+                    light: {
+                        root: {
+                            checkedBackground: '{amber.500}',
+                            checkedHoverBackground: '{amber.600}',
+                            borderRadius: '4px'
+                        },
+                        handle: {
+                            checkedBackground: '{amber.900}',
+                            checkedHoverBackground: '{amber.950}'
+                        }
+                    },
+                    dark: {
+                        root: {
+                            checkedBackground: '{amber.400}',
+                            checkedHoverBackground: '{amber.300}',
+                            borderRadius: '4px'
+                        },
+                        handle: {
+                            checkedBackground: '{amber.50}',
+                            checkedHoverBackground: '{amber.100}'
+                        }
+                    }
+                }
+            },
+            code1: {
+                basic: `
+<template>
+    <div>
+        <InputSwitch v-model="checked1" />
+        <InputSwitch v-model="checked2" :dt"amberSwitch" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked1 = ref(true);
+const checked2 = ref(true);
+const amberSwitch = ref({
+    handle: {
+        borderRadius: '4px'
+    },
+    colorScheme: {
+        light: {
+            root: {
+                checkedBackground: '{amber.500}',
+                checkedHoverBackground: '{amber.600}',
+                borderRadius: '4px'
+            },
+            handle: {
+                checkedBackground: '{amber.900}',
+                checkedHoverBackground: '{amber.950}'
+            }
+        },
+        dark: {
+            root: {
+                checkedBackground: '{amber.400}',
+                checkedHoverBackground: '{amber.300}',
+                borderRadius: '4px'
+            },
+            handle: {
+                checkedBackground: '{amber.50}',
+                checkedHoverBackground: '{amber.100}'
+            }
+        }
+    }
+});
+<\/script>
+
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/theming/styled/index.vue b/pages/theming/styled/index.vue
index 232ba2dce..ae076a498 100755
--- a/pages/theming/styled/index.vue
+++ b/pages/theming/styled/index.vue
@@ -22,12 +22,12 @@
 import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
 import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
 import CaseStyleDoc from '@/doc/theming/styled/CaseStyleDoc.vue';
-import ReservedKeysDoc from '@/doc/theming/styled/ReservedKeysDoc.vue';
 import ColorsDoc from '@/doc/theming/styled/ColorsDoc.vue';
 import DarkModeToggleDoc from '@/doc/theming/styled/DarkModeToggleDoc.vue';
 import PresetsDoc from '@/doc/theming/styled/PresetsDoc.vue';
+import ReservedKeysDoc from '@/doc/theming/styled/ReservedKeysDoc.vue';
 import ScaleDoc from '@/doc/theming/styled/ScaleDoc.vue';
-import ScopedCSSDoc from '@/doc/theming/styled/ScopedCSSDoc.vue';
+import ScopedTokensDoc from '@/doc/theming/styled/ScopedTokensDoc.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';
@@ -135,6 +135,11 @@ export default {
                         }
                     ]
                 },
+                {
+                    id: 'scopedtokens',
+                    label: 'Scoped Tokens',
+                    component: ScopedTokensDoc
+                },
                 {
                     id: 'utils',
                     label: 'Utils',
@@ -208,11 +213,6 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'scopedcss',
-                    label: 'Scoped CSS',
-                    component: ScopedCSSDoc
-                },
                 {
                     id: 'cssmodules',
                     label: 'CSS Modules',