devextreme-themebuilder 23.2.2-beta → 23.2.3

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

@@ -1,31 +1,41 @@
 $texteditor-color: getCustomVar(("$texteditor-color")) !default;
 $texteditor-placeholder-color: getCustomVar(("$texteditor-placeholder-color")) !default;
-$texteditor-bg: getCustomVar(("$texteditor-bg")) !default;
-$texteditor-focused-bg: getCustomVar(("$texteditor-focused-bg")) !default;
+$texteditor-outlined-bg: getCustomVar(("$texteditor-outlined-bg")) !default;
+$texteditor-outlined-bg-hover: getCustomVar(("$texteditor-outlined-bg-hover")) !default;
+$texteditor-outlined-bg-focused: getCustomVar(("$texteditor-outlined-bg-focused")) !default;
+$texteditor-filled-bg: getCustomVar(("$texteditor-filled-bg")) !default;
+$texteditor-underlined-bg: getCustomVar(("$texteditor-underlined-bg")) !default;
+$texteditor-underlined-bg-hover: getCustomVar(("$texteditor-underlined-bg-hover")) !default;
+$texteditor-underlined-bg-focused: getCustomVar(("$texteditor-underlined-bg-focused")) !default;
 $texteditor-border-color: getCustomVar(("$texteditor-border-color")) !default;
-$texteditor-hover-border-color: getCustomVar(("$texteditor-hover-border-color")) !default;
-$texteditor-focused-border-color: getCustomVar(("$texteditor-focused-border-color")) !default;
-$texteditor-hover-bg: getCustomVar(("$texteditor-hover-bg")) !default;
+$texteditor-border-bottom-color: getCustomVar(("$texteditor-border-bottom-color")) !default;
+$texteditor-indicator-border-color: getCustomVar(("$texteditor-indicator-border-color")) !default;
+$texteditor-filled-bg-hover: getCustomVar(("$texteditor-filled-bg-hover")) !default;
+$texteditor-filled-bg-focused: getCustomVar(("$texteditor-filled-bg-focused")) !default;
 
 @use "sass:color";
 @use "../sizes" as *;
 @use "../colors" as *;
 
 // adduse
-$texteditor-color: $base-text-color !default;
-$texteditor-placeholder-color: $base-label-color !default;
-$texteditor-label-color: $texteditor-placeholder-color;
-$texteditor-label-color-focused: $base-accent;
-$texteditor-bg: $base-bg !default;
+$texteditor-color: null !default;
+$texteditor-placeholder-color: null !default;
+$texteditor-outlined-bg: $base-element-bg !default;
+$texteditor-outlined-bg-hover: $texteditor-outlined-bg !default;
+$texteditor-outlined-bg-focused: $texteditor-outlined-bg !default;
 $texteditor-filled-bg: null !default;
-$texteditor-focused-bg: $base-bg !default;
+$texteditor-underlined-bg: transparent !default;
+$texteditor-underlined-bg-hover: $texteditor-underlined-bg !default;
+$texteditor-underlined-bg-focused: $texteditor-underlined-bg !default;
 $texteditor-border-color: $base-border-color !default;
 $texteditor-border-color-hover: $base-border-color-hover !default;
 $texteditor-border-color-focused: $base-border-color-focused !default;
-$texteditor-hover-border-color: $texteditor-color !default;
-$texteditor-focused-border-color: $base-accent !default;
-$texteditor-hover-bg: null !default;
-$texteditor-button-clear-icon-color: $base-neutral-foreground3 !default;
+$texteditor-border-bottom-color: $base-border-color-accessible !default;
+$texteditor-border-bottom-color-hover: null !default;
+$texteditor-border-bottom-color-focused: null !default;
+$texteditor-indicator-border-color: $base-accent !default;
+
+$texteditor-button-clear-icon-color: $base-icon-color !default;
 $texteditor-invalid-focused-border-color: $base-invalid-color-hover !default;
 $texteditor-invalid-faded-border-color: $base-invalid-color !default;
 $texteditor-border-color-disabled: $base-border-color-disabled !default;
