devextreme-themebuilder 25.1.7 → 25.2.2-beta

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

@@ -415,7 +415,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;
@@ -428,7 +428,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/fluent/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-progressbar-status-color: $base-text-color !default;
 $fluent-fileuploader-files-container-bg-color: $base-bg !default;
 $fileuploader-falename-status-color: $base-label-color !default;

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

@@ -101,7 +101,6 @@ $fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-sh
   }
 
   .dx-fileuploader-file-container {
-    display: flex;
     padding: $fluent-fileuploader-file-container-padding;
     margin-bottom: 4px;
     border-radius: $fluent-fileuploader-files-container-rounding;
@@ -130,9 +129,19 @@ $fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-sh
       width: $fluent-fileuploader-file-container-button-size;
       margin-right: $fluent-fileuploader-file-container-button-margin;
 
+      &.dx-fileuploader-cancel-button-position-end {
+        margin-right: 0;
+        margin-left: $fluent-fileuploader-file-cancel-button-margin-left;
+      }
+
       .dx-rtl & {
         margin-left: $fluent-fileuploader-file-container-button-margin;
         margin-right: 0;
+
+        &.dx-fileuploader-cancel-button-position-end {
+          margin-left: 0;
+          margin-right: $fluent-fileuploader-file-cancel-button-margin-left;
+        }
       }
     }
   }
@@ -148,6 +157,11 @@ $fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-sh
   line-height: 13px;
 }
 
+.dx-fileuploader-file-icon {
+  color: $fileuploader-file-icon-color;
+  font-size: $fluent-fileuploader-file-icon-font-size;
+}
+
 .dx-fileuploader-file-name {
   padding-bottom: math.div($fluent-fileuploader-vertical-padding, 2);
   color: $fileuploader-filename-color;
@@ -156,7 +170,7 @@ $fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-sh
 
 .dx-fileuploader-file-size {
   float: right;
-  margin: $fluent-fileuploader-file-size-margin;
+  padding: $fluent-fileuploader-file-size-margin;
   color: $base-label-color;
 }
 

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

@@ -5,11 +5,13 @@
 $fluent-fileuploader-file-container-padding: null !default;
 $fluent-fileuploader-file-container-text-margin: null !default;
 $fluent-fileuploader-file-container-button-margin: null !default;
+$fluent-fileuploader-file-cancel-button-margin-left: 4px !default;
 $fluent-fileuploader-file-container-button-size: null !default;
 
 $fluent-fileuploader-vertical-padding: 7px !default;
 $fluent-fileuploader-files-container-padding: null !default;
 $fluent-fileuploader-file-size-margin: null !default;
+$fluent-fileuploader-file-icon-font-size: null !default;
 $fluent-fileuploader-files-container-rounding: 4px !default;
 
 @if $size == "default" {
@@ -19,6 +21,7 @@ $fluent-fileuploader-files-container-rounding: 4px !default;
   $fluent-fileuploader-file-container-button-size: 32px !default;
   $fluent-fileuploader-files-container-padding: 12px 4px 0 !default;
   $fluent-fileuploader-file-size-margin: 0 0 0 4px !default;
+  $fluent-fileuploader-file-icon-font-size: 20px !default;
 }
 
 @else if $size == "compact" {
@@ -28,4 +31,5 @@ $fluent-fileuploader-files-container-rounding: 4px !default;
   $fluent-fileuploader-file-container-button-size: 28px !default;
   $fluent-fileuploader-files-container-padding: 12px 4px 0 !default;
   $fluent-fileuploader-file-size-margin: 0 0 4px !default;
+  $fluent-fileuploader-file-icon-font-size: 16px !default;
 }

package/data/scss/widgets/fluent/gridBase/_colors.scss

@@ -126,6 +126,9 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
 
 $datagrid-border: 1px solid $datagrid-border-color !default;
 
+:root {
+  --dx-datagrid-row-alternation-bg: #{$datagrid-row-alternation-bg};
+}
 $never-used: collector((
 "$datagrid-base-background-color": $datagrid-base-background-color,
 "$datagrid-columnchooser-item-color": $datagrid-columnchooser-item-color,

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

@@ -704,15 +704,13 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
             color: $header-filter-color-empty;
           }
 
-          &:hover {
+          &:not([class*="dx-command"], .dx-editor-cell, .dx-#{$widget-name}-group-space):hover {
+            background-color: $datagrid-hover-bg;
+
             .dx-#{$widget-name}-text-content {
               color: $datagrid-base-color;
             }
           }
-
-          &:hover:not(.dx-command-select):not(.dx-command-expand):not(.dx-editor-cell):not(.dx-command-edit):not(.dx-#{$widget-name}-group-space) {
-            background-color: $datagrid-hover-bg;
-          }
         }
       }
     }
