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

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

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

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

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

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

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

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

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

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

@ -1,7 +1,8 @@
export default { export default {
root: { root: {
width: '25rem', width: '25rem',
borderRadius: '{content.border.radius}' borderRadius: '{content.border.radius}',
borderWidth: '0 0 0 6px'
}, },
icon: { icon: {
size: '1.25rem' size: '1.25rem'
@ -39,7 +40,7 @@ export default {
blur: '1.5px', blur: '1.5px',
info: { info: {
background: 'color-mix(in srgb, {blue.50}, transparent 5%)', background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
borderColor: '{blue.200}', borderColor: '{blue.500}',
color: '{blue.600}', color: '{blue.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '{overlay.popover.shadow}', shadow: '{overlay.popover.shadow}',
@ -53,7 +54,7 @@ export default {
}, },
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.500}',
color: '{green.600}', color: '{green.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '{overlay.popover.shadow}', shadow: '{overlay.popover.shadow}',
@ -67,7 +68,7 @@ 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.500}',
color: '{yellow.600}', color: '{yellow.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '{overlay.popover.shadow}', shadow: '{overlay.popover.shadow}',
@ -81,7 +82,7 @@ export default {
}, },
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.500}',
color: '{red.600}', color: '{red.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '{overlay.popover.shadow}', shadow: '{overlay.popover.shadow}',
@ -95,7 +96,7 @@ export default {
}, },
secondary: { secondary: {
background: '{surface.100}', background: '{surface.100}',
borderColor: '{surface.200}', borderColor: '{surface.500}',
color: '{surface.600}', color: '{surface.600}',
detailColor: '{surface.700}', detailColor: '{surface.700}',
shadow: '{overlay.popover.shadow}', shadow: '{overlay.popover.shadow}',
@ -109,7 +110,7 @@ export default {
}, },
contrast: { contrast: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.950}', borderColor: '{primary.color}',
color: '{surface.50}', color: '{surface.50}',
detailColor: '{surface.0}', detailColor: '{surface.0}',
shadow: '{overlay.popover.shadow}', 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')}); backdrop-filter: blur(${dt('toast.blur')});
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
border-radius: ${dt('toast.border.radius')}; border-radius: ${dt('toast.border.radius')};
border-width: ${dt('toast.border.width')};
border-style: solid;
} }
.p-toast-message-icon { .p-toast-message-icon {
@ -79,7 +81,7 @@ const theme = ({ dt }) => `
.p-toast-message-info { .p-toast-message-info {
background: ${dt('toast.info.background')}; 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')}; color: ${dt('toast.info.color')};
box-shadow: ${dt('toast.info.shadow')}; box-shadow: ${dt('toast.info.shadow')};
} }
@ -99,7 +101,7 @@ const theme = ({ dt }) => `
.p-toast-message-success { .p-toast-message-success {
background: ${dt('toast.success.background')}; 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')}; color: ${dt('toast.success.color')};
box-shadow: ${dt('toast.success.shadow')}; box-shadow: ${dt('toast.success.shadow')};
} }
@ -119,7 +121,7 @@ const theme = ({ dt }) => `
.p-toast-message-warn { .p-toast-message-warn {
background: ${dt('toast.warn.background')}; 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')}; color: ${dt('toast.warn.color')};
box-shadow: ${dt('toast.warn.shadow')}; box-shadow: ${dt('toast.warn.shadow')};
} }
@ -139,7 +141,7 @@ const theme = ({ dt }) => `
.p-toast-message-error { .p-toast-message-error {
background: ${dt('toast.error.background')}; 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')}; color: ${dt('toast.error.color')};
box-shadow: ${dt('toast.error.shadow')}; box-shadow: ${dt('toast.error.shadow')};
} }
@ -159,7 +161,7 @@ const theme = ({ dt }) => `
.p-toast-message-secondary { .p-toast-message-secondary {
background: ${dt('toast.secondary.background')}; 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')}; color: ${dt('toast.secondary.color')};
box-shadow: ${dt('toast.secondary.shadow')}; box-shadow: ${dt('toast.secondary.shadow')};
} }
@ -179,7 +181,7 @@ const theme = ({ dt }) => `
.p-toast-message-contrast { .p-toast-message-contrast {
background: ${dt('toast.contrast.background')}; 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')}; color: ${dt('toast.contrast.color')};
box-shadow: ${dt('toast.contrast.shadow')}; box-shadow: ${dt('toast.contrast.shadow')};
} }