From fbcd698f0c745bce8e00ecaa6f6affa01cdf0b5d Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 11 Oct 2024 19:32:42 +0400 Subject: [PATCH] adjust colors according to designer's remarks --- .../base/chat/layout/chat-avatar/_mixins.scss | 7 +- .../layout/chat-messagebubble/_mixins.scss | 2 + .../scss/widgets/fluent/chat/_colors.scss | 23 +++--- .../scss/widgets/fluent/chat/_index.scss | 7 +- .../scss/widgets/generic/chat/_colors.scss | 80 +++++++++++++------ .../scss/widgets/generic/chat/_index.scss | 9 ++- .../scss/widgets/generic/chat/_sizes.scss | 1 + .../scss/widgets/material/chat/_colors.scss | 6 +- .../scss/widgets/material/chat/_index.scss | 7 +- 9 files changed, 101 insertions(+), 41 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 index ee7b26cbfeac..28b421d47f5a 100644 --- 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 index 664958108e2f..a4d91f97cdd8 100644 --- 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 index e0e756928beb..6a514f3d053a 100644 --- 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,20 +20,23 @@ $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 + + @if $color == "blue" { + $chat-bubble-background-color-primary: lighten(desaturate(adjust-hue($base-accent, 3.8), 11.4), 55.5) !default; + } + + @if $color == "saas" { + $chat-bubble-background-color-primary: mix($base-bg, $base-accent, 90%) !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 +@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; // #999 $chat-messagelist-empty-icon-color: darken($base-icon-color, 25.88) !default; // #6B6B6B diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss index d74d55bc989d..dfd77eaeb3ba 100644 --- 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/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss index 16a6ba699261..a15a23f71f46 100644 --- 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: $base-text-color !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,10 +19,18 @@ $chat-messagelist-empty-icon-background-color: null !default; $chat-messagelist-empty-message-color: null !default; $chat-messagelist-empty-prompt-color: null !default; +$button-default-border-color: darken($base-accent, 5%) !default; +$button-default-text-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default; + +$chat-avatar-background-color: $base-border-color !default; // #DDDDDD + @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-avatar-color: $base-text-color !default; + $button-normal-contained-bg-hover: darken($base-element-bg, 4%) !default; + + $chat-bubble-color-primary: $base-text-color !default; + $chat-bubble-background-color-primary: $button-default-text-bg-hover !default; // #2D6DA31A + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !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 @@ -30,9 +40,12 @@ $chat-messagelist-empty-prompt-color: null !default; } @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-avatar-color: $base-text-color !default; + $button-normal-contained-bg-hover: lighten($base-element-bg, 4%) !default; + + $chat-bubble-color-primary: $base-text-color !default; + $chat-bubble-background-color-primary: $button-default-text-bg-hover !default; // #1997C61A + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !default; // #343434 $chat-information-color: lighten($base-bg, 32.55) !default; // #7D7D7D $chat-messagelist-empty-icon-color: darken(#dedede, 37.25) !default; // #7F7F7F @@ -42,9 +55,12 @@ $chat-messagelist-empty-prompt-color: null !default; } @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-avatar-color: $base-text-color !default; + $button-normal-contained-bg-hover: darken($base-element-bg, 4%) !default; + + $chat-bubble-color-primary: $base-text-color !default; + $chat-bubble-background-color-primary: $button-default-text-bg-hover !default; // #2D6DA31A + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !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 @@ -54,10 +70,13 @@ $chat-messagelist-empty-prompt-color: null !default; } @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-avatar-color: $base-inverted-color !default; + $button-normal-contained-bg-hover: $base-hover-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: $button-normal-contained-bg-hover !default; // #343434 + $chat-information-color: $base-inverted-color !default; $chat-messagelist-empty-icon-color: darken(#dedede, 37.25) !default; // #7F7F7F $chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default; // #3E3E3E @@ -66,9 +85,12 @@ $chat-messagelist-empty-prompt-color: null !default; } @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-avatar-color: $base-text-color !default; + $button-normal-contained-bg-hover: lighten($base-element-bg, 4%) !default; + + $chat-bubble-color-primary: $base-text-color !default; + $chat-bubble-background-color-primary: $button-default-text-bg-hover !default; // #1997C61A + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !default; // #343434 $chat-information-color: lighten($base-bg, 32.55) !default; // #7D7D7D $chat-messagelist-empty-icon-color: darken(#dedede, 37.25) !default; // #7F7F7F @@ -78,9 +100,12 @@ $chat-messagelist-empty-prompt-color: null !default; } @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-avatar-color: $base-text-color !default; + $button-normal-contained-bg-hover: lighten($base-element-bg, 4%) !default; + + $chat-bubble-color-primary: $base-text-color !default; + $chat-bubble-background-color-primary: $button-default-text-bg-hover !default; // #1997C61A + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !default; // #343434 $chat-information-color: lighten($base-bg, 32.55) !default; // #7D7D7D $chat-messagelist-empty-icon-color: darken(#dedede, 37.25) !default; // #7F7F7F @@ -90,9 +115,11 @@ $chat-messagelist-empty-prompt-color: null !default; } @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-avatar-color: $base-text-color !default; + $button-normal-contained-bg-hover: darken($base-element-bg, 4%) !default; + + $chat-bubble-background-color-primary: $button-default-text-bg-hover !default; // #2D6DA31A + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !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 @@ -102,9 +129,12 @@ $chat-messagelist-empty-prompt-color: null !default; } @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-avatar-color: $base-text-color !default; + $button-normal-contained-bg-hover: darken($base-element-bg, 4%) !default; + + $chat-bubble-color-primary: $base-text-color !default; + $chat-bubble-background-color-primary: $button-default-text-bg-hover !default; // #2D6DA31A + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !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 diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss index d74d55bc989d..35052790429b 100644 --- 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 index 0a9986d41b14..eb08f0b942cc 100644 --- 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 index 39bd50b4eb25..44fa6014073d 100644 --- 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,14 +20,12 @@ $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 } @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 diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss index d74d55bc989d..dfd77eaeb3ba 100644 --- 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 );