From 19f39a67a791622bc374cc0dd6bcb2b5c0226e94 Mon Sep 17 00:00:00 2001
From: Arpad Ivany <arpad.ivany@hes.dev>
Date: Wed, 6 Nov 2024 11:19:33 +0100
Subject: [PATCH 1/7] feat(theme-builder): add chat colors

---
 .../scss/widgets/generic/chat/_colors.scss    | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
index 913d965b25a8..6b1985255200 100644
--- a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -4,13 +4,42 @@
 
 // adduse
 
+/**
+* $name 10. Background color
+* $type color
+*/
 $chat-background-color: $base-bg !default;
+
+/**
+* $name 20. Border color
+* $type color
+*/
 $chat-border-color: $base-border-color !default;
 $chat-avatar-color: null !default;
+
+/**
+* $name 30. Avatar background color
+* $type color
+*/
 $chat-avatar-background-color: $base-border-color !default;
 $chat-messagebox-border-color: $base-border-color !default;
+
+/**
+* $name 40. Primary bubble color
+* $type color
+*/
 $chat-bubble-color-primary: null !default;
+
+/**
+* $name 50. Primary bubble background color
+* $type color
+*/
 $chat-bubble-background-color-primary: null !default;
+
+/**
+* $name 60. Secondary bubble background color
+* $type color
+*/
 $chat-bubble-background-color-secondary: null !default;
 $chat-information-color: null !default;
 
@@ -20,9 +49,21 @@ $chat-messagelist-empty-icon-background-color: null !default;
 $chat-messagelist-empty-message-color: null !default;
 $chat-messagelist-empty-prompt-color: null !default;
 
+/**
+* $name 70. Alert list color
+* $type color
+*/
 $chat-alertlist-color: $base-invalid-color !default;
 
+/**
+* $name 80. Typing indicator color
+* $type color
+*/
 $chat-typingindicator-color: null !default;
+/**
+* $name 90. Typing indicator background color
+* $type color
+*/
 $chat-typingindicator-bubble-bg-color: null !default;
 $chat-typingindicator-circle-bg-color: null !default;
 $chat-typingindicator-circle-bg-color-center: null !default;

From 8e80fe1492464654b4b77daadbd4ce571fb9322e Mon Sep 17 00:00:00 2001
From: Arpad Ivany <arpad.ivany@hes.dev>
Date: Wed, 6 Nov 2024 12:51:59 +0100
Subject: [PATCH 2/7] feat(theme-builder): add chat colors to fluent and
 material theme

---
 .../scss/widgets/fluent/chat/_colors.scss     | 46 +++++++++++++++++++
 .../scss/widgets/generic/chat/_colors.scss    | 19 +++++---
 .../scss/widgets/material/chat/_colors.scss   | 46 +++++++++++++++++++
 3 files changed, 104 insertions(+), 7 deletions(-)

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
index afd30c3e1861..a5e29bf123f7 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
@@ -4,13 +4,47 @@
 
 // adduse
 
+/**
+* $name 10. Background color
+* $type color
+*/
 $chat-background-color: $base-bg !default;
+
+/**
+* $name 20. Border color
+* $type color
+*/
 $chat-border-color: $base-border-color !default;
 $chat-messagebox-border-color: $base-border-color !default;
+
+/**
+* $name 30. Avatar color
+* $type color
+*/
 $chat-avatar-color: $base-text-color !default;
+
+/**
+* $name 40. Avatar background color
+* $type color
+*/
 $chat-avatar-background-color: $base-active-bg !default;
+
+/**
+* $name 50. Primary bubble color
+* $type color
+*/
 $chat-bubble-color-primary: $base-text-color !default;
+
+/**
+* $name 60. Primary bubble background color
+* $type color
+*/
 $chat-bubble-background-color-primary: null !default;
+
+/**
+* $name 70. Secondary bubble background color
+* $type color
+*/
 $chat-bubble-background-color-secondary: $base-border-color !default;
 $chat-information-color: null !default;
 
@@ -20,9 +54,21 @@ $chat-messagelist-empty-icon-background-color: null !default;
 $chat-messagelist-empty-message-color: $base-text-color !default;
 $chat-messagelist-empty-prompt-color: null !default;
 
+/**
+* $name 80. Alert list color
+* $type color
+*/
 $chat-alertlist-color: $base-invalid-color !default;
 
+/**
+* $name 90. Typing indicator color
+* $type color
+*/
 $chat-typingindicator-color: null !default;
+/**
+* $name 100. Typing indicator background color
+* $type color
+*/
 $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
 $chat-typingindicator-circle-bg-color: null !default;
 $chat-typingindicator-circle-bg-color-center: null !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
index 6b1985255200..02c0cb2402f1 100644
--- a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -15,29 +15,34 @@ $chat-background-color: $base-bg !default;
 * $type color
 */
 $chat-border-color: $base-border-color !default;
+
+/**
+* $name 30. Avatar color
+* $type color
+*/
 $chat-avatar-color: null !default;
 
 /**
-* $name 30. Avatar background color
+* $name 40. Avatar background color
 * $type color
 */
 $chat-avatar-background-color: $base-border-color !default;
 $chat-messagebox-border-color: $base-border-color !default;
 
 /**
-* $name 40. Primary bubble color
+* $name 50. Primary bubble color
 * $type color
 */
 $chat-bubble-color-primary: null !default;
 
 /**
-* $name 50. Primary bubble background color
+* $name 60. Primary bubble background color
 * $type color
 */
 $chat-bubble-background-color-primary: null !default;
 
 /**
-* $name 60. Secondary bubble background color
+* $name 70. Secondary bubble background color
 * $type color
 */
 $chat-bubble-background-color-secondary: null !default;
