devextreme-themebuilder 25.1.7 → 25.2.2-beta

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

@@ -23,11 +23,14 @@ $chat-typingindicator-bubble-bg-color: getCustomVar(("$chat-typingindicator-bubb
 @use "../sizes" as *;
 @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-bg-hover !default;
+$chat-messagebox-file-cancel-button-secondary-color: $button-normal-text-bg-active !default;
 $chat-message-editing-preview-accent-color: $base-accent !default;
 $chat-message-editing-preview-cancel-button-color: $texteditor-label-color !default;
 $chat-avatar-color: null !default;
@@ -48,6 +51,10 @@ $chat-typingindicator-color: null !default;
 $chat-typingindicator-circle-bg-color-center: null !default;
 $chat-typingindicator-circle-bg-color: null !default;
 
+$chat-file-container-background-color: $base-bg !default;
+$chat-file-container-box-shadow: null !default;
+$chat-file-secondary-color: $base-icon-color !default;
+
 @if $color == "light" {
   $chat-avatar-color: $base-text-color !default;
   $chat-bubble-color-primary: $base-text-color !default;
@@ -66,6 +73,8 @@ $chat-typingindicator-circle-bg-color: null !default;
 
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
+
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
 }
 
 @if $color == "dark" {
@@ -86,6 +95,8 @@ $chat-typingindicator-circle-bg-color: null !default;
 
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
+
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
 }
 
 @if $color == "carmine" {
@@ -106,6 +117,8 @@ $chat-typingindicator-circle-bg-color: null !default;
 
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
+
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
 }
 
 @if $color == "contrast" {
@@ -126,6 +139,8 @@ $chat-typingindicator-circle-bg-color: null !default;
 
   $chat-typingindicator-circle-bg-color: $base-inverted-bg !default;
   $chat-typingindicator-circle-bg-color-center: $base-inverted-bg !default;
+
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
 }
 
 @if $color == "darkmoon" {
@@ -146,6 +161,8 @@ $chat-typingindicator-circle-bg-color: null !default;
 
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
+
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
 }
 
 @if $color == "darkviolet" {
@@ -166,6 +183,8 @@ $chat-typingindicator-circle-bg-color: null !default;
 
   $chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
   $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
+
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default;
 }
 
 @if $color == "greenmist" {
@@ -186,6 +205,8 @@ $chat-typingindicator-circle-bg-color: null !default;
 
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
+
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
 }
 
 @if $color == "softblue" {
@@ -206,6 +227,8 @@ $chat-typingindicator-circle-bg-color: null !default;
 
   $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
   $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
+
+  $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
 }
 $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
 

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

@@ -5,6 +5,7 @@
 @use "../sizes" as *;
 @use "../../base/chat/mixins" as *;
 @use "../popup/sizes" as *;
+@use "../common/mixins" as *;
 
 // adduse
 
@@ -18,7 +19,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,
@@ -31,7 +48,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,
@@ -43,6 +67,7 @@
   $chat-bubble-container-gap,
   $chat-bubble-delete-gap,
   $chat-bubble-delete-icon-size,
+  $chat-bubble-gap,
 );
 @include chat-messagegroup(
   $chat-messagegroup-gap,
@@ -114,3 +139,18 @@
   $chat-confirmation-popup-toolbar-padding-inline,
   $chat-confirmation-popup-toolbar-gap,
 );
+
+.dx-chat-file {
+  @include dx-base-typography();
+}
+
+.dx-chat-textarea.dx-textarea {
+  .dx-fileuploader-file-container {
+    padding: $chat-messagebox-file-container-padding;
+    border-radius: $chat-messagebox-file-container-border-radius;
+  }
+
+  .dx-fileuploader-cancel-button {
+    background-color: transparent;
+  }
+}

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

@@ -15,8 +15,13 @@ $chat-bubble-delete-gap: null !default;
 $chat-bubble-delete-icon-size: null !default;
 $chat-messagebox-padding: null !default;
 $chat-messagebox-textarea-border-radius: $texteditor-input-border-radius !default;
+$chat-messagebox-textarea-padding: null !default;
+$chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
-$chat-messagebox-buton-gap: 0 !default;
+$chat-messagebox-files-container-padding: 3px !default;
+$chat-messagebox-files-container-padding-top: 2px !default;
+$chat-messagebox-file-container-padding: null !default;
+$chat-messagebox-file-container-border-radius: 4px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;
@@ -24,7 +29,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;
@@ -65,14 +69,30 @@ $chat-confirmation-popup-toolbar-padding-block: $generic-popup-toolbarbottom-pad
 $chat-confirmation-popup-toolbar-padding-inline: $generic-popup-toolbarbottom-padding !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: $base-border-radius !default;
+$chat-file-button-size: null !default;
+$chat-file-secondary-font-size: 10px !default;
+$chat-file-base-section-gap: 4px !default;
+$chat-file-size-max-width: 4em !default;
+$chat-file-icon-font-size: null !default;
+$chat-file-view-items-gap: 8px !default;
+$chat-bubble-gap: 8px !default;
+
 @if $size == "default" {
   $chat-bubble-padding: 8px 12px !default;
   $chat-bubble-delete-gap: 4px !default;
   $chat-bubble-delete-icon-size: 18px !default;
   $chat-messagebox-padding: 20px !default;
+  $chat-messagebox-textarea-padding: 9px !default;
+  $chat-messagebox-toolbar-min-height: 36px !default;
+  $chat-messagebox-file-container-padding: 5px 8px !default;
   $chat-messagelist-padding: 20px !default;
   $chat-messagegroup-padding: 24px !default;
 
+  $chat-file-button-size: 36px !default;
+
   $chat-alerts-padding-block: 16px !default;
   $chat-alerts-row-gap: 4px !default;
   $chat-alert-padding-block: 9px !default;
@@ -95,6 +115,8 @@ $chat-confirmation-popup-toolbar-gap: null !default;
 
   $chat-confirmation-popup-content-padding: 0 !default;
   $chat-confirmation-popup-toolbar-gap: 8px !default;
+
+  $chat-file-icon-font-size: 18px !default;
 }
 
 @else if $size == "compact" {
@@ -102,9 +124,14 @@ $chat-confirmation-popup-toolbar-gap: null !default;
   $chat-bubble-delete-gap: 2px !default;
   $chat-bubble-delete-icon-size: 14px !default;
   $chat-messagebox-padding: 16px !default;
+  $chat-messagebox-textarea-padding: 5px !default;
+  $chat-messagebox-toolbar-min-height: 26px !default;
+  $chat-messagebox-file-container-padding: 2px 4px !default;
   $chat-messagelist-padding: 16px !default;
   $chat-messagegroup-padding: 12px !default;
 
+  $chat-file-button-size: 26px !default;
+
   $chat-alerts-padding-block: 12px !default;
   $chat-alerts-row-gap: 2px !default;
   $chat-alert-padding-block: 6px !default;
@@ -127,4 +154,6 @@ $chat-confirmation-popup-toolbar-gap: null !default;
 
   $chat-confirmation-popup-content-padding: $generic-popup-content-padding !default;
   $chat-confirmation-popup-toolbar-gap: 4px !default;
+
+  $chat-file-icon-font-size: 14 !default;
 }

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

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

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

@@ -22,14 +22,6 @@
   }
 }
 
