devextreme-themebuilder 25.2.7 → 26.1.2-beta

package/data/scss/widgets/base/dataGrid/_index.scss

@@ -29,24 +29,31 @@ $datagrid-text-stub-background-image-path: null !default;
   > .dx-datagrid-rowsview,
   > .dx-datagrid-total-footer {
     border-left: $datagrid-border;
+    border-left-color: $datagrid-border-color;
     border-right: $datagrid-border;
+    border-right-color: $datagrid-border-color;
   }
 
   > .dx-datagrid-rowsview,
   > .dx-datagrid-total-footer {
     border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
   }
 
   > .dx-datagrid-headers,
   > .dx-datagrid-filter-panel {
     border-top: $datagrid-border;
+    border-top-color: $datagrid-border-color;
   }
 
   > .dx-datagrid-filter-panel {
     border-top-width: 0;
     border-left: $datagrid-border;
+    border-left-color: $datagrid-border-color;
     border-right: $datagrid-border;
+    border-right-color: $datagrid-border-color;
     border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
   }
 }
 
@@ -104,7 +111,8 @@ $datagrid-text-stub-background-image-path: null !default;
     &.dx-state-focused .dx-datagrid-group-panel {
       .dx-group-panel-item:focus,
       .dx-header-filter:focus {
-        outline: 2px solid $datagrid-focused-border-color;
+        outline: 2px solid;
+        outline-color: $datagrid-focused-border-color;
         outline-offset: -2px;
       }
 
@@ -121,7 +129,8 @@ $datagrid-text-stub-background-image-path: null !default;
 
     &.dx-state-focused .dx-header-row {
       td .dx-header-filter:focus {
-        outline: 2px solid $datagrid-focused-border-color;
+        outline: 2px solid;
+        outline-color: $datagrid-focused-border-color;
         outline-offset: 2px;
       }
     }
@@ -154,7 +163,8 @@ $datagrid-text-stub-background-image-path: null !default;
 
   .dx-datagrid-rowsview.dx-state-focused .dx-data-row {
     & > td.dx-command-edit > a.dx-link:focus {
-      outline: 2px solid $datagrid-focused-border-color;
+      outline: 2px solid;
+      outline-color: $datagrid-focused-border-color;
       outline-offset: 2px;
     }
 
@@ -226,6 +236,7 @@ $datagrid-text-stub-background-image-path: null !default;
 .dx-datagrid-filter-panel {
   color: $datagrid-base-color;
   border-top: $datagrid-border;
+  border-top-color: $datagrid-border-color;
 
   .dx-icon-filter,
   .dx-datagrid-filter-panel-text,
@@ -237,7 +248,8 @@ $datagrid-text-stub-background-image-path: null !default;
     .dx-icon-filter:focus,
     .dx-datagrid-filter-panel-text:focus,
     .dx-datagrid-filter-panel-clear-filter:focus {
-      outline: 2px solid $datagrid-focused-border-color;
+      outline: 2px solid;
+      outline-color: $datagrid-focused-border-color;
       outline-offset: 3px;
     }
   }
@@ -318,7 +330,8 @@ $datagrid-text-stub-background-image-path: null !default;
     left: 0;
     bottom: 0;
     right: 0;
-    outline: 2px solid $datagrid-focused-border-color;
+    outline: 2px solid;
+    outline-color: $datagrid-focused-border-color;
     outline-offset: -1px;
     z-index: 4; // should overlap sticky column cells
     pointer-events: none;
@@ -327,5 +340,6 @@ $datagrid-text-stub-background-image-path: null !default;
 }
 
 .dx-command-ai-header-button .dx-button.dx-state-focused {
-  outline: 2px solid $datagrid-focused-border-color;
+  outline: 2px solid;
+  outline-color: $datagrid-focused-border-color;
 }

package/data/scss/widgets/base/dropDownEditor/_index.scss

@@ -1,3 +1,4 @@
+@use "sass:selector";
 @use "../mixins" as *;
 @use "./mixins" as *;
 @use "../textEditor/mixins" as *;
@@ -76,7 +77,7 @@
     white-space: nowrap;
   }
 
