devextreme-themebuilder 24.2.2-beta → 24.2.3

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

@@ -4,14 +4,16 @@ $chat-avatar-color: getCustomVar(("$chat-avatar-color")) !default;
 $chat-avatar-background-color: getCustomVar(("$chat-avatar-background-color")) !default;
 $chat-bubble-color-primary: getCustomVar(("$chat-bubble-color-primary")) !default;
 $chat-bubble-background-color-primary: getCustomVar(("$chat-bubble-background-color-primary")) !default;
+$chat-bubble-color-secondary: getCustomVar(("$chat-bubble-color-secondary")) !default;
 $chat-bubble-background-color-secondary: getCustomVar(("$chat-bubble-background-color-secondary")) !default;
-$chat-information-color: getCustomVar(("$chat-information-color")) !default;
+$chat-information-author-name-color: getCustomVar(("$chat-information-author-name-color")) !default;
+$chat-information-timestamp-color: getCustomVar(("$chat-information-timestamp-color")) !default;
 $chat-messagelist-day-header-color: getCustomVar(("$chat-messagelist-day-header-color")) !default;
+$chat-alertlist-color: getCustomVar(("$chat-alertlist-color")) !default;
 $chat-messagelist-empty-icon-color: getCustomVar(("$chat-messagelist-empty-icon-color")) !default;
 $chat-messagelist-empty-icon-background-color: getCustomVar(("$chat-messagelist-empty-icon-background-color")) !default;
 $chat-messagelist-empty-message-color: getCustomVar(("$chat-messagelist-empty-message-color")) !default;
 $chat-messagelist-empty-prompt-color: getCustomVar(("$chat-messagelist-empty-prompt-color")) !default;
-$chat-alertlist-color: getCustomVar(("$chat-alertlist-color")) !default;
 $chat-typingindicator-color: getCustomVar(("$chat-typingindicator-color")) !default;
 $chat-typingindicator-bubble-bg-color: getCustomVar(("$chat-typingindicator-bubble-bg-color")) !default;
 $chat-typingindicator-circle-bg-color-center: getCustomVar(("$chat-typingindicator-circle-bg-color-center")) !default;
@@ -28,15 +30,17 @@ $chat-avatar-color: $base-text-color !default;
 $chat-avatar-background-color: $base-border-color !default;
 $chat-bubble-color-primary: $base-text-color !default;
 $chat-bubble-background-color-primary: null !default;
+$chat-bubble-color-secondary: $base-text-color !default;
 $chat-bubble-background-color-secondary: rgba($base-inverted-bg, 0.08) !default;
-$chat-information-color: rgba($base-inverted-bg, 0.6) !default;
+$chat-information-author-name-color: rgba($base-inverted-bg, 0.6) !default;
+$chat-information-timestamp-color: rgba($base-inverted-bg, 0.6) !default;
 $chat-messagelist-day-header-color: rgba($base-inverted-bg, 0.6) !default;
+$chat-alertlist-color: $base-invalid-color !default;
 $chat-messagelist-empty-icon-color: rgba($base-inverted-bg, 0.38) !default;
 $chat-messagelist-empty-icon-background-color: rgba($base-inverted-bg, 0.08) !default;
 $chat-messagelist-empty-message-color: rgba($base-inverted-bg, 0.87) !default;
 $chat-messagelist-empty-prompt-color: rgba($base-inverted-bg, 0.6) !default;
-$chat-alertlist-color: $base-invalid-color !default;
-$chat-typingindicator-color: $chat-information-color !default;
+$chat-typingindicator-color: rgba($base-inverted-bg, 0.6) !default;
 $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
 $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;
