devextreme-themebuilder 25.1.1-alpha → 25.1.3

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

@@ -3,13 +3,19 @@
 // adduse
 
 $fluent-context-menu-horizontal-padding: null !default;
-$fluent-context-menu-container-vertical-padding: 4px !default;
 $fluent-context-menu-border-radius: $base-border-radius !default;
+$fluent-context-menu-items-container-padding: 4px !default;
+$fluent-context-menu-items-container-gap: 2px !default;
+$fluent-context-menu-item-border-radius: $base-border-radius !default;
+$fluent-context-menu-item-content-gap: null !default;
+$fluent-context-menu-item-text-padding-inline: 2px !default;
 
 @if $size == "default" {
-  $fluent-context-menu-horizontal-padding: 12px !default;
+  $fluent-context-menu-horizontal-padding: 6px !default;
+  $fluent-context-menu-item-content-gap: 6px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-context-menu-horizontal-padding: 8px !default;
+  $fluent-context-menu-horizontal-padding: 4px !default;
+  $fluent-context-menu-item-content-gap: 4px !default;
 }

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

@@ -92,9 +92,11 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
       }
 
       .dx-texteditor {
-        .dx-texteditor-input,
-        .dx-placeholder::before {
-          padding-left: $fluent-grid-base-texteditor-input-padding;
+        .dx-texteditor-container {
+          .dx-texteditor-input,
+          .dx-placeholder::before {
+            padding-left: $fluent-grid-base-texteditor-input-padding;
+          }
         }
       }
     }
@@ -480,13 +482,13 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
         font-size: $fluent-grid-base-cell-font-size;
         height: $fluent-grid-base-cell-height;
         line-height: $fluent-grid-base-cell-height;
-        padding-right: $fluent-grid-base-cell-horizontal-padding;
-        padding-left: $fluent-grid-base-cell-horizontal-padding;
-        padding-top: 0;
-        padding-bottom: 0;
         margin-top: 0;
       }
 
+      &:not(.dx-tagbox):not(.dx-colorbox) .dx-texteditor-input {
+        padding: 0 $fluent-grid-base-cell-horizontal-padding;
+      }
+
       .dx-placeholder::before {
         padding-right: $fluent-grid-base-cell-horizontal-padding;
         padding-left: $fluent-grid-base-cell-horizontal-padding;
@@ -733,6 +735,14 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
           }
         }
       }
+
+      .dx-row {
+        &.dx-header-row {
+          > td {
+            border-right: 1px solid $fluent-grid-base-border-color;
+          }
+        }
+      }
     }
 
     &.dx-header-multi-row:not(.dx-#{$widget-name}-sticky-columns) {
@@ -741,7 +751,6 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
           .dx-row {
             &.dx-header-row {
               > td {
-                border-right: 1px solid $fluent-grid-base-border-color;
                 border-left: 1px solid $fluent-grid-base-border-color;
 
                 &:first-child {
@@ -997,7 +1006,6 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
 
     .dx-row-removed:not(.dx-row-lines) > td {
       border-top: 1px solid $datagrid-hover-bg;
-      border-bottom: 1px solid $datagrid-hover-bg;
     }
 
     .dx-adaptive-detail-row {
@@ -1039,7 +1047,6 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
       &.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,
@@ -1047,6 +1054,10 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
             color: $datagrid-row-focused-color;
           }
         }
+
+        & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) {
+          background-color: $datagrid-row-focused-bg;
+        }
       }
 
       &:not(.dx-row-lines) {
@@ -1139,7 +1150,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
     }
 
     &.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: $fluent-grid-base-cell-vertical-padding + 1px;
       }
 
@@ -1163,7 +1174,8 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
         }
       }
 
-      .dx-row.dx-row-lines.dx-edit-row > td {
+      .dx-row.dx-row-lines.dx-edit-row > td,
+      .dx-row-removed.dx-row-lines > td {
         border-top-width: 0;
       }
     }

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

@@ -14,6 +14,7 @@
 @use "../common/sizes" as *;
 @use "../fileUploader/sizes" as *;
 @use "../popup/sizes" as *;
+@use "../../base/mixins" as *;
 @use "../../base/htmlEditor";
 
 // adduse
@@ -302,3 +303,20 @@
 .dx-formdialog.dx-dropdowneditor-overlay.dx-popup-wrapper .dx-overlay-content {
   box-shadow: $fluent-popup-content-shadow;
 }
