diff --git a/components/lib/message/style/MessageStyle.js b/components/lib/message/style/MessageStyle.js index 065df5cd5..4eb04adda 100644 --- a/components/lib/message/style/MessageStyle.js +++ b/components/lib/message/style/MessageStyle.js @@ -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')}; } diff --git a/components/lib/themes/aura/message/index.js b/components/lib/themes/aura/message/index.js index 10f3a8e72..e1edd1294 100644 --- a/components/lib/themes/aura/message/index.js +++ b/components/lib/themes/aura/message/index.js @@ -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', diff --git a/components/lib/themes/aura/toast/index.js b/components/lib/themes/aura/toast/index.js index b52529037..58ad3513a 100644 --- a/components/lib/themes/aura/toast/index.js +++ b/components/lib/themes/aura/toast/index.js @@ -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' diff --git a/components/lib/themes/lara/inlinemessage/index.js b/components/lib/themes/lara/inlinemessage/index.js index 5318c9dc6..133bde08a 100644 --- a/components/lib/themes/lara/inlinemessage/index.js +++ b/components/lib/themes/lara/inlinemessage/index.js @@ -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' } diff --git a/components/lib/themes/lara/message/index.js b/components/lib/themes/lara/message/index.js index d9ec35f69..57ce7849c 100644 --- a/components/lib/themes/lara/message/index.js +++ b/components/lib/themes/lara/message/index.js @@ -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: { diff --git a/components/lib/themes/lara/toast/index.js b/components/lib/themes/lara/toast/index.js index 696e19af0..92581903f 100644 --- a/components/lib/themes/lara/toast/index.js +++ b/components/lib/themes/lara/toast/index.js @@ -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}', diff --git a/components/lib/toast/style/ToastStyle.js b/components/lib/toast/style/ToastStyle.js index 22756583f..f24818447 100644 --- a/components/lib/toast/style/ToastStyle.js +++ b/components/lib/toast/style/ToastStyle.js @@ -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')}; }