@@ -55,14 +59,16 @@ $never-used: collector((
 "$chat-avatar-background-color": $chat-avatar-background-color,
 "$chat-bubble-color-primary": $chat-bubble-color-primary,
 "$chat-bubble-background-color-primary": $chat-bubble-background-color-primary,
+"$chat-bubble-color-secondary": $chat-bubble-color-secondary,
 "$chat-bubble-background-color-secondary": $chat-bubble-background-color-secondary,
-"$chat-information-color": $chat-information-color,
+"$chat-information-author-name-color": $chat-information-author-name-color,
+"$chat-information-timestamp-color": $chat-information-timestamp-color,
 "$chat-messagelist-day-header-color": $chat-messagelist-day-header-color,
+"$chat-alertlist-color": $chat-alertlist-color,
 "$chat-messagelist-empty-icon-color": $chat-messagelist-empty-icon-color,
 "$chat-messagelist-empty-icon-background-color": $chat-messagelist-empty-icon-background-color,
 "$chat-messagelist-empty-message-color": $chat-messagelist-empty-message-color,
 "$chat-messagelist-empty-prompt-color": $chat-messagelist-empty-prompt-color,
-"$chat-alertlist-color": $chat-alertlist-color,
 "$chat-typingindicator-color": $chat-typingindicator-color,
 "$chat-typingindicator-bubble-bg-color": $chat-typingindicator-bubble-bg-color,
 "$chat-typingindicator-circle-bg-color-center": $chat-typingindicator-circle-bg-color-center,

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

@@ -36,6 +36,7 @@
 @include chat-messagebubble(
   $chat-bubble-padding,
   $chat-bubble-border-radius,
+  $chat-bubble-color-secondary,
   $chat-bubble-background-color-secondary,
   $chat-bubble-color-primary,
   $chat-bubble-background-color-primary,
@@ -47,7 +48,8 @@
   $chat-messagegroup-alignment-start-gap,
   $chat-messagegroup-padding,
   $chat-information-font-size,
-  $chat-information-color,
+  $chat-information-author-name-color,
+  $chat-information-timestamp-color,
   $chat-information-gap,
 );
 @include chat-messagelist-empty(
@@ -68,12 +70,12 @@
   $chat-messagelist-day-header-color,
   $chat-messagelist-day-header-padding-bottom,
   $chat-messagelist-day-header-first-padding-top,
+  $chat-messagelist-day-header-font-size,
 );
 @include chat-typingindicator(
   $chat-typingindicator-template,
   $chat-typingindicator-padding,
   $chat-typingindicator-row-gap,
-  $chat-typingindicator-column-gap,
   $chat-typingindicator-font-size,
   $chat-typingindicator-color,
   $chat-typingindicator-bubble-padding-block,

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

@@ -17,7 +17,7 @@ $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;
 $chat-information-gap: 8px !default;
 $chat-avatar-size: 32px !default;
-$chat-messagegroup-alignment-start-template: auto 1fr !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;
@@ -36,11 +36,11 @@ $chat-messagelist-empty-message-font-size: null !default;
 $chat-messagelist-empty-prompt-font-size: null !default;
 $chat-messagelist-day-header-padding-bottom: 12px !default;
 $chat-messagelist-day-header-first-padding-top: 20px !default;
+$chat-messagelist-day-header-font-size: 12px !default;
 
 $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default;
 $chat-typingindicator-padding: null !default;
 $chat-typingindicator-row-gap: $chat-messagegroup-gap !default;
-$chat-typingindicator-column-gap: $chat-messagegroup-alignment-start-gap !default;
 $chat-typingindicator-font-size: $chat-information-font-size !default;
 $chat-typingindicator-bubble-padding-block: null !default;
 $chat-typingindicator-bubble-padding-inline: null !default;

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

@@ -47,7 +47,7 @@ $datagrid-row-selected-border-color: $datagrid-border-color !default;
 $datagrid-row-selected-color: $datagrid-base-color !default;
 $datagrid-row-focused-color: $base-text-color !default;
 $datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default;
-$datagrid-hover-bg: $base-hover-bg !default;
+$datagrid-hover-bg: null !default;
 $datagrid-row-hovered-color: $base-hover-color !default;
 $datagrid-menu-icon-color: lighten($base-icon-color, 33.7%) !default;
 $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.32) !default;
@@ -95,6 +95,7 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
   $datagrid-row-error-color: $base-inverted-text-color !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-row-alternation-bg: darken($datagrid-base-background-color, 4%) !default;
+  $datagrid-hover-bg: darken($datagrid-base-background-color, 4%) !default;
   $datagrid-text-stub-background-image-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAADzCAYAAABwgbOvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBRjExRDRGQTNENjQxMUU4QUZEMEE1N0M1QzIyNEE4QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBRjExRDRGQjNENjQxMUU4QUZEMEE1N0M1QzIyNEE4QyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFGMTFENEY4M0Q2NDExRThBRkQwQTU3QzVDMjI0QThDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFGMTFENEY5M0Q2NDExRThBRkQwQTU3QzVDMjI0QThDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+57ApqAAAAUNJREFUeNrs3LENwzAMRUEzi2T/sTSJgowQRAI+pbvehf0KFiZYc84nUVU9AAAAAAAAAHf5/id9+wxLjX8efvl+WQQRBEEEQRBBEEQQBBEEQQAAAAAAAAAAflRuLmaxdSIIggiCIIIgiCAIIgiCIAgAyyUfMBs3BjHUBUEQQRBEEAQRBEEEQRAE6cKyNQAAAAAAAADQQuySw9aXDl6gsAYkCIIIgiCCIIggCCIIgiAIcILkA2Y7xR5HM0MEQRBBEEQQBBEEQQRBEAQBAAAAAAAAAHq78l5WMlsngiCIIAgiCIIIgiCCIAiCALDcrQfMDHUEEQRBBEEQQRAEQQRBEEEAAAAAAAAAALZoecCsqo4NYutEEAQRBEEEQRBBEEQQBEEQAJbresBsGOoIIgiCIIggCCIIggiCIIIAAAAAAAAc5iPAAIcKFwANDofzAAAAAElFTkSuQmCC") !default;
   $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
 }
@@ -109,6 +110,7 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
   $datagrid-row-error-color: rgba(255, 255, 255, 1) !default;
   $datagrid-columnchooser-item-bg: lighten($datagrid-columnchooser-bg, 3%) !default;
   $datagrid-row-alternation-bg: lighten($datagrid-base-background-color, 4%) !default;
+  $datagrid-hover-bg: lighten($datagrid-base-background-color, 4%) !default;
   $datagrid-text-stub-background-image-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAADzCAYAAABwgbOvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBRjExRDRGQTNENjQxMUU4QUZEMEE1N0M1QzIyNEE4QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBRjExRDRGQjNENjQxMUU4QUZEMEE1N0M1QzIyNEE4QyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFGMTFENEY4M0Q2NDExRThBRkQwQTU3QzVDMjI0QThDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFGMTFENEY5M0Q2NDExRThBRkQwQTU3QzVDMjI0QThDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+57ApqAAAAUNJREFUeNrs3LENwzAMRUEzi2T/sTSJgowQRAI+pbvehf0KFiZYc84nUVU9AAAAAAAAAHf5/id9+wxLjX8efvl+WQQRBEEEQRBBEEQQBBEEQQAAAAAAAAAAflRuLmaxdSIIggiCIIIgiCAIIgiCIAgAyyUfMBs3BjHUBUEQQRBEEAQRBEEEQRAE6cKyNQAAAAAAAADQQuySw9aXDl6gsAYkCIIIgiCCIIggCCIIgiAIcILkA2Y7xR5HM0MEQRBBEEQQBBEEQQRBEAQBAAAAAAAAAHq78l5WMlsngiCIIAgiCIIIgiCCIAiCALDcrQfMDHUEEQRBBEEQQRAEQQRBEEEAAAAAAAAAALZoecCsqo4NYutEEAQRBEEEQRBBEEQQBEEQAJbresBsGOoIIgiCIIggCCIIggiCIIIAAAAAAAAc5iPAAIcKFwANDofzAAAAAElFTkSuQmCC") !default;
   $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
 }

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