@@ -1354,4 +1352,31 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
     opacity: 1;
     color: $datagrid-draggable-column-text-color;
   }
+
+  .dx-command-ai-header-content {
+    max-width: calc(100% - ($fluent-button-height - $fluent-grid-base-cell-horizontal-padding + $fluent-grid-base-command-ai-header-button-offset));
+
+    .dx-#{$widget-name}-text-content {
+      padding-left: $fluent-grid-base-command-ai-text-content-padding;
+    }
+
+    .dx-icon-chatsparkleoutline {
+      @include dx-icon-sizing($fluent-grid-base-command-ai-chatsparkleoutline-icon-size);
+    }
+  }
+
+  .dx-command-ai-header-button {
+    left: auto;
+    right: $fluent-grid-base-command-ai-header-button-offset;
+  }
+
+  td[style*="text-align: right"] .dx-command-ai-header-button {
+    left: $fluent-grid-base-command-ai-header-button-offset;
+    right: auto;
+  }
+
+  .dx-ai-prompt-editor__progressbar .dx-progressbar-animating-container {
+    height: $fluent-grid-base-ai-prompt-editor-progressbar-height;
+    border-radius: 0;
+  }
 }

package/data/scss/widgets/fluent/gridBase/_sizes.scss

@@ -37,6 +37,10 @@ $fluent-command-edit-icon-size: null !default;
 $fluent-filter-panel-icon-size: null !default;
 
 $fluent-grid-base-filter-icon-size: $fluent-button-icon-size !default;
+$fluent-grid-base-command-ai-chatsparkleoutline-icon-size: null !default;
+$fluent-grid-base-command-ai-text-content-padding: null !default;
+$fluent-grid-base-command-ai-header-button-offset: null !default;
+$fluent-grid-base-ai-prompt-editor-progressbar-height: 4px !default;
 
 @if $size == "default" {
   $fluent-grid-base-cell-height: 48px !default;
@@ -68,6 +72,9 @@ $fluent-grid-base-filter-icon-size: $fluent-button-icon-size !default;
   $fluent-grid-base-header-icon-size: 20px !default;
   $fluent-command-edit-icon-size: 20px !default;
   $fluent-filter-panel-icon-size: 20px !default;
+  $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: 20px !default;
+  $fluent-grid-base-command-ai-text-content-padding: $fluent-grid-base-command-ai-chatsparkleoutline-icon-size + 8px !default;
+  $fluent-grid-base-command-ai-header-button-offset: 8px !default;
 }
 
 @else if $size == "compact" {
@@ -100,6 +107,9 @@ $fluent-grid-base-filter-icon-size: $fluent-button-icon-size !default;
   $fluent-grid-base-header-icon-size: 16px !default;
   $fluent-command-edit-icon-size: 16px !default;
   $fluent-filter-panel-icon-size: 16px !default;
+  $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: 16px !default;
+  $fluent-grid-base-command-ai-text-content-padding: $fluent-grid-base-command-ai-chatsparkleoutline-icon-size + 6px !default;
+  $fluent-grid-base-command-ai-header-button-offset: 6px !default;
 }
 
 $fluent-grid-base-header-cell-font-size: $fluent-grid-base-cell-font-size !default;

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

