devextreme-themebuilder 23.2.2-beta → 23.2.3

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

@@ -16,9 +16,9 @@
 
 
 .dx-context-menu {
-  .dx-menu-item {
-    color: $base-text-color;
+  color: $menu-color;
 
+  .dx-menu-item {
     .dx-menu-item-content {
       display: flex;
       align-items: center;
@@ -33,7 +33,6 @@
         .dx-menu-item-popout {
           display: flex;
           align-items: center;
-          color: $base-icon-color;
 
           @include dx-icon(spinright);
           @include dx-icon-sizing($fluent-button-icon-size);
@@ -41,6 +40,16 @@
       }
     }
 
+    .dx-menu-item-popout {
+      color: $base-icon-color;
+    }
+
+    &.dx-state-disabled {
+      .dx-menu-item-popout {
+        color: $base-foreground-disabled;
+      }
+    }
+
     &.dx-menu-item-has-submenu > .dx-menu-item-content {
       padding-inline-end: $fluent-menu-item-with-icon-horizontal-padding;
     }

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

@@ -3,15 +3,13 @@
 // adduse
 
 $fluent-context-menu-horizontal-padding: null !default;
-$fluent-context-menu-container-vertical-padding: null !default;
+$fluent-context-menu-container-vertical-padding: 4px !default;
 $fluent-context-menu-border-radius: $base-border-radius !default;
 
 @if $size == "default" {
   $fluent-context-menu-horizontal-padding: 12px !default;
-  $fluent-context-menu-container-vertical-padding: 4px !default;
 }
 
 @else if $size == "compact" {
   $fluent-context-menu-horizontal-padding: 8px !default;
-  $fluent-context-menu-container-vertical-padding: 4px !default;
 }

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

@@ -7,7 +7,13 @@
 $fluent-datagrid-grouppanel-item-bg: null !default;
 
 @if $mode == "light" {
-  $fluent-datagrid-grouppanel-item-bg: darken($base-bg, 5.88) !default;
+  @if $color == "blue"{
+    $fluent-datagrid-grouppanel-item-bg: darken($base-bg, 5.88) !default;
+  }
+  
+  @if $color == "saas" {
+    $fluent-datagrid-grouppanel-item-bg: color.change($base-hover-bg, $alpha: 0.4) !default;
+  } 
 }
 
 @if $mode == "dark" {

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

@@ -1,6 +1,4 @@
-@use "sass:color";
 @use "../sizes" as *;
 @use "../colors" as *;
 
 // adduse
-$timeview-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.2) !default;

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

@@ -68,14 +68,6 @@
   @include dx-dropdowneditor-button-icon-styling(eventall);
 }
 
-.dx-datebox-calendar {
-  &.dx-dropdowneditor-active {
-    &.dx-editor-filled {
-      background: $texteditor-hover-bg;
-    }
-  }
-}
-
 .dx-datebox-wrapper-calendar {
   .dx-popup-content {
     padding: 0;

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

@@ -150,7 +150,7 @@ $diagram-toolbox-title-size: 18px;
 
 .dx-diagram-floating-toolbar-container {
   background: $overlay-content-bg;
-  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 1px 8px color.change($base-shadow-color, $alpha: 0.175);
   border-radius: $popup-border-radius;
   padding: 4px;
 
@@ -202,7 +202,7 @@ $diagram-toolbox-title-size: 18px;
 
 .dx-diagram-toolbox-popup {
   & > .dx-overlay-content {
-    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.175);
+    box-shadow: 0 1px 8px color.change($base-shadow-color, $alpha: 0.175);
   }
 
   .dx-popup-title {
@@ -233,7 +233,7 @@ $diagram-toolbox-title-size: 18px;
   }
 
   .dx-diagram-toolbox-input-container {
-    border-bottom: 1px solid $accordion-item-border-color;
+    border-bottom: 1px solid transparent;
   }
 
   .dx-diagram-toolbox-input {
@@ -281,7 +281,7 @@ $diagram-toolbox-title-size: 18px;
       padding-top: $diagram-toolbox-mobile-padding;
 
       .dx-diagram-toolbox-input-container {
-        border-top: 1px solid $accordion-item-border-color;
+        border-top: 1px solid transparent;
       }
     }
   }
@@ -294,7 +294,7 @@ $diagram-toolbox-title-size: 18px;
     .dx-accordion-item {
       border-left: none;
       border-right: none;
-      border-bottom: 1px solid $accordion-item-border-color;
+      border-bottom: 1px solid transparent;
       border-top: none;
       box-shadow: none;
     }

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

@@ -30,6 +30,6 @@ $filemanager-progressbox-shadow-color: null !default;
 
 @if $mode == "dark" {
   $filemanager-dirs-tree-item-focus-bg: lighten($base-bg, 8%) !default;
-  $filemanager-progressbox-shadow-color: color.change(darken($base-shadow-color, 100%), $alpha: 0.3) !default;
+  $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default;
 }
 

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

@@ -34,7 +34,7 @@ $filterbuilder-item-operator-focus-color: color.adjust($filterbuilder-item-opera
 $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;
 $never-used: collector((
 "$filterbuilder-text-color": $filterbuilder-text-color,
 "$filterbuilder-text-focus-color": $filterbuilder-text-focus-color,

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

@@ -72,10 +72,6 @@
   }
 
   &.dx-filterbuilder-operations {
-    .dx-treeview-item {
-      padding-left: $fluent-filterbuilder-treeview-item-left-padding;
-    }
-
     .dx-rtl {
       .dx-treeview-item {
         padding-right: $fluent-filterbuilder-treeview-item-left-padding;
@@ -84,14 +80,6 @@
   }
 
   .dx-treeview-node {
-    > .dx-treeview-item {
-      padding-left: $fluent-filterbuilder-treeview-item-left-padding * 2;
-    }
-
-    &.dx-treeview-node-is-leaf > .dx-treeview-item {
-      padding-left: $fluent-filterbuilder-treeview-item-left-padding;
-    }
-
     .dx-treeview-node-container-opened {
       margin-left: $fluent-filterbuilder-treeview-item-left-padding;
     }
@@ -107,7 +95,6 @@
   }
 
   .dx-treeview-toggle-item-visibility {
-    height: $fluent-filterbuilder-treeview-item-min-heigth;
     left: $fluent-filterbuilder-treeview-toggle-left;
   }
 

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

@@ -12,17 +12,18 @@ $fluent-filterbuilder-treeview-item-min-heigth: null !default;
 @if $size == "default" {
   $fluent-filterbuilder-icon-padding: 8px !default;
   $fluent-filterbuilder-filled-editor-padding: 13px 12px !default;
-  $fluent-filterbuilder-treeview-item-left-padding: 24px !default;
-  $fluent-filterbuilder-treeview-item-padding: 8px $fluent-filterbuilder-treeview-item-left-padding 10px !default;
+  
+  $fluent-filterbuilder-treeview-item-left-padding: 12px !default;
+  $fluent-filterbuilder-treeview-item-padding: 6px 12px 6px $fluent-filterbuilder-treeview-item-left-padding !default;
   $fluent-filterbuilder-treeview-toggle-left: 16px !default;
-  $fluent-filterbuilder-treeview-item-min-heigth: 36px !default;
+  $fluent-filterbuilder-treeview-item-min-heigth: 32px !default;
 }
 
 @else if $size == "compact" {
   $fluent-filterbuilder-icon-padding: 4px !default;
   $fluent-filterbuilder-filled-editor-padding: 8px 8px !default;
-  $fluent-filterbuilder-treeview-item-left-padding: 8px !default;
-  $fluent-filterbuilder-treeview-item-padding: 4px $fluent-filterbuilder-treeview-item-left-padding 5px !default;
+  $fluent-filterbuilder-treeview-item-left-padding: 4px !default;
+  $fluent-filterbuilder-treeview-item-padding: 4px 12px 4px $fluent-filterbuilder-treeview-item-left-padding !default;
   $fluent-filterbuilder-treeview-toggle-left: 0 !default;
-  $fluent-filterbuilder-treeview-item-min-heigth: 26px !default;
+  $fluent-filterbuilder-treeview-item-min-heigth: 24px !default;
 }

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

@@ -6,11 +6,25 @@ $form-group-border-color: getCustomVar(("$form-group-border-color")) !default;
 @use "../colors" as *;
 
 // adduse
-$form-field-item-color: $base-text-color !default;
+$form-field-item-color: null !default;
 $form-item-help-text-color: $base-label-color !default;
 $form-group-border-color: $base-border-color !default;
 $form-field-required-color: $form-field-item-color !default;
 $form-field-mark-color: $form-field-item-color !default;
+
+@if $mode == "light" {
+  @if $color == "blue" {
+    $form-field-item-color: $base-text-color !default;
+  }
+  
+  @if $color == "saas" {
+    $form-field-item-color: $base-label-color !default;
+  }
+}
+
+@if $mode == "dark" {
+  $form-field-item-color: $base-text-color !default;
+}
 $never-used: collector((
 "$form-field-item-color": $form-field-item-color,
 "$form-group-border-color": $form-group-border-color,

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

@@ -6,7 +6,6 @@
 @use "../sizes" as *;
 @use "../../base/form";
 @use "../../base/icons" as *;
-@use "../textEditor/sizes" as *;
 
 // adduse
 @use "../scrollable";
@@ -70,17 +69,6 @@
   .dx-switch {
     vertical-align: middle;
   }
-
-  &.dx-label-v-align {
-    .dx-invalid-message > .dx-overlay-wrapper,
-    .dx-invalid-message > .dx-overlay-content {
-      transform: translate(0, 0) !important; // stylelint-disable-line declaration-no-important
-    }
-  }
-
-  .dx-toggle-controls-paddings {
-    padding-inline-start: $fluent-filled-texteditor-input-horizontal-padding;
-  }
 }
 
 .dx-field-item-content-wrapper.dx-invalid {

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

@@ -103,16 +103,9 @@
   margin: 5px - math.div($fluent-gallery-indicator-selected-size, 2) 6px;
 }
 
-
 .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/fluent/gridBase/_colors.scss

@@ -54,7 +54,7 @@ $datagrid-cell-removed-border-color: $datagrid-border-color !default;
 $datagrid-row-removed-bg: $datagrid-hover-bg !default;
 $datagrid-cell-removed-text-color: null !default;
 $datagrid-row-invalid-faded-border-color: $button-danger-text-hover-bg !default;
-$datagrid-nodata-color: lighten($datagrid-base-color, 40%) !default;
+$datagrid-nodata-color: $base-label-color !default;
 $datagrid-group-row-color: null !default;
 $datagrid-group-row-bg: color.change($datagrid-base-background-color, $alpha: 1) !default;
 $datagrid-master-detail-cell-bg: darken($datagrid-base-background-color, 2%) !default;
@@ -75,7 +75,7 @@ $datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !defaul
 $datagrid-columnchooser-message-color: lighten($datagrid-base-color, 26%) !default;
 $datagrid-summary-bg: $datagrid-base-background-color !default;
 $datagrid-column-separator-bg: $base-accent !default;
-$datagrid-filter-row-background-color: darken($datagrid-base-background-color, 2%) !default;
+$datagrid-filter-row-background-color: null !default;
 $datagrid-active-header-filter-icon-color: $base-accent !default;
 $datagrid-text-stub-background-image-path: null !default;
 $datagrid-filter-panel-color: $base-accent !default;
@@ -84,7 +84,15 @@ $datagrid-text-link-disabled-opacity: $base-disabled-opacity;
 $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
 
 @if $mode == "light" {
-  $datagrid-row-focused-bg: #d0e5fb !default;
+  @if $color == "blue"{
+    $datagrid-row-focused-bg: lighten(desaturate(adjust-hue($base-accent, 3), 0.98), 50.00) !default; // #d0e5fb
+    $datagrid-filter-row-background-color: darken($datagrid-base-background-color, 2%) !default;
+  }
+  
+  @if $color == "saas" {
+    $datagrid-row-focused-bg: lighten(adjust-hue($base-accent, -1), 26.47) !default; // #dbe6ff
+    $datagrid-filter-row-background-color: $base-typography-bg !default;
+  } 
   $datagrid-columnchooser-item-color: $datagrid-base-color !default;
   $datagrid-group-row-color: $datagrid-columnchooser-item-color !default;
   $datagrid-block-separator-bg: darken($datagrid-base-background-color, 12%) !default;

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

@@ -994,7 +994,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
 
     .dx-row-focused {
       &.dx-data-row {
-        & > td:not(.dx-focused):not(.dx-cell-modified),
+        & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid),
         & .dx-command-edit .dx-link {
           background-color: $datagrid-row-focused-bg;
           color: $datagrid-row-focused-color;
@@ -1014,8 +1014,8 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
       }
 
       &.dx-data-row.dx-edit-row {
-        & > td.dx-editor-cell:not(.dx-command-select),
-        & > tr > td.dx-editor-cell:not(.dx-command-select) {
+        & > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid),
+        & > tr > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid) {
           background-color: $datagrid-base-background-color;
           color: $datagrid-base-color;
         }

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

@@ -11,7 +11,7 @@ $htmleditor-toolbar-border-color: $base-separator-color !default;
 $htmleditor-variable-bg: color.change($base-accent, $alpha: 0.15) !default;
 $htmleditor-resize-frame-border-color: $base-accent !default;
 $htmleditor-resize-handle-bg: $base-accent !default;
-$htmleditor-mention-bg: $base-bg-selected !default;
+$htmleditor-mention-bg: $base-selected-bg !default;
 $htmleditor-table-border-color: $base-border-color !default;
 $htmleditor-fileuploader-input-wrapper-border-color: $base-border-color !default;
-$htmleditor-fileuploader-input-wrapper-bg-color: $typography-bg !default;
+$htmleditor-fileuploader-input-wrapper-bg-color: $base-typography-bg !default;

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

@@ -56,7 +56,7 @@
   &.dx-state-focused,
   &.dx-state-active {
     &::before {
-      border-bottom: 2px solid $texteditor-focused-border-color;
+      border-bottom: 2px solid $texteditor-indicator-border-color;
       transform: scale(1);
       transition-property: transform;
       transition-duration: 0.2s;

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

@@ -1,11 +1,11 @@
-$list-group-color: getCustomVar(("$list-group-color")) !default;
+$list-normal-color: getCustomVar(("$list-normal-color")) !default;
 $list-border-color: getCustomVar(("$list-border-color")) !default;
 $list-group-header-bg: getCustomVar(("$list-group-header-bg")) !default;
-$list-normal-color: getCustomVar(("$list-normal-color")) !default;
-$list-expanded-group-color: getCustomVar(("$list-expanded-group-color")) !default;
 $list-item-hover-bg: getCustomVar(("$list-item-hover-bg")) !default;
 $list-item-selected-bg: getCustomVar(("$list-item-selected-bg")) !default;
 $list-item-active-bg: getCustomVar(("$list-item-active-bg")) !default;
+$list-group-color: getCustomVar(("$list-group-color")) !default;
+$list-expanded-group-color: getCustomVar(("$list-expanded-group-color")) !default;
 
 @use "sass:color";
 @use "../sizes" as *;
@@ -13,39 +13,46 @@ $list-item-active-bg: getCustomVar(("$list-item-active-bg")) !default;
 @use "../button/colors" as *;
 
 // adduse
-$list-group-color: $base-text-color !default;
+$list-normal-color: null !default;
 $list-border-color: $base-border-color !default;
 $list-group-header-bg: transparent !default;
-$list-normal-color: $base-neutral-foreground2 !default;
-$list-expanded-group-color: $base-text-color !default;
-$list-item-hover-bg: $base-bg-hover !default;
-$list-item-selected-bg: $base-bg-selected !default;
-$list-item-selected-hover-bg: $base-bg-hover !default;
-$list-item-focused-selected-bg: $base-bg-active !default;
+$list-item-hover-bg: $base-hover-bg !default;
+$list-item-selected-bg: $base-selected-bg !default;
+$list-item-selected-hover-bg: $list-item-hover-bg !default;
+$list-item-focused-selected-bg: $base-active-bg !default;
 $list-item-hover-color: $base-hover-color !default;
-$list-item-selected-color: $base-neutral-foreground2 !default;
 $list-header-indicator-color: $base-icon-color !default;
-$list-item-active-bg: $base-bg-active !default;
+$list-item-active-bg: $base-active-bg !default;
 $list-holdmenu-bg: $base-bg !default;
 $list-holdmenu-border-color: $list-border-color !default;
 $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.12) !default;
 $list-menu-button-default-color: $button-default-color !default;
 $list-menu-button-default-bg: $button-default-bg !default;
 $list-menu-button-delete-bg: $base-danger !default;
-$list-item-ghost-bg: $base-bg !default;
+$list-item-ghost-bg: $base-element-bg !default;
 $list-item-ghost-color: $base-label-color !default;
 $list-item-ghost-border-color: $base-accent !default;
-$list-item-ghost-shadow-color: $base-shadow-color !default;
 $list-icon-color: $base-icon-color !default;
 
 $base-select-all-separator-color: $base-separator-color !default;
+
+@if $mode == "light" {
+  $list-normal-color: lighten($base-text-color, 11.76) !default;
+}
+
+@if $mode == "dark" {
+  $list-normal-color: darken($base-text-color, 16.08) !default;
+}
+$list-group-color: $base-text-color !default;
+$list-expanded-group-color: $list-group-color !default;
+$list-item-selected-color: $list-normal-color !default;
 $never-used: collector((
-"$list-group-color": $list-group-color,
+"$list-normal-color": $list-normal-color,
 "$list-border-color": $list-border-color,
 "$list-group-header-bg": $list-group-header-bg,
-"$list-normal-color": $list-normal-color,
-"$list-expanded-group-color": $list-expanded-group-color,
 "$list-item-hover-bg": $list-item-hover-bg,
 "$list-item-selected-bg": $list-item-selected-bg,
 "$list-item-active-bg": $list-item-active-bg,
+"$list-group-color": $list-group-color,
+"$list-expanded-group-color": $list-expanded-group-color,
 ));

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

@@ -435,6 +435,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo
 
     &.dx-list-static-delete-button-container {
       width: $item-horizontal-padding + $fluent-button-icon-size;
+      padding: 0;
     }
 
     .dx-list-reorder-handle {
@@ -473,6 +474,8 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo
   }
 
   .dx-list-static-delete-button {
+    padding: 0;
+
     &.dx-button {
       box-shadow: none;
       background-color: transparent;

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

@@ -1,4 +1,5 @@
 $load-indicator-segment-bg-color: getCustomVar(("$load-indicator-segment-bg-color")) !default;
+$load-indicator-inner-segment-border-color: getCustomVar(("$load-indicator-inner-segment-border-color")) !default;
 
 @use "sass:color";
 @use "../sizes" as *;
@@ -9,7 +10,13 @@ $load-indicator-segment-bg-color: $base-accent !default;
 $load-indicator-inner-segment-border-color: null !default;
 
 @if $mode == "light" {
-  $load-indicator-inner-segment-border-color: lighten(saturate(adjust-hue($base-accent, 2.9), 2.2), 44.3) !default; // #B4D6FA
+  @if $color == "blue" {
+    $load-indicator-inner-segment-border-color: lighten(saturate(adjust-hue($load-indicator-segment-bg-color, 2.9), 2.2), 44.3) !default;
+  }
+
+  @if $color == "saas" {
+    $load-indicator-inner-segment-border-color: mix($base-bg, $load-indicator-segment-bg-color, 68.82%) !default;
+  }
 }
 
 @if $mode == "dark" {
@@ -17,4 +24,5 @@ $load-indicator-inner-segment-border-color: null !default;
 }
 $never-used: collector((
 "$load-indicator-segment-bg-color": $load-indicator-segment-bg-color,
+"$load-indicator-inner-segment-border-color": $load-indicator-inner-segment-border-color,
 ));

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

@@ -1,9 +1,11 @@
 @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;
 $lookup-popover-arrow-border-color: $base-text-color !default;
 $lookup-popover-arrow-bg: $base-bg !default;

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

@@ -111,13 +111,10 @@
   "\f001",
   $fluent-base-icon-size,
   $lookup-icon-color,
+  $lookup-icon-color-active,
   $fluent-base-icon-size,
 );
 
-.dx-state-readonly .dx-lookup-field::before {
-  opacity: 0.5;
-}
-
 .dx-lookup-popup-wrapper {
   @include dx-dropdownlist-list-appearance();
 

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

@@ -8,28 +8,15 @@ $menu-item-selected-bg: getCustomVar(("$menu-item-selected-bg")) !default;
 // adduse
 
 $menu-popup-bg: $base-bg !default;
-$menu-item-hover-bg: null !default;
-$menu-item-bg-active: null !default;
+$menu-item-hover-bg: $base-hover-bg !default;
+$menu-item-bg-active: $base-active-bg !default;
 $menu-color: $base-text-color !default;
 $menu-item-expanded-color: $menu-color !default;
-$menu-item-selected-bg: $base-bg-selected !default;
+$menu-item-selected-bg: $base-selected-bg !default;
 $menu-popup-border-color: $base-border-color !default;
 $menu-separator-bg: $base-border-color !default;
 $menu-item-selected-color: $base-text-color !default;
-$menu-item-focused-selected-bg: $base-focus-bg !default;
-$menu-container-shadow-color: null !default;
-
-@if $mode == "light" {
-  $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
-  $menu-item-hover-bg: $base-bg-hover !default;
-  $menu-item-bg-active: $base-bg-active !default;
-}
-
-@if $mode == "dark" {
-  $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
-  $menu-item-hover-bg: $base-bg-hover !default;
-  $menu-item-bg-active: $base-bg-active !default;
-}
+$menu-item-focused-selected-bg: $base-selected-bg !default;
 
 $never-used: collector((
 "$menu-color": $menu-color,

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

@@ -4,3 +4,5 @@
 
 // adduse
 
+$menu-item-color-disabled: $base-foreground-disabled;
+

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

@@ -19,6 +19,10 @@
     color: $typography-link-color;
   }
 
+  &.dx-state-disabled {
+    color: $menu-item-color-disabled;
+  }
+
   &.dx-state-hover {
     background-color: $menu-item-hover-bg;
   }
@@ -49,8 +53,6 @@
 }
 
 .dx-menu-base {
-  @include dx-base-typography();
-
   &.dx-state-focused {
     outline: none;
   }
@@ -64,22 +66,4 @@
       line-height: $fluent-menu-item-line-height;
     }
   }
-
-  &.dx-rtl {
-    .dx-menu-item-content {
-      .dx-icon {
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      .dx-menu-item-popout-container {
-        margin-left: 0;
-        margin-right: auto;
-
-        .dx-menu-item-popout {
-          @include flip-horizontally();
-        }
-      }
-    }
-  }
 }

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

@@ -7,5 +7,5 @@
 // adduse
 
 $numberbox-spin-icon-color: $base-spin-icon-color !default;
-$numberbox-spin-icon-background-hover: $base-bg-hover !default;
-$numberbox-spin-icon-background-active: $base-bg-active !default;
+$numberbox-spin-icon-background-hover: $base-hover-bg !default;
+$numberbox-spin-icon-background-active: $base-active-bg !default;

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

@@ -17,7 +17,7 @@ $pivotgrid-field-area-box-background-color: null !default;
 $pivotgrid-field-area-box-font-weight: 400 !default;
 $pivotgrid-data-area-color: $base-text-color !default;
 $pivotgrid-totalcolor: $base-bg !default;
-$pivotgrid-grandtotalcolor: $base-hover-bg !default;
+$pivotgrid-grandtotalcolor: null !default;
 $pivotgrid-field-area-text-color: color.change(darken($pivotgrid-area-color, 26.2%), $alpha: 0.3) !default;
 $pivotgrid-accent-color: $base-accent !default;
 $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default;
@@ -27,7 +27,15 @@ $pivotgrid-position-indicator-color: gray !default;
 $pivotgrid-chevron-icon-color: $pivotgrid-area-color !default;
 
 @if $mode == "light" {
-  $pivotgrid-field-area-box-background-color: darken($base-bg, 5.88) !default;
+  @if $color == "blue"{
+    $pivotgrid-grandtotalcolor: $base-hover-bg !default;
+    $pivotgrid-field-area-box-background-color: darken($base-bg, 5.88) !default;
+  }
+  
+  @if $color == "saas" {
+    $pivotgrid-grandtotalcolor: color.change($base-hover-bg, $alpha: 0.4) !default;
+    $pivotgrid-field-area-box-background-color: color.change($base-hover-bg, $alpha: 0.4) !default;
+  } 
 }
 
 @if $mode == "dark" {