@@ -50,18 +55,18 @@ $chat-messagelist-empty-message-color: null !default;
 $chat-messagelist-empty-prompt-color: null !default;
 
 /**
-* $name 70. Alert list color
+* $name 80. Alert list color
 * $type color
 */
 $chat-alertlist-color: $base-invalid-color !default;
 
 /**
-* $name 80. Typing indicator color
+* $name 90. Typing indicator color
 * $type color
 */
 $chat-typingindicator-color: null !default;
 /**
-* $name 90. Typing indicator background color
+* $name 100. Typing indicator background color
 * $type color
 */
 $chat-typingindicator-bubble-bg-color: null !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
index fb8727778c67..288c29855526 100644
--- a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
@@ -3,13 +3,47 @@
 
 // adduse
 
+/**
+* $name 10. Background color
+* $type color
+*/
 $chat-background-color: $base-bg !default;
+
+/**
+* $name 20. Border color
+* $type color
+*/
 $chat-border-color: $base-border-color !default;
 $chat-messagebox-border-color: $base-border-color !default;
+
+/**
+* $name 30. Avatar color
+* $type color
+*/
 $chat-avatar-color: $base-text-color !default;
+
+/**
+* $name 40. Avatar background color
+* $type color
+*/
 $chat-avatar-background-color: $base-border-color !default;
+
+/**
+* $name 50. Primary bubble color
+* $type color
+*/
 $chat-bubble-color-primary: $base-text-color !default;
+
+/**
+* $name 60. Primary bubble background color
+* $type color
+*/
 $chat-bubble-background-color-primary: null !default;
+
+/**
+* $name 70. Secondary bubble background color
+* $type color
+*/
 $chat-bubble-background-color-secondary: null !default;
 $chat-information-color: null !default;
 
@@ -19,9 +53,21 @@ $chat-messagelist-empty-icon-background-color: rgba($base-inverted-bg, 0.08) !de
 $chat-messagelist-empty-message-color: rgba($base-inverted-bg, 0.87) !default;
 $chat-messagelist-empty-prompt-color: rgba($base-inverted-bg, 0.6) !default;
 
+/**
+* $name 80. Alert list color
+* $type color
+*/
 $chat-alertlist-color: $base-invalid-color !default;
 
+/**
+* $name 90. Typing indicator color
+* $type color
+*/
 $chat-typingindicator-color: null !default;
+/**
+* $name 100. Typing indicator background color
+* $type color
+*/
 $chat-typingindicator-bubble-bg-color: null !default;
 $chat-typingindicator-circle-bg-color: null !default;
 $chat-typingindicator-circle-bg-color-center: null !default;

From 942e257371e3080915ace32b6223832fba877053 Mon Sep 17 00:00:00 2001
From: Arpad Ivany <arpad.ivany@hes.dev>
Date: Wed, 6 Nov 2024 16:45:23 +0100
Subject: [PATCH 3/7] feat(theme-builder): added additional chat colors

---
 .../scss/widgets/fluent/chat/_colors.scss     | 46 ++++++++++++++----
 .../scss/widgets/generic/chat/_colors.scss    | 47 +++++++++++++++----
 .../scss/widgets/material/chat/_colors.scss   | 46 ++++++++++++++----
 3 files changed, 109 insertions(+), 30 deletions(-)

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
index a5e29bf123f7..b122334fe325 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
@@ -22,54 +22,80 @@ $chat-messagebox-border-color: $base-border-color !default;
 * $type color
 */
 $chat-avatar-color: $base-text-color !default;
-
 /**
-* $name 40. Avatar background color
+* $name 31. Avatar background color
 * $type color
 */
 $chat-avatar-background-color: $base-active-bg !default;
 
 /**
-* $name 50. Primary bubble color
+* $name 40. Bubble color
 * $type color
 */
 $chat-bubble-color-primary: $base-text-color !default;
-
 /**
-* $name 60. Primary bubble background color
+* $name 41. Bubble background color primary
 * $type color
 */
 $chat-bubble-background-color-primary: null !default;
-
 /**
-* $name 70. Secondary bubble background color
+* $name 42. Bubble background color secondary
 * $type color
 */
 $chat-bubble-background-color-secondary: $base-border-color !default;
+
+/**
+* $name 50. Information color
+* $type color
+*/
 $chat-information-color: null !default;
 
+/**
+* $name 60. Day header color
+* $type color
+*/
 $chat-messagelist-day-header-color: null !default;
+/**
+* $name 61. Empty list icon color
+* $type color
+*/
 $chat-messagelist-empty-icon-color: null !default;
+/**
+* $name 62. Empty list icon background color
+* $type color
+*/
 $chat-messagelist-empty-icon-background-color: null !default;
+/**
+* $name 63. Empty list message color
+* $type color
+*/
 $chat-messagelist-empty-message-color: $base-text-color !default;
+/**
+* $name 64. Empty list prompt color
+* $type color
+*/
 $chat-messagelist-empty-prompt-color: null !default;
 
 /**
-* $name 80. Alert list color
+* $name 70. Error color
 * $type color
 */
 $chat-alertlist-color: $base-invalid-color !default;
 
 /**
-* $name 90. Typing indicator color
+* $name 80. Typing indicator color
 * $type color
 */
 $chat-typingindicator-color: null !default;
 /**
-* $name 100. Typing indicator background color
+* $name 81. Typing indicator background color
 * $type color
 */
 $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
+/**
+* $name 82. Typing indicator circle background color
+* $type color
+*/
 $chat-typingindicator-circle-bg-color: null !default;
 $chat-typingindicator-circle-bg-color-center: null !default;
 
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
index 02c0cb2402f1..c94aa64eac9c 100644
--- a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -21,55 +21,82 @@ $chat-border-color: $base-border-color !default;
 * $type color
 */
 $chat-avatar-color: null !default;
-
 /**
-* $name 40. Avatar background color
+* $name 31. Avatar background color
 * $type color
 */
 $chat-avatar-background-color: $base-border-color !default;
+
 $chat-messagebox-border-color: $base-border-color !default;
 
 /**
-* $name 50. Primary bubble color
+* $name 40. Bubble color
 * $type color
 */
 $chat-bubble-color-primary: null !default;