-  @at-root #{selector-append(".dx-rtl", &)},
+  @at-root #{selector.append(".dx-rtl", &)},
   .dx-rtl & {
     float: left;
   }

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

@@ -2,6 +2,7 @@
 @use "../mixins" as *;
 @use 'variables' as *;
 @use 'layout/cell' as *;
+@use "layout/aiChat" as *;
 
 // adduse
 
@@ -502,7 +503,7 @@
 
     .dx-sort-indicator,
     .dx-header-filter-indicator {
-      max-width: calc(100% - #{round($grid-column-header-indicator-width + $grid-text-content-margin)});
+      max-width: calc(100% - #{math.round($grid-column-header-indicator-width + $grid-text-content-margin)});
 
       &.dx-text-content-alignment-left {
         margin-right: $grid-text-content-margin;
@@ -513,31 +514,31 @@
       }
 
       &.dx-text-content-alignment-left.dx-text-content-alignment-right {
-        max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2)});
+        max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2)});
       }
     }
 
     .dx-sort-indicator.dx-header-filter-indicator {
-      max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin)});
+      max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin)});
     }
 
     .dx-sort-indicator.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right {
-      max-width: calc(100% - #{round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2)});
+      max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2)});
     }
 
     .dx-sort-indicator.dx-sort-index-indicator {
-      max-width: calc(100% - #{round($grid-column-header-indicator-width + $grid-text-content-margin + $grid-sort-index-width)});
+      max-width: calc(100% - #{math.round($grid-column-header-indicator-width + $grid-text-content-margin + $grid-sort-index-width)});
 
       &.dx-header-filter-indicator {
-        max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin + $grid-sort-index-width)});
+        max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin + $grid-sort-index-width)});
       }
 
       &.dx-text-content-alignment-left.dx-text-content-alignment-right {
-        max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
+        max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
       }
 
       &.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right {
-        max-width: calc(100% - #{round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
+        max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
       }
     }
   }

package/data/scss/widgets/base/gridBase/layout/aiChat/_index.scss

@@ -0,0 +1,72 @@
+@use "../../../icon_fonts" as *;
+@use './variables' as *;
+
+.dx-ai-chat .dx-popup-content {
+  padding: 0;
+}
+
+.dx-ai-chat__content {
+  border: none;
+  min-height: auto;
+}
+
+.dx-ai-chat__empty-image {
+  @include dx-icon(sparkle);
+
+  border-radius: 999em;
+}
+
+.dx-ai-chat__content .dx-chat-messagebubble {
+  position: relative;
+  overflow: hidden;
+}
+
+.dx-ai-chat__message {
+  display: flex;
+  gap: $ai-chat-message-gap;
+  min-width: $ai-chat-message-width;
+}
+
+.dx-ai-chat__message-content {
+  display: flex;
+  flex-flow: column;
+  flex: 1;
+  gap: $ai-chat-message-content-gap;
+}
+
+.dx-ai-chat__message-header {
+  font-weight: 600;
+}
+
+.dx-ai-chat__message-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $ai-chat-message-gap;
+}
+
+.dx-ai-chat__action-list {
+  display: flex;
+  flex-flow: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dx-ai-chat__action-list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: $ai-chat-message-content-gap;
+}
+
+.dx-ai-chat__message-progressbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  line-height: 0;
+}
+
+.dx-ai-chat--disabled .dx-ai-chat__message-regenerate-button {
+  pointer-events: none;
+}

package/data/scss/widgets/base/gridBase/layout/aiChat/_mixins.scss

