From c078a56d6d10aafb1ea9c58aa6cb5ba5874c2bba Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 9 May 2024 22:29:56 +0300
Subject: [PATCH] Tokens for Tag

---
 components/lib/tag/style/TagStyle.js      | 18 ++++----
 components/lib/themes/aura/badge/index.js |  4 +-
 components/lib/themes/aura/tag/index.js   | 11 +++++
 components/lib/themes/lara/tag/index.js   | 51 ++++++++++++++---------
 4 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/components/lib/tag/style/TagStyle.js b/components/lib/tag/style/TagStyle.js
index ec1603df0..ecc230b44 100644
--- a/components/lib/tag/style/TagStyle.js
+++ b/components/lib/tag/style/TagStyle.js
@@ -7,21 +7,21 @@ const theme = ({ dt }) => `
     justify-content: center;
     background: ${dt('tag.primary.background')};
     color: ${dt('tag.primary.color')};
-    font-size: 0.875rem;
-    font-weight: 700;
-    padding: 0.25rem 0.4rem;
-    border-radius: ${dt('border.radius.md')};
-    gap: 0.25rem;
+    font-size: ${dt('tag.font.size')};
+    font-weight: ${dt('tag.font.weight')};
+    padding: ${dt('tag.padding')};
+    border-radius: ${dt('tag.border.radius')};
+    gap: ${dt('tag.gap')};
 }
 
 .p-tag-icon {
-    font-size: 0.75rem;
-    width: 0.75rem;
-    height: 0.75rem;
+    font-size: ${dt('tag.icon.size')};
+    width: ${dt('tag.icon.size')};
+    height:${dt('tag.icon.size')};
 }
 
 .p-tag-rounded {
-    border-radius: 10rem;
+    border-radius: ${dt('tag.rounded.border.radius')};
 }
 
 .p-tag-success {
diff --git a/components/lib/themes/aura/badge/index.js b/components/lib/themes/aura/badge/index.js
index 9559a78ba..3a28ff521 100644
--- a/components/lib/themes/aura/badge/index.js
+++ b/components/lib/themes/aura/badge/index.js
@@ -24,7 +24,7 @@ export default {
         light: {
             primary: {
                 background: '{primary.color}',
-                color: '{primary.contrast.color}'
+                color: '{primary.inverse.color}'
             },
             secondary: {
                 background: '{surface.100}',
@@ -54,7 +54,7 @@ export default {
         dark: {
             primary: {
                 background: '{primary.color}',
-                color: '{primary.contrast.color}'
+                color: '{primary.inverse.color}'
             },
             secondary: {
                 background: '{surface.800}',
diff --git a/components/lib/themes/aura/tag/index.js b/components/lib/themes/aura/tag/index.js
index 77d23852b..b6c535c19 100644
--- a/components/lib/themes/aura/tag/index.js
+++ b/components/lib/themes/aura/tag/index.js
@@ -1,4 +1,15 @@
 export default {
+    root: {
+        fontSize: '0.875rem',
+        fontWeight: '700',
+        padding: '0.25rem 0.5rem',
+        gap: '0.25rem',
+        borderRadius: '{content.border.radius}',
+        roundedBorderRadius: '{border.radius.xl}'
+    },
+    icon: {
+        size: '0.75rem'
+    },
     colorScheme: {
         light: {
             primary: {
diff --git a/components/lib/themes/lara/tag/index.js b/components/lib/themes/lara/tag/index.js
index 77d23852b..d4c51e081 100644
--- a/components/lib/themes/lara/tag/index.js
+++ b/components/lib/themes/lara/tag/index.js
@@ -1,29 +1,40 @@
 export default {
+    root: {
+        fontSize: '0.875rem',
+        fontWeight: '700',
+        padding: '0.25rem 0.5rem',
+        gap: '0.25rem',
+        borderRadius: '{content.border.radius}',
+        roundedBorderRadius: '{border.radius.xl}'
+    },
+    icon: {
+        size: '0.75rem'
+    },
     colorScheme: {
         light: {
             primary: {
-                background: '{primary.100}',
-                color: '{primary.700}'
+                background: '{primary.color}',
+                color: '{primary.inverse.color}'
             },
             secondary: {
                 background: '{surface.100}',
                 color: '{surface.600}'
             },
             success: {
-                background: '{green.100}',
-                color: '{green.700}'
+                background: '{green.500}',
+                color: '{surface.0}'
             },
             info: {
-                background: '{sky.100}',
-                color: '{sky.700}'
+                background: '{sky.500}',
+                color: '{surface.0}'
             },
             warn: {
-                background: '{orange.100}',
-                color: '{orange.700}'
+                background: '{orange.500}',
+                color: '{surface.0}'
             },
             danger: {
-                background: '{red.100}',
-                color: '{red.700}'
+                background: '{red.500}',
+                color: '{surface.0}'
             },
             contrast: {
                 background: '{surface.950}',
@@ -32,28 +43,28 @@ export default {
         },
         dark: {
             primary: {
-                background: 'color-mix(in srgb, {primary.500}, transparent 84%)',
-                color: '{primary.300}'
+                background: '{primary.color}',
+                color: '{primary.inverse.color}'
             },
             secondary: {
                 background: '{surface.800}',
                 color: '{surface.300}'
             },
             success: {
-                background: 'color-mix(in srgb, {green.500}, transparent 84%)',
-                color: '{green.300}'
+                background: '{green.400}',
+                color: '{green.950}'
             },
             info: {
-                background: 'color-mix(in srgb, {sky.500}, transparent 84%)',
-                color: '{sky.300}'
+                background: '{sky.400}',
+                color: '{sky.950}'
             },
             warn: {
-                background: 'color-mix(in srgb, {orange.500}, transparent 84%)',
-                color: '{orange.300}'
+                background: '{orange.400}',
+                color: '{orange.950}'
             },
             danger: {
-                background: 'color-mix(in srgb, {red.500}, transparent 84%)',
-                color: '{red.300}'
+                background: '{red.400}',
+                color: '{red.950}'
             },
             contrast: {
                 background: '{surface.0}',