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

Refactored message component tokens

pull/5701/head
Cagatay Civici 2024-05-04 15:23:26 +03:00
parent a20948c218
commit 16332c13c1
4 changed files with 84 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,7 +55,7 @@ const theme = ({ dt }) => `
} }
.p-message-info .p-message-close-button:hover { .p-message-info .p-message-close-button:hover {
background: ${dt('message.info.close.hover.background')}; background: ${dt('message.info.close.button.hover.background')};
} }
.p-message-success { .p-message-success {
@ -70,7 +70,7 @@ const theme = ({ dt }) => `
} }
.p-message-success .p-message-close-button:hover { .p-message-success .p-message-close-button:hover {
background: ${dt('message.success.close.hover.background')}; background: ${dt('message.success.close.button.hover.background')};
} }
.p-message-warn { .p-message-warn {
@ -85,7 +85,7 @@ const theme = ({ dt }) => `
} }
.p-message-warn .p-message-close-button:hover { .p-message-warn .p-message-close-button:hover {
background: ${dt('message.warn.close.hover.background')}; background: ${dt('message.warn.close.button.hover.background')};
} }
.p-message-error { .p-message-error {
@ -100,7 +100,7 @@ const theme = ({ dt }) => `
} }
.p-message-error .p-message-close-button:hover { .p-message-error .p-message-close-button:hover {
background: ${dt('message.error.close.hover.background')}; background: ${dt('message.error.close.button.hover.background')};
} }
.p-message-secondary { .p-message-secondary {
@ -115,7 +115,7 @@ const theme = ({ dt }) => `
} }
.p-message-secondary .p-message-close-button:hover { .p-message-secondary .p-message-close-button:hover {
background: ${dt('message.secondary.close.hover.background')}; background: ${dt('message.secondary.close.button.hover.background')};
} }
.p-message-contrast { .p-message-contrast {
@ -130,7 +130,7 @@ const theme = ({ dt }) => `
} }
.p-message-contrast .p-message-close-button:hover { .p-message-contrast .p-message-close-button:hover {
background: ${dt('message.contrast.close.hover.background')}; background: ${dt('message.contrast.close.button.hover.background')};
} }
.p-message-text { .p-message-text {

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

@ -6,42 +6,54 @@ export default {
borderColor: '{blue.200}', borderColor: '{blue.200}',
color: '{blue.600}', color: '{blue.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeHoverBackground: '{blue.100}' closeButton: {
hoverBackground: '{blue.100}'
}
}, },
success: { success: {
background: 'color-mix(in srgb, {green.50}, transparent 5%)', background: 'color-mix(in srgb, {green.50}, transparent 5%)',
borderColor: '{green.200}', borderColor: '{green.200}',
color: '{green.600}', color: '{green.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeHoverBackground: '{green.100}' closeButton: {
hoverBackground: '{green.100}'
}
}, },
warn: { warn: {
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
borderColor: '{yellow.200}', borderColor: '{yellow.200}',
color: '{yellow.600}', color: '{yellow.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeHoverBackground: '{yellow.100}' closeButton: {
hoverBackground: '{yellow.100}'
}
}, },
error: { error: {
background: 'color-mix(in srgb, {red.50}, transparent 5%)', background: 'color-mix(in srgb, {red.50}, transparent 5%)',
borderColor: '{red.200}', borderColor: '{red.200}',
color: '{red.600}', color: '{red.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeHoverBackground: '{red.100}' closeButton: {
hoverBackground: '{red.100}'
}
}, },
secondary: { secondary: {
background: '{surface.100}', background: '{surface.100}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
color: '{surface.600}', color: '{surface.600}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeHoverBackground: '{surface.200}' closeButton: {
hoverBackground: '{surface.200}'
}
}, },
contrast: { contrast: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.950}', borderColor: '{surface.950}',
color: '{surface.50}', color: '{surface.50}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeHoverBackground: '{surface.800}' closeButton: {
hoverBackground: '{surface.800}'
}
} }
}, },
dark: { dark: {
@ -50,42 +62,54 @@ export default {
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
color: '{blue.500}', color: '{blue.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeHoverBackground: 'rgba(255, 255, 255, 0.05)' closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
}
}, },
success: { success: {
background: 'color-mix(in srgb, {green.500}, transparent 84%)', background: 'color-mix(in srgb, {green.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
color: '{green.500}', color: '{green.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeHoverBackground: 'rgba(255, 255, 255, 0.05)' closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
}
}, },
warn: { warn: {
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
color: '{yellow.500}', color: '{yellow.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeHoverBackground: 'rgba(255, 255, 255, 0.05)' closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
}
}, },
error: { error: {
background: 'color-mix(in srgb, {red.500}, transparent 84%)', background: 'color-mix(in srgb, {red.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
color: '{red.500}', color: '{red.500}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeHoverBackground: 'rgba(255, 255, 255, 0.05)' closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
}
}, },
secondary: { secondary: {
background: '{surface.800}', background: '{surface.800}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
color: '{surface.300}', color: '{surface.300}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeHoverBackground: '{surface.700}' closeButton: {
hoverBackground: '{surface.700}'
}
}, },
contrast: { contrast: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.100}', borderColor: '{surface.100}',
color: '{surface.950}', color: '{surface.950}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeHoverBackground: '{surface.100}' closeButton: {
hoverBackground: '{surface.100}'
}
} }
} }
} }

48
components/lib/themes/aura/toast/index.js
View File