@@ -0,0 +1,71 @@
+@use './variables' as *;
+
+@mixin ai-chat-messagelist-empty(
+  $messagelist-empty-icon-color,
+  $messagelist-empty-icon-background-color,
+) {
+  .dx-ai-chat__empty-image {
+    color: $messagelist-empty-icon-color;
+    background-color: $messagelist-empty-icon-background-color;
+  }
+}
+
+@mixin ai-chat-message-pending(
+  $pending-message-color,
+) {
+  .dx-ai-chat__message--pending {
+    .dx-ai-chat__message-icon, .dx-ai-chat__message-status {
+      color: $pending-message-color;
+    }
+  }
+}
+
+@mixin ai-chat-message-success(
+  $success-message-color,
+) {
+  .dx-ai-chat__message--success .dx-ai-chat__message-icon,
+  .dx-ai-chat__action-list-item--success {
+    color: $success-message-color;
+  }
+}
+
+@mixin ai-chat-message-error(
+  $error-message-color,
+) {
+  .dx-ai-chat__message--error .dx-ai-chat__message-icon,
+  .dx-ai-chat__action-list-item--error,
+  .dx-ai-chat__message-error-text {
+    color: $error-message-color;
+  }
+}
+
+@mixin ai-chat-messagebubble-border(
+  $border-color,
+) {
+  .dx-ai-chat__content .dx-chat-messagegroup-alignment-start .dx-chat-messagebubble {
+    border-width: 1px;
+    border-style: solid;
+    border-color: $border-color;
+  }
+}
+
+@mixin ai-chat-message-regenerate-button(
+  $hover-background-color,
+) {
+  .dx-ai-chat__message-regenerate-button {
+    cursor: pointer;
+
+    &:hover::before {
+      border-radius: $ai-chat-message-regenerate-button-border-radius;
+      background-color: $hover-background-color;
+    }
+  }
+}
+
+@mixin ai-chat-message-icon(
+  $icon-size,
+) {
+  .dx-ai-chat__message-icon, .dx-ai-chat__message-regenerate-button {
+    font-size: $icon-size;
+  }
+}

package/data/scss/widgets/base/gridBase/layout/aiChat/_variables.scss

@@ -0,0 +1,4 @@
+$ai-chat-message-gap: 8px;
+$ai-chat-message-content-gap: 4px;
+$ai-chat-message-width: 280px;
+$ai-chat-message-regenerate-button-border-radius: 4px;

package/data/scss/widgets/base/pivotGrid/_index.scss

@@ -23,11 +23,11 @@ $pivotgrid-button-top-padding: null !default;
 @use "../icon_fonts" as *;
 @use "./common";
 
-$pivotgrid-drag-header-border: 1px solid $pivotgrid-drag-header-border-color;
+$pivotgrid-drag-header-border: 1px solid;
 $pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color;
 $pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color;
 $pivotgrid-border-width: 1px;
-$pivotgrid-border: $pivotgrid-border-width solid $pivotgrid-border-color;
+$pivotgrid-border: $pivotgrid-border-width solid;
 $pivotgrid-icon-size: 14px;
 $pivotgrid-common-field-padding: 2px;
 $pivotgrid-filter-area-border-spacing: $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding;
@@ -99,6 +99,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     .dx-area-field.dx-area-box {
       box-shadow: $pivotgrid-drag-header-first-shadow, $pivotgrid-drag-header-second-shadow;
       border: $pivotgrid-drag-header-border;
+      border-color: $pivotgrid-drag-header-border-color;
     }
   }
 
@@ -106,6 +107,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     background-color: $pivotgrid-area-background;
     margin-bottom: 4px;
     border: $pivotgrid-border;
+    border-color: $pivotgrid-border-color;
     padding: $pivotgrid-common-top-bottom-padding $pivotgrid-common-left-right-padding;
   }
 
