vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Tokens for Chip

pull/5756/head
Cagatay Civici 2024-05-09 21:55:56 +03:00
parent 6b84e29b96
commit 4654a8d0af
3 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/lib/chip/style/ChipStyle.js
View File

@ -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;
}

16
components/lib/themes/aura/chip/index.js
View File

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

16
components/lib/themes/lara/chip/index.js
View File

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