-
 /**
-* $name 60. Primary bubble background color
+* $name 41. Bubble background color primary
 * $type color
 */
 $chat-bubble-background-color-primary: null !default;
-
 /**
-* $name 70. Secondary bubble background color
+* $name 42. Bubble background color secondary
 * $type color
 */
 $chat-bubble-background-color-secondary: null !default;
+
+/**
+* $name 50. Information color
+* $type color
+*/
 $chat-information-color: null !default;
 
+/**
+* $name 60. Day header color
+* $type color
+*/
 $chat-messagelist-day-header-color: null !default;
+/**
+* $name 61. Empty list icon color
+* $type color
+*/
 $chat-messagelist-empty-icon-color: null !default;
+/**
+* $name 62. Empty list icon background color
+* $type color
+*/
 $chat-messagelist-empty-icon-background-color: null !default;
+/**
+* $name 63. Empty list message color
+* $type color
+*/
 $chat-messagelist-empty-message-color: null !default;
+/**
+* $name 64. Empty list prompt color
+* $type color
+*/
 $chat-messagelist-empty-prompt-color: null !default;
 
 /**
-* $name 80. Alert list color
+* $name 70. Error color
 * $type color
 */
 $chat-alertlist-color: $base-invalid-color !default;
 
 /**
-* $name 90. Typing indicator color
+* $name 80. Typing indicator color
 * $type color
 */
 $chat-typingindicator-color: null !default;
 /**
-* $name 100. Typing indicator background color
+* $name 81. Typing indicator background color
 * $type color
 */
 $chat-typingindicator-bubble-bg-color: null !default;
+/**
+* $name 82. Typing indicator circle background color
+* $type color
+*/
 $chat-typingindicator-circle-bg-color: null !default;
 $chat-typingindicator-circle-bg-color-center: null !default;
 
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
index 288c29855526..72371f94e481 100644
--- a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
@@ -21,54 +21,80 @@ $chat-messagebox-border-color: $base-border-color !default;
 * $type color
 */
 $chat-avatar-color: $base-text-color !default;
-
 /**
-* $name 40. Avatar background color
+* $name 31. Avatar background color
 * $type color
 */
 $chat-avatar-background-color: $base-border-color !default;
 
 /**
-* $name 50. Primary bubble color
+* $name 40. Bubble color
 * $type color
 */
 $chat-bubble-color-primary: $base-text-color !default;
-
 /**
-* $name 60. Primary bubble background color
+* $name 41. Bubble background color primary
 * $type color
 */
 $chat-bubble-background-color-primary: null !default;
-
 /**
-* $name 70. Secondary bubble background color
+* $name 42. Bubble background color secondary
 * $type color
 */
 $chat-bubble-background-color-secondary: null !default;
+
+/**
+* $name 50. Information color
+* $type color
+*/
 $chat-information-color: null !default;
 
+/**
+* $name 60. Day header color
+* $type color
+*/
 $chat-messagelist-day-header-color: null !default;
+/**
+* $name 61. Empty list icon color
+* $type color
+*/
 $chat-messagelist-empty-icon-color: rgba($base-inverted-bg, 0.38) !default;
+/**
+* $name 62. Empty list icon background color
+* $type color
+*/
 $chat-messagelist-empty-icon-background-color: rgba($base-inverted-bg, 0.08) !default;
+/**
+* $name 63. Empty list message color
+* $type color
+*/
 $chat-messagelist-empty-message-color: rgba($base-inverted-bg, 0.87) !default;
+/**
+* $name 64. Empty list prompt color
+* $type color
+*/
 $chat-messagelist-empty-prompt-color: rgba($base-inverted-bg, 0.6) !default;
 
 /**
-* $name 80. Alert list color
+* $name 70. Error color
 * $type color
 */
 $chat-alertlist-color: $base-invalid-color !default;
 
 /**
-* $name 90. Typing indicator color
+* $name 80. Typing indicator color
 * $type color
 */
 $chat-typingindicator-color: null !default;
 /**
-* $name 100. Typing indicator background color
+* $name 81. Typing indicator background color
 * $type color
 */
 $chat-typingindicator-bubble-bg-color: null !default;
+/**
+* $name 82. Typing indicator circle background color
+* $type color
+*/
 $chat-typingindicator-circle-bg-color: null !default;
 $chat-typingindicator-circle-bg-color-center: null !default;
 

From ad81dbae9ab8454b78a7e09d8964b93bfcaaad63 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Thu, 7 Nov 2024 01:00:15 +0400
Subject: [PATCH 4/7] refactor

---
 .../scss/widgets/fluent/chat/_colors.scss     | 20 ++++++--
 .../scss/widgets/generic/chat/_colors.scss    | 36 ++++++-------
 .../scss/widgets/material/chat/_colors.scss   | 50 ++++++++-----------
 3 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
index b122334fe325..bac3d9363e16 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
@@ -15,13 +15,14 @@ $chat-background-color: $base-bg !default;
 * $type color
 */
 $chat-border-color: $base-border-color !default;
-$chat-messagebox-border-color: $base-border-color !default;
+$chat-messagebox-border-color: $chat-border-color !default;
 
 /**
 * $name 30. Avatar color
 * $type color
 */
 $chat-avatar-color: $base-text-color !default;
+
 /**
 * $name 31. Avatar background color
 * $type color
@@ -33,11 +34,13 @@ $chat-avatar-background-color: $base-active-bg !default;
 * $type color
 */
 $chat-bubble-color-primary: $base-text-color !default;
+
 /**
 * $name 41. Bubble background color primary
 * $type color
 */
 $chat-bubble-background-color-primary: null !default;
+
 /**
 * $name 42. Bubble background color secondary
 * $type color
@@ -55,21 +58,25 @@ $chat-information-color: null !default;
 * $type color
 */
 $chat-messagelist-day-header-color: null !default;
+
 /**
 * $name 61. Empty list icon color
 * $type color
 */
 $chat-messagelist-empty-icon-color: null !default;