@@ -194,6 +196,7 @@ $pivotgrid-expand-icon-text-offset: 0;
   &.dx-row-lines {
     .dx-pivotgrid-area td {
       border-top: $pivotgrid-border;
+      border-top-color: $pivotgrid-border-color;
     }
 
     .dx-pivotgrid-area-data tr:first-child > td {
@@ -209,6 +212,7 @@ $pivotgrid-expand-icon-text-offset: 0;
   .dx-area-row-cell,
   .dx-area-description-cell {
     border-right: $pivotgrid-border;
+    border-right-color: $pivotgrid-border-color;
   }
 
   .dx-area-description-cell {
@@ -231,6 +235,7 @@ $pivotgrid-expand-icon-text-offset: 0;
   .dx-area-description-cell,
   .dx-area-column-cell {
     border-bottom: $pivotgrid-border;
+    border-bottom-color: $pivotgrid-border-color;
   }
 
   .dx-pivotgrid-area {
@@ -316,6 +321,7 @@ $pivotgrid-expand-icon-text-offset: 0;
         color: $pivotgrid-data-area-color;
         white-space: nowrap;
         border-left: $pivotgrid-border;
+        border-left-color: $pivotgrid-border-color;
       }
 
       td:first-child {
@@ -334,6 +340,7 @@ $pivotgrid-expand-icon-text-offset: 0;
   .dx-pivotgrid-vertical-headers {
     .dx-expand-border {
       border-top: $pivotgrid-border;
+      border-top-color: $pivotgrid-border-color;
     }
 
     .dx-last-cell {
@@ -345,6 +352,7 @@ $pivotgrid-expand-icon-text-offset: 0;
       // max-width: 150px;
       min-width: 50px;
       border-right: $pivotgrid-border;
+      border-right-color: $pivotgrid-border-color;
     }
 
     tr:first-child td {
@@ -362,7 +370,9 @@ $pivotgrid-expand-icon-text-offset: 0;
   .dx-pivotgrid-area-data {
     .dx-row-total {
       border-top: $pivotgrid-border;
+      border-top-color: $pivotgrid-border-color;
       border-bottom: $pivotgrid-border;
+      border-bottom-color: $pivotgrid-border-color;
     }
   }
 
@@ -381,6 +391,7 @@ $pivotgrid-expand-icon-text-offset: 0;
   .dx-pivotgrid-horizontal-headers {
     &.dx-vertical-scroll {
       border-right: $pivotgrid-border;
+      border-right-color: $pivotgrid-border-color;
     }
 
     td {
@@ -393,6 +404,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 
       // B234718
       border: $pivotgrid-border;
+      border-color: $pivotgrid-border-color;
     }
 
     td:first-child {
@@ -429,6 +441,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     .dx-area-description-cell,
     .dx-area-row-cell {
       border-left: $pivotgrid-border;
+      border-left-color: $pivotgrid-border-color;
     }
 
     .dx-filter-header,
@@ -436,10 +449,12 @@ $pivotgrid-expand-icon-text-offset: 0;
     .dx-column-header,
     .dx-area-data-cell {
       border-right: $pivotgrid-border;
+      border-right-color: $pivotgrid-border-color;
     }
 
     .dx-filter-header {
       border-top: $pivotgrid-border;
+      border-top-color: $pivotgrid-border-color;
 
       td {
         display: inline-block;
@@ -449,6 +464,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     .dx-area-data-cell,
     .dx-area-row-cell {
       border-bottom: $pivotgrid-border;
+      border-bottom-color: $pivotgrid-border-color;
     }
   }
 
@@ -505,6 +521,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     .dx-area-fields {
       margin-top: 3px;
       border: $pivotgrid-border;
+      border-color: $pivotgrid-border-color;
       display: flex;
       flex-direction: column;
       height: 0;
@@ -598,6 +615,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     .dx-area-row-cell,
     .dx-area-description-cell {
       border-left: $pivotgrid-border;
+      border-left-color: $pivotgrid-border-color;
       border-right: 0;
     }
 
@@ -611,11 +629,13 @@ $pivotgrid-expand-icon-text-offset: 0;
       tbody td {
         border-left: 0;
         border-right: $pivotgrid-border;
+        border-right-color: $pivotgrid-border-color;
       }
     }
 
     .dx-pivotgrid-area-data tbody td:first-child {
       border-left: $pivotgrid-border;
+      border-left-color: $pivotgrid-border-color;
       border-right: 0;
     }
 
@@ -623,6 +643,7 @@ $pivotgrid-expand-icon-text-offset: 0;
       td {
         border-right: 0;
         border-left: $pivotgrid-border;
+        border-left-color: $pivotgrid-border-color;
       }
 
       .dx-last-cell {
@@ -635,6 +656,7 @@ $pivotgrid-expand-icon-text-offset: 0;
       &.dx-vertical-scroll {
         border-right: 0;
         border-left: $pivotgrid-border;
+        border-left-color: $pivotgrid-border-color;
       }
 
       &.dx-pivotgrid-area {
@@ -643,6 +665,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 
       td:first-child {
         border-left: $pivotgrid-border;
+        border-left-color: $pivotgrid-border-color;
         border-right: 0;
       }
     }
@@ -678,12 +701,14 @@ $pivotgrid-expand-icon-text-offset: 0;
       .dx-data-header,
       .dx-area-row-cell {
         border-right: $pivotgrid-border;
+        border-right-color: $pivotgrid-border-color;
       }
 
       .dx-area-column-cell,
       .dx-column-header,
       .dx-area-data-cell {
         border-left: $pivotgrid-border;
+        border-left-color: $pivotgrid-border-color;
       }
 
       .dx-column-header {

package/data/scss/widgets/base/scheduler/_common.scss

@@ -6,15 +6,6 @@
 $scheduler-appointment-collector-margin: 3px;
 $scheduler-appointment-collector-height: 22px;
 
-// NOTE: a11y aria-live container must be visible to allow screen readers read it
-.dx-scheduler-a11y-status-container {
-  position: fixed;
-  left: 0;
-  top: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: polygon(0 0);
-}
-
 .dx-scheduler {
   .dx-empty-message {
     line-height: normal;

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

@@ -22,6 +22,7 @@ $scheduler-fill-focused-appointment: null !default;
 $scheduler-is-shadow-color-for-focused-state: null !default;
 $scheduler-dd-appointment-hover-text-color: null !default;
 $scheduler-tooltip-appointment-text-color: null !default;
+$scheduler-tooltip-list-focused-bg: null !default;
 $scheduler-timeline-cell-height: null !default;
 
 $scheduler-appointment-overlay-bg: null !default;
@@ -47,7 +48,8 @@ $agenda-appointment-recurrence-icon-color: null !default;
 @use "./tooltip" with (
   $scheduler-appointment-base-color: $scheduler-appointment-base-color,
   $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
-  $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg
+  $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
+  $scheduler-tooltip-list-focused-bg: $scheduler-tooltip-list-focused-bg
 );
 
 $scheduler-appointment-min-size: 4px;
@@ -74,9 +76,9 @@ $scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-a
 
 $scheduler-grouped-appointment-month-text-size: 12px;
 
-$scheduler-base-border: 1px solid $scheduler-base-border-color;
+$scheduler-base-border: 1px solid;
 $scheduler-transparent-top-border: 1px solid transparent;
-$scheduler-accent-border: 1px solid $scheduler-accent-border-color;
+$scheduler-accent-border: 1px solid;
 
 $scheduler-reduced-icon-offset: 5px;
 $scheduler-recurrence-icon-offset: 20px;
@@ -163,7 +165,7 @@ $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1p
   }
 
   .dx-scheduler-header {
-    @include header-base($scheduler-base-border);
+    @include header-base($scheduler-base-border, $scheduler-base-border-color);
   }
 
   .dx-scheduler-view-switcher-dropdown-button-content {

package/data/scss/widgets/base/scheduler/_tooltip.scss

@@ -3,6 +3,7 @@
 $scheduler-appointment-base-color: null !default;
 $scheduler-tooltip-appointment-text-color: null !default;
 $scheduler-appointment-overlay-bg: null !default;
+$scheduler-tooltip-list-focused-bg: null !default;
 
 .dx-popup-wrapper.dx-scheduler-appointment-tooltip-wrapper,
 .dx-scheduler-overlay-panel {
@@ -15,6 +16,10 @@ $scheduler-appointment-overlay-bg: null !default;
       .dx-list-item-content {
         padding: 5px;
       }
+
+      &.dx-state-focused {
+        background-color: $scheduler-tooltip-list-focused-bg;
+      }
     }
   }
 

package/data/scss/widgets/base/scheduler/layout/_header.scss

@@ -2,8 +2,10 @@ $arrow-down: "\f016";
 
 @mixin header-base(
   $border,
+  $border-color,
 ) {
   border: $border;
+  border-color: $border-color;
   margin-bottom: -1px;
   position: relative;
   z-index: 1;