devextreme-themebuilder 24.2.2-beta → 24.2.4-build-25007-1935

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

@@ -80,7 +80,7 @@ exports.metadata = {
         },
         {
             'Key': '$button-default-color',
-            'Name': '10. Text color',
+            'Name': '10. Text color (contained)',
             'Type': 'color'
         },
         {
@@ -98,11 +98,21 @@ exports.metadata = {
             'Name': '20. Selected contained item background color',
             'Type': 'color'
         },
+        {
+            'Key': '$button-default-outlined-color',
+            'Name': '11. Text color (outlined)',
+            'Type': 'color'
+        },
         {
             'Key': '$button-default-outlined-bg-selected',
             'Name': '20. Selected outlined item background color',
             'Type': 'color'
         },
+        {
+            'Key': '$button-default-text-color',
+            'Name': '11. Text color (text)',
+            'Type': 'color'
+        },
         {
             'Key': '$button-default-text-bg-selected',
             'Name': '20. Selected text item background color',
@@ -215,82 +225,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'
         },
         {
@@ -1238,7 +1258,7 @@ exports.metadata = {
         },
         {
             'Key': '$button-default-selected-color',
-            'Name': '20. Selected state text color',
+            'Name': '20. Selected state text color (contained)',
             'Type': 'color'
         },
         {
@@ -1266,6 +1286,26 @@ exports.metadata = {
             'Name': '25. Selected state background color',
             'Type': 'color'
         },
+        {
+            'Key': '$button-default-outlined-color',
+            'Name': '11. Text color (outlined)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-outlined-selected-color',
+            'Name': '21. Selected state text color (outlined)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-text-color',
+            'Name': '11. Text color (text)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-text-selected-color',
+            'Name': '21. Selected state text color (text)',
+            'Type': 'color'
+        },
         {
             'Key': '$button-danger-color',
             'Name': '10. Text color',
@@ -1368,82 +1408,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-color',
-            'Name': '50. Message caption color',
+            'Key': '$chat-information-author-name-color',
+            'Name': '50. User name color',
+            'Type': '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'
         },
         {
@@ -2241,7 +2291,7 @@ exports.metadata = {
         },
         {
             'Key': '$button-default-color',
-            'Name': '10. Text color',
+            'Name': '10. Text color (contained)',
             'Type': 'color'
         },
         {
@@ -2274,6 +2324,16 @@ exports.metadata = {
             'Name': '25. Selected state background color',
             'Type': 'color'
         },
+        {
+            'Key': '$button-default-outlined-color',
+            'Name': '11. Text color (outlined)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-text-color',
+            'Name': '11. Text color (text)',
+            'Type': 'color'
+        },
         {
             'Key': '$button-danger-color',
             'Name': '10. Text color',
@@ -2344,6 +2404,36 @@ exports.metadata = {
             'Name': '25. Selected state background color',
             'Type': 'color'
         },
+        {
+            'Key': '$button-default-outlined-color-hover',
+            'Name': '12. Hover state text color (outlined)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-outlined-color-active',
+            'Name': '13. Active state text color (outlined)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-outlined-selected-color',
+            'Name': '21. Selected state text color (outlined)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-text-color-hover',
+            'Name': '12. Hover state text color (text)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-text-color-active',
+            'Name': '13. Active state text color (text)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-text-selected-color',
+            'Name': '21. Selected state text color (text)',
+            'Type': 'color'
+        },
         {
             'Key': '$calendar-navigator-text-color',
             'Name': '20. Navigator text color',
@@ -2376,82 +2466,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-color',
-            'Name': '50. Message caption color',
+            'Key': '$chat-information-author-name-color',
+            'Name': '50. User name color',
+            'Type': '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',
-            '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'
         },
         {
@@ -2469,11 +2569,6 @@ exports.metadata = {
             'Name': '90. Active arrow icon color',
             'Type': 'color'
         },
-        {
-            'Key': '$fieldset-field-label-color',
-            'Name': '10. Label text color',
-            'Type': 'color'
-        },
         {
             'Key': '$fileuploader-filename-color',
             'Name': '10. File name text color',
@@ -2529,6 +2624,11 @@ exports.metadata = {
             'Name': '80. Value button color',
             'Type': 'color'
         },
+        {
+            'Key': '$fieldset-field-label-color',
+            'Name': '10. Label text color',
+            'Type': 'color'
+        },
         {
             'Key': '$form-field-item-color',
             'Name': '10. Label text color',
@@ -3257,7 +3357,7 @@ exports.metadata = {
         }
     ]
 };
-exports.version = '24.2.2-beta';
+exports.version = '24.2.4-build-25007-1935';
 exports.browsersList = [
     'last 2 versions',
     'ios > 9',

package/data/scss/widgets/base/_dropDownMenu.scss

@@ -21,7 +21,7 @@
     display: block;
     border-top: 0;
   }
-  
+
   .dx-list-item-content {
     display: block;
   }

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/_tabPanel.scss

@@ -22,7 +22,7 @@
 
 .dx-tabpanel-tabs-position-right {
   flex-direction: row-reverse;
-  
+
   &.dx-rtl {
     flex-direction: row;
   }
@@ -34,7 +34,7 @@
 
 .dx-tabpanel-tabs-position-left {
   flex-direction: row;
-  
+
   &.dx-rtl {
     flex-direction: row-reverse;
   }

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,18 +18,19 @@
 
   .dx-chat-messagegroup-alignment-start {
     .dx-chat-messagebubble {
+      color: $color-secondary;
       background-color: $background-color-secondary;
 
       &:first-child {
         border-start-start-radius: $border-radius;
       }
-  
+
       &:last-child {
         border-end-start-radius: $border-radius;
       }
     }
   }
-  
+
   .dx-chat-messagegroup-alignment-end {
     .dx-chat-messagebubble {
       color: $color-primary;

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 {
@@ -19,15 +20,22 @@
   .dx-chat-messagegroup-information {
     column-gap: $information-gap;
   }
-  
+
   .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;
       }
     }
   }