From 35d037735552443a08b1b68b56771fc17b650e5a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 1 Apr 2024 01:21:51 +0300
Subject: [PATCH] Update $dt doc for new proposed api

---
 .../styled/customization/ComponentDoc.vue     |  5 ++-
 doc/theming/styled/utils/DTDoc.vue            | 37 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/doc/theming/styled/customization/ComponentDoc.vue b/doc/theming/styled/customization/ComponentDoc.vue
index 6b21d7785..e3933913b 100644
--- a/doc/theming/styled/customization/ComponentDoc.vue
+++ b/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>
diff --git a/doc/theming/styled/utils/DTDoc.vue b/doc/theming/styled/utils/DTDoc.vue
index e6daf9395..2470deebe 100644
--- a/doc/theming/styled/utils/DTDoc.vue
+++ b/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'
+            }
+        }
+      }
+    }
+  } 
+*/
 `
             }
         };