-.dx-colorbox-input-container {
-  &.dx-colorbox-color-is-not-defined {
-    .dx-colorbox-color-result-preview {
-      background: $colorbox-preview-empty-bg no-repeat 0 0;
-    }
-  }
-}
-
 .dx-colorbox-color-result-preview {
   position: absolute;
   top: 50%;
@@ -40,6 +32,11 @@
   inset-inline-start: 13px;
   border: 1px solid;
   border-color: $colorview-border-color;
+
+  .dx-icon-colordismiss {
+    font-size: 17px;
+    color: $colorbox-preview-icon-color;
+  }
 }
 
 .dx-colorbox-overlay {

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

@@ -8,7 +8,6 @@ $colorbox-overlay-bg: getCustomVar(("$colorbox-overlay-bg")) !default;
 // adduse
 $colorbox-overlay-bg: null !default;
 $colorbox-palette-cell-bg: null !default;
-$colorbox-preview-empty-bg: null !default;
 $colorview-handle-color: null !default;
 $colorview-handle-border-color: null !default;
 $colorview-border-color: $base-border-color !default;
@@ -18,7 +17,6 @@ $colorview-label-color: $base-label-color !default;
 @if $color == "carmine" {
   $colorbox-overlay-bg: $overlay-content-bg !default;
   $colorbox-palette-cell-bg: $colorbox-overlay-bg !default;
-  $colorbox-preview-empty-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAQAAACRZI9xAAAAdElEQVQoU4XR0Q3AIAgFQCarie7UrToMc3QIiyIFFGNe5INcgETAegpQefFCCFPwYZI2qFA/M4EQMQAhKxJgiEcKHFFkwUQY3Q4sBAhUerYzkbaiTUk7Ije0dYoMyeYGi35igUeDzMCiTiKgaPx0BAR1csgHXJxUKOJqsbEAAAAASUVORK5CYII=") !default;
   $colorview-handle-color: $base-bg !default;
   $colorview-handle-border-color: color.change($base-inverted-bg, $alpha: 0.2) !default;
 }
@@ -26,7 +24,6 @@ $colorview-label-color: $base-label-color !default;
 @if $color == "contrast" {
   $colorbox-overlay-bg: $base-bg !default;
   $colorbox-palette-cell-bg: $base-bg !default;
-  $colorbox-preview-empty-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAQAAACRZI9xAAAAb0lEQVQoU4XOAQrAIAgFUE+2Qd1pt9rJdghnOee3jBQR5KESb4OkHj6kZ1n5VnIuUJV5UUIpUkBGZmQASEQOAnGEYCCKrgAmQgJYCicDaSfalnNF7Id2zhGQAj8g+gmCiD4yAkSdZMBRJzkw1MkmXtMsiBZyxb08AAAAAElFTkSuQmCC") !default;
   $colorview-handle-color: $base-inverted-bg !default;
   $colorview-handle-border-color: color.change($base-border-color, $alpha: 0.2) !default;
 }
@@ -34,7 +31,6 @@ $colorview-label-color: $base-label-color !default;
 @if $color == "dark" {
   $colorbox-overlay-bg: $overlay-content-bg !default;
   $colorbox-palette-cell-bg: $colorbox-overlay-bg !default;
-  $colorbox-preview-empty-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAQAAACRZI9xAAAAdElEQVQoU4XR0Q3AIAgFQCariS7CFN2qk3UIiyIFFGNe5INcgETAegpQefFCCFPwYZI2qFA/M4EQMQAhKxJgiEcKHFFkwUQY3Q4sBAhUerYzkbaiTUk7Ije0dYoMyeYGi35igUeDzMCiTiKgaPx0BAR1csgH1RfUiCvMOY4AAAAASUVORK5CYII=") !default;
   $colorview-handle-color: $base-bg !default;
   $colorview-handle-border-color: color.change($base-inverted-bg, $alpha: 0.2) !default;
 }
@@ -42,7 +38,6 @@ $colorview-label-color: $base-label-color !default;
 @if $color == "darkmoon" {
   $colorbox-overlay-bg: $overlay-content-bg !default;
   $colorbox-palette-cell-bg: $colorbox-overlay-bg !default;
-  $colorbox-preview-empty-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAQAAACRZI9xAAAAdElEQVQoU4XR0Q3AIAgFQCariS7CFN2qk3UIiyIFFGNe5INcgETAegpQefFCCFPwYZI2qFA/M4EQMQAhKxJgiEcKHFFkwUQY3Q4sBAhUerYzkbaiTUk7Ije0dYoMyeYGi35igUeDzMCiTiKgaPx0BAR1csgH1RfUiCvMOY4AAAAASUVORK5CYII=") !default;
   $colorview-handle-color: $base-bg !default;
   $colorview-handle-border-color: color.change($base-inverted-bg, $alpha: 0.2) !default;
 }
@@ -50,7 +45,6 @@ $colorview-label-color: $base-label-color !default;
 @if $color == "darkviolet" {
   $colorbox-overlay-bg: $overlay-content-bg !default;
   $colorbox-palette-cell-bg: $colorbox-overlay-bg !default;
-  $colorbox-preview-empty-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAQAAACRZI9xAAAAdElEQVQoU4XR0Q3AIAgFQCariS7CFN2qk3UIiyIFFGNe5INcgETAegpQefFCCFPwYZI2qFA/M4EQMQAhKxJgiEcKHFFkwUQY3Q4sBAhUerYzkbaiTUk7Ije0dYoMyeYGi35igUeDzMCiTiKgaPx0BAR1csgH1RfUiCvMOY4AAAAASUVORK5CYII=") !default;
   $colorview-handle-color: $base-bg !default;
   $colorview-handle-border-color: color.change($base-inverted-bg, $alpha: 0.2) !default;
 }
@@ -58,7 +52,6 @@ $colorview-label-color: $base-label-color !default;
 @if $color == "greenmist" {
   $colorbox-overlay-bg: $overlay-content-bg !default;
   $colorbox-palette-cell-bg: $colorbox-overlay-bg !default;
-  $colorbox-preview-empty-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAQAAACRZI9xAAAAdElEQVQoU4XR0Q3AIAgFQCarie7UrToMc3QIiyIFFGNe5INcgETAegpQefFCCFPwYZI2qFA/M4EQMQAhKxJgiEcKHFFkwUQY3Q4sBAhUerYzkbaiTUk7Ije0dYoMyeYGi35igUeDzMCiTiKgaPx0BAR1csgHXJxUKOJqsbEAAAAASUVORK5CYII=") !default;
   $colorview-handle-color: $base-bg !default;
   $colorview-handle-border-color: color.change($base-inverted-bg, $alpha: 0.2) !default;
 }
@@ -66,7 +59,6 @@ $colorview-label-color: $base-label-color !default;
 @if $color == "light" {
   $colorbox-overlay-bg: $overlay-content-bg !default;
   $colorbox-palette-cell-bg: $colorbox-overlay-bg !default;
-  $colorbox-preview-empty-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAQAAACRZI9xAAAAdElEQVQoU4XR0Q3AIAgFQCarie7UrToMc3QIiyIFFGNe5INcgETAegpQefFCCFPwYZI2qFA/M4EQMQAhKxJgiEcKHFFkwUQY3Q4sBAhUerYzkbaiTUk7Ije0dYoMyeYGi35igUeDzMCiTiKgaPx0BAR1csgHXJxUKOJqsbEAAAAASUVORK5CYII=") !default;
   $colorview-handle-color: $base-bg !default;
   $colorview-handle-border-color: color.change($base-inverted-bg, $alpha: 0.2) !default;
 }
@@ -74,7 +66,6 @@ $colorview-label-color: $base-label-color !default;
 @if $color == "softblue" {
   $colorbox-overlay-bg: $overlay-content-bg !default;
   $colorbox-palette-cell-bg: $colorbox-overlay-bg !default;
-  $colorbox-preview-empty-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAQAAACRZI9xAAAAdElEQVQoU4XR0Q3AIAgFQCarie7UrToMc3QIiyIFFGNe5INcgETAegpQefFCCFPwYZI2qFA/M4EQMQAhKxJgiEcKHFFkwUQY3Q4sBAhUerYzkbaiTUk7Ije0dYoMyeYGi35igUeDzMCiTiKgaPx0BAR1csgHXJxUKOJqsbEAAAAASUVORK5CYII=") !default;
   $colorview-handle-color: $base-bg !default;
   $colorview-handle-border-color: color.change($base-inverted-bg, $alpha: 0.2) !default;
 }

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

@@ -14,7 +14,7 @@
 // adduse
 
 .dx-daterangebox {
-  @include dx-dropdowneditor-button-icon-styling(eventall);
+  @include dx-dropdowneditor-button-icon-styling(daterangepicker);
 
   .dx-dropdowneditor-button {
     min-width: $generic-dropdowneditor-container-button-size - 2px;

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

@@ -390,7 +390,7 @@ $diagram-toolbox-title-size: 12px;
     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;
@@ -403,7 +403,7 @@ $diagram-toolbox-title-size: 12px;
 .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: 8px;

package/data/scss/widgets/generic/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: null !default;
 $fileuploader-border-color: $base-border-color !default;
 

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

@@ -105,6 +105,11 @@ $generic-fileuploader-file-wrapper-border-size: 3px;
   line-height: 13px;
 }
 
+.dx-fileuploader-file-icon {
+  color: $fileuploader-file-icon-color;
+  font-size: $generic-fileuploader-file-icon-font-size;
+}
+
 .dx-fileuploader-file-name {
   padding-bottom: math.div($generic-fileuploader-vertical-padding, 2);
   color: $fileuploader-filename-color;

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

@@ -3,11 +3,14 @@
 // adduse
 
 $generic-fileuploader-vertical-padding: null !default;
+$generic-fileuploader-file-icon-font-size: null !default;
 
 @if $size == "default" {
   $generic-fileuploader-vertical-padding: 7px !default;
+  $generic-fileuploader-file-icon-font-size: 18px !default;
 }
 
 @else if $size == "compact" {
   $generic-fileuploader-vertical-padding: 2px !default;
+  $generic-fileuploader-file-icon-font-size: 14px !default;
 }

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

@@ -422,6 +422,10 @@ $datagrid-draggable-column-text-color: null !default;
   $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
   $datagrid-draggable-column-text-color: lighten($base-text-color, 40%) !default;
 }
+
+:root {
+  --dx-datagrid-row-alternation-bg: #{$datagrid-row-alternation-bg};
+}
 $never-used: collector((
 "$datagrid-base-color": $datagrid-base-color,
 "$datagrid-base-background-color": $datagrid-base-background-color,

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

@@ -6,6 +6,7 @@
 @use "../sizes" as *;
 @use "../../base/icons" as *;
 @use "../../base/checkBox/mixins" as *;
+@use "../../base/button/mixins" as *;
 @use "../dropDownEditor" as *;
 @use "../textEditor" as *;
 @use "../common/mixins" as *;
@@ -1136,4 +1137,46 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
       }
     }
   }
+
+  .dx-command-ai-header-content {
+    max-width: calc(100% - ($generic-grid-base-command-ai-header-button-size - $generic-grid-base-cell-padding));
+
+    .dx-#{$widget-name}-text-content {
+      padding-left: $generic-grid-base-command-ai-text-content-padding;
+    }
+
+    .dx-icon-chatsparkleoutline {
+      @include dx-icon-sizing($generic-grid-base-command-ai-chatsparkleoutline-icon-size);
+    }
+  }
+
+  .dx-command-ai-header-button {
+    left: auto;
+    right: 0;
+  }
+
+  td[style*="text-align: right"] .dx-command-ai-header-button {
+    left: 0;
+    right: auto;
+  }
+
+  .dx-command-ai .dx-command-ai-header-button .dx-button {
+    @include dx-button-sizing(
+      $generic-grid-base-command-ai-header-button-padding,
+      $generic-grid-base-command-ai-header-button-padding,
+      $generic-grid-base-command-ai-header-button-padding,
+      $generic-base-icon-size,
+      0
+    );
+
+    &.dx-state-focused {
+      outline-offset: -2px;
+    }
+  }
+
+  .dx-ai-prompt-editor__progressbar .dx-progressbar-animating-container {
+    height: $generic-grid-base-ai-prompt-editor-progressbar-height;
+    border: none;
+    border-radius: 0;
+  }
 }

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