+
+.dx-aidialog-controls {
+  gap: $fluent-aidialog-selects-gap;
+
+  .dx-selectbox {
+    max-width: calc(50% - $fluent-aidialog-selects-gap * 0.5);
+  }
+}
+
+.dx-aidialog-content {
+  padding: $fluent-aidialog-content-padding;
+  gap: $fluent-aidialog-content-gap;
+}
+
+.dx-aidialog .dx-pending-indicator {
+  @include dx-pending-indicator-centered();
+}

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

@@ -11,6 +11,9 @@ $fluent-html-editor-toolbar-menu-separator-margin: 4px !default;
 $fluent-html-editor-fileuploader-input-wrapper-border-radius: 8px !default;
 $fluent-html-editor-fileuploader-input-wrapper-border-size: 1.5px !default;
 $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;
 
 @if $size == "default" {
   $fluent-toolbar-size-editor-width: 120px !default;
@@ -18,6 +21,9 @@ $fluent-html-editor-add-image-dialog-tabs-padding: null !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-tabs-padding: 14px !default;
+  $fluent-aidialog-selects-gap: 8px;
+  $fluent-aidialog-content-gap: 16px;
+  $fluent-aidialog-content-padding: 16px 24px;
 }
 
 @else if $size == "compact" {
@@ -26,6 +32,9 @@ $fluent-html-editor-add-image-dialog-tabs-padding: null !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-tabs-padding: 8px !default;
+  $fluent-aidialog-selects-gap: 4px;
+  $fluent-aidialog-content-gap: 12px;
+  $fluent-aidialog-content-padding: 12px 16px;
 }
 
 $fluent-htmleditor-toolbar-padding: $fluent-html-editor-horizontal-padding !default;

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

@@ -0,0 +1,19 @@
+@use "../colors" as *;
+@use "sass:color";
+
+// adduse
+
+$informer-error-color: $base-invalid-color !default;
+$informer-error-background-color: null !default;
+$informer-info-color: $base-text-color !default;
+$informer-info-background-color: null !default;
+
+@if $mode == "light" {
+  $informer-error-background-color: lighten(saturate(adjust-hue($base-danger, -358), 0.58), 46.67);
+  $informer-info-background-color: lighten($base-text-color, 74.90);
+}
+
+@if $mode == "dark" {
+  $informer-error-background-color: darken(desaturate($base-danger, 5.06), 53.53);
+  $informer-info-background-color: darken($base-text-color, 76.08);
+}

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

@@ -0,0 +1,18 @@
+@use "../../base/informer";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/informer/mixins" as *;
+
+// adduse
+
+@include informer(
+  $informer-error-color,
+  $informer-error-background-color,
+  $informer-info-color,
+  $informer-info-background-color,
+  $informer-border-radius,
+  $informer-icon-size,
+  $informer-padding-inline,
+  $informer-padding-block,
+  $informer-column-gap,
+);

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

@@ -0,0 +1,24 @@
+@use "../common/sizes" as *;
+@use "../sizes" as *;
+
+// adduse
+
+$informer-icon-size: $fluent-base-icon-size !default;
+$informer-padding-inline: null !default;
+$informer-padding-block: null !default;
+$informer-column-gap: null !default;
+$informer-border-radius: null !default;
+
+@if $size == "default" {
+  $informer-padding-inline: 12px !default;
+  $informer-padding-block: 8px !default;
+  $informer-column-gap: 6px !default;
+  $informer-border-radius: 4px !default;
+}
+
+@else if $size == "compact" {
+  $informer-padding-inline: 8px !default;
+  $informer-padding-block: 4px !default;
+  $informer-column-gap: 4px !default;
+  $informer-border-radius: 3px !default;
+}

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

