From 83eab20745c5d59b9df3035449c08f33843e8216 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 11 May 2024 16:20:02 +0300
Subject: [PATCH] Tokens for Card

---
 components/lib/card/style/CardStyle.js   | 15 +++++++--------
 components/lib/themes/aura/card/index.js | 15 ++++++++++++++-
 components/lib/themes/lara/card/index.js | 15 ++++++++++++++-
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/components/lib/card/style/CardStyle.js b/components/lib/card/style/CardStyle.js
index 5b9a3bc4e..af2bf4ebf 100644
--- a/components/lib/card/style/CardStyle.js
+++ b/components/lib/card/style/CardStyle.js
@@ -4,8 +4,8 @@ const theme = ({ dt }) => `
 .p-card {
     background: ${dt('card.background')};
     color: ${dt('card.color')};
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
+    box-shadow: ${dt('card.shadow')};
+    border-radius: ${dt('card.border.radius')};
     display: flex;
     flex-direction: column;
 }
@@ -13,23 +13,22 @@ const theme = ({ dt }) => `
 .p-card-caption {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: ${dt('card.caption.gap')};
 }
 
 .p-card-body {
-    padding: 1.5rem;
+    padding: ${dt('card.body.padding')};
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: ${dt('card.body.gap')};
 }
 
 .p-card-title {
-    font-size: 1.25rem;
-    font-weight: 600;
+    font-size: ${dt('card.title.font.size')};
+    font-weight: ${dt('card.title.font.weight')};
 }
 
 .p-card-subtitle {
-    font-weight: 400;
     color: ${dt('card.subtitle.color')};
 }
 `;
diff --git a/components/lib/themes/aura/card/index.js b/components/lib/themes/aura/card/index.js
index d074b9223..8cd21a927 100644
--- a/components/lib/themes/aura/card/index.js
+++ b/components/lib/themes/aura/card/index.js
@@ -1,7 +1,20 @@
 export default {
     root: {
         background: '{content.background}',
-        color: '{text.color}'
+        borderRadius: '{border.radius.xl}',
+        color: '{content.color}',
+        shadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)'
+    },
+    body: {
+        padding: '1.25rem',
+        gap: '0.5rem'
+    },
+    caption: {
+        gap: '0.5rem'
+    },
+    title: {
+        fontSize: '1.25rem',
+        fontWeight: '500'
     },
     subtitle: {
         color: '{text.muted.color}'
diff --git a/components/lib/themes/lara/card/index.js b/components/lib/themes/lara/card/index.js
index d074b9223..2b2b07c5f 100644
--- a/components/lib/themes/lara/card/index.js
+++ b/components/lib/themes/lara/card/index.js
@@ -1,7 +1,20 @@
 export default {
     root: {
         background: '{content.background}',
-        color: '{text.color}'
+        borderRadius: '{border.radius.lg}',
+        color: '{content.color}',
+        shadow: '0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)'
+    },
+    body: {
+        padding: '1.5rem',
+        gap: '0.75rem'
+    },
+    caption: {
+        gap: '0.5rem'
+    },
+    title: {
+        fontSize: '1.25rem',
+        fontWeight: '700'
     },
     subtitle: {
         color: '{text.muted.color}'