@@ -346,6 +346,24 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
         @include dx-icon-sizing($material-base-icon-size);
       }
     }
+
+    .dx-#{$widget-name}-drop-highlight {
+      & > td {
+        background-color: $datagrid-drop-highlight-bg;
+        color: $datagrid-drop-highlight-color;
+
+        .dx-header-filter {
+          color: $datagrid-drop-highlight-color;
+        }
+
+        .dx-checkbox {
+          .dx-checkbox-icon {
+            background-color: $datagrid-drop-highlight-color;
+            color: $datagrid-drop-highlight-bg;
+          }
+        }
+      }
+    }
   }
 
   .dx-#{$widget-name}-edit-popup {
@@ -588,24 +606,6 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
     background-color: transparent;
   }
 
-  .dx-#{$widget-name}-drop-highlight {
-    & > td {
-      background-color: $datagrid-drop-highlight-bg;
-      color: $datagrid-drop-highlight-color;
-
-      .dx-header-filter {
-        color: $datagrid-drop-highlight-color;
-      }
-
-      .dx-checkbox {
-        .dx-checkbox-icon {
-          background-color: $datagrid-drop-highlight-color;
-          color: $datagrid-drop-highlight-bg;
-        }
-      }
-    }
-  }
-
   .dx-#{$widget-name}-focus-overlay:after {
     content: "";
     position: absolute;
@@ -642,10 +642,16 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
   .dx-#{$widget-name}-headers {
     color: $datagrid-columnchooser-item-color;
     touch-action: pinch-zoom;
-    border-bottom: $datagrid-border;
 
