Tokens for Chip

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')};
+    font-size: ${dt('chip.remove.icon.font.size')};
-    transition: outline-color ${dt('transition.duration')}, box-shadow-color ${dt('transition.duration')};
+    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;
 }
 

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}'
             }
         }
     }

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}'
             }
         }
     }