Chat: Apply correct typography and colors to File (#31477)

marker-dao · marker dao ® · web-flow · commit 0e749282affa · 2025-10-27T15:55:31.000+01:00
Co-authored-by: marker dao ® &lt;youdontknow@marker-dao.eth&gt;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
@@ -124,7 +124,7 @@ $chat-typingindicator-circle-bg-color: null !default;
 
 $chat-file-container-background-color: $base-bg !default;
 $chat-file-container-box-shadow: null !default;
-$chat-file-secondary-color: lighten($base-icon-color, 32.16) !default;
+$chat-file-secondary-color: null !default;
 
 @if $mode == "light" {
   $chat-bubble-background-color-secondary: darken($base-bg, 3.92) !default;
@@ -140,7 +140,8 @@ $chat-file-secondary-color: lighten($base-icon-color, 32.16) !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 29.16) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 56.08) !default;
 
-  $chat-file-container-box-shadow: 0 0 2px 0 rgba($base-inverted-bg, 0.12), 0 1px 2px 0 rgba($base-inverted-bg, 0.14) !default;
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
+  $chat-file-secondary-color: lighten($base-text-color, 29.80) !default;
 
   @if $color == "blue" {
     $chat-bubble-background-color-primary: lighten(desaturate(adjust-hue($base-accent, 3.8), 11.4), 55.5) !default;
@@ -169,7 +170,8 @@ $chat-file-secondary-color: lighten($base-icon-color, 32.16) !default;
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 33.92) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 43.92) !default;
 
