From 1f26b02fcd4b2b29e30092074efad32e3cdd5fd8 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 11 Oct 2024 19:47:49 +0400 Subject: [PATCH] fix color --- .../scss/widgets/fluent/chat/_colors.scss | 18 +-- .../scss/widgets/fluent/gridBase/_colors.scss | 4 +- .../scss/widgets/generic/chat/_colors.scss | 128 +++++++++--------- .../scss/widgets/material/chat/_colors.scss | 12 +- 4 files changed, 82 insertions(+), 80 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss index 6a514f3d053a..49459617c00f 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss @@ -20,26 +20,28 @@ $chat-messagelist-empty-message-color: $base-text-color !default; $chat-messagelist-empty-prompt-color: null !default; @if $mode == "light" { - $chat-information-color: darken($base-bg, 56.08) !default; // #707070 + $chat-information-color: darken($base-bg, 56.08) !default; - $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-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; } } @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-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/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss index 83f2a5a7516a..e9c77b2950d8 100644 --- 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 index a15a23f71f46..ca000571995c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss @@ -6,7 +6,7 @@ $chat-background-color: $base-bg !default; $chat-border-color: $base-border-color !default; -$chat-avatar-color: $base-text-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; @@ -22,21 +22,21 @@ $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 +$chat-avatar-background-color: $base-border-color !default; @if $color == "light" { $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 - $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 + $chat-bubble-background-color-primary: $button-default-text-bg-hover !default; + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !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" { @@ -44,14 +44,14 @@ $chat-avatar-background-color: $base-border-color !default; // #DDDDDD $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 - $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-bubble-background-color-primary: $button-default-text-bg-hover !default; + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !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" { @@ -59,29 +59,29 @@ $chat-avatar-background-color: $base-border-color !default; // #DDDDDD $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 - $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 + $chat-bubble-background-color-primary: $button-default-text-bg-hover !default; + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !default; + $chat-information-color: darken($base-bg, 41.57) !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 == "contrast" { - $chat-avatar-color: $base-inverted-color !default; + $chat-avatar-color: $base-inverted-text-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-bubble-background-color-secondary: $button-normal-contained-bg-hover !default; + $chat-information-color: $base-text-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 - $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-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" { @@ -89,14 +89,14 @@ $chat-avatar-background-color: $base-border-color !default; // #DDDDDD $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 - $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-bubble-background-color-primary: $button-default-text-bg-hover !default; + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !default; + $chat-information-color: lighten($base-bg, 32.55) !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 == "darkviolet" { @@ -104,28 +104,28 @@ $chat-avatar-background-color: $base-border-color !default; // #DDDDDD $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 - $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-bubble-background-color-primary: $button-default-text-bg-hover !default; + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !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; $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-bubble-background-color-primary: $button-default-text-bg-hover !default; + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !default; + $chat-information-color: darken($base-bg, 41.57) !default; - $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 + $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 == "softblue" { @@ -133,12 +133,12 @@ $chat-avatar-background-color: $base-border-color !default; // #DDDDDD $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 - $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 + $chat-bubble-background-color-primary: $button-default-text-bg-hover !default; + $chat-bubble-background-color-secondary: $button-normal-contained-bg-hover !default; + $chat-information-color: darken($base-bg, 41.57) !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; } diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss index 44fa6014073d..22d37346b27f 100644 --- a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss @@ -20,13 +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-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-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; }