@@ -23,9 +23,14 @@ $generic-command-edit-text-margin: null !default;
 $generic-grid-base-nodata-font-size: null !default;
 $generic-grid-base-checkbox-padding-bottom: null !default;
 $generic-grid-base-treeview-select-all-item-offset: null !default;
+$generic-grid-base-command-ai-chatsparkleoutline-icon-size: null !default;
+$generic-grid-base-command-ai-text-content-padding: null !default;
+$generic-grid-base-command-ai-header-button-padding: null !default;
+$generic-grid-base-command-ai-header-button-size: null !default;
 
 $datagrid-text-link-disabled-opacity: $base-disabled-opacity;
 $datagrid-icon-link-disabled-opacity: 0.6;
+$generic-grid-base-ai-prompt-editor-progressbar-height: 4px !default;
 
 @if $size == "default" {
   $generic-grid-base-cell-padding: 7px !default;
@@ -48,6 +53,10 @@ $datagrid-icon-link-disabled-opacity: 0.6;
   $generic-grid-base-nodata-font-size: 17px !default;
   $generic-grid-base-checkbox-padding-bottom: 2px;
   $generic-grid-base-treeview-select-all-item-offset: 34px;
+  $generic-grid-base-command-ai-chatsparkleoutline-icon-size: 18px !default;
+  $generic-grid-base-command-ai-text-content-padding: $generic-grid-base-command-ai-chatsparkleoutline-icon-size + 8px !default;
+  $generic-grid-base-command-ai-header-button-padding: 6px !default;
+  $generic-grid-base-command-ai-header-button-size: 32px !default;
 }
 
 @else if $size == "compact" {
@@ -71,6 +80,10 @@ $datagrid-icon-link-disabled-opacity: 0.6;
   $generic-grid-base-nodata-font-size: 14px !default;
   $generic-grid-base-checkbox-padding-bottom: 0;
   $generic-grid-base-treeview-select-all-item-offset: 28px;
+  $generic-grid-base-command-ai-chatsparkleoutline-icon-size: 14px !default;
+  $generic-grid-base-command-ai-text-content-padding: $generic-grid-base-command-ai-chatsparkleoutline-icon-size + 6px !default;
+  $generic-grid-base-command-ai-header-button-padding: 5px !default;
+  $generic-grid-base-command-ai-header-button-size: 26px !default;
 }
 
 $generic-grid-base-column-chooser-paddings: 0 $generic-grid-base-column-chooser-padding $generic-grid-base-column-chooser-padding $generic-grid-base-column-chooser-padding !default;

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

