Chat: Add Generic color schemes

Co-authored-by: marker dao ® <[email protected]> Co-authored-by: EugeniyKiyashko <[email protected]>
DevExpress · Oct 15, 2024 · 20f80a1 · 20f80a1
1 parent d9df47e
commit 20f80a1
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 54 deletions.
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_mixins.scss
@@ -1,7 +1,12 @@
-@mixin chat-avatar($size, $background-color) {
+@mixin chat-avatar(
+  $size,
+  $color,
+  $background-color
+) {
   .dx-avatar {
     width: $size;
     height: $size;
+    color: $color;
     background-color: $background-color;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss
@@ -2,6 +2,7 @@
   $padding,
   $border-radius,
   $background-color-secondary,
+  $color-primary,
   $background-color-primary,
   $bubble-container-gap
 ) {
@@ -30,6 +31,7 @@
 
   .dx-chat-messagegroup-alignment-end {
     .dx-chat-messagebubble {
+      color: $color-primary;
       background-color: $background-color-primary;
 
       &:first-child {

diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
@@ -7,9 +7,11 @@
 $chat-background-color: $base-bg !default;
 $chat-border-color: $base-border-color !default;
 $chat-messagebox-border-color: $base-border-color !default;
-$chat-avatar-background-color: null !default;
+$chat-avatar-color: $base-text-color !default;
+$chat-avatar-background-color: $base-active-bg !default;
+$chat-bubble-color-primary: $base-text-color !default;
 $chat-bubble-background-color-primary: null !default;
-$chat-bubble-background-color-secondary: null !default;
+$chat-bubble-background-color-secondary: $base-border-color !default;
 $chat-information-color: null !default;
 
 $chat-messagelist-empty-icon-color: null !default;
@@ -18,23 +20,27 @@ $chat-messagelist-empty-message-color: $base-text-color !default;
 $chat-messagelist-empty-prompt-color: null !default;
 
 @if $mode == "light" {
-  $chat-avatar-background-color: darken($base-bg, 12.16) !default; // #E0E0E0
-  $chat-bubble-background-color-primary: lighten(desaturate(adjust-hue($base-accent, 4), 11.38), 55.49) !default; // #EBF3FC
-  $chat-bubble-background-color-secondary: darken($base-bg, 3.92) !default; // #F5F5F5
-  $chat-information-color: darken($base-bg, 56.08) !default; // #707070
-
-  $chat-messagelist-empty-icon-color: lighten($base-icon-color, 32.16) !default; // #B3B3B3
-  $chat-messagelist-empty-icon-background-color: darken($base-bg, 3.92) !default; // #F5F5F5
-  $chat-messagelist-empty-prompt-color: darken($base-label-color, 5.88) !default; // #616161
+  $chat-information-color: darken($base-bg, 56.08) !default;
+  $chat-messagelist-empty-icon-color: lighten($base-icon-color, 32.16) !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;
+
+  @if $color == "blue" {
+    $chat-bubble-background-color-primary: lighten(desaturate(adjust-hue($base-accent, 3.8), 11.4), 55.5) !default;
+    $chat-messagelist-empty-icon-background-color: darken($base-bg, 3.92) !default;
+  }
+
+  @if $color == "saas" {
+    $chat-bubble-background-color-primary: mix($base-bg, $base-accent, 90%) !default;
+    $chat-messagelist-empty-icon-background-color: $base-border-color !default;
+  }
 }
 
-@else if $mode == "dark" {
-  $chat-avatar-background-color: lighten($base-bg, 16.08) !default; // #525252
-  $chat-bubble-background-color-primary: darken(desaturate(adjust-hue($base-accent, -4), 14.69), 49.41) !default; // #082338
-  $chat-bubble-background-color-secondary: lighten($base-bg, 7.84) !default; // #3D3D3D
-  $chat-information-color: lighten($base-bg, 43.92) !default; // #999
+@if $mode == "dark" {
+  $chat-bubble-background-color-primary: darken(desaturate(adjust-hue($base-accent, 356.3), 14.7), 49.4) !default;
+  $chat-information-color: lighten($base-bg, 43.92) !default;
 
-  $chat-messagelist-empty-icon-color: darken($base-icon-color, 25.88) !default; // #6B6B6B
-  $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default; // #3D3D3D
-  $chat-messagelist-empty-prompt-color: lighten($base-label-color, 7.84) !default; // #ADADAD
+  $chat-messagelist-empty-icon-color: darken($base-icon-color, 25.88) !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;
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -10,7 +10,11 @@
   $chat-border-color,
   $chat-border-radius
 );
-@include chat-avatar($chat-avatar-size, $chat-avatar-background-color);
+@include chat-avatar(
+  $chat-avatar-size,
+  $chat-avatar-color,
+  $chat-avatar-background-color
+);
 @include chat-header($chat-header-padding);
 @include chat-messagebox(
   $chat-messagebox-padding,
@@ -23,6 +27,7 @@
   $chat-bubble-padding,
   $chat-bubble-border-radius,
   $chat-bubble-background-color-secondary,
+  $chat-bubble-color-primary,
   $chat-bubble-background-color-primary,
   $chat-bubble-container-gap
 );

diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss
@@ -166,12 +166,12 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
 
 @if $mode == "light" {
   @if $color == "blue"{
-    $datagrid-row-focused-bg: lighten(desaturate(adjust-hue($base-accent, 3), 0.98), 50.00) !default; // #d0e5fb
+    $datagrid-row-focused-bg: lighten(desaturate(adjust-hue($base-accent, 3), 0.98), 50.00) !default;
     $datagrid-filter-row-background-color: darken($datagrid-base-background-color, 2%) !default;
   }
 
   @if $color == "saas" {
-    $datagrid-row-focused-bg: lighten(adjust-hue($base-accent, -1), 26.47) !default; // #dbe6ff
+    $datagrid-row-focused-bg: lighten(adjust-hue($base-accent, -1), 26.47) !default;
     $datagrid-filter-row-background-color: $base-typography-bg !default;
   }
   $datagrid-columnchooser-item-color: $datagrid-base-color !default;

diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -6,8 +6,10 @@
 
 $chat-background-color: $base-bg !default;
 $chat-border-color: $base-border-color !default;
+$chat-avatar-color: null !default;
 $chat-messagebox-border-color: $base-border-color !default;
 $chat-avatar-background-color: null !default;
+$chat-bubble-color-primary: null !default;
 $chat-bubble-background-color-primary: null !default;
 $chat-bubble-background-color-secondary: null !default;
 $chat-information-color: null !default;
@@ -17,26 +19,107 @@ $chat-messagelist-empty-icon-background-color: null !default;
 $chat-messagelist-empty-message-color: null !default;
 $chat-messagelist-empty-prompt-color: null !default;
 
+$chat-avatar-background-color: $base-border-color !default;
+
 @if $color == "light" {
-  $chat-avatar-background-color: darken($base-bg, 13.33) !default; // #DDDDDD
-  $chat-bubble-background-color-primary: rgba(darken(saturate($base-accent, 0.32), 5.10), 0.1) !default; // #2D6DA31A
-  $chat-bubble-background-color-secondary: darken($base-bg, 3.92) !default; // #F5F5F5
-  $chat-information-color: darken($base-bg, 41.57) !default; // #959595
-
-  $chat-messagelist-empty-icon-color: lighten($base-icon-color, 46.67) !default; // #AAAAAA
-  $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default; // #EBEBEB 
-  $chat-messagelist-empty-message-color: darken($base-text-color, 6.67) !default; // #222222
-  $chat-messagelist-empty-prompt-color: lighten($base-label-color, 38.43) !default; // #959595
-}
-
-@else if $color == "dark" {
-  $chat-avatar-background-color: lighten($base-bg, 13.73) !default; // #4D4D4D
-  $chat-bubble-background-color-primary: rgba(darken(saturate($base-accent, 0.07), 5.10), 0.1) !default; // #1997C61A
-  $chat-bubble-background-color-secondary: lighten($base-bg, 3.92) !default; // #343434
-  $chat-information-color: lighten($base-bg, 32.55) !default; // #7D7D7D
-
-  $chat-messagelist-empty-icon-color: darken(#dedede, 37.25) !default; // #7F7F7F
-  $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default; // #3E3E3E
-  $chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default; // #FFFFFF
-  $chat-messagelist-empty-prompt-color: darken($base-label-color, 38.04) !default; // #7D7D7D
+  $chat-avatar-color: $base-text-color !default;
+  $chat-bubble-color-primary: $base-text-color !default;
+  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
+  $chat-information-color: darken($base-bg, 41.57) !default;
+
+  $chat-messagelist-empty-icon-color: lighten($base-icon-color, 46.67) !default;
+  $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !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;
+}
+
+@if $color == "dark" {
+  $chat-avatar-color: $base-text-color !default;
+  $chat-bubble-color-primary: $base-text-color !default;
+  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: lighten($base-element-bg, 4%) !default;
+  $chat-information-color: lighten($base-bg, 32.55) !default;
+
+  $chat-messagelist-empty-icon-color: darken($base-icon-color, 37.25) !default;
+  $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !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;
+}
+
+@if $color == "carmine" {
+  $chat-avatar-color: $base-text-color !default;
+  $chat-bubble-color-primary: $base-text-color !default;
+  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
+  $chat-information-color: darken($base-bg, 41.57) !default;
+
+  $chat-messagelist-empty-icon-color: $base-icon-color !default;
+  $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
+  $chat-messagelist-empty-message-color: $base-text-color !default;
+  $chat-messagelist-empty-prompt-color: $base-label-color !default;
+}
+
+@if $color == "contrast" {
+  $chat-avatar-color: $base-inverted-text-color !default;
+  $chat-bubble-color-primary: $base-inverted-text-color !default;
+  $chat-bubble-background-color-primary: $base-inverted-bg !default;
+  $chat-bubble-background-color-secondary: $base-hover-color !default;
+  $chat-information-color: $base-text-color !default;
+
+  $chat-messagelist-empty-icon-color: $base-bg !default;
+  $chat-messagelist-empty-icon-background-color: $base-inverted-bg !default;
+  $chat-messagelist-empty-message-color: $base-text-color !default;
+  $chat-messagelist-empty-prompt-color: $base-text-color !default;
+}
+
+@if $color == "darkmoon" {
+  $chat-avatar-color: $base-text-color !default;
+  $chat-bubble-color-primary: $base-text-color !default;
+  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: lighten($base-element-bg, 4%) !default;
+  $chat-information-color: lighten($base-bg, 32.55) !default;
+
+  $chat-messagelist-empty-icon-color: $base-icon-color !default;
+  $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
+  $chat-messagelist-empty-message-color: $base-text-color !default;
+  $chat-messagelist-empty-prompt-color: $base-label-color !default;
+}
+
+@if $color == "darkviolet" {
+  $chat-avatar-color: $base-text-color !default;
+  $chat-bubble-color-primary: $base-text-color !default;
+  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: lighten($base-element-bg, 4%) !default;
+  $chat-information-color: lighten($base-bg, 32.55) !default;
+
+  $chat-messagelist-empty-icon-color: darken($base-icon-color, 37.25) !default;
+  $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !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;
+}
+
+@if $color == "greenmist" {
+  $chat-avatar-color: $base-text-color !default;
+  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
+  $chat-information-color: darken($base-bg, 41.57) !default;
+
+  $chat-messagelist-empty-icon-color: $base-icon-color !default;
+  $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
+  $chat-messagelist-empty-message-color: $base-text-color !default;
+  $chat-messagelist-empty-prompt-color: $base-label-color !default;
+}
+
+@if $color == "softblue" {
+  $chat-avatar-color: $base-text-color !default;
+  $chat-bubble-color-primary: $base-text-color !default;
+  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
+  $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
+  $chat-information-color: darken($base-bg, 41.57) !default;
+
+  $chat-messagelist-empty-icon-color: $base-icon-color !default;
+  $chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default;
+  $chat-messagelist-empty-message-color: $base-text-color !default;
+  $chat-messagelist-empty-prompt-color: $base-label-color !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -1,6 +1,8 @@
 @use "../../base/chat";
 @use "colors" as *;
+@use "../colors" as *;
 @use "sizes" as *;
+@use "../sizes" as *;
 @use "../../base/chat/mixins" as *;
 
 // adduse
@@ -10,7 +12,11 @@
   $chat-border-color,
   $chat-border-radius
 );
-@include chat-avatar($chat-avatar-size, $chat-avatar-background-color);
+@include chat-avatar(
+  $chat-avatar-size,
+  $chat-avatar-color,
+  $chat-avatar-background-color,
+);
 @include chat-header($chat-header-padding);
 @include chat-messagebox(
   $chat-messagebox-padding,
@@ -23,6 +29,7 @@
   $chat-bubble-padding,
   $chat-bubble-border-radius,
   $chat-bubble-background-color-secondary,
+  $chat-bubble-color-primary,
   $chat-bubble-background-color-primary,
   $chat-bubble-container-gap
 );

diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
@@ -1,6 +1,7 @@
 @use "../textEditor/colors" as *;
 @use "../sizes" as *;
 @use "../colors" as *;
+@use "colors" as *;
 
 // adduse
 

diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
@@ -7,7 +7,9 @@
 $chat-background-color: $base-bg !default;
 $chat-border-color: $base-border-color !default;
 $chat-messagebox-border-color: $base-border-color !default;
-$chat-avatar-background-color: null !default;
+$chat-avatar-color: $base-text-color !default;
+$chat-avatar-background-color: $base-border-color !default;
+$chat-bubble-color-primary: $base-text-color !default;
 $chat-bubble-background-color-primary: null !default;
 $chat-bubble-background-color-secondary: null !default;
 $chat-information-color: null !default;
@@ -18,15 +20,13 @@ $chat-messagelist-empty-message-color: rgba($base-inverted-bg, 0.87) !default;
 $chat-messagelist-empty-prompt-color: rgba($base-inverted-bg, 0.6) !default;
 
 @if $mode == "light" {
-  $chat-avatar-background-color: darken($base-bg, 12.16) !default; // #E0E0E0
-  $chat-bubble-background-color-primary: rgba($base-accent, 0.08) !default; // #03A9F414
-  $chat-bubble-background-color-secondary: rgba($base-inverted-bg, 0.08) !default; // #00000014
-  $chat-information-color: rgba(darken($base-bg, 100.00), 0.6) !default; // #0009
+  $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;
 }
 
 @else if $mode == "dark" {
-  $chat-avatar-background-color: lighten(desaturate($base-bg, 3.77), 10.20) !default; // #515159
-  $chat-bubble-background-color-primary: rgba(lighten($base-accent, 19.22), 0.08) !default; // #5CCBFD14
-  $chat-bubble-background-color-secondary: rgba(lighten(desaturate(adjust-hue(#363640, -240), 8.47), 76.86), 0.08) !default; // #FFFFFF14
-  $chat-information-color: rgba(lighten(desaturate(adjust-hue(#363640, -240), 8.47), 76.86), 0.6) !default; // #FFF9
+  $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;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -10,7 +10,11 @@
   $chat-border-color,
   $chat-border-radius
 );
-@include chat-avatar($chat-avatar-size, $chat-avatar-background-color);
+@include chat-avatar(
+  $chat-avatar-size,
+  $chat-avatar-color,
+  $chat-avatar-background-color
+);
 @include chat-header($chat-header-padding);
 @include chat-messagebox(
   $chat-messagebox-padding,
@@ -23,6 +27,7 @@
   $chat-bubble-padding,
   $chat-bubble-border-radius,
   $chat-bubble-background-color-secondary,
+  $chat-bubble-color-primary,
   $chat-bubble-background-color-primary,
   $chat-bubble-container-gap
 );