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