refactor(chat)!: replace generic message color properties with new ones

packages/theming/sass/themes/components/chat/_chat-theme.scss

@@ -16,18 +16,22 @@
 ///
 /// PRIMARY TOKENS:
 /// - `$header-background` — The background color of the chat header.
-/// - `$message-background` — The background color of message bubbles.
+/// - `$sent-message-background` — The background color for sent messages.
+/// - `$received-message-background` — The background color for received messages.
 ///
 /// Derived colors are auto-calculated for contrast.
 ///
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Color} $background [null] - The background color of the chat component.
-/// @param {Color} $header-background [null] - The background color of the chat header. PRIMARY - derives header-color.
+/// @param {Color} $header-background [null] - The background color of the chat header.
 /// @param {Color} $header-color [null] - The text color of the chat header. Auto-derived from header-background.
 /// @param {Color} $header-border [null] - The color used for the chat header border.
-/// @param {Color} $message-background [null] - The background color of the sent message bubble. PRIMARY - derives message-color, message-actions-color.
-/// @param {Color} $message-color [null] - The text color of the chat messages. Auto-derived from message-background.
-/// @param {Color} $message-actions-color [null] - The icon color of the chat message actions. Auto-derived from message-color.
+/// @param {Color} $sent-message-background [null] - The background color for sent messages.
+/// @param {Color} $sent-message-color [null] - The text color of the chat messages. Auto-derived from sent-message-background.
+/// @param {Color} $received-message-background [null] - The background color for received messages.
+/// @param {Color} $received-message-color [null] - The text color for received messages. Auto-derived from received-message-background.
+/// @param {Color} $message-actions-color [null] - The icon color of the chat received message actions. Auto-derived from received-message-color.
+/// @param {Number} $message-border-radius [null] - The border radius of the chat messages.
 /// @param {Color} $file-background [null] - The background color of the image message container.
 /// @param {Color} $file-icon-color [null] - The color of the attached file icon.
 /// @param {Color} $file-icon-accent-color [null] - The accent color of the attached file icon.
@@ -53,9 +57,14 @@
     $header-color: null,
     $header-border: null,
 
-    $message-background: null,
-    $message-color: null,
+    $sent-message-background: null,
+    $sent-message-color: null,
+
+    $received-message-background: null,
+    $received-message-color: null,
+
     $message-actions-color: null,
+    $message-border-radius: null,
 
     $file-background: null,
     $file-icon-color: null,
@@ -87,12 +96,16 @@
         $header-color: adaptive-contrast(var(--header-background));
     }
 
