From 4654a8d0af3b62dc82a41a389019e9fb44fa858b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 9 May 2024 21:55:56 +0300
Subject: [PATCH] Tokens for Chip

---
 components/lib/chip/style/ChipStyle.js   | 15 +++++++++++++--
 components/lib/themes/aura/chip/index.js | 16 +++++++++++++++-
 components/lib/themes/lara/chip/index.js | 16 +++++++++++++++-
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/components/lib/chip/style/ChipStyle.js b/components/lib/chip/style/ChipStyle.js
index 1b344b19b..ff9963e94 100644
--- a/components/lib/chip/style/ChipStyle.js
+++ b/components/lib/chip/style/ChipStyle.js
@@ -11,6 +11,13 @@ const theme = ({ dt }) => `
     gap: ${dt('chip.gap')};
 }
 
+.p-chip-icon {
+    color: ${dt('chip.icon.color')};
+    font-size: ${dt('chip.icon.font.size')};
+    width: ${dt('chip.icon.size')};
+    height: ${dt('chip.icon.size')};
+}
+
 .p-chip-image {
     border-radius: 50%;
     width: ${dt('chip.image.width')};
@@ -29,8 +36,12 @@ const theme = ({ dt }) => `
 
 .p-chip-remove-icon {
     cursor: pointer;
-    border-radius: ${dt('chip.remove.icon.border.radius')};
-    transition: outline-color ${dt('transition.duration')}, box-shadow-color ${dt('transition.duration')};
+    font-size: ${dt('chip.remove.icon.font.size')};
+    width: ${dt('chip.remove.icon.size')};
+    height: ${dt('chip.remove.icon.size')};
+    color: ${dt('chip.remove.icon.color')};
+    border-radius: 50%;
+    transition: outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     outline-color: transparent;
 }
 
diff --git a/components/lib/themes/aura/chip/index.js b/components/lib/themes/aura/chip/index.js
index cc3090312..e3a382a69 100644
--- a/components/lib/themes/aura/chip/index.js
+++ b/components/lib/themes/aura/chip/index.js
@@ -9,8 +9,10 @@ export default {
         width: '2rem',
         height: '2rem'
     },
+    icon: {
+        size: '1rem'
+    },
     removeIcon: {
-        borderRadius: '{content.border.radius}',
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',
@@ -24,12 +26,24 @@ export default {
             root: {
                 background: '{surface.100}',
                 color: '{surface.800}'
+            },
+            icon: {
+                color: '{surface.800}'
+            },
+            removeIcon: {
+                color: '{surface.800}'
             }
         },
         dark: {
             root: {
                 background: '{surface.700}',
                 color: '{surface.0}'
+            },
+            icon: {
+                color: '{surface.0}'
+            },
+            removeIcon: {
+                color: '{surfaec.0}'
             }
         }
     }
diff --git a/components/lib/themes/lara/chip/index.js b/components/lib/themes/lara/chip/index.js
index a1c179449..f84a85952 100644
--- a/components/lib/themes/lara/chip/index.js
+++ b/components/lib/themes/lara/chip/index.js
@@ -9,8 +9,10 @@ export default {
         width: '2rem',
         height: '2rem'
     },
+    icon: {
+        size: '1rem'
+    },
     removeIcon: {
-        borderRadius: '{content.border.radius}',
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',
@@ -24,12 +26,24 @@ export default {
             root: {
                 background: '{surface.100}',
                 color: '{surface.800}'
+            },
+            icon: {
+                color: '{surface.800}'
+            },
+            removeIcon: {
+                color: '{surface.800}'
             }
         },
         dark: {
             root: {
                 background: '{surface.700}',
                 color: '{surface.0}'
+            },
+            icon: {
+                color: '{surface.0}'
+            },
+            removeIcon: {
+                color: '{surfaec.0}'
             }
         }
     }