Chat: Add Generic color schemes

DevExpress · Oct 10, 2024 · 53826c0 · 53826c0
1 parent 3ba7d05
commit 53826c0
Showing 1 changed file with 73 additions and 1 deletion.
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -29,7 +29,7 @@ $chat-messagelist-empty-prompt-color: null !default;
   $chat-messagelist-empty-prompt-color: lighten($base-label-color, 38.43) !default; // #959595
 }
 
-@else if $color == "dark" {
+@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
@@ -40,3 +40,75 @@ $chat-messagelist-empty-prompt-color: null !default;
   $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
 }
+
+@if $color == "carmine" {
+  $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
+}
+
+@if $color == "contrast" {
+  $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
+}
+
+@if $color == "darkmoon" {
+  $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
+}
+
+@if $color == "darkviolet" {
+  $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
+}
+
+@if $color == "greenmist" {
+  $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
+}
+
+@if $color == "softblue" {
+  $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
+}