@@ -37,20 +47,65 @@ $texteditor-label-transition:
   top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms;
 
 @if $mode == "light" {
-  $texteditor-filled-bg: darken($texteditor-bg, 3.9) !default;
+  @if $color == "blue" {
+    $texteditor-color: $base-text-color !default;
+    $texteditor-placeholder-color: lighten($base-text-color, 29.80) !default;
+    $texteditor-outlined-bg: $base-element-bg !default;
+    $texteditor-filled-bg: darken($base-element-bg, 3.9) !default;
+  }
+  
+  @if $color == "saas" {
+    $texteditor-color: rgba(66, 81, 118, 1) !default;
+    $texteditor-placeholder-color: rgba(144, 158, 192, 1) !default;
+    $texteditor-outlined-bg: $base-element-bg !default;
+    $texteditor-filled-bg: rgba(243, 245, 248, 1) !default;
+  }
+
+  $texteditor-border-color-hover: darken($texteditor-border-color, 9.8) !default;
+  $texteditor-border-color-focused: darken($texteditor-border-color, 17.65) !default;
+  $texteditor-border-bottom-color-hover: darken($texteditor-border-bottom-color, 3.92) !default;
+  $texteditor-border-bottom-color-focused: darken($texteditor-border-bottom-color-hover, 3.92) !default;
 }
 
+
 @if $mode == "dark" {
-  $texteditor-filled-bg: darken($texteditor-bg, 8.2) !default;
+  @if $color == "blue" {
+    $texteditor-outlined-bg: $base-element-bg !default;
+    $texteditor-filled-bg: darken($base-element-bg, 8.2) !default;
+  }
+
+  @if $color == "saas" {
+    $texteditor-outlined-bg: rgba(20, 30, 40, 1) !default;
+    $texteditor-filled-bg: rgba(50, 60, 75, 1) !default;
+  }
+
+  $texteditor-color: $base-text-color !default;
+  $texteditor-placeholder-color: darken($base-text-color, 40.00) !default;
+  $texteditor-border-color-hover: lighten($texteditor-border-color, 7.84) !default;
+  $texteditor-border-color-focused: lighten($texteditor-border-color, 3.92) !default;
+  $texteditor-border-bottom-color-hover: lighten($texteditor-border-bottom-color, 6.27) !default;
+  $texteditor-border-bottom-color-focused: lighten($texteditor-border-bottom-color-hover, 3.92) !default;
 }
+$texteditor-filled-bg-hover: $texteditor-filled-bg !default;
+$texteditor-filled-bg-focused: $texteditor-filled-bg !default;
+
+$texteditor-label-color: $texteditor-placeholder-color;
+$texteditor-label-color-focused: $base-accent;
+
   
 $never-used: collector((
 "$texteditor-color": $texteditor-color,
 "$texteditor-placeholder-color": $texteditor-placeholder-color,
-"$texteditor-bg": $texteditor-bg,
-"$texteditor-focused-bg": $texteditor-focused-bg,
+"$texteditor-outlined-bg": $texteditor-outlined-bg,
+"$texteditor-outlined-bg-hover": $texteditor-outlined-bg-hover,
+"$texteditor-outlined-bg-focused": $texteditor-outlined-bg-focused,
+"$texteditor-filled-bg": $texteditor-filled-bg,
+"$texteditor-underlined-bg": $texteditor-underlined-bg,
+"$texteditor-underlined-bg-hover": $texteditor-underlined-bg-hover,
+"$texteditor-underlined-bg-focused": $texteditor-underlined-bg-focused,
 "$texteditor-border-color": $texteditor-border-color,
-"$texteditor-hover-border-color": $texteditor-hover-border-color,
-"$texteditor-focused-border-color": $texteditor-focused-border-color,
-"$texteditor-hover-bg": $texteditor-hover-bg,
+"$texteditor-border-bottom-color": $texteditor-border-bottom-color,
+"$texteditor-indicator-border-color": $texteditor-indicator-border-color,
+"$texteditor-filled-bg-hover": $texteditor-filled-bg-hover,
+"$texteditor-filled-bg-focused": $texteditor-filled-bg-focused,
 ));

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

