devextreme-themebuilder 25.1.7 → 25.2.2-beta

package/data/scss/widgets/generic/scheduler/_index.scss

@@ -4,6 +4,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../toolbar/sizes" as *;
 @use '../../base/scheduler/layout/header' as *;
 @use "../../base/mixins" as *;
 @use "../../base/icons" as *;
@@ -38,7 +39,10 @@
   $agenda-appointment-hover-bg: $agenda-appointment-hover-bg,
   $agenda-appointment-active-bg: $agenda-appointment-active-bg,
   $agenda-appointment-text-color: $agenda-appointment-text-color,
-  $agenda-appointment-title-font-size: $agenda-appointment-title-font-size
+  $agenda-appointment-title-font-size: $agenda-appointment-title-font-size,
+
+  $scheduler-days-of-week-button-size: $generic-scheduler-days-of-week-button-size,
+  $scheduler-recurrence-end-item-height: $generic-scheduler-recurrence-end-item-height
 );
 @use "../button/colors" as *;
 @use "../tooltip/colors" as *;
@@ -220,7 +224,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
   }
 }
 
-.dx-scheduler-appointment-popup {
+.dx-scheduler-legacy-appointment-popup {
   .dx-popup-title {
     background-color: $scheduler-popup-title-bg;
 
@@ -244,7 +248,116 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
   }
 }
 
-.dx-scheduler-appointment-popup .dx-form-validation-summary {
+.dx-scheduler-appointment-popup {
+  > .dx-overlay-content > .dx-toolbar.dx-widget {
+    > .dx-toolbar-items-container {
+      height: $generic-scheduler-appointment-popup-toolbar-height;
+    }
+
+    .dx-toolbar-label {
+      font-size: $generic-scheduler-appointment-popup-toolbar-label-size;
+    }
+  }
+
+  .dx-form {
+    .dx-scheduler-form-icon {
+      color: $scheduler-form-icon-color;
+
+      &.dx-field-item {
+        height: $generic-scheduler-appointment-popup-icon-container-height;
+        padding-inline-end: $generic-scheduler-appointment-popup-icon-padding-right;
+
+        .dx-icon {
+          font-size: $generic-scheduler-appointment-popup-icon-size;
+        }
+      }
+    }
+
+    .dx-scheduler-form-icon-sized-gap {
+      width: $generic-scheduler-appointment-popup-icon-size;
+    }
+
+    .dx-scheduler-form-subject-group .dx-scheduler-form-icon {
+      color: $scheduler-appointment-base-color;
+    }
+
+    .dx-scheduler-form-description-group .dx-scheduler-form-icon,
+    .dx-scheduler-form-resources-group .dx-scheduler-default-resources-icon,
+    .dx-scheduler-form-recurrence-settings-group .dx-scheduler-form-icon {
+      margin-top: $generic-scheduler-appointment-popup-description-icon-margin-top;
+    }
+
+    .dx-scheduler-days-of-week-buttons {
+      height: $generic-toolbar-height;
+      gap: $generic-scheduler-days-of-week-buttons-gap;
+
+      .dx-button {
+        width: $generic-scheduler-days-of-week-button-size;
+        height: $generic-scheduler-days-of-week-button-size;
+        min-width: $generic-scheduler-days-of-week-button-size;
+        min-height: $generic-scheduler-days-of-week-button-size;
+      }
+    }
+
+    .dx-scheduler-form-group-with-icon.dx-scheduler-form-recurrence-end-group:has(.dx-scheduler-form-icon:not(.dx-hidden)) .dx-field-item-label {
+      height: $generic-scheduler-appointment-popup-recurrence-end-group-label-height;
+    }
+
+    .dx-scheduler-form-recurrence-end-group .dx-field-item-label {
+      margin-bottom: $generic-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom;
+    }
+
+    .dx-scheduler-form-recurrence-end-editors {
+      .dx-item.dx-radiobutton {
+        height: $generic-scheduler-appointment-popup-recurrence-end-editors-item-height !important; // stylelint-disable-line declaration-no-important
+      }
+
+      .dx-box-item {
+        height: $generic-scheduler-appointment-popup-recurrence-end-editors-item-height;
+
+        .dx-box-item-content {
+          height: $generic-scheduler-appointment-popup-recurrence-end-editors-item-height;
+        }
+      }
+
+      .dx-field-item,
+      .dx-empty-item {
+        height: $generic-scheduler-appointment-popup-recurrence-end-editors-item-height;
+
+        .dx-field-item-content {
+          height: $generic-scheduler-appointment-popup-recurrence-end-editors-item-height;
+        }
+      }
+
+      .dx-texteditor,
+      .dx-numberbox {
+        height: $generic-scheduler-appointment-popup-recurrence-end-editors-item-height;
+      }
+    }
+
+    .dx-field-item:not(.dx-first-col) {
+      padding-inline-start: $generic-scheduler-appointment-popup-item-padding-horizontal;
+    }
+
+    .dx-field-item:not(.dx-last-col) {
+      padding-inline-end: $generic-scheduler-appointment-popup-item-padding-horizontal;
+    }
+
+    .dx-field-item:not(.dx-first-row) {
+      padding-top: $generic-scheduler-appointment-popup-item-padding-top;
+    }
+
+    .dx-scheduler-form-all-day-switch.dx-field-item.dx-label-h-align {
+      height: $generic-scheduler-appointment-popup-all-day-item-height;
+
+      .dx-field-item-label-text {
+        color: $base-text-color;
+      }
+    }
+  }
+}
+
+.dx-scheduler-legacy-appointment-popup .dx-form-validation-summary {
   padding: 10px 20px;
 }
 
@@ -312,16 +425,59 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
 }
 
 .dx-scheduler-appointment-collector {
-  height: $generic-scheduler-appointment-collector-height;
+  height: $generic-scheduler-dropdown-button-height;
+  margin: $generic-scheduler-dropdown-button-margin;
 
   &.dx-state-hover {
     &::before {
-      border-radius: $generic-scheduler-appointment-collector-height;
+      border-radius: $generic-scheduler-dropdown-button-height;
     }
   }
 
   &.dx-button.dx-button-default {
-    border-radius: $generic-scheduler-appointment-collector-height;
+    border-radius: $generic-scheduler-dropdown-button-height;
+  }
+}
+
+.dx-scheduler-adaptive {
+  .dx-scheduler-appointment-collector {
+    margin: $generic-scheduler-dropdown-button-adaptive-margin;
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-work-space-day,
+  .dx-scheduler-work-space.dx-scheduler-work-space-week,
+  .dx-scheduler-work-space.dx-scheduler-work-space-work-week {
+    .dx-scheduler-fixed-appointments,
+    .dx-scheduler-date-table-container {
+      .dx-scheduler-appointment-collector {
+        margin: $generic-scheduler-dropdown-button-adaptive-vertical-margin;
+      }
+    }
+  }
+}
+
+.dx-scheduler:not(.dx-scheduler-adaptive) {
+  .dx-scheduler-work-space.dx-scheduler-work-space-day,
+  .dx-scheduler-work-space.dx-scheduler-work-space-week,
+  .dx-scheduler-work-space.dx-scheduler-work-space-work-week {
+    .dx-scheduler-fixed-appointments,
+    .dx-scheduler-date-table-container {
+      .dx-scheduler-appointment-collector {
+        margin: $generic-scheduler-dropdown-button-vertical-margin;
+      }
+    }
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-work-space-month {
+    .dx-scheduler-appointment-collector {
+      margin-right: 33px;
+    }
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-work-space-month.dx-scheduler-work-space-count {
+    .dx-scheduler-appointment-collector {
+      margin-right: 57px;
+    }
   }
 }
 

package/data/scss/widgets/generic/scheduler/_sizes.scss

@@ -1,5 +1,6 @@
 @use "../sizes" as *;
 @use "../button/colors" as *;
+@use "../toolbar/sizes" as *;
 
 // adduse
 
@@ -20,7 +21,27 @@ $generic-scheduler-agenda-appointment-font-size: null !default;
 $generic-scheduler-group-header-table-cell-width: null !default;
 $generic-scheduler-appointment-transparent-left-border: null !default;
 $generic-scheduler-appointment-transparent-right-border: null !default;
-$generic-scheduler-appointment-collector-height: null !default;
+$generic-scheduler-dropdown-button-height: null !default;
+$generic-scheduler-dropdown-button-margin: null !default;
+$generic-scheduler-dropdown-button-vertical-margin: null !default;
+$generic-scheduler-dropdown-button-adaptive-margin: null !default;
+$generic-scheduler-dropdown-button-adaptive-vertical-margin: null !default;
+
+$generic-scheduler-appointment-popup-toolbar-height: null !default;
+$generic-scheduler-appointment-popup-toolbar-label-size: null !default;
+$generic-scheduler-appointment-popup-icon-size: null !default;
+$generic-scheduler-appointment-popup-icon-container-height: null !default;
+$generic-scheduler-appointment-popup-icon-padding-right: null !default;
+$generic-scheduler-appointment-popup-description-icon-margin-top: null !default;
+$generic-scheduler-appointment-popup-item-padding-horizontal: null !default;
+$generic-scheduler-appointment-popup-item-padding-top: null !default;
+$generic-scheduler-appointment-popup-all-day-item-height: null !default;
+$generic-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: null !default;
+$generic-scheduler-appointment-popup-recurrence-end-editors-item-height: null !default;
+$generic-scheduler-appointment-popup-recurrence-end-group-label-height: null !default;
+$generic-scheduler-days-of-week-button-size: null !default;
+$generic-scheduler-days-of-week-buttons-gap: null !default;
+$generic-scheduler-recurrence-end-item-height: null !default;
 
 $agenda-appointment-title-font-size: null !default;
 $scheduler-timeline-cell-height: null !default;
@@ -51,7 +72,27 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-appointment-transparent-left-border: 3px solid transparent !default;
   $generic-scheduler-appointment-transparent-right-border: 2px solid transparent !default;
 
-  $generic-scheduler-appointment-collector-height: 20px !default;
+  $generic-scheduler-dropdown-button-height: 20px !default;
+  $generic-scheduler-dropdown-button-margin: 3px 2px 3px 3px !default;
+  $generic-scheduler-dropdown-button-vertical-margin: 3px 2px 3px 0 !default;
+  $generic-scheduler-dropdown-button-adaptive-margin: 0 2px !default;
+  $generic-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 0 !default;
+
+  $generic-scheduler-appointment-popup-toolbar-height: 43px !default;
+  $generic-scheduler-appointment-popup-toolbar-label-size: 20px !default;
+  $generic-scheduler-appointment-popup-icon-size: 18px !default;
+  $generic-scheduler-appointment-popup-icon-container-height: 36px !default;
+  $generic-scheduler-appointment-popup-icon-padding-right: 5px !default;
+  $generic-scheduler-appointment-popup-description-icon-margin-top: 22px !default;
+  $generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default;
+  $generic-scheduler-appointment-popup-item-padding-top: 20px !default;
+  $generic-scheduler-appointment-popup-all-day-item-height: 36px !default;
+  $generic-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: 12px !default;
+  $generic-scheduler-appointment-popup-recurrence-end-editors-item-height: 36px !default;
+  $generic-scheduler-appointment-popup-recurrence-end-group-label-height: 36px !default;
+  $generic-scheduler-days-of-week-button-size: 32px !default;
+  $generic-scheduler-days-of-week-buttons-gap: 10px !default;
+  $generic-scheduler-recurrence-end-item-height: 32px !default;
 
   $agenda-appointment-title-font-size: 16px;
 
@@ -81,7 +122,27 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-appointment-transparent-left-border: 2px solid transparent !default;
   $generic-scheduler-appointment-transparent-right-border: 1px solid transparent !default;
 
-  $generic-scheduler-appointment-collector-height: 17px !default;
+  $generic-scheduler-dropdown-button-height: 17px !default;
+  $generic-scheduler-dropdown-button-margin: 3px 1px 3px 3px !default;
+  $generic-scheduler-dropdown-button-vertical-margin: 3px 1px 3px 0 !default;
+  $generic-scheduler-dropdown-button-adaptive-margin: 0 2px !default;
+  $generic-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 0 !default;
+
+  $generic-scheduler-appointment-popup-toolbar-height: 39px !default;
+  $generic-scheduler-appointment-popup-toolbar-label-size: 18px !default;
+  $generic-scheduler-appointment-popup-icon-size: 14px !default;
+  $generic-scheduler-appointment-popup-icon-container-height: 24px !default;
+  $generic-scheduler-appointment-popup-icon-padding-right: 5px !default;
+  $generic-scheduler-appointment-popup-description-icon-margin-top: 18px !default;
+  $generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default;
+  $generic-scheduler-appointment-popup-item-padding-top: 10px !default;
+  $generic-scheduler-appointment-popup-all-day-item-height: 24px !default;
+  $generic-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: 8px !default;
+  $generic-scheduler-appointment-popup-recurrence-end-editors-item-height: 26px !default;
+  $generic-scheduler-appointment-popup-recurrence-end-group-label-height: 24px !default;
+  $generic-scheduler-days-of-week-button-size: 24px !default;
+  $generic-scheduler-days-of-week-buttons-gap: 6px !default;
+  $generic-scheduler-recurrence-end-item-height: 32px !default;
 
   $agenda-appointment-title-font-size: 16px;
 

package/data/scss/widgets/generic/speechToText/_colors.scss

@@ -0,0 +1,4 @@
+@use "../colors" as *;
+@use "sass:color";
+
+// adduse

package/data/scss/widgets/generic/speechToText/_index.scss

@@ -0,0 +1,5 @@
+@use "../../base/speechToText";
+@use "colors" as *;
+@use "sizes" as *;
+
+// adduse

package/data/scss/widgets/generic/speechToText/_sizes.scss

@@ -0,0 +1,4 @@
+@use "../common/sizes" as *;
+@use "../sizes" as *;
+
+// adduse

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

@@ -24,7 +24,7 @@ $mode: null !default;
 $material-color-accent-modificator: null !default;
 $base-accent: null !default;
 $material-color-theme-modificator: null !default;
-$base-font-family: "Roboto", "RobotoFallback", "Noto Kufi Arabic", "Helvetica",  "Arial", sans-serif !default;
+$base-font-family: roboto, 'roboto fallback', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'segoe ui', 'helvetica neue', 'adwaita sans', cantarell, ubuntu, noto, helvetica, arial, sans-serif !default;
 $base-text-color: null !default;
 $base-label-color: null !default;
 $base-icon-color: null !default;

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

@@ -55,11 +55,11 @@
 @use "./filterBuilder";
 @use "./drawer";
 @use "./htmlEditor";
+@use "./speechToText";
 @use "./speedDialAction";
 @use "./fileManager";
 @use "./diagram";
 @use "./gantt";
 @use "./sortable";
-@use "./deferRendering";
 @use "./map";
 @use "./cardView";

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

@@ -22,11 +22,14 @@ $chat-typingindicator-circle-bg-color: getCustomVar(("$chat-typingindicator-circ
 @use "sass:color";
 @use "../colors" as *;
 @use "../textEditor/colors" as *;
+@use "../button/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-messagebox-file-background-color: $button-normal-text-hover-bg !default;
+$chat-messagebox-file-cancel-button-secondary-color: $button-normal-text-active-bg !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;
@@ -48,12 +51,18 @@ $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !
 $chat-typingindicator-circle-bg-color-center: rgba($base-inverted-bg, 0.6) !default;
 $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: $base-icon-color !default;
+
 @if $mode == "light" {
   $chat-bubble-background-color-primary: rgba($base-accent, 0.08) !default;
+  $chat-file-container-box-shadow: 0 1px 1px 0 color.change($base-shadow-color, $alpha: 0.14), 0 1px 1px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.2) !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 1px 1px 0 color.change($base-shadow-color, $alpha: 0.28), 0 1px 1px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.4) !default;
 }
 
 $chat-messagelist-contextmenu-delete-button-color: $base-danger !default;

package/data/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
 
@@ -16,7 +17,23 @@
   $chat-avatar-color,
   $chat-avatar-background-color,
 );
-@include chat-header($chat-header-padding);
+@include chat-file(
+  $chat-file-container-width,
+  $chat-file-container-padding,
+  $chat-file-container-background-color,
+  $chat-file-container-border-radius,
+  $chat-file-container-box-shadow,
+  $chat-file-button-size,
+  $chat-file-secondary-font-size,
+  $chat-file-secondary-color,
+  $chat-file-base-section-gap,
+  $chat-file-size-max-width,
+  $chat-file-icon-font-size,
+);
+@include chat-fileview(
+  $chat-file-view-items-gap,
+  $chat-file-container-width,
+);
 @include chat-alertlist(
   $chat-alertlist-color,
   $chat-alerts-padding-block,
@@ -29,7 +46,14 @@
   $chat-messagebox-border-color,
   $chat-messagebox-gap,
   $chat-messagebox-textarea-border-radius,
-  $chat-messagebox-buton-gap,
+  $chat-messagebox-textarea-padding,
+  $chat-messagebox-toolbar-min-height,
+  $chat-file-container-width,
+  $chat-messagebox-files-container-padding,
+  $chat-messagebox-files-container-padding-top,
+  $chat-messagebox-file-background-color,
+  $chat-messagebox-file-cancel-button-secondary-color,
+  $chat-file-container-box-shadow,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,
@@ -41,6 +65,7 @@
   $chat-bubble-container-gap,
   $chat-bubble-delete-gap,
   $chat-bubble-delete-icon-size,
+  $chat-bubble-gap,
 );
 @include chat-messagegroup(
   $chat-messagegroup-gap,
@@ -112,3 +137,21 @@
   $chat-confirmation-popup-toolbar-padding-inline,
   $chat-confirmation-popup-toolbar-gap,
 );
+
+.dx-chat-file {
+  @include dx-base-typography();
+
+  .dx-chat-file-name {
+    font-weight: $chat-file-name-font-weight;
+  }
+}
+
+.dx-chat-textarea.dx-textarea {
+  .dx-fileuploader-file-container {
+    border-radius: $chat-messagebox-file-container-border-radius;
+  }
+
+  .dx-fileuploader-cancel-button {
+    background-color: transparent;
+  }
+}

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

@@ -13,8 +13,12 @@ $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;
+$chat-messagebox-textarea-padding: null !default;
+$chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
+$chat-messagebox-files-container-padding: 3px !default;
+$chat-messagebox-files-container-padding-top: 2px !default;
+$chat-messagebox-file-container-border-radius: 4px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;
@@ -22,7 +26,6 @@ $chat-information-gap: 8px !default;
 $chat-avatar-size: 32px !default;
 $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-information-icon-size: 12px !default;
 $chat-information-edited-gap: 2px !default;
@@ -63,13 +66,26 @@ $chat-confirmation-popup-toolbar-padding-block: null !default;
 $chat-confirmation-popup-toolbar-padding-inline: null !default;
 $chat-confirmation-popup-toolbar-gap: null !default;
 
+$chat-file-container-width: 17.14em !default;
+$chat-file-container-padding: 7px 8px !default;
+$chat-file-container-border-radius: $material-base-border-radius !default;
+$chat-file-button-size: $material-button-height !default;
+$chat-file-secondary-font-size: 10px !default;
+$chat-file-base-section-gap: 4px !default;
+$chat-file-size-max-width: 4em !default;
+$chat-file-name-font-weight: 500 !default;
+$chat-file-icon-font-size: null !default;
+$chat-file-view-items-gap: 8px !default;
+$chat-bubble-gap: 8px !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-messagebox-textarea-padding: 16px !default;
+  $chat-messagebox-toolbar-min-height: 36px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
@@ -97,15 +113,18 @@ $chat-confirmation-popup-toolbar-gap: null !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;
+
+  $chat-file-icon-font-size: 18px !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-messagebox-textarea-padding: 12px !default;
+  $chat-messagebox-toolbar-min-height: 28px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 
@@ -133,4 +152,6 @@ $chat-confirmation-popup-toolbar-gap: null !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;
+
+  $chat-file-icon-font-size: 16px !default;
 }

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

@@ -4,3 +4,4 @@
 
 // adduse
 
+$colorbox-preview-icon-color: $base-icon-color !default;

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

@@ -20,12 +20,6 @@
       padding-inline-start: $material-colorbox-preview-width;
     }
 
-    &.dx-colorbox-color-is-not-defined {
-      .dx-colorbox-color-result-preview {
-        background: $colorbox-preview-empty-bg no-repeat 0 0;
-      }
-    }
-
     &::after {
       left: $material-colorbox-preview-left + 1;
     }
@@ -51,6 +45,11 @@
   border: 1px solid;
   border-color: $colorview-border-color;
   left: $material-colorbox-preview-left;
+
+  .dx-icon-colordismiss {
+    font-size: 17px;
+    color: $colorbox-preview-icon-color;
+  }
 }
 
 .dx-colorbox-overlay {

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

@@ -12,16 +12,6 @@ $colorview-border-color: $base-border-color !default;
 $colorview-label-color: $base-label-color !default;
 $colorview-handle-color: $base-bg !default;
 $colorview-handle-border-color: color.change($base-inverted-bg, $alpha: 0.2) !default;
-$colorbox-preview-empty-bg: null !default;
-
-
-@if $mode == "light" {
-  $colorbox-preview-empty-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAQAAACRZI9xAAAAdElEQVQoU4XR0Q3AIAgFQCarie7UrToMc3QIiyIFFGNe5INcgETAegpQefFCCFPwYZI2qFA/M4EQMQAhKxJgiEcKHFFkwUQY3Q4sBAhUerYzkbaiTUk7Ije0dYoMyeYGi35igUeDzMCiTiKgaPx0BAR1csgHXJxUKOJqsbEAAAAASUVORK5CYII=") !default;
-}
-
-@if $mode == "dark" {
-  $colorbox-preview-empty-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAQAAACRZI9xAAAAdElEQVQoU4XR0Q3AIAgFQCarie7UrToMc3QIiyIFFGNe5INcgETAegpQefFCCFPwYZI2qFA/M4EQMQAhKxJgiEcKHFFkwUQY3Q4sBAhUerYzkbaiTUk7Ije0dYoMyeYGi35igUeDzMCiTiKgaPx0BAR1csgHXJxUKOJqsbEAAAAASUVORK5CYII=") !default;
-}
 $never-used: collector((
 "$colorbox-overlay-bg": $colorbox-overlay-bg,
 ));

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

@@ -15,7 +15,7 @@
 $material-editor-custom-button-margin: 5px;
 
 .dx-daterangebox {
-  @include dx-dropdowneditor-button-icon-styling(eventall);
+  @include dx-dropdowneditor-button-icon-styling(daterangepicker);
 
   .dx-editor-outlined {
     &::before {

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

@@ -430,7 +430,7 @@ $diagram-toolbox-title-size: 18px;
     width: $diagram-small-editor-width;
   }
 
-  .dx-diagram-color-edit-item .dx-dropdowneditor-field-template-wrapper {
+  .dx-diagram-color-edit-item .dx-dropdowneditor-field-before-template-wrapper {
     .dx-diagram-i,
     .dx-icon {
       border-bottom-width: $diagram-toolbar-colorbutton-border-width;
@@ -443,7 +443,7 @@ $diagram-toolbox-title-size: 18px;
 .dx-dropdownmenu-popup {
   .dx-diagram-image-dropdown-item,
   .dx-diagram-color-edit-item {
-    .dx-dropdowneditor-field-template-wrapper {
+    .dx-dropdowneditor-field-before-template-wrapper {
       .dx-diagram-i,
       .dx-icon {
         margin-left: 12px;

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

@@ -8,6 +8,7 @@ $fileuploader-border-color: getCustomVar(("$fileuploader-border-color")) !defaul
 
 // adduse
 $fileuploader-filename-color: $base-text-color !default;
+$fileuploader-file-icon-color: $base-icon-color !default;
 $fileuploader-falename-status-color: lighten($fileuploader-filename-color, 40%) !default;
 $fileuploader-border-color: $base-border-color !default;
 $never-used: collector((

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

@@ -120,9 +120,19 @@ $material-fileuploader-file-wrapper-border-size: 3px;
       width: $material-fileuploader-file-container-button-size;
       margin-right: $material-fileuploader-file-container-button-margin;
 
+      &.dx-fileuploader-cancel-button-position-end {
+        margin-right: 0;
+        margin-left: $material-fileuploader-file-cancel-button-margin-left;
+      }
+
       .dx-rtl & {
         margin-left: $material-fileuploader-file-container-button-margin;
         margin-right: 0;
+
+        &.dx-fileuploader-cancel-button-position-end {
+          margin-left: 0;
+          margin-right: $material-fileuploader-file-cancel-button-margin-left;
+        }
       }
     }
   }
@@ -133,6 +143,11 @@ $material-fileuploader-file-wrapper-border-size: 3px;
   line-height: 13px;
 }
 
+.dx-fileuploader-file-icon {
+  color: $fileuploader-file-icon-color;
+  font-size: $material-fileuploader-file-icon-font-size;
+}
+
 .dx-fileuploader-file-name {
   padding-bottom: math.div($material-fileuploader-vertical-padding, 2);
   color: $fileuploader-filename-color;

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

@@ -5,7 +5,9 @@
 $material-fileuploader-file-container-padding: null !default;
 $material-fileuploader-file-container-text-margin: null !default;
 $material-fileuploader-file-container-button-margin: null !default;
+$material-fileuploader-file-cancel-button-margin-left: 4px;
 $material-fileuploader-file-container-button-size: null !default;
+$material-fileuploader-file-icon-font-size: null !default;
 
 $material-fileuploader-vertical-padding: 7px !default;
 
@@ -14,6 +16,7 @@ $material-fileuploader-vertical-padding: 7px !default;
   $material-fileuploader-file-container-text-margin: 15px !default;
   $material-fileuploader-file-container-button-margin: 5px !default;
   $material-fileuploader-file-container-button-size: 36px !default;
+  $material-fileuploader-file-icon-font-size: 18px !default;
 }
 
 @else if $size == "compact" {
@@ -21,4 +24,5 @@ $material-fileuploader-vertical-padding: 7px !default;
   $material-fileuploader-file-container-text-margin: 6px !default;
   $material-fileuploader-file-container-button-margin: 2px !default;
   $material-fileuploader-file-container-button-size: 28px !default;
+  $material-fileuploader-file-icon-font-size: 16px !default;
 }