@ -8,7 +8,9 @@ export default {
color: '{blue.600}', color: '{blue.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeHoverBackground: '{blue.100}' closeButton: {
hoverBackground: '{blue.100}'
}
}, },
success: { success: {
background: 'color-mix(in srgb, {green.50}, transparent 5%)', background: 'color-mix(in srgb, {green.50}, transparent 5%)',
@ -16,7 +18,9 @@ export default {
color: '{green.600}', color: '{green.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeHoverBackground: '{green.100}' closeButton: {
hoverBackground: '{green.100}'
}
}, },
warn: { warn: {
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
@ -24,7 +28,9 @@ export default {
color: '{yellow.600}', color: '{yellow.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeHoverBackground: '{yellow.100}' closeButton: {
hoverBackground: '{yellow.100}'
}
}, },
error: { error: {
background: 'color-mix(in srgb, {red.50}, transparent 5%)', background: 'color-mix(in srgb, {red.50}, transparent 5%)',
@ -32,7 +38,9 @@ export default {
color: '{red.600}', color: '{red.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeHoverBackground: '{red.100}' closeButton: {
hoverBackground: '{red.100}'
}
}, },
secondary: { secondary: {
background: '{surface.100}', background: '{surface.100}',
@ -40,7 +48,9 @@ export default {
color: '{surface.600}', color: '{surface.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeHoverBackground: '{surface.200}' closeButton: {
hoverBackground: '{surface.200}'
}
}, },
contrast: { contrast: {
background: '{surface.900}', background: '{surface.900}',
@ -48,7 +58,9 @@ export default {
color: '{surface.50}', color: '{surface.50}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeHoverBackground: '{surface.800}' closeButton: {
hoverBackground: '{surface.800}'
}
} }
}, },
dark: { dark: {
@ -59,7 +71,9 @@ export default {
color: '{blue.500}', color: '{blue.500}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeHoverBackground: 'rgba(255, 255, 255, 0.05)' closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
}
}, },
success: { success: {
background: 'color-mix(in srgb, {green.500}, transparent 84%)', background: 'color-mix(in srgb, {green.500}, transparent 84%)',
@ -67,7 +81,9 @@ export default {
color: '{green.500}', color: '{green.500}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeHoverBackground: 'rgba(255, 255, 255, 0.05)' closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
}
}, },
warn: { warn: {
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
@ -75,7 +91,9 @@ export default {
color: '{yellow.500}', color: '{yellow.500}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeHoverBackground: 'rgba(255, 255, 255, 0.05)' closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
}
}, },
error: { error: {
background: 'color-mix(in srgb, {red.500}, transparent 84%)', background: 'color-mix(in srgb, {red.500}, transparent 84%)',
@ -83,7 +101,9 @@ export default {
color: '{red.500}', color: '{red.500}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeHoverBackground: 'rgba(255, 255, 255, 0.05)' closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)'
}
}, },
secondary: { secondary: {
background: '{surface.800}', background: '{surface.800}',
@ -91,7 +111,9 @@ export default {
color: '{surface.300}', color: '{surface.300}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeHoverBackground: '{surface.700}' closeButton: {
hoverBackground: '{surface.700}'
}
}, },
contrast: { contrast: {
background: '{surface.0}', background: '{surface.0}',
@ -99,7 +121,9 @@ export default {
color: '{surface.950}', color: '{surface.950}',
detailColor: '{surface.950}', detailColor: '{surface.950}',
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeHoverBackground: '{surface.100}' closeButton: {
hoverBackground: '{surface.100}'
}
} }
} }
} }

12
components/lib/toast/style/ToastStyle.js
View File

@ -82,7 +82,7 @@ const theme = ({ dt }) => `
} }
.p-toast-message-info .p-toast-close-button:hover { .p-toast-message-info .p-toast-close-button:hover {
background: ${dt('toast.info.close.hover.background')}; background: ${dt('toast.info.close.button.hover.background')};
} }
.p-toast-message-success { .p-toast-message-success {
@ -101,7 +101,7 @@ const theme = ({ dt }) => `
} }
.p-toast-message-success .p-toast-close-button:hover { .p-toast-message-success .p-toast-close-button:hover {
background: ${dt('toast.success.close.hover.background')}; background: ${dt('toast.success.close.button.hover.background')};
} }
.p-toast-message-warn { .p-toast-message-warn {
@ -120,7 +120,7 @@ const theme = ({ dt }) => `
} }
.p-toast-message-warn .p-toast-close-button:hover { .p-toast-message-warn .p-toast-close-button:hover {
background: ${dt('toast.warn.close.hover.background')}; background: ${dt('toast.warn.close.button.hover.background')};
} }
.p-toast-message-error { .p-toast-message-error {
@ -139,7 +139,7 @@ const theme = ({ dt }) => `
} }
.p-toast-message-error .p-toast-close-button:hover { .p-toast-message-error .p-toast-close-button:hover {
background: ${dt('toast.error.close.hover.background')}; background: ${dt('toast.error.close.button.hover.background')};
} }
.p-toast-message-secondary { .p-toast-message-secondary {
@ -158,7 +158,7 @@ const theme = ({ dt }) => `
} }
.p-toast-message-secondary .p-toast-close-button:hover { .p-toast-message-secondary .p-toast-close-button:hover {
background: ${dt('toast.secondary.close.hover.background')}; background: ${dt('toast.secondary.close.button.hover.background')};
} }
.p-toast-message-contrast { .p-toast-message-contrast {
@ -177,7 +177,7 @@ const theme = ({ dt }) => `
} }
.p-toast-message-contrast .p-toast-close-button:hover { .p-toast-message-contrast .p-toast-close-button:hover {
background: ${dt('toast.contrast.close.hover.background')}; background: ${dt('toast.contrast.close.button.hover.background')};
} }
.p-toast-top-center { .p-toast-top-center {