devextreme-themebuilder 25.1.1-alpha → 25.1.2-beta

package/data/scss/widgets/material/cardView/_colors.scss

@@ -0,0 +1,167 @@
+@use '../colors' as *;
+@use '../../base/cardView/variables' as *;
+@use '../../base/cardView/header_panel/variables' as *;
+@use '../../base/cardView/header_panel/item/variables' as *;
+@use '../../base/cardView/content_view/content/card/variables' as *;
+@use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/cover/variables' as *;
+@use '../../base/cardView/content_view/content/card/content/variables' as *;
+@use '../../base/cardView/content_view/content/variables' as *;
+@use '../../base/cardView/content_view/no_data/variables' as *;
+@use '../../base/cardView/column_chooser/variables' as *;
+@use "sass:color";
+
+// adduse
+
+$cardview-material-background-color: null !default;
+
+$cardview-material-header-filter-icon-empty-color: null !default;
+$cardview-material-header-filter-icon-selected-color: null !default;
+
+$cardview-material-dropzone-text-color: null !default;
+$cardview-material-dropzone-background-color: null !default;
+$cardview-material-dropzone-border-color: null !default;
+
+$cardview-material-header-item-border-color: null !default;
+
+$cardview-material-header-item-background-color: null !default;
+$cardview-material-header-item-hovered-background-color: null !default;
+$cardview-material-header-item-hovered-border-color: null !default;
+
+$cardview-material-header-item-prohibition-icon-color: null !default;
+
+$cardview-material-nodata-text-color: null !default;
+$cardview-material-nodata-icon-container-background-color: null !default;
+
+$cardview-material-card-content-field-value-highlight-color: null !default;
+$cardview-material-card-content-field-value-highlight-background: null !default;
+$cardview-material-card-content-field-value-highlight-border-radius: null !default;
+$cardview-material-card-content-field-value-highlight-padding: null !default;
+$cardview-material-card-content-field-value-highlight-font-weight: null !default;
+$cardview-material-card-content-field-value-highlight-box-shadow: null !default;
+
+$cardview-material-card-cover-background-color: null !default;
+
+$cardview-material-card-cover-noimage-background-color: null !default;
+$cardview-material-card-cover-noimage-icon-color: null !default;
+
+$cardview-material-card-selection-background-color: null !default;
+
+$cardview-material-card-border-color: null !default;
+$cardview-material-card-background-color: null !default;
+
+@if $mode == 'light' {
+  $cardview-material-background-color: $base-bg !default;
+
+  $cardview-material-header-filter-icon-empty-color: $base-text-color !default;
+  $cardview-material-header-filter-icon-selected-color: $base-accent !default;
+
+  $cardview-material-dropzone-text-color: $base-accent !default;
+  $cardview-material-dropzone-background-color: mix($base-accent, $base-bg, 8%) !default;
+  $cardview-material-dropzone-border-color: $base-accent !default;
+
+  $cardview-material-header-item-background-color: darken($base-bg, 7.84)  !default;
+  $cardview-material-header-item-border-color: $cardview-material-header-item-background-color !default;
+  $cardview-material-header-item-hovered-background-color: darken($cardview-material-header-item-background-color, 4.31) !default;
+  $cardview-material-header-item-hovered-border-color: $cardview-material-header-item-hovered-background-color !default;
+
+  $cardview-material-header-item-prohibition-icon-color: darken(saturate(adjust-hue($base-danger, -4), 22.80), 9.61) !default;
+
+  $cardview-material-nodata-text-color: $base-label-color !default;
+  $cardview-material-nodata-icon-container-background-color: darken($base-bg, 7.84) !default;
+
+  $cardview-material-card-content-field-value-highlight-color: $base-text-color !default;
+  $cardview-material-card-content-field-value-highlight-background: $base-warning !default;
+  $cardview-material-card-content-field-value-highlight-border-radius: 5px;
+  $cardview-material-card-content-field-value-highlight-padding: .125em 0.2em;
+  $cardview-material-card-content-field-value-highlight-font-weight: 500;
+  $cardview-material-card-content-field-value-highlight-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+
+  $cardview-material-card-cover-background-color: #FFF !default;
+
+  $cardview-material-card-cover-noimage-background-color: darken($base-bg, 7.84) !default;
+  $cardview-material-card-cover-noimage-icon-color: color.change($base-text-color, $alpha: 0.38) !default;
+
+  $cardview-material-card-selection-background-color: color.change($base-accent, $alpha: 0.08) !default;
+
+  $cardview-material-card-border-color: $base-border-color !default;
+  $cardview-material-card-background-color: $base-bg !default;
+}
+
+@if $mode == "dark" {
+  $cardview-material-background-color: $base-bg !default;
+
+  $cardview-material-header-filter-icon-empty-color: $base-text-color !default;
+  $cardview-material-header-filter-icon-selected-color: $base-accent !default;
+
+  $cardview-material-dropzone-text-color: $base-accent !default;
+  $cardview-material-dropzone-background-color: mix(lighten($base-accent, 19.22), $base-bg, 8%) !default;
+  $cardview-material-dropzone-border-color: $base-accent !default;
+
+  $cardview-material-header-item-background-color: lighten(desaturate($base-bg, 0.30), 8.04) !default;
+  $cardview-material-header-item-border-color: $cardview-material-header-item-background-color!default;
+  $cardview-material-header-item-hovered-background-color: lighten(desaturate($cardview-material-header-item-background-color, 3.47), 2.16) !default;
+  $cardview-material-header-item-hovered-border-color: $cardview-material-header-item-hovered-background-color !default;
+
+  $cardview-material-header-item-prohibition-icon-color: darken(desaturate($base-danger, 0.27), 7.45) !default;
+
+  $cardview-material-nodata-text-color: $base-label-color !default;
+  $cardview-material-nodata-icon-container-background-color: lighten(desaturate($base-bg, 0.30), 8.04) !default;
+
+  $cardview-material-card-content-field-value-highlight-color: $base-text-color !default;
+  $cardview-material-card-content-field-value-highlight-background: $base-warning !default;
+  $cardview-material-card-content-field-value-highlight-border-radius: 5px;
+  $cardview-material-card-content-field-value-highlight-padding: .125em 0.2em;
+  $cardview-material-card-content-field-value-highlight-font-weight: 500;
+  $cardview-material-card-content-field-value-highlight-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+
+  $cardview-material-card-cover-background-color: #FFF !default;
+
+  $cardview-material-card-cover-noimage-background-color: lighten(desaturate($base-bg, 0.30), 8.04) !default;
+  $cardview-material-card-cover-noimage-icon-color: color.change($base-text-color, $alpha: 0.38) !default;
+
+  $cardview-material-card-selection-background-color: color.change(lighten($base-accent, 19.22), $alpha: 0.08) !default;
+
+  $cardview-material-card-border-color: $base-border-color !default;
+  $cardview-material-card-background-color: $base-bg !default;
+}
+
+$cardview-background-color: $cardview-material-background-color !default;
+$cardview-link-color: $base-accent !default;
+
+$cardview-header-filter-icon-empty-color: $cardview-material-header-filter-icon-empty-color !default;
+$cardview-header-filter-icon-selected-color: $cardview-material-header-filter-icon-selected-color !default;
+
+$cardview-dropzone-text-color: $cardview-material-dropzone-text-color !default;
+$cardview-dropzone-background-color: $cardview-material-dropzone-background-color !default;
+$cardview-dropzone-border-color: $cardview-material-dropzone-border-color !default;
+
+$cardview-header-item-border-color: $cardview-material-header-item-border-color !default;
+
+$cardview-header-item-background-color: $cardview-material-header-item-background-color !default;
+$cardview-header-item-hovered-background-color: $cardview-material-header-item-hovered-background-color !default;
+$cardview-header-item-hovered-border-color: $cardview-material-header-item-hovered-border-color !default;
+
+$cardview-header-item-prohibition-icon-color: $cardview-material-header-item-prohibition-icon-color !default;
+
+$cardview-nodata-text-color: $cardview-material-nodata-text-color !default;
+$cardview-nodata-icon-container-background-color: $cardview-material-nodata-icon-container-background-color !default;
+
+$cardview-card-content-field-value-highlight-color: $cardview-material-card-content-field-value-highlight-color !default;
+$cardview-card-content-field-value-highlight-background: $cardview-material-card-content-field-value-highlight-background !default;
+$cardview-card-content-field-value-highlight-border-radius: $cardview-material-card-content-field-value-highlight-border-radius !default;
+$cardview-card-content-field-value-highlight-padding: $cardview-material-card-content-field-value-highlight-padding !default;
+$cardview-card-content-field-value-highlight-font-weight: $cardview-material-card-content-field-value-highlight-font-weight !default;
+$cardview-card-content-field-value-highlight-box-shadow: $cardview-material-card-content-field-value-highlight-box-shadow !default;
+
+$cardview-card-cover-background-color: $cardview-material-card-cover-background-color !default;
+
+$cardview-card-cover-noimage-background-color: $cardview-material-card-cover-noimage-background-color !default;
+$cardview-card-cover-noimage-icon-color: $cardview-material-card-cover-noimage-icon-color !default;
+
+$cardview-card-selection-background-color: $cardview-material-card-selection-background-color !default;
+
+$cardview-card-border-color: $cardview-material-card-border-color !default;
+$cardview-card-background-color: $cardview-material-card-background-color !default;
+
+$cardview-columnchooser-message-color: lighten($base-text-color, 26%) !default;