@@ -317,6 +317,12 @@
   gap: $fluent-aidialog-content-gap;
 }
 
-.dx-aidialog .dx-pending-indicator {
-  @include dx-pending-indicator-centered();
+.dx-aidialog {
+  .dx-pending-indicator {
+    @include dx-pending-indicator-centered();
+  }
+
+  &.dx-popup-wrapper > .dx-overlay-content {
+    border-radius: $fluent-aidialog-border-radius;
+  }
 }

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

@@ -14,27 +14,30 @@ $fluent-html-editor-add-image-dialog-tabs-padding: null !default;
 $fluent-aidialog-selects-gap: null !default;
 $fluent-aidialog-content-gap: null !default;
 $fluent-aidialog-content-padding: null !default;
+$fluent-aidialog-border-radius: null !default;
 
 @if $size == "default" {
   $fluent-toolbar-size-editor-width: 120px !default;
   $fluent-html-editor-vertical-padding: 16px !default;
   $fluent-html-editor-horizontal-padding: 16px !default;
-  $fluent-html-editor-add-image-dialog-fileuploader-padding: 48px 0 24px;
+  $fluent-html-editor-add-image-dialog-fileuploader-padding: 48px 0 24px !default;
   $fluent-html-editor-add-image-dialog-tabs-padding: 14px !default;
-  $fluent-aidialog-selects-gap: 8px;
-  $fluent-aidialog-content-gap: 16px;
-  $fluent-aidialog-content-padding: 16px 24px;
+  $fluent-aidialog-selects-gap: 8px !default;
+  $fluent-aidialog-content-gap: 16px !default;
+  $fluent-aidialog-content-padding: 16px 24px !default;
+  $fluent-aidialog-border-radius: $base-border-radius * 2 !default;
 }
 
 @else if $size == "compact" {
   $fluent-toolbar-size-editor-width: 90px !default;
   $fluent-html-editor-vertical-padding: 12px !default;
   $fluent-html-editor-horizontal-padding: 12px !default;
-  $fluent-html-editor-add-image-dialog-fileuploader-padding: 40px 0 18px;
+  $fluent-html-editor-add-image-dialog-fileuploader-padding: 40px 0 18px !default;
   $fluent-html-editor-add-image-dialog-tabs-padding: 8px !default;
-  $fluent-aidialog-selects-gap: 4px;
-  $fluent-aidialog-content-gap: 12px;
-  $fluent-aidialog-content-padding: 12px 16px;
+  $fluent-aidialog-selects-gap: 4px !default;
+  $fluent-aidialog-content-gap: 12px !default;
+  $fluent-aidialog-content-padding: 12px 16px !default;
+  $fluent-aidialog-border-radius: $base-border-radius !default;
 }
 
 $fluent-htmleditor-toolbar-padding: $fluent-html-editor-horizontal-padding !default;

package/data/scss/widgets/fluent/loadIndicator/_colors.scss

@@ -15,24 +15,24 @@ $load-indicator-animation-sparkle-bg-color3: null !default;
 @if $mode == "light" {
   @if $color == "blue" {
     $load-indicator-inner-segment-border-color: lighten(saturate(adjust-hue($load-indicator-segment-bg-color, 2.9), 2.2), 44.3) !default;
-    $load-indicator-animation-sparkle-bg-color1: lighten(saturate($base-accent, 0.33), 30.00) !default;
-    $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 0.98), 40.00) !default;
-    $load-indicator-animation-sparkle-bg-color3: lighten(desaturate($base-accent, 0.88), 44.90) !default;
+    $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
+    $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, 2), 2.73), 27.25) !default;
+    $load-indicator-animation-sparkle-bg-color3: lighten(saturate(adjust-hue($base-accent, 3), 5.61), 38.43) !default;
   }
 
   @if $color == "saas" {
     $load-indicator-inner-segment-border-color: mix($base-bg, $load-indicator-segment-bg-color, 68.82%) !default;
-    $load-indicator-animation-sparkle-bg-color1: lighten(desaturate(adjust-hue($base-accent, -15), 14.38), 3.53) !default;
-    $load-indicator-animation-sparkle-bg-color2: lighten(desaturate(adjust-hue($base-accent, -15), 15.69), 13.53) !default;
-    $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, -15), 15.58), 18.43) !default;
+    $load-indicator-animation-sparkle-bg-color1: darken(desaturate(adjust-hue($base-accent, -15), 14.71), 26.47) !default;
+    $load-indicator-animation-sparkle-bg-color2: lighten(desaturate(adjust-hue($base-accent, -12), 11.98), 0.78) !default;
+    $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, -12), 9.09), 11.96) !default;
   }
 }
 
 @if $mode == "dark" {
   $load-indicator-inner-segment-border-color: $base-accent-selected !default;
-  $load-indicator-animation-sparkle-bg-color1: lighten(saturate($base-accent, 0.47), 2.16) !default;
-  $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, 1), 0.47), 14.12) !default;
-  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, -2), 9.36), 26.08) !default;
+  $load-indicator-animation-sparkle-bg-color1: lighten(desaturate($base-accent, 1.67), 5.29) !default;
+  $load-indicator-animation-sparkle-bg-color2: darken(desaturate(adjust-hue($base-accent, -2), 4.40), 21.96) !default;
+  $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, -2), 8.58), 26.67) !default;
 }
 $never-used: collector((
 "$load-indicator-segment-bg-color": $load-indicator-segment-bg-color,

package/data/scss/widgets/fluent/progressBar/_index.scss

@@ -73,9 +73,8 @@
 }
 
 .dx-progressbar-status {
-  margin-top: $progressbar-status-height;
+  padding-top: $progressbar-status-margin-top;
   color: $progressbar-label-color;
-  height: $progressbar-status-height;
 
   .dx-progressbar .dx-position-right & {
     padding-top: 0;

package/data/scss/widgets/fluent/progressBar/_sizes.scss

@@ -4,13 +4,15 @@
 
 $progressbar-height: null !default;
 $progressbar-border-radius: $base-border-radius !default;
-$progressbar-status-height: 16px !default;
+$progressbar-status-margin-top: null !default;
 $progressbar-indeterminate-background-width: 90%;
 
 @if $size == "default" {
   $progressbar-height: 4px !default;
+  $progressbar-status-margin-top: 12px !default;
 }
 
 @else if $size == "compact" {
   $progressbar-height: 2px !default;
+  $progressbar-status-margin-top: 8px !default;
 }

package/data/scss/widgets/fluent/scheduler/_colors.scss

@@ -33,6 +33,7 @@ $scheduler-workspace-accent-color: $base-accent !default;
 $scheduler-current-time-cell-color: $base-accent !default;
 $scheduler-time-indicator-color: #eb5757 !default;
 $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
+$scheduler-form-icon-color: $base-icon-color !default;
 $scheduler-popup-title-bg: $scheduler-workspace-background-color !default;
 $scheduler-workspace-month-text-color: color.change($base-text-color, $alpha: 0.54) !default;
 $scheduler-dropdown-appointment-date-color: color.change($base-text-color, $alpha: 0.54) !default;

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

@@ -4,6 +4,8 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../form/sizes" as *;
+@use "../toolbar/sizes" as *;
 @use '../../base/scheduler/layout/header' as *;
 @use "../../base/mixins" as *;
 @use "../../base/icons" as *;
@@ -39,7 +41,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: $fluent-scheduler-days-of-week-button-size,
+  $scheduler-recurrence-end-item-height: $fluent-scheduler-recurrence-end-item-height
 );
 @use "../button/colors" as *;
 @use "../button/mixins" as *;
@@ -55,8 +60,6 @@ $fluent-scheduler-month-date-text-size: 14px;
 
 $scheduler-first-of-month-border: 1px solid $scheduler-first-month-border-color;
 
-$fluent-scheduler-compact-appointment-button-border-radius: 12px;
-
 $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 
 @include baseScheduler.scheduler-mixin();
@@ -396,33 +399,60 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
     }
   }
 
