Update $dt doc for new proposed api

doc/theming/styled/customization/ComponentDoc.vue

@@ -1,6 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The design tokens of a specific component is defined at <i>components</i> layer. Overriding components tokens is not the recommended approach if you are building our own style, building your own preset should be preferred instead.</p>
+        <p>
+            The design tokens of a specific component is defined at <i>components</i> layer. Overriding components tokens is not the recommended approach if you are building our own style, building your own preset should be preferred instead. This
+            configuration is global and applies to all card components, in case you need to customize a particular component on a page locally, view the Scoped CSS section for an example.
+        </p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>

doc/theming/styled/utils/DTDoc.vue

@@ -13,7 +13,42 @@ export default {
                 basic: `
 import { $dt } from 'primevue/themes'; 
 
-const value = $dt('primary.color', 'value');
+const duration = $dt('transition.duration');
+/* 
+  duration: {
+    name: '--transition-duration',
+    variable: 'var(--p-transition-duration)',
+    value: '0.2s'  
+  } 
+*/
+
+const primaryColor = $dt('primary.color');
+/*
+  primaryColor: {
+    name: '--primary-color',
+    variable: 'var(--p-primary-color)',
+    value: {
+      light: {
+        value: '#10b981',
+        path: {
+            name: 'semantic.primary.color',
+            binding: {
+                name: 'primitive.emerald.500'
+            }
+        }
+      },
+      dark: {
+        value: '#34d399',
+        path: {
+            name: 'semantic.primary.color',
+            binding: {
+                name: 'primitive.emerald.400'
+            }
+        }
+      }
+    }
+  } 
+*/
 `
             }
         };