package/data/scss/widgets/material/cardView/_index.scss

@@ -0,0 +1,5 @@
+@use 'colors';
+@use 'sizes';
+@use '../../base/cardView/index' as *;
+
+// adduse

package/data/scss/widgets/material/cardView/_sizes.scss

@@ -0,0 +1,162 @@
+@use "../sizes" as *;
+@use '../../base/cardView/variables' as *;
+@use '../../base/cardView/header_panel/variables' as *;
+@use '../../base/cardView/header_panel/item/variables' as *;
+@use '../../base/cardView/content_view/content/card/variables' as *;
+@use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/cover/variables' as *;
+@use '../../base/cardView/content_view/content/card/content/variables' as *;
+@use '../../base/cardView/content_view/content/variables' as *;
+@use '../../base/cardView/content_view/no_data/variables' as *;
+@use '../../base/cardView/column_chooser/variables' as *;
+
+// adduse
+
+$cardview-material-sizes-64: null;
+$cardview-material-sizes-48: null;
+$cardview-material-sizes-40: null;
+$cardview-material-sizes-20: null;
+$cardview-material-paddings-24: null;
+$cardview-material-paddings-16: null;
+$cardview-material-paddings-12: null;
+$cardview-material-paddings-8: null;
+$cardview-material-paddings-6: null;
+$cardview-material-text-size-16: null;
+$cardview-material-border-radius-8: null;
+$cardview-material-gaps-8: null;
+$cardview-material-gaps-16: null;
+$cardview-material-gaps-24: null;
+
+$cardview-material-card-header-height: null;
+
+$cardview-material-headerpanel-text-empty-line-height: null;
+$cardview-material-headerpanel-dropzone-height: null;
+$cardview-material-headerpanel-dropzone-top: null;
+$cardview-material-column-chooser-select-all-item-horizontal-padding: null;
+
+$cardview-material-content-card-cover-max-height-default: null;
+$cardview-material-card-content-padding: null;
+$cardview-material-card-content-row-gap: null;
+
+$cardview-material-card-header-selection-checkbox-padding-right: null;
+$cardview-material-card-header-toolbar-override-height: null;
+
+$cardview-material-card-content-font-size: null;
+$cardview-material-card-content-line-height: null;
+
+@if $size == "default" {
+  $cardview-material-sizes-64: 64px;
+  $cardview-material-sizes-48: 48px;
+  $cardview-material-sizes-40: 40px;
+  $cardview-material-sizes-20: 20px;
+  $cardview-material-paddings-24: 24px;
+  $cardview-material-paddings-16: 16px;
+  $cardview-material-paddings-12: 12px;
+  $cardview-material-paddings-8: 8px;
+  $cardview-material-paddings-6: 6px;
+  $cardview-material-text-size-16: 16px;
+  $cardview-material-border-radius-8: 8px;
+  $cardview-material-gaps-8: 8px;
+  $cardview-material-gaps-16: 16px;
+  $cardview-material-gaps-24: 24px;
+
+  $cardview-material-card-header-height: 52px;
+
+  $cardview-material-headerpanel-text-empty-line-height: 36px;
+  $cardview-material-headerpanel-dropzone-height: 44px;
+  $cardview-material-headerpanel-dropzone-top: -4px;
+  $cardview-material-column-chooser-select-all-item-horizontal-padding: 19px;
+
+  $cardview-material-content-card-cover-max-height-default: 180px;
+  $cardview-material-card-content-padding: 12px;
+  $cardview-material-card-content-row-gap: 4px;
+  $cardview-material-card-header-selection-checkbox-padding-right: 12px;
+  $cardview-material-card-header-toolbar-override-height: 52px;
+}
+@else if $size == "compact" {
+  $cardview-material-sizes-64: 48px;
+  $cardview-material-sizes-48: 32px;
+  $cardview-material-sizes-40: 32px;
+  $cardview-material-sizes-20: 16px;
+  $cardview-material-paddings-24: 16px;
+  $cardview-material-paddings-16: 12px;
+  $cardview-material-paddings-12: 6px;
+  $cardview-material-paddings-8: 8px;
+  $cardview-material-paddings-6: 4px;
+  $cardview-material-text-size-16: 14px;
+  $cardview-material-border-radius-8: 6px;
+  $cardview-material-gaps-8: 4px;
+  $cardview-material-gaps-16: 12px;
+  $cardview-material-gaps-24: 16px;
+
+  $cardview-material-card-header-height: 44px;
+
+  $cardview-material-headerpanel-text-empty-line-height: 32px;
+  $cardview-material-headerpanel-dropzone-height: 38px;
+  $cardview-material-headerpanel-dropzone-top: -3px;
+  $cardview-material-column-chooser-select-all-item-horizontal-padding: 17px;
+
+  $cardview-material-content-card-cover-max-height-default: 140px;
+  $cardview-material-card-content-padding: 8px;
+  $cardview-material-card-content-row-gap: 2px;
+  $cardview-material-card-header-selection-checkbox-padding-right: 8px;
+
+  $cardview-material-card-content-font-size: 12px;
+  $cardview-material-card-content-line-height: 16px;
+}
+
+$cardview-border-radius: 16px !default;
+$cardview-gap: $cardview-material-gaps-24 !default;
+$cardview-padding: $cardview-material-paddings-24 !default;
+
+$cardview-card-header-height: $cardview-material-card-header-height !default;
+
+$cardview-headers-container-gap: 4px !default;
+$cardview-headerpanel-vertical-margin: 4px !default;
+$cardview-headerpanel-content-gap: $cardview-material-gaps-8 !default;
+$cardview-headerpanel-text-empty-line-height: $cardview-material-headerpanel-text-empty-line-height !default;
+
+$cardview-headerpanel-dropzone-height: $cardview-material-headerpanel-dropzone-height;
+$cardview-headerpanel-dropzone-top: $cardview-material-headerpanel-dropzone-top;
+$cardview-dropzone-border-width: 1.5px !default;
+$cardview-dropzone-border-radius: $cardview-material-border-radius-8 !default;
+
+$cardview-header-item-border-width: 1px !default;
+$cardview-header-item-border-radius: 99px !default;
+$cardview-header-item-padding-horizontal: $cardview-material-paddings-16 !default;
+$cardview-header-item-padding-vertical: $cardview-material-paddings-8 !default;
+$cardview-header-item-line-height: $cardview-material-sizes-20 !default;
+$cardview-header-item-icon-size: $cardview-material-sizes-20 !default;
+
+$cardview-nodata-icon-container-size: $cardview-material-sizes-64 !default;
+$cardview-nodata-icon-container-margin: $cardview-material-paddings-12 !default;
+$cardview-nodata-icon-size: $cardview-material-sizes-40 !default;
+
+$cardview-content-column-gap: $cardview-material-gaps-16 !default;
+$cardview-content-row-gap: $cardview-material-gaps-16 !default;
+
+$cardview-card-border-size: 1px !default;
+$cardview-card-min-width: 250px !default;
+$cardview-card-border-radius: $cardview-material-border-radius-8 !default;
+
+$cardview-card-cover-noimage-icon-size: $cardview-material-sizes-48 !default;
+
+$cardview-card-content-padding: $cardview-material-card-content-padding !default;
+$cardview-card-content-row-gap: $cardview-material-card-content-row-gap !default;
+$cardview-card-content-cell-padding-vertical: $cardview-material-paddings-6 !default;
+$cardview-card-content-cell-padding-horizontal: $cardview-material-paddings-12 !default;
+
+$cardview-card-header-text-size: $cardview-material-text-size-16 !default;
+$cardview-card-header-border-radius: $cardview-material-border-radius-8 !default;
+
+$cardview-column-chooser-empty-message-horizontal-padding: $cardview-material-paddings-24 !default;
+$cardview-column-chooser-select-all-item-horizontal-padding: $cardview-material-column-chooser-select-all-item-horizontal-padding !default;
+
+$cardview-content-card-cover-max-height-default: $cardview-material-content-card-cover-max-height-default !default;
+
+$cardview-card-header-selection-checkbox-padding-right: $cardview-material-card-header-selection-checkbox-padding-right !default;
+$cardview-card-header-toolbar-override-height: $cardview-material-card-header-toolbar-override-height !default;
+
+$cardview-card-content-field-caption-font-weight: 500;
+$cardview-card-content-font-size: $cardview-material-card-content-font-size;
+$cardview-card-content-line-height: $cardview-material-card-content-line-height;

