Skip to content

Commit

Permalink
adjust colors according to designer's remarks
Browse files Browse the repository at this point in the history
  • Loading branch information
EugeniyKiyashko committed Oct 11, 2024
1 parent 53826c0 commit fa075fe
Show file tree
Hide file tree
Showing 9 changed files with 101 additions and 41 deletions.
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
$padding,
$border-radius,
$background-color-secondary,
$color-primary,
$background-color-primary,
$bubble-container-gap
) {
Expand Down Expand Up @@ -30,6 +31,7 @@

.dx-chat-messagegroup-alignment-end {
.dx-chat-messagebubble {
color: $color-primary;
background-color: $background-color-primary;

&:first-child {
Expand Down
23 changes: 14 additions & 9 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
);
Expand Down
80 changes: 55 additions & 25 deletions packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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,
Expand All @@ -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
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@use "../textEditor/colors" as *;
@use "../sizes" as *;
@use "../colors" as *;
@use "colors" as *;

// adduse

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
);
Expand Down

0 comments on commit fa075fe

Please sign in to comment.