+
 /**
 * $name 62. Empty list icon background color
 * $type color
 */
 $chat-messagelist-empty-icon-background-color: null !default;
+
 /**
 * $name 63. Empty list message color
 * $type color
 */
 $chat-messagelist-empty-message-color: $base-text-color !default;
+
 /**
 * $name 64. Empty list prompt color
 * $type color
@@ -87,16 +94,23 @@ $chat-alertlist-color: $base-invalid-color !default;
 * $type color
 */
 $chat-typingindicator-color: null !default;
+
 /**
 * $name 81. Typing indicator background color
 * $type color
 */
 $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
+
 /**
 * $name 82. Typing indicator circle background color
 * $type color
 */
 $chat-typingindicator-circle-bg-color: null !default;
+
+/**
+* $name 83. Typing indicator center circle background color
+* $type color
+*/
 $chat-typingindicator-circle-bg-color-center: null !default;
 
 @if $mode == "light" {
@@ -107,7 +121,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-icon-background-color: darken($base-bg, 3.92) !default;
   $chat-messagelist-empty-prompt-color: darken($base-label-color, 5.88) !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 29.16) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 56.08) !default;
 
@@ -132,7 +145,8 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default;
   $chat-messagelist-empty-prompt-color: lighten($base-label-color, 7.84) !default;
 
-  $chat-typingindicator-color: $chat-information-color !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;
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
index c94aa64eac9c..608c4fa105cb 100644
--- a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -15,30 +15,32 @@ $chat-background-color: $base-bg !default;
 * $type color
 */
 $chat-border-color: $base-border-color !default;
+$chat-messagebox-border-color: $chat-border-color !default;
 
 /**
 * $name 30. Avatar color
 * $type color
 */
 $chat-avatar-color: null !default;
+
 /**
 * $name 31. Avatar background color
 * $type color
 */
 $chat-avatar-background-color: $base-border-color !default;
 
-$chat-messagebox-border-color: $base-border-color !default;
-
 /**
 * $name 40. Bubble color
 * $type color
 */
 $chat-bubble-color-primary: null !default;
+
 /**
 * $name 41. Bubble background color primary
 * $type color
 */
 $chat-bubble-background-color-primary: null !default;
+
 /**
 * $name 42. Bubble background color secondary
 * $type color
@@ -56,21 +58,25 @@ $chat-information-color: null !default;
 * $type color
 */
 $chat-messagelist-day-header-color: null !default;
+
 /**
 * $name 61. Empty list icon color
 * $type color
 */
 $chat-messagelist-empty-icon-color: null !default;
+
 /**
 * $name 62. Empty list icon background color
 * $type color
 */
 $chat-messagelist-empty-icon-background-color: null !default;
+
 /**
 * $name 63. Empty list message color
 * $type color
 */
 $chat-messagelist-empty-message-color: null !default;
+
 /**
 * $name 64. Empty list prompt color
 * $type color
@@ -88,16 +94,23 @@ $chat-alertlist-color: $base-invalid-color !default;
 * $type color
 */
 $chat-typingindicator-color: null !default;
+
 /**
 * $name 81. Typing indicator background color
 * $type color
 */
 $chat-typingindicator-bubble-bg-color: null !default;
+
 /**
 * $name 82. Typing indicator circle background color
 * $type color
 */
 $chat-typingindicator-circle-bg-color: null !default;
+
+/**
+* $name 83. Typing indicator center circle background color
+* $type color
+*/
 $chat-typingindicator-circle-bg-color-center: null !default;
 
 @if $color == "light" {
@@ -113,8 +126,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: darken($base-text-color, 6.67) !default;
   $chat-messagelist-empty-prompt-color: lighten($base-label-color, 38.43) !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
 }
@@ -132,8 +143,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default;
   $chat-messagelist-empty-prompt-color: darken($base-label-color, 38.04) !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
 }
@@ -151,8 +160,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-label-color !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
 }
@@ -170,8 +177,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-text-color !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: $base-inverted-bg !default;
   $chat-typingindicator-circle-bg-color-center: $base-inverted-bg !default;
 }
@@ -189,8 +194,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-label-color !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
 }
@@ -208,8 +211,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default;
   $chat-messagelist-empty-prompt-color: darken($base-label-color, 38.04) !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
 }
@@ -226,8 +227,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-label-color !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
 }
@@ -245,8 +244,9 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-label-color !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
 }
+
+$chat-typingindicator-color: $chat-information-color !default;
+$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
index 72371f94e481..4d225d10d303 100644
--- a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
@@ -14,13 +14,14 @@ $chat-background-color: $base-bg !default;
 * $type color
 */
 $chat-border-color: $base-border-color !default;
-$chat-messagebox-border-color: $base-border-color !default;
+$chat-messagebox-border-color: $chat-border-color !default;
 
 /**
 * $name 30. Avatar color
 * $type color
 */
 $chat-avatar-color: $base-text-color !default;
+
 /**
 * $name 31. Avatar background color
 * $type color
@@ -32,43 +33,49 @@ $chat-avatar-background-color: $base-border-color !default;
 * $type color
 */
 $chat-bubble-color-primary: $base-text-color !default;
+
 /**
 * $name 41. Bubble background color primary
 * $type color
 */
 $chat-bubble-background-color-primary: null !default;
+
 /**
 * $name 42. Bubble background color secondary
 * $type color
 */
-$chat-bubble-background-color-secondary: null !default;
+$chat-bubble-background-color-secondary: rgba($base-inverted-bg, 0.08) !default;
 
 /**
 * $name 50. Information color
 * $type color
 */
-$chat-information-color: null !default;
+$chat-information-color: rgba($base-inverted-bg, 0.6) !default;
 
 /**
 * $name 60. Day header color
 * $type color
 */