-  $chat-file-container-box-shadow: 0 0 2px 0 rgba($base-bg, 0.12), 0 1px 2px 0 rgba($base-bg, 0.14) !default;
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.28), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.32) !default;
+  $chat-file-secondary-color: darken($base-text-color, 40.00) !default;
 }
 
 /**
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -2,6 +2,7 @@
 @use "colors" as *;
 @use "sizes" as *;
 @use "../../base/chat/mixins" as *;
+@use "../common/mixins" as *;
 
 // adduse
 
@@ -126,3 +127,7 @@
   $chat-confirmation-popup-toolbar-padding-inline,
   $chat-confirmation-popup-toolbar-gap,
 );
+
+.dx-chat-file {
+  @include dx-base-typography();
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/fluent/common/_mixins.scss
@@ -22,7 +22,6 @@ $badge-invalid-bg: $base-invalid-color;
   @include disabled-widget-mixin($opacity);
 }
 
-
 @mixin badge-settings() {
   pointer-events: none;
   position: absolute;
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
@@ -124,7 +124,7 @@ $chat-typingindicator-circle-bg-color: null !default;
 
 $chat-file-container-background-color: $base-bg !default;
 $chat-file-container-box-shadow: null !default;
-$chat-file-secondary-color: lighten($base-icon-color, 32.16) !default;
+$chat-file-secondary-color: $base-icon-color !default;
 
 @if $color == "light" {
   $chat-avatar-color: $base-text-color !default;
@@ -145,7 +145,7 @@ $chat-file-secondary-color: lighten($base-icon-color, 32.16) !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
 
-  $chat-file-container-box-shadow: 0 0 2px 0 rgba($base-inverted-bg, 0.12), 0 1px 2px 0 rgba($base-inverted-bg, 0.14) !default;
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
 }
 
 @if $color == "dark" {
@@ -167,7 +167,7 @@ $chat-file-secondary-color: lighten($base-icon-color, 32.16) !default;
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
 
-  $chat-file-container-box-shadow: 0 0 2px 0 rgba($base-bg, 0.12), 0 1px 2px 0 rgba($base-bg, 0.14) !default;
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.28), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.32) !default;
 }
 
 @if $color == "carmine" {
@@ -189,7 +189,7 @@ $chat-file-secondary-color: lighten($base-icon-color, 32.16) !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
 
-  $chat-file-container-box-shadow: 0 0 2px 0 rgba($base-inverted-bg, 0.12), 0 1px 2px 0 rgba($base-inverted-bg, 0.14) !default;
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
 }
 
 @if $color == "contrast" {
@@ -211,7 +211,7 @@ $chat-file-secondary-color: lighten($base-icon-color, 32.16) !default;
   $chat-typingindicator-circle-bg-color: $base-inverted-bg !default;
   $chat-typingindicator-circle-bg-color-center: $base-inverted-bg !default;
 
-  $chat-file-container-box-shadow: 0 0 2px 0 rgba($base-bg, 0.12), 0 1px 2px 0 rgba($base-bg, 0.14) !default;
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.28), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.32) !default;
 }
 
 @if $color == "darkmoon" {
@@ -233,7 +233,7 @@ $chat-file-secondary-color: lighten($base-icon-color, 32.16) !default;
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
 
-  $chat-file-container-box-shadow: 0 0 2px 0 rgba($base-bg, 0.12), 0 1px 2px 0 rgba($base-bg, 0.14) !default;
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.28), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.32) !default;
 }
 
 @if $color == "darkviolet" {
@@ -255,7 +255,7 @@ $chat-file-secondary-color: lighten($base-icon-color, 32.16) !default;
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
 
-  $chat-file-container-box-shadow: 0 0 2px 0 rgba($base-bg, 0.12), 0 1px 2px 0 rgba($base-bg, 0.14) !default;
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.28), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.32) !default;
 }
 
 @if $color == "greenmist" {
@@ -277,7 +277,7 @@ $chat-file-secondary-color: lighten($base-icon-color, 32.16) !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
 
-  $chat-file-container-box-shadow: 0 0 2px 0 rgba($base-inverted-bg, 0.12), 0 1px 2px 0 rgba($base-inverted-bg, 0.14) !default;
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
 }
 
 @if $color == "softblue" {
@@ -299,7 +299,7 @@ $chat-file-secondary-color: lighten($base-icon-color, 32.16) !default;
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
 
-  $chat-file-container-box-shadow: 0 0 2px 0 rgba($base-inverted-bg, 0.12), 0 1px 2px 0 rgba($base-inverted-bg, 0.14) !default;
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
 }
 
 /**
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -5,6 +5,7 @@
 @use "../sizes" as *;
 @use "../../base/chat/mixins" as *;
 @use "../popup/sizes" as *;
+@use "../common/mixins" as *;
 
 // adduse
 
@@ -129,3 +130,7 @@
   $chat-confirmation-popup-toolbar-padding-inline,
   $chat-confirmation-popup-toolbar-gap,
 );
+
+.dx-chat-file {
+  @include dx-base-typography();
+}
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/material/chat/_colors.scss
@@ -129,16 +129,16 @@ $chat-typingindicator-circle-bg-color: rgba($base-inverted-bg, 0.4) !default;
 
 $chat-file-container-background-color: $base-bg !default;
 $chat-file-container-box-shadow: null !default;
-$chat-file-secondary-color: lighten($base-icon-color, 32.16) !default;
+$chat-file-secondary-color: $base-icon-color !default;
 
 @if $mode == "light" {
   $chat-bubble-background-color-primary: rgba($base-accent, 0.08) !default;
-  $chat-file-container-box-shadow: 0 0 2px 0 rgba($base-inverted-bg, 0.12), 0 1px 2px 0 rgba($base-inverted-bg, 0.14) !default;
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
 }
 
 @else if $mode == "dark" {
   $chat-bubble-background-color-primary: rgba(lighten($base-accent, 19.22), 0.08) !default;
-  $chat-file-container-box-shadow: 0 0 2px 0 rgba($base-bg, 0.12), 0 1px 2px 0 rgba($base-bg, 0.14) !default;
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.28), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.32) !default;
 }
 
 $chat-messagelist-contextmenu-delete-button-color: $base-danger !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -3,6 +3,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../../base/chat/mixins" as *;
+@use "../common/mixins" as *;
 
 // adduse
 
@@ -127,3 +128,7 @@
   $chat-confirmation-popup-toolbar-padding-inline,
   $chat-confirmation-popup-toolbar-gap,
 );
+
+.dx-chat-file {
+  @include dx-base-typography();
+}

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,6 @@ $badge-invalid-bg: $base-invalid-color;`
`22`	`22`	`@include disabled-widget-mixin($opacity);`
`23`	`23`	`}`
`24`	`24`
`25`		`-`
`26`	`25`	`@mixin badge-settings() {`
`27`	`26`	`pointer-events: none;`
`28`	`27`	`position: absolute;`