From c511eff7196cc4656bb07dee4378229c03d5e5c7 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 9 May 2024 18:48:00 +0300
Subject: [PATCH] Message design for Lara

---
 components/lib/message/style/MessageStyle.js  | 14 ++++++-----
 components/lib/themes/aura/message/index.js   |  3 ++-
 components/lib/themes/aura/toast/index.js     |  3 ++-
 .../lib/themes/lara/inlinemessage/index.js    | 24 +++++++++----------
 components/lib/themes/lara/message/index.js   | 17 ++++++-------
 components/lib/themes/lara/toast/index.js     | 15 ++++++------
 components/lib/toast/style/ToastStyle.js      | 14 ++++++-----
 7 files changed, 49 insertions(+), 41 deletions(-)

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')};
 }