igniteui-theming 25.2.0 → 26.0.0

package/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',

package/sass/themes/schemas/components/light/_progress.scss

@@ -237,7 +237,7 @@ $indigo-progress-linear: extend(
 
 /// Generates a base light progress-circular schema.
 /// @type Map
-/// @prop {Map} base-circle-color [color: ('gray', 300)] - The base circle fill color.
+/// @prop {Map} track-color [color: ('gray', 300)] - The base circle fill color.
 /// @prop {Map} fill-color-default [color: ('primary', 500)] - The progress circle default fill color.
 /// @prop {Map} fill-color-danger [color: ('error')] - The progress circle danger fill color.
 /// @prop {Map} fill-color-warning [color: ('warn')] - The progress circle warning fill color.
@@ -248,7 +248,7 @@ $indigo-progress-linear: extend(
 /// @prop {List} track-border-radius [rem(0)] - The border radius used for the progress bar track.
 $light-progress-circular: extend(
     (
-        base-circle-color: (
+        track-color: (
             color: (
                 'gray',
                 300,
@@ -342,7 +342,7 @@ $bootstrap-progress-circular: extend(
 
 /// Generates an indigo progress-circular schema.
 /// @type Map
-/// @prop {Map} base-circle-color [color: ('gray', 900, .15)] - The base circle fill color.
+/// @prop {Map} track-color [color: ('gray', 900, .15)] - The base circle fill color.
 /// @prop {Map} fill-color-default [color: ('primary', 400)] - The track default fill color.
 /// @prop {Map} fill-color-danger [color: ('error', 400)] - The track danger fill color.
 /// @prop {Map} fill-color-warning [color: ('warn', 400)] - The track warning fill color.
@@ -353,7 +353,7 @@ $bootstrap-progress-circular: extend(
 $indigo-progress-circular: extend(
     $light-progress-circular,
     (
-        base-circle-color: (
+        track-color: (
             color: (
                 'gray',
                 900,