diff --git a/packages/devextreme/js/ui/toolbar/internal/ui.toolbar.menu.js b/packages/devextreme/js/ui/toolbar/internal/ui.toolbar.menu.js
index 3289c93dc28a..a63736c0ce43 100644
--- a/packages/devextreme/js/ui/toolbar/internal/ui.toolbar.menu.js
+++ b/packages/devextreme/js/ui/toolbar/internal/ui.toolbar.menu.js
@@ -5,7 +5,7 @@ import { extend } from '../../../core/utils/extend';
 import Widget from '../../widget/ui.widget';
 import Button from '../../button';
 import ToolbarMenuList from './ui.toolbar.menu.list';
-import { isMaterialBased } from '../../themes';
+import { isFluent, isMaterialBased } from '../../themes';
 import { ChildDefaultTemplate } from '../../../core/templates/child_default_template';
 import { toggleItemFocusableElementTabIndex } from '../ui.toolbar.utils';
 import { getWindow } from '../../../core/utils/window';
@@ -150,6 +150,7 @@ export default class DropDownMenu extends Widget {
         this._button = this._createComponent($button, Button, {
             icon: 'overflow',
             template: 'content',
+            stylingMode: isFluent() ? 'text' : 'contained',
             useInkRipple: this.option('useInkRipple'),
             hoverStateEnabled: false,
             focusStateEnabled: false,
diff --git a/packages/devextreme/scss/widgets/fluent/_colors.scss b/packages/devextreme/scss/widgets/fluent/_colors.scss
index 9479acb7fab2..0d707726e6e6 100644
--- a/packages/devextreme/scss/widgets/fluent/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/_colors.scss
@@ -15,10 +15,6 @@ $base-accent-hover: null !default;
 $base-accent-active: null !default;
 $base-accent-selected: null !default;
 
-$base-compound-accent: null !default;
-$base-compound-accent-hover: null !default;
-$base-compound-accent-active: null !default;
-
 $fluent-color-theme-modificator: null !default;
 
 /**
@@ -80,6 +76,10 @@ $base-foreground-inverted-hover: null !default;
 $base-foreground-inverted-focused: null !default;
 
 $base-neutral-background: null !default;
+$base-neutral-background1: null !default;
+$base-neutral-background1-hover: null !default;
+$base-neutral-background1-active: null !default;
+$base-neutral-background1-selected: null !default;
 $base-neutral-background2: null !default;
 $base-neutral-background2-hover: null !default;
 $base-neutral-background2-active: null !default;
@@ -177,13 +177,9 @@ $scrollview-pulldown-path: null !default;
 @if $mode == "light" {
   $base-accent: rgba(15, 108, 189, 1) !default; // #0f6cbd
   $base-accent-hover: rgba(17, 94, 163, 1) !default; // #115ea3
-  $base-accent-active: rgba(12, 59, 94, 1) !default; // #0c3b5e
+  $base-accent-active: rgba(15, 84, 140, 1) !default; // #0f548c
   $base-accent-selected: rgba(14, 71, 117, 1) !default; // #0E4775
 
-  $base-compound-accent: rgba(15, 108, 189, 1) !default; // #0f6cbd
-  $base-compound-accent-hover: rgba(17, 94, 163, 1) !default; // #115ea3
-  $base-compound-accent-active: rgba(15, 84, 140, 1) !default; // #0f548c
-
   $base-accent-foreground: #0F6CBD !default;
   $base-accent-foreground2: #115EA3 !default;
   $base-accent-foreground2-hover: #0F548C !default;
@@ -214,6 +210,10 @@ $scrollview-pulldown-path: null !default;
   $base-brand2-bg-selected: rgba(208, 229, 251, 1) !default; // #d0e5fb
 
   $base-neutral-background: rgba(245, 245, 245, 1) !default; // #f5f5f5
+  $base-neutral-background1: rgba(255, 255, 255, 1) !default; // #FFFFFF
+  $base-neutral-background1-hover: rgba(245, 245, 245, 1) !default; // #F5F5F5
+  $base-neutral-background1-active: rgba(224, 224, 224, 1) !default; // #E0E0E0
+  $base-neutral-background1-selected: rgba(235, 235, 235, 1) !default; // #EBEBEB
   $base-neutral-background2: rgba(250, 250, 250, 1) !default; // #FAFAFA
   $base-neutral-background2-hover: rgba(240, 240, 240, 1) !default; // #F0F0F0
   $base-neutral-background2-active: rgba(219, 219, 219, 1) !default; // #DBDBDB
@@ -268,9 +268,9 @@ $scrollview-pulldown-path: null !default;
 }
 
 @if $mode == "dark" {
-  $base-accent: rgba(17, 94, 163, 1) !default; // #115ea3
-  $base-accent-hover: rgba(15, 108, 189, 1) !default; // #0f6cbd
-  $base-accent-active: rgba(12, 59, 94, 1) !default; // #0c3b5e
+  $base-accent: rgba(71, 158, 245, 1) !default; // #479EF5
+  $base-accent-hover: rgba(98, 171, 245, 1) !default; // #62ABF5
+  $base-accent-active: rgba(40, 134, 222, 1) !default; // #2886DE
   $base-accent-selected: rgba(15, 84, 140, 1) !default; // #0f548c
 
   $base-accent-foreground: #479EF5 !default;
@@ -278,10 +278,6 @@ $scrollview-pulldown-path: null !default;
   $base-accent-foreground2-hover: #B4D6F5 !default;
   $base-accent-foreground2-active: #B4D6F5 !default;
 
-  $base-compound-accent: rgba(71, 158, 245, 1) !default; // #479EF5
-  $base-compound-accent-hover: rgba(98, 171, 245, 1) !default; // #62ABF5
-  $base-compound-accent-active: rgba(40, 134, 222, 1) !default; // #2886DE
-
   $fluent-color-theme-modificator: "dark" !default;
   $base-text-color: #fff !default;
   $base-label-color: rgba(255, 255, 255, 0.6) !default;
@@ -310,6 +306,10 @@ $scrollview-pulldown-path: null !default;
   $base-foreground-inverted-focused: rgba(15, 84, 140, 1) !default; // #0F548C
 
   $base-neutral-background: rgba(20, 20, 20, 1) !default; // #f5f5f5
+  $base-neutral-background1: rgba(41, 41, 41, 1) !default; // #292929
+  $base-neutral-background1-hover: rgba(61, 61, 61, 1) !default; // #3D3D3D
+  $base-neutral-background1-active: rgba(31, 31, 31, 1) !default; // #1F1F1F
+  $base-neutral-background1-selected: rgba(56, 56, 56, 1) !default; // #383838
   $base-neutral-background2: rgba(31, 31, 31, 1) !default; // #1F1F1F
   $base-neutral-background2-hover: rgba(51, 51, 51, 1) !default; // #333333
   $base-neutral-background2-active: rgba(20, 20, 20, 1) !default; // #141414
diff --git a/packages/devextreme/scss/widgets/fluent/_sizes.scss b/packages/devextreme/scss/widgets/fluent/_sizes.scss
index 5d46f345b02d..2516dde7ea5a 100644
--- a/packages/devextreme/scss/widgets/fluent/_sizes.scss
+++ b/packages/devextreme/scss/widgets/fluent/_sizes.scss
@@ -52,7 +52,7 @@ $fluent-button-icon-margin: null !default;
   $fluent-base-dropdown-widgets-shadow: 0 2px 7px $base-dropdown-shadow-color !default;
   $fluent-accordion-item-opened-margin: 0 !default;
   $fluent-button-height: 32px !default;
-  $fluent-button-icon-size: 18px !default;
+  $fluent-button-icon-size: 20px !default;
   $fluent-button-icon-margin: 8px !default;
 }
 
diff --git a/packages/devextreme/scss/widgets/fluent/button/_colors.scss b/packages/devextreme/scss/widgets/fluent/button/_colors.scss
index 62046793977a..816f96c02627 100644
--- a/packages/devextreme/scss/widgets/fluent/button/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/button/_colors.scss
@@ -305,9 +305,9 @@ $button-success-text-selected-bg: null !default;
 }
 
 @if $mode == "dark" {
-  $button-default-bg: $base-compound-accent !default;
-  $button-default-hover-bg: $base-compound-accent-hover !default;
-  $button-default-focused-bg: $base-compound-accent-hover !default; // #77b7f7 
+  $button-default-bg: $base-accent !default;
+  $button-default-hover-bg: $base-accent-hover !default;
+  $button-default-focused-bg: $base-accent-hover !default;
   $button-default-active-bg: #b4d6fa !default; 
   $button-default-selected-bg: #a6cff9 !default;
 
diff --git a/packages/devextreme/scss/widgets/fluent/calendar/_colors.scss b/packages/devextreme/scss/widgets/fluent/calendar/_colors.scss
index 3296d03158af..e7e2248e3e67 100644
--- a/packages/devextreme/scss/widgets/fluent/calendar/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/calendar/_colors.scss
@@ -34,7 +34,7 @@ $calendar-cell-hover-color: $calendar-color !default;
 * $name 50. Selected cell background color
 * $type color
 */
-$calendar-cell-selected-bg: $base-compound-accent !default;
+$calendar-cell-selected-bg: $base-accent !default;
 $calendar-cell-selected-color: $base-inverted-text-color !default;
 $calendar-cell-contoured-border-radius: 50% !default;
 $calendar-cell-contoured-border-color: null !default;
@@ -56,5 +56,5 @@ $calendar-week-number-border-radius: 0 !default;
   $calendar-hover-bg: $base-foreground-inverted-hover !default;
   $calendar-cell-hover-border-color: $base-foreground-inverted-hover !default;
   $calendar-cell-active-bg: $base-foreground-inverted-focused !default;
-  $calendar-cell-contoured-border-color: $base-compound-accent-active !default;
+  $calendar-cell-contoured-border-color: $base-accent-active !default;
 }
\ No newline at end of file
diff --git a/packages/devextreme/scss/widgets/fluent/checkBox/_colors.scss b/packages/devextreme/scss/widgets/fluent/checkBox/_colors.scss
index 398e1593e072..d68bd00774bd 100644
--- a/packages/devextreme/scss/widgets/fluent/checkBox/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/checkBox/_colors.scss
@@ -10,9 +10,9 @@ $checkbox-border-color-active: $base-border-color-accessible-focused !default;
 
 $checkbox-foreground-color: $base-element-bg !default;
 
-$checkbox-accent-color: $base-compound-accent !default;
-$checkbox-accent-color-hover: $base-compound-accent-hover !default;
-$checkbox-accent-color-focused: $base-compound-accent-active !default;
+$checkbox-accent-color: $base-accent !default;
+$checkbox-accent-color-hover: $base-accent-hover !default;
+$checkbox-accent-color-focused: $base-accent-active !default;
 
 $checkbox-invalid-color: $base-invalid-color !default;
 $checkbox-invalid-color-hover: $base-invalid-color-hover !default;
diff --git a/packages/devextreme/scss/widgets/fluent/contextMenu/_index.scss b/packages/devextreme/scss/widgets/fluent/contextMenu/_index.scss
index c5f2f458d8c7..17af19f1b334 100644
--- a/packages/devextreme/scss/widgets/fluent/contextMenu/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/contextMenu/_index.scss
@@ -17,7 +17,6 @@
 
 .dx-context-menu {
   .dx-menu-item {
-    font-size: $fluent-context-menu-font-size;
     color: $base-text-color;
 
     .dx-menu-item-content {
@@ -65,8 +64,8 @@
 
   .dx-submenu {
     background-color: $menu-popup-bg;
-    border-radius: $base-border-radius;
-    box-shadow: 0 2px 7px $menu-container-shadow-color;
+    border-radius: $fluent-context-menu-border-radius;
+    box-shadow: color.change($base-shadow-color, $alpha: 0.12) 0 2px 7.2px 0, color.change($base-shadow-color, $alpha: 0.14) 0 8px 16px 0
   }
 
   .dx-menu-separator {
diff --git a/packages/devextreme/scss/widgets/fluent/contextMenu/_sizes.scss b/packages/devextreme/scss/widgets/fluent/contextMenu/_sizes.scss
index 0954cadb8551..e3ba6fd5e52b 100644
--- a/packages/devextreme/scss/widgets/fluent/contextMenu/_sizes.scss
+++ b/packages/devextreme/scss/widgets/fluent/contextMenu/_sizes.scss
@@ -4,16 +4,14 @@
 
 $fluent-context-menu-horizontal-padding: null !default;
 $fluent-context-menu-container-vertical-padding: null !default;
-$fluent-context-menu-font-size: null !default;
+$fluent-context-menu-border-radius: $base-border-radius !default;
 
 @if $size == "default" {
-  $fluent-context-menu-horizontal-padding: 16px !default;
-  $fluent-context-menu-container-vertical-padding: 8px !default;
-  $fluent-context-menu-font-size: 14px !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;
-  $fluent-context-menu-font-size: 13px !default;
 }
diff --git a/packages/devextreme/scss/widgets/fluent/menu/_colors.scss b/packages/devextreme/scss/widgets/fluent/menu/_colors.scss
index 78144ccb2c1c..6b207a9a9099 100644
--- a/packages/devextreme/scss/widgets/fluent/menu/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/menu/_colors.scss
@@ -4,14 +4,15 @@
 
 // adduse
 
-$menu-popup-bg: $base-bg !default;
-$menu-item-hover-bg: $base-hover-bg !default;
+$menu-popup-bg: $base-neutral-background1 !default;
+$menu-item-hover-bg: null !default;
+$menu-item-bg-active: null !default;
 
 /**
 * $name 10. Text color
 * $type color
 */
-$menu-color: lighten($base-text-color, 46%) !default;
+$menu-color: $base-text-color !default;
 $menu-item-expanded-color: $menu-color !default;
 
 
@@ -19,20 +20,22 @@ $menu-item-expanded-color: $menu-color !default;
 * $name 20. Selected item background color
 * $type color
 */
-$menu-item-selected-bg: null !default;
+$menu-item-selected-bg: $base-neutral-background1-selected !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: color.change($base-focus-bg, $alpha: 0.7) !default;
+$menu-item-focused-selected-bg: $base-focus-bg !default;
 $menu-container-shadow-color: null !default;
 
 @if $mode == "light" {
-  $menu-item-selected-bg: lighten($base-text-color, 88%) !default;
-  $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
+  $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
+  $menu-item-hover-bg: $base-neutral-background1-hover !default;
+  $menu-item-bg-active: $base-neutral-background1-active !default;
 }
 
 @if $mode == "dark" {
-  $menu-item-selected-bg: lighten($base-bg, 8%) !default;
-  $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
+  $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;
 }
 
diff --git a/packages/devextreme/scss/widgets/fluent/menu/_index.scss b/packages/devextreme/scss/widgets/fluent/menu/_index.scss
index 6bd1562e6c91..7b2dba7d6822 100644
--- a/packages/devextreme/scss/widgets/fluent/menu/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/menu/_index.scss
@@ -11,9 +11,6 @@
 @use "../menuBase" as *;
 @use "../../base/menu";
 
-
-$fluent-menu-font-size: $fluent-base-font-size;
-
 .dx-context-menu-container-border {
   background-color: transparent;
 }
@@ -49,7 +46,6 @@ $fluent-menu-font-size: $fluent-base-font-size;
   }
 
   .dx-menu-item {
-    font-size: $fluent-menu-font-size;
     border-radius: $base-border-radius;
 
     .dx-menu-item-content {
@@ -91,10 +87,6 @@ $fluent-menu-font-size: $fluent-base-font-size;
     }
   }
 
-  .dx-treeview-toggle-item-visibility {
-    font-size: 18px;
-  }
-
   .dx-treeview-node {
     &.dx-state-focused {
       .dx-treeview-node .dx-treeview-toggle-item-visibility {
diff --git a/packages/devextreme/scss/widgets/fluent/menu/_sizes.scss b/packages/devextreme/scss/widgets/fluent/menu/_sizes.scss
index 7986336f46fa..9161d6ba6151 100644
--- a/packages/devextreme/scss/widgets/fluent/menu/_sizes.scss
+++ b/packages/devextreme/scss/widgets/fluent/menu/_sizes.scss
@@ -5,10 +5,10 @@
 $fluent-menu-vertical-padding: null !default;
 
 @if $size == "default" {
-  $fluent-menu-vertical-padding: 12px !default;
+  $fluent-menu-vertical-padding: 6px !default;
 }
 
 @if $size == "compact" {
-  $fluent-menu-vertical-padding: 8px !default;
+  $fluent-menu-vertical-padding: 4px !default;
 }
 
diff --git a/packages/devextreme/scss/widgets/fluent/menuBase/_index.scss b/packages/devextreme/scss/widgets/fluent/menuBase/_index.scss
index 17feb7c263e6..875ecce75a1a 100644
--- a/packages/devextreme/scss/widgets/fluent/menuBase/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/menuBase/_index.scss
@@ -12,8 +12,6 @@
 
 // adduse
 
-$fluent-menu-arrow-image-size: 7px;
-
 .dx-menu-item {
   color: $menu-color;
 
@@ -28,6 +26,10 @@ $fluent-menu-arrow-image-size: 7px;
   &.dx-state-focused {
     background-color: $menu-item-hover-bg;
   }
+
+  &.dx-state-active {
+    background-color: $menu-item-bg-active;
+  }
 }
 
 .dx-menu-item-selected {
@@ -60,11 +62,6 @@ $fluent-menu-arrow-image-size: 7px;
   .dx-menu-item {
     .dx-menu-item-content {
       line-height: $fluent-menu-item-line-height;
-
-      .dx-menu-item-popout {
-        min-width: $fluent-menu-arrow-image-size;
-        min-height: $fluent-menu-arrow-image-size;
-      }
     }
   }
 
diff --git a/packages/devextreme/scss/widgets/fluent/menuBase/_sizes.scss b/packages/devextreme/scss/widgets/fluent/menuBase/_sizes.scss
index 65c3ae41b431..6a55714929bc 100644
--- a/packages/devextreme/scss/widgets/fluent/menuBase/_sizes.scss
+++ b/packages/devextreme/scss/widgets/fluent/menuBase/_sizes.scss
@@ -5,16 +5,16 @@
 $fluent-menu-item-line-height: null !default;
 $fluent-menu-item-with-icon-horizontal-padding: null !default;
 $fluent-menu-horizontal-padding: null !default;
-$fluent-menu-icon-to-text-offset: 8px;
+$fluent-menu-icon-to-text-offset: 4px;
 
 @if $size == "default" {
-  $fluent-menu-item-line-height: 18px !default;
-  $fluent-menu-horizontal-padding: 16px !default;
-  $fluent-menu-item-with-icon-horizontal-padding: 64px !default;
+  $fluent-menu-item-line-height: 20px !default;
+  $fluent-menu-horizontal-padding: 12px !default;
+  $fluent-menu-item-with-icon-horizontal-padding: 40px !default;
 }
 
 @else if $size == "compact" {
   $fluent-menu-item-line-height: 16px !default;
-  $fluent-menu-horizontal-padding: 12px !default;
-  $fluent-menu-item-with-icon-horizontal-padding: 46px !default;
+  $fluent-menu-horizontal-padding: 8px !default;
+  $fluent-menu-item-with-icon-horizontal-padding: 32px !default;
 }
diff --git a/packages/devextreme/scss/widgets/fluent/popup/_colors.scss b/packages/devextreme/scss/widgets/fluent/popup/_colors.scss
index 56531f5026f5..e1b28ee8086c 100644
--- a/packages/devextreme/scss/widgets/fluent/popup/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/popup/_colors.scss
@@ -13,4 +13,4 @@ $popup-title-color: $base-text-color !default;
 $popup-title-border-color: $base-border-color !default;
 $popup-bottom-bg: $popup-title-bg !default;
 $popup-bottom-color: $base-text-color !default;
-$popup-border-radius: $base-border-radius !default;
+$popup-border-radius: $base-border-radius * 2 !default;
diff --git a/packages/devextreme/scss/widgets/fluent/popup/_index.scss b/packages/devextreme/scss/widgets/fluent/popup/_index.scss
index ae92b18c8bd4..d270ee48d41d 100644
--- a/packages/devextreme/scss/widgets/fluent/popup/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/popup/_index.scss
@@ -18,7 +18,7 @@ $fluent-popup-toolbar-label-font-size: $fluent-m-font-size;
 .dx-popup-wrapper {
   & > .dx-overlay-content {
     background: $overlay-content-bg;
-    box-shadow: 0 11px 15px -7px color.change($base-shadow-color, $alpha: 0.2), 0 24px 38px 3px color.change($base-shadow-color, $alpha: 0.14), 0 9px 46px 8px color.change($base-shadow-color, $alpha: 0.12);
+    box-shadow: color.change($base-shadow-color, $alpha: 0.133) 0 6.4px 14.4px 0, color.change($base-shadow-color, $alpha: 0.11) 0 1.2px 3.6px 0;
     border-radius: $popup-border-radius;
   }
 
@@ -28,7 +28,7 @@ $fluent-popup-toolbar-label-font-size: $fluent-m-font-size;
 
   .dx-state-focused {
     &.dx-overlay-content {
-      border: 1px solid $base-accent;
+      box-shadow: color.change($base-shadow-color, $alpha: 0.133) 0 12px 24px 0, color.change($base-shadow-color, $alpha: 0.11) 0 4px 8px 0;
     }
   }
 }
diff --git a/packages/devextreme/scss/widgets/fluent/popup/_sizes.scss b/packages/devextreme/scss/widgets/fluent/popup/_sizes.scss
index c4a53abfb754..8cb3082df7b6 100644
--- a/packages/devextreme/scss/widgets/fluent/popup/_sizes.scss
+++ b/packages/devextreme/scss/widgets/fluent/popup/_sizes.scss
@@ -13,18 +13,18 @@ $fluent-popup-toolbar-item-spacing: 8px !default;
 
 @if $size == "default" {
   $fluent-popup-content-padding: 24px !default;
-  $fluent-popup-content-withtitle-top-padding: 20px !default;
+  $fluent-popup-content-withtitle-top-padding: 24px !default;
 
   $fluent-popup-toolbar-horizontal-padding: 24px !default;
-  $fluent-popup-bottom-toolbar-height: 52px !default;
-  $fluent-popup-toolbar-height: 64px !default;
+  $fluent-popup-bottom-toolbar-height: 48px !default;
+  $fluent-popup-toolbar-height: 48px !default;
 }
 
 @else if $size == "compact" {
   $fluent-popup-content-padding: 16px !default;
-  $fluent-popup-content-withtitle-top-padding: 14px !default;
+  $fluent-popup-content-withtitle-top-padding: 16px !default;
 
   $fluent-popup-toolbar-horizontal-padding: 16px !default;
-  $fluent-popup-bottom-toolbar-height: 44px !default;
-  $fluent-popup-toolbar-height: 42px !default;
+  $fluent-popup-bottom-toolbar-height: 36px !default;
+  $fluent-popup-toolbar-height: 36px !default;
 }
diff --git a/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss b/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss
index 71fb5a0bfa05..1eef27f6c641 100644
--- a/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss
@@ -15,10 +15,10 @@ $progressbar-bg: $base-neutral-background6 !default;
 * $name 20. Selected range background color
 * $type color
 */
-$progressbar-range-bg: $base-compound-accent !default;
+$progressbar-range-bg: $base-accent !default;
 $progressbar-container-disabled-bg: $base-neutral-background-disabled !default;
 $progressbar-range-disabled-bg: $base-foreground-disabled !default;
-$progressbar-range-indeterminate-color: $base-compound-accent !default;
+$progressbar-range-indeterminate-color: $base-accent !default;
 $progressbar-range-invalid-color: $base-invalid-color !default;
 
 $progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%;
@@ -29,4 +29,4 @@ $progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $p
 * $name 30. Label color
 * $type color
 */
-$progressbar-label-color: $base-compound-accent !default;
+$progressbar-label-color: $base-accent !default;
diff --git a/packages/devextreme/scss/widgets/fluent/radioGroup/_colors.scss b/packages/devextreme/scss/widgets/fluent/radioGroup/_colors.scss
index 3a02379dfc8d..2d69195e7f02 100644
--- a/packages/devextreme/scss/widgets/fluent/radioGroup/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/radioGroup/_colors.scss
@@ -4,9 +4,9 @@
 
 // adduse
 
-$radiogroup-accent-color: $base-compound-accent !default;
-$radiogroup-accent-color-hover: $base-compound-accent-hover !default;
-$radiogroup-accent-color-active: $base-compound-accent-active !default;
+$radiogroup-accent-color: $base-accent !default;
+$radiogroup-accent-color-hover: $base-accent-hover !default;
+$radiogroup-accent-color-active: $base-accent-active !default;
 
 $radiogroup-border-color: $base-border-color-accessible !default;
 $radiogroup-border-color-hover: $base-border-color-accessible-hover !default;
diff --git a/packages/devextreme/scss/widgets/fluent/slider/_colors.scss b/packages/devextreme/scss/widgets/fluent/slider/_colors.scss
index b0d740391edb..f4f79cf8489a 100644
--- a/packages/devextreme/scss/widgets/fluent/slider/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/slider/_colors.scss
@@ -15,9 +15,9 @@ $fluent-slider-bar-bg: $base-neutral-foreground3 !default;
 * $name 20. Selected range background color
 * $type color
 */
-$slider-accent-color: $base-compound-accent !default;
-$slider-accent-color-hover: $base-compound-accent-hover !default;
-$slider-accent-color-focused: $base-compound-accent-active !default;
+$slider-accent-color: $base-accent !default;
+$slider-accent-color-hover: $base-accent-hover !default;
+$slider-accent-color-focused: $base-accent-active !default;
 
 $slider-invalid-color: $base-invalid-color !default;
 $slider-invalid-color-hover: $base-invalid-color-hover !default;
diff --git a/packages/devextreme/scss/widgets/fluent/switch/_colors.scss b/packages/devextreme/scss/widgets/fluent/switch/_colors.scss
index 649581859b3b..e476a316858d 100644
--- a/packages/devextreme/scss/widgets/fluent/switch/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/switch/_colors.scss
@@ -4,9 +4,9 @@
 
 // adduse
 
-$switch-accent-color: $base-compound-accent !default;
-$switch-accent-color-hover: $base-compound-accent-hover !default;
-$switch-accent-color-focused: $base-compound-accent-active !default;
+$switch-accent-color: $base-accent !default;
+$switch-accent-color-hover: $base-accent-hover !default;
+$switch-accent-color-focused: $base-accent-active !default;
 
 /**
 * $name 20. Track 'OFF' background color
@@ -24,7 +24,7 @@ $switch-handle-off-bg: $base-border-color-accessible !default;
 * $name 40. Track 'ON' background color
 * $type color
 */
-$switch-on-bg: $base-compound-accent !default;
+$switch-on-bg: $base-accent !default;
 
 /**
 * $name 50. Handle 'ON' background color
diff --git a/packages/devextreme/scss/widgets/fluent/tagBox/_index.scss b/packages/devextreme/scss/widgets/fluent/tagBox/_index.scss
index 6d7203c6964a..8ce2cf41e82e 100644
--- a/packages/devextreme/scss/widgets/fluent/tagBox/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/tagBox/_index.scss
@@ -146,7 +146,7 @@
   &.dx-state-focused {
     .dx-tag-content {
       color: $tagbox-tag-active-color;
-      border-color: $base-compound-accent-active;
+      border-color: $base-accent-active;
     }
   }
 }
diff --git a/packages/devextreme/scss/widgets/fluent/textEditor/_colors.scss b/packages/devextreme/scss/widgets/fluent/textEditor/_colors.scss
index 78e5f1a83fc6..8abbc8a81c30 100644
--- a/packages/devextreme/scss/widgets/fluent/textEditor/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/textEditor/_colors.scss
@@ -48,7 +48,7 @@ $texteditor-hover-border-color: $texteditor-color !default;
 * $name 70. Focused border color
 * $type color
 */
-$texteditor-focused-border-color: $base-compound-accent !default;
+$texteditor-focused-border-color: $base-accent !default;
 
 /**
 * $name 40. Hovered background color
diff --git a/packages/devextreme/scss/widgets/fluent/textEditor/_index.scss b/packages/devextreme/scss/widgets/fluent/textEditor/_index.scss
index 6372172eddf6..053e803d58d1 100644
--- a/packages/devextreme/scss/widgets/fluent/textEditor/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/textEditor/_index.scss
@@ -116,7 +116,7 @@ $fluent-editor-custom-button-margin: 6px;
   &.dx-state-focused,
   &.dx-state-focused.dx-state-hover {
     .dx-texteditor-label {
-      color: $base-compound-accent;
+      color: $base-accent;
       font-size: $fluent-texteditor-label-font-size;
     }
 
diff --git a/packages/devextreme/scss/widgets/fluent/toolbar/_index.scss b/packages/devextreme/scss/widgets/fluent/toolbar/_index.scss
index 2d104aaaf72b..07c1cc074824 100644
--- a/packages/devextreme/scss/widgets/fluent/toolbar/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/toolbar/_index.scss
@@ -162,43 +162,7 @@
 
 .dx-toolbar-button {
   &.dx-toolbar-text-auto-hide {
-    .dx-button {
-      @include dx-button-onlyicon-sizing();
-    }
-
-    .dx-button-has-icon.dx-button-has-text {
-      border-radius: 50%;
-    }
-  }
-
-  .dx-menu {
-    .dx-menu-item {
-      color: $toolbar-color;
-      font-size: $fluent-base-font-size;
-      font-weight: 500;
-      height: $fluent-button-height;
-
-      .dx-menu-item-content {
-        padding-top: $fluent-toolbar-menu-vertical-padding;
-        padding-bottom: $fluent-toolbar-menu-vertical-padding;
-        line-height: $fluent-toolbar-menu-item-line-height;
-      }
-
-      &.dx-menu-item-has-text.dx-menu-item-has-icon {
-        .dx-icon {
-          @include dx-icon-margin(6px);
-        }
-      }
-
-      &.dx-state-hover {
-        background-color: $button-normal-hover-bg;
-      }
-
-      &.dx-state-focused,
-      &.dx-state-active {
-        background-color: $button-normal-focused-bg;
-      }
-    }
+    @include dx-button-onlyicon-sizing();
   }
 }
 
diff --git a/packages/devextreme/scss/widgets/fluent/toolbar/_sizes.scss b/packages/devextreme/scss/widgets/fluent/toolbar/_sizes.scss
index 70097d76d6fd..7b28e127bca6 100644
--- a/packages/devextreme/scss/widgets/fluent/toolbar/_sizes.scss
+++ b/packages/devextreme/scss/widgets/fluent/toolbar/_sizes.scss
@@ -4,22 +4,18 @@
 // adduse
 
 $fluent-toolbar-height: null !default;
-$fluent-toolbar-menu-vertical-padding: null !default;
-$fluent-toolbar-menu-item-line-height: null !default;
 
 $fluent-toolbar-padding: 0 !default;
-$fluent-toolbar-item-spacing: 5px !default;
-$fluent-toolbar-label-font-size: $fluent-m-font-size !default;
-$fluent-toolbar-section-padding: 15px !default;
+$fluent-toolbar-item-spacing: 4px !default;
+$fluent-toolbar-label-font-size: $fluent-s-font-size !default;
+$fluent-toolbar-section-padding: null !default;
 
 @if $size == "default" {
-  $fluent-toolbar-menu-item-line-height: 24px !default;
-  $fluent-toolbar-height: 56px !default;
-  $fluent-toolbar-menu-vertical-padding: 7px !default;
+  $fluent-toolbar-height: 48px !default;
+  $fluent-toolbar-section-padding: 12px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-toolbar-menu-item-line-height: 20px !default;
-  $fluent-toolbar-height: 38px !default;
-  $fluent-toolbar-menu-vertical-padding: 5px !default;
+  $fluent-toolbar-height: 36px !default;
+  $fluent-toolbar-section-padding: 8px !default;
 }