-  .dx-scheduler-appointment-collector {
-    margin-top: $fluent-scheduler-dropdown-appointment-margin-top;
-    margin-left: 52px;
-  }
-
   .dx-scheduler-date-table-current-date {
     color: $scheduler-current-time-cell-color;
   }
 }
 
+.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: $fluent-scheduler-dropdown-button-vertical-margin;
+      }
+    }
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-work-space-month:not(.dx-rtl) .dx-scheduler-appointment-collector {
+    margin-left: 52px;
+  }
 
-.dx-scheduler-adaptive {
-  .dx-scheduler-work-space.dx-scheduler-work-space-month .dx-scheduler-appointment-collector {
-    margin: 0;
+  .dx-scheduler-work-space.dx-scheduler-work-space-month.dx-rtl .dx-scheduler-appointment-collector {
+    margin-right: 52px;
   }
+}
 
+.dx-scheduler-adaptive {
   .dx-scheduler-work-space-week .dx-scheduler-header-panel-cell {
     white-space: nowrap;
   }
+
+  .dx-scheduler-appointment-collector {
+    margin: $fluent-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: $fluent-scheduler-dropdown-button-adaptive-vertical-margin;
+      }
+    }
+  }
 }
 
 .dx-scheduler-appointment-collector {
-  margin-top: $fluent-scheduler-dropdown-day-margin;
+  height: $fluent-scheduler-dropdown-button-height;
+  margin: $fluent-scheduler-dropdown-button-margin;
   position: absolute;
 
   &.dx-button {
-    border-radius: $fluent-scheduler-compact-appointment-button-border-radius;
+    border-radius: $fluent-scheduler-dropdown-button-height;
     height: $fluent-scheduler-dropdown-button-height;
     min-width: auto;
     width: auto;
@@ -579,6 +609,74 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 }
 
 .dx-scheduler-appointment-popup {
+  > .dx-overlay-content > .dx-toolbar.dx-widget {
+    > .dx-toolbar-items-container {
+      height: $fluent-scheduler-appointment-popup-toolbar-height;
+    }
+  }
+
+  .dx-form {
+    .dx-scheduler-form-icon {
+      color: $scheduler-form-icon-color;
+
+      &.dx-field-item.dx-flex-layout {
+        height: $fluent-scheduler-appointment-popup-icon-container-height;
+        padding-inline-end: $fluent-scheduler-appointment-popup-icon-padding-right;
+      }
+    }
+
+    .dx-scheduler-form-icon-sized-gap {
+      width: $fluent-base-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: $fluent-scheduler-appointment-popup-description-icon-margin-top;
+    }
+
+    .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: $fluent-scheduler-appointment-popup-recurrence-end-group-label-height;
+    }
+
+    .dx-scheduler-form-recurrence-end-group .dx-field-item-label {
+      margin-bottom: $fluent-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom;
+    }
+
+    .dx-scheduler-days-of-week-buttons {
+      height: $fluent-toolbar-height;
+      gap: $fluent-scheduler-days-of-week-buttons-gap;
+    }
+
+    .dx-field-item:not(.dx-first-col) {
+      padding-inline-start: $fluent-scheduler-appointment-popup-item-padding-horizontal;
+    }
+
+    .dx-field-item:not(.dx-last-col) {
+      padding-inline-end: $fluent-scheduler-appointment-popup-item-padding-horizontal;
+    }
+
+    .dx-scheduler-form-all-day-switch.dx-field-item.dx-label-h-align {
+      height: $fluent-scheduler-appointment-popup-all-day-item-height;
+
+      .dx-field-item-content {
+        .dx-switch.dx-widget {
+          margin-bottom: 3px;
+        }
+      }
+    }
+
+    .dx-scheduler-form-repeat-editor .dx-scheduler-form-recurrence-settings-button {
+      height: auto;
+    }
+  }
+}
+
+.dx-scheduler-legacy-appointment-popup {
   .dx-form {
     padding: 0 10px 0 10px;
   }
@@ -603,7 +701,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
   }
 }
 