-$chat-messagelist-day-header-color: null !default;
+$chat-messagelist-day-header-color: rgba($base-inverted-bg, 0.6) !default;
+
 /**
 * $name 61. Empty list icon color
 * $type color
 */
 $chat-messagelist-empty-icon-color: rgba($base-inverted-bg, 0.38) !default;
+
 /**
 * $name 62. Empty list icon background color
 * $type color
 */
 $chat-messagelist-empty-icon-background-color: rgba($base-inverted-bg, 0.08) !default;
+
 /**
 * $name 63. Empty list message color
 * $type color
 */
 $chat-messagelist-empty-message-color: rgba($base-inverted-bg, 0.87) !default;
+
 /**
 * $name 64. Empty list prompt color
 * $type color
@@ -85,43 +92,30 @@ $chat-alertlist-color: $base-invalid-color !default;
 * $name 80. Typing indicator color
 * $type color
 */
-$chat-typingindicator-color: null !default;
+$chat-typingindicator-color: $chat-information-color !default;
+
 /**
 * $name 81. Typing indicator background color
 * $type color
 */
-$chat-typingindicator-bubble-bg-color: null !default;
+$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
+
 /**
 * $name 82. Typing indicator circle background color
 * $type color
 */
-$chat-typingindicator-circle-bg-color: null !default;
-$chat-typingindicator-circle-bg-color-center: null !default;
+$chat-typingindicator-circle-bg-color: rgba($base-inverted-bg, 0.4) !default;
+
+/**
+* $name 83. Typing indicator center circle background color
+* $type color
+*/
+$chat-typingindicator-circle-bg-color-center: rgba($base-inverted-bg, 0.6) !default;
 
 @if $mode == "light" {
   $chat-bubble-background-color-primary: rgba($base-accent, 0.08) !default;
-  $chat-bubble-background-color-secondary: rgba($base-inverted-bg, 0.08) !default;
-
-  $chat-information-color: rgba(darken($base-bg, 100.00), 0.6) !default;
-
-  $chat-messagelist-day-header-color: rgba(darken($base-bg, 100.00), 0.6) !default;
-
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
-  $chat-typingindicator-circle-bg-color: rgba(darken($base-bg, 100.00), 0.4) !default;
-  $chat-typingindicator-circle-bg-color-center: rgba(darken($base-bg, 100.00), 0.6) !default;
 }
 
 @else if $mode == "dark" {
   $chat-bubble-background-color-primary: rgba(lighten($base-accent, 19.22), 0.08) !default;
-  $chat-bubble-background-color-secondary: rgba(lighten(desaturate(adjust-hue($base-bg, -240), 8.47), 76.86), 0.08) !default;
-
-  $chat-information-color: rgba(lighten(desaturate(adjust-hue($base-bg, -240), 8.47), 76.86), 0.6) !default;
-
-  $chat-messagelist-day-header-color: rgba(lighten(desaturate(adjust-hue($base-bg, -240), 8.47), 76.86), 0.6) !default;
-
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
-  $chat-typingindicator-circle-bg-color: rgba(lighten(desaturate(adjust-hue($base-bg, -240), 8.47), 76.86), 0.4) !default;
-  $chat-typingindicator-circle-bg-color-center: rgba(lighten(desaturate(adjust-hue($base-bg, -240), 8.47), 76.86), 0.6) !default;
 }

From 8d531bc8edbdb7d021e05d3cf796e44b075b5a90 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Thu, 7 Nov 2024 01:00:15 +0400
Subject: [PATCH 5/7] fix lint errors

---
 .../scss/widgets/fluent/chat/_colors.scss     | 28 +++++++---
 .../scss/widgets/generic/chat/_colors.scss    | 51 +++++++++----------
 .../scss/widgets/material/chat/_colors.scss   | 50 ++++++++----------
 3 files changed, 66 insertions(+), 63 deletions(-)

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
index b122334fe325..f3acdd8b35cb 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
@@ -15,13 +15,14 @@ $chat-background-color: $base-bg !default;
 * $type color
 */
 $chat-border-color: $base-border-color !default;
-$chat-messagebox-border-color: $base-border-color !default;
+$chat-messagebox-border-color: $chat-border-color !default;
 
 /**
 * $name 30. Avatar color
 * $type color
 */
 $chat-avatar-color: $base-text-color !default;
+
 /**
 * $name 31. Avatar background color
 * $type color
@@ -33,11 +34,13 @@ $chat-avatar-background-color: $base-active-bg !default;
 * $type color
 */
 $chat-bubble-color-primary: $base-text-color !default;
+
 /**
 * $name 41. Bubble background color primary
 * $type color
 */
 $chat-bubble-background-color-primary: null !default;
+
 /**
 * $name 42. Bubble background color secondary
 * $type color
@@ -55,21 +58,25 @@ $chat-information-color: null !default;
 * $type color
 */
 $chat-messagelist-day-header-color: null !default;
+
 /**
 * $name 61. Empty list icon color
 * $type color
 */
 $chat-messagelist-empty-icon-color: null !default;
+
 /**
 * $name 62. Empty list icon background color
 * $type color
 */
 $chat-messagelist-empty-icon-background-color: null !default;
+
 /**
 * $name 63. Empty list message color
 * $type color
 */
 $chat-messagelist-empty-message-color: $base-text-color !default;
+
 /**
 * $name 64. Empty list prompt color
 * $type color
@@ -82,21 +89,22 @@ $chat-messagelist-empty-prompt-color: null !default;
 */
 $chat-alertlist-color: $base-invalid-color !default;
 
-/**
-* $name 80. Typing indicator color
-* $type color
-*/
-$chat-typingindicator-color: null !default;
 /**
 * $name 81. Typing indicator background color
 * $type color
 */
 $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
+
 /**
 * $name 82. Typing indicator circle background color
 * $type color
 */
 $chat-typingindicator-circle-bg-color: null !default;
