Add scoped tokens doc

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')};
 }
 

components/lib/themes/primeone/presets/aura/inputswitch/index.js

@@ -1,4 +1,7 @@
 export default {
+    handle: {
+        borderRadius: '50%'
+    },
     colorScheme: {
         light: {
             root: {

doc/theming/styled/ScopedCSSDoc.vue

@@ -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>

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>

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',