@@ -21,10 +21,12 @@ $fluent-editor-custom-button-margin: 6px;
 $fluent-editor-border-width: 1px;
 
 @mixin texteditor-outlined-styling() {
-  background-color: $texteditor-bg;
+  background-color: $texteditor-outlined-bg;
   border-radius: $texteditor-input-border-radius;
-  border: 1px solid $texteditor-border-color;
-  border-bottom: 1px solid $base-border-color-accessible;
+  border-width: $fluent-editor-border-width;
+  border-style: solid;
+  border-color: $texteditor-border-color;
+  border-bottom-color: $texteditor-border-bottom-color;
 
   &::before {
     box-sizing: border-box;
@@ -37,7 +39,7 @@ $fluent-editor-border-width: 1px;
     width: calc(100% + 2 * $fluent-editor-border-width);
     border-bottom-left-radius: $texteditor-input-border-radius;
     border-bottom-right-radius: $texteditor-input-border-radius;
-    border-bottom: 2px solid $texteditor-focused-border-color;
+    border-bottom-color: $texteditor-indicator-border-color;
     clip-path: inset(calc(100% - 2px) 0 0);
     transform: scaleX(0);
     transition-property: transform;
@@ -86,17 +88,20 @@ $fluent-editor-border-width: 1px;
   }
 
   &.dx-state-hover {
+    background-color: $texteditor-outlined-bg-hover;
     border-left-color: $texteditor-border-color-hover;
     border-right-color: $texteditor-border-color-hover;
     border-top-color: $texteditor-border-color-hover;
-    border-bottom-color: $base-border-color-accessible-hover;
+    border-bottom-color: $texteditor-border-bottom-color-hover;
   }
 
-  &.dx-state-focused {
+  &.dx-state-focused,
+  &.dx-state-active {
+    background-color: $texteditor-outlined-bg-focused;
     border-left-color: $texteditor-border-color-focused;
     border-right-color: $texteditor-border-color-focused;
     border-top-color: $texteditor-border-color-focused;
-    border-bottom-color: $base-border-color-accessible-focused;
+    border-bottom-color: $texteditor-border-bottom-color-focused;
 
     &::before {        
       transform: scaleX(1);
@@ -105,17 +110,14 @@ $fluent-editor-border-width: 1px;
       transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
     }
   }
-
-  &.dx-state-focused,
-  &.dx-state-active {
-    background-color: $texteditor-focused-bg;
-  }
 }
 
 @mixin texteditor-filled-styling() {
   background-color: $texteditor-filled-bg;
   border-radius: $texteditor-input-border-radius;
-  border: 1px solid transparent;
+  border-width: $fluent-editor-border-width;
+  border-style: solid;
+  border-color: transparent;
 
   .dx-placeholder::before,
   .dx-texteditor-input {
@@ -131,15 +133,19 @@ $fluent-editor-border-width: 1px;
     width: calc(100% + 2 * $fluent-editor-border-width);
     border-bottom-left-radius: $texteditor-input-border-radius;
     border-bottom-right-radius: $texteditor-input-border-radius;
-    border-bottom: 2px solid $texteditor-focused-border-color;
+    border-bottom-color: $texteditor-indicator-border-color;
     clip-path: inset(calc(100% - 2px) 0 0);
   }
 
-  &.dx-state-hover,
-  &.dx-state-active {
-    background-color: $texteditor-hover-bg;
+  &.dx-state-hover {
+    background-color: $texteditor-filled-bg-hover;
   }
 
+  &.dx-state-focused,
+  &.dx-state-active {
+    background-color: $texteditor-filled-bg-focused;
+  }
+  
   &.dx-state-disabled,
   &.dx-state-readonly {
     background-color: transparent;
@@ -157,19 +163,28 @@ $fluent-editor-border-width: 1px;
 }
 
 @mixin texteditor-underlined-styling() {
-  background-color: transparent;
+  background-color: $texteditor-underlined-bg;
   border-radius: 0;
 
   &::after {
-    border-bottom: 1px solid $base-border-color-accessible;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: $texteditor-border-bottom-color;
   }
 
   &.dx-state-hover {
+    background-color: $texteditor-underlined-bg-hover;
+
     &::after {
-      border-bottom: 1px solid $base-border-color-accessible-hover;
+      border-bottom-color: $texteditor-border-bottom-color-hover;
     }
   }
 
+  &.dx-state-focused,
+  &.dx-state-active {
+    background-color: $texteditor-underlined-bg-focused;
+  }
+
   .dx-texteditor-input,
   .dx-lookup-field {
     min-height: $fluent-texteditor-input-height;
@@ -312,7 +327,7 @@ $fluent-editor-border-width: 1px;
 
   &.dx-texteditor-label-outside {
     .dx-texteditor-label {
-      color: $base-text-color;
+      color: $texteditor-color;
     }
 
     &.dx-invalid {
@@ -325,7 +340,9 @@ $fluent-editor-border-width: 1px;
   &.dx-state-focused,
   &.dx-state-active {
     &::before {
-      border-bottom: 2px solid $texteditor-focused-border-color;
+      border-bottom-width: 2px;
+      border-bottom-style: solid;
+      border-bottom-color: $texteditor-indicator-border-color;
       transform: scale(1);
       transition-property: transform;
       transition-duration: 0.2s;
@@ -488,25 +505,25 @@ $fluent-editor-border-width: 1px;
 @include dx-editor-outlined(
   $texteditor-input-border-radius,
   $fluent-texteditor-label-font-size,
-  1px,
-  1px,
+  $fluent-base-border-width,
+  $fluent-base-border-width,
   solid,
   $fluent-base-inline-block-height,
   $fluent-base-inline-block-height,
   math.div(1px + $fluent-texteditor-font-size, 2),
   $fluent-texteditor-label-outside-top-offset,
-  1.5px,
+  0.5px,
   $fluent-filled-texteditor-input-horizontal-padding,
   $fluent-filled-texteditor-input-horizontal-padding,
-  $base-bg,
+  $texteditor-outlined-bg,
   1px solid transparent,
   $texteditor-border-color,
-  $base-border-color-accessible,
+  $texteditor-border-bottom-color,
   $texteditor-border-color-disabled,
   $texteditor-border-color-hover,
-  $base-border-color-accessible-hover,
+  $texteditor-border-bottom-color-hover,
   $texteditor-border-color-focused,
-  $base-border-color-accessible-focused,
+  $texteditor-border-bottom-color-focused,
   $texteditor-invalid-faded-border-color,
   $texteditor-invalid-focused-border-color,
   $texteditor-label-transition,

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

@@ -10,7 +10,7 @@
 
 // adduse
 
-@include clock-action-icons-mixin($base-inverted-bg, $typography-bg, $clock-digits-color);
+@include clock-action-icons-mixin($base-inverted-bg, $base-typography-bg, $clock-digits-color);
 
 .dx-timeview {
   height: auto;

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

@@ -8,20 +8,17 @@ $tooltip-bg: getCustomVar(("$tooltip-bg")) !default;
 @use "../color" as extcolor;
 
 // adduse
-$tooltip-color: null !default;
+$tooltip-color: $base-text-color !default;
 $tooltip-bg: null !default;
 
-$tooltip-shadow-color: null !default;
 $tooltip-border-radius: $base-border-radius !default;
 
 @if $mode == "light" {
-  $tooltip-color: $base-text-color !default;
   $tooltip-bg: $base-bg !default;
 }
 
 @if $mode == "dark" {
-  $tooltip-color: $base-text-color !default;
-  $tooltip-bg: $base-bg-hover !default;
+  $tooltip-bg: $base-hover-bg !default;
 }
 
 $never-used: collector((

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

@@ -12,6 +12,7 @@
   .dx-overlay-content {
     background-color: $tooltip-bg;
     color: $tooltip-color;
+    border: 1px solid transparent;
     border-radius: $tooltip-border-radius;
     min-height: auto;
 

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

@@ -9,11 +9,11 @@ $fluent-tooltip-arrow-border-radius: 2px !default;
 $fluent-tooltip-shadow: 0 0 2px 0 $base-dropdown-shadow-color1 !default;
 
 @if $size == "default" {
-  $fluent-tooltip-padding: 8px 12px !default;
+  $fluent-tooltip-padding: 7px 11px !default;
   $fluent-tooltip-font-size: 12px;
 }
 
 @else if $size == "compact" {
-  $fluent-tooltip-padding: 4px 6px !default;
+  $fluent-tooltip-padding: 3px 5px !default;
   $fluent-tooltip-font-size: 12px;
 }

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

@@ -13,21 +13,9 @@ $treeview-hover-bg: $base-hover-bg !default;
 $treeview-item-hover-color: $base-hover-color !default;
 $treeview-border-color: $base-border-color !default;
 $treeview-item-selected-color: $treeview-color !default;
-$treeview-item-selected-bg: null !default;
-$treeview-item-selected-hover-bg: null !default;
+$treeview-item-selected-bg: $base-selected-bg !default;
 $treeview-spin-icon-color: $base-spin-icon-color !default;
-$checkbox-border-color-focused: $base-focus-bg !default;
-
-@if $mode == "light" {
-  $treeview-item-selected-bg: color.change(#000, $alpha: 0.12) !default;
-  $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.14) !default;
-}
-
-@if $mode == "dark" {
-  $treeview-item-selected-bg: color.change(#6e6e80, $alpha: 0.5) !default;
-  $treeview-item-selected-hover-bg: color.change(#6e6e80, $alpha: 0.4) !default;
-}
-
+$checkbox-border-color-focused: $base-accent-active !default;
 $never-used: collector((
 "$treeview-focused-bg": $treeview-focused-bg,
 ));

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

@@ -9,7 +9,7 @@
 // adduse
 
 .dx-theme-fluent-typography {
-  background-color: $typography-bg;
+  background-color: $base-typography-bg;
 
   @include dx-base-typography();
 

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

@@ -42,6 +42,10 @@
   fill: $base-bg !important;
 }
 
+.dx-theme-typography-background-color {
+  background-color: $typography-bg !important;
+}
+
 .dx-theme-border-color-as-background-color {
   background-color: $base-border-color !important;
   fill: $base-border-color !important;

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

@@ -58,7 +58,7 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
   $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-  $filterbuilder-menu-icon-color: $base-icon-color !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "contrast" {
@@ -82,7 +82,7 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-focus-color: $filterbuilder-item-value-color !default;
   $filterbuilder-text-color: $base-text-color !default;
   $filterbuilder-text-focus-color: $base-text-color !default;
-  $filterbuilder-menu-icon-color: $base-icon-color !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "dark" {
@@ -106,13 +106,13 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: rgba(204, 204, 204, 0.8) !default;
   $filterbuilder-item-value-hover-color: color.adjust($filterbuilder-item-value-color, $alpha: -0.1) !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.2) !default;
-  $filterbuilder-menu-icon-color: darken($base-icon-color, 33.7%) !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "darkmoon" {
   $filterbuilder-text-color: #000 !default;
   $filterbuilder-text-focus-color: $filterbuilder-text-color !default;
-  $filterbuilder-menu-icon-color: $base-icon-color !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
   $filterbuilder-plus-icon-color: color.change($base-success, $alpha: 0.8) !default;
   $filterbuilder-plus-icon-hover-color: color.adjust($filterbuilder-plus-icon-color, $alpha: -0.1) !default;
   $filterbuilder-plus-icon-focus-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 0.2) !default;
@@ -154,7 +154,7 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: rgba(204, 204, 204, 0.8) !default;
   $filterbuilder-item-value-hover-color: color.adjust($filterbuilder-item-value-color, $alpha: -0.1) !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.2) !default;
-  $filterbuilder-menu-icon-color: $base-icon-color !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "greenmist" {
@@ -178,7 +178,7 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
   $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-  $filterbuilder-menu-icon-color: $base-icon-color !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "light" {
@@ -202,7 +202,7 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
   $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-  $filterbuilder-menu-icon-color: lighten($base-icon-color, 33.7%) !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "softblue" {
@@ -226,7 +226,7 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
   $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-  $filterbuilder-menu-icon-color: $base-icon-color !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 $never-used: collector((

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

@@ -19,6 +19,12 @@
   .dx-field-item:not(.dx-last-col) {
     padding-inline-end: 15px;
   }
+
+  &.dx-layout-manager-one-col {
+    .dx-box-item:not(:first-child) .dx-single-column-item-content > .dx-field-item {
+      padding-top: $generic-form-default-padding;
+    }
+  }
 }
 
 .dx-form-group-caption {

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

@@ -6,6 +6,7 @@ $generic-form-group-caption-font-size: null !default;
 $generic-form-group-content-padding-bottom: null !default;
 $generic-form-label-icon-size: null !default;
 $generic-form-top-label-bottom-margin: null !default;
+$generic-form-default-padding: 10px !default;
 
 @if $size == "default" {
   $generic-form-group-caption-font-size: 20px !default;

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

@@ -102,14 +102,8 @@
 }
 
 .dx-state-focused.dx-gallery {
-  border-width: 1px;
-  border-style: solid;
   border-color: $base-accent;
 
-  &.dx-gallery-indicator-visible {
-    border-width: 0;
-  }
-  
   .dx-gallery-indicator-item-selected {
     background: $gallery-indicator-focused-bg;
   }

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

@@ -186,7 +186,7 @@ $datagrid-text-stub-background-image-path: null !default;
   $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: color.change($base-accent, $alpha: 0.2) !default;
+  $datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default;
   $datagrid-hover-bg: $base-hover-bg !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
   $datagrid-menu-icon-color: darken($base-icon-color, 33.7%) !default;
@@ -358,7 +358,7 @@ $datagrid-text-stub-background-image-path: null !default;
   $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: color.change($base-accent, $alpha: 0.2) !default;
+  $datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default;
   $datagrid-hover-bg: $base-hover-bg !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
   $datagrid-menu-icon-color: lighten($base-icon-color, 33.7%) !default;

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

@@ -161,17 +161,36 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
     border-bottom: $list-group-header-border-bottom;
     background: $list-group-header-bg;
     color: $list-group-color;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     .dx-list-group:first-of-type & {
       border-top: none;
     }
 
-    &::before {
-      border-top-color: $list-group-color;
+    .dx-list-group-collapsed .dx-list-group-header-indicator &::before {
+      border-bottom-color: $list-group-color;
     }
 
-    .dx-list-group-collapsed &::before {
-      border-bottom-color: $list-group-color;
+    .dx-list-group-header-indicator {
+      order: 1;
+
+      .dx-list-collapsible-groups &::before {
+        width: 0;
+        height: 0;
+        display: block;
+        border-style: solid;
+        border-color: transparent;
+        border-width: 5px 5px 0 5px;
+        border-top-color: $list-group-color;
+        content: ' ';
+      }
+      
+      .dx-list-group-collapsed &::before {
+        border-bottom-color: $list-group-color;
+        border-width: 0 5px 5px 5px;
+      }
     }
   }
 

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

@@ -1,7 +1,9 @@
 @use "sass:color";
 @use "../sizes" as *;
 @use "../colors" as *;
+@use "../dropDownEditor/colors" as *;
 
 // adduse
 
-$lookup-icon-color: $base-icon-color !default;
+$lookup-icon-color: $dropdowneditor-icon-color !default;
+$lookup-icon-color-active: $dropdowneditor-icon-active-color !default;

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

@@ -28,13 +28,10 @@
   "\f04f",
   $generic-base-inline-borderedwidget-inner-size,
   $lookup-icon-color,
+  $lookup-icon-color-active,
   $generic-base-icon-size,
 );
 
-.dx-state-readonly .dx-lookup-field::before {
-  opacity: 0.5;
-}
-
 .dx-lookup-popup-wrapper {
   .dx-list-item {
     border-top: none;

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

@@ -40,13 +40,15 @@
 
   .dx-menu-item-has-icon.dx-menu-item-has-submenu {
     .dx-icon {
-      margin: 0 $generic-menu-padding-small 0 $generic-menu-item-padding-reduced;
+      margin-inline-end: $generic-menu-padding-small;
+      margin-inline-start: $generic-menu-item-padding-reduced;
     }
   }
 
   .dx-menu-item-has-text {
     .dx-menu-item-text {
-      padding: $generic-menu-item-padding-top-base $generic-menu-item-padding-base $generic-menu-item-padding-base $generic-menu-item-padding-base;
+      padding: $generic-menu-item-padding-base;
+      padding-top: $generic-menu-item-padding-top-base;
     }
 
     &.dx-menu-item-has-icon {
@@ -57,7 +59,8 @@
 
     &.dx-menu-item-has-submenu {
       .dx-menu-item-text {
-        padding: $generic-menu-item-padding-top-base $generic-menu-padding-small $generic-menu-item-padding-base $generic-menu-item-padding-base;
+        padding-inline-end: $generic-menu-padding-small;
+        padding-inline-start: $generic-menu-item-padding-base;
       }
     }
   }
@@ -75,26 +78,6 @@
       @include dx-icon-font-centered-sizing($generic-base-icon-size);
     }
   }
-
-  &.dx-rtl {
-    .dx-menu-item-has-icon.dx-menu-item-has-submenu {
-      .dx-icon {
-        margin: 0 $generic-menu-item-padding-reduced 0 $generic-menu-padding-small;
-      }
-    }
-
-    .dx-menu-item-has-text {
-      .dx-menu-item-text {
-        padding: $generic-menu-item-padding-top-base $generic-menu-item-padding-base $generic-menu-item-padding-base 0;
-      }
-
-      &.dx-menu-item-has-submenu {
-        .dx-menu-item-text {
-          padding: $generic-menu-item-padding-top-base $generic-menu-item-padding-base $generic-menu-item-padding-base $generic-menu-padding-small;
-        }
-      }
-    }
-  }
 }
 
 .dx-menu-adaptive-mode {