devextreme-themebuilder 24.2.2-beta → 24.2.3

package/data/metadata/dx-theme-builder-metadata.js

@@ -215,82 +215,92 @@ exports.metadata = {
         },
         {
             'Key': '$chat-avatar-color',
-            'Name': '30. Avatar text color',
+            'Name': '30. Text color',
             'Type': 'color'
         },
         {
             'Key': '$chat-avatar-background-color',
-            'Name': '31. Avatar background color',
+            'Name': '31. Background color',
             'Type': 'color'
         },
         {
             'Key': '$chat-bubble-color-primary',
-            'Name': '40. Bubble text color',
+            'Name': '40. Text color (sent messages)',
             'Type': 'color'
         },
         {
             'Key': '$chat-bubble-background-color-primary',
-            'Name': '41. Bubble background color (your messages)',
+            'Name': '41. Background color (sent messages)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-bubble-color-secondary',
+            'Name': '42. Text color (received messages)',
             'Type': 'color'
         },
         {
             'Key': '$chat-bubble-background-color-secondary',
-            'Name': '42. Bubble background color (other messages)',
+            'Name': '43. Background color (received messages)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-information-author-name-color',
+            'Name': '50. User name color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-information-color',
-            'Name': '50. Message caption color',
+            'Key': '$chat-information-timestamp-color',
+            'Name': '51. Timestamp color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-day-header-color',
-            'Name': '60. Day header color',
+            'Name': '52. Day header color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-alertlist-color',
+            'Name': '55. Alert color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-empty-icon-color',
-            'Name': '61. Empty list icon color',
+            'Name': '65. Icon color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-empty-icon-background-color',
-            'Name': '62. Empty list icon background color',
+            'Name': '66. Icon background color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-empty-message-color',
-            'Name': '63. Empty list message color',
+            'Name': '67. Title color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-empty-prompt-color',
-            'Name': '64. Empty list prompt color',
+            'Name': '68. Subtitle color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-alertlist-color',
-            'Name': '70. Error color',
+            'Key': '$chat-typingindicator-color',
+            'Name': '80. Text color',
             'Type': 'color'
         },
         {
             'Key': '$chat-typingindicator-circle-bg-color-center',
-            'Name': '82. Typing indicator central circle color',
+            'Name': '82. Central circle color',
             'Type': 'color'
         },
         {
             'Key': '$chat-typingindicator-circle-bg-color',
-            'Name': '83. Typing indicator outer circles color',
-            'Type': 'color'
-        },
-        {
-            'Key': '$chat-typingindicator-color',
-            'Name': '80. Typing indicator text color',
+            'Name': '83. Outer circles color',
             'Type': 'color'
         },
         {
             'Key': '$chat-typingindicator-bubble-bg-color',
-            'Name': '81. Typing indicator background color',
+            'Name': '81. Background color',
             'Type': 'color'
         },
         {
@@ -1368,82 +1378,92 @@ exports.metadata = {
         },
         {
             'Key': '$chat-avatar-color',
-            'Name': '30. Avatar text color',
+            'Name': '30. Text color',
             'Type': 'color'
         },
         {
             'Key': '$chat-avatar-background-color',
-            'Name': '31. Avatar background color',
+            'Name': '31. Background color',
             'Type': 'color'
         },
         {
             'Key': '$chat-bubble-color-primary',
-            'Name': '40. Bubble text color',
+            'Name': '40. Text color (sent messages)',
             'Type': 'color'
         },
         {
             'Key': '$chat-bubble-background-color-primary',
-            'Name': '41. Bubble background color (your messages)',
+            'Name': '41. Background color (sent messages)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-bubble-color-secondary',
+            'Name': '42. Text color (received messages)',
             'Type': 'color'
         },
         {
             'Key': '$chat-bubble-background-color-secondary',
-            'Name': '42. Bubble background color (other messages)',
+            'Name': '43. Background color (received messages)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-information-author-name-color',
+            'Name': '50. User name color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-information-color',
-            'Name': '50. Message caption color',
+            'Key': '$chat-information-timestamp-color',
+            'Name': '51. Timestamp color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-day-header-color',
-            'Name': '60. Day header color',
+            'Name': '52. Day header color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-alertlist-color',
+            'Name': '55. Alert color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-empty-icon-color',
-            'Name': '61. Empty list icon color',
+            'Name': '65. Icon color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-empty-icon-background-color',
-            'Name': '62. Empty list icon background color',
+            'Name': '66. Icon background color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-empty-message-color',
-            'Name': '63. Empty list message color',
+            'Name': '67. Title color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-empty-prompt-color',
-            'Name': '64. Empty list prompt color',
-            'Type': 'color'
-        },
-        {
-            'Key': '$chat-alertlist-color',
-            'Name': '70. Error color',
+            'Name': '68. Subtitle color',
             'Type': 'color'
         },
         {
             'Key': '$chat-typingindicator-color',
-            'Name': '80. Typing indicator text color',
+            'Name': '80. Text color',
             'Type': 'color'
         },
         {
             'Key': '$chat-typingindicator-bubble-bg-color',
-            'Name': '81. Typing indicator background color',
+            'Name': '81. Background color',
             'Type': 'color'
         },
         {
             'Key': '$chat-typingindicator-circle-bg-color-center',
-            'Name': '82. Typing indicator central circle color',
+            'Name': '82. Central circle color',
             'Type': 'color'
         },
         {
             'Key': '$chat-typingindicator-circle-bg-color',
-            'Name': '83. Typing indicator outer circles color',
+            'Name': '83. Outer circles color',
             'Type': 'color'
         },
         {
@@ -2376,82 +2396,92 @@ exports.metadata = {
         },
         {
             'Key': '$chat-avatar-color',
-            'Name': '30. Avatar text color',
+            'Name': '30. Text color',
             'Type': 'color'
         },
         {
             'Key': '$chat-avatar-background-color',
-            'Name': '31. Avatar background color',
+            'Name': '31. Background color',
             'Type': 'color'
         },
         {
             'Key': '$chat-bubble-color-primary',
-            'Name': '40. Bubble text color',
+            'Name': '40. Text color (sent messages)',
             'Type': 'color'
         },
         {
             'Key': '$chat-bubble-background-color-primary',
-            'Name': '41. Bubble background color (your messages)',
+            'Name': '41. Background color (sent messages)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-bubble-color-secondary',
+            'Name': '42. Text color (received messages)',
             'Type': 'color'
         },
         {
             'Key': '$chat-bubble-background-color-secondary',
-            'Name': '42. Bubble background color (other messages)',
+            'Name': '43. Background color (received messages)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-information-author-name-color',
+            'Name': '50. User name color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-information-color',
-            'Name': '50. Message caption color',
+            'Key': '$chat-information-timestamp-color',
+            'Name': '51. Timestamp color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-day-header-color',
-            'Name': '60. Day header color',
+            'Name': '52. Day header color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-alertlist-color',
+            'Name': '55. Alert color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-empty-icon-color',
-            'Name': '61. Empty list icon color',
+            'Name': '65. Icon color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-empty-icon-background-color',
-            'Name': '62. Empty list icon background color',
+            'Name': '66. Icon background color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-empty-message-color',
-            'Name': '63. Empty list message color',
+            'Name': '67. Title color',
             'Type': 'color'
         },
         {
             'Key': '$chat-messagelist-empty-prompt-color',
-            'Name': '64. Empty list prompt color',
-            'Type': 'color'
-        },
-        {
-            'Key': '$chat-alertlist-color',
-            'Name': '70. Error color',
+            'Name': '68. Subtitle color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-typingindicator-bubble-bg-color',
-            'Name': '81. Typing indicator background color',
+            'Key': '$chat-typingindicator-color',
+            'Name': '80. Text color',
             'Type': 'color'
         },
         {
             'Key': '$chat-typingindicator-circle-bg-color-center',
-            'Name': '82. Typing indicator central circle color',
+            'Name': '82. Central circle color',
             'Type': 'color'
         },
         {
             'Key': '$chat-typingindicator-circle-bg-color',
-            'Name': '83. Typing indicator outer circles color',
+            'Name': '83. Outer circles color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-typingindicator-color',
-            'Name': '80. Typing indicator text color',
+            'Key': '$chat-typingindicator-bubble-bg-color',
+            'Name': '81. Background color',
             'Type': 'color'
         },
         {
@@ -3257,7 +3287,7 @@ exports.metadata = {
         }
     ]
 };
-exports.version = '24.2.2-beta';
+exports.version = '24.2.3';
 exports.browsersList = [
     'last 2 versions',
     'ios > 9',

package/data/scss/widgets/base/_gridBase.scss

@@ -625,6 +625,7 @@
   .dx-#{$widget-name}-headers {
     position: relative;
     outline: 0;
+    min-height: 1px;
 
     @include user-select(none);
   }
@@ -1080,7 +1081,7 @@
       border-collapse: separate;
     }
 