+
+/**
+* $name 83. Typing indicator center circle background color
+* $type color
+*/
 $chat-typingindicator-circle-bg-color-center: null !default;
 
 @if $mode == "light" {
@@ -107,7 +115,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-icon-background-color: darken($base-bg, 3.92) !default;
   $chat-messagelist-empty-prompt-color: darken($base-label-color, 5.88) !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 29.16) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 56.08) !default;
 
@@ -132,7 +139,12 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default;
   $chat-messagelist-empty-prompt-color: lighten($base-label-color, 7.84) !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 33.92) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 43.92) !default;
 }
+
+/**
+* $name 80. Typing indicator color
+* $type color
+*/
+$chat-typingindicator-color: $chat-information-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
index c94aa64eac9c..00083ae4699e 100644
--- a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -15,30 +15,32 @@ $chat-background-color: $base-bg !default;
 * $type color
 */
 $chat-border-color: $base-border-color !default;
+$chat-messagebox-border-color: $chat-border-color !default;
 
 /**
 * $name 30. Avatar color
 * $type color
 */
 $chat-avatar-color: null !default;
+
 /**
 * $name 31. Avatar background color
 * $type color
 */
 $chat-avatar-background-color: $base-border-color !default;
 
-$chat-messagebox-border-color: $base-border-color !default;
-
 /**
 * $name 40. Bubble color
 * $type color
 */
 $chat-bubble-color-primary: null !default;
+
 /**
 * $name 41. Bubble background color primary
 * $type color
 */
 $chat-bubble-background-color-primary: null !default;
+
 /**
 * $name 42. Bubble background color secondary
 * $type color
@@ -56,21 +58,25 @@ $chat-information-color: null !default;
 * $type color
 */
 $chat-messagelist-day-header-color: null !default;
+
 /**
 * $name 61. Empty list icon color
 * $type color
 */
 $chat-messagelist-empty-icon-color: null !default;
+
 /**
 * $name 62. Empty list icon background color
 * $type color
 */
 $chat-messagelist-empty-icon-background-color: null !default;
+
 /**
 * $name 63. Empty list message color
 * $type color
 */
 $chat-messagelist-empty-message-color: null !default;
+
 /**
 * $name 64. Empty list prompt color
 * $type color
@@ -84,20 +90,15 @@ $chat-messagelist-empty-prompt-color: null !default;
 $chat-alertlist-color: $base-invalid-color !default;
 
 /**
-* $name 80. Typing indicator color
-* $type color
-*/
-$chat-typingindicator-color: null !default;
-/**
-* $name 81. Typing indicator background color
+* $name 82. Typing indicator circle background color
 * $type color
 */
-$chat-typingindicator-bubble-bg-color: null !default;
+$chat-typingindicator-circle-bg-color: null !default;
+
 /**
-* $name 82. Typing indicator circle background color
+* $name 83. Typing indicator center circle background color
 * $type color
 */
-$chat-typingindicator-circle-bg-color: null !default;
 $chat-typingindicator-circle-bg-color-center: null !default;
 
 @if $color == "light" {
@@ -113,8 +114,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: darken($base-text-color, 6.67) !default;
   $chat-messagelist-empty-prompt-color: lighten($base-label-color, 38.43) !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
 }
@@ -132,8 +131,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default;
   $chat-messagelist-empty-prompt-color: darken($base-label-color, 38.04) !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
 }
@@ -151,8 +148,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-label-color !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
 }
@@ -170,8 +165,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-text-color !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: $base-inverted-bg !default;
   $chat-typingindicator-circle-bg-color-center: $base-inverted-bg !default;
 }
@@ -189,8 +182,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-label-color !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
 }
@@ -208,8 +199,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default;
   $chat-messagelist-empty-prompt-color: darken($base-label-color, 38.04) !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
 }
@@ -226,8 +215,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-label-color !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
 }
@@ -245,8 +232,18 @@ $chat-typingindicator-circle-bg-color-center: null !default;
   $chat-messagelist-empty-message-color: $base-text-color !default;
   $chat-messagelist-empty-prompt-color: $base-label-color !default;
 
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
 }
+
+/**
+* $name 80. Typing indicator color
+* $type color
+*/
+$chat-typingindicator-color: $chat-information-color !default;
+
+/**
+* $name 81. Typing indicator background color
+* $type color
+*/
+$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
index 72371f94e481..4d225d10d303 100644
--- a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
@@ -14,13 +14,14 @@ $chat-background-color: $base-bg !default;
 * $type color
 */
 $chat-border-color: $base-border-color !default;
-$chat-messagebox-border-color: $base-border-color !default;
+$chat-messagebox-border-color: $chat-border-color !default;
 
 /**
 * $name 30. Avatar color
 * $type color
 */
 $chat-avatar-color: $base-text-color !default;
+
 /**
 * $name 31. Avatar background color
 * $type color
@@ -32,43 +33,49 @@ $chat-avatar-background-color: $base-border-color !default;
 * $type color
 */
 $chat-bubble-color-primary: $base-text-color !default;
+
 /**
 * $name 41. Bubble background color primary
 * $type color
 */
 $chat-bubble-background-color-primary: null !default;
+
 /**
 * $name 42. Bubble background color secondary
 * $type color
 */
-$chat-bubble-background-color-secondary: null !default;
+$chat-bubble-background-color-secondary: rgba($base-inverted-bg, 0.08) !default;
 
 /**
 * $name 50. Information color
 * $type color
 */
-$chat-information-color: null !default;
+$chat-information-color: rgba($base-inverted-bg, 0.6) !default;
 
 /**
 * $name 60. Day header color
 * $type color
 */
-$chat-messagelist-day-header-color: null !default;
+$chat-messagelist-day-header-color: rgba($base-inverted-bg, 0.6) !default;
+
 /**
 * $name 61. Empty list icon color
 * $type color
 */
 $chat-messagelist-empty-icon-color: rgba($base-inverted-bg, 0.38) !default;
+
 /**
 * $name 62. Empty list icon background color
 * $type color
 */
 $chat-messagelist-empty-icon-background-color: rgba($base-inverted-bg, 0.08) !default;