-    @if not($message-color) and $message-background {
-        $message-color: adaptive-contrast(var(--message-background));
+    @if not($sent-message-color) and $sent-message-background {
+        $sent-message-color: adaptive-contrast(var(--sent-message-background));
+    }
+
+    @if not($received-message-color) and $received-message-background {
+        $received-message-color: adaptive-contrast(var(--received-message-background));
     }
 
-    @if not($message-actions-color) and $message-background {
-        $message-actions-color: adaptive-contrast(var(--message-color));
+    @if not($message-actions-color) and $received-message-background {
+        $message-actions-color: adaptive-contrast(var(--received-message-color));
     }
 
     @return extend(
@@ -105,9 +118,14 @@
             header-color: $header-color,
             header-border: $header-border,
 
-            message-background: $message-background,
-            message-color: $message-color,
+            sent-message-background: $sent-message-background,
+            sent-message-color: $sent-message-color,
+
+            received-message-background: $received-message-background,
+            received-message-color: $received-message-color,
+
             message-actions-color: $message-actions-color,
+            message-border-radius: $message-border-radius,
 
             file-background: $file-background,
             file-icon-color: $file-icon-color,

packages/theming/sass/themes/schemas/components/light/_chat.scss

@@ -13,8 +13,10 @@
 /// @prop {Map} header-background [color: ('surface', 500)] - The background color of the chat header.
 /// @prop {Map} header-color [contrast-color: ('surface', 500)] - The text color of the chat header.
 /// @prop {Color} header-border [transparent] - The color used for the chat header border.
-/// @prop {Map} message-background [color: ('gray', 200)] - The background color of the sent message bubble.
-/// @prop {Map} message-color [color: ('gray', 800)] - The text color of the chat messages.
+/// @prop {Map} sent-message-background [color: ('gray', 200)] - The background color for sent messages.
+/// @prop {Map} sent-message-color [color: ('gray', 800)] - The text color for sent messages.
+/// @prop {Map} received-message-background [transparent] - The background color for received messages.
+/// @prop {Map} received-message-color [color: ('gray', 800)] - The text color for received messages.
 /// @prop {Map} message-actions-color [color: ('gray', 700)] - The icon color of the chat message actions.
 /// @prop {Map} file-background [contrast-color: ('gray', 900)] - The background color of the image message container.
 /// @prop {Map} file-icon-color [color: ('gray', 500)] - The color of the attached file icon.
@@ -50,13 +52,20 @@ $light-chat: (
             'transparent',
         ),
     ),
-    message-background: (
+    sent-message-background: (
         color: (
             'gray',
             200,
         ),
     ),
-    message-color: (
+    sent-message-color: (
+        color: (
+            'gray',
+            800,
+        ),
+    ),
+    received-message-background: transparent,
+    received-message-color: (
         color: (
             'gray',
             800,
@@ -128,6 +137,11 @@ $light-chat: (
             300,
         ),
     ),
+    typography: (
+        message: (
+            value: 'body-1',
+        ),
+    ),
     _meta: (
         'name': 'chat',
         'variant': 'light',
@@ -136,10 +150,18 @@ $light-chat: (
 
 /// Generates a light material chat schema.
 /// @type Map
+/// @prop {List} message-border-radius [border-radius: (rem(24px), rem(0), rem(24px))] - The border radius applied to chat messages.
 /// @requires $light-chat
 $material-chat: extend(
     $light-chat,
     (
+        message-border-radius: (
+            border-radius: (
+                rem(24px),
+                rem(0),
+                rem(24px),
+            ),
+        ),
         _meta: (
             theme: 'material',
         ),
@@ -151,6 +173,7 @@ $material-chat: extend(
 /// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the chat component.
 /// @prop {Map} header-color [color: ('gray', 900)] - The text color of the chat header.
 /// @prop {Map} message-actions-color [color: ('primary', 500)] - The icon color of the chat message actions.
+/// @prop {List} message-border-radius [border-radius: (rem(24px), rem(0), rem(24px))] - The border radius applied to chat messages.
 /// @requires $light-chat
 $fluent-chat: extend(
     $light-chat,
@@ -173,6 +196,13 @@ $fluent-chat: extend(
                 500,
             ),
         ),
+        message-border-radius: (
+            border-radius: (
+                rem(24px),
+                rem(0),
+                rem(24px),
+            ),
+        ),
         _meta: (
             theme: 'fluent',
         ),
@@ -184,6 +214,7 @@ $fluent-chat: extend(
 /// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the chat component.
 /// @prop {Map} header-border [color: ('gray', 300)] - The color used for the chat header border.
 /// @prop {Map} code-border [color: ('gray', 400)] - The border color of the code snippets in the chat component.
+/// @prop {List} message-border-radius [border-radius: (rem(8px), rem(0), rem(24px))] - The border radius applied to chat messages.
 /// @requires $light-chat
 $bootstrap-chat: extend(
     $light-chat,
@@ -206,6 +237,13 @@ $bootstrap-chat: extend(
                 400,
             ),
         ),
+        message-border-radius: (
+            border-radius: (
+                rem(8px),
+                rem(0),
+                rem(24px),
+            ),
+        ),
         _meta: (
             theme: 'bootstrap',
         ),
@@ -218,6 +256,7 @@ $bootstrap-chat: extend(
 /// @prop {Map} header-border [color: ('primary', 500)] - The color used for the chat header border.
 /// @prop {Map} file-background [color: ('gray', 100)] - The background color of the image message container.
 /// @prop {Map} message-actions-color [color: ('gray', 600)] - The icon color of the chat message actions.
+/// @prop {List} message-border-radius [border-radius: (rem(8px), rem(0), rem(24px))] - The border radius applied to chat messages.
 /// @prop {Map} progress-indicator-color [color: ('info', 500)] - The color of the progress indicator in the chat component.
 /// @prop {Map} image-attachment-icon [color: ('info', 500)] - The color of the message attachment icon.
 /// @prop {Map} code-border [color: ('gray', 400)] - The border color of the code snippets in the chat component.
@@ -249,6 +288,13 @@ $indigo-chat: extend(
                 600,
             ),
         ),
+        message-border-radius: (
+            border-radius: (
+                rem(8px),
+                rem(0),
+                rem(24px),
+            ),
+        ),
         progress-indicator-color: (
             color: (
                 'info',