-    .dx-focused-fixed-cell {
+    .dx-focused-fixed-element {
       z-index: 3;
     }
 

package/data/scss/widgets/base/chat/layout/chat-avatar/_index.scss

@@ -1,5 +1,6 @@
 .dx-avatar {
   grid-row: 2 / auto;
+  grid-column: 1;
   display: flex;
   align-items: center;
   justify-content: center;

package/data/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss

@@ -1,7 +1,6 @@
 .dx-chat-messagegroup-content {
   display: flex;
   flex-direction: column;
-  max-width: 70%;
 }
 
 .dx-chat-messagebubble {
@@ -25,6 +24,7 @@
 .dx-chat-messagegroup-alignment-end {
   .dx-chat-messagegroup-content {
     align-items: flex-end;
+    max-width: 82.5%;
   }
 
   .dx-chat-messagebubble {

package/data/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss

@@ -1,10 +1,11 @@
 @mixin chat-messagebubble(
   $padding,
   $border-radius,
+  $color-secondary,
   $background-color-secondary,
   $color-primary,
   $background-color-primary,
-  $bubble-container-gap
+  $bubble-container-gap,
 ) {
   .dx-chat-messagegroup-content {
     row-gap: $bubble-container-gap;
@@ -17,6 +18,7 @@
 
   .dx-chat-messagegroup-alignment-start {
     .dx-chat-messagebubble {
+      color: $color-secondary;
       background-color: $background-color-secondary;
 
       &:first-child {

package/data/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss

@@ -24,7 +24,7 @@
   justify-items: start;
 
   .dx-chat-messagegroup-information {
-    grid-column: 2;
+    grid-column: 2 / span 2;
   }
 }
 

package/data/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss

@@ -4,7 +4,8 @@
   $messagegroup-start-gap,
   $messagegroup-padding,
   $information-font-size,
-  $information-color,
+  $information-author-name-color,
+  $information-timestamp-color,
   $information-gap
 ) {
   .dx-chat-messagegroup {
@@ -22,12 +23,19 @@
   
   .dx-chat-messagegroup-alignment-start {
     grid-template-columns: $messagegroup-start-template;
+  }
+
+  .dx-chat-messagegroup-alignment-start:has(.dx-avatar) {
     column-gap: $messagegroup-start-gap;
   }
   
-  .dx-chat-messagegroup-time,
+  .dx-chat-messagegroup-time {
+    font-size: $information-font-size;
+    color: $information-timestamp-color;
+  }
+
   .dx-chat-messagegroup-author-name {
     font-size: $information-font-size;
-    color: $information-color;
+    color: $information-author-name-color;
   }
 }

package/data/scss/widgets/base/chat/layout/chat-messagelist/_index.scss

@@ -19,6 +19,7 @@
     &.dx-scrollable-native-ios {
       .dx-scrollable-content {
         min-height: 100%;
+        box-sizing: border-box;
       }
     }
   }

package/data/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss

@@ -5,6 +5,7 @@
   $day-header-color,
   $day-header-padding-bottom,
   $day-header-first-padding-top,
+  $day-header-font-size,
 ) {
   .dx-chat-messagelist {
     .dx-scrollable-content {
@@ -15,6 +16,7 @@
   .dx-chat-messagelist-day-header {
     padding-bottom: $day-header-padding-bottom;
     color: $day-header-color;
+    font-size: $day-header-font-size;
 
     &:first-child {
       padding-top: $day-header-first-padding-top;

package/data/scss/widgets/base/chat/layout/chat-typingindicator/_index.scss

@@ -14,7 +14,7 @@
 }
 
 .dx-chat-typingindicator-text {
-  grid-column: 2;
+  grid-column: 2 / span 2;
   grid-row: 1;
   max-width: 100%;
 

package/data/scss/widgets/base/chat/layout/chat-typingindicator/_mixins.scss

@@ -2,7 +2,6 @@
   $template,
   $padding,
   $row-gap,
-  $column-gap,
   $font-size,
   $color,
   $bubble-padding-block,
@@ -20,7 +19,6 @@
     grid-template-columns: $template;
     padding-bottom: $padding;
     row-gap: $row-gap;
-    column-gap: $column-gap;
   }
 
   .dx-chat-typingindicator-text {

package/data/scss/widgets/fluent/chat/_colors.scss

@@ -4,18 +4,20 @@ $chat-avatar-color: getCustomVar(("$chat-avatar-color")) !default;
 $chat-avatar-background-color: getCustomVar(("$chat-avatar-background-color")) !default;
 $chat-bubble-color-primary: getCustomVar(("$chat-bubble-color-primary")) !default;
 $chat-bubble-background-color-primary: getCustomVar(("$chat-bubble-background-color-primary")) !default;
+$chat-bubble-color-secondary: getCustomVar(("$chat-bubble-color-secondary")) !default;
 $chat-bubble-background-color-secondary: getCustomVar(("$chat-bubble-background-color-secondary")) !default;
-$chat-information-color: getCustomVar(("$chat-information-color")) !default;
+$chat-information-author-name-color: getCustomVar(("$chat-information-author-name-color")) !default;
+$chat-information-timestamp-color: getCustomVar(("$chat-information-timestamp-color")) !default;
 $chat-messagelist-day-header-color: getCustomVar(("$chat-messagelist-day-header-color")) !default;
+$chat-alertlist-color: getCustomVar(("$chat-alertlist-color")) !default;
 $chat-messagelist-empty-icon-color: getCustomVar(("$chat-messagelist-empty-icon-color")) !default;
 $chat-messagelist-empty-icon-background-color: getCustomVar(("$chat-messagelist-empty-icon-background-color")) !default;
 $chat-messagelist-empty-message-color: getCustomVar(("$chat-messagelist-empty-message-color")) !default;
 $chat-messagelist-empty-prompt-color: getCustomVar(("$chat-messagelist-empty-prompt-color")) !default;
-$chat-alertlist-color: getCustomVar(("$chat-alertlist-color")) !default;
-$chat-typingindicator-bubble-bg-color: getCustomVar(("$chat-typingindicator-bubble-bg-color")) !default;
+$chat-typingindicator-color: getCustomVar(("$chat-typingindicator-color")) !default;
 $chat-typingindicator-circle-bg-color-center: getCustomVar(("$chat-typingindicator-circle-bg-color-center")) !default;
 $chat-typingindicator-circle-bg-color: getCustomVar(("$chat-typingindicator-circle-bg-color")) !default;
-$chat-typingindicator-color: getCustomVar(("$chat-typingindicator-color")) !default;
+$chat-typingindicator-bubble-bg-color: getCustomVar(("$chat-typingindicator-bubble-bg-color")) !default;
 
 @use "sass:color";
 @use "../sizes" as *;
@@ -29,20 +31,25 @@ $chat-avatar-color: $base-text-color !default;
 $chat-avatar-background-color: $base-active-bg !default;
 $chat-bubble-color-primary: $base-text-color !default;
 $chat-bubble-background-color-primary: null !default;
-$chat-bubble-background-color-secondary: $base-border-color !default;
-$chat-information-color: null !default;
+$chat-bubble-color-secondary: $base-text-color !default;
+$chat-bubble-background-color-secondary: null !default;
+$chat-information-author-name-color: null !default;
+$chat-information-timestamp-color: null !default;
 $chat-messagelist-day-header-color: null !default;
+$chat-alertlist-color: $base-invalid-color !default;
 $chat-messagelist-empty-icon-color: null !default;
 $chat-messagelist-empty-icon-background-color: null !default;
 $chat-messagelist-empty-message-color: $base-text-color !default;
 $chat-messagelist-empty-prompt-color: null !default;
-$chat-alertlist-color: $base-invalid-color !default;
-$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
+$chat-typingindicator-color: null !default;
 $chat-typingindicator-circle-bg-color-center: null !default;
 $chat-typingindicator-circle-bg-color: null !default;
 
 @if $mode == "light" {
-  $chat-information-color: darken($base-bg, 56.08) !default;
+  $chat-bubble-background-color-secondary: darken($base-bg, 3.92) !default;
+  $chat-information-author-name-color: darken($base-bg, 56.08) !default;
+  $chat-information-timestamp-color: darken($base-bg, 56.08) !default;
+  $chat-typingindicator-color: darken($base-bg, 56.08) !default;
 
   $chat-messagelist-day-header-color: darken($base-bg, 56.08) !default;
   $chat-messagelist-empty-icon-color: lighten($base-icon-color, 32.16) !default;
@@ -64,9 +71,12 @@ $chat-typingindicator-circle-bg-color: null !default;
 }
 
 @if $mode == "dark" {
+  $chat-bubble-background-color-secondary: lighten($base-bg, 7.84) !default;
   $chat-bubble-background-color-primary: darken(desaturate(adjust-hue($base-accent, 356.3), 14.7), 49.4) !default;
   
-  $chat-information-color: lighten($base-bg, 43.92) !default;
+  $chat-information-author-name-color: lighten($base-bg, 43.92) !default;
+  $chat-information-timestamp-color: lighten($base-bg, 43.92) !default;
+  $chat-typingindicator-color: lighten($base-bg, 43.92) !default;
   
   $chat-messagelist-day-header-color: lighten($base-bg, 43.92) !default;
   $chat-messagelist-empty-icon-color: darken($base-icon-color, 25.88) !default;
@@ -76,7 +86,7 @@ $chat-typingindicator-circle-bg-color: null !default;
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 33.92) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 43.92) !default;
 }
-$chat-typingindicator-color: $chat-information-color !default;
+$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
 $never-used: collector((
 "$chat-background-color": $chat-background-color,
 "$chat-border-color": $chat-border-color,
@@ -84,16 +94,18 @@ $never-used: collector((
 "$chat-avatar-background-color": $chat-avatar-background-color,
 "$chat-bubble-color-primary": $chat-bubble-color-primary,
 "$chat-bubble-background-color-primary": $chat-bubble-background-color-primary,
+"$chat-bubble-color-secondary": $chat-bubble-color-secondary,
 "$chat-bubble-background-color-secondary": $chat-bubble-background-color-secondary,
-"$chat-information-color": $chat-information-color,
+"$chat-information-author-name-color": $chat-information-author-name-color,
+"$chat-information-timestamp-color": $chat-information-timestamp-color,
 "$chat-messagelist-day-header-color": $chat-messagelist-day-header-color,
+"$chat-alertlist-color": $chat-alertlist-color,
 "$chat-messagelist-empty-icon-color": $chat-messagelist-empty-icon-color,
 "$chat-messagelist-empty-icon-background-color": $chat-messagelist-empty-icon-background-color,
 "$chat-messagelist-empty-message-color": $chat-messagelist-empty-message-color,
 "$chat-messagelist-empty-prompt-color": $chat-messagelist-empty-prompt-color,
-"$chat-alertlist-color": $chat-alertlist-color,
-"$chat-typingindicator-bubble-bg-color": $chat-typingindicator-bubble-bg-color,
+"$chat-typingindicator-color": $chat-typingindicator-color,
 "$chat-typingindicator-circle-bg-color-center": $chat-typingindicator-circle-bg-color-center,
 "$chat-typingindicator-circle-bg-color": $chat-typingindicator-circle-bg-color,
-"$chat-typingindicator-color": $chat-typingindicator-color,
+"$chat-typingindicator-bubble-bg-color": $chat-typingindicator-bubble-bg-color,
 ));

package/data/scss/widgets/fluent/chat/_index.scss

@@ -35,6 +35,7 @@
 @include chat-messagebubble(
   $chat-bubble-padding,
   $chat-bubble-border-radius,
+  $chat-bubble-color-secondary,
   $chat-bubble-background-color-secondary,
   $chat-bubble-color-primary,
   $chat-bubble-background-color-primary,
@@ -46,7 +47,8 @@
   $chat-messagegroup-alignment-start-gap,
   $chat-messagegroup-padding,
   $chat-information-font-size,
-  $chat-information-color,
+  $chat-information-author-name-color,
+  $chat-information-timestamp-color,
   $chat-information-gap,
 );
 @include chat-messagelist-empty(
@@ -67,12 +69,12 @@
   $chat-messagelist-day-header-color,
   $chat-messagelist-day-header-padding-bottom,
   $chat-messagelist-day-header-first-padding-top,
+  $chat-messagelist-day-header-font-size,
 );
 @include chat-typingindicator(
   $chat-typingindicator-template,
   $chat-typingindicator-padding,
   $chat-typingindicator-row-gap,
-  $chat-typingindicator-column-gap,
   $chat-typingindicator-font-size,
   $chat-typingindicator-color,
   $chat-typingindicator-bubble-padding-block,