+
 /**
 * $name 63. Empty list message color
 * $type color
 */
 $chat-messagelist-empty-message-color: rgba($base-inverted-bg, 0.87) !default;
+
 /**
 * $name 64. Empty list prompt color
 * $type color
@@ -85,43 +92,30 @@ $chat-alertlist-color: $base-invalid-color !default;
 * $name 80. Typing indicator color
 * $type color
 */
-$chat-typingindicator-color: null !default;
+$chat-typingindicator-color: $chat-information-color !default;
+
 /**
 * $name 81. Typing indicator background color
 * $type color
 */
-$chat-typingindicator-bubble-bg-color: null !default;
+$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
+
 /**
 * $name 82. Typing indicator circle background color
 * $type color
 */
-$chat-typingindicator-circle-bg-color: null !default;
-$chat-typingindicator-circle-bg-color-center: null !default;
+$chat-typingindicator-circle-bg-color: rgba($base-inverted-bg, 0.4) !default;
+
+/**
+* $name 83. Typing indicator center circle background color
+* $type color
+*/
+$chat-typingindicator-circle-bg-color-center: rgba($base-inverted-bg, 0.6) !default;
 
 @if $mode == "light" {
   $chat-bubble-background-color-primary: rgba($base-accent, 0.08) !default;
-  $chat-bubble-background-color-secondary: rgba($base-inverted-bg, 0.08) !default;
-
-  $chat-information-color: rgba(darken($base-bg, 100.00), 0.6) !default;
-
-  $chat-messagelist-day-header-color: rgba(darken($base-bg, 100.00), 0.6) !default;
-
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
-  $chat-typingindicator-circle-bg-color: rgba(darken($base-bg, 100.00), 0.4) !default;
-  $chat-typingindicator-circle-bg-color-center: rgba(darken($base-bg, 100.00), 0.6) !default;
 }
 
 @else if $mode == "dark" {
   $chat-bubble-background-color-primary: rgba(lighten($base-accent, 19.22), 0.08) !default;
-  $chat-bubble-background-color-secondary: rgba(lighten(desaturate(adjust-hue($base-bg, -240), 8.47), 76.86), 0.08) !default;
-
-  $chat-information-color: rgba(lighten(desaturate(adjust-hue($base-bg, -240), 8.47), 76.86), 0.6) !default;
-
-  $chat-messagelist-day-header-color: rgba(lighten(desaturate(adjust-hue($base-bg, -240), 8.47), 76.86), 0.6) !default;
-
-  $chat-typingindicator-color: $chat-information-color !default;
-  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
-  $chat-typingindicator-circle-bg-color: rgba(lighten(desaturate(adjust-hue($base-bg, -240), 8.47), 76.86), 0.4) !default;
-  $chat-typingindicator-circle-bg-color-center: rgba(lighten(desaturate(adjust-hue($base-bg, -240), 8.47), 76.86), 0.6) !default;
 }

From 928565d1f0814077eb111893035b73aa0945b67b Mon Sep 17 00:00:00 2001
From: Arpad Ivany <arpad.ivany@hes.dev>
Date: Thu, 7 Nov 2024 12:03:55 +0100
Subject: [PATCH 6/7] feat(theme-builder): cr fixes

---
 .../scss/widgets/fluent/chat/_colors.scss     | 20 +++++++++---------
 .../scss/widgets/generic/chat/_colors.scss    | 21 ++++++++++---------
 .../scss/widgets/material/chat/_colors.scss   | 20 +++++++++---------
 3 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
index f3acdd8b35cb..e84f51349ed0 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
@@ -18,7 +18,7 @@ $chat-border-color: $base-border-color !default;
 $chat-messagebox-border-color: $chat-border-color !default;
 
 /**
-* $name 30. Avatar color
+* $name 30. Avatar text color
 * $type color
 */
 $chat-avatar-color: $base-text-color !default;
@@ -30,25 +30,25 @@ $chat-avatar-color: $base-text-color !default;
 $chat-avatar-background-color: $base-active-bg !default;
 
 /**
-* $name 40. Bubble color
+* $name 40. Bubble text color
 * $type color
 */
 $chat-bubble-color-primary: $base-text-color !default;
 
 /**
-* $name 41. Bubble background color primary
+* $name 41. Bubble background color (your messages)
 * $type color
 */
 $chat-bubble-background-color-primary: null !default;
 
 /**
-* $name 42. Bubble background color secondary
+* $name 42. Bubble background color (others' messages)
 * $type color
 */
 $chat-bubble-background-color-secondary: $base-border-color !default;
 
 /**
-* $name 50. Information color
+* $name 50. Message caption color
 * $type color
 */
 $chat-information-color: null !default;
@@ -96,16 +96,16 @@ $chat-alertlist-color: $base-invalid-color !default;
 $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
 
 /**
-* $name 82. Typing indicator circle background color
+* $name 82. Typing indicator central circle color
 * $type color
 */
-$chat-typingindicator-circle-bg-color: null !default;
+$chat-typingindicator-circle-bg-color-center: null !default;
 
 /**
-* $name 83. Typing indicator center circle background color
+* $name 83. Typing indicator outer circles color
 * $type color
 */
-$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;
@@ -144,7 +144,7 @@ $chat-typingindicator-circle-bg-color-center: null !default;
 }
 
 /**
-* $name 80. Typing indicator color
+* $name 80. Typing indicator text color
 * $type color
 */
 $chat-typingindicator-color: $chat-information-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
index 00083ae4699e..9c617d024d50 100644
--- a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -18,7 +18,7 @@ $chat-border-color: $base-border-color !default;
 $chat-messagebox-border-color: $chat-border-color !default;
 
 /**
-* $name 30. Avatar color
+* $name 30. Avatar text color
 * $type color
 */
 $chat-avatar-color: null !default;
