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;