diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
index afd30c3e1861..d04e26614781 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
@@ -4,29 +4,109 @@
 
 // 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;
+$chat-messagebox-border-color: $chat-border-color !default;
+
+/**
+* $name 30. Avatar text color
+* $type color
+*/
 $chat-avatar-color: $base-text-color !default;
+
+/**
+* $name 31. Avatar background color
+* $type color
+*/
 $chat-avatar-background-color: $base-active-bg !default;
+
+/**
+* $name 40. Bubble text color
+* $type color
+*/
 $chat-bubble-color-primary: $base-text-color !default;
+
+/**
+* $name 41. Bubble background color (your messages)
+* $type color
+*/
 $chat-bubble-background-color-primary: null !default;
+
+/**
+* $name 42. Bubble background color (other messages)
+* $type color
+*/
 $chat-bubble-background-color-secondary: $base-border-color !default;
+
+/**
+* $name 50. Message caption 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 70. Error color
+* $type color
+*/
 $chat-alertlist-color: $base-invalid-color !default;
 
-$chat-typingindicator-color: null !default;
+/**
+* $name 81. Typing indicator background color
+* $type color
+*/
 $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
-$chat-typingindicator-circle-bg-color: null !default;
+
+/**
+* $name 82. Typing indicator central circle color
+* $type color
+*/
 $chat-typingindicator-circle-bg-color-center: null !default;
 
+/**
+* $name 83. Typing indicator outer circles color
+* $type color
+*/
+$chat-typingindicator-circle-bg-color: null !default;
+
 @if $mode == "light" {
   $chat-information-color: darken($base-bg, 56.08) !default;
 
@@ -35,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;
 
@@ -60,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 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 913d965b25a8..6bf434604fd6 100644
--- a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -4,29 +4,104 @@
 
 // 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: $chat-border-color !default;
+
+/**
+* $name 30. Avatar text 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 text color
+* $type color
+*/
 $chat-bubble-color-primary: null !default;
+
+/**
+* $name 41. Bubble background color (your messages)
+* $type color
+*/
 $chat-bubble-background-color-primary: null !default;
+
+/**
+* $name 42. Bubble background color (other messages)
+* $type color
+*/
 $chat-bubble-background-color-secondary: null !default;
+
+/**
+* $name 50. Message caption 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 70. Error color
+* $type color
+*/
 $chat-alertlist-color: $base-invalid-color !default;
 
-$chat-typingindicator-color: null !default;
-$chat-typingindicator-bubble-bg-color: null !default;
-$chat-typingindicator-circle-bg-color: null !default;
+/**
+* $name 82. Typing indicator central circle color
+* $type color
+*/
 $chat-typingindicator-circle-bg-color-center: null !default;
 
+
+/**
+* $name 83. Typing indicator outer circles color
+* $type color
+*/
+$chat-typingindicator-circle-bg-color: null !default;
+
 @if $color == "light" {
   $chat-avatar-color: $base-text-color !default;
   $chat-bubble-color-primary: $base-text-color !default;
@@ -40,8 +115,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;
 }
@@ -59,8 +132,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;
 }
@@ -78,8 +149,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;
 }
@@ -97,8 +166,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;
 }
@@ -116,8 +183,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;
 }
@@ -135,8 +200,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;
 }
@@ -153,8 +216,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;
 }
@@ -172,8 +233,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 text 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 fb8727778c67..2618aac96fad 100644
--- a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
@@ -3,53 +3,119 @@
 
 // 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;
+$chat-messagebox-border-color: $chat-border-color !default;
+
+/**
+* $name 30. Avatar text color
+* $type color
+*/
 $chat-avatar-color: $base-text-color !default;
+
+/**
+* $name 31. Avatar background color
+* $type color
+*/
 $chat-avatar-background-color: $base-border-color !default;
+
+/**
+* $name 40. Bubble text color
+* $type color
+*/
 $chat-bubble-color-primary: $base-text-color !default;
+
+/**
+* $name 41. Bubble background color (your messages)
+* $type color
+*/
 $chat-bubble-background-color-primary: null !default;
-$chat-bubble-background-color-secondary: null !default;
-$chat-information-color: null !default;
 
-$chat-messagelist-day-header-color: null !default;
+/**
+* $name 42. Bubble background color (other messages)
+* $type color
+*/
+$chat-bubble-background-color-secondary: rgba($base-inverted-bg, 0.08) !default;
+
+/**
+* $name 50. Message caption color
+* $type color
+*/
+$chat-information-color: rgba($base-inverted-bg, 0.6) !default;
+
+/**
+* $name 60. Day header color
+* $type color
+*/
+$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
+*/
 $chat-messagelist-empty-prompt-color: rgba($base-inverted-bg, 0.6) !default;
 
+/**
+* $name 70. Error color
+* $type color
+*/
 $chat-alertlist-color: $base-invalid-color !default;
 
-$chat-typingindicator-color: null !default;
-$chat-typingindicator-bubble-bg-color: null !default;
-$chat-typingindicator-circle-bg-color: null !default;
-$chat-typingindicator-circle-bg-color-center: null !default;
+/**
+* $name 80. Typing indicator text color
+* $type color
+*/
+$chat-typingindicator-color: $chat-information-color !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;
+/**
+* $name 81. Typing indicator background color
+* $type color
+*/
+$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
 
-  $chat-information-color: rgba(darken($base-bg, 100.00), 0.6) !default;
+/**
+* $name 82. Typing indicator central circle color
+* $type color
+*/
+$chat-typingindicator-circle-bg-color-center: rgba($base-inverted-bg, 0.6) !default;
 
-  $chat-messagelist-day-header-color: rgba(darken($base-bg, 100.00), 0.6) !default;
+/**
+* $name 83. Typing indicator outer circles color
+* $type color
+*/
+$chat-typingindicator-circle-bg-color: rgba($base-inverted-bg, 0.4) !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;
+@if $mode == "light" {
+  $chat-bubble-background-color-primary: rgba($base-accent, 0.08) !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;
 }