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

Message design for Lara

pull/5756/head
Cagatay Civici 2024-05-09 18:48:00 +03:00
parent d2101b6829
commit c511eff719
7 changed files with 49 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,8 @@ const theme = ({ dt }) => `
.p-message {
margin: ${dt('message.margin')};
border-radius: ${dt('message.border.radius')};
border-width: ${dt('message.border.width')};
border-style: solid;
}
.p-message-content {
@ -52,7 +54,7 @@ const theme = ({ dt }) => `
.p-message-info {
background: ${dt('message.info.background')};
border: 1px solid ${dt('message.info.border.color')};
border-color: ${dt('message.info.border.color')};
color: ${dt('message.info.color')};
box-shadow: ${dt('message.info.shadow')};
}
@ -68,7 +70,7 @@ const theme = ({ dt }) => `
.p-message-success {
background: ${dt('message.success.background')};
border: 1px solid ${dt('message.success.border.color')};
border-color: ${dt('message.success.border.color')};
color: ${dt('message.success.color')};
box-shadow: ${dt('message.success.shadow')};
}
@ -84,7 +86,7 @@ const theme = ({ dt }) => `
.p-message-warn {
background: ${dt('message.warn.background')};
border: 1px solid ${dt('message.warn.border.color')};
border-color: ${dt('message.warn.border.color')};
color: ${dt('message.warn.color')};
box-shadow: ${dt('message.warn.shadow')};
}
@ -100,7 +102,7 @@ const theme = ({ dt }) => `
.p-message-error {
background: ${dt('message.error.background')};
border: 1px solid ${dt('message.error.border.color')};
border-color: ${dt('message.error.border.color')};
color: ${dt('message.error.color')};
box-shadow: ${dt('message.error.shadow')};
}
@ -116,7 +118,7 @@ const theme = ({ dt }) => `
.p-message-secondary {
background: ${dt('message.secondary.background')};
border: 1px solid ${dt('message.secondary.border.color')};
border-color: ${dt('message.secondary.border.color')};
color: ${dt('message.secondary.color')};
box-shadow: ${dt('message.secondary.shadow')};
}
@ -132,7 +134,7 @@ const theme = ({ dt }) => `
.p-message-contrast {
background: ${dt('message.contrast.background')};
border: 1px solid ${dt('message.contrast.border.color')};
border-color: ${dt('message.contrast.border.color')};
color: ${dt('message.contrast.color')};
box-shadow: ${dt('message.contrast.shadow')};
}

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

@ -1,7 +1,8 @@
export default {
root: {
margin: '1rem 0',
borderRadius: '{content.border.radius}'
borderRadius: '{content.border.radius}',
borderWidth: '1px',
},
content: {
padding: '0.5rem 0.75rem',

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

@ -1,7 +1,8 @@
export default {
root: {
width: '25rem',
borderRadius: '{content.border.radius}'
borderRadius: '{content.border.radius}',
borderWidth: '0 0 0 6px'
},
icon: {
size: '1.125rem'

24
components/lib/themes/lara/inlinemessage/index.js
View File

@ -14,37 +14,37 @@ export default {
light: {
info: {
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
borderColor: '{blue.200}',
borderColor: 'color-mix(in srgb, {blue.50}, transparent 5%)',
color: '{blue.600}',
shadow: 'none'
},
success: {
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
borderColor: '{green.200}',
borderColor: 'color-mix(in srgb, {green.50}, transparent 5%)',
color: '{green.600}',
shadow: 'none'
},
warn: {
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
borderColor: '{yellow.200}',
borderColor: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
color: '{yellow.600}',
shadow: 'none'
},
error: {
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
borderColor: '{red.200}',
borderColor: 'color-mix(in srgb, {red.50}, transparent 5%)',
color: '{red.600}',
shadow: 'none'
},
secondary: {
background: '{surface.100}',
borderColor: '{surface.200}',
borderColor: '{surface.100}',
color: '{surface.600}',
shadow: 'none'
},
contrast: {
background: '{surface.900}',
borderColor: '{surface.950}',
borderColor: '{surface.900}',
color: '{surface.50}',
shadow: 'none'
}
@ -52,37 +52,37 @@ export default {
dark: {
info: {
background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
borderColor: 'color-mix(in srgb, {blue.500}, transparent 84%)',
color: '{blue.500}',
shadow: 'none'
},
success: {
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
borderColor: 'color-mix(in srgb, {green.500}, transparent 84%)',
color: '{green.500}',
shadow: 'none'
},
warn: {
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
borderColor: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
color: '{yellow.500}',
shadow: 'none'
},
error: {
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
borderColor: 'color-mix(in srgb, {red.500}, transparent 84%)',
color: '{red.500}',
shadow: 'none'
},
secondary: {
background: '{surface.800}',
borderColor: '{surface.700}',
borderColor: '{surface.800}',
color: '{surface.300}',
shadow: 'none'
},
contrast: {
background: '{surface.0}',
borderColor: '{surface.100}',
borderColor: '{surface.0}',
color: '{surface.950}',
shadow: 'none'
}

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

@ -1,7 +1,8 @@
export default {
root: {
margin: '1.125rem 0',
borderRadius: '{content.border.radius}'
borderRadius: '{content.border.radius}',
borderWidth: '0 0 0 6px'
},
content: {
padding: '0.75rem 1rem',
@ -31,7 +32,7 @@ export default {
light: {
info: {
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
borderColor: '{blue.200}',
borderColor: '{blue.500}',
color: '{blue.600}',
shadow: 'none',
closeButton: {
@ -44,7 +45,7 @@ export default {
},
success: {
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
borderColor: '{green.200}',
borderColor: '{green.500}',
color: '{green.600}',
shadow: 'none',
closeButton: {
@ -57,7 +58,7 @@ export default {
},
warn: {
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
borderColor: '{yellow.200}',
borderColor: '{yellow.500}',
color: '{yellow.600}',
shadow: 'none',
closeButton: {
@ -70,7 +71,7 @@ export default {
},
error: {
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
borderColor: '{red.200}',
borderColor: '{red.500}',
color: '{red.600}',
shadow: 'none',
closeButton: {
@ -83,7 +84,7 @@ export default {
},
secondary: {
background: '{surface.100}',
borderColor: '{surface.200}',
borderColor: '{surface.500}',
color: '{surface.600}',
shadow: 'none',
closeButton: {
@ -96,7 +97,7 @@ export default {
},
contrast: {
background: '{surface.900}',
borderColor: '{surface.950}',
borderColor: '{primary.color}',
color: '{surface.50}',
shadow: 'none',
closeButton: {
@ -176,7 +177,7 @@ export default {
},
contrast: {
background: '{surface.0}',
borderColor: '{surface.100}',
borderColor: '{primary.color}',
color: '{surface.950}',
shadow: 'none',
closeButton: {

15
components/lib/themes/lara/toast/index.js
View File

@ -1,7 +1,8 @@
export default {
root: {
width: '25rem',
borderRadius: '{content.border.radius}'
borderRadius: '{content.border.radius}',
borderWidth: '0 0 0 6px'
},
icon: {
size: '1.25rem'
@ -39,7 +40,7 @@ export default {
blur: '1.5px',
info: {
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
borderColor: '{blue.200}',
borderColor: '{blue.500}',
color: '{blue.600}',
detailColor: '{surface.700}',
shadow: '{overlay.popover.shadow}',
@ -53,7 +54,7 @@ export default {
},
success: {
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
borderColor: '{green.200}',
borderColor: '{green.500}',
color: '{green.600}',
detailColor: '{surface.700}',
shadow: '{overlay.popover.shadow}',
@ -67,7 +68,7 @@ export default {
},
warn: {
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
borderColor: '{yellow.200}',
borderColor: '{yellow.500}',
color: '{yellow.600}',
detailColor: '{surface.700}',
shadow: '{overlay.popover.shadow}',
@ -81,7 +82,7 @@ export default {
},
error: {
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
borderColor: '{red.200}',
borderColor: '{red.500}',
color: '{red.600}',
detailColor: '{surface.700}',
shadow: '{overlay.popover.shadow}',
@ -95,7 +96,7 @@ export default {
},
secondary: {
background: '{surface.100}',
borderColor: '{surface.200}',
borderColor: '{surface.500}',
color: '{surface.600}',
detailColor: '{surface.700}',
shadow: '{overlay.popover.shadow}',
@ -109,7 +110,7 @@ export default {
},
contrast: {
background: '{surface.900}',
borderColor: '{surface.950}',
borderColor: '{primary.color}',
color: '{surface.50}',
detailColor: '{surface.0}',
shadow: '{overlay.popover.shadow}',

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

@ -11,6 +11,8 @@ const theme = ({ dt }) => `
backdrop-filter: blur(${dt('toast.blur')});
margin: 0 0 1rem 0;
border-radius: ${dt('toast.border.radius')};
border-width: ${dt('toast.border.width')};
border-style: solid;
}
.p-toast-message-icon {
@ -79,7 +81,7 @@ const theme = ({ dt }) => `
.p-toast-message-info {
background: ${dt('toast.info.background')};
border: 1px solid ${dt('toast.info.border.color')};
border-color: ${dt('toast.info.border.color')};
color: ${dt('toast.info.color')};
box-shadow: ${dt('toast.info.shadow')};
}
@ -99,7 +101,7 @@ const theme = ({ dt }) => `
.p-toast-message-success {
background: ${dt('toast.success.background')};
border: 1px solid ${dt('toast.success.border.color')};
border-color: ${dt('toast.success.border.color')};
color: ${dt('toast.success.color')};
box-shadow: ${dt('toast.success.shadow')};
}
@ -119,7 +121,7 @@ const theme = ({ dt }) => `
.p-toast-message-warn {
background: ${dt('toast.warn.background')};
border: 1px solid ${dt('toast.warn.border.color')};
border-color: ${dt('toast.warn.border.color')};
color: ${dt('toast.warn.color')};
box-shadow: ${dt('toast.warn.shadow')};
}
@ -139,7 +141,7 @@ const theme = ({ dt }) => `
.p-toast-message-error {
background: ${dt('toast.error.background')};
border: 1px solid ${dt('toast.error.border.color')};
border-color: ${dt('toast.error.border.color')};
color: ${dt('toast.error.color')};
box-shadow: ${dt('toast.error.shadow')};
}
@ -159,7 +161,7 @@ const theme = ({ dt }) => `
.p-toast-message-secondary {
background: ${dt('toast.secondary.background')};
border: 1px solid ${dt('toast.secondary.border.color')};
border-color: ${dt('toast.secondary.border.color')};
color: ${dt('toast.secondary.color')};
box-shadow: ${dt('toast.secondary.shadow')};
}
@ -179,7 +181,7 @@ const theme = ({ dt }) => `
.p-toast-message-contrast {
background: ${dt('toast.contrast.background')};
border: 1px solid ${dt('toast.contrast.border.color')};
border-color: ${dt('toast.contrast.border.color')};
color: ${dt('toast.contrast.color')};
box-shadow: ${dt('toast.contrast.shadow')};
}