-.dx-scheduler-appointment-popup .dx-form-validation-summary {
+.dx-scheduler-legacy-appointment-popup .dx-form-validation-summary {
   padding: 10px 20px;
 }
 
@@ -876,4 +974,3 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 .dx-scheduler-header-panel-empty-cell {
   margin-top: 0;
 }
-

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

@@ -2,6 +2,7 @@ $scheduler-border-radius: getCustomVar(("$scheduler-border-radius")) !default;
 
 @use "../sizes" as *;
 @use "../button/colors" as *;
+@use "../form/sizes" as *;
 @use "../toolbar/sizes" as *;
 
 
@@ -16,15 +17,29 @@ $fluent-scheduler-appointment-content-padding: null !default;
 $fluent-scheduler-recurring-appointment-content-padding: null !default;
 $fluent-scheduler-appointment-content-padding-rtl: null !default;
 $fluent-scheduler-recurring-appointment-content-padding-rtl: null !default;
-$fluent-scheduler-dropdown-appointment-margin-top: null !default;
 $fluent-scheduler-dropdown-button-height: null !default;
 $fluent-scheduler-dropdown-button-padding: null !default;
-$fluent-scheduler-dropdown-day-margin: null !default;
+$fluent-scheduler-dropdown-button-margin: null !default;
+$fluent-scheduler-dropdown-button-vertical-margin: null !default;
+$fluent-scheduler-dropdown-button-adaptive-margin: null !default;
+$fluent-scheduler-dropdown-button-adaptive-vertical-margin: null !default;
 $fluent-scheduler-appointment-tooltip-content-margin-left: null !default;
 $fluent-tooltip-marker-dimension: null !default;
 $fluent-scheduler-appointment-tooltip-title-margin-top: null !default;
 $fluent-scheduler-appointment-tooltip-remove-padding-top: null !default;
 
+$fluent-scheduler-appointment-popup-toolbar-height: null !default;
+$fluent-scheduler-appointment-popup-icon-container-height: null !default;
+$fluent-scheduler-appointment-popup-icon-padding-right: null !default;
+$fluent-scheduler-appointment-popup-description-icon-margin-top: null !default;
+$fluent-scheduler-appointment-popup-item-padding-horizontal: null !default;
+$fluent-scheduler-appointment-popup-all-day-item-height: null !default;
+$fluent-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: null !default;
+$fluent-scheduler-appointment-popup-recurrence-end-group-label-height: null !default;
+$fluent-scheduler-days-of-week-button-size: null !default;
+$fluent-scheduler-days-of-week-buttons-gap: null !default;
+$fluent-scheduler-recurrence-end-item-height: null !default;
+
 $scheduler-left-column-width: 65px !default;
 $fluent-scheduler-timeline-date-table-cell-height: 50px !default;
 $scheduler-border-radius: 0 !default;
@@ -77,16 +92,30 @@ $header-panel-time-cell-padding: null !default;
   $fluent-scheduler-recurring-appointment-content-padding: 6px 20px 6px 12px !default;
   $fluent-scheduler-appointment-content-padding-rtl: 6px 12px 6px 8px !default;
   $fluent-scheduler-recurring-appointment-content-padding-rtl: 6px 12px 6px 20px !default;
-  $fluent-scheduler-dropdown-appointment-margin-top: 7px !default;
   $fluent-scheduler-dropdown-button-height: 22px !default;
   $fluent-scheduler-dropdown-button-padding: 4px !default;
-  $fluent-scheduler-dropdown-day-margin: 5px !default;
+  $fluent-scheduler-dropdown-button-margin: 5px 1px 3px 3px !default;
+  $fluent-scheduler-dropdown-button-vertical-margin: 5px 3px 3px 3px !default;
+  $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default;
+  $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default;
 
   $fluent-scheduler-appointment-tooltip-content-margin-left: 6px !default;
   $fluent-tooltip-marker-dimension: 12px !default;
   $fluent-scheduler-appointment-tooltip-title-margin-top: 0 !default;
   $fluent-scheduler-appointment-tooltip-remove-padding-top: 1px !default;
 
+  $fluent-scheduler-appointment-popup-toolbar-height: 56px !default;
+  $fluent-scheduler-appointment-popup-icon-container-height: 32px !default;
+  $fluent-scheduler-appointment-popup-icon-padding-right: 10px !default;
+  $fluent-scheduler-appointment-popup-description-icon-margin-top: 24px !default;
+  $fluent-scheduler-appointment-popup-item-padding-horizontal: 6px !default;
+  $fluent-scheduler-appointment-popup-all-day-item-height: 40px !default;
+  $fluent-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: 16px !default;
+  $fluent-scheduler-appointment-popup-recurrence-end-group-label-height: 32px !default;
+  $fluent-scheduler-days-of-week-button-size: 32px !default;
+  $fluent-scheduler-days-of-week-buttons-gap: 12px !default;
+  $fluent-scheduler-recurrence-end-item-height: 32px !default;
+
   $agenda-appointment-title-font-size: 14px;
 }
 