-    .dx-#{$widget-name}-content {
-      margin-bottom: -1px;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      pointer-events: none;
+      border-bottom: $datagrid-border;
     }
 
     .dx-#{$widget-name}-table {
@@ -1104,10 +1110,25 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
     }
 
     &.dx-#{$widget-name}-sticky-columns {
-      .dx-row:not(.dx-row-lines, .dx-group-row, .dx-datagrid-group-footer) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+      .dx-row:not(.dx-row-lines, .dx-group-row, .dx-datagrid-group-footer, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
         padding-top: $material-grid-base-cell-vertical-padding + 1px;
       }
 
+      .dx-selection.dx-row:not(.dx-edit-row) > td:not(.dx-editor-cell, .dx-master-detail-cell),
+      .dx-row-focused.dx-row:not(.dx-edit-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+        padding-bottom: $material-grid-base-cell-vertical-padding - 1px;
+      }
+
+      .dx-row.dx-edit-row > td.dx-command-edit {
+        padding-top: $material-grid-base-cell-vertical-padding - 1px;
+        padding-bottom: $material-grid-base-cell-vertical-padding - 1px;
+      }
+  
+      .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input {
+        height: $material-grid-base-cell-height - 1px;
+        line-height: $material-grid-base-cell-height - 1px;
+      }
+
       .dx-data-row td:not(.dx-command-expand, .dx-editor-cell) {
         .dx-row.dx-group-row + &, .dx-row.dx-master-detail-row + & {
           padding-top: $material-grid-base-cell-vertical-padding;

package/modules/bootstrap-extractor.js

@@ -36,7 +36,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const sass = __importStar(require("sass-embedded"));
-const less_1 = __importDefault(require("less"));
 const fs_1 = require("fs");
 const bootstrap5_metadata_1 = __importDefault(require("../data/bootstrap-metadata/bootstrap5-metadata"));
 class BootstrapExtractor {
@@ -73,13 +72,6 @@ class BootstrapExtractor {
             });
         });
     }
-    static lessRender(input) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve, reject) => {
-                less_1.default.render(input, (error, result) => (error ? reject(error.message) : resolve(result.css)));
-            });
-        });
-    }
     static convertRemToPx(cssValue) {
         const remValueRegex = /(\d*?\.?\d+?)rem([;\s])?/g;
         const replaceHandler = (_match, value, separator) => {
@@ -105,7 +97,7 @@ class BootstrapExtractor {
                 variablesDark = yield this.readSassFile(variablesDarkFile);
             }
             const result = `${functions}
-${variables.replace('@import "variables-dark";', '')}
+${this.getVariables(variables)}
 ${variablesDark}
 ${this.input}
 ${this.getSetterServiceCode('!default')}
@@ -113,12 +105,8 @@ ${this.getCollectorServiceCode()}`;
             return result;
         });
     }
-    lessProcessor() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return Promise.resolve(this.getSetterServiceCode()
-                + this.input
-                + this.getCollectorServiceCode());
-        });
+    getVariables(variables) {
+        return variables.replace(/^@import "variables-dark";.*$/gm, '');
     }
     getFilePath(fileName) {
         return require.resolve(`bootstrap/scss/${fileName}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-themebuilder",
-  "version": "24.2.2-beta",
+  "version": "24.2.3",
   "description": "DevExtreme ThemeBuilder",
   "keywords": [
     "devextreme",
@@ -13,12 +13,11 @@
   "repository": "https://github.com/DevExpress/DevExtreme",
   "license": "SEE LICENSE IN README.md",
   "peerDependencies": {
-    "bootstrap": "npm:bootstrap@^5.3.0"
+    "bootstrap": "^5.3.3"
   },
   "dependencies": {
     "autoprefixer": "^10.4.7",
     "clean-css": "^5.3.0",
-    "less": "^3.13.1",
     "postcss": "^8.2.6",
     "sass-embedded": "1.66.0"
   },
@@ -27,7 +26,6 @@
     "@types/dependency-tree": "7.2.0",
     "@types/filing-cabinet": "2.5.3",
     "@types/fs-extra": "11.0.4",
-    "@types/less": "3.0.6",
     "@types/node": "20.11.17",
     "eslint": "8.56.0",
     "eslint-config-airbnb-base": "15.0.0",
@@ -38,7 +36,7 @@
     "fs-extra": "11.2.0",
     "immutable": "4.3.5",
     "precinct": "11.0.5",
-    "sinon": "18.0.0",
+    "sinon": "18.0.1",
     "ts-jest": "29.1.2",
     "ts-node": "10.9.2",
     "typescript": "4.9.5"