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

Tokens for message

pull/5756/head
Cagatay Civici 2024-05-09 18:02:06 +03:00
parent e30ecebcea
commit e239e64505
3 changed files with 213 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
components/lib/message/style/MessageStyle.js
View File

@ -1,15 +1,16 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-message {
margin: ${dt('message.margin')};
border-radius: ${dt('message.border.radius')};
}
.p-message-content {
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
}
.p-message {
margin: 1rem 0;
border-radius: 6px;
padding: ${dt('message.content.padding')};
gap: ${dt('message.content.gap')};
}
.p-message-icon {
@ -24,11 +25,11 @@ const theme = ({ dt }) => `
margin: 0 0 0 auto;
overflow: hidden;
position: relative;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
width: ${dt('message.close.button.width')};
height: ${dt('message.close.button.height')};
border-radius: ${dt('message.close.button.border.radius')};
background: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
outline-color: transparent;
color: inherit;
padding: 0;
@ -37,10 +38,16 @@ const theme = ({ dt }) => `
user-select: none;
}
.p-message-close-icon {
font-size: ${dt('message.close.icon.size')};
width: ${dt('message.close.icon.size')};
height: ${dt('message.close.icon.size')};
}
.p-message-close-button:focus-visible {
outline-width: ${dt('focus.ring.width')};
outline-style: ${dt('focus.ring.style')};
outline-offset: ${dt('focus.ring.offset')};
outline-width: ${dt('message.close.button.focus.ring.width')};
outline-style: ${dt('message.close.button.focus.ring.style')};
outline-offset: ${dt('message.close.button.focus.ring.offset')};
}
.p-message-info {
@ -51,7 +58,8 @@ const theme = ({ dt }) => `
}
.p-message-info .p-message-close-button:focus-visible {
outline-color: ${dt('message.info.color')};
outline-color: ${dt('message.info.close.button.focus.ring.color')};
box-shadow: ${dt('message.info.close.button.focus.ring.shadow')};
}
.p-message-info .p-message-close-button:hover {
@ -66,7 +74,8 @@ const theme = ({ dt }) => `
}
.p-message-success .p-message-close-button:focus-visible {
outline-color: ${dt('message.success.color')};
outline-color: ${dt('message.success.close.button.focus.ring.color')};
box-shadow: ${dt('message.success.close.button.focus.ring.shadow')};
}
.p-message-success .p-message-close-button:hover {
@ -81,7 +90,8 @@ const theme = ({ dt }) => `
}
.p-message-warn .p-message-close-button:focus-visible {
outline-color: ${dt('message.warn.color')};
outline-color: ${dt('message.warn.close.button.focus.ring.color')};
box-shadow: ${dt('message.warn.close.button.focus.ring.shadow')};
}
.p-message-warn .p-message-close-button:hover {
@ -96,7 +106,8 @@ const theme = ({ dt }) => `
}
.p-message-error .p-message-close-button:focus-visible {
outline-color: ${dt('message.error.color')};
outline-color: ${dt('message.error.close.button.focus.ring.color')};
box-shadow: ${dt('message.error.close.button.focus.ring.shadow')};
}
.p-message-error .p-message-close-button:hover {
@ -111,7 +122,8 @@ const theme = ({ dt }) => `
}
.p-message-secondary .p-message-close-button:focus-visible {
outline-color: ${dt('message.secondary.color')};
outline-color: ${dt('message.secondary.close.button.focus.ring.color')};
box-shadow: ${dt('message.secondary.close.button.focus.ring.shadow')};
}
.p-message-secondary .p-message-close-button:hover {
@ -126,7 +138,8 @@ const theme = ({ dt }) => `
}
.p-message-contrast .p-message-close-button:focus-visible {
outline-color: ${dt('message.contrast.color')};
outline-color: ${dt('message.contrast.close.button.focus.ring.color')};
box-shadow: ${dt('message.contrast.close.button.focus.ring.shadow')};
}
.p-message-contrast .p-message-close-button:hover {
@ -134,18 +147,14 @@ const theme = ({ dt }) => `
}
.p-message-text {
font-size: 1rem;
font-weight: 500;
font-size: ${dt('message.text.font.size')};
font-weight: ${dt('message.text.font.weight')};
}
.p-message-icon {
font-size: 1rem;
margin-right: 0.5rem;
}
.p-message .p-icon:not(.p-message-close-button-icon) {
width: 1rem;
height: 1rem;
font-size: ${dt('message.icon.size')};
width: ${dt('message.icon.size')};
height: ${dt('message.icon.size')};
}
.p-message-enter-from {

100
components/lib/themes/aura/message/index.js
View File

@ -1,4 +1,32 @@
export default {
root: {
margin: '1rem 0',
borderRadius: '{content.border.radius}'
},
content: {
padding: '0.5rem 0.75rem',
gap: '0.5rem'
},
text: {
fontSize: '1rem',
fontWeight: '500'
},
icon: {
size: '1rem'
},
closeButton: {
width: '1.75rem',
height: '1.75rem',
borderRadius: '50%',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
offset: '{focus.ring.offset}'
}
},
closeIcon: {
size: '1rem'
},
colorScheme: {
light: {
info: {
@ -7,7 +35,11 @@ export default {
color: '{blue.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeButton: {
hoverBackground: '{blue.100}'
hoverBackground: '{blue.100}',
focusRing: {
color: '{blue.600}',
shadow: 'none'
}
}
},
success: {
@ -16,7 +48,11 @@ export default {
color: '{green.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeButton: {
hoverBackground: '{green.100}'
hoverBackground: '{green.100}',
focusRing: {
color: '{green.600}',
shadow: 'none'
}
}
},
warn: {
@ -25,7 +61,11 @@ export default {
color: '{yellow.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeButton: {
hoverBackground: '{yellow.100}'
hoverBackground: '{yellow.100}',
focusRing: {
color: '{yellow.600}',
shadow: 'none'
}
}
},
error: {
@ -34,7 +74,11 @@ export default {
color: '{red.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeButton: {
hoverBackground: '{red.100}'
hoverBackground: '{red.100}',
focusRing: {
color: '{red.600}',
shadow: 'none'
}
}
},
secondary: {
@ -43,7 +87,11 @@ export default {
color: '{surface.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.200}'
hoverBackground: '{surface.200}',
focusRing: {
color: '{surface.600}',
shadow: 'none'
}
}
},
contrast: {
@ -52,7 +100,11 @@ export default {
color: '{surface.50}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.800}'
hoverBackground: '{surface.800}',
focusRing: {
color: '{surface.50}',
shadow: 'none'
}
}
}
},
@ -63,7 +115,11 @@ export default {
color: '{blue.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
color: '{blue.500}',
shadow: 'none'
}
}
},
success: {
@ -72,7 +128,11 @@ export default {
color: '{green.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
color: '{green.500}',
shadow: 'none'
}
}
},
warn: {
@ -81,7 +141,11 @@ export default {
color: '{yellow.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
color: '{yellow.500}',
shadow: 'none'
}
}
},
error: {
@ -90,7 +154,11 @@ export default {
color: '{red.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
color: '{red.500}',
shadow: 'none'
}
}
},
secondary: {
@ -99,7 +167,11 @@ export default {
color: '{surface.300}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.700}'
hoverBackground: '{surface.700}',
focusRing: {
color: '{surface.300}',
shadow: 'none'
}
}
},
contrast: {
@ -108,7 +180,11 @@ export default {
color: '{surface.950}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.100}'
hoverBackground: '{surface.100}',
focusRing: {
color: '{blue.950}',
shadow: 'none'
}
}
}
}

100
components/lib/themes/lara/message/index.js
View File

@ -1,4 +1,32 @@
export default {
root: {
margin: '1.125rem 0',
borderRadius: '{content.border.radius}'
},
content: {
padding: '0.75rem 1rem',
gap: '0.5rem'
},
text: {
fontSize: '1rem',
fontWeight: '500'
},
icon: {
size: '1.25rem'
},
closeButton: {
width: '2rem',
height: '2rem',
borderRadius: '50%',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
offset: '{focus.ring.offset}'
}
},
closeIcon: {
size: '1rem'
},
colorScheme: {
light: {
info: {
@ -7,7 +35,11 @@ export default {
color: '{blue.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeButton: {
hoverBackground: '{blue.100}'
hoverBackground: '{blue.100}',
focusRing: {
color: '{focus.ring.color}',
shadow: '0 0 0 0.2rem {blue.200}'
}
}
},
success: {
@ -16,7 +48,11 @@ export default {
color: '{green.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeButton: {
hoverBackground: '{green.100}'
hoverBackground: '{green.100}',
focusRing: {
color: '{focus.ring.color}',
shadow: '0 0 0 0.2rem {green.200}'
}
}
},
warn: {
@ -25,7 +61,11 @@ export default {
color: '{yellow.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeButton: {
hoverBackground: '{yellow.100}'
hoverBackground: '{yellow.100}',
focusRing: {
color: '{focus.ring.color}',
shadow: '0 0 0 0.2rem {yellow.200}'
}
}
},
error: {
@ -34,7 +74,11 @@ export default {
color: '{red.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeButton: {
hoverBackground: '{red.100}'
hoverBackground: '{red.100}',
focusRing: {
color: '{focus.ring.color}',
shadow: '0 0 0 0.2rem {red.200}'
}
}
},
secondary: {
@ -43,7 +87,11 @@ export default {
color: '{surface.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.200}'
hoverBackground: '{surface.200}',
focusRing: {
color: '{focus.ring.color}',
shadow: '0 0 0 0.2rem {surface.200}'
}
}
},
contrast: {
@ -52,7 +100,11 @@ export default {
color: '{surface.50}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.800}'
hoverBackground: '{surface.800}',
focusRing: {
color: '{focus.ring.color}',
shadow: '0 0 0 0.2rem {surface.400}'
}
}
}
},
@ -63,7 +115,11 @@ export default {
color: '{blue.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
color: '{focus.ring.color}',
shadow: '0 0 0 0.2rem color-mix(in srgb, {blue.500}, transparent 80%)'
}
}
},
success: {
@ -72,7 +128,11 @@ export default {
color: '{green.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
color: '{focus.ring.color}',
shadow: '0 0 0 0.2rem color-mix(in srgb, {green.500}, transparent 80%)'
}
}
},
warn: {
@ -81,7 +141,11 @@ export default {
color: '{yellow.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
color: '{focus.ring.color}',
shadow: '0 0 0 0.2rem color-mix(in srgb, {yellow.500}, transparent 80%)'
}
}
},
error: {
@ -90,7 +154,11 @@ export default {
color: '{red.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
color: '{focus.ring.color}',
shadow: '0 0 0 0.2rem color-mix(in srgb, {red.500}, transparent 80%)'
}
}
},
secondary: {
@ -99,7 +167,11 @@ export default {
color: '{surface.300}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.700}'
hoverBackground: '{surface.700}',
focusRing: {
color: '{focus.ring.color}',
shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.300}, transparent 80%)'
}
}
},
contrast: {
@ -108,7 +180,11 @@ export default {
color: '{surface.950}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.100}'
hoverBackground: '{surface.100}',
focusRing: {
color: '{focus.ring.color}',
shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.950}, transparent 80%)'
}
}
}
}