@@ -406,6 +406,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo
     &.dx-list-select-checkbox-container,
     &.dx-list-select-radiobutton-container {
       display: flex;
+      flex-shrink: 0;
       width: $fluent-list-item-height;
       justify-content: center;
       align-items: center;

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

@@ -4,7 +4,6 @@
 
 $fluent-list-vertical-padding: 4px !default;
 $fluent-list-item-margin-inline: 4px !default;
-$fluent-list-item-checkbox-margin-inline: null !default;
 $fluent-list-bottom-padding: 4px !default;
 $fluent-list-searchbox-margin-bottom: 4px !default;
 $fluent-list-item-height: null !default;
@@ -15,7 +14,6 @@ $fluent-list-group-header-vertical-padding: null !default;
 $fluent-list-next-button-horizontal-padding: null !default;
 
 @if $size == "default" {
-  $fluent-list-item-checkbox-margin-inline: 8px !default;
   $fluent-list-item-height: 32px !default;
   $fluent-list-item-vertical-padding: 6px !default;
   $fluent-list-item-horizontal-padding: 12px !default;
@@ -24,7 +22,6 @@ $fluent-list-next-button-horizontal-padding: null !default;
 }
 
 @else if $size == "compact" {
-  $fluent-list-item-checkbox-margin-inline: 4px !default;
   $fluent-list-item-height: 24px !default;
   $fluent-list-item-vertical-padding: 4px !default;
   $fluent-list-item-horizontal-padding: 8px !default;

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

@@ -8,19 +8,31 @@ $load-indicator-inner-segment-border-color: getCustomVar(("$load-indicator-inner
 // adduse
 $load-indicator-segment-bg-color: $base-accent !default;
 $load-indicator-inner-segment-border-color: null !default;
+$load-indicator-animation-sparkle-bg-color1: null !default;
+$load-indicator-animation-sparkle-bg-color2: null !default;
+$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;
   }
 
   @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;
   }
 }
 
 @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;
 }
 $never-used: collector((
 "$load-indicator-segment-bg-color": $load-indicator-segment-bg-color,

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

@@ -3,21 +3,14 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
-@use "../../base/loadIndicator";
+@use "../../base/loadIndicator" as *;
 
 // adduse
 
 .dx-loadindicator {
-  background-color: transparent;
   line-height: 100%;
 }
 
-.dx-loadindicator-content {
-  height: 100%;
-  width: 100%;
-  animation: dx-content-rotation 1568ms linear infinite;
-}
-
 .dx-loadindicator-image {
   .dx-loadindicator-content {
     animation: none;
@@ -25,16 +18,14 @@
 }
 
 .dx-loadindicator-icon {
-  position: absolute;
   height: 100%;
   width: 100%;
-  animation: dx-icon-rotation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
 .dx-loadindicator-segment {
+  position: absolute;
   height: 100%;
   width: 100%;
-  position: absolute;
 }
 
 .dx-loadindicator-segment-inner {
@@ -48,58 +39,73 @@
   border-radius: 50%;
 }
 
-.dx-loadindicator-segment0,
-.dx-loadindicator-segment1 {
-  width: 50%;
-  height: 100%;
-  overflow: hidden;
+.dx-loadindicator-content-circle {
+  animation: dx-content-rotation 1568ms linear infinite;
 
-  .dx-loadindicator-segment-inner {
-    width: 200%;
+  .dx-loadindicator-icon {
+    position: absolute;
+    animation: dx-icon-rotation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
   }
-}
 
-.dx-loadindicator-segment0 {
-  left: 0;
+  .dx-loadindicator-segment0,
+  .dx-loadindicator-segment1 {
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
 
-  .dx-loadindicator-segment-inner {
-    border-right-color: transparent;
-    transform: rotate(-129deg);
-    animation: dx-left-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+    .dx-loadindicator-segment-inner {
+      width: 200%;
+    }
   }
-}
 
-.dx-loadindicator-segment2 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
+  .dx-loadindicator-segment0 {
+    left: 0;
 
-  .dx-loadindicator-segment-inner {
-    border-color: $load-indicator-inner-segment-border-color;
-    width: 100%;
+    .dx-loadindicator-segment-inner {
+      border-right-color: transparent;
+      transform: rotate(-129deg);
+      animation: dx-left-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+    }
+  }
+
+  .dx-loadindicator-segment2 {
+    position: absolute;
+    top: 0;
     left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .dx-loadindicator-segment-inner {
+      border-color: $load-indicator-inner-segment-border-color;
+      width: 100%;
+      left: 0;
+    }
   }
-}
 
-.dx-loadindicator-segment1 {
-  right: 0;
+  .dx-loadindicator-segment1 {
+    right: 0;
 
-  .dx-loadindicator-segment-inner {
-    left: -100%;
-    border-left-color: transparent;
-    transform: rotate(129deg);
-    animation: dx-right-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+    .dx-loadindicator-segment-inner {
+      left: -100%;
+      border-left-color: transparent;
+      transform: rotate(129deg);
+      animation: dx-right-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 
-    &::after {
-      right: 0;
+      &::after {
+        right: 0;
+      }
     }
   }
 }
 
+@include loadindicator-animation-sparkle(
+  $load-indicator-animation-sparkle-bg-color1,
+  $load-indicator-animation-sparkle-bg-color2,
+  $load-indicator-animation-sparkle-bg-color3
+);
+
 @keyframes dx-content-rotation {
   to { transform: rotate(360deg); }
 }

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

@@ -12,7 +12,6 @@
 $fluent-recurrence-number-box-margin: 11px;
 $fluent-recurrence-button-group-padding: 6px;
 $fluent-recurrence-radio-group-margin: 15px;
-$fluent-recurrence-date-box-mergin-left: 23px;
 
 .dx-recurrence-numberbox-interval {
   margin-right: $fluent-recurrence-number-box-margin;
@@ -38,10 +37,9 @@ $fluent-recurrence-date-box-mergin-left: 23px;
 }
 
 .dx-recurrence-datebox-until-date {
-  margin-left: $fluent-recurrence-date-box-mergin-left;
+  margin-top: $fluent-recurrence-until-date-box-top-margin;
 }
 
 .dx-recurrence-numberbox-repeat-count {
-  margin: 0 $fluent-recurrence-number-box-margin 0 $fluent-recurrence-number-box-margin;
+  margin-top: $fluent-recurrence-count-number-box-top-margin;
 }
-

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

@@ -2,12 +2,18 @@
 
 // adduse
 
+$fluent-recurrence-until-date-box-top-margin: null !default;
+$fluent-recurrence-count-number-box-top-margin: null !default;
 $fluent-recurrence-interval-number-box-margin-top: null !default;
 
 @if $size == "default" {
-  $fluent-recurrence-interval-number-box-margin-top: 40px !default;
+  $fluent-recurrence-until-date-box-top-margin: 60px !default;
+  $fluent-recurrence-count-number-box-top-margin: 102px !default;
+  $fluent-recurrence-interval-number-box-margin-top: 30px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-recurrence-interval-number-box-margin-top: 25px !default;
+  $fluent-recurrence-until-date-box-top-margin: 46px !default;
+  $fluent-recurrence-count-number-box-top-margin: 78px !default;
+  $fluent-recurrence-interval-number-box-margin-top: 22px !default;
 }

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

@@ -118,7 +118,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 .dx-scheduler-all-day-title {
   display: flex;
   align-items: center;
-  justify-content: end;
+  justify-content: flex-end;
   height: $fluent-scheduler-all-day-table-cell-height;
   font-size: $fluent-scheduler-all-day-title-font-size;
   border-bottom: baseScheduler.$scheduler-base-border;
@@ -441,8 +441,8 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 .dx-scheduler-header {
   @include header-sizes(
     $fluent-scheduler-header-height,
+    $fluent-scheduler-header-offset,
     $fluent-scheduler-toolbar-item-offset,
-    baseScheduler.$scheduler-base-border,
   );
 
   .dx-scheduler-navigator-next,

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

@@ -43,7 +43,8 @@ $fluent-scheduler-workspace-month-header-height: 22px !default;
 $fluent-scheduler-workspace-month-timeline--time-height: 34px !default;
 
 $agenda-appointment-title-font-size: null !default;
-$fluent-scheduler-header-height: $fluent-toolbar-height + 2px !default;
+$fluent-scheduler-header-height: null !default;
+$fluent-scheduler-header-offset: null !default;
 
 $scheduler-timeline-cell-height: 50px !default;
 
@@ -62,9 +63,11 @@ $header-panel-time-cell-padding: null !default;
   $header-day-element-height: 26px;
   $fluent-scheduler-workspace-date-table-cell-height: 38px !default;
 
-  $fluent-scheduler-toolbar-item-offset: 0 12px !default;
   $fluent-scheduler-navigator-height: 36px !default;
   $fluent-scheduler-header-panel-day-font-size: 16px !default;
+  $fluent-scheduler-header-height: 46px !default;
+  $fluent-scheduler-header-offset: 0 12px !default;
+  $fluent-scheduler-toolbar-item-offset: 4px !default;
 
   $fluent-scheduler-appointment-tooltip-title-font-size: 16px !default;
   $fluent-scheduler-appointment-tooltip-date-font-size: 14px !default;
@@ -94,9 +97,11 @@ $header-panel-time-cell-padding: null !default;
   $header-day-element-height: 24px;
   $fluent-scheduler-workspace-date-table-cell-height: 28px !default;
 
-  $fluent-scheduler-toolbar-item-offset: 0 8px !default;
   $fluent-scheduler-navigator-height: 28px !default;
   $fluent-scheduler-header-panel-day-font-size: 14px !default;
+  $fluent-scheduler-header-height: 34px !default;
+  $fluent-scheduler-header-offset: 2px 8px !default;
+  $fluent-scheduler-toolbar-item-offset: 4px !default;
 
   $fluent-scheduler-appointment-tooltip-title-font-size: 14px !default;
   $fluent-scheduler-appointment-tooltip-date-font-size: 11px !default;