@@ -30,25 +30,25 @@ $chat-avatar-color: null !default;
 $chat-avatar-background-color: $base-border-color !default;
 
 /**
-* $name 40. Bubble color
+* $name 40. Bubble text color
 * $type color
 */
 $chat-bubble-color-primary: null !default;
 
 /**
-* $name 41. Bubble background color primary
+* $name 41. Bubble background color (your messages)
 * $type color
 */
 $chat-bubble-background-color-primary: null !default;
 
 /**
-* $name 42. Bubble background color secondary
+* $name 42. Bubble background color (others' messages)
 * $type color
 */
 $chat-bubble-background-color-secondary: null !default;
 
 /**
-* $name 50. Information color
+* $name 50. Message caption color
 * $type color
 */
 $chat-information-color: null !default;
@@ -90,16 +90,17 @@ $chat-messagelist-empty-prompt-color: null !default;
 $chat-alertlist-color: $base-invalid-color !default;
 
 /**
-* $name 82. Typing indicator circle background color
+* $name 82. Typing indicator central circle color
 * $type color
 */
-$chat-typingindicator-circle-bg-color: null !default;
+$chat-typingindicator-circle-bg-color-center: null !default;
+
 
 /**
-* $name 83. Typing indicator center circle background color
+* $name 83. Typing indicator outer circles color
 * $type color
 */
-$chat-typingindicator-circle-bg-color-center: null !default;
+$chat-typingindicator-circle-bg-color: null !default;
 
 @if $color == "light" {
   $chat-avatar-color: $base-text-color !default;
@@ -237,7 +238,7 @@ $chat-typingindicator-circle-bg-color-center: null !default;
 }
 
 /**
-* $name 80. Typing indicator color
+* $name 80. Typing indicator text color
 * $type color
 */
 $chat-typingindicator-color: $chat-information-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
index 4d225d10d303..77f9cf0700df 100644
--- a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
@@ -17,7 +17,7 @@ $chat-border-color: $base-border-color !default;
 $chat-messagebox-border-color: $chat-border-color !default;
 
 /**
-* $name 30. Avatar color
+* $name 30. Avatar text color
 * $type color
 */
 $chat-avatar-color: $base-text-color !default;
@@ -29,25 +29,25 @@ $chat-avatar-color: $base-text-color !default;
 $chat-avatar-background-color: $base-border-color !default;
 
 /**
-* $name 40. Bubble color
+* $name 40. Bubble text color
 * $type color
 */
 $chat-bubble-color-primary: $base-text-color !default;
 
 /**
-* $name 41. Bubble background color primary
+* $name 41. Bubble background color (your messages)
 * $type color
 */
 $chat-bubble-background-color-primary: null !default;
 
 /**
-* $name 42. Bubble background color secondary
+* $name 42. Bubble background color (others' messages)
 * $type color
 */
 $chat-bubble-background-color-secondary: rgba($base-inverted-bg, 0.08) !default;
 
 /**
-* $name 50. Information color
+* $name 50. Message caption color
 * $type color
 */
 $chat-information-color: rgba($base-inverted-bg, 0.6) !default;
@@ -89,7 +89,7 @@ $chat-messagelist-empty-prompt-color: rgba($base-inverted-bg, 0.6) !default;
 $chat-alertlist-color: $base-invalid-color !default;
 
 /**
-* $name 80. Typing indicator color
+* $name 80. Typing indicator text color
 * $type color
 */
 $chat-typingindicator-color: $chat-information-color !default;
@@ -101,16 +101,16 @@ $chat-typingindicator-color: $chat-information-color !default;
 $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
 
 /**
-* $name 82. Typing indicator circle background color
+* $name 82. Typing indicator central circle color
 * $type color
 */
-$chat-typingindicator-circle-bg-color: rgba($base-inverted-bg, 0.4) !default;
+$chat-typingindicator-circle-bg-color-center: rgba($base-inverted-bg, 0.6) !default;
 
 /**
-* $name 83. Typing indicator center circle background color
+* $name 83. Typing indicator outer circles color
 * $type color
 */
-$chat-typingindicator-circle-bg-color-center: rgba($base-inverted-bg, 0.6) !default;
+$chat-typingindicator-circle-bg-color: rgba($base-inverted-bg, 0.4) !default;
 
 @if $mode == "light" {
   $chat-bubble-background-color-primary: rgba($base-accent, 0.08) !default;

From f9c4b7719a15c37d9023e6196eb496ada91a72af Mon Sep 17 00:00:00 2001
From: Arpad Ivany <arpad.ivany@hes.dev>
Date: Thu, 7 Nov 2024 12:51:26 +0100
Subject: [PATCH 7/7] fix(theme-builder): removed apostrophe that was
 terminating string in generated metadata

---
 packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss  | 2 +-
 packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss | 2 +-
 .../devextreme-scss/scss/widgets/material/chat/_colors.scss     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
index e84f51349ed0..d04e26614781 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
@@ -42,7 +42,7 @@ $chat-bubble-color-primary: $base-text-color !default;
 $chat-bubble-background-color-primary: null !default;
 
 /**
-* $name 42. Bubble background color (others' messages)
+* $name 42. Bubble background color (other messages)
 * $type color
 */
 $chat-bubble-background-color-secondary: $base-border-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
index 9c617d024d50..6bf434604fd6 100644
--- a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -42,7 +42,7 @@ $chat-bubble-color-primary: null !default;
 $chat-bubble-background-color-primary: null !default;
 
 /**
-* $name 42. Bubble background color (others' messages)
+* $name 42. Bubble background color (other messages)
 * $type color
 */
 $chat-bubble-background-color-secondary: null !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
index 77f9cf0700df..2618aac96fad 100644
--- a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
@@ -41,7 +41,7 @@ $chat-bubble-color-primary: $base-text-color !default;
 $chat-bubble-background-color-primary: null !default;
 
 /**
-* $name 42. Bubble background color (others' messages)
+* $name 42. Bubble background color (other messages)
 * $type color
 */
 $chat-bubble-background-color-secondary: rgba($base-inverted-bg, 0.08) !default;