@@ -14,65 +14,65 @@ $load-indicator-animation-sparkle-bg-color3: null !default;
 @if $color == "carmine" {
   $loadindicator-bg: $base-accent !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $load-indicator-animation-sparkle-bg-color1: lighten(saturate($base-accent, 0.09), 7.84) !default;
-  $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, -1), 0.09), 18.63) !default;
-  $load-indicator-animation-sparkle-bg-color3: lighten(saturate($base-accent, 0.35), 29.22) !default;
+  $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 8.58), 27.06) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 2), 6.88), 33.14) !default;
 }
 
 @if $color == "contrast" {
   $loadindicator-bg: $base-inverted-bg !default;
   $loadindicator-segment-shadow-color: $base-shadow-color !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: $base-accent !default;
+  $load-indicator-animation-sparkle-bg-color2: darken(desaturate($base-accent, 25.83), 19.61) !default;
+  $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 1), 44.18), 11.76) !default;
 }
 
 @if $color == "dark" {
   $loadindicator-bg: darken($base-text-color, 17.5%) !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !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: $base-accent !default;
+  $load-indicator-animation-sparkle-bg-color2: darken(desaturate($base-accent, 25.83), 19.61) !default;
+  $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 1), 44.18), 11.76) !default;
 }
 
 @if $color == "darkmoon" {
   $loadindicator-bg: $base-accent !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !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: $base-accent !default;
+  $load-indicator-animation-sparkle-bg-color2: darken(desaturate($base-accent, 25.83), 19.61) !default;
+  $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 1), 44.18), 11.76) !default;
 }
 
 @if $color == "darkviolet" {
   $loadindicator-bg: $base-accent-highlight-color !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !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: $base-accent !default;
+  $load-indicator-animation-sparkle-bg-color2: darken(desaturate($base-accent, 25.83), 19.61) !default;
+  $load-indicator-animation-sparkle-bg-color3: darken(desaturate(adjust-hue($base-accent, 1), 44.18), 11.76) !default;
 }
 
 @if $color == "greenmist" {
   $loadindicator-bg: lighten($base-text-color, 17.5%) !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $load-indicator-animation-sparkle-bg-color1: lighten(saturate($base-accent, 0.09), 7.84) !default;
-  $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, -1), 0.09), 18.63) !default;
-  $load-indicator-animation-sparkle-bg-color3: lighten(saturate($base-accent, 0.35), 29.22) !default;
+  $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 8.58), 27.06) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 2), 6.88), 33.14) !default;
 }
 
 @if $color == "light" {
   $loadindicator-bg: lighten($base-text-color, 17.5%) !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $load-indicator-animation-sparkle-bg-color1: lighten(saturate($base-accent, 0.09), 7.84) !default;
-  $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, -1), 0.09), 18.63) !default;
-  $load-indicator-animation-sparkle-bg-color3: lighten(saturate($base-accent, 0.35), 29.22) !default;
+  $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 8.58), 27.06) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 2), 6.88), 33.14) !default;
 }
 
 @if $color == "softblue" {
   $loadindicator-bg: $base-accent !default;
   $loadindicator-segment-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-  $load-indicator-animation-sparkle-bg-color1: lighten(desaturate(adjust-hue($base-accent, -2), 0.42), 4.90) !default;
-  $load-indicator-animation-sparkle-bg-color2: lighten(saturate(adjust-hue($base-accent, -3), 0.86), 12.94) !default;
-  $load-indicator-animation-sparkle-bg-color3: lighten(saturate(adjust-hue($base-accent, -2), 2.61), 23.33) !default;
+  $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
+  $load-indicator-animation-sparkle-bg-color2: lighten(desaturate($base-accent, 8.58), 27.06) !default;
+  $load-indicator-animation-sparkle-bg-color3: lighten(desaturate(adjust-hue($base-accent, 2), 6.88), 33.14) !default;
 }
 
 $never-used: collector((

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

@@ -22,6 +22,14 @@ $generic-progress-bar-border: 1px solid $progressbar-border-color;
   border-radius: $generic-progressbar-border-radius;
 }
 
+.dx-progressbar-status {
+  padding-top: $progressbar-status-padding-top;
+
+  .dx-progressbar .dx-position-right & {
+    padding-top: 0;
+  }
+}
+
 .dx-progressbar-range {
   position: relative;
   border: 1px solid $progressbar-range-border-color;

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

@@ -2,3 +2,12 @@
 
 // adduse
 
+$progressbar-status-padding-top: null !default;
+
+@if $size == "default" {
+  $progressbar-status-padding-top: 8px !default;
+}
+
+@else if $size == "compact" {
+  $progressbar-status-padding-top: 4px !default;
+}

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

@@ -32,6 +32,7 @@ $scheduler-workspace-accent-color: $base-accent !default;
 $scheduler-current-time-cell-color: $base-accent !default;
 $scheduler-time-indicator-color: null !default;
 $scheduler-dd-appointment-hover-text-color: null !default;
+$scheduler-form-icon-color: $base-icon-color !default;
 $scheduler-popup-title-bg: $scheduler-workspace-background-color !default;
 $scheduler-workspace-month-text-color: null !default;
 $scheduler-dropdown-appointment-date-color: null !default;