package/data/scss/widgets/material/chat/_colors.scss

@@ -21,11 +21,14 @@ $chat-typingindicator-circle-bg-color: getCustomVar(("$chat-typingindicator-circ
 
 @use "sass:color";
 @use "../colors" as *;
+@use "../textEditor/colors" as *;
 
 // adduse
 $chat-background-color: $base-bg !default;
 $chat-border-color: $base-border-color !default;
 $chat-messagebox-border-color: $chat-border-color !default;
+$chat-message-editing-preview-accent-color: $base-accent !default;
+$chat-message-editing-preview-cancel-button-color: $texteditor-label-color !default;
 $chat-avatar-color: $base-text-color !default;
 $chat-avatar-background-color: $base-border-color !default;
 $chat-bubble-color-primary: $base-text-color !default;
@@ -52,6 +55,10 @@ $chat-typingindicator-circle-bg-color: rgba($base-inverted-bg, 0.4) !default;
 @else if $mode == "dark" {
   $chat-bubble-background-color-primary: rgba(lighten($base-accent, 19.22), 0.08) !default;
 }
+
+$chat-messagelist-contextmenu-delete-button-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-bg: $base-hover-bg !default;
 $never-used: collector((
 "$chat-background-color": $chat-background-color,
 "$chat-border-color": $chat-border-color,

package/data/scss/widgets/material/chat/_index.scss

@@ -23,8 +23,6 @@
   $chat-alerts-padding-inline,
   $chat-alert-padding-block,
   $chat-alerts-row-gap,
-  $chat-alert-icon-size,
-  $chat-alert-content-column-gap,
 );
 @include chat-messagebox(
   $chat-messagebox-padding,
@@ -41,6 +39,8 @@
   $chat-bubble-color-primary,
   $chat-bubble-background-color-primary,
   $chat-bubble-container-gap,
+  $chat-bubble-delete-gap,
+  $chat-bubble-delete-icon-size,
 );
 @include chat-messagegroup(
   $chat-messagegroup-gap,
@@ -51,6 +51,8 @@
   $chat-information-author-name-color,
   $chat-information-timestamp-color,
   $chat-information-gap,
+  $chat-information-icon-size,
+  $chat-information-edited-gap,
 );
 @include chat-messagelist-empty(
   $chat-messagelist-padding,
@@ -72,6 +74,11 @@
   $chat-messagelist-day-header-first-padding-top,
   $chat-messagelist-day-header-font-size,
 );
+@include chat-messagelist-contextmenu(
+  $chat-messagelist-contextmenu-delete-button-color,
+  $chat-messagelist-contextmenu-delete-button-focused-color,
+  $chat-messagelist-contextmenu-delete-button-focused-bg,
+);
 @include chat-typingindicator(
   $chat-typingindicator-template,
   $chat-typingindicator-padding,
@@ -89,3 +96,19 @@
   $chat-typingindicator-circle-bg-color,
   $chat-typingindicator-circle-bg-color-center,
 );
+@include message-editing-preview(
+  $chat-message-editing-preview-content-padding-inline,
+  $chat-message-editing-preview-content-row-gap,
+  $chat-message-editing-preview-accent-color,
+  $chat-message-editing-preview-caption-font-size,
+  $chat-messagebox-padding,
+  $chat-message-editing-preview-border-width,
+  $chat-message-editing-preview-cancel-button-color,
+);
+@include chat-confirmation-popup(
+  $chat-border-radius,
+  $chat-confirmation-popup-content-padding,
+  $chat-confirmation-popup-toolbar-padding-block,
+  $chat-confirmation-popup-toolbar-padding-inline,
+  $chat-confirmation-popup-toolbar-gap,
+);

package/data/scss/widgets/material/chat/_sizes.scss

@@ -1,6 +1,7 @@
 @use "sass:math";
 @use "../sizes" as *;
 @use "../common/sizes" as *;
+@use "../typography/sizes" as *;
 
 // adduse
 
@@ -8,6 +9,8 @@ $chat-border-radius: $base-border-radius * 2 !default; // 8px
 $chat-bubble-border-radius: $base-border-radius * 2 !default;
 $chat-bubble-padding: null !default;
 $chat-bubble-container-gap: 4px !default;
+$chat-bubble-delete-gap: null !default;
+$chat-bubble-delete-icon-size: null !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-border-radius: $base-border-radius * 2 !default;
 $chat-messagebox-buton-gap: null !default;
@@ -21,13 +24,18 @@ $chat-messagegroup-alignment-start-template: auto 82.5% 1fr !default;
 $chat-messagegroup-alignment-start-gap: 12px !default;
 $chat-header-padding: 20px !default;
 $chat-information-font-size: 12px !default;
-$chat-alert-icon-size: $material-base-icon-size !default;
-$chat-alert-content-column-gap: null !default;
+$chat-information-icon-size: 12px !default;
+$chat-information-edited-gap: 2px !default;
 $chat-alerts-padding-block: null !default;
-$chat-alerts-padding-inline: null !default;
+$chat-alerts-padding-inline: 8px !default;
 $chat-alerts-row-gap: null !default;
 $chat-alert-padding-block: null !default;
 
+$chat-message-editing-preview-caption-font-size: $material-xs-font-size !default;
+$chat-message-editing-preview-content-row-gap: null !default;
+$chat-message-editing-preview-content-padding-inline: null !default;
+$chat-message-editing-preview-border-width: 3px !default;
+
 $chat-messagelist-empty-icon-box-size: null !default;
 $chat-messagelist-empty-icon-size: null !default;
 $chat-messagelist-empty-icon-margin-bottom: null !default;
@@ -50,20 +58,28 @@ $chat-typingindicator-circle-size: null !default;
 $chat-typingindicator-circle-size-center: null !default;
 $chat-typingindicator-circle-border-radius: 999em !default;
 
+$chat-confirmation-popup-content-padding: null !default;
+$chat-confirmation-popup-toolbar-padding-block: null !default;
+$chat-confirmation-popup-toolbar-padding-inline: null !default;
+$chat-confirmation-popup-toolbar-gap: null !default;
+
 @if $size == "default" {
   $chat-messagebox-buton-gap: 10px !default;
   $chat-bubble-border-radius: 8px !default;
   $chat-bubble-padding: 8px 16px !default;
+  $chat-bubble-delete-gap: 4px !default;
+  $chat-bubble-delete-icon-size: 20px !default;
   $chat-messagebox-padding: 20px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
-  $chat-alert-content-column-gap: 8px !default;
   $chat-alerts-padding-block: 16px !default;
-  $chat-alerts-padding-inline: 20px !default;
   $chat-alerts-row-gap: 4px !default;
   $chat-alert-padding-block: 6px !default;
 
+  $chat-message-editing-preview-content-padding-inline: 12px !default;
+  $chat-message-editing-preview-content-row-gap: 4px !default;
+
   $chat-messagelist-empty-icon-box-size: 64px !default;
   $chat-messagelist-empty-icon-size: 40px !default;
   $chat-messagelist-empty-icon-margin-bottom: 12px !default;
@@ -76,22 +92,30 @@ $chat-typingindicator-circle-border-radius: 999em !default;
   $chat-typingindicator-bubble-padding-block: 11px !default;
   $chat-typingindicator-bubble-padding-inline: 20px !default;
   $chat-typingindicator-padding: $chat-messagegroup-padding !default;
+
+  $chat-confirmation-popup-content-padding: 16px !default;
+  $chat-confirmation-popup-toolbar-padding-block: 0 16px !default;
+  $chat-confirmation-popup-toolbar-padding-inline: 24px !default;
+  $chat-confirmation-popup-toolbar-gap: 8px !default;
 }
 
 @else if $size == "compact" {
   $chat-messagebox-buton-gap: 7px !default;
   $chat-bubble-border-radius: 4px !default;
   $chat-bubble-padding: 6px 8px !default;
+  $chat-bubble-delete-gap: 2px !default;
+  $chat-bubble-delete-icon-size: 16px !default;
   $chat-messagebox-padding: 16px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 
-  $chat-alert-content-column-gap: 4px !default;
   $chat-alerts-padding-block: 12px !default;
-  $chat-alerts-padding-inline: 16px !default;
   $chat-alerts-row-gap: 2px !default;
   $chat-alert-padding-block: 5px !default;
 
+  $chat-message-editing-preview-content-padding-inline: 8px !default;
+  $chat-message-editing-preview-content-row-gap: 2px !default;
+
   $chat-messagelist-empty-icon-box-size: 48px !default;
   $chat-messagelist-empty-icon-size: 32px !default;
   $chat-messagelist-empty-icon-margin-bottom: 14px !default;
@@ -104,4 +128,9 @@ $chat-typingindicator-circle-border-radius: 999em !default;
   $chat-typingindicator-bubble-padding-block: 8px !default;
   $chat-typingindicator-bubble-padding-inline: 12px !default;
   $chat-typingindicator-padding: $chat-messagegroup-padding !default;
+
+  $chat-confirmation-popup-content-padding: 8px !default;
+  $chat-confirmation-popup-toolbar-padding-block: 0 8px !default;
+  $chat-confirmation-popup-toolbar-padding-inline: 16px !default;
+  $chat-confirmation-popup-toolbar-gap: 4px !default;
 }

package/data/scss/widgets/material/common/_mixins.scss

@@ -3,6 +3,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../common/sizes" as *;
 @use "../../base/mixins" as *;
 @use "../../base/validation" as *;
 @use "../list/sizes" as *;

package/data/scss/widgets/material/gridBase/_index.scss

@@ -1004,7 +1004,6 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
       &.dx-data-row {
         & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid),
         & .dx-command-edit .dx-link {
-          background-color: $datagrid-row-focused-bg;
           color: $datagrid-row-focused-color;
 
           & .dx-#{$widget-name}-group-opened,
@@ -1013,6 +1012,10 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
           }
         }
 
+        & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) {
+          background-color: $datagrid-row-focused-bg;
+        }
+
         & .dx-command-edit .dx-link:focus {
           background-color: $datagrid-base-background-color;
           color: $datagrid-link-color;
@@ -1110,7 +1113,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
     }
 
     &.dx-#{$widget-name}-sticky-columns {
-      .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+      .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
         padding-top: $material-grid-base-cell-vertical-padding + 1px;
       }
 
