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

Material message components

pull/6275/head^2
Cagatay Civici 2024-10-01 11:59:51 +03:00
parent ea1c5c6dc5
commit 4e1e841302
2 changed files with 52 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/themes/src/presets/material/message/index.js
View File

@ -1,11 +1,11 @@
export default { export default {
root: { root: {
borderRadius: '{content.border.radius}', borderRadius: '{content.border.radius}',
borderWidth: '1px', borderWidth: '0',
transitionDuration: '{transition.duration}' transitionDuration: '{transition.duration}'
}, },
content: { content: {
padding: '0.5rem 0.75rem', padding: '1rem 1.25rem',
gap: '0.5rem' gap: '0.5rem'
}, },
text: { text: {
@ -13,11 +13,11 @@ export default {
fontWeight: '500' fontWeight: '500'
}, },
icon: { icon: {
size: '1.125rem' size: '1.25rem'
}, },
closeButton: { closeButton: {
width: '1.75rem', width: '2rem',
height: '1.75rem', height: '2rem',
borderRadius: '50%', borderRadius: '50%',
focusRing: { focusRing: {
width: '{focus.ring.width}', width: '{focus.ring.width}',
@ -34,7 +34,7 @@ export default {
background: 'color-mix(in srgb, {blue.50}, transparent 5%)', background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
borderColor: '{blue.200}', borderColor: '{blue.200}',
color: '{blue.600}', color: '{blue.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{blue.100}', hoverBackground: '{blue.100}',
focusRing: { focusRing: {
@ -47,7 +47,7 @@ export default {
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}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{green.100}', hoverBackground: '{green.100}',
focusRing: { focusRing: {
@ -59,8 +59,8 @@ export default {
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.900}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{yellow.100}', hoverBackground: '{yellow.100}',
focusRing: { focusRing: {
@ -73,7 +73,7 @@ export default {
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}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{red.100}', hoverBackground: '{red.100}',
focusRing: { focusRing: {
@ -86,7 +86,7 @@ export default {
background: '{surface.100}', background: '{surface.100}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
color: '{surface.600}', color: '{surface.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{surface.200}', hoverBackground: '{surface.200}',
focusRing: { focusRing: {
@ -99,7 +99,7 @@ export default {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.950}', borderColor: '{surface.950}',
color: '{surface.50}', color: '{surface.50}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{surface.800}', hoverBackground: '{surface.800}',
focusRing: { focusRing: {
@ -114,7 +114,7 @@ export default {
background: 'color-mix(in srgb, {blue.500}, transparent 84%)', background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
color: '{blue.500}', color: '{blue.500}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -127,7 +127,7 @@ export default {
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}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -140,7 +140,7 @@ export default {
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}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -153,7 +153,7 @@ export default {
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}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -166,7 +166,7 @@ export default {
background: '{surface.800}', background: '{surface.800}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
color: '{surface.300}', color: '{surface.300}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{surface.700}', hoverBackground: '{surface.700}',
focusRing: { focusRing: {
@ -179,7 +179,7 @@ export default {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.100}', borderColor: '{surface.100}',
color: '{surface.950}', color: '{surface.950}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', shadow: 'none',
closeButton: { closeButton: {
hoverBackground: '{surface.100}', hoverBackground: '{surface.100}',
focusRing: { focusRing: {

68
packages/themes/src/presets/material/toast/index.js
View File

@ -2,11 +2,11 @@ export default {
root: { root: {
width: '25rem', width: '25rem',
borderRadius: '{content.border.radius}', borderRadius: '{content.border.radius}',
borderWidth: '1px', borderWidth: '0',
transitionDuration: '{transition.duration}' transitionDuration: '{transition.duration}'
}, },
icon: { icon: {
size: '1.125rem' size: '1.25rem'
}, },
content: { content: {
padding: '{overlay.popover.padding}', padding: '{overlay.popover.padding}',
@ -24,8 +24,8 @@ export default {
fontSize: '0.875rem' fontSize: '0.875rem'
}, },
closeButton: { closeButton: {
width: '1.75rem', width: '2rem',
height: '1.75rem', height: '2rem',
borderRadius: '50%', borderRadius: '50%',
focusRing: { focusRing: {
width: '{focus.ring.width}', width: '{focus.ring.width}',
@ -38,13 +38,13 @@ export default {
}, },
colorScheme: { colorScheme: {
light: { light: {
blur: '1.5px', blur: '0',
info: { info: {
background: 'color-mix(in srgb, {blue.50}, transparent 5%)', background: '{blue.50}',
borderColor: '{blue.200}', borderColor: '{blue.200}',
color: '{blue.600}', color: '{blue.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', shadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
closeButton: { closeButton: {
hoverBackground: '{blue.100}', hoverBackground: '{blue.100}',
focusRing: { focusRing: {
@ -54,11 +54,11 @@ export default {
} }
}, },
success: { success: {
background: 'color-mix(in srgb, {green.50}, transparent 5%)', background: '{green.50}',
borderColor: '{green.200}', borderColor: '{green.200}',
color: '{green.600}', color: '{green.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', shadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
closeButton: { closeButton: {
hoverBackground: '{green.100}', hoverBackground: '{green.100}',
focusRing: { focusRing: {
@ -68,11 +68,11 @@ export default {
} }
}, },
warn: { warn: {
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', background: '{yellow.50}',
borderColor: '{yellow.200}', borderColor: '{yellow.200}',
color: '{yellow.600}', color: '{yellow.900}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', shadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
closeButton: { closeButton: {
hoverBackground: '{yellow.100}', hoverBackground: '{yellow.100}',
focusRing: { focusRing: {
@ -82,11 +82,11 @@ export default {
} }
}, },
error: { error: {
background: 'color-mix(in srgb, {red.50}, transparent 5%)', background: '{red.50}',
borderColor: '{red.200}', borderColor: '{red.200}',
color: '{red.600}', color: '{red.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', shadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
closeButton: { closeButton: {
hoverBackground: '{red.100}', hoverBackground: '{red.100}',
focusRing: { focusRing: {
@ -100,7 +100,7 @@ export default {
borderColor: '{surface.200}', borderColor: '{surface.200}',
color: '{surface.600}', color: '{surface.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', shadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
closeButton: { closeButton: {
hoverBackground: '{surface.200}', hoverBackground: '{surface.200}',
focusRing: { focusRing: {
@ -114,7 +114,7 @@ export default {
borderColor: '{surface.950}', borderColor: '{surface.950}',
color: '{surface.50}', color: '{surface.50}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', shadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
closeButton: { closeButton: {
hoverBackground: '{surface.800}', hoverBackground: '{surface.800}',
focusRing: { focusRing: {
@ -127,11 +127,11 @@ export default {
dark: { dark: {
blur: '10px', blur: '10px',
info: { info: {
background: 'color-mix(in srgb, {blue.500}, transparent 84%)', background: 'color-mix(in srgb, {blue.500}, transparent 36%)',
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
color: '{blue.500}', color: '{surface.0}',
detailColor: '{surface.0}', detailColor: '{blue.100}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', shadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -141,11 +141,11 @@ export default {
} }
}, },
success: { success: {
background: 'color-mix(in srgb, {green.500}, transparent 84%)', background: 'color-mix(in srgb, {green.500}, transparent 36%)',
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
color: '{green.500}', color: '{surface.0}',
detailColor: '{surface.0}', detailColor: '{green.100}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', shadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -155,11 +155,11 @@ export default {
} }
}, },
warn: { warn: {
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', background: 'color-mix(in srgb, {yellow.500}, transparent 36%)',
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
color: '{yellow.500}', color: '{surface.0}',
detailColor: '{surface.0}', detailColor: '{yellow.50}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', shadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -169,11 +169,11 @@ export default {
} }
}, },
error: { error: {
background: 'color-mix(in srgb, {red.500}, transparent 84%)', background: 'color-mix(in srgb, {red.500}, transparent 36%)',
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
color: '{red.500}', color: '{surface.0}',
detailColor: '{surface.0}', detailColor: '{red.100}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', shadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
closeButton: { closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)', hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: { focusRing: {
@ -187,7 +187,7 @@ export default {
borderColor: '{surface.700}', borderColor: '{surface.700}',
color: '{surface.300}', color: '{surface.300}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', shadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
closeButton: { closeButton: {
hoverBackground: '{surface.700}', hoverBackground: '{surface.700}',
focusRing: { focusRing: {
@ -201,7 +201,7 @@ export default {
borderColor: '{surface.100}', borderColor: '{surface.100}',
color: '{surface.950}', color: '{surface.950}',
detailColor: '{surface.950}', detailColor: '{surface.950}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', shadow: '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
closeButton: { closeButton: {
hoverBackground: '{surface.100}', hoverBackground: '{surface.100}',
focusRing: { focusRing: {