@@ -111,16 +140,30 @@ $header-panel-time-cell-padding: null !default;
   $fluent-scheduler-recurring-appointment-content-padding: 4px 16px 4px 8px !default;
   $fluent-scheduler-appointment-content-padding-rtl: 4px 8px 4px 6px !default;
   $fluent-scheduler-recurring-appointment-content-padding-rtl: 4px 8px 4px 16px !default;
-  $fluent-scheduler-dropdown-appointment-margin-top: 3px !default;
   $fluent-scheduler-dropdown-button-height: 18px !default;
   $fluent-scheduler-dropdown-button-padding: 2px !default;
-  $fluent-scheduler-dropdown-day-margin: 2px !default;
+  $fluent-scheduler-dropdown-button-margin: 2px 1px 2px 3px !default;
+  $fluent-scheduler-dropdown-button-vertical-margin: 2px 1px 2px 1px !default;
+  $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default;
+  $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default;
 
   $fluent-scheduler-appointment-tooltip-content-margin-left: 8px !default;
   $fluent-tooltip-marker-dimension: 18px !default;
   $fluent-scheduler-appointment-tooltip-title-margin-top: 3px !default;
   $fluent-scheduler-appointment-tooltip-remove-padding-top: 2px !default;
 
+  $fluent-scheduler-appointment-popup-toolbar-height: 48px !default;
+  $fluent-scheduler-appointment-popup-icon-container-height: 24px !default;
+  $fluent-scheduler-appointment-popup-icon-padding-right: 8px !default;
+  $fluent-scheduler-appointment-popup-description-icon-margin-top: 18px !default;
+  $fluent-scheduler-appointment-popup-item-padding-horizontal: 4px !default;
+  $fluent-scheduler-appointment-popup-all-day-item-height: 30px !default;
+  $fluent-scheduler-appointment-popup-recurrence-end-group-label-margin-bottom: 12px !default;
+  $fluent-scheduler-appointment-popup-recurrence-end-group-label-height: 24px !default;
+  $fluent-scheduler-days-of-week-button-size: 22px !default;
+  $fluent-scheduler-days-of-week-buttons-gap: 8px !default;
+  $fluent-scheduler-recurrence-end-item-height: 22px !default;
+
   $agenda-appointment-title-font-size: 13px;
 }
 $never-used: collector((

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

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

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

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

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

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

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

@@ -24,7 +24,7 @@ $base-invalid-faded-border-color: getCustomVar(("$base-invalid-faded-border-colo
 $color: null !default;
 
 $generic-color-postfix: null !default;
-$base-font-family: 'Helvetica Neue', 'Segoe UI', helvetica, verdana, sans-serif !default;
+$base-font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'segoe ui', 'helvetica neue', 'adwaita sans', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif !default;
 $base-accent: null !default;
 $base-label-color: null !default;
 $base-link-color: null !default;

package/data/scss/widgets/generic/_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";