@@ -1138,6 +1141,14 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
       .dx-row.dx-row-lines.dx-edit-row > td {
         border-top-width: 0;
       }
+
+      .dx-row-removed:not(.dx-row-lines) > td {
+        border-bottom-width: 0;
+      }
+
+      .dx-row-removed.dx-row-lines > td {
+        border-top-width: 0;
+      }
     }
   }
 

package/data/scss/widgets/material/htmlEditor/_index.scss

@@ -10,8 +10,10 @@
 @use "../textEditor/colors" as *;
 @use "../toolbar/sizes" as *;
 @use "../common/mixins" as *;
+@use "../common/sizes" as *;
 @use "../fileUploader/sizes" as *;
 @use "../popup/sizes" as *;
+@use "../../base/mixins" as *;
 @use "../../base/htmlEditor";
 
 // adduse
@@ -342,3 +344,32 @@
     box-shadow: $material-popup-overlay-content-shadow;
   }
 }
+
+.dx-aidialog {
+  .dx-toolbar.dx-popup-bottom {
+    padding: $material-aidialog-toolbar-padding;
+  }
+
+  .dx-formdialog.dx-dropdowneditor-overlay.dx-popup-wrapper {
+    .dx-overlay-content {
+      box-shadow: $material-popup-overlay-content-shadow;
+    }
+  }
+
+  .dx-aidialog-controls {
+    gap: $material-aidialog-selects-gap;
+
+    .dx-selectbox {
+      max-width: calc(50% - $material-aidialog-selects-gap * 0.5);
+    }
+  }
+
+  .dx-aidialog-content {
+    padding: $material-aidialog-content-padding;
+    gap: $material-aidialog-content-gap;
+  }
+
+  .dx-pending-indicator {
+    @include dx-pending-indicator-centered();
+  }
+}

package/data/scss/widgets/material/htmlEditor/_sizes.scss

@@ -6,15 +6,27 @@
 $material-toolbar-size-editor-width: null !default;
 $material-htmleditor-toolbar-padding: null !default;
 $material-html-editor-add-image-dialog-fileuploader-padding: null !default;
+$material-aidialog-selects-gap: null !default;
+$material-aidialog-content-gap: null !default;
+$material-aidialog-content-padding: null !default;
+$material-aidialog-toolbar-padding: null !default;
 
 @if $size == "default" {
   $material-toolbar-size-editor-width: 120px !default;
   $material-htmleditor-toolbar-padding: 16px !default;
   $material-html-editor-add-image-dialog-fileuploader-padding: 50px 40px;
+  $material-aidialog-selects-gap: 8px;
+  $material-aidialog-content-gap: 24px;
+  $material-aidialog-content-padding: 24px;
+  $material-aidialog-toolbar-padding: 16px 24px;
 }
 
 @else if $size == "compact" {
   $material-toolbar-size-editor-width: 90px !default;
   $material-htmleditor-toolbar-padding: 11px !default;
   $material-html-editor-add-image-dialog-fileuploader-padding: 40px 30px;
+  $material-aidialog-selects-gap: 8px;
+  $material-aidialog-content-gap: 16px;
+  $material-aidialog-content-padding: 16px;
+  $material-aidialog-toolbar-padding: 8px 16px;
 }

package/data/scss/widgets/material/informer/_colors.scss

@@ -0,0 +1,15 @@
+@use "../colors" as *;
+@use "sass:color";
+
+// adduse
+
+$informer-color: $base-danger !default;
+$informer-background-color: null !default;
+
+@if $mode == "light" {
+  $informer-background-color: lighten(desaturate(adjust-hue($base-danger, 1), 24.92), 38.24);
+}
+
+@if $mode == "dark" {
+  $informer-background-color: darken(desaturate(adjust-hue($